/* =============================================================
   Uniasset — Cinematic single-page site
   Design system + styling. Plain CSS, no build step.
   Palette: water blue #008ca8 / darker water blue #00748b + grey neutral.
   ============================================================= */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Variable.woff2") format("woff2-variations"),
       url("../fonts/OpenSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand — primary water blue tonal scale (per palette image) */
  --blue-100: #008ca8;
  --blue-70:  #4ba6c8;
  --blue-50:  #80bdd8;
  --blue-30:  #b3d6e8;
  --blue-10:  #e6f3f7;

  /* Brand — secondary darker water blue tonal scale */
  --blue2-100: #00748b;
  --blue2-70:  #4093ad;
  --blue2-50:  #7fb3c6;
  --blue2-30:  #b2d2dd;
  --blue2-10:  #e5f0f4;

  /* Neutral grey scale (matches palette swatches) */
  --ink:       #15191c;   /* primary text */
  --grey-800:  #2b3134;
  --grey-600:  #4c5358;   /* secondary text */
  --grey-400:  #8a9196;   /* muted / captions */
  --grey-300:  #b9bfc3;
  --grey-200:  #dde1e3;   /* borders */
  --grey-100:  #eef1f2;   /* section tint */
  --grey-50:   #f6f8f9;   /* page alt bg */
  --white:     #ffffff;

  /* Semantic roles */
  --bg:            var(--white);
  --bg-alt:        var(--grey-50);
  --bg-deep:       #06222c;   /* deep brand ink for dark sections */
  --text:          var(--ink);
  --text-soft:     var(--grey-600);
  --text-muted:    var(--grey-400);
  --border:        var(--grey-300);
  --accent:        var(--blue-100);
  --accent-deep:   var(--blue2-100);
  --rotator-highlight: #2db8c5;
  --hero-text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.38);

  /* Typography */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale */
  --fs-eyebrow: 1rem;
  --fs-body:    1rem;
  --fs-lead:    clamp(1.25rem, 1.0rem + 1.1vw, 1.75rem);
  --fs-h3:      clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-hero:    clamp(2.375rem, 1.225rem + 5.2vw, 6.125rem);

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;
  --sp-8: 10rem;

  --maxw: 1240px;
  --maxw-text: 760px;
  --gutter: clamp(calc(1.25rem + 15px), calc(4vw + 15px), calc(4rem + 15px));

  --radius: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(6, 34, 44, 0.05);
  --shadow-md: 0 10px 30px -12px rgba(6, 34, 44, 0.18);
  --shadow-lg: 0 30px 60px -22px rgba(6, 34, 44, 0.28);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;
  --header-h: 88px;
}

/* Mobile-only: fixed 25px left/right padding site-wide, overriding the fluid
   --gutter clamp (which floors at 35px). Scoped to 699px so the 700px tablet
   tier is untouched. */
@media (max-width: 699px) {
  :root {
    --gutter: 25px;
    --fs-h2: calc(clamp(2rem, 1.4rem + 2.6vw, 3.5rem) + 2px);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: auto; /* Lenis handles smooth scrolling */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* keep placeholder <img hidden> truly hidden */
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* top padding clears the fixed-height header (--header-h 88px) plus a breath.
   Fluid so phones don't lose ~16% of the screen to a desktop-scale gap: floor
   96px (header + breath) on small viewports, easing up to 133px on desktop so
   the header-to-eyebrow rhythm is unchanged there. */
.section { padding-top: clamp(96px, 6vw + 60px, 133px); padding-bottom: clamp(3.15rem, 6.3vw, 7rem); }
.section--tint { background: var(--bg-alt); }

/* Services section background image */
#services {
  position: relative;
  padding-bottom: calc(clamp(8rem, 16vw, 16rem) + clamp(90px, 22vw, 200px));
}
#services .container { position: relative; z-index: 1; }
.services__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.services__bg-inner { width: 100%; height: 100%; }
.services__bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* pushed 20px past the box's bottom edge so the image's own bottom 20px
     get clipped (object contents are always clipped to the element's box) */
  object-position: center calc(100% + 20px);
  display: block;
  opacity: 1;
  transform: translateY(150px);
}
@media (max-width: 699px) {
  .services__bg-inner { transform: translateY(-50px) scale(1.6); transform-origin: center bottom; }
  #services { padding-bottom: calc(clamp(8rem, 16vw, 16rem) + clamp(90px, 22vw, 200px) + 15px); }
}
.section--deep { background: var(--bg-deep); color: var(--white); }
.measure { max-width: var(--maxw-text); }

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -120px;
  z-index: 200;
  background: var(--white);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

/* ---------- Typography primitives ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}
h2, h2.lead { color: #00748b; line-height: 1.08; }
.section--deep h2, .section--deep h2.lead { color: #fff; }
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #008ca8;
  display: inline-block;
}
.section--deep .eyebrow { color: rgba(128, 189, 216, 0.8); }
.eyebrow + h2, .eyebrow + h2.lead { margin-top: 9px; }

.section-head { max-width: 880px; margin-bottom: clamp(2rem, 4vw, 3.6rem); }
.section-head h2 { font-size: var(--fs-h2); margin-top: 9px; }

/* Cross-browser heading breaks: these section headings use hand-placed <br>s to
   control where each line breaks, sized so the intended first line just fits its
   container in Safari. Chrome/Firefox measure the same Inter glyphs a hair wider,
   which tips a near-full line into an extra (unintended) wrap and shifts the
   layout. On desktop, force nowrap so ONLY the explicit <br>s break these lines —
   the segments all fit their containers at the capped desktop font size, so this
   removes the sub-pixel wrap lottery without risking overflow. Scoped to desktop
   because tablet/mobile use different <br> groupings that must still wrap fluidly. */
@media (min-width: 900px) {
  /* these three carry a desktop <br> in BOTH languages */
  #services-title,
  #sectors-title,
  #portugal-title { white-space: nowrap; }
  /* contact + who only have a desktop <br> in PT; EN wraps them naturally
     (no forced break there), so nowrap would collapse EN to one overflowing line */
  html[lang="pt"] #contact-title,
  html[lang="pt"] #who-title { white-space: nowrap; }
}
.lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.section--deep .lead { color: var(--white); }
.body-soft { color: var(--text-soft); }
/* unified style for description text over dark backgrounds/images site-wide */
.section--deep .body-soft { color: rgba(255,255,255,0.78); font-weight: 500; line-height: 22px; }
.about-us__col--desc .body-soft + .body-soft { margin-top: 14px; }
p + p { margin-top: var(--sp-3); }

/* Inline reference links inside body copy */
.ref {
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: var(--blue-30);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease);
}
.ref:hover { text-decoration-color: var(--accent); }
.section--deep .ref { color: var(--blue-50); text-decoration-color: rgba(128,189,216,0.5); }

/* ---------- Reveal animation (progressive enhancement) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* =============================================================
   Header
   ============================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* fast, near-instant — a slower fade here visibly smears/hazes the current
     section's colour behind the header (the blur itself snaps instantly, so a
     lagging background looked like the previous section bleeding through,
     especially right after the auto-glide's fast scroll across a boundary) */
  transition: background 0.12s var(--ease), box-shadow 0.12s var(--ease), border-color 0.12s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.brand { display: inline-flex; align-items: center; margin-left: -10px; padding-left: 10px; }
