/* ==============================
     BRAND FONTS
     ==============================
     The faces in assets/fonts are declared below, and what is *missing* from
     that folder matters as much as what is in it: CSS font matching never
     leaves a family empty, so a weight with no file is rendered by whichever
     face the family does have. What is bundled:

       MADE TOMMY        ExtraBold 800 only — no Regular, no Bold.
       MADE Tommy Soft   Regular 400 and Medium 500 — no Bold, no ExtraBold,
                         so 700/800 resolve to Medium plus synthetic bold.
       Museo Sans        Regular and Semibold, as woff2 with a woff fallback.
       Minion Pro        in the folder but undeclared — nothing in the frame is
                         set in a serif, so loading it would cost 218KB for
                         nothing.

     MADE TOMMY has only its ExtraBold, so the table rules that want the family
     at a text weight cannot name it — matching would render a whole column in
     ExtraBold. They use MADE Tommy Soft instead, the same brand family in the
     rounded cut, which is bundled at the weights they need.

     Montserrat is still named in the stacks below, but it is no longer
     downloaded: the Google Fonts <link> left index.html because it was a
     render-blocking stylesheet on another origin, for a face that never ends
     up being the final look. It now resolves only for a visitor who already
     has Montserrat installed; everyone else falls through to system-ui during
     the swap. Nothing depends on it.

     Museo Sans numbers its cuts by design weight, not by CSS weight, and the
     two do not line up — the mapping is at the @font-face blocks below.

     Licensing: the MADE files are the "PERSONAL USE" cuts, which do not licence
     a public site. Dropping in the licensed webfont build is a file-for-file
     swap — the family names below do not change.
  */

  @font-face {
    font-family: "MADE TOMMY";
    src: url("assets/fonts/MADE%20TOMMY%20ExtraBold_PERSONAL%20USE.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "MADE Tommy Soft";
    src: url("assets/fonts/MADE%20Tommy%20Soft%20Regular%20PERSONAL%20USE.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "MADE Tommy Soft";
    src: url("assets/fonts/MADE%20Tommy%20Soft%20Medium%20PERSONAL%20USE.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  /* Museo Sans. The foundry's cut numbers are design names, and the weight each
     file actually declares is a different number again:

       file                  foundry name          OS/2 weight
       museosans-100         Museo Sans 100        250
       museo-sans-300        Museo Sans 300        300
       museosans_500         Museo Sans 500        400   <- the regular
       museo-sans-700        Museo Sans 700        600   <- the semibold
       museosans-900         Museo Sans *Cyrl* 900 700

     Only the two the design uses are declared, at the weight they really are,
     so the numbers in the rules below mean what they say in CSS. Note the 900
     is from Museo Sans Cyrl, a different family from the rest of the set — if
     a black weight is ever needed, check it against the others first.

     The other three files stay in assets/fonts undeclared; a rule that needs
     one declares it here and pays for it then. */
  @font-face {
    font-family: "Museo Sans";
    src: url("assets/fonts/museosans_500-webfont.woff2") format("woff2"),
         url("assets/fonts/museosans_500-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Museo Sans";
    src: url("assets/fonts/museo-sans-700-webfont.woff2") format("woff2"),
         url("assets/fonts/museo-sans-700-webfont.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Museo Sans";
    src: url("assets/fonts/museosans-900-webfont.woff2") format("woff2"),
         url("assets/fonts/museosans-900-webfont.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --teal: #00a19c;
    --teal-dark: #4d888a;
    --teal-light: #9bc3c7;
    --teal-bg: #e9f1f3;
    --yellow: #e2b72b;
    --text-dark: #3d3935;
    --text-body: #5a595c;
    --white: #ffffff;

    /* The one colour outside the brand palette, used for validation alone:
       nothing in the teal-and-yellow set reads as a problem rather than as
       decoration. */
    --error: #c0392b;

    /* The download modal's own greys, straight off the `modal-download`
       frame: the panel, the field surface inside it, and the muted body
       text it sets the intro and the consent line in. Outside the brand
       palette and used nowhere else on the page. */
    --panel-grey: #e5e5e5;
    --field-grey: #ced5d5;
    --panel-muted: #808080;

    /* Height of the sticky header, and therefore the strip at the top of the
       viewport that is never free once the page has scrolled. Built from the
       header's own classes: pt-6 (24px) + the nav pill, which is py-4 (16px)
       + the 40px logo (h-10) + py-4 (16px). Change any of those and change
       this with them. */
    --header-offset: 96px;

    /* Height of one band of the flag that opens the page. 40px on the 1280px
       Figma frame, and the same at every width — the bands are a fixed strip,
       like the ones the footer closes on, not a share of the viewport.

       The three bands and the header are one composition and both read this:
       the flag is 3 bands tall, the header is pulled back up across all three
       so the pill floats over them, and the hero starts where the third band
       ends. Change this one value and the three move together. */
    --top-flag-band: 40px;

    /* Mobile drawer motion. Opening and closing are the same animation played
       in opposite directions, and the backdrop and the panel have to land
       together, so both read these two values instead of carrying their own. */
    --drawer-duration: .32s;
    --drawer-ease: cubic-bezier(.4, 0, .2, 1);

    /* Height of one band of the Brazilian flag strip under the player. The
       strip and the scroll cue laid over its last band both read it, which is
       what keeps the cue centred on the green whatever the height becomes.

       195px on the 1280px Figma frame, which is 15.234vw, and that is the
       whole rule: the bands keep their share of the width instead of stepping
       down at breakpoints. It is the ratio the strip already scales its
       overlap by — `min(431px, 33.7vw)` below is 431/1280 — so the overlap and
       the bands shrink together and the composition stays the figure.

       The cap holds the design size once the frame stops growing. The floor is
       the one value that is not from the frame: the cue sits on the last band,
       and below ~95px a 40px button in a band that keeps shrinking stops
       reading as a band with an arrow on it. */
    --flag-band: clamp(70px, 15.234vw, 195px);

    /* Green left below the player, and the least it may become. The cue sits
       in it, so this is the floor that keeps the arrow off the player's edge:
       the 40px button plus 24px of green above and below it. */
    --flag-cue-room: 88px;

    /* How far the player comes down over the strip. 431px on the 1280px frame,
       33.7vw as it shrinks — but the bands shrink at 3 x 15.234vw = 45.7vw,
       faster than the player rises, so below ~733px the player eats into the
       green until the arrow is against its edge (2px of green at 502px). The
       third term stops that: the overlap never grows past the point where
       --flag-cue-room of green is left. It only binds below ~733px; from there
       up the geometry is the frame's, untouched. */
    --flag-overlap: min(431px, 33.7vw, 3 * var(--flag-band) - var(--flag-cue-room));
  }

  html {
    scroll-behavior: smooth;

    /* Anchor targets align to the top of the viewport by default, which puts
       the first --header-offset pixels of every section behind the pinned
       header. This reserves that strip, so a jump to #about lands with the
       section heading just below the pill instead of under it. It also covers
       the paths no click handler would: a deep link with a hash, the back and
       forward buttons, and Tab-ing to a link inside a section. */
    scroll-padding-top: var(--header-offset);
  }

  /* Set while any overlay covers the page (mobile drawer, video modal), so
     the page behind it cannot scroll. JS only adds and removes the class —
     what a locked page looks like is decided here. */
  body.is-scroll-locked {
    overflow: hidden;
  }

  /* Set by js/utils/layout.js around a single measurement, and gone again
     before the same task ends, so it is never painted. A stuck box reports
     the offset it was pushed to rather than the one it has in the flow;
     taking it out of sticky for the read is what gets the layout position
     back. */
  .is-measuring {
    position: static !important;
  }

  picture {
    display: contents;
  }

  a:focus-visible,
  button:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Font families with fallbacks */
  .font-made-tommy {
    font-family: "MADE TOMMY", "Montserrat", system-ui, sans-serif;
  }

  .font-made-tommy-soft {
    font-family: "MADE Tommy Soft", "Montserrat", system-ui, sans-serif;
  }

  .font-museo {
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
  }

  /* Blur BG decorations */
  .blur-decoration {
    border-radius: 50%;
    background: #9bc3c7;
    filter: blur(126.3px);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
  }

  /* The governance illustration and its glow are anchored 300px and 450px
     *below* the section box, so both bleed out of its bottom edge and under
     the footer. On any other section that bleed costs nothing; on the last one
     it is the end of the page, and the document stretched 330px past the final
     stripe — a band of dead scroll under the footer with the glow painting
     through it.

     This layer clips that. Its bottom edge is the section's own, which the
     opaque footer already covers 24px higher up, so nothing that was ever
     visible is lost; its top edge sits 600px *above* the section, because the
     glow and the illustration rise out of it by design and that is exactly
     what `overflow: hidden` on the section cuts off. The horizontal axis stays
     `visible`, so the glow still spills past the section's sides as before.

     `clip` and not `hidden` on the vertical axis: `hidden` cannot be paired
     with a `visible` sibling — the pair would compute to `auto`, making this a
     scroll container and clipping the sides too. `clip` is the one value that
     leaves the other axis alone. */
  .deco-bleed {
    position: absolute;
    left: 0;
    right: 0;
    top: -600px;
    bottom: 0;
    overflow-x: visible;
    overflow-y: clip;
    pointer-events: none;
    z-index: 0;
  }

  /* The same bleed, sideways. The glows are placed to run past the edges of
     their section boxes, and on a narrow viewport that carries them past the
     screen: the scope glow ends 100px beyond the page at a 1213px viewport,
     the governance one 231px beyond at 390px. Ink outside the page cannot be
     seen, but it counted as scrollable width, so the whole page could be
     dragged sideways into an empty band.

     `main` is the box to clip on, because it is exactly as wide as the
     viewport at every width: the clip line always lands where the screen
     already ends, which is why nothing changes on screen. Clipping the
     sections instead would cut glow that is still visible — past ~884px the
     sections stop growing at 1280px and the scope glow's 100px overhang sits
     inside the page, beside the section rather than beyond the screen.

     Not on `html`: `overflow-x` there makes the document a scroll container
     and the sticky header stops pinning. Not on `body` either: with `html`
     visible, body's overflow propagates to the viewport and nothing is
     clipped at all. Both measured in the browser.

     `clip` and not `hidden` so the vertical axis can stay `visible`: the
     glows bleed up and down across section boundaries by design, and that is
     the whole look. */
  main {
    overflow-x: clip;
    overflow-y: visible;
  }

  /* ==============================
     TOP FLAG
     ============================== */
  /* The three bands the page opens on, full bleed across its first three
     --top-flag-band pixels. The markup carries the colours, as the footer's
     three bands do; the heights are here because the header's geometry is
     built from them. */
  .top-flag>div {
    height: var(--top-flag-band);
  }

  /* ==============================
     STICKY HEADER
     ============================== */
  /* `sticky` keeps the header in normal flow, so the space it occupies at the
     top of the page stays occupied and nothing below it shifts up. Once the
     page scrolls past it, it pins to the viewport. `top: 0` pins the header
     box itself, and the header keeps its own pt-6 padding, so the pill holds
     the same 24px gap from the top edge that it has at rest.

     The margins lay it over the flag above it, the way the frame does: pulled
     back up across all three bands, so the header starts where the flag starts
     and its pt-6 drops the pill 24px into the first band, then given back
     whatever the flag is taller than the header — the bottom band the pill
     does not reach — so the hero still starts where the flag ends and nothing
     below it moves. Both are written from --top-flag-band and
     --header-offset rather than as 120px and 24px, so the pair stays true if
     either changes.

     Painting order needs nothing: the header is positioned and the flag is
     not, so the pill is over the bands however they are stacked. Neither does
     the measuring in js/utils/layout.js — the pull-up puts the header's
     layout top at 0, which is where #home should land. */
  .site-header {
    position: sticky;
    top: 0;
    margin-top: calc(var(--top-flag-band) * -3);
    margin-bottom: calc(var(--top-flag-band) * 3 - var(--header-offset));
  }

  /* Nav pill */
  .nav-pill {
    background: #e9f1f3;
    border-radius: 80px;
    backdrop-filter: blur(8px);
  }

  /* Card hover */
  .card-hover {
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  }

  @media (prefers-reduced-motion: reduce) {

    .card-hover,
    .card-hover:hover {
      transition: none;
      transform: none;
    }
  }

  /* Scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Decorative underline. Wraps a word inside a heading and draws a bar
     across it with ::after. Because the bar is pinned to the edges of the
     text it wraps, it follows the wording in any language on its own — no
     measuring, no JavaScript. */
  .section-underline {
    position: relative;
    display: inline-block;
  }

  .section-underline::after {
    content: "";
    background-color: #E2B72B !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    /* Figma: every section underline is 2px */
    height: 4px;
    border-radius: 200px;
    background: currentColor;
    z-index: -1;
  }


  /* ==============================
     PAGE ALIGNMENT (Figma frame, 1280px wide)
     Every text block in the frame shares one column: x 236..1044 (808px).
     The table (929px) and the video (922px) are the only blocks wider than
     it. Rows that pair a circular image with text let the image hang toward
     the page edge: image-left rows run x 20..1040, the image-right row runs
     x 240..1257. Offsets are percentages of the 1280px container so they
     hold as it shrinks.
     ============================== */
  .content-col {
    max-width: 808px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Video heading. Museo Sans is bundled now, so the -0.059em that used to sit
     here — pulling Montserrat's 1013px second line back to the 901px measured
     on the Figma frame — is gone with the font that needed it.

     The weight is set here rather than in the markup because the heading's
     `font-bold` utility asks for 700, and the semibold this design uses is a
     600 (see the @font-face mapping at the top). An id beats a utility class on
     specificity, so this wins without touching the class list. */
  #video-title {
    font-weight: 600;
  }

  /* Body copy. Figma frame: 14px on a 17px line, colour #5a595c. MADE Tommy
     Soft Regular is bundled, so this carries the frame's own values — the 500
     weight and the -0.049em tracking that used to sit here were both
     compensating for Montserrat, and both go with it. */
  .body-copy {
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
  }

  /* Scope / deliverables / timeline table
     Measurements taken from the Figma frame (1280px wide): table 929px,
     columns 234 / 319 / 373px, header 74px with a 42px pill inset 24px. */
  /* The table keeps a 700px minimum, so below that it is the wrapper that
     scrolls. `overflow-y: hidden` rather than plain `overflow: hidden` because
     the 16px rounding still has to clip the corners — only the horizontal axis
     is allowed to move. */
  .scope-table {
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
  }

  /* The arrow under the table, which runs it to the far edge and back. It is
     `-rotate-90` at rest — the shared scroll-down asset pointing right — and
     flipped by the module once the far edge is reached.

     The row is what centres it, which is why the button stays inline-flex: the
     rotation has to turn a 40px box rather than a full-width one. The gap above
     the arrow belongs to the button and not to the row, so that hiding it — the
     module sets `hidden` whenever the table fits — takes the gap with it. */
  .scope-scroll-row {
    display: flex;
    justify-content: center;
  }

  .scope-scroll-btn {
    display: inline-flex;
    margin-top: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transform: rotate(-90deg);
    transition: transform 240ms ease;
  }

  .scope-scroll-btn.is-flipped {
    transform: rotate(90deg);
  }

  .scope-scroll-btn[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .scope-scroll-btn {
      transition: none;
    }
  }

  /* Every rule in the grid is 1px, inside and out.

     That is what `collapse` buys. Under `separate` each cell paints a border
     of its own, so two neighbouring cells lay a 1px line each side by side:
     the outer edge reads 1px and every internal divider reads 2px. Collapsing
     has adjacent cells share one border rather than draw two.

     It is safe here only because the 16px rounding sits on the .scope-table
     wrapper rather than on the table. `border-radius` is ignored on a
     collapsed table, so moving that radius onto .scope-grid would square the
     corners off. */
  .scope-grid {
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #ebebeb;
  }

  /* Header — Figma draws a 1px #ebebeb hairline around and between the header cells */
  .scope-grid thead th {
    padding: 16px 24px;
    border: 1px solid #ebebeb;
  }

  .scope-grid thead .th-pillar {
    background: #4d888a;
  }

  .scope-grid thead .th-scope {
    background: #9bc3c7;
  }

  .scope-grid thead .th-deliverable {
    background: #e2b72b;
  }

  .scope-grid .th-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 4px 12px;
    border-radius: 999px;
    background: inherit;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    /* .font-made-tommy at 800 is exactly the cut that is bundled, so this is
       the Figma value rather than a Montserrat fit. */
    letter-spacing: 0.095em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }

  /* Body — every cell is vertically centred in the Figma frame, and the 1px
     #f5f5f5 rule runs around the body as well as between the cells */
  .scope-grid tbody td {
    vertical-align: middle;
    color: #3d3935;
    border: 1px solid #ebebeb;
  }

  .scope-grid .cell-pillar {
    padding: 20px 16px 20px 32px;
  }

  .scope-grid .cell-scope {
    padding: 20px 24px 20px 16px;
  }

  .scope-grid .cell-deliverable {
    padding: 20px 16px 20px 40px;
  }

  .scope-grid tbody tr:first-child td{
    padding-top: 10px !important;
  }
  .scope-grid tbody tr:nth-last-child(2) td{
    padding-bottom: 10px !important;
  }

  /* Measured against the untracked body copy, the Figma frame carries ~0.15em
     on the pillar title, ~0.09em on the scope text, ~0.12em on the deliverable,
     ~0.13em on the final title and ~0.095em on the header pill. Every rule
     below is set in a real MADE face now, so each one uses its frame value
     unless its comment says why it cannot. */

  /* Real face: MADE Tommy Soft. Only Regular and Medium are bundled, so the
     700 here is Medium plus synthetic bold — close to the frame, not it. */
  .scope-grid .pillar-title {
    margin-top: 10px;
    font-family: "MADE Tommy Soft", "Montserrat", system-ui, sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: 0.15em;
  }

  /* MADE Tommy Soft standing in for MADE TOMMY Regular, which is not bundled.
     It is the same brand family in the rounded cut and, unlike Montserrat, it
     carries the frame's own metrics: at the Figma value below it reproduces the
     frame's eight line breaks exactly, character for character. */
  .scope-grid .scope-text {
    font-family: "MADE Tommy Soft", "Montserrat", system-ui, sans-serif;
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    letter-spacing: 0.09em;
  }

  /* Same stand-in, where the frame uses MADE TOMMY Bold. There is no bold in
     the bundle, so this is Medium with the browser's synthetic bold on top —
     which strokes the glyphs without touching their advance widths, so the
     tracking is still the frame's own 0.12em and needs no fudge factor.

     That lands the frame's line counts on all three rows (5 / 5 / 7). The first
     row breaks one word later than the frame does — 'Public' rides up onto line
     one — because the synthesised weight is not the real cut. Pushing it down
     costs an extra line on the final row, which would change that row's height;
     the line counts are worth more than the break, so it stays. */
  .scope-grid .deliverable-text {
    font-family: "MADE Tommy Soft", "Montserrat", system-ui, sans-serif;
    font-size: 17px;
    line-height: 23px;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  /* Final row. Its scope cell has a narrower text box than the pillar rows:
     in Figma the longest line there is 254px against 270px above, and
     "recommendations through the CCS" (~263px) would have fitted on line 4 at
     the wider measure but does not — so the right inset is ~43px, not ~34px. */
  .scope-grid .row-final .cell-scope {
    padding-right: 41px;
  }

  .scope-grid .row-final td {
    background: #d5d5d5;
    border-color: #e0e0e0;
    color: #4d888a;
  }

  /* Real face: MADE Tommy Soft, synthetic-bolded from Medium as above. */
  .scope-grid .final-title {
    font-family: "MADE Tommy Soft", "Montserrat", system-ui, sans-serif;
    font-size: 28px;
    line-height: 30px;
    font-weight: 800;
    letter-spacing: 0.13em;
  }

  /* The three Learn more links. They sit under the text they belong to rather
     than inside it, so the paragraph keeps the line breaks measured off the
     frame, and are underlined so the link reads as one without a second colour
     entering the table. */
  .scope-grid .scope-link {
    display: inline-block;
    margin-top: 8px;
    font-family: "MADE Tommy Soft", "Montserrat", system-ui, sans-serif;
    font-size: 14px;
    line-height: 17px;
    font-weight: 500;
    letter-spacing: 0.09em;
    color: #4d888a;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .scope-grid .scope-link:hover,
  .scope-grid .scope-link:focus-visible {
    color: #3d6f71;
  }

  /* Download Report: the one control in the table that is not a text link. The
     frame draws a filled pill with the glyph tucked into the left padding —
     4px there against 16px on the right, which is what sets the label between
     the icon and the far edge, for the 32px it stands.

     A pixel comes off each of those: Figma draws a stroke inside the frame and
     measures its padding from the outer edge in, where CSS puts the border
     outside the padding box. 3 + 1 lands on the frame's 4, and the box on its
     32 instead of 34. */
  .scope-grid .scope-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 3px 15px 3px 3px;
    font-family: "MADE Tommy Soft", "Montserrat", system-ui, sans-serif;
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    color: var(--white);
    white-space: nowrap;
    background: var(--teal);
    border: 1px solid var(--teal);
    border-radius: 80px;
    box-shadow: 0 2px 3.5px rgba(0, 164, 158, 0.1);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
  }

  .scope-grid .scope-cta-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
  }

  /* The frame draws no hover, so it takes the darker teal the page already
     uses everywhere else for the same gesture. */
  .scope-grid .scope-cta:hover,
  .scope-grid .scope-cta:focus-visible {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
  }

  @media (max-width: 1023px) {
    .content-col {
      max-width: 600px;
    }

    .scope-grid thead th {
      padding: 8px 10px;
    }

    .scope-grid .th-pill {
      min-height: 26px;
      padding: 3px 10px;
      font-size: 11px;
      letter-spacing: 0.07em;
    }

    .scope-grid .cell-pillar {
      padding: 16px 12px 16px 20px;
    }

    .scope-grid .cell-scope {
      padding: 16px 16px 16px 12px;
    }

    /* the wider right inset is a desktop-only match to the Figma frame */
    .scope-grid .row-final .cell-scope {
      padding-right: 16px;
    }

    .scope-grid .cell-deliverable {
      padding: 16px 12px 16px 20px;
    }

    .scope-grid .pillar-title {
      font-size: 16px;
      line-height: 22px;
    }

    .scope-grid .deliverable-text {
      font-size: 15px;
      line-height: 21px;
    }

    .scope-grid .final-title {
      font-size: 24px;
      line-height: 26px;
    }
  }

  

  /* Full-screen video overlay.

     Everything that decides where the modal sits and whether it shows lives
     here, not in the markup: an id beats a utility class on specificity, so a
     `position` set here would silently defeat Tailwind's `fixed` — which is
     exactly what used to happen. JS only toggles `is-open`. */
  #video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
  }

  #video-modal.is-open {
    display: flex;
  }
  
  /* ==============================
     DOWNLOAD MODAL
     ==============================
     Same construction as the video overlay above, with four states, the last
     three of which are one click running to its end:

       .is-open         the overlay is on screen
       .is-sending      the details are with whoever is listening
       .is-downloading  the file is being fetched, off that same click
       .is-complete     the file has landed, so the confirmation has taken the
                        form's place

     The panel is the `modal-download` frame: 620px wide, 24px of padding
     inside a 1px teal edge, and a 24px gap running down everything in it.

     A field turns red off `[aria-invalid="true"]`, which the module sets for
     assistive tech regardless. The frame draws no edge on a field at rest, so
     the red one is a transparent border that only changes colour — an edge
     appearing out of nothing would shift the text inside it by a pixel.

     `.download-body` is what scrolls, not the panel, so the close button stays
     on screen instead of travelling up with a long form. */
  #download-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    padding: 24px 16px;
    background: rgba(9, 32, 33, 0.72);
  }

  #download-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .download-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(620px, 100%);
    max-height: calc(100vh - 48px);
    padding: 24px;
    /* Centres the panel and, once it is taller than the overlay allows, keeps
       both ends of it inside — which `align-items: center` alone does not. */
    margin: auto;
    background: var(--panel-grey);
    border: 1px solid var(--teal);
    border-radius: 24px;
    /* The frame's own five-layer shadow. The top two sit at 0 and 1% alpha and
       show as nothing at all; they are kept so the stack is the design's, not
       an edit of it. */
    box-shadow:
      0 274px 38.5px rgba(0, 0, 0, 0),
      0 176px 35px rgba(0, 0, 0, 0.01),
      0 99px 29.5px rgba(0, 0, 0, 0.05),
      0 44px 22px rgba(0, 0, 0, 0.09),
      0 11px 12px rgba(0, 0, 0, 0.1);
  }

  .download-topbar {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  /* The yellow disc and the cross are both inside the SVG, so the button is
     nothing but a 40px hit area wrapped around it. */
  .download-close {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: filter .18s ease;
  }

  .download-close img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .download-close:hover {
    filter: brightness(0.92);
  }

  .download-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 161, 156, 0.35);
  }

  /* `min-height: 0` is what lets this shrink inside the flex column and take
     the scrollbar: without it a tall form pushes the panel past its max-height
     instead of scrolling inside it. */
  .download-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    overflow-y: auto;
  }

  .download-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .download-title {
    font-size: 40px;
    /* 50px over 40px, the height the frame gives the line. */
    line-height: 1.25;
    font-weight: 800;
  }

  /* The frame draws the yellow rule as a fixed 317px vector, which is only how
     wide those words happen to be in Portuguese — the English frame has the
     same line at 195px. A text decoration measures itself, so it comes out
     right in both languages and follows the words if they ever wrap. */
  .download-title-lead {
    color: var(--teal-dark);
    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }

  .download-title-tail {
    color: var(--teal-light);
  }

  .download-intro {
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-size: 14px;
    line-height: normal;
    color: var(--panel-muted);
  }

  .download-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .download-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Company and job title share a line in the frame. `min-width: 0` on the
     children because a flex item will not shrink below its own content, and
     the longer of the two labels would otherwise push the pair past the
     panel's edge. */
  .download-row {
    display: flex;
    gap: 10px;
  }

  .download-row > .download-field {
    flex: 1 1 0;
    min-width: 0;
  }

  .download-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .download-label {
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-size: 12px;
    line-height: normal;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--teal-dark);
  }

  .download-input {
    width: 100%;
    height: 48px;
    padding: 14px 16px;
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-size: 14px;
    line-height: normal;
    color: var(--text-dark);
    background: var(--field-grey);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease;
  }

  /* The frame only ever shows a field empty, so teal is the placeholder's
     colour and not the value's: text being typed takes the body colour, which
     is the one that stays readable on this surface. */
  .download-input::placeholder {
    color: var(--teal);
    opacity: 1;
  }

  /* A ring rather than an outline, at the 3px the rest of the page uses. */
  .download-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 161, 156, 0.18);
  }

  .download-input[aria-invalid="true"] {
    border-color: var(--error);
  }

  .download-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
  }

  /* Takes up no room until it says something, so nothing shifts down. */
  .download-error {
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--error);
    margin-top: -5px;
  }

  .download-error:empty {
    display: none;
  }

  /* The consent box is not in the frame — see the note in index.html. It is
     drawn in the frame's own language: the field surface, the same corner, and
     teal once it is ticked. */
  .download-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: var(--panel-muted);
    cursor: pointer;
  }

  /* Drawn rather than native, for one reason: an invalid checkbox has to go
     red on its own edge, like every other field here, and a native one does
     not expose its border to CSS at all — `outline` is the only thing that
     takes, and it draws a second box around the control instead of colouring
     it. So `appearance: none` and the box is ours.

     It is still a real `<input type="checkbox">`, so the keyboard, the label
     pairing and what assistive tech reports are untouched. The one thing lost
     is the system-drawn control under forced colours, handed back at the
     bottom of this block.

     The tick is a background image and not a pseudo-element: `::before` on an
     input is not reliable across browsers, and a replaced element with no
     children has nowhere else to put a glyph. */
  .download-checkbox {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--field-grey);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
  }

  .download-checkbox:checked {
    background-color: var(--teal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
  }

  .download-checkbox:focus-visible {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 161, 156, 0.18);
  }

  /* What this whole block exists for: the edge itself, not a box around it. */
  .download-checkbox[aria-invalid="true"] {
    border-color: var(--error);
  }

  .download-checkbox[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
  }

  .download-checkbox:disabled {
    opacity: .6;
  }

  /* Under forced colours the system palette replaces ours, and a box drawn out
     of a background and a border image can come out as an empty square with no
     tick in it. The native control is given back its job there; the red edge
     goes with it, which is why the message below the field is the thing that
     never depended on colour. */
  @media (forced-colors: active) {
    .download-checkbox {
      appearance: auto;
      -webkit-appearance: auto;
    }

    .download-checkbox:checked {
      background-image: none;
    }
  }

  .download-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 14px 24px;
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-size: 14px;
    line-height: normal;
    font-weight: 600;
    text-align: center;
    color: var(--white);
    background: var(--teal);
    border: 0;
    border-radius: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
  }

  .download-submit:hover:not(:disabled) {
    background: var(--teal-dark);
    transform: translateY(-1px);
  }

  .download-submit:disabled {
    background: #a8c6c7;
    color: var(--white);
    cursor: not-allowed;
    transform: none;
  }

  /* Both states are in the button, one label each, so the wording stays a
     locale value and a language change reaches the one that is out of sight.
     The download glyph travels with the idle label. */
  .download-btn-idle,
  .download-btn-busy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .download-btn-busy {
    display: none;
  }

  .download-btn-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
  }

  /* One button, three labels, exactly one of them on screen. `.is-sending` is
     the form waiting on its listeners and `.is-downloading` is the file coming
     down; the module never sets both, and the pair below is written so that
     even if it did, the later state would be the one showing. */
  #download-modal.is-sending .download-submit .download-btn-idle,
  #download-modal.is-downloading .download-submit .download-btn-idle {
    display: none;
  }

  #download-modal.is-sending .download-submit .download-btn-busy--sending,
  #download-modal.is-downloading .download-submit .download-btn-busy--downloading {
    display: inline-flex;
  }

  #download-modal.is-downloading .download-submit .download-btn-busy--sending {
    display: none;
  }

  /* A ring with one lit quarter. `currentColor` for the lit part and the
     button's own text colour at low alpha for the rest, so it needs no colour
     of its own and reads the same in both busy labels. */
  .download-spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: download-spin .7s linear infinite;
  }

  @keyframes download-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Working is not the same as refused, so the button keeps its colour through
     both halves of the submit and only says it is busy — the flat grey of
     :disabled would read as a control that had stopped working. Both states
     are listed because the button is `disabled` for the whole run, sending and
     downloading alike. */
  #download-modal.is-sending .download-submit:disabled,
  #download-modal.is-downloading .download-submit:disabled {
    background: var(--teal);
    opacity: .85;
    cursor: progress;
  }

  #download-modal.is-sending .download-submit:disabled:hover,
  #download-modal.is-downloading .download-submit:disabled:hover {
    transform: none;
  }

  /* A field that is locked mid-submit has to look locked; without this it is
     an ordinary field that silently refuses to take a keystroke. */
  .download-input:disabled,
  .download-checkbox:disabled {
    cursor: not-allowed;
  }

  .download-input:disabled {
    opacity: .6;
  }

  #download-modal.is-sending .download-consent {
    cursor: not-allowed;
  }

  /* The spinner is the one thing here that never stops, so it is what goes:
     the label alone carries the state, which is what it was doing anyway. */
  @media (prefers-reduced-motion: reduce) {
    .download-spinner {
      display: none;
    }
  }

  /* ------------------------------
     THE CONFIRMATION
     ------------------------------
     What is on screen once the file has landed. It carries no control, so the
     mark and its line are centred on the panel. The heading above is left
     where it was: it is the same dialog the form was in, and a title that
     slides to the middle reads as a second modal opening.

     `outline: none` is safe here and nowhere else: this box is focused from
     the module so a screen reader reads it out, never by the keyboard, and a
     ring around a paragraph nobody tabbed to only looks like a bug. */
  .download-success {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 8px 0 12px;
    text-align: center;
  }

  .download-success:focus {
    outline: none;
  }

  /* The intro asks for the details, so it goes when the form does. */
  #download-modal.is-complete .download-form,
  #download-modal.is-complete .download-intro {
    display: none;
  }

  #download-modal.is-complete .download-success {
    display: flex;
  }

  .download-check {
    display: block;
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
  }

  .download-check svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Nothing here runs until `.is-complete` puts the box on screen: an element
     inside a `display: none` subtree has no running animations, and starts
     them from the first frame when it is displayed. So these play once, when
     the file has actually landed, and never on load. */
  .download-check-disc,
  .download-check-halo {
    /* Percentage origins on an SVG shape resolve against the whole viewBox
       unless the box is the shape's own. Both circles are centred in it, so
       this changes nothing today — it is what keeps the scale honest if either
       ever moves. */
    transform-box: fill-box;
    transform-origin: center;
  }

  /* One ring, thrown outwards and gone. It is the whole of the "pop": the disc
     under it only grows into place. */
  .download-check-halo {
    fill: none;
    stroke: var(--teal);
    stroke-width: 2;
    opacity: 0;
    animation: download-check-halo .75s ease-out .12s both;
  }

  .download-check-disc {
    fill: var(--teal);
    animation: download-check-disc .45s cubic-bezier(.34, 1.56, .64, 1) both;
  }

  /* 43.2 is the length of the path in index.html — 14.85 for the short arm and
     28.29 for the long one. Hiding it needs a dash at least that long, and
     drawing it is that dash sliding back to zero. Change the `d` and change
     this with it, or the tick draws short or lands early. */
  .download-check-tick {
    fill: none;
    stroke: var(--white);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 43.2;
    animation: download-check-tick .3s cubic-bezier(.4, 0, .2, 1) .28s both;
  }

  @keyframes download-check-halo {
    from {
      opacity: .45;
      transform: scale(.85);
    }

    to {
      opacity: 0;
      transform: scale(1.3);
    }
  }

  @keyframes download-check-disc {
    from {
      transform: scale(0);
    }

    to {
      transform: scale(1);
    }
  }

  @keyframes download-check-tick {
    from {
      stroke-dashoffset: 43.2;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  /* The mark is the confirmation, so it stays — only the arrival goes. Each
     part is pinned at the frame it would have ended on. */
  @media (prefers-reduced-motion: reduce) {
    .download-check-halo {
      display: none;
    }

    .download-check-disc {
      animation: none;
      transform: none;
    }

    .download-check-tick {
      animation: none;
      stroke-dashoffset: 0;
    }
  }

  .download-success-text {
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-body);
  }

  @media (prefers-reduced-motion: reduce) {

    .download-input,
    .download-close,
    .download-submit {
      transition: none;
    }

    .download-submit:hover:not(:disabled) {
      transform: none;
    }
  }

  @media (max-width: 640px) {
    #download-modal {
      padding: 16px 12px;
    }

    .download-panel {
      gap: 16px;
      max-height: calc(100vh - 32px);
      padding: 16px;
      border-radius: 20px;
    }

    .download-body {
      gap: 20px;
    }

    .download-title {
      font-size: 28px;
    }

    /* The pair has no room to sit side by side once the panel is this narrow. */
    .download-row {
      flex-direction: column;
      gap: 8px;
    }

    /* 16px and no smaller: iOS Safari zooms the page in when a field with a
       smaller face takes focus, and never zooms back out. The frame's 14px is
       kept above this width, where no browser does that. */
    .download-input {
      font-size: 16px;
    }

    .download-check {
      width: 80px;
      height: 80px;
    }

    .download-success-text {
      font-size: 15px;
    }
  }

  .brazil-flag-strip {
    display: flex;
    flex-direction: column;
    margin-top: calc(-1 * var(--flag-overlap));
  }

  .flag-band {
    height: var(--flag-band);
  }

  /* The scroll cue is anchored to the strip instead of being offset from the
     section: it covers the green that is actually visible — bottom edge of the
     strip, which is the section's last in-flow child, up to where the player
     stops — and centres the button inside itself. So the arrow is in the
     middle of the green you can see at any width, whatever the button measures.

     That box is the green band and the area below the player, whichever is
     the shorter — their overlap, which is the green on screen. Centring on the
     band alone put the arrow 2px from the player's edge at 502px, where the
     player covers the band's top; centring on everything below the player put
     it 6px under the light teal at 390px, where the player stops above the
     band and that area is not all green. Between them the arrow is centred on
     green at every width, and at 1280px it lands where the frame has it.

     A fixed offset cannot hold that. `bottom: 54px` put the 40px button 24px
     below the centre on a 195px band and 8px below it on a 165px one, and any
     later change to either height would move it again.

     It stays a sibling of the strip rather than a child: the strip is
     `aria-hidden`, and the button is a real control that has to be reachable. */
  .flag-scroll-cue {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: min(var(--flag-band), 3 * var(--flag-band) - var(--flag-overlap));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Scroll down button */
  .scroll-btn {
    width: 40px;
    height: 40px;
    border-radius: 56px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
  }

  /* Mosaic corner decorations */
  .corner-mosaic {
    position: absolute;
  }

  /* ==============================
     MOBILE DRAWER
     ============================== */
  /* The drawer animates in and out, so it can never go back to `display: none`
     — a display switch has no in-between state for a transition to animate.
     It stays laid out and is put out of reach with `visibility` instead, which
     also keeps a closed drawer out of the tab order and deaf to clicks.

     `visibility` is the one property here that cannot tween: it flips at the
     end of its own transition. Closing delays that flip by the full duration,
     so the panel is still on screen while it slides away; opening cancels the
     delay, so the panel is on screen before it starts sliding in. That pair of
     rules is what lets a single class drive both directions. */
  #mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    transition: visibility 0s linear var(--drawer-duration);
  }

  #mobile-menu.open {
    visibility: visible;
    transition-delay: 0s;
  }

  #mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--drawer-duration) var(--drawer-ease);
  }

  #mobile-menu.open #mobile-backdrop {
    opacity: 1;
  }

  /* Parked one full width past the right edge, so it slides in from off-canvas
     rather than growing out of nothing. The shadow only reads once the panel
     is over the page, which is exactly when it gets there. */
  #mobile-drawer {
    position: relative;
    z-index: 10;
    background: #e9f1f3;
    width: 280px;
    max-width: 85vw;
    height: 100%;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-left: auto;
    transform: translateX(100%);
    box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
    transition: transform var(--drawer-duration) var(--drawer-ease);
  }

  #mobile-menu.open #mobile-drawer {
    transform: translateX(0);
  }

  /* The contents trail the panel. Each row starts a little to the right and
     settles in turn, which reads as the menu unfolding instead of a finished
     panel arriving. Its position in the drawer is the only thing a row
     declares — the timing is computed from that below — so adding a link means
     adding one line here. Nothing staggers on the way out: a drawn-out exit
     makes a dismissal feel slow, so the delay is only applied while `.open`
     is set, and drops back to zero the moment it is removed. */
  #mobile-drawer > * {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .22s ease, transform .22s ease;
  }

  #mobile-drawer > :nth-child(1) { --stagger: 0; }
  #mobile-drawer > :nth-child(2) { --stagger: 1; }
  #mobile-drawer > :nth-child(3) { --stagger: 2; }
  #mobile-drawer > :nth-child(4) { --stagger: 3; }
  #mobile-drawer > :nth-child(5) { --stagger: 4; }
  #mobile-drawer > :nth-child(6) { --stagger: 5; }
  #mobile-drawer > :nth-child(7) { --stagger: 6; }

  #mobile-menu.open #mobile-drawer > * {
    opacity: 1;
    transform: translateX(0);
    /* The panel is already a third of the way across before the first row
       starts, so the rows ride it in rather than race it. */
    transition-delay: calc(.1s + var(--stagger, 0) * .04s);
  }

  /* All of the above decorates a state change that has to happen either way,
     so with motion turned down the drawer simply appears. Listed after the
     rules it cancels and at matching specificity, so the stagger delay goes
     with them. */
  @media (prefers-reduced-motion: reduce) {

    #mobile-menu,
    #mobile-backdrop,
    #mobile-drawer,
    #mobile-drawer > *,
    #mobile-menu.open #mobile-drawer > * {
      transition: none;
      transition-delay: 0s;
    }
  }

  /* Closing the drawer hands focus back to the button that opened it, so this
     ring is now something a keyboard visitor actually sees. Same treatment as
     the language selector's, rather than the browser's black default. */
  #hamburger:focus-visible {
    outline: 2px solid #00a19c;
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* Pillar badge — 86 x 26px in the Figma frame */
  .pillar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4d888a;
    color: #fff;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.055em;
  }

  /* Circular image frame */
  .square-frame {
    width: 390px;
    height: 390px;
    border-radius: 200px;
    position: absolute;
  }

  /* Figma: 440px diameter; the ringed PNGs are 442x442, so this renders them 1:1 */
  .circle-frame {
    width: 410px;
    height: 410px;
    overflow: hidden;
    position: relative;
  }

  .circle-and-square{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .circle-and-square--left{
    margin-left: -45px;
  }

  .circle-and-square--right{
    margin-right: -45px;
  }

  .aboutText{
    max-width: 44%;
  }

  .purposetext{
    max-width: 44%;
  }

  @media(max-width: 1400px){
    .circle-and-square--left{
      margin-left: -25px;
    }

    .circle-and-square--right{
      margin-right: -25px;
    }

    .aboutText{
    max-width: 40%;
  }

    .purposetext{
      max-width: 38%;
    }
  }

  @media(max-width: 1340px){
    .circle-and-square--left{
      margin-left: 0px;
    }

    .circle-and-square--right{
      margin-right: 0;
    }
  }

  @media (max-width: 1023px) {

     .circle-and-square--left{
      margin-left: 0;
    }
    .circle-and-square--right{
      margin-right: 0;
    }

    .aboutText{
      max-width: 600px;
    }

    .purposetext{
      max-width: 600px;
    }

    .circle-frame {
      width: 260px;
      height: 260px;
    }

    .square-frame {
      width: 240px;
      height: 240px;
    }
  }

  /* ==============================
     HERO
     ============================== */
  .hero-band {
    position: relative;
    width: 100%;
    margin-top: max(-76px, -5.9375vw);
    aspect-ratio: 1280 / 596;
    min-height: 460px;
  }

  .hero-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-mark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    pointer-events: none;
  }

  @media (max-width: 768px) {
   .hero-mark{
      top: 60%;
    }
  }

  .hero-copy {
    position: absolute;
    z-index: 1;
    top: 41.78%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 clamp(20px, 6vw, 152px);
    text-align: center;
    color: #fff;
  }

  .hero-title {
    max-width: 860px;
    margin: 0 auto;
    font-size: clamp(28px, 4.5vw, 56px);
    line-height: 1.05;
    text-wrap: balance;
    text-shadow:
      0 4px 2px rgba(0, 0, 0, .25),
      0 6px 7px rgba(0, 0, 0, .15),
      0 25px 12.5px rgba(0, 0, 0, .13),
      0 56px 17px rgba(0, 0, 0, .08),
      0 100px 20px rgba(0, 0, 0, .02);
  }

  .hero-subtitle {
    margin: 4px auto 0;
    max-width: 734px;
    font-size: clamp(16px, 2.5vw, 32px);
    line-height: 1.3125;
    text-shadow:
      0 4px 2px rgba(0, 0, 0, .25),
      0 6px 7px rgba(0, 0, 0, .15),
      0 25px 12.5px rgba(0, 0, 0, .13),
      0 56px 17px rgba(0, 0, 0, .08),
      0 100px 20px rgba(0, 0, 0, .02);
  }

  .hero-corner {
    position: absolute;
  }

  .hero-corner--left {
    top: 23.83%;
    left: 0;
  }

  .hero-corner--right {
    bottom: 9.4%;
    right: 0;
  }

  /* ==============================
     LANGUAGE SELECTOR (dropdown)
     ============================== */
  .lang-selector {
    position: relative;
    background: #9bc3c7;
    border-radius: 43px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
  }

  .lang-toggle {
    background: #9bc3c7;
    border: 0;
    border-radius: 109px;
    padding: 4px 8px 4px 4.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #000;
    font-size: 16px;
    line-height: 1.25;
  }

  .lang-toggle:focus-visible {
    outline: 2px solid #00a19c;
    outline-offset: 2px;
  }

  .lang-flag {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
  }

  .lang-caret {
    transition: transform .2s ease;
    flex-shrink: 0;
  }

  .lang-selector.is-open .lang-caret {
    transform: rotate(180deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .lang-caret {
      transition: none;
    }
  }

  .lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    z-index: 100;
  }

  .lang-menu[hidden] {
    display: none;
  }

  .lang-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    line-height: 1.2;
    color: #3d3935;
  }

  .lang-option:hover,
  .lang-option:focus-visible {
    background: #e9f1f3;
    outline: none;
  }

  .lang-option[aria-checked="true"] {
    color: #00a19c;
    font-weight: 700;
  }

  .lang-check {
    margin-left: auto;
    opacity: 0;
    flex-shrink: 0;
  }

  .lang-option[aria-checked="true"] .lang-check {
    opacity: 1;
  }

  /* The state the selector wears while FEATURES.langSelector is off — unused
     as it ships, since the flag is on. The badge still shows which language
     the page is in, so it keeps its look, and only the parts that announce a
     menu go away. The caret is the visual half of that promise;
     js/modules/language-selector.js takes the rest. */
  .lang-selector.is-locked .lang-caret {
    display: none;
  }

  .lang-selector.is-locked .lang-toggle {
    /* A disabled button is greyed and shows no pointer by default. This one
       is not unavailable, it is simply not a button any more. */
    cursor: default;
    color: #000;
    opacity: 1;
    /* The drawer's toggle is given a fixed w-[83px] in the markup, which was
       measured with the caret in it. Without the caret that width is trailing
       space, and trailing space is exactly what a missing control looks like. */
    width: auto;
  }

  /* Drawer variant: anchored left and opening upwards */
  #mobile-drawer .lang-selector {
    margin-top: auto;
    align-self: flex-start;
  }

  #mobile-drawer .lang-menu {
    right: auto;
    left: 0;
    top: auto;
    bottom: calc(100% + 8px);
  }

  /* The header carries the selector for the desktop nav only: below the
     breakpoint the drawer holds the copy that is reachable, and two badges
     would show at once. This was `hidden lg:inline-flex` on the markup,
     which was a tie — Tailwind’s `.hidden` and the `.lang-selector` rule
     above are both one class deep, so the winner was whichever sheet came
     last, and the Play CDN builds its <style> at runtime. Anything that
     landed a sheet after it flipped the result, leaving the badge next to
     the hamburger until the next reload. A media query here settles it in
     the file that already owns the selector. Keep in step with
     MEDIA.desktopNav in js/config.js, which is the other half of this line. */
  @media (max-width: 1023px) {
    .site-header .lang-selector {
      display: none;
    }
  }

  /* ==============================
     NAV LINKS (active state)
     ============================== */
  /* Resting and active states both live here so the only thing that changes a
     link is the `is-active` class — no inline styles to fight, and no second
     place to keep the two looks in sync. */
  .nav-link {
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-weight: 500;
    color: #3d3935;
    transition: color .2s ease;
  }

  .nav-link:hover {
    color: #00a19c;
  }

  /* Figma: the active link carries a 2px #00a19c underline, 5px below the baseline */
  .nav-link.is-active {
    font-family: "Museo Sans", "Montserrat", system-ui, sans-serif;
    font-weight: bold;
    color: #00a19c;
    text-decoration: underline;
    text-decoration-color: #00a19c;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-link {
      transition: none;
    }
  }

  /* ==============================
     GOVERNANCE DISCLAIMER — background decorations
     Measured off the Figma frame export (preview.png, 1280x5524). The footer
     starts at y 5386, which is also this section's bottom edge, so both
     decorations hang off that edge rather than off the section top — the top
     moves whenever the copy above reflows, the footer line does not.
     ============================== */

  /* Teal glow. Figma draws an 800px circle centred on the frame (x 240..1040)
     with its centre 39px above the footer, #9bc3c7 at 50%, blurred to a
     Gaussian sigma of ~113px. The stops below are the alpha profile sampled
     straight off the export at eight radii, so this reproduces the render
     instead of guessing a blur radius — and it keeps filter: blur() off an
     800px box, which would repaint on every scroll frame.
     Box is 1500x789 at frame width: 750px of radius plus the 39px the centre
     sits above the footer. Sized in % so it holds as the frame shrinks. */
  .governance-glow {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 117.1875%;
    /* 1500 / 1280 */
    aspect-ratio: 1500 / 789;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle farthest-side at 50% 95.06%,
        rgba(155, 195, 199, .50) 0%,
        rgba(155, 195, 199, .50) 33%,
        rgba(155, 195, 199, .41) 40%,
        rgba(155, 195, 199, .34) 47%,
        rgba(155, 195, 199, .25) 53%,
        rgba(155, 195, 199, .16) 60%,
        rgba(155, 195, 199, .09) 67%,
        rgba(155, 195, 199, .05) 73%,
        rgba(155, 195, 199, .02) 80%,
        rgba(155, 195, 199, .01) 87%,
        rgba(155, 195, 199, 0) 100%);
  }

  /* Heading. Figma sets 48px on a 52px line; leading-tight would give 60px and
     drop "Disclaimer" 13px too low, so the line-height is pinned here.

     The -0.065em that used to sit alongside it is gone: it was pulling
     Montserrat Black's 301px "Governance" back towards the 270px the frame
     draws, and MADE TOMMY renders it at 274px unaided. */
  #governance-title {
    line-height: 1.0833;
  }

  /* The glow is 789px tall and bleeds up over the section above. `.reveal`
     keeps a transform after animating, so #governance stays a stacking context
     and its z-index:-1 children cannot escape behind an earlier sibling on
     their own — lifting this section does it instead. It has no background of
     its own, so the glow still reads through around the copy, as in the frame. */
  #energy-transition {
    position: relative;
    z-index: 1;
  }