/* ==========================================================================
   Suria Crestway Sdn. Bhd. — Homepage
   Everything is scoped under .sc-home and prefixed .sc- so this can be
   dropped into a WordPress shortcode without fighting the active theme.

   IMAGE RULES ARE PREFIXED `.sc-home` ON PURPOSE — don't "simplify" them.
   Page builders ship a blanket image reset at the same specificity as a plain
   component rule. Elementor's is

       .elementor img { border:none; border-radius:0; box-shadow:none;
                        height:auto; max-width:100% }

   which is (0,1,1) — identical to `.sc-header__brand img`. A plugin stylesheet
   is enqueued before the theme's and before Elementor's, so on an equal-
   specificity tie the later sheet wins: every image depending on a CSS height
   collapsed, the header logo rendered at its full 693x1007, and the hero
   photograph stopped covering. The `.sc-home` prefix makes these (0,2,1), which
   wins on specificity and so holds regardless of load order.

   State modifiers are prefixed alongside their base rule (`.sc-showcase__img`
   AND `--on`, `.sc-scard img` AND `:hover img`). Raise only the base and it
   starts outranking its own modifier — the showcase would sit permanently at
   opacity 0.
   ========================================================================== */

.sc-home {
  /* Brand */
  --sc-brand:      #262aad;
  --sc-brand-dark: #1c1f8a;
  --sc-brand-tint: #eef0fb;
  --sc-brand-tint2:#e3e7f8;
  --sc-accent:     #f42e39;

  /* Neutrals */
  --sc-navy:  #070a26;
  --sc-ink:   #0e1130;
  --sc-ink-2: #474c6d;
  --sc-ink-3: #7a7f9c;
  --sc-line:  #e3e6f1;
  --sc-cream: #f8f7f4;
  --sc-paper: #ffffff;

  /* Layout */
  --sc-w: 1340px;
  --sc-r: 16px;

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sc-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- reset (scoped) ------------------------------------------------------
   Wrapped in :where() so it carries ZERO specificity. Without this the
   reset outranks the component classes below (and would, for example,
   repaint .sc-hero__title with the default heading colour).            */
.sc-home *,
.sc-home *::before,
.sc-home *::after { box-sizing: border-box; }

:where(.sc-home) :where(h1, h2, h3, p, figure) { margin: 0; }
:where(.sc-home) :where(img) { display: block; max-width: 100%; }
:where(.sc-home) :where(button) { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:where(.sc-home) :where(a) { color: inherit; text-decoration: none; }

:where(.sc-home) :where(h1, h2, h3) {
  font-family: "Archivo", "Inter", sans-serif;
  color: var(--sc-ink);
  font-weight: 600;
}

/* 1340px fixed, no left/right padding as specified.
   Below 1340 the safety inset keeps content off the viewport edge. */
.sc-container {
  width: var(--sc-w);
  max-width: 100%;
  margin-inline: auto;
}
@media (max-width: 1379px) {
  .sc-container { padding-inline: 24px; }
}

.sc-i { width: 1em; height: 1em; fill: none; stroke: currentColor;
        stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
        flex: none; }
.sc-i--accent { color: var(--sc-accent); }

/* --- shared type --------------------------------------------------------- */
.sc-h2 {
  font-size: 33px;
  line-height: 1.36;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.sc-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sc-ink);
}
.sc-eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sc-accent);
  flex: none;
}

/* --- buttons ------------------------------------------------------------- */
.sc-btn {
  display: inline-flex;
  align-self: flex-start;   /* prevents stretching full-width inside flex columns */
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.sc-btn--light {
  background: #fff;
  color: var(--sc-ink);
  padding: 13px 26px;
  font-size: 14px;
  border-radius: 8px;
}
.sc-btn--light:hover { background: var(--sc-brand-tint); }
.sc-btn--outline { border: 1px solid var(--sc-line); }
.sc-btn--outline:hover { border-color: var(--sc-brand-tint2); }

.sc-btn--brand {
  background: var(--sc-brand);
  color: #fff;
  border-radius: 8px;
  padding: 13px 26px;
  font-size: 14px;
}
.sc-btn--brand:hover { background: var(--sc-brand-dark); }


/* ==========================================================================
   1. HERO
   ========================================================================== */
.sc-hero {
  position: relative;
  background: var(--sc-navy);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 150px;
  padding-bottom: 64px;
  isolation: isolate;
}
.sc-hero__media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
.sc-home .sc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.sc-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(98deg,
      rgba(7,10,38,.94) 0%,
      rgba(7,10,38,.88) 26%,
      rgba(8,14,44,.66) 44%,
      rgba(8,16,48,.36) 62%,
      rgba(8,18,52,.22) 100%),
    linear-gradient(to bottom, rgba(7,10,38,.5) 0%, rgba(7,10,38,0) 26%, rgba(7,10,38,.35) 100%);
}