.brand img { height: 53px; width: auto; transition: opacity 0.4s var(--ease); }
@media (max-width: 699px) {
  /* logo reduced 10% on mobile, then a further 5% (47.7px * 0.95); .brand's
     flex alignment is unchanged, so this just shrinks the box within the
     same centered position */
  .brand img { height: 45.315px; }
}
@media (min-width: 700px) and (max-width: 900px) {
  /* tablet: logo reduced 5% off the base 53px, same reasoning as mobile above */
  .brand img { height: 50.35px; }
}
/* shadow only over the transparent (non-solid) header state, same drop-shadow
   the nav links already use — safe here since .brand has no overflow:hidden
   ancestor, unlike .nav-roll (filter co-located, not clipping anything) */
.brand .logo-white { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }
.site-header.is-solid .brand .logo-white { filter: none; }
.brand .logo-color { position: absolute; opacity: 0; }
.brand-wrap { position: relative; display: inline-flex; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem); }
.nav-list { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav-item--contact-mobile { display: none; }
.nav-list a {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.85);
  position: relative;
  padding-block: 0.4rem;
}
/* vertical text-roll hover: a bolder duplicate of the label slides up into
   place as the original slides out — same odometer mechanic as the hero
   rotator (translateY + overflow:hidden), just hover-triggered over one word.
   Shadow lives on THIS element (same as overflow:hidden), not an ancestor —
   filter/shadow on a parent of an overflow-clipped descendant can break its
   clip during transforms, showing a hard-edged box (same bug as the hero title). */
.nav-roll {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: top;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.site-header.is-solid .nav-roll { filter: none; }
.nav-roll__a, .nav-roll__b {
  display: block;
  transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);
}
.nav-roll__b {
  font-weight: 700;
  transform: translateY(100%);
  margin-top: -1.2em;
}
.nav-list a:hover .nav-roll__a,
.nav-list a.active .nav-roll__a { transform: translateY(-100%); }
.nav-list a:hover .nav-roll__b,
.nav-list a.active .nav-roll__b { transform: translateY(0); }
/* current section: bold only over the hero (white text); bold + accent blue
   once the header is solid (white background, grey nav text) */
.site-header.is-solid .nav-list a.active { color: var(--accent); }