.sc-hero__inner { position: relative; }

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.sc-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sc-accent);
  flex: none;
}

.sc-hero__title {
  margin-top: 30px;
  font-size: 50px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.028em;
  color: #fff;
}
.sc-hero__title strong { font-weight: 700; }
.sc-dot { color: var(--sc-accent); }

.sc-hero__lede {
  margin-top: 24px;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
}

.sc-hero__actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.sc-trust { display: flex; align-items: center; gap: 14px; }
.sc-trust__stack { display: flex; }
.sc-home .sc-trust__stack img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.85);
}
.sc-trust__stack img + img { margin-left: -13px; }
.sc-trust__text {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.75);
}

/* stats bar — sits inside the hero, no overlap onto the section below */
.sc-statswrap {
  position: relative;
  margin-top: 64px;
}
.sc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sc-stat {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}
.sc-stat__num {
  font-family: "Archivo", sans-serif;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
}
.sc-stat__rule {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,.22);
  flex: none;
  margin-left: auto;
}
.sc-stat__label {
  font-size: 12.5px;
  line-height: 1.42;
  color: rgba(255,255,255,.68);
  flex: none;
}


/* ==========================================================================
   2. CAPABILITY
   ========================================================================== */
.sc-capability {
  background: var(--sc-cream);
  padding: 104px 0;
}
.sc-statement {
  margin-top: 26px;
  max-width: 1180px;
  font-size: 33px;
  line-height: 1.36;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sc-ink);
}

/* scroll-scrubbed word reveal — see [data-reveal] in js/main.js.
   Opacity is set directly per word on every scroll frame, so this is
   just a smoothing transition between those steps, not the effect itself. */
.sc-reveal__word {
  display: inline-block;
  vertical-align: top;
}
.sc-reveal__word-inner {
  display: inline-block;
  opacity: 1;
  transition: opacity .08s linear;
}

.sc-capability__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 555px 1fr;
  gap: 42px;
  align-items: start;
}
.sc-capability__left { display: flex; flex-direction: column; height: 100%; }

.sc-minicards {
  margin-top: auto;          /* bottom-align the pair with the showcase image */
  padding-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sc-minicard {
  background: rgba(255,255,255,.72);
  border: 1px solid #ecebe5;
  border-radius: 8px;
  padding: 24px 22px 26px;
}
.sc-minicard__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ecebe5;
  color: var(--sc-brand);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sc-minicard__icon .sc-i { font-size: 19px; }
.sc-home .sc-minicard__icon img {
  width: 30px; height: 30px;
  object-fit: contain;
}
.sc-minicard h3 {
  margin-top: 42px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sc-minicard p {
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--sc-ink-3);
}

.sc-showcase {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 743 / 428;
}
.sc-home .sc-showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.15s ease;
}
.sc-home .sc-showcase__img--on { opacity: 1; }
.sc-showcase__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 90px 32px 28px;
  background: linear-gradient(to top, rgba(7,10,38,.88) 22%, rgba(7,10,38,0));
  color: #fff;
}
.sc-showcase__caption p {
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 400px;
  color: rgba(255,255,255,.95);
}
.sc-showcase__caption p::before { content: "\201C"; }
.sc-showcase__caption p::after  { content: "\201D"; }
.sc-progress {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12.5px;
  color: rgba(255,255,255,.8);
  font-variant-numeric: tabular-nums;
}
.sc-progress__track {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.28);
  position: relative;
}
.sc-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 17%;
  background: var(--sc-accent);
}


/* ==========================================================================
   3. SERVICES
   ========================================================================== */
.sc-services { background: #fff; padding: 104px 0 108px; }

.sc-sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.sc-nav { display: flex; gap: 10px; }
.sc-nav__btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #f1f2f7;
  color: var(--sc-ink-3);
  display: grid;
  place-items: center;
  transition: background-color .2s ease, color .2s ease;
}
.sc-nav__btn .sc-i { font-size: 18px; }
.sc-nav__btn--on { background: var(--sc-brand); color: #fff; }
.sc-nav__btn:hover { background: var(--sc-brand-dark); color: #fff; }
.sc-nav__btn:disabled { opacity: .4; cursor: default; }
.sc-nav__btn:disabled:hover { background: #f1f2f7; color: var(--sc-ink-3); }

.sc-tabs {
  margin-top: 34px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sc-tab {
  padding: 13px 24px;
  border-radius: 8px;
  background: #f4f5f9;
  color: var(--sc-ink-3);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
.sc-tab:hover { background: var(--sc-brand-tint); color: var(--sc-brand); }
.sc-tab--on,
.sc-tab--on:hover {
  background: var(--sc-brand);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(38,42,173,.65);
}

.sc-carousel { margin-top: 30px; overflow: hidden; }
.sc-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 320px;
  gap: 20px;
  transition: transform .55s cubic-bezier(.4,.05,.2,1);
}
.sc-scard {
  position: relative;
  height: 430px;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f5f9;
  isolation: isolate;
}
.sc-home .sc-scard img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.sc-home .sc-scard:hover img { transform: scale(1.05); }

/* front/back faces — swapped by the pixel-dissolve transition on hover/tap */
.sc-scard__face { position: absolute; inset: 0; }
.sc-scard__face--front { z-index: 1; }
.sc-scard__face--front::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,10,38,.62) 0%, rgba(7,10,38,.05) 42%, rgba(7,10,38,.22) 100%);
}
.sc-scard__face--back {
  z-index: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 28px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.sc-scard__desc {
  font-size: 14px;
  line-height: 1.62;
  color: var(--sc-ink-2);
}
.sc-scard__viewmore {
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
  letter-spacing: -0.005em;
  transition: color .2s ease;
}
.sc-scard__viewmore:hover { color: var(--sc-brand); }

/* pixel-dissolve overlay — see [data-pixel-card] in js/main.js */
.sc-scard__pixels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.sc-scard__pixel {
  position: absolute;
  background: #fff;
  opacity: 0;
  transition: opacity .05s linear;
}
.sc-scard__pixel--show { opacity: 1; }

.sc-scard__flag,
.sc-scard__idx {
  position: absolute;
  top: 16px;
  z-index: 2;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 13px;
}
.sc-scard__flag { left: 16px; background: var(--sc-accent); color: #fff; }
.sc-scard__idx  { right: 16px; background: rgba(255,255,255,.94); color: var(--sc-ink); letter-spacing: .06em; }

.sc-scard__foot {
  position: absolute;
  inset: auto 16px 16px 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sc-scard__label {
  background: #fff;
  color: var(--sc-ink);
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 8px;
}
.sc-scard__plus {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--sc-brand);
  display: grid;
  place-items: center;
  flex: none;
  transition: background-color .2s ease, color .2s ease;
}
.sc-scard__plus .sc-i { font-size: 17px; }
.sc-scard:hover .sc-scard__plus { background: var(--sc-brand); color: #fff; }


/* ==========================================================================
   4. WHY CHOOSE US
   ========================================================================== */
/* Full-bleed photographic backdrop; the panel on top is frosted glass, so the
   water texture stays readable through it. */
.sc-why {
  position: relative;
  padding: 88px 0;
  background: url("../assets/img/why-bg.webp") center / cover no-repeat #0d2b52;
  isolation: isolate;
}
.sc-why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 16, 54, .28);
  z-index: -1;
}
/* Same glass recipe as the hero stats bar: barely-there white fill, hairline
   border, blur behind. Sits on a dark photo, so all text inside runs white. */
.sc-why__panel {
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 30px;
}

.sc-why__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.sc-why__visual {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f6fa;
  aspect-ratio: 600 / 430;
}
.sc-home .sc-why__visual img { width: 100%; height: 100%; object-fit: cover; }

.sc-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sc-why .sc-feat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 22px;
}
.sc-feat__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  display: grid;
  place-items: center;
}
.sc-feat__icon .sc-i { font-size: 20px; }
.sc-feat h3 {
  margin-top: 18px;
  font-size: 16.5px;
  letter-spacing: -0.012em;
}
.sc-why .sc-feat h3 { color: #fff; }
.sc-why .sc-feat p { color: rgba(255,255,255,.68); }
.sc-feat p {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--sc-ink-3);
}


/* ==========================================================================
   5. PROCESS
   ========================================================================== */