.lang-toggle {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,1);
  border-radius: 100px;
  padding: 0.22rem 0.6rem;
  transition: all 0.3s var(--ease);
  text-shadow: var(--hero-text-shadow);
}
.lang-toggle:hover { border-color: #fff; color: #fff; }

/* Scrolled / solid state */
.site-header.is-solid {
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
/* backdrop-filter live-resamples whatever's behind it — during a fast
   programmatic scroll (nav click / auto-glide) it can't keep up and smears
   into a ghosted blend of passing sections. Suppressed for the glide's
   duration, restored once it settles. */
.site-header.is-gliding {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-header.is-solid .brand .logo-white { opacity: 0; }
.site-header.is-solid .brand .logo-color { opacity: 1; }
.site-header.is-solid .nav-list a { color: var(--grey-600); text-shadow: none; }
.site-header.is-solid .lang-toggle { text-shadow: none; }
.site-header.is-solid .lang-toggle { color: var(--grey-600); border-color: var(--grey-300); }
.site-header.is-solid .lang-toggle:hover { color: var(--ink); border-color: var(--grey-400); }

/* Mobile nav toggle */
.nav-toggle { display: none; }
@media (max-width: 900px) {
  /* brand + toggle sit above the overlay so both stay visible/usable while open */
  .brand { position: relative; z-index: 10; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 30px; height: 22px; padding: 0;
    position: relative; z-index: 10;
  }
  .nav-toggle span {
    height: 2.5px; width: 100%; background: #fff; border-radius: 2px;
    transition: transform 0.4s var(--ease), opacity 0.25s var(--ease), background 0.3s var(--ease);
  }
  .site-header.is-solid .nav-toggle span { background: var(--ink); }
  /* hamburger -> X; bars forced white over the dark overlay */
  .nav.is-open .nav-toggle span { background: #fff; }
  .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* when open, blend the header bar into the overlay: transparent, white logo */
  .site-header.menu-open { background: transparent; box-shadow: none; border-color: transparent; }
  .site-header.menu-open .logo-white { opacity: 1; }
  .site-header.menu-open .logo-color { opacity: 0; }

  /* ── full-screen right-slide overlay (mimics Brandset) ── */
  .nav-list {
    flex-direction: column; justify-content: flex-start; align-items: flex-end;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 5;
    gap: 18px;
    padding: 110px var(--gutter) 48px;
    overflow-y: auto;
    /* same gradient direction/colors as .site-footer (light top -> dark bottom) */
    background: linear-gradient(to bottom, rgb(0, 116, 139), rgb(0, 36, 45));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
    text-align: right;
  }
  .nav.is-open .nav-list { transform: translateX(0); pointer-events: auto; }
  .nav-list li { width: 100%; }
  .nav-item--contact-mobile { display: block; }
  .nav-list a:not(.lang-toggle) {
    display: block; width: 100%;
    font-size: clamp(32px, 8vw, 52px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.88);
    padding-block: 0;
  }
  /* keep overlay links white even when the header is in its solid (light) state */
  .site-header.is-solid .nav-list a:not(.lang-toggle) { color: rgba(255, 255, 255, 0.88); text-shadow: none; }
  /* roll-in duplicate uses the brand blue */
  .nav-list a .nav-roll__b { color: var(--accent); }

  /* PT toggle: flex item pinned to the overlay's bottom-right via margin-top:
     auto, so it hugs the bottom when there's room but flows below the last
     link (never overlapping) if content is taller than the viewport. */
  .lang-toggle { display: none; }
  .nav-item--lang { margin-top: auto; width: auto; }
  .nav.is-open .lang-toggle {
    display: inline-flex;
    color: #fff; border-color: rgba(255, 255, 255, 0.95);
    font-size: 15px; padding: calc(0.22rem + 2px) calc(0.6rem + 2px);
  }
}

/* Tablet-only overlay adjustments (PT button untouched, still governed by the
   max-width:900px rule above). Unlike mobile, the colored overlay is a
   right-anchored vertical strip instead of a full-bleed panel, so the left
   portion of the screen stays uncolored behind it. */
@media (min-width: 700px) and (max-width: 900px) {
  .nav-list {
    left: auto;
    right: 0;
    width: calc(61% - 80px); /* widened slightly so longer PT labels (Porquê Portugal, Área Cliente) sit fully on the coloured panel, pulled back in a bit from 64% */
  }
  .nav-list a:not(.lang-toggle) {
    font-size: calc(clamp(32px, 8vw, 52px) - 17px); /* -17px off the base link size (was -12px) — line-height is unitless below, so it scales proportionally with this */
    line-height: 1.1; /* slightly tighter, proportional to the smaller size */
  }
}

/* =============================================================
   Hero
   ============================================================= */
/* Hybrid scroll sequence: a shared video backdrop stays fixed (sticky) while
   act 1 (hero title) scrolls away naturally at 1:1, then act 2 (statement)
   holds briefly (sticky) for the word-by-word highlight. No GSAP pinning. */
.hero-seq {
  position: relative;
  isolation: isolate;
  color: #fff;
}
/* shared video backdrop — sticky, stays in view through both acts */
.hero-media {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
}
/* oversize the video so the parallax drift never exposes an edge */
.hero-media .hero__video {
  top: -10%;
  height: 120%;
  bottom: auto;
}
/* brand-colour wash over the video, scrubbed 0 -> 0.8 as the statement settles */
.hero__color-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* darkened multiply tint for act-2 legibility (grey-400 → ~0.8 → ~0.85 again) */
  background: #5d6265;
  mix-blend-mode: multiply;
  opacity: 0;
}
/* act 1: title layer overlaps the first viewport and scrolls away at 1:1 */
.hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}
.hero__text-mask { width: 100%; }
/* act 2: tall track giving the sticky statement its brief hold + scrub room */
.hero-statement-pin {
  position: relative;
  height: 165vh;
  z-index: 1;
}
.hero-statement {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-statement__inner {
  width: 100%;
  max-width: 920px;
  padding-inline: calc(var(--gutter) - 60px);
  text-align: center;
  color: #fff;
  text-shadow: var(--hero-text-shadow);
}
@media (max-width: 699px) {
  .hero-statement__inner { padding-inline: 20px; }
  .hero-statement__inner h2 { padding-inline: 30px; }
  .hero-statement__inner p { padding-inline: 35px; }
  /* PT-only: slightly smaller so the hardcoded <br> lines wrap more naturally */
  html[lang="pt"] .hero-statement__inner h2 { font-size: calc(var(--fs-h2) + 2px); }
}
/* PT narrow-screen (Samsung Galaxy & co. report ~360–384px CSS width, vs iPhone's
   390px+): at the size above, the "de Oportunidades" line needs ~282px but only
   ~260px is available at 360px, so "Oportunidades" wraps and orphans "de". Android's
   Chrome renders Inter a hair wider too, so it breaks there but not on iOS Safari.
   Drop 4px on ≤389px only — fixes narrow Android while leaving 390px+ iPhones (which
   already fit) at their current, larger size. Line-height is unitless, so it scales. */
@media (max-width: 389px) {
  html[lang="pt"] .hero-statement__inner h2 { font-size: calc(var(--fs-h2) - 2px); }
}
@media (min-width: 700px) and (max-width: 900px) {
  .hero-statement__inner { padding-inline: 50px; }
  .hero-statement__inner p { padding-inline: 10px; }
}
@media (min-width: 900px) {
  html[lang="pt"] .hero-statement__inner h2 { padding-inline: 40px; }
  /* wider than the h2 so "off-market qualificadas e prontas para decisão."
     wraps as its own last line */
  html[lang="pt"] .hero-statement__inner p { padding-inline: 55px; }
  html[lang="en"] .hero-statement__inner p { padding-inline: 40px; }
}
.hero-statement__inner h2 {
  font-size: calc(var(--fs-h2) + 7px);
  font-weight: 600;
}
.hero-statement__inner p {
  max-width: 820px;
  margin-inline: auto;
  margin-top: calc(var(--sp-5) / 2);
  /* same typography as .hero__standfirst (scoped exception) */
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
}
.cta-button--ghost.hero-statement__cta {
  margin-top: var(--sp-4);
  padding: 0.5rem 0.875rem;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
}
.cta-button--ghost.hero-statement__cta:hover {
  background: transparent;
  border-color: #fff;
  transform: none;
}
/* word-by-word highlight — default solid white, JS snaps each word to highlight */
.hl-word { color: #fff; }
/* vertical mask reveal for the statement heading — padding-bottom gives descenders
   room so overflow:hidden doesn't clip glyphs like the "g" in "sourcing" */
.mask-heading { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.mask-heading[data-reveal] { opacity: 1; transform: none; transition: none; }
.mask-heading__inner {
  display: block;
  transform: translateY(115%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.mask-heading.is-visible .mask-heading__inner { transform: translateY(0); }
.no-js .mask-heading__inner { transform: none; }
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -2;
}
/* CSS fallback paint behind canvas (also the no-js view) */
.hero__bg-fallback {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 90% at 75% 15%, #0a93bd 0%, #008ca8 32%, #00748b 60%, #064b62 100%);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* darkened ~10% further (act-1 only — act-2's wash is .hero__color-overlay, untouched) */
  background:
    linear-gradient(180deg, rgba(4,30,40,0.46) 0%, rgba(4,30,40,0.07) 32%, rgba(4,30,40,0.18) 60%, rgba(4,30,40,0.79) 100%);
}
.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(calc(3.5rem + 30px), calc(8vh + 30px), calc(7rem + 30px));
  padding-top: calc(var(--header-h) + 2rem);
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--fs-hero) - 2px);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 24ch;
}
/* rotating phrase group — vertical "odometer" slide, each line tracks independently
   and the two lines slide in opposite directions for a subtle counter-motion */
.hero__rotator {
  display: block;
}
/* mobile-only 3-line regroup ("Connecting" / "[word] to" / "[word2]") vs. the
   2-line desktop/tablet layout ("Connecting [word]" / "to [word2]") */
.hero__rotator--narrow { display: none; }
@media (max-width: 699px) {
  .hero__rotator--wide { display: none; }
  .hero__rotator--narrow { display: block; font-size: calc(1em + 6px); }
}
/* PT-only: mobile uses the same 2-line arrangement as tablet/desktop
   ("Ligamos Capital" / "a Oportunidades") instead of the EN 3-line regroup */
@media (max-width: 699px) {
  html[lang="pt"] .hero__rotator--wide { display: block; font-size: calc(1em + 11px); }
  html[lang="pt"] .hero__rotator--narrow { display: none; }
}
/* EN-only: mobile keeps the 2-line rotator (like PT) but stays on the
   --narrow block with shorter mobile-specific words, since --wide carries
   the longer desktop/tablet phrases that must stay untouched */
@media (max-width: 699px) {
  html[lang="en"] .hero__rotator--narrow { font-size: calc(1em + 9px); }
}
/* static "Connecting" line — same visual treatment as .hero__rotator-line
   (height/overflow/shadow) but deliberately NOT that class, so the shared
   rotator JS (which assumes every .hero__rotator-line has items) skips it */
.hero__rotator-static {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  height: 1.2em;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.38));
}
.hero__rotator-line {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  height: 1.2em;
  /* drop-shadow lives on the SAME element as overflow:hidden (not an ancestor) —
     filter on a parent of an overflow-clipped descendant can break its clipping
     during transforms in some browsers, letting the sliding words show through */
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.38));
}
.hero__rotator-line + .hero__rotator-line { margin-top: 0; }
.hero__rotator-prefix {
  flex-shrink: 0;
  white-space: nowrap;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.1em;
}
.hero__rotator-track {
  display: block;
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.hero__rotator-item {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1em;
  white-space: nowrap;
  transition: transform 1.0s cubic-bezier(0.65, 0, 0.35, 1);
  color: var(--rotator-highlight);
  /* Keep each word on a permanent GPU layer with a pinned anti-aliasing mode.
     Otherwise the browser promotes the item to a compositor layer only while
     its transform animates — flipping subpixel->grayscale AA (re-rasterized
     through the line's drop-shadow) — which reads as a faint colour/brightness
     shift at every word change. A stable layer renders identically whether
     static or sliding, so the shift disappears. */
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}
/* mobile 3-line layout: "to" is merged into each rotating item's own text
   ("Capital to", "Value to"...) so it slides together with the word as one
   unit — the gap is always identical since it's literally the same string,
   unlike a separate fixed-position "to" trailing a variable-width word. */
.hero__rotator-to { color: #fff; }
.hero__rotator-line:nth-of-type(1) .hero__rotator-item:nth-child(1) { transform: translateY(0%); }
.hero__rotator-line:nth-of-type(1) .hero__rotator-item:nth-child(2) { transform: translateY(120%); }
.hero__rotator-line:nth-of-type(1) .hero__rotator-item:nth-child(3) { transform: translateY(-120%); }
.hero__rotator-line:nth-of-type(2) .hero__rotator-item:nth-child(1) { transform: translateY(0%); }
.hero__rotator-line:nth-of-type(2) .hero__rotator-item:nth-child(2) { transform: translateY(-120%); }
.hero__rotator-line:nth-of-type(2) .hero__rotator-item:nth-child(3) { transform: translateY(120%); }
.no-js .hero__rotator-line { height: auto; overflow: visible; }
.no-js .hero__rotator-track { height: auto; }
.no-js .hero__rotator-item { position: relative; transform: none !important; }
.no-js .hero__rotator-item:nth-child(n+2) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__rotator-item { transition: none; }
  .hero__scroll-cue .hero__mouse-wheel { animation: none; opacity: 0.9; transform: none; }
}
/* below 480px the base --fs-hero clamp overflows the longest rotating phrase
   ("to Sourced Opportunity") against its line width, so this scales it down
   fluidly (no hard cliff) — the linear term is solved to land exactly on the
   base formula's own value at 480px, so the handoff back to --fs-hero above
   that width is seamless (no visible jump either direction) */
@media (max-width: 480px) {
  .hero__headline { font-size: clamp(1.25rem, -19.12px + 12.85vw, calc(var(--fs-hero) - 2px)); }
}
.hero__standfirst {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 40ch;
  margin-top: max(0.15rem, calc(clamp(0.5rem, 3.5vw, 1.5rem) - 15px));
  color: #fff;
  text-shadow: var(--hero-text-shadow);
}
@media (min-width: 900px) {
  /* PT-only: nudges the wrap so "de" drops to its own line instead of
     dangling at the end of line 2 */
  html[lang="pt"] .hero__standfirst { padding-right: 20px; }
}
@media (max-width: 699px) {
  /* lift ONLY the title 40px total (20+15+15-10) — description stays in place */
  .hero__headline { transform: translateY(-40px); }
  /* description +2px over the base clamp, lifted 15px (title/rest untouched) */
  .hero__standfirst { font-size: calc(clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem) + 2px); transform: translateY(-15px); }
}
.hero__intro {
  max-width: 56ch;
  margin-top: var(--sp-3);
  color: rgba(255,255,255,0.82);
  font-size: 1.0625rem;
}
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
/* modern mouse indicator: rounded body + wheel-dot that drifts down on a loop */
.hero__scroll-cue .hero__mouse {
  width: 22px; height: 34px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.hero__scroll-cue .hero__mouse-wheel {
  width: 3px; height: 7px;
  border-radius: 2px;
  background: rgba(255,255,255,0.9);
  animation: mouseWheel 2.2s var(--ease) infinite;
}
@keyframes mouseWheel {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* =============================================================
   Image / media slots (placeholder-ready)
   ============================================================= */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--blue2-100) 0%, var(--blue-100) 55%, var(--blue-70) 100%);
  isolation: isolate;
}
.media::after { /* subtle texture so empty slots still read as premium */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 120% at 80% 0%, rgba(255,255,255,0.16), transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(4,30,40,0.35));
  mix-blend-mode: screen;
  opacity: 0.7;
}
.media[data-ratio="16/9"]  { aspect-ratio: 16 / 9; }
.media[data-ratio="3/2"]   { aspect-ratio: 3 / 2; }
.media[data-ratio="4/3"]   { aspect-ratio: 4 / 3; }
.media[data-ratio="4/5"]   { aspect-ratio: 4 / 5; }
.media[data-ratio="21/9"]  { aspect-ratio: 21 / 9; }
.media[data-ratio="1/1"]   { aspect-ratio: 1 / 1; }
.media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.media__label {
  position: absolute;
  left: 1rem; bottom: 0.9rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
/* When a real image is present, hide placeholder texture + label */
.media.has-image::after { display: none; }
.media.has-image .media__label { display: none; }

/* parallax: image is oversized + scaled so it can translate without gaps.
   Clipping happens on .media (overflow:hidden) so the figure shadow is kept. */
.parallax .media img {
  width: 118%; height: 118%;
  left: -9%; top: -9%;
  will-change: transform;
}

/* =============================================================
   About Us — full-bleed photo background, two-column (45/55) layout
   ============================================================= */
/* top padding stays the default .section value (like #services); only the
   bottom grows, so content stays pinned near the top while the tall section
   gives the bottom-anchored background image room to "live" further down —
   same structural pattern as #services, just with cover instead of contain
   since this background is a full photo, not a contained illustration */
/* background colour sampled from the image's own bottom-edge pixels (#016f92),
   so wherever the solid fill meets the image bottom there is no visible seam */
.about-us { position: relative; overflow: hidden; padding-bottom: calc(clamp(8rem, 16vw, 16rem) + clamp(130px, 34vw, 327px)); background: #016f92; }
.about-us .container > .eyebrow { display: block; margin-bottom: 9px; }
.about-us__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
@media (max-width: 699px) {
  /* fill behind the enlarged/lowered image, sampled from the image's OWN edge
     pixels so the letterbox strips read as a continuation of the photo, not flat
     slabs: #003449 = its dark top edge, #016f92 = its teal water bottom edge. A
     single solid can only match one end (the old #003449 blended the top but left
     a dark band under the photo); this vertical gradient mirrors the image's
     top→bottom tone so both the top strip and the bottom band blend seamlessly. */
  .about-us { background: linear-gradient(180deg, #003449 0%, #003449 22%, #016f92 62%, #016f92 100%); padding-bottom: 20px; }
  .about-us__bg { bottom: 0; }
  .about-us__bg-inner { transform: translateY(215px) scale(1.7); transform-origin: top center; }
}
/* wrapper around the img — the img itself gets a JS-driven inline transform
   from the [data-parallax] scroll effect on .about-us__bg (see main.js),
   which would silently clobber any CSS transform placed directly on the img.
   Static position/scale adjustments go on this wrapper instead so the two
   never collide. */
.about-us__bg-inner {
  width: 100%;
  height: 100%;
}
.about-us__bg img {
  /* mobile keeps contain (square image sits full-width at the section bottom);
     desktop switches to cover below to fill the full width — see @media 900. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}
@media (max-width: 899px) {
  .about-us__bg img { object-position: top center; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .about-us__bg-inner { transform: translateY(-55px) scale(1.4); transform-origin: top center; }
}
.about-us .container { position: relative; z-index: 2; }
.about-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, var(--sp-6));
}
@media (min-width: 700px) and (max-width: 899px) {
  .about-us__grid { gap: calc(clamp(2rem, 4vw, var(--sp-6)) - 10px); }
  .about-us__col--desc { padding-right: 135px; }
  /* the resp image's own extended canvas covers the full section now, so no
     flat fill is needed underneath it — the bg layer runs edge to edge. */
  .about-us { padding-bottom: 35px; background: none; }
  .about-us__bg { bottom: 0; }
}
@media (min-width: 900px) {
  .about-us__grid { grid-template-columns: 45fr 55fr; align-items: start; }
  /* optical correction: the h2's larger cap-height sits visually higher than
     the paragraph's, so nudge the description column down to true-align */
  .about-us__col--desc { margin-top: 10px; }
  /* drop the 4-feature row down over the lower (water) band of the taller
     square image — keep section height ~constant by transferring space from
     the bottom padding into the feature top margin (first-pass values, tune) */
  .about-us .about-us__features { margin-top: calc(clamp(6rem, 33vw, 30rem) + 50px); }
  .about-us { padding-bottom: calc(clamp(6rem, 14vw, 12rem) - 102px); }
  /* fill full section width on desktop (no side bars from the square image) */
  .about-us__bg img { object-fit: cover; }
  /* lift the image layer so the scene shifts up at the same size, exposing a
     strip of the section fill at the base. Bottom inset is 30px less than the
     padding-bottom cut above so the image stays put as the section shrinks 30px. */
  .about-us__bg { bottom: 63px; }
}
.about-us__col--title h2 { font-size: var(--fs-h2); }
.br-mobile-tablet { display: none; }
@media (min-width: 700px) and (max-width: 900px) {
  .br-mobile-tablet { display: inline; }
}
.br-mobile-only { display: none; }
@media (max-width: 699px) {
  .br-mobile-only { display: inline; }
}
.br-not-mobile { display: inline; }
@media (max-width: 699px) {
  .br-not-mobile { display: none; }
}
.br-desktop-only { display: none; }
@media (min-width: 900px) {
  .br-desktop-only { display: inline; }
}
.br-non-desktop-only { display: inline; }
@media (min-width: 900px) {
  .br-non-desktop-only { display: none; }
}
.about-us__subtitle.body-soft { font-size: calc(1em + 6px); color: #fff; line-height: 29px; margin-bottom: 20px; }
/* 4-column feature list — same vertical-line structure as .services__list,
   adapted for a dark background (white line, white title instead of blue) */
.about-us__features {
  display: none;
}
@media (min-width: 901px) {
  .about-us__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: clamp(3rem, 6vw, 5rem); }
}
.about-us__feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.8);
}
.about-us__feature-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Mobile/tablet-only carousel version of the 4 features above — same
   viewport/track/group/nav/arrow mechanics as .kpi-carousel, reusing
   .about-us__feature item styles untouched so both variants match exactly */
.about-features-carousel { display: none; }
@media (max-width: 699px) {
  .about-features-carousel--mobile { display: block; margin-top: calc(clamp(3rem, 6vw, 5rem) + 70px + 120px + 70px + 30px + 30px - 15px); }
}
@media (min-width: 700px) and (max-width: 900px) {
  .about-features-carousel--tablet { display: block; margin-top: calc(clamp(3rem, 6vw, 5rem) + 70px + 100px + 100px + 25px + 10px + 10px); }
}
.about-features-carousel__viewport { overflow: hidden; }
.about-features-carousel__track {
  display: flex;
  transition: transform 0.7s var(--ease);
}
.about-features-carousel__group {
  flex: 0 0 100%;
  display: grid;
  gap: 1.6rem;
  min-width: 0;
}
.about-features-carousel--mobile .about-features-carousel__group { grid-template-columns: 1fr; }
.about-features-carousel--tablet .about-features-carousel__group { grid-template-columns: repeat(2, 1fr); }
.about-features-carousel__nav { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-top: calc(clamp(2rem, 4vw, 3rem) - 15px); }
.about-features-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.about-features-carousel__arrow svg { width: 24px; height: 24px; }
.about-features-carousel__arrow:hover { color: #008ca8; }
.about-features-carousel__dots { color: #fff; }

/* =============================================================
   Services
   ============================================================= */
.services__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 1.6rem;
  padding-bottom: 110px;
}
.service {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 clamp(1rem, 2vw, 2rem);
  border-left: 1.5px solid var(--border);
}
@media (min-width: 760px) {
  .services__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 699px) {
  .services__list { gap: 50px; }
}
.service__head h3 { font-size: var(--fs-h3); color: #008ca8; max-width: 260px; }
@media (max-width: 699px) {
  .service__head h3 { font-size: calc(var(--fs-h3) + 1px); max-width: none; white-space: nowrap; }
}
.service__tag {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--accent-deep);
  margin-bottom: 6px;
}
.service__body p:not(.service__tag) { color: var(--text-soft); font-size: 16px; line-height: 22px; }
.service__body .service__tag + p { margin-top: 0; }
.service__note {
  display: inline-block;
  margin-top: var(--sp-2);
  font-style: italic;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.service__media { grid-column: 1 / -1; margin-bottom: var(--sp-2); }
.service__media .media { box-shadow: var(--shadow-md); }

/* =============================================================
   Sectors
   ============================================================= */
.sectors__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, var(--sp-6));
}
@media (min-width: 900px) {
  /* left column is a fixed width (just enough for "Where Conviction Meets" on
     one line, ~602px needed) so its position/width never shifts; the
     accordion is 1fr and takes all remaining space, so trimming the gap
     below hands extra room straight to the accordion without moving the text.
     Areas keep the CTA under the header in column 1 (DOM order puts it after
     the accordion, for the mobile/tablet stacked order) while the accordion
     spans both rows in column 2, same as before. */
  .sectors__panel {
    grid-template-columns: 615px 1fr;
    grid-template-areas: "header accordion" "cta accordion";
    gap: 16px;
  }
  .sectors__header { grid-area: header; }
  .sectors-cta { grid-area: cta; }
  .sectors__accordion { grid-area: accordion; }
}
@media (min-width: 900px) {
  /* PT-only: title spans the row but keeps its own single-column max-width
     (stays on 2 lines); description and accordion split into an aligned
     50/50 row below it */
  html[lang="pt"] .sectors__panel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "header header" "desc accordion" "cta accordion";
    gap: 16px 48px;
  }
  /* the 630px cap above is sized for the shorter EN heading; PT's phrase
     needs more room per line to land the break at "Alcança / Profundidade" */
  html[lang="pt"] .sectors__header { max-width: none; margin-bottom: 0; }
  html[lang="pt"] .sectors__desc { grid-area: desc; margin-top: 0; }
  html[lang="pt"] .sectors__accordion { margin-top: 30px; }
}
/* mobile-only: let the title wrap naturally instead of forcing the break */
@media (max-width: 699px) {
  .sectors-title-break { display: none; }
}
#sectors { position: relative; }
#sectors::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 116, 139, 0.15) 0%, transparent 50%);
}
.sectors__header {
  max-width: 630px;
  margin-bottom: clamp(2rem, 4vw, 3.6rem);
}
.sectors__header h2 { font-size: var(--fs-h2); margin-top: 9px; }
.sectors__accordion { border-top: 1.5px solid var(--border); margin-top: 180px; }
.sectors-cta { margin-top: var(--sp-6); }
.sectors__desc { margin-top: var(--sp-3); }
/* mobile/tablet stacked order: header -> accordion -> cta, so the 180px /
   var(--sp-6) desktop offsets (tuned for the side-by-side columns) are
   replaced with tight, flat gaps between each stacked block. The panel's
   own grid `gap` and the header's `margin-bottom` also add to this stack of
   grid items (each contributed on top of the other, unlike normal block
   flow), so both are zeroed here and the full gap is set on margin-top alone. */