.sc-process { background: #fff; padding: 104px 0 110px; }
.sc-process__grid {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 80px;
}
.sc-process__left { position: sticky; top: 32px; align-self: start; }
.sc-process__left .sc-h2 { margin-top: 14px; max-width: 340px; letter-spacing: 0; }
.sc-process__figure {
  margin-top: 28px;
  width: 340px;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 340 / 400;
}
.sc-home .sc-process__figure img { width: 100%; height: 100%; object-fit: cover; }

.sc-accordion { margin-top: 0; }
.sc-acc { border-bottom: 1px solid var(--sc-line); }
.sc-acc:first-child { border-top: 1px solid var(--sc-line); }

.sc-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  text-align: left;
}
.sc-acc__step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--sc-ink-3);
  font-variant-numeric: tabular-nums;
  flex: none;
  transition: color .2s ease;
}
.sc-acc__title {
  flex: 1;
  font-family: "Archivo", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .075em;
  color: var(--sc-ink-3);
  transition: color .22s ease, font-size .22s ease, letter-spacing .22s ease;
}
.sc-acc__toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--sc-line);
  color: var(--sc-ink-3);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .28s ease, background-color .22s ease,
              color .22s ease, border-color .22s ease;
}
.sc-acc__toggle .sc-i { font-size: 15px; }

.sc-acc:hover .sc-acc__title { color: var(--sc-ink); }
.sc-acc:hover .sc-acc__toggle { border-color: var(--sc-brand); color: var(--sc-brand); }

.sc-acc--open .sc-acc__step { color: var(--sc-accent); }
.sc-acc--open .sc-acc__title {
  font-size: 21px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.018em;
  color: var(--sc-ink);
}
.sc-acc--open .sc-acc__toggle {
  transform: rotate(45deg);
  background: var(--sc-brand);
  border-color: var(--sc-brand);
  color: #fff;
}

.sc-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s ease;
}
.sc-acc__panel > p { overflow: hidden; }
.sc-acc--open .sc-acc__panel { grid-template-rows: 1fr; }
.sc-acc__panel p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--sc-ink-3);
  max-width: 640px;
}
.sc-acc--open .sc-acc__panel p { padding-bottom: 26px; }


/* ==========================================================================
   6. CONTACT
   ========================================================================== */
.sc-contact { background: var(--sc-cream); padding: 88px 0 92px; }
.sc-contact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
/* The icon well is absolutely positioned at bottom:26px and is 48px tall, so it
   reaches 74px up from the bottom edge — the bottom padding is what keeps the
   copy off it. 96px leaves ~22px of clearance, which the four-line Ampang
   address needs; at 78px it sat almost on top of the icon. */
.sc-ccard {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 30px 28px 96px;
  min-height: 232px;
  box-shadow: 0 2px 10px -4px rgba(14, 17, 48, .08);
}
.sc-ccard h3 { font-size: 19px; letter-spacing: -0.015em; }
.sc-ccard p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--sc-ink-3);
  word-break: break-word;
}
.sc-ccard__icon {
  position: absolute;
  left: 28px;
  bottom: 26px;
  width: 48px; height: 48px;
  border-radius: 8px;
  background: var(--sc-brand-tint);
  color: var(--sc-brand);
  display: grid;
  place-items: center;
}
.sc-ccard__icon .sc-i { font-size: 21px; }
.sc-ccard__plus {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sc-line);
  color: var(--sc-ink-3);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px -4px rgba(14, 17, 48, .16);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sc-ccard__plus .sc-i { font-size: 15px; }
.sc-ccard:hover .sc-ccard__plus {
  background: var(--sc-brand);
  border-color: var(--sc-brand);
  color: #fff;
}


/* ==========================================================================
   Responsive — the design width is 1340px; these keep it usable below that
   ========================================================================== */
@media (max-width: 1200px) {
  .sc-hero__title { font-size: 44px; }
  .sc-statement, .sc-h2 { font-size: 29px; }
  .sc-capability__grid { grid-template-columns: 1fr; gap: 46px; }
  .sc-minicards { padding-top: 40px; }
  .sc-showcase { aspect-ratio: 16 / 9; }
  .sc-why__body { grid-template-columns: 1fr; gap: 30px; }
  .sc-process__grid { grid-template-columns: 1fr; gap: 48px; }
  .sc-process__left { position: static; }
  .sc-process__figure { margin-top: 36px; }
}