@media (max-width: 899px) {
  .sectors__panel { gap: 0; }
  .sectors__header { margin-bottom: 0; }
  .sectors__accordion { margin-top: 39px; }
  .sectors-cta { margin-top: 45px; }
}
.sectors-cta .body-soft { margin-top: calc(var(--sp-3) / 4); }
.sectors-cta .cta-button { margin-top: calc(var(--sp-4) / 2); }
.sector-item { border-bottom: 1.5px solid var(--border); position: relative; }
.sector-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color 0.25s var(--ease), font-size 0.25s var(--ease);
}
.sector-item__head:hover { color: var(--accent-deep); }
.sector-item__title { max-width: 46ch; }
.sector-item__chev {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.sector-item__chev::before, .sector-item__chev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  transition: transform 0.3s var(--ease);
}
.sector-item__chev::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.sector-item__chev::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.sector-item.is-open .sector-item__chev::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.sector-item.is-open .sector-item__head { color: var(--accent); font-weight: 600; padding-bottom: 0.5rem; }
.sector-item.is-open .sector-item__title { display: none; }
.sector-item.is-open .sector-item__chev {
  position: absolute;
  bottom: 1.1rem;
  right: 0;
}
.sector-item__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s var(--ease), opacity 0.6s var(--ease);
}
.sector-item__label {
  display: none;
  font-family: var(--font-display);
  font-size: calc(1.05rem + 2px);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.sector-item.is-open .sector-item__label { display: block; }
.sector-item__body p {
  padding-bottom: 1.1rem;
  padding-right: 10px;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.45;
  max-width: 52ch;
}
@media (min-width: 700px) and (max-width: 899px) {
  /* 52ch leaves a large unused right margin on the wider tablet column */
  .sector-item__body p { max-width: calc(52ch + 80px); padding-right: 0; }
}
.sector-item.is-open .sector-item__body { max-height: 28rem; opacity: 1; }
.sector-item__media {
  margin: 0 0 1rem;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16 / 6; /* ~40px taller than the previous 16/5 */
  background: var(--bg-deep);
}
@media (max-width: 699px) {
  /* ~25px taller still than 16/6, at the ~350px content width (400px viewport, 25px gutters) */
  .sector-item__media { aspect-ratio: 16 / 7.1; }
}
.sector-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================================
   Why Portugal — hero head reuses the About Us background/section
   mechanics (section-level bg image + padding-bottom reveal), but
   the copy block is a single left-aligned column, not the split
   title/desc grid About Us uses. Only the image, copy and the
   sampled fill colour differ from the shared mechanics — see
   .about-us above for the annotated original.
   ============================================================= */
/* extra +234px vs About Us's own formula: same image (1920x1680) and same
   padding-bottom base, but this section's copy block is shorter (single
   column, no features grid), so without the extra height the box's aspect
   ratio would end up wider than the image's, letterboxing it on the sides
   instead of filling edge to edge. */
.why-portugal-hero { position: relative; overflow: hidden; padding-bottom: calc(clamp(8rem, 16vw, 16rem) + clamp(190px, 58vw, 561px)); background: #fff; }
.why-portugal-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.why-portugal-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center -40px;
  display: block;
}
@media (max-width: 699px) {
  /* sized via width/height (not transform: scale) — the shared data-parallax
     JS overwrites the img's inline transform every frame, which would
     silently cancel a CSS transform-based scale (same fix as tablet) */
  .why-portugal-hero__bg img { width: 150%; max-width: 150%; height: 150%; margin-left: -25%; margin-top: -20px; object-position: center top; }
  /* PT-only: lower the image within its frame so more of the monument shows,
     while the top of the section (behind the heading) still reads as image */
  html[lang="pt"] .why-portugal-hero__bg img { margin-top: 0px; width: 165%; max-width: 165%; height: 165%; margin-left: -32.5%; }
  /* The rendered image is ~891px tall but the hero box was only ~781px, so
     overflow:hidden clipped the bottom ~130px — which holds the baked-in
     fade-to-white. As the data-parallax JS translates the image down (up to
     +42px), the whole fade got clipped, leaving a hard pavement edge. Grow
     the box by 170px so the full image + the parallax down-travel always
     clears the clip and the fade is never cut. */
  .why-portugal-hero { padding-bottom: calc(clamp(8rem, 16vw, 16rem) + clamp(190px, 58vw, 561px) + 170px); }
}
.why-portugal-hero .container { position: relative; z-index: 2; }
.why-portugal-hero__col { max-width: 670px; text-align: left; }
.why-portugal-hero__col .eyebrow,
.why-portugal-hero__col h2,
.why-portugal-hero__col p { text-shadow: 0 3px 20px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.25); }
.why-portugal-hero__col h2 { font-size: var(--fs-h2); }
.why-portugal-hero__col p.body-soft { color: #fff; padding-right: 15px; max-width: 60ch; }
.why-portugal-details { margin-top: -350px; position: relative; z-index: 3; }
.why-portugal-hero .ref, .why-portugal-details .ref { text-decoration: none; }
.why-portugal-hero .ref, .why-portugal-details .ref, .why-portugal-hero__source { font-size: calc(1em - 3px); }
@media (min-width: 900px) {
  /* PT-only: 670px is sized for the shorter EN heading; PT needs more room
     per line so the break lands as "...e Estratégico" / "para...Prazo…" (2 lines) */
  html[lang="pt"] .why-portugal-hero__col { max-width: 800px; }
  html[lang="pt"] .why-portugal-hero__col p.body-soft { padding-right: 45px; }
  html[lang="pt"] .why-portugal-details { margin-top: -330px; }
  html[lang="en"] .why-portugal-details { margin-top: -330px; }
}
@media (min-width: 700px) and (max-width: 900px) {
  .why-portugal-hero__col p.body-soft { padding-right: 7.5px; max-width: none; }
  /* sized via width/height (not transform: scale) because the shared
     data-parallax JS overwrites the img's inline transform every frame,
     which would silently cancel a CSS transform-based scale */
  .why-portugal-hero__bg img { width: 115%; max-width: 115%; height: 115%; margin-left: -7.5%; margin-top: -20px; object-position: center top; }
  .why-portugal-details { margin-top: -170px; }
}
@media (max-width: 699px) {
  /* .why-portugal-details and its children are fully transparent — the
     white seen here is the hero section's own white background, not this
     block painting over the image. .section's own 96px padding-top (+8px
     from .kpi-synthesis) sits between this box's edge and the actual
     visible text, so margin-top can go well past what the box edge alone
     suggests. -140px is the measured max: at the worst-case scroll/parallax
     position the real "KPI Synthesis" text still clears actual photo
     content by ~1px, never touching solid image. */
  .why-portugal-details { margin-top: -255px; }
}

/* KPI carousel — two groups of 3, sliding; styled like .service (no card bg) */
.kpi-synthesis { margin-top: calc(var(--sp-5) - 40px); }
.kpi-synthesis__caption {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
  color: var(--blue2-100);
  margin-bottom: var(--sp-4);
  padding-left: 15px;
  padding-right: 15px;
}
.kpi-carousel { padding-left: 15px; padding-right: 15px; }
.kpi-carousel__viewport { overflow: hidden; }
.kpi-carousel__track {
  display: flex;
  transition: transform 0.7s var(--ease);
}
.kpi-carousel__group {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-width: 0;
}
@media (min-width: 760px) {
  .kpi-carousel__group { grid-template-columns: repeat(3, 1fr); }
}
.kpi-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 clamp(1rem, 2vw, 2rem);
  border-left: 1.5px solid var(--border);
  min-width: 0;
}
.kpi-carousel__group .kpi-item:first-child { border-left: none; }
/* mobile: 1 item per group, so it's always :first-child — restore the line
   there since it's no longer a "leftmost of a row" case */
@media (max-width: 699px) {
  .kpi-carousel--mobile .kpi-carousel__group .kpi-item:first-child { border-left: 1.5px solid var(--border); }
}
.kpi-item__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: #008ca8; }
.kpi-item__desc { color: var(--text-soft); font-size: 16px; line-height: 22px; }
.kpi-carousel__nav { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-top: calc(clamp(2rem, 4vw, 3rem) - 15px); }
.kpi-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.kpi-carousel__arrow svg { width: 24px; height: 24px; }
.kpi-carousel__arrow:hover { color: #008ca8; }
.kpi-carousel__dots { color: var(--text-soft); }
/* strip the extra 15px hardcoded on top of the container's normal gutter
   (kpi-only quirk), plus the first/last item's own inner padding, so the
   carousel content lines up flush with the caption above it */
@media (min-width: 700px) and (max-width: 900px) {
  .kpi-synthesis__caption { padding-left: 0; padding-right: 0; }
  .kpi-carousel { padding-left: 0; padding-right: 0; }
  .kpi-carousel__group .kpi-item:first-child { padding-left: 0; }
  .kpi-carousel__group .kpi-item:last-child { padding-right: 0; }
}
/* mobile: same flush-alignment fix as tablet above — but the item's own
   padding-left stays (it's the gap between the restored border-line and
   the text, since every item shows its line here) */
@media (max-width: 699px) {
  .kpi-synthesis__caption { padding-left: 0; padding-right: 0; }
  .kpi-carousel { padding-left: 0; padding-right: 0; }
}
/* Mobile/tablet carousel variants: hidden by default, shown only at their
   own breakpoint; the un-modified .kpi-carousel keeps serving tablet+desktop */
.kpi-carousel--mobile { display: none; }
@media (max-width: 699px) {
  .kpi-carousel:not(.kpi-carousel--mobile) { display: none; }
  .kpi-carousel--mobile { display: block; }
}

/* Fundamentals cards */
.fundamentals { margin-top: calc(clamp(3.5rem, 7vw, var(--sp-7)) - 70px); }
/* the fluid clamp() above resolves negative across the tablet range (min
   bound 56px - 70px), leaving zero/negative gap after the KPI carousel —
   fixed 50px gap instead */
@media (min-width: 700px) and (max-width: 900px) {
  .fundamentals { margin-top: 50px; }
}
@media (max-width: 699px) {
  .fundamentals { margin-top: 50px; }
}
.fundamentals__caption {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
  color: var(--blue2-100);
  margin-bottom: var(--sp-4);
}
.fundamentals-cta { margin-top: calc(clamp(3rem, 6vw, var(--sp-7)) - 5px); }
.fundamentals-cta .body-soft { margin-top: calc(var(--sp-3) / 4); }
.fundamentals-cta .cta-button { margin-top: calc(var(--sp-4) / 2); }
.fundamentals-cta .fundamentals__caption,
.sectors-cta .fundamentals__caption {
  font-size: calc(1.05rem + 2px);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--accent);
  margin-bottom: calc(var(--sp-4) / 6);
}
/* Fundamentals carousel — 3+2 groups, same slide mechanics as .kpi-carousel */
.fundamentals-carousel__viewport { overflow: hidden; }
.fundamentals-carousel__track {
  display: flex;
  transition: transform 0.7s var(--ease);
}
.fundamentals-carousel__group {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-width: 0;
}
@media (min-width: 760px) {
  .fundamentals-carousel__group { grid-template-columns: repeat(3, 1fr); }
}
/* Tablet-only: swap in the dedicated 2-per-slide variant (3 groups of 2,
   last group repeats the Real Estate card), same pattern as
   .about-features-carousel--mobile/--tablet */