@media (max-width: 900px) {
  .sc-hero { min-height: 0; padding-top: 84px; padding-bottom: 56px; }
  .sc-hero__title { font-size: 38px; }
  .sc-home .sc-hero__media img { object-position: 70% 50%; }
  .sc-hero__actions { flex-wrap: wrap; gap: 22px; }
  .sc-stats { grid-template-columns: 1fr 1fr; }

  /* The desktop cells are narrow enough that flex + margin-left:auto reads fine,
     but once the cells get wide the divider lands at a different x in every row —
     it's pushed leftwards by each label's own width, and the labels end up
     right-ragged with it. A fixed 3-column grid pins the number, divider and
     label to the same positions in all four rows. */
  .sc-stat {
    display: grid;
    grid-template-columns: 84px 1px 1fr;
    align-items: center;
    gap: 16px;
  }
  .sc-stat__rule { margin-left: 0; height: 38px; }
  .sc-minicards, .sc-why__grid, .sc-contact__grid { grid-template-columns: 1fr; }
  .sc-why { padding: 48px 0; }
  .sc-why__panel { padding: 20px; }
  .sc-ccard { min-height: 0; }
}

@media (max-width: 620px) {
  .sc-hero__title { font-size: 30px; }
  .sc-statement, .sc-h2 { font-size: 23px; }
  /* 2×2 rather than a single column, so the block stays compact. Each cell is
     only ~150px wide at 390px, which can't hold the number-divider-label row, so
     the tiles stack and the divider turns horizontal between the two. */
  .sc-stats { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
  .sc-stat {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 9px;
    padding: 15px 14px 16px;
  }
  .sc-stat__num { font-size: 25px; }
  .sc-stat__rule { width: 22px; height: 1px; }
  .sc-stat__label { font-size: 12px; }
  .sc-carousel__track { grid-auto-columns: 268px; }
  .sc-process__figure { width: 100%; }
  .sc-acc--open .sc-acc__title { font-size: 18px; }
}

/* ==========================================================================
   ENTRANCE ANIMATION
   [data-anim] elements rise/fade in as they scroll into view. The resting
   state here is fully VISIBLE — the hidden state only exists under
   .sc-anim-on, which js/main.js adds. So with JS off, JS broken, or
   IntersectionObserver missing, every element just renders normally.
   Stagger comes from --sc-d, set per element by the same module.
   ========================================================================== */
/* No will-change here on purpose: promoting these to their own compositing
   layer stops them painting at all inside .sc-why__panel, which uses
   backdrop-filter. The animation is cheap enough without the hint. */
.sc-home.sc-anim-on [data-anim] {
  opacity: 0;
}
.sc-home.sc-anim-on [data-anim="up"]    { transform: translateY(22px); }
.sc-home.sc-anim-on [data-anim="left"]  { transform: translateX(-26px); }
.sc-home.sc-anim-on [data-anim="scale"] { transform: scale(.965); }

/* Transition lives on the "in" state only, so applying the hidden state at
   startup can't animate backwards from visible. */
.sc-home.sc-anim-on [data-anim].sc-anim-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms),
    transform .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .sc-home *, .sc-home *::before, .sc-home *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  /* Never leave anything hidden waiting on a transition that won't run. */
  .sc-home.sc-anim-on [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   SITE HEADER
   Overlays the hero, so it is genuinely transparent — backdrop-filter blurs
   the hero photograph behind it rather than a copy painted inside the header.
   Same glass recipe as the hero stats bar: barely-there white fill, hairline
   white border, blur(10px). Ready to move into css/style.css as-is.
   ========================================================================== */
.sc-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  color: #fff;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Full width, NOT the 1340px .sc-container — the bar spans edge to edge and so do
   its contents, so the logo plate and CTA sit flush in the corners. That means
   they don't share a left edge with the hero headline below (the container is
   centred, so its inset moves with the window while a flush bar stays at 0);
   the flush corners are the intended look here.
   position:relative anchors the absolutely-centred nav below. */
.sc-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 34px;
  min-height: 82px;
  width: 100%;
  padding-inline: 0;
}

/* Full stacked lockup on a square-cornered white plate, flush to the left edge
   of the bar — the plate lifts the navy wordmark off the dark glass. */
.sc-header__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 9px 15px;
  background: #fff;
}
.sc-home .sc-header__brand img {
  height: 64px;
  width: auto;
}