.fundamentals-carousel--tablet { display: none; }
@media (min-width: 700px) and (max-width: 900px) {
  .fundamentals-carousel:not(.fundamentals-carousel--tablet) { display: none; }
  .fundamentals-carousel--tablet { display: block; }
  .fundamentals-carousel--tablet .fundamentals-carousel__group { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile-only: same pattern, 1-per-slide variant (5 groups of 1, no repeat
   needed since 5 divides evenly into single-item slides) */
.fundamentals-carousel--mobile { display: none; }
@media (max-width: 699px) {
  .fundamentals-carousel:not(.fundamentals-carousel--mobile) { display: none; }
  .fundamentals-carousel--mobile { display: block; }
}
.fundamentals-carousel__nav { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-top: calc(clamp(2rem, 4vw, 3rem) - 15px); }
.fundamentals-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.fundamentals-carousel__arrow svg { width: 24px; height: 24px; }
.fundamentals-carousel__arrow:hover { color: #008ca8; }
.fundamentals-carousel__dots { color: var(--text-soft); }

/* Shared dot indicators for all group carousels (KPI, fundamentals, about
   features): "< •••• >" — generic substring selectors so any [prefix]__dots/
   [prefix]__dot-item pair picks these up; each carousel above sets its own
   color to match its arrows. Substring (not suffix) matching is required
   because each dot also carries a second "is-active" class token. */
[class*="__dots"] { display: flex; align-items: center; gap: 8px; }
[class*="__dot-item"] {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
[class*="__dot-item"]:hover { opacity: 0.7; }
[class*="__dot-item"].is-active { opacity: 1; }

/* Fundamentals card — plain, divided-column layout (same left-line treatment
   as .service), no card box/shadow/rounded corners */
.fcard {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 clamp(1rem, 2vw, 2rem);
  border-left: 1.5px solid var(--border);
  min-width: 0;
}
.fundamentals-carousel__group .fcard:first-child { border-left: none; }
/* tablet: same flush-alignment fix as the KPI item first/last padding above */
@media (min-width: 700px) and (max-width: 900px) {
  .fundamentals-carousel--tablet .fundamentals-carousel__group .fcard:first-child { padding-left: 0; }
  .fundamentals-carousel--tablet .fundamentals-carousel__group .fcard:last-child { padding-right: 0; }
}
/* mobile: unlike the KPI carousel, the fundamentals card's vertical line is
   omitted here — 1 card per group, so it's always :first-child (no line to
   restore); its own padding-left stays for the gap between line and text */
.fcard .media { border-radius: 0; box-shadow: none; }
.fcard__body { display: flex; flex-direction: column; gap: 0.5rem; }
.fcard__eyebrow {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--accent-deep);
}
.fcard h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  color: var(--accent);
}
.fcard__desc { color: var(--text-soft); font-size: 0.95rem; line-height: 1.55; }

/* =============================================================
   PropDesk
   ============================================================= */
.client-area {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #00242D, #004552);
  padding-bottom: calc(clamp(3.15rem, 6.3vw, 7rem) - 10px);
}
.client-area__panel {
  max-width: 720px;
}
.client-area__header .eyebrow,
.client-area__header h2,
.client-area__header p { text-shadow: var(--hero-text-shadow); }
.client-area__header h2 { font-size: var(--fs-h2); margin-top: 9px; }
.client-area__header p { margin-top: var(--sp-3); }
@media (min-width: 900px) {
  html[lang="pt"] .client-area__header p { padding-right: 140px; }
}
.cta-button--ghost.client-area__cta {
  margin-top: var(--sp-4);
  padding: 0.5rem 0.875rem;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cta-button--ghost.client-area__cta:hover {
  background: transparent;
  border-color: #fff;
  transform: none;
}
.client-area__cta-icon { width: 14px; height: 14px; flex-shrink: 0; }
.client-area__media {
  --media-w: min(50.25vw, 830px);
  position: absolute;
  top: 190px;
  right: -10px;
  width: var(--media-w);
  /* image bled 20px past the box's bottom edge so its own bottom 20px get
     clipped (background is always clipped to the element's box) */
  height: calc(var(--media-w) * 671 / 988 - 20px);
  background-image: url('../img/backs/clients-area.png');
  background-size: var(--media-w) calc(var(--media-w) * 671 / 988);
  background-position: top right;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.client-area__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(0,134,177,0.5), transparent 55%),
    radial-gradient(50% 80% at 0% 100%, rgba(0,111,145,0.4), transparent 55%);
  opacity: 0.9;
}
.client-area .container { position: relative; z-index: 1; }
/* mobile: taller section to make room for the media image relocated to
   bottom-center at 198% size (180% * 1.1), bled 50px past the section's
   bottom edge so it clips (desktop keeps its top-right placement) */
@media (max-width: 699px) {
  .client-area { padding-bottom: calc(clamp(3.15rem, 6.3vw, 7rem) - 10px + 200px); }
  .client-area__media {
    --media-w: min(99.495vw, 1643.4px);
    top: auto;
    bottom: -50px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    background-position: bottom center;
  }
  .client-area__nowrap { white-space: nowrap; }
}
/* tablet: taller section for a 105%-size media image (140% * 0.75, still
   right-aligned like desktop), rebased to the bottom and bled 40px past the
   section's bottom edge so it clips; the description text gets a right
   padding so it wraps around the banner's middle instead of running under
   the image */
@media (min-width: 700px) and (max-width: 900px) {
  .client-area { padding-bottom: calc(clamp(3.15rem, 6.3vw, 7rem) - 10px + 10px); }
  .client-area__media {
    --media-w: min(52.7625vw, 871.5px);
    top: auto;
    bottom: -40px;
    right: 5px;
    background-position: bottom right;
  }
  .client-area__header p { padding-right: 50%; }
  .client-area__nowrap { white-space: nowrap; }
}

/* =============================================================
   Contact
   ============================================================= */
#contact { position: relative; }
#contact::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 116, 139, 0.15) 0%, transparent 50%);
}
#contact .container { position: relative; z-index: 1; }
.contact__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, var(--sp-6));
}
@media (min-width: 900px) {
  .contact__panel { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  /* PT-only: "Acesso a Oportunidades" needs more room than the shorter EN
     heading to fit on one line before the "Estratégicas" break */
  html[lang="pt"] .contact__panel { grid-template-columns: 610px 1fr; }
}
.contact__info h2 { font-size: var(--fs-h2); margin-top: 9px; }
.contact__desc { max-width: 54ch; margin-top: var(--sp-3); margin-bottom: calc(var(--sp-4) * 2); }
.contact__office {
  margin-bottom: var(--sp-4);
  max-width: 42ch;
}
@media (max-width: 699px) {
  /* mobile: address block (and the Get in Touch button below it, which
     follows in normal flow) shifted up 20px */
  .contact__office { margin-top: -20px; }
}
.contact__office-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 0.5rem;
}
.contact__office-title--gap { margin-top: 1rem; }
.contact__office p {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.contact__office a { color: var(--text-soft); text-decoration: none; }
.contact__office a:hover { color: var(--accent-deep); }
.contact__map-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.contact__map-link .arrow { transition: transform 0.3s var(--ease); }
.contact__map-link:hover .arrow { transform: translateX(4px); }
.cta-button.contact__ghost-btn {
  padding: 0.5rem 0.875rem;
  background: transparent;
  color: var(--grey-600);
  border: 1.5px solid var(--grey-300);
  box-shadow: none;
}
.cta-button.contact__ghost-btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  transform: none;
}

/* Contact form */
.contact__form { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 84px; }
@media (min-width: 900px) {
  /* align the form's top with the description text, not the title */
  html[lang="pt"] .contact__form { margin-top: 178px; }
  html[lang="en"] .contact__form { margin-top: 178px; }
}
@media (max-width: 699px) {
  /* mobile: form sits 60px higher (40px + 20px); no extra side padding — it
     keeps the container's main gutter, aligning with the logo/headings */
  .contact__form { margin-top: 24px; }
}
@media (min-width: 700px) and (max-width: 900px) {
  /* tablet: gap above the form halved, plus 30px breathing room on each side */
  .contact__form { margin-top: 42px; padding-left: 30px; padding-right: 30px; }
}
.contact__field { display: flex; flex-direction: column; gap: 0.25rem; }
.contact__field label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
}
.contact__field input, .contact__field textarea {
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-soft);
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.contact__field input:focus, .contact__field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
/* iOS/iPadOS Safari auto-zooms the whole page when a focused field's
   font-size is < 16px — which pushes the layout past its horizontal gutter
   and makes all content look trimmed to the edges. Pin fields to 16px on
   touch breakpoints so focus never triggers that zoom (desktop keeps 0.9rem). */
@media (max-width: 900px) {
  .contact__field input, .contact__field textarea { font-size: 16px; }
}
.contact__field textarea { resize: vertical; min-height: 80px; }
.contact__form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.cf-turnstile {
  transform: scale(0.85);
  transform-origin: left center;
  margin-right: -45px;
}
.contact__submit { margin-top: 0; }
/* shown right below the form after contact.php redirects back with
   ?sent=1 / ?error=1 — see main.js */