/* Centred on the bar itself, not in the space left over between the logo plate
   and the button — those two have very different widths, so flex auto-margins
   would sit the links noticeably off-centre. */
.sc-header__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 34px;
}
.sc-header__nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,.74);
  transition: color .2s ease;
}
.sc-header__nav a:hover,
.sc-header__nav a:focus-visible { color: #fff; }

/* .sc-btn carries align-self:flex-start (it stops the capability button
   stretching in a column flex parent) — override it here so the button fills
   the bar's full height, matching the logo plate exactly (both are 82px: the
   plate is a 64px logo + 9px padding, the bar's min-height is 82px). Stretch
   rather than a fixed height, so the two stay locked together if either
   the logo size or the bar height changes later.
   margin-left:auto does the pushing-right now that the nav is out of flow.
   Square corners here only; the hero's .sc-btn--light keeps its 8px radius. */
.sc-header__cta {
  flex: none;
  align-self: stretch;
  margin-left: auto;
  padding-block: 0;
  padding-inline: 32px;
  border-radius: 0;

  /* isolation makes this a stacking context, so the ::before fill below paints
     above the white background but still beneath the label and arrow. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 11px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--sc-ink, #0e1130);
  transition: color .34s cubic-bezier(.22,.61,.36,1);
}

/* Brand fill wipes up from the bottom on hover — the square full-height block
   gives it a clean edge to travel along, so no radius to fight. */
.sc-header__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sc-brand, #262aad);
  transform: translateY(100%);
  transition: transform .44s cubic-bezier(.22,.61,.36,1);
}
.sc-header__cta:hover,
.sc-header__cta:focus-visible { color: #fff; }
.sc-header__cta:hover::before,
.sc-header__cta:focus-visible::before { transform: translateY(0); }

/* .sc-btn--light tints its background on hover; the fill hides it at rest and
   at the end of the wipe, but the uncovered strip mid-animation would flash
   pale blue. Hold it white so only the fill reads as the colour change. */
.sc-header__cta:hover { background: #fff; }

.sc-header__cta:focus-visible {
  outline: 2px solid var(--sc-accent, #f42e39);
  outline-offset: -5px;
}

/* nudges forward with the fill, and leads slightly on the way out */
.sc-header__cta-arrow {
  font-size: 17px;
  transition: transform .44s cubic-bezier(.22,.61,.36,1);
}
.sc-header__cta:hover .sc-header__cta-arrow,
.sc-header__cta:focus-visible .sc-header__cta-arrow { transform: translateX(5px); }

.sc-header__burger {
  display: none;
  width: 42px; height: 42px;
  flex: none;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #fff;
}
.sc-header__burger span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.sc-header__burger span + span { margin-top: 5px; }

/* The header overlays the hero, so the hero's content has to start below the bar.
   The hero isn't in this file (see the scaffold note at the bottom), so this rule
   does nothing here — it's kept because it IS needed at integration, and it
   belongs with the header rather than with the hero. */
.sc-hero__inner { padding-top: 82px; }

@media (max-width: 900px) {
  /* Logo still flush left; the right inset stays so the burger keeps a
     comfortable tap target away from the screen edge. */
  .sc-header__inner { min-height: 64px; gap: 14px; padding-left: 0; padding-right: 18px; }
  .sc-header__brand { padding: 7px 11px; }
  .sc-home .sc-header__brand img { height: 44px; }
  .sc-header__nav, .sc-header__cta { display: none; }
  /* the nav and CTA are gone here, so the burger does its own pushing-right */
  .sc-header__burger { display: block; margin-left: auto; }

  /* Opaque, not glass: the hero headline sat right behind the links and
     showed through, which made them hard to read.
     transform is reset — the desktop rule centres the nav with translateX. */
  .sc-header__nav.is-open {
    position: absolute;
    top: 100%; left: 0; right: 0;
    transform: none;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 4px 18px 14px;
    background: var(--sc-navy, #070a26);   /* fallback: header may sit outside .sc-home */
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .sc-header__nav.is-open a {
    padding: 13px 0;
    color: #fff;
  }
  .sc-header__nav.is-open a + a { border-top: 1px solid rgba(255,255,255,.1); }
  .sc-hero__inner { padding-top: 64px; }
}

/* transparency can be a readability problem — fall back to a solid bar */
@media (prefers-reduced-transparency: reduce) {
  .sc-header {
    background: rgba(7,10,38,.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* ==========================================================================
   SITE FOOTER
   Two bands: a navy block holding a statement + link columns, then a white bar
   with the logo centred in it. Both bands are full-bleed; their contents sit in
   the same 1340px .sc-container as every other section, so the columns line up
   with the content above.

   The white bar does real work — the supplied logo is a navy stacked lockup, so
   it needs a light background to read. Sitting it in the white band means no
   white plate around it.

   Flat navy, no gradient. Type stays small: nothing here is over 22px.
   Ready to move into css/style.css as-is.
   ========================================================================== */
.sc-footer { background: var(--sc-navy, #070a26); }

/* --- navy band ----------------------------------------------------------- */
.sc-footer__top { padding: 80px 0 52px; }

/* Statement takes the free space; the three link columns are auto-width and
   hug the right edge, as in the reference. */
.sc-footer__main {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  column-gap: 72px;
  row-gap: 48px;
}

.sc-footer__intro { max-width: 460px; }

/* Square white plate — the supplied logo.png is a navy stacked lockup, so it
   needs a light background to read on the navy. Sits above the statement, as in
   the reference. The stacked wordmark is a small fraction of the image height,
   so much below this size it stops reading at all. */
.sc-footer__logo {
  display: inline-flex;
  padding: 10px 14px;
  background: #fff;
}
.sc-home .sc-footer__logo img {
  height: 68px;
  width: auto;
}

.sc-footer__statement {
  margin-top: 28px;
  font-family: "Archivo", "Inter", sans-serif;
  font-size: 22px;
  line-height: 1.36;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.sc-footer__meta {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
}

/* Muted heading over brighter links — the reverse of the usual arrangement, but
   it matches the reference and keeps the columns from shouting. */
.sc-footer__coltitle {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.45);
}

/* justify-items:start keeps each link box hugging its text, so the hover
   underline is the width of the words and not the whole column. */
.sc-footer__links {
  margin-top: 22px;
  display: grid;
  gap: 14px;
  justify-items: start;
}
.sc-footer__links a,
.sc-footer__links span {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
}
.sc-footer__links a {
  padding-bottom: 2px;
  /* underline grows from the left on hover — drawn with a background so it can
     animate, which text-decoration can't */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color .22s ease, background-size .32s cubic-bezier(.22,.61,.36,1);
}
.sc-footer__links a:hover,
.sc-footer__links a:focus-visible {
  color: #fff;
  background-size: 100% 1px;
}
/* --- contact chips -------------------------------------------------------
   Outlined icon + label buttons. Kept in their own container rather than
   .sc-footer__links so they don't inherit that hover underline. Low padding and
   an 8px radius (not a full pill) to sit with the rest of the site. */
.sc-footer__chips {
  margin-top: 22px;
  display: grid;
  gap: 9px;
  justify-items: start;
}
.sc-footer__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.8);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.sc-footer__chip .sc-i { font-size: 15px; }
.sc-footer__chip:hover,
.sc-footer__chip:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.48);
  background: rgba(255,255,255,.06);
}

/* --- white bar ----------------------------------------------------------- */
/* Same navy as the band above — the hairline is what separates them, so this is
   a divider row rather than a second colour block. The rule sits on the inner
   element so it lines up with the 1340px content, not the viewport edges. */
.sc-footer__bar-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 28px;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sc-footer__copy {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
}
.sc-footer__legal {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 26px;
}
.sc-footer__legal a {
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
  transition: color .2s ease;
}
.sc-footer__legal a:hover,
.sc-footer__legal a:focus-visible { color: #fff; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
  /* statement across the top, the three columns in a row beneath */
  .sc-footer__main { grid-template-columns: repeat(3, 1fr); column-gap: 36px; }
  .sc-footer__intro { grid-column: 1 / -1; max-width: 620px; }
}

@media (max-width: 900px) {
  .sc-footer__top { padding: 62px 0 44px; }
  .sc-footer__main { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .sc-footer__logo { padding: 9px 12px; }
  .sc-home .sc-footer__logo img { height: 60px; }

  /* the two rows of small print stack rather than squeezing side by side */
  .sc-footer__bar-inner {
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 18px 0 24px;
  }
  .sc-footer__legal { justify-self: start; }
}

@media (max-width: 620px) {
  .sc-footer__main { grid-template-columns: 1fr; row-gap: 34px; }
  .sc-footer__statement { font-size: 19px; }
  .sc-footer__legal { gap: 20px; }
}