.contact__submit-msg { margin-top: 0.85rem; }
.contact__submit-msg--error { color: #c0392b; }
.cta-button {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  background: var(--accent); color: #fff;
  padding: 1rem 1.75rem; border-radius: 100px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 0 12px 24px -10px rgba(0,134,177,0.6);
}
.cta-button:hover { background: var(--accent-deep); transform: translateY(-2px); }
.cta-button .arrow { transition: transform 0.3s var(--ease); }
.cta-button:hover .arrow { transform: translateX(4px); }

/* =============================================================
   Footer / Legal
   ============================================================= */
.site-footer {
  background: linear-gradient(to bottom, var(--blue2-100), #00242D);
  color: rgba(255,255,255,0.7);
  padding-top: calc(clamp(3rem, 6vw, var(--sp-6)) - 30px);
  /* extra bottom room so #contact (the last section) has enough scrollable
     height below it to ever reach flush under the fixed header — otherwise
     the browser's max-scroll clamp stops short and Contact never gets a
     chance to register as the "current" section for the header's tone */
  padding-bottom: calc(clamp(3rem, 6vw, var(--sp-6)) + 30px);
}
.site-footer .container {
  display: grid;
  gap: var(--sp-4);
}
.footer-top {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  padding-block: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.8);
}
.site-footer .brand img { height: 59px; opacity: 0.8; padding-bottom: 10px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-nav a {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.72);
  transition: color 0.3s var(--ease);
}
.footer-nav a:hover { color: #fff; font-weight: 600; }
.footer-nav a.active { color: #fff; font-weight: 600; }
.legal {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  max-width: 700px;
}
.legal a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: -0.5rem;
}
.footer-social { display: flex; gap: 0.75rem; flex: none; }
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.7);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.footer-social__link:hover { border-color: #fff; color: #fff; }
.footer-social__link svg { width: 16px; height: 16px; }
@media (max-width: 699px) {
  /* logo reduced 10%; the footer-top divider line gets 10px more breathing
     room top/bottom; the social icons relocate out of footer-bottom's flow
     up to the top-right corner, alongside the logo row */
  .site-footer .brand img { height: 53.1px; }
  .footer-top { padding-block: calc(var(--sp-2) + 10px); }
  .site-footer .container { position: relative; }
  .footer-social { position: absolute; top: calc(var(--sp-2) + 10px + 8px); right: var(--gutter); }
  /* nav wraps onto its own row below the logo (footer-top's flex gap sets
     that spacing) — pull it up 15px without touching the logo/icon row */
  .footer-nav { margin-top: -15px; }
}
@media (min-width: 700px) and (max-width: 900px) {
  /* tablet: nav row (wraps below the logo, same as mobile) pulled up 15px;
     footer-top gets 10px more bottom padding only (top stays default); the
     social icons relocate to the top-right corner alongside the logo, same
     approach as mobile */
  .footer-nav { margin-top: -15px; }
  .footer-top { padding-top: var(--sp-2); padding-bottom: calc(var(--sp-2) + 10px); }
  .site-footer .container { position: relative; }
  .footer-social { position: absolute; top: calc(var(--sp-2) + 11px); right: var(--gutter); }
}

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__scroll-cue .line { animation: none; }
}