/* ==========================================================================
   IGAA GLOBAL  ·  design system
   Built by Northline Web Co.
   Everything you would ever want to change lives in :root below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS  (stored in site/fonts/, nothing loads from Google at runtime)
   -------------------------------------------------------------------------- */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/newsreader-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2212;}


/* --------------------------------------------------------------------------
   2. TOKENS
   Light is the base. Dark is the same set of names with different values,
   so nothing below this block ever names a colour directly.
   -------------------------------------------------------------------------- */
:root{
  /* Tells the browser this page already handles both schemes. Without it,
     Chrome's "force dark mode" setting rewrites our colours on top of our
     own dark theme and eats the gold accent. It also makes dropdowns and
     scrollbars follow the right scheme. */
  color-scheme: light dark;

  /* colour */
  --ink:        #F1F4F8;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAFC;
  --frame:      #E7EBF2;
  --text:       #0B1626;
  --text-2:     #4C5A6D;
  --text-3:     #66707F;
  --line:       rgba(11,22,38,.10);
  --line-2:     rgba(11,22,38,.17);
  --gold:       #8C6D33;
  /* The same gold, taken down far enough to be legible at the ten pixels a
     chip sets its label in. The brand gold above stays exactly as it is for
     everything drawn larger. */
  --gold-ink:   #7E6230;
  --gold-lit:   #A9843C;
  --gold-wash:  rgba(140,109,51,.09);
  --btn-bg:     #0B1626;
  --btn-fg:     #FFFFFF;

  --metal: linear-gradient(140deg,#E4E9F0 0%,#FFFFFF 16%,#AEB9C8 34%,#F5F7FA 52%,#98A3B3 70%,#E9EDF3 88%,#C3CBD7 100%);
  --metal-soft: linear-gradient(140deg,#EEF1F6 0%,#FFFFFF 20%,#D9DFE9 42%,#F8FAFC 60%,#CFD7E2 80%,#EAEEF4 100%);
  --sheen: rgba(255,255,255,.85);
  /* the highlight that travels across the logo on the front page. It is
     kept apart from --sheen because --sheen is the one pixel line along
     the top of a card, which has to be almost nothing on the dark theme
     and would be invisible as a sweep. */
  --spec: rgba(255,255,255,.88);
  --grain-opacity: .030;
  /* the page ground. --rule is the hairline column grid, --edge the corner
     falloff that keeps the middle of the page feeling lit, --wash the band
     tint that gives the page its rhythm. All three are deliberately near
     the threshold of visible: they should be felt, not read. */
  --rule: rgba(11,22,38,.05);
  --edge: rgba(11,22,38,.055);
  --wash: rgba(11,22,38,.026);
  /* --frame is only ten shades below --ink, so on a washed band the card
     tray all but disappears. This is the same tray, re-seated to keep that
     ten-shade step against the band instead of against the page. */
  --frame-wash: #E1E5ED;
  --duotone-mix: 62%;

  --shadow-1: 0 1px 2px rgba(11,22,38,.05), 0 14px 34px -14px rgba(11,22,38,.16);
  --shadow-2: 0 2px 5px rgba(11,22,38,.06), 0 48px 88px -36px rgba(11,22,38,.26);

  /* type */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* shape: pills for anything you click, 24px outer frames, 18px inner plates */
  --r-outer: 24px;
  --r-inner: 18px;
  --r-small: 10px;
  --r-pill:  999px;

  /* rhythm */
  --maxw:    1240px;
  /* an eighth of the content column. Rules land on the centre line and every
     155px out from it, which puts one exactly on each edge of the 1240px
     column: 620 = 155 x 4. That is what makes the grid read as aligned to
     the page rather than sprinkled across it. */
  --col:     155px;
  --gutter:  clamp(1.25rem, 4.2vw, 3.25rem);
  --section: clamp(5.5rem, 11vw, 10rem);

  /* motion */
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.32,.72,0,1);
}

@media (prefers-color-scheme: dark){
  :root{
    /* light on dark needs no help: the chip gold is the brand gold */
    --gold-ink:   #C9A96A;
    --ink:        #060C16;
    --surface:    #0A1424;
    --surface-2:  #0D1A2C;
    --frame:      #0A1322;
    --text:       #E9EEF6;
    --text-2:     #A3B0C2;
    --text-3:     #8593A6;
    --line:       rgba(178,199,226,.13);
    --line-2:     rgba(178,199,226,.22);
    --gold:       #C9A96A;
    --gold-lit:   #E2C68E;
    --gold-wash:  rgba(201,169,106,.11);
    --btn-bg:     #E9EEF6;
    --btn-fg:     #08111E;

    --metal: linear-gradient(140deg,#8B96A6 0%,#EDF1F7 16%,#697484 34%,#DCE3EC 52%,#586374 70%,#B4BECB 88%,#7B8798 100%);
    --metal-soft: linear-gradient(140deg,#13203A 0%,#1B2A47 20%,#0C1729 42%,#182642 60%,#0A1424 80%,#152341 100%);
    --sheen: rgba(255,255,255,.10);
    /* warm rather than white, and well above the logo's own light grey,
       so the sweep reads as a shine and not as a smudge. */
    --spec:  rgba(255,244,222,.66);
    --grain-opacity: .045;
    --rule: rgba(178,199,226,.055);
    --edge: rgba(0,0,0,.42);
    /* in dark the band goes DOWN too, the same as in light. Lifting it put
       the band level with --frame and erased the tray completely. */
    --wash: rgba(0,0,0,.32);
    --frame-wash: #0A1322;
    --duotone-mix: 74%;

    --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 18px 42px -18px rgba(0,0,0,.65);
    --shadow-2: 0 2px 6px rgba(0,0,0,.5),  0 56px 104px -44px rgba(0,0,0,.8);
  }
}


/* --------------------------------------------------------------------------
   3. RESET AND BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.68;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;border-radius:4px;}

/* --------------------------------------------------------------------------
   THE PAGE GROUND
   Two layers sit under everything: this one carries the structure, and
   body::after below carries the grain.

   Why z-index:-1 works here. <html> deliberately has no background of its
   own, so the browser lifts body's --ink up and paints it as the canvas,
   underneath the whole document. That leaves body itself with nothing to
   paint, so a negative layer inside it lands ABOVE the canvas colour and
   BELOW every piece of content. If anyone ever puts a background on <html>,
   this layer disappears behind it.

   Deliberately no filter and no backdrop-filter anywhere near here: a filter
   on body or html would flatten the 3D card flip on the council page.
   -------------------------------------------------------------------------- */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* one hairline per column, plus a falloff outside the content column so the
     page itself reads as a lit sheet lying on a slightly darker surface. On a
     screen no wider than the column there are no margins and it does nothing,
     which is exactly right. */
  background-image:
    var(--grid, linear-gradient(to right, var(--rule) 0 1px, transparent 1px)),
    linear-gradient(to right,
      var(--edge) 0,
      transparent calc(50% - var(--maxw) / 2 + var(--gutter)),
      transparent calc(50% + var(--maxw) / 2 - var(--gutter)),
      var(--edge) 100%);
  background-size: var(--col) 100%, 100% 100%;
  /* 50% centres the tile, so its left edge lands half a column short of the
     middle. Adding half a column back puts a rule on the centre line. */
  background-position: calc(50% + var(--col) / 2) 0, 0 0;
  background-repeat: repeat, no-repeat;
}
/* on a phone there are no side margins, so the rules would run straight
   through the text. The corner falloff stays. */
@media (max-width:899px){body::before{--grid:none;}}

/* fixed film grain, never attached to anything that scrolls */
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section);}
.section-sm{padding-block:clamp(3.5rem,7vw,6rem);}

/* A band of slightly deeper ground, hairlined top and bottom, used on every
   other major section so the page reads as chapters instead of one endless
   field. The tint is translucent on purpose: the column grid carries on
   underneath it rather than being punched out, so the two never fight.
   (Not called .tint, which is already the photo tint on the bento cell.) */
.section-wash{background:var(--wash);border-block:1px solid var(--line);--frame:var(--frame-wash);}
/* two hairlines that meet read as one thick one, so the second stands down */
.statement + .section-wash,
.section-wash + .section-wash{border-top:0;}
main > .section-wash:last-child{border-bottom:0;}
.skip{position:absolute;left:-9999px;top:0;}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--btn-bg);color:var(--btn-fg);padding:.65rem 1.1rem;border-radius:var(--r-pill);}


/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
.display-xl,.display-l,h1,h2{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.021em;
  line-height:1.05;
  text-wrap:balance;
}
.display-xl{font-size:clamp(2.4rem,4.6vw,3.7rem);}
.display-l {font-size:clamp(2.05rem,4.1vw,3.3rem);line-height:1.08;}
h2         {font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.09;}

h3{font-family:var(--font-sans);font-size:1.28rem;font-weight:600;line-height:1.32;letter-spacing:-.012em;}
h4{font-family:var(--font-sans);font-size:1.0625rem;font-weight:600;line-height:1.4;}

.lede{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.62;color:var(--text-2);max-width:56ch;}
.body-2{color:var(--text-2);max-width:64ch;}
.tight{max-width:52ch;}
.measure{max-width:60ch;}

.label{
  font-family:var(--font-mono);font-weight:500;
  font-size:.6875rem;line-height:1;letter-spacing:.19em;
  text-transform:uppercase;color:var(--text-3);
}
.label-gold{color:var(--gold);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.44rem .85rem .44rem .66rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--gold-wash);
  font-family:var(--font-mono);font-weight:500;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);
}
.eyebrow .star{width:11px;height:11px;flex:none;}

.serif-em{font-family:var(--font-display);font-weight:500;color:var(--gold);}
.head-block{display:flex;flex-direction:column;gap:1.15rem;}
/* Taken out of the picture but not out of the page: a screen reader still
   announces it, so the running order of headings stays whole where a
   heading was deliberately left off the design. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;}
/* the pill keeps its own width instead of stretching across the column */
.head-block > .eyebrow{align-self:flex-start;}


/* --------------------------------------------------------------------------
   5. THE MARK  (four point star, drawn from the IGAA logo)
   -------------------------------------------------------------------------- */
/* The real IGAA logo, cut out of the supplied artwork.
   Two files, because the navy quadrant would vanish on the dark theme:
   img/logo-mark.png       the original colours, for the light theme
   img/logo-mark-dark.png  the same art with its luminance flipped
   Both are decorative: the name is always live text beside them. */
.mark-img{
  --logo:url(../img/logo-mark.png);
  flex:none;
  aspect-ratio:681 / 910;
  background:var(--logo) center / contain no-repeat;
}
@media (prefers-color-scheme: dark){
  .mark-img{--logo:url(../img/logo-mark-dark.png);}
}

/* The small ornament star stays a drawn SVG. It is a bullet glyph, not the
   logo, and at 11px the real mark's blades are too fine to survive. */
.star{display:block;}
.star .blade-a{fill:var(--text);}
.star .blade-b{fill:var(--gold);}


/* --------------------------------------------------------------------------
   6. BUTTONS  (pill, nested trailing cap, physical press)
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--btn-bg);--fg:var(--btn-fg);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.7rem .7rem .7rem 1.35rem;
  border:0;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);
  font-size:.95rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  cursor:pointer;position:relative;
  transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background-color .35s var(--ease-soft);
  box-shadow:var(--shadow-1);
}
.btn .cap{
  width:2rem;height:2rem;flex:none;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--fg) 15%, transparent);
  transition:transform .55s var(--ease-soft), background-color .35s var(--ease-soft);
}
.btn .cap svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.5;fill:none;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);}
.btn:hover .cap{transform:translate(3px,-2px);background:color-mix(in srgb, var(--fg) 26%, transparent);}
.btn:active{transform:translateY(0) scale(.985);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn.is-plain{padding-right:1.35rem;}

.btn-ghost{
  --bg:transparent;--fg:var(--text);
  box-shadow:none;border:1px solid var(--line-2);
}
.btn-ghost:hover{box-shadow:var(--shadow-1);background:var(--surface);}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.95rem;color:var(--text);
  border-bottom:1px solid var(--line-2);padding-bottom:.22rem;width:fit-content;
  transition:gap .45s var(--ease-soft), border-color .45s var(--ease-soft), color .45s var(--ease-soft);
}
.link-arrow svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none;}
.link-arrow:hover{gap:.85rem;color:var(--gold);border-color:var(--gold);}


/* --------------------------------------------------------------------------
   7. DOUBLE BEZEL  (outer tray + inner plate, concentric radii)
   -------------------------------------------------------------------------- */
.shell{
  background:var(--frame);
  border:1px solid var(--line);
  border-radius:var(--r-outer);
  padding:6px;
}
.core{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-inner);
  box-shadow:inset 0 1px 0 var(--sheen);
  height:100%;
  overflow:hidden;
}
.core-pad{padding:clamp(1.45rem,2.5vw,2.15rem);}


/* --------------------------------------------------------------------------
   8. HEADER AND NAVIGATION
   -------------------------------------------------------------------------- */
.nav-sentinel{position:absolute;top:0;height:1px;width:1px;}

.site-head{
  position:sticky;top:0;z-index:70;
  padding-block:.85rem;
  transition:padding .5s var(--ease-soft);
}
.site-head::before{
  content:"";position:absolute;inset:0;
  background:color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid transparent;
  opacity:0;transition:opacity .5s var(--ease-soft), border-color .5s var(--ease-soft);
}
.site-head.is-stuck::before{opacity:1;border-bottom-color:var(--line);}
.site-head.is-stuck{padding-block:.6rem;}

.nav{display:flex;align-items:center;gap:2rem;position:relative;min-height:52px;}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;}
.brand .mark-img{width:1.5rem;}
.brand-name{font-family:var(--font-display);font-size:1.22rem;letter-spacing:.01em;font-weight:500;}
.brand-name .dot{color:var(--gold);}

.nav-links{display:flex;align-items:center;gap:1.9rem;list-style:none;padding:0;}
.nav-links a{
  font-size:.94rem;font-weight:500;color:var(--text-2);position:relative;padding-block:.35rem;
  transition:color .35s var(--ease-soft);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-soft);
}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-links a[aria-current="page"]{color:var(--text);}

.nav-cta{display:none;}
@media (min-width:1024px){.nav-cta{display:inline-flex;}}

/* hamburger that morphs into an X */
.nav-toggle{
  display:grid;place-items:center;width:44px;height:44px;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-pill);cursor:pointer;
  transition:background-color .35s var(--ease-soft);
}
.nav-toggle:hover{background:var(--surface);}
/* all three bars share one grid cell, so closing the gap between them
   folds the icon into a real X instead of just hiding lines. */
.nav-toggle span{
  grid-area:1/1;
  display:block;width:17px;height:1.5px;background:var(--text);border-radius:2px;
  transition:transform .55s var(--ease-soft), opacity .3s var(--ease-soft);
}
.nav-toggle span:nth-child(1){transform:translateY(-5px);}
.nav-toggle span:nth-child(3){transform:translateY(5px);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(0) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(0) rotate(-45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}

@media (min-width:1024px){.nav-toggle{display:none;}}
@media (max-width:1023px){.nav-links{display:none;}}

/* full screen menu */
.nav-sheet{
  position:fixed;inset:0;z-index:69;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-soft), visibility .5s;
}
.nav-sheet.is-open{opacity:1;visibility:visible;}
.nav-sheet ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.35rem;}
.nav-sheet li{overflow:hidden;}
.nav-sheet ul a{
  display:block;font-family:var(--font-display);font-size:clamp(2rem,9vw,3rem);
  line-height:1.25;letter-spacing:-.02em;
  transform:translateY(110%);opacity:0;
  transition:transform .7s var(--ease-out), opacity .7s var(--ease-out);
}
.nav-sheet.is-open ul a{transform:translateY(0);opacity:1;}
.nav-sheet.is-open li:nth-child(1) a{transition-delay:.06s;}
.nav-sheet.is-open li:nth-child(2) a{transition-delay:.11s;}
.nav-sheet.is-open li:nth-child(3) a{transition-delay:.16s;}
.nav-sheet.is-open li:nth-child(4) a{transition-delay:.21s;}
.nav-sheet.is-open li:nth-child(5) a{transition-delay:.26s;}
@media (prefers-reduced-motion: reduce){
  .nav-sheet ul a{transform:none;opacity:1;transition:none;}
}
.nav-sheet .sheet-foot{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;}
@media (min-width:1024px){.nav-sheet{display:none;}}


/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero{position:relative;padding-top:clamp(3rem,6vw,5.5rem);padding-bottom:clamp(4rem,8vw,7rem);overflow:hidden;}
.hero::before{
  content:"";position:absolute;top:-30%;right:-10%;width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle at 50% 50%, var(--gold-wash), transparent 62%);
  pointer-events:none;
}
.hero-grid{
  display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);}
}
.hero-copy{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start;}
.hero h1{max-width:19ch;}

/* the metal star object

   HOW IT MOVES
   Six things move and no two are in step: a breath of gold behind the star,
   the three rings drifting in and out, a short arc of gold travelling round
   the outer ring, a point of light running the other way round the inner
   one, the logo itself rising and falling, and the highlight sweeping
   across it. Every one is on a different number of seconds and no two of
   those numbers share a factor, which is what stops the six ever lining up
   and turning the object into a loop playing over again.

   Nothing here animates anything but transform and opacity, the two things
   a browser moves without redrawing the page, so it stays smooth on a phone
   and costs no battery worth measuring. It all stops for anyone whose
   system is set to reduce motion. */
.hero-object{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:460px;margin-inline:auto;}
.hero-object > *{grid-area:1/1;}

/* the light behind the star. Slowest of the six, so it reads as the object
   being lit rather than as something pulsing. */
.hero-object::before{
  content:"";grid-area:1/1;place-self:center;pointer-events:none;
  width:64%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--gold-wash) 0%,transparent 70%);
  animation:halo 31s var(--ease-soft) infinite;
}
@keyframes halo{
  0%,100%{transform:scale(.9); opacity:.45;}
  50%    {transform:scale(1.1);opacity:1;}
}

.hero-object .rings{position:relative;width:100%;aspect-ratio:1;border-radius:50%;}
.hero-object .rings i{
  position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;
  animation:ring-breathe var(--beat) var(--ease-soft) infinite;
}
/* the negative delays start each ring part way through its own breath, so
   they are already out of phase on the first frame rather than easing apart
   over the first half minute */
.hero-object .rings i:nth-child(1){inset:4%; --beat:13s;animation-delay:-3s;}
.hero-object .rings i:nth-child(2){inset:17%;--beat:17s;animation-delay:-9s;border-color:var(--line-2);}
.hero-object .rings i:nth-child(3){inset:31%;--beat:11s;animation-delay:-5s;}
@keyframes ring-breathe{
  0%,100%{transform:scale(1);    opacity:.78;}
  50%    {transform:scale(1.022);opacity:1;}
}

/* The arc. A cone of gold is laid over the whole disc and then a radial
   mask cuts away everything but a two pixel band at the very edge, which
   leaves the gold sitting exactly on the ring's own hairline. */
.hero-object .rings i:nth-child(1)::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0turn,transparent 0 .55turn,var(--gold) .78turn,transparent 1turn);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  opacity:.6;
  animation:orbit 29s linear infinite;
}
/* The point of light: one small gold dot drawn at the top of a box the same
   size as the inner ring, so turning the box walks the dot around it. The
   larger, fainter circle underneath is its glow. */
.hero-object .rings i:nth-child(3)::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle 9px at 50% 0,var(--gold-wash) 0 55%,transparent 100%),
    radial-gradient(circle 2.5px at 50% 0,var(--gold) 0 60%,transparent 64%);
  animation:orbit 23s linear infinite reverse;
}
@keyframes orbit{to{transform:rotate(1turn);}}
/* The front page shows the full logo, wordmark and all, because this is the
   one place it is drawn big enough for the lettering to be legible. In the
   menu bar the same artwork would put "IGAA" at about six pixels tall, which
   is why the header keeps the mark on its own with the name set in type.

   The nudge to the right centres the STAR in the rings rather than the whole
   lockup. The star sits 43.3% of the way across the artwork, not halfway,
   because the wordmark hangs off its right side, so without this the rings
   would sit off centre against the part of the logo the eye reads as middle. */
.hero-object .mark{
  --logo:url(../img/logo-lockup.png);
  position:relative;width:71.6%;aspect-ratio:787 / 910;
  transform:translateX(6.7%);
  filter:drop-shadow(0 34px 64px rgba(11,22,38,.28));
  animation:mark-float 19s var(--ease-soft) infinite;
}
/* about four pixels at the size this is drawn. The nudge to the right is
   repeated in both frames because a transform replaces the one above it
   rather than adding to it. */
@keyframes mark-float{
  0%,100%{transform:translateX(6.7%) translateY(.85%);}
  50%    {transform:translateX(6.7%) translateY(-.85%);}
}
@media (prefers-color-scheme: dark){
  .hero-object .mark{--logo:url(../img/logo-lockup-dark.png);}
}
/* The specular sweep is a separate layer clipped to the logo's silhouette,
   so the highlight travels across the mark and never outside it. */
.hero-object .sweep{
  --sil:url(../img/logo-lockup-alpha.png);
  width:71.6%;aspect-ratio:787 / 910;overflow:hidden;pointer-events:none;
  transform:translateX(6.7%);   /* same nudge as the mark, so they stay aligned */
  -webkit-mask:var(--sil) center / contain no-repeat;
  mask:var(--sil) center / contain no-repeat;
}
.hero-object .sweep::before{
  content:"";position:absolute;top:-40%;left:-55%;width:38%;height:180%;
  background:linear-gradient(100deg,transparent,var(--spec),transparent);
  transform:translateX(0) rotate(14deg);
  animation:sweep 8s var(--ease-soft) infinite;
}
@keyframes sweep{
  0%,52%{transform:translateX(0) rotate(14deg);}
  88%,100%{transform:translateX(430%) rotate(14deg);}
}
@media (prefers-reduced-motion: reduce){
  /* the two ::after selectors are written out in full, child number and all.
     A media query adds no weight of its own, so a shorter selector here
     would simply lose to the longer one above and the arc would keep going
     for the one person who asked it not to. */
  .hero-object::before,
  .hero-object .mark,
  .hero-object .rings i,
  .hero-object .rings i:nth-child(1)::after,
  .hero-object .rings i:nth-child(3)::after{animation:none;}
  .hero-object .sweep::before{animation:none;opacity:0;}
}


/* --------------------------------------------------------------------------
   10. STATEMENT STRIP  (one wide sentence between hairlines)
   -------------------------------------------------------------------------- */
.statement{border-block:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem);}
.statement-line{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.45rem,3.1vw,2.35rem);line-height:1.32;letter-spacing:-.018em;
  max-width:26ch;text-wrap:balance;
}
.statement .cols{display:grid;gap:2.5rem;grid-template-columns:1fr;}
@media (min-width:860px){.statement .cols{grid-template-columns:1.4fr 1fr;gap:clamp(3rem,7vw,6rem);align-items:end;}}


/* --------------------------------------------------------------------------
   11. PILLAR BENTO  (five pillars, five cells, deliberately unequal)
   -------------------------------------------------------------------------- */
.bento{display:grid;gap:14px;grid-template-columns:1fr;margin-top:3rem;}
@media (min-width:760px){.bento{grid-template-columns:repeat(6,1fr);}}
.bento > *{grid-column:span 1;}
@media (min-width:760px){
  .cell-a{grid-column:span 4;}
  .cell-b{grid-column:span 2;}
  .cell-c{grid-column:span 2;}
  .cell-d{grid-column:span 2;}
  .cell-e{grid-column:span 2;}
}
.pillar{
  display:flex;flex-direction:column;gap:.8rem;
  padding:clamp(1.5rem,2.4vw,2.1rem);
  min-height:220px;position:relative;
  transition:transform .6s var(--ease-soft);
}
.pillar:hover{transform:translateY(-3px);}
.pillar .idx{margin-bottom:.4rem;}
.pillar p{color:var(--text-2);font-size:.98rem;}
.pillar .link-arrow{margin-top:auto;padding-top:1.2rem;}

/* two of the five cells carry real surface variation, not white on white */
.pillar-figure{position:relative;min-height:280px;padding:0;display:block;}
.pillar-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%;filter:grayscale(1) contrast(1.02) brightness(1.12);}
.pillar-figure .tint{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,31,58,.55) 0%, rgba(11,31,58,.7) 42%, rgba(11,31,58,.94) 100%);
  mix-blend-mode:multiply;
}
.pillar-figure .fig-body{position:relative;padding:clamp(1.5rem,2.4vw,2.1rem);display:flex;flex-direction:column;gap:.8rem;height:100%;justify-content:flex-end;color:#EEF2F8;}
.pillar-figure .fig-body p{color:rgba(238,242,248,.82);}
.pillar-figure .fig-body .label{color:rgba(238,242,248,.7);}
.pillar-figure .link-arrow{color:#EEF2F8;border-color:rgba(238,242,248,.4);}
.pillar-figure .link-arrow:hover{color:#E2C68E;border-color:#E2C68E;}
/* A cell whose picture is already the association's own navy. Draining the
   colour out of it and then laying navy back over the top would only turn it
   to mud, so it keeps what it came with, and the wash over it is halved: the
   picture is dark to begin with and the heavier gradient buried it. */
.pillar-figure.in-colour img{filter:none;object-position:center 42%;}
.pillar-figure.in-colour .tint{
  /* light at the top so the picture is actually seen, then heavy from the
     middle down, because that is where the writing sits and white text over
     a lit wireframe is a struggle to read */
  background:linear-gradient(180deg,
    rgba(11,31,58,.08) 0%, rgba(11,31,58,.26) 26%,
    rgba(11,31,58,.74) 58%, rgba(11,31,58,.93) 100%);
}

/* Brushed surface at a fraction of the star's contrast, so it reads as
   material rather than as chrome. Text stays on the theme tokens. */
.pillar-metal{background:var(--metal-soft);position:relative;}
.pillar-metal .core{background:transparent;border:0;box-shadow:inset 0 1px 0 var(--sheen);}
.pillar-metal .fig-body{position:relative;padding:clamp(1.5rem,2.4vw,2.1rem);display:flex;flex-direction:column;gap:.8rem;height:100%;color:var(--text);}
.pillar-metal .fig-body p{color:var(--text-2);}
.pillar-metal .link-arrow{margin-top:auto;}


/* --------------------------------------------------------------------------
   12. EDITORIAL SPLIT  (heritage, founder, concierge)
   -------------------------------------------------------------------------- */
.split{display:grid;gap:clamp(2.2rem,5vw,4.5rem);grid-template-columns:1fr;align-items:start;}
.split.is-middle{align-items:center;}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .split.is-wide-left{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);}
  .split.is-wide-right{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);}
  .split.is-flip .split-media{order:-1;}
}
.split-copy{display:flex;flex-direction:column;gap:1.35rem;align-items:flex-start;}

/* Same frame as .duotone, but the picture is left exactly as supplied. Used
   where the image already carries the association's own navy and gold, so
   putting the duotone over it would only muddy the branding inside it. */
.framed{position:relative;overflow:hidden;border-radius:var(--r-inner);}
.framed img{width:100%;height:auto;}
/* the small print under a picture, for when the picture is a concept rather
   than a photograph of something that already exists */
.split-media figcaption{
  margin-top:.75rem;color:var(--text-3);font-size:.85rem;line-height:1.5;max-width:52ch;
}

.duotone{position:relative;overflow:hidden;border-radius:var(--r-inner);}
.duotone img{width:100%;filter:grayscale(1) contrast(1.08);}
.duotone::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg, #10336B 0%, #2E4C79 52%, #9A7429 100%);
  mix-blend-mode:color;opacity:var(--duotone-mix);
}
.duotone figcaption{
  position:relative;padding:.9rem 0 0;
}


/* --------------------------------------------------------------------------
   13. TIMELINE  (heritage, vertical rail with real dates)
   -------------------------------------------------------------------------- */
/* the one line that names the timeline. The rail carries its own top
   margin, which would otherwise open a gap under this label and leave it
   floating between the two, so the label takes that margin instead. */
.rail-label{margin-top:2.5rem;}
.rail-label + .rail{margin-top:.9rem;}
.rail{position:relative;display:flex;flex-direction:column;gap:0;margin-top:2.5rem;}
.rail::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:1px;background:var(--line-2);}
.rail-item{display:grid;gap:.5rem 1.8rem;grid-template-columns:1fr;padding:1.5rem 0 1.5rem 1.9rem;position:relative;}
@media (min-width:720px){.rail-item{grid-template-columns:12rem 1fr;padding-left:2.4rem;}}
/* a word label like "The craft years" needs slightly less tracking than a
   four digit year to stay on one line in that column */
.rail-item .label{letter-spacing:.15em;}
.rail-item::before{
  content:"";position:absolute;left:-3.5px;top:2.1rem;width:8px;height:8px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line-2);
}
.rail-item.is-now::before{background:var(--gold);border-color:var(--gold);}
/* Raised from h4 to h3 so no heading level is skipped. The size is the one
   they always had. */
.rail-item h3,.trade-list h3{font-size:1.0625rem;font-weight:600;line-height:1.4;letter-spacing:normal;}
.rail-item h3{margin-bottom:.3rem;}
.rail-item p{color:var(--text-2);font-size:.98rem;max-width:56ch;}


/* --------------------------------------------------------------------------
   14. COUNCIL  (member grid + drawer)
   -------------------------------------------------------------------------- */
.member-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:2.6rem;}
@media (min-width:640px){.member-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.member-grid{grid-template-columns:repeat(3,1fr);}}

.member{
  text-align:left;cursor:pointer;width:100%;background:none;border:0;padding:0;
  transition:transform .6s var(--ease-soft);
}
.member:hover{transform:translateY(-3px);}
.member .core{display:flex;flex-direction:column;gap:.85rem;padding:1.6rem;min-height:100%;}
.member .avatar{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--metal);color:#0B1626;
  font-family:var(--font-display);font-size:1.15rem;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.member .role{color:var(--text-3);font-size:.92rem;}
/* the link sits at the foot, so the six cards line up whatever the length
   of the line above it */
.member .more{margin-top:auto;padding-top:1rem;}
/* the darker gold: at .9rem on the page ground the brand gold reads at
   4.37 to one, a shade under the 4.5 small text is meant to hold */
.member .more{display:inline-flex;align-items:center;gap:.45rem;color:var(--gold-ink);font-size:.9rem;font-weight:600;}
.member .more svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.7;fill:none;}

/* A card for a seat that is genuinely being advertised as empty. Not used at
   the moment: the six cards are pillars of the standard, not vacancies. */
.seat-open .core{border-style:dashed;background:transparent;box-shadow:none;justify-content:center;align-items:flex-start;gap:.6rem;}
.seat-open .avatar{background:transparent;border:1px dashed var(--line-2);color:var(--text-3);}

/* drawer */
.drawer-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(6,12,22,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease-soft), visibility .45s;
}
.drawer-scrim.is-open{opacity:1;visibility:visible;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(30rem,100%);
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .6s var(--ease-soft);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{transform:translateX(0);}
@media (prefers-reduced-motion: reduce){
  .drawer{transition:none;}
  .drawer-scrim{transition:none;}
}
.drawer-head{display:flex;align-items:flex-start;gap:1rem;padding:1.75rem 1.75rem 1.25rem;border-bottom:1px solid var(--line);}
.drawer-head .avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--metal);color:#0B1626;font-family:var(--font-display);font-size:1.2rem;font-weight:500;}
.drawer-close{
  margin-left:auto;width:38px;height:38px;flex:none;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:transparent;cursor:pointer;display:grid;place-items:center;
  transition:background-color .35s var(--ease-soft);
}
.drawer-close:hover{background:var(--surface-2);}
.drawer-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none;}
.drawer-body{padding:1.75rem;display:flex;flex-direction:column;gap:1.4rem;}
/* a card with no role or region simply has no line for it */
.drawer-head .role:empty,.drawer-body [data-slot=region]:empty{display:none;}
.drawer-body [data-slot=bio]{display:flex;flex-direction:column;gap:.95rem;}
.drawer-body p{color:var(--text-2);}
.drawer-body .btn{justify-content:space-between;}


/* --------------------------------------------------------------------------
   15. TABS  (council functions)
   -------------------------------------------------------------------------- */
.tabs{margin-top:2.6rem;}
.tablist{display:flex;flex-wrap:wrap;gap:.5rem;padding:6px;background:var(--frame);border:1px solid var(--line);border-radius:var(--r-pill);width:fit-content;max-width:100%;}
.tab{
  border:0;background:transparent;cursor:pointer;border-radius:var(--r-pill);
  padding:.6rem 1.1rem;font-size:.92rem;font-weight:600;color:var(--text-2);
  transition:background-color .45s var(--ease-soft), color .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1);}
.tabpanel{margin-top:1.75rem;}
.tabpanel[hidden]{display:none;}
.tabpanel .core-pad{display:grid;gap:1.5rem;grid-template-columns:1fr;}
@media (min-width:820px){.tabpanel .core-pad{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);}}
.tabpanel h3{margin-bottom:.75rem;}
.tabpanel p{color:var(--text-2);}
.tabpanel .checks{list-style:none;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.tabpanel .checks li{display:flex;gap:.75rem;align-items:flex-start;color:var(--text-2);font-size:.98rem;}
.tabpanel .checks .star{width:12px;height:12px;flex:none;margin-top:.42rem;}


/* --------------------------------------------------------------------------
   16. COMPLIANCE PANEL  (the AESIR / data isolation block)
   -------------------------------------------------------------------------- */
.compliance .core{background:var(--surface-2);}
.compliance-grid{display:grid;gap:clamp(1.75rem,3.5vw,3rem);grid-template-columns:1fr;align-items:start;}
@media (min-width:900px){.compliance-grid{grid-template-columns:minmax(0,1fr) 19rem;}}
.spec-list{display:flex;flex-direction:column;gap:1.15rem;}
.spec-list div{display:flex;flex-direction:column;gap:.3rem;}
.spec-list dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.19em;text-transform:uppercase;color:var(--text-3);}
.spec-list dd{margin:0;font-size:.98rem;}


/* --------------------------------------------------------------------------
   17. PARTNERS  (offset trio, not three equal cards)
   -------------------------------------------------------------------------- */
.partners{display:grid;gap:14px;grid-template-columns:1fr;margin-top:3rem;}
@media (min-width:820px){
  .partners{grid-template-columns:repeat(5,1fr);align-items:stretch;}
  .partners > :nth-child(1){grid-column:span 2;}
  .partners > :nth-child(2){grid-column:span 3;}
  .partners > :nth-child(3){grid-column:span 5;}
}
.partner .core{display:flex;flex-direction:column;gap:.85rem;padding:clamp(1.5rem,2.4vw,2.1rem);}
.partner .glyph{
  width:44px;height:44px;border-radius:var(--r-small);display:grid;place-items:center;flex:none;
  border:1px solid var(--line-2);background:var(--surface-2);
  font-family:var(--font-mono);font-weight:500;font-size:.78rem;letter-spacing:.06em;color:var(--text-2);
}
.partner p{color:var(--text-2);font-size:.98rem;}
.partner .meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
@media (min-width:820px){
  .partner-wide .core{flex-direction:row;align-items:center;gap:clamp(1.5rem,3vw,2.5rem);}
  .partner-wide .core > div:last-child{margin-left:auto;}
}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .68rem;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surface-2);
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);
}
.chip-gold{background:var(--gold-wash);color:var(--gold-ink);border-color:color-mix(in srgb,var(--gold) 35%,transparent);}


/* --------------------------------------------------------------------------
   18. FORMS
   -------------------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:1.15rem;}
.field{display:flex;flex-direction:column;gap:.45rem;}
.field label{font-size:.9rem;font-weight:600;}
.field .help{font-size:.82rem;color:var(--text-3);}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;
  background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-small);
  font-size:1rem;color:var(--text);
  transition:border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background-color .35s var(--ease-soft);
}
.field textarea{min-height:8rem;resize:vertical;}

/* The upload box. Left alone it is a grey system button that looks nothing
   like the rest of the form, so the browser's own button is restyled into
   the same pill the site uses everywhere else. */
.field input[type="file"]{
  padding:.55rem .7rem;cursor:pointer;font-size:.94rem;color:var(--text-2);
}
.field input[type="file"]::file-selector-button{
  margin-right:.9rem;padding:.5rem 1rem;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--surface);color:var(--text);
  font:inherit;font-size:.88rem;font-weight:600;
  transition:color .3s linear, border-color .3s linear, background-color .3s linear;
}
.field input[type="file"]::file-selector-button:hover{
  color:var(--gold);border-color:color-mix(in srgb,var(--gold) 42%,transparent);
}
/* the box and the file sit in one field, so they need a little air between */
.field textarea + .file-input{margin-top:.6rem;}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);opacity:1;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--surface);
  box-shadow:0 0 0 3px var(--gold-wash);
}
.field .err{font-size:.84rem;color:#B3261E;font-weight:600;display:none;}
@media (prefers-color-scheme: dark){.field .err{color:#F29E96;}}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#B3261E;}
.field.is-invalid .err{display:block;}
.field-row{display:grid;gap:1.15rem;grid-template-columns:1fr;}
@media (min-width:620px){.field-row{grid-template-columns:1fr 1fr;}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}

/* Spacing is unequal on purpose: fields sit 1.15rem apart because they are
   one group, and the button sits further off because it ends the group. */
.form button[type=submit]{align-self:flex-start;margin-top:.6rem;}
.form-note{font-size:.86rem;color:var(--text-3);max-width:52ch;}
.form-note a{color:var(--text-2);border-bottom:1px solid var(--line-2);}

.form-status{
  display:none;gap:.75rem;align-items:flex-start;
  padding:1rem 1.1rem;border-radius:var(--r-small);
  border:1px solid var(--line-2);background:var(--surface-2);font-size:.94rem;
}
.form-status.is-shown{display:flex;}
.form-status.is-ok{border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:var(--gold-wash);}
.form-status .star{width:13px;height:13px;flex:none;margin-top:.32rem;}
.form-status strong{display:block;}

/* button spinner for the sending state */
.spinner{width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2s;}}


/* --------------------------------------------------------------------------
   19. CLOSING CALL
   -------------------------------------------------------------------------- */
.closer{position:relative;overflow:hidden;}
.closer .core{
  background:var(--surface-2);
  padding:clamp(2.75rem,6vw,5rem) clamp(1.5rem,5vw,4rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;
  position:relative;
}
.closer .core::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 120%, var(--gold-wash), transparent 60%);
}
.closer h2{max-width:18ch;position:relative;}
/* let a short closing heading have the one line it fits on */
.closer h2.is-wide{max-width:none;}
.closer .lede{max-width:48ch;position:relative;}
/* a shade smaller and a little wider than the default closing line, which
   is what takes it from three full lines plus an orphaned word to three */
.closer h2.is-wide + .lede{max-width:52ch;font-size:clamp(1.02rem,1.35vw,1.16rem);}
.closer .btn-row{position:relative;justify-content:center;}
.closer .star{width:22px;height:22px;position:relative;}


/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 2.5rem;}
.foot-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:3rem;}}
/* These are h2 in the markup, because they are top level sections of the
   page and a screen reader should hear them as such. They are dressed as
   the small bold headings they were, because that is what the footer wants
   to look like. */
.foot-grid h2{font-family:var(--font-sans);font-size:1.0625rem;font-weight:600;
  line-height:1.4;letter-spacing:normal;margin-bottom:1rem;}
.foot-grid ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.foot-grid a{color:var(--text-2);font-size:.95rem;transition:color .35s var(--ease-soft);}
.foot-grid a:hover{color:var(--gold);}
.foot-brand{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.foot-brand p{color:var(--text-2);font-size:.95rem;max-width:34ch;}
.foot-base{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
}
.foot-base p{font-size:.85rem;color:var(--text-3);}
.foot-base .by{margin-left:auto;}
.foot-base .by a{color:var(--text-2);border-bottom:1px solid var(--line-2);}


/* --------------------------------------------------------------------------
   21. PAGE HEADERS (inner pages)
   -------------------------------------------------------------------------- */
.page-head{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(2.5rem,5vw,4rem);position:relative;}
.page-head::before{
  content:"";position:absolute;top:-40%;left:35%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle at 50% 50%, var(--gold-wash), transparent 62%);pointer-events:none;
}
.page-head .inner{position:relative;display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start;}
.page-head h1{max-width:16ch;}
.crumbs{display:flex;align-items:center;gap:.55rem;}
.crumbs a{color:var(--text-3);}
.crumbs a:hover{color:var(--gold);}


/* --------------------------------------------------------------------------
   22. UTILITIES AND SCROLL REVEAL
   -------------------------------------------------------------------------- */
.stack{display:flex;flex-direction:column;gap:1.35rem;align-items:flex-start;}
.stack-sm{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;}
.hr{height:1px;background:var(--line);border:0;margin-block:clamp(3rem,6vw,5rem);}
.center{text-align:center;align-items:center;}

.reveal{opacity:0;transform:translateY(26px);filter:blur(6px);}
.reveal.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);
}
.reveal[data-delay="1"].is-in{transition-delay:.07s;}
.reveal[data-delay="2"].is-in{transition-delay:.14s;}
.reveal[data-delay="3"].is-in{transition-delay:.21s;}
.reveal[data-delay="4"].is-in{transition-delay:.28s;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;filter:none;}
  .reveal.is-in{transition:none;}
}

/* --------------------------------------------------------------------------
   23. PAGE PIECES
   -------------------------------------------------------------------------- */

/* 23.1 Manifesto (about) */
.manifesto{list-style:none;padding:0;margin-top:clamp(2rem,4vw,3.25rem);display:flex;flex-direction:column;}
.manifesto li{display:grid;gap:.85rem 3rem;grid-template-columns:1fr;padding-block:clamp(1.75rem,3vw,2.5rem);}
.manifesto li + li{border-top:1px solid var(--line);}
@media (min-width:880px){.manifesto li{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}}
.manifesto h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.16;letter-spacing:-.02em;max-width:18ch;
}
.manifesto p{color:var(--text-2);}

/* 23.2 Founder quote and portrait (about) */
.quote-card .core{
  background:var(--surface-2);position:relative;
  display:grid;grid-template-columns:1fr;
}
.quote-body{
  position:relative;
  padding:clamp(2rem,4.5vw,3.75rem);
  display:flex;flex-direction:column;gap:1.75rem;justify-content:center;
  order:2;
}
.quote-card .watermark{
  display:none;                    /* stacked layout on the phone has no room */
  position:absolute;right:clamp(1.25rem,3vw,2.5rem);top:-6%;
  width:min(16%,120px);opacity:.07;pointer-events:none;
}
@media (min-width:820px){.quote-card .watermark{display:block;}}
.quote-card blockquote{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.2;letter-spacing:-.022em;
  max-width:19ch;position:relative;text-wrap:balance;
}
.quote-card .stack-sm{position:relative;}
/* the founder's name reads as a signature under the quote, so it is set in
   the display face rather than as another mono caption */
.quote-name{font-family:var(--font-display);font-size:1.22rem;line-height:1.2;
  letter-spacing:-.012em;margin-bottom:-.3rem;}

/* The portrait runs full bleed to the card's inner edge. On the phone it
   sits on top, cropped short, so the quote is still the first thing read. */
.quote-portrait{position:relative;order:1;min-height:16rem;}
.quote-portrait img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
}
@media (min-width:820px){
  .quote-card .core{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);}
  .quote-body{order:1;}
  .quote-portrait{order:2;min-height:26rem;}
  .quote-portrait img{object-position:center 30%;}
}

/* 23.3 The two column trade (alliance) and feature lists */
.trade{display:grid;gap:14px;grid-template-columns:1fr;margin-top:clamp(2rem,4vw,3rem);}
@media (min-width:860px){.trade{grid-template-columns:1fr 1fr;}}
.trade-list{list-style:none;padding:0;display:flex;flex-direction:column;margin-top:.4rem;}
.trade-list li{padding-block:1.15rem;display:flex;flex-direction:column;gap:.28rem;}
.trade-list li + li{border-top:1px solid var(--line);}
.trade-list p{color:var(--text-2);font-size:.96rem;}

/* 23.5 Horizontal service rail (services) */
.rail-scroll{
  /* the rail runs full bleed but its first card lines up with the page
     gutter. scroll-padding has to match the padding or the first card can
     never be snapped back into place. */
  --rail-pad:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  margin-top:clamp(2rem,4vw,3rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-block:.4rem 1.6rem;
  padding-inline:var(--rail-pad);
  scroll-padding-inline:var(--rail-pad);
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail-scroll::-webkit-scrollbar{display:none;}
.rail-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-inner);}
.rail-track{display:flex;gap:14px;width:max-content;}
.rail-card{scroll-snap-align:start;width:min(20.5rem,78vw);flex:none;}
.rail-card .core{display:flex;flex-direction:column;gap:.7rem;height:100%;}
.rail-card h3{margin-top:.15rem;}
.rail-card p{color:var(--text-2);font-size:.96rem;}

/* The four service cards. As a rail the fourth one sat half off the right
   edge on a laptop with nothing on screen to say it was there, so it simply
   read as cut off. On a phone a rail is still the right answer and it stays
   one; from a tablet up the same cards become a grid and all four are on
   screen at once. Two across in the middle, four across once there is room. */
@media (min-width:700px){
  .service-rail{overflow:visible;scroll-snap-type:none;padding-block:0;}
  .service-rail .rail-track{
    display:grid;width:auto;grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .service-rail .rail-card{width:auto;}
}
@media (min-width:1100px){
  .service-rail .rail-track{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* a link inside a heading on the timeline: underlined only on hover, so the
   heading still reads as a heading */
.rail-item h3 a.out{
  color:inherit;border-bottom:1px solid var(--line-2);
  transition:color .3s linear, border-color .3s linear;
}
.rail-item h3 a.out:hover{color:var(--gold);border-color:var(--gold);}

/* 23.5b The client wordmark row, and the notice under it (services)
   Five names on one line on a laptop. On a phone they are still readable at
   this size rather than one shrunken line, so they wrap onto two and centre. */
.trust-row{
  /* one number drives the whole row. Each logo is a multiple of it, so the
     five stay in proportion to each other at every screen width. */
  --logo:clamp(11px,3.1vw,23px);
  list-style:none;padding:0;
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding-block:clamp(1.5rem,3vw,2.3rem);
  border-block:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.1rem clamp(.6rem,3vw,2.6rem);
}
/* the brand's name, which shows only if its file ever goes missing */
.trust-row li{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(.58rem,1.5vw,.9rem);letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-2);
}
/* Height only, so a file of any width keeps its own proportions. The colour
   is taken out of all five: a row of five different brand colours would pull
   harder than anything else on the page, and this is a footnote, not a
   feature. Black on the light theme, white on the dark one. */
.trust-row img{
  width:auto;height:calc(var(--logo) * var(--k,1));
  filter:grayscale(1) brightness(0);opacity:.62;
}
/* each mark is set by eye, not by measurement: a wordmark and a wordmark
   with a symbol beside it do not read as the same size at the same height */
.lg-mercedes{--k:1.9}
.lg-volvo{--k:.88}
.lg-samsung{--k:1.02}
.lg-lamer{--k:1.1}
.lg-acer{--k:1.38}
@media (max-width:700px){.trust-row{justify-content:center;gap:1.1rem 1.6rem;}}
@media (prefers-color-scheme: dark){
  .trust-row img{filter:grayscale(1) brightness(0) invert(1);opacity:.6;}
}

.notice{margin-top:clamp(1.6rem,3vw,2.2rem);}
.notice .label{
  display:flex;align-items:center;gap:.55rem;color:var(--text-2);margin-bottom:.7rem;
}
.notice .label::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.notice p{color:var(--text-3);font-size:.86rem;line-height:1.62;max-width:88ch;}

/* 23.6 Full width photo band (services) */
.band-section{padding-block:clamp(1.5rem,4vw,3rem);}
/* full bleed, but the edges dissolve into the page instead of ending in a
   hard rectangle. mask only, so nothing repaints while scrolling. */
.band img{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 62%;
  filter:grayscale(.82) contrast(1.08) brightness(.98);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
@media (min-width:900px){.band img{aspect-ratio:21/9;}}
/* a panorama. Cropping it to 21/9 would lose the people at both ends, so it
   keeps its own shape once there is room, and crops only on a narrow screen
   where the whole width would be a sliver about 100px tall. */
.band-wide img{aspect-ratio:2.6/1;object-position:center center;}
@media (min-width:900px){.band-wide img{aspect-ratio:2024/512;}}

/* 23.7 Long form text (privacy) */
.prose{max-width:66ch;display:flex;flex-direction:column;gap:1.05rem;}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2;margin-top:1.75rem;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--text-2);}
.prose a{color:var(--text);border-bottom:1px solid var(--line-2);}
.prose a:hover{color:var(--gold);border-color:var(--gold);}

/* 23.8 Charter members (council): horizontal rail of cards that turn over */

/* The rail itself is the same component the services page uses, so it snaps
   and runs full bleed for free. Two things are different here.

   One: a card turning in 3D grows towards the viewer, so mid turn it is
   taller than the box it sits in. .rail-scroll scrolls sideways, and a box
   that scrolls in one direction always clips in the other, so the extra
   padding below is headroom for the turn. Without it the top and bottom of
   the card get sliced off halfway through.

   Two: .reveal finishes on filter:blur(0), and any filter at all flattens
   3D transforms inside it, which would kill the flip permanently. Clearing
   it to none once the rail has arrived costs nothing and fixes that. */
.charter-rail{
  padding-block:2.9rem 3.1rem;
  /* the operating system's own scrollbar runs the full bleed width of the
     page, which is both long and not ours to style. It is switched off here
     and replaced by .rail-bar below, which sits inside the content column
     and matches the rest of the site. */
  scrollbar-width:none;-ms-overflow-style:none;
  /* Snapping fights every one of the three ways this rail is moved: the
     wheel, the arrows and the thumb. The browser keeps yanking the cards to
     the nearest edge mid movement, which is what made it feel choppy. The
     arrows already step by exactly one card, so nothing is lost by turning
     it off and letting the rail move freely. */
  scroll-snap-type:none;
}
.charter-rail::-webkit-scrollbar{display:none;}
.charter-rail.is-in{filter:none;}

.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap;}
.rail-nav{display:flex;gap:.55rem;flex:none;}

/* the replacement scrollbar: a hairline the width of the content column with
   a thumb that thickens and warms up when you take hold of it */
.rail-bar{
  position:relative;height:20px;margin-top:-1.4rem;cursor:grab;
  touch-action:none;              /* so a finger drags the thumb, not the page */
}
.rail-bar::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:2px;margin-top:-1px;border-radius:var(--r-pill);background:var(--line);
}
.rail-bar i{
  position:absolute;top:50%;left:0;height:2px;margin-top:-1px;
  border-radius:var(--r-pill);background:color-mix(in srgb,var(--text-3) 58%,transparent);
  transition:background .3s linear, height .3s var(--ease-out), margin-top .3s var(--ease-out);
}
.rail-bar:hover i,.rail-bar.is-dragging i{background:var(--gold);height:5px;margin-top:-2.5px;}
.rail-bar.is-dragging{cursor:grabbing;}
@media (prefers-reduced-motion: reduce){.rail-bar i{transition:none;}}
.rail-btn{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);color:var(--text);
  box-shadow:var(--shadow-1);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
             opacity .3s linear, color .3s linear, border-color .3s linear;
}
.rail-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.rail-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent);}
.rail-btn:active{transform:translateY(0) scale(.93);}
.rail-btn[disabled]{opacity:.3;pointer-events:none;box-shadow:none;}

/* --- the card ----------------------------------------------------------- */
.charter-card{
  scroll-snap-align:start;flex:none;width:min(23rem,82vw);
  /* the vanishing point for the turn. A big number keeps the perspective
     shallow, which reads as expensive; a small one looks like a cartoon. */
  perspective:1800px;
  transition:transform .55s var(--ease-out);
}
.charter-card > *{height:100%;}
@media (hover:hover){.charter-card:hover{transform:translateY(-6px);}}

.flip-inner{
  position:relative;height:100%;
  /* both faces are put in the same grid cell, so the card ends up as tall as
     the taller of the two and the back can never be cut off */
  display:grid;
  transform-style:preserve-3d;
  will-change:transform;
  /* the curve runs a few degrees past 180 and settles back, so it lands like
     a real card being turned over rather than easing to a dead stop */
  transition:transform .85s cubic-bezier(.2,.86,.24,1.05);
}
@media (hover:hover){
  .charter-card:hover .flip-inner{transform:rotateY(180deg);}
}
.charter-card:focus-visible .flip-inner,
.charter-card.is-flipped .flip-inner{transform:rotateY(180deg);}

.charter-card:focus-visible{outline:none;}
.charter-card:focus-visible .flip-front{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-outer);}

.flip-face{
  grid-area:1 / 1;
  /* the half of the turn where a face points away from the viewer is simply
     not drawn, which is what stops the two faces overlapping */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.flip-face.shell{box-shadow:var(--shadow-1);transition:box-shadow .55s var(--ease-out);}
@media (hover:hover){.charter-card:hover .flip-face.shell{box-shadow:var(--shadow-2);}}
.flip-back{transform:rotateY(180deg);}
.flip-face .core{display:flex;flex-direction:column;gap:.85rem;height:100%;}
.flip-back .core{background:linear-gradient(168deg,var(--surface-2) 0%,var(--frame) 100%);}

.charter-card .avatar{
  width:136px;height:136px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--metal);color:#0B1626;
  font-family:var(--font-display);font-size:1.15rem;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
/* a photograph fills the circle instead of the brushed metal disc */
.charter-card .avatar-photo{
  background:none;padding:0;object-fit:cover;object-position:center 12%;
  box-shadow:0 0 0 1px var(--line), 0 6px 18px -8px rgba(11,22,38,.5);
}
.charter-card .role{color:var(--text-3);font-size:.92rem;}
.charter-card h3{margin-bottom:-.15rem;}

.dot-list{display:flex;flex-direction:column;gap:.5rem;list-style:none;padding:0;margin:0;}
.dot-list li{position:relative;padding-left:1.05rem;color:var(--text-2);font-size:.94rem;line-height:1.45;}
.dot-list li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--gold);}

.hl-list{display:flex;flex-direction:column;gap:1.05rem;list-style:none;padding:0;margin:0;}
.hl-list li{position:relative;padding-left:1.05rem;}
.hl-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--gold);}
.hl-list h4{font-size:.95rem;line-height:1.35;margin-bottom:.32rem;}
.hl-list p{color:var(--text-2);font-size:.875rem;line-height:1.55;}

.back-name{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line);}
.flip-hint{
  margin-top:auto;padding-top:1.15rem;
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--gold);font-size:.86rem;font-weight:600;
}
.flip-hint svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;transition:transform .55s var(--ease-out);}
@media (hover:hover){.charter-card:hover .flip-hint svg{transform:rotate(180deg);}}
.hint-tap{display:none;}
/* a finger cannot hover, so on a phone the card says tap instead */
@media (hover:none){.hint-hover{display:none;}.hint-tap{display:inline;}}

/* a seat on the charter that has not been filled yet */
.charter-open .shell{background:transparent;border-color:transparent;}
.charter-open .core{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.7rem;border-style:dashed;background:transparent;box-shadow:none;}
.charter-open .avatar{background:transparent;border:1px dashed var(--line-2);box-shadow:none;}

@media (prefers-reduced-motion: reduce){
  /* no turning. The back simply crossfades over the front, which conveys the
     same thing without moving anything through space. */
  .charter-card,.charter-card:hover{transform:none;}
  .flip-inner,
  .charter-card:focus-visible .flip-inner,
  .charter-card.is-flipped .flip-inner{transform:none;transition:none;}
  @media (hover:hover){.charter-card:hover .flip-inner{transform:none;}}
  .flip-face{-webkit-backface-visibility:visible;backface-visibility:visible;}
  .flip-back{transform:none;opacity:0;transition:opacity .25s linear;}
  .charter-card:focus-visible .flip-back,
  .charter-card.is-flipped .flip-back{opacity:1;}
  @media (hover:hover){
    .charter-card:hover .flip-back{opacity:1;}
    .charter-card:hover .flip-hint svg{transform:none;}
  }
}


/* mobile: every asymmetric layout falls back to one column, see the
   media queries above. this is the belt and braces for anything missed. */
@media (max-width:600px){
  .bento > *,.partners > *{grid-column:1 / -1 !important;}
  .btn{width:100%;justify-content:space-between;}
  .btn.is-plain{justify-content:center;}
  .btn-row{width:100%;}
}

/* --------------------------------------------------------------------------
   28. THREE LANGUAGES
   -------------------------------------------------------------------------- */
/* The three buttons. They carry data-no-t in the markup, because a language
   button has to read in the language it offers rather than the one somebody
   is currently stuck in. */
.lang{
  display:inline-flex;align-items:stretch;flex:none;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--surface);overflow:hidden;
}
.lang button{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;
  color:var(--text-3);padding:.44rem .62rem;line-height:1.35;white-space:nowrap;
  transition:color .3s linear, background-color .3s linear;
}
/* Japanese and Chinese sit in their own squares already and do not want the
   wide tracking the Latin label is given */
.lang button[lang="ja"],.lang button[lang="zh-Hant"]{letter-spacing:.02em;font-family:var(--font-sans);}
.lang button + button{border-left:1px solid var(--line);}
.lang button:hover{color:var(--text);}
.lang button[aria-pressed="true"]{background:var(--gold-wash);color:var(--text);}
.lang .lang-short{display:none;}
@media (max-width:600px){
  .lang .lang-full{display:none;}
  .lang .lang-short{display:inline;}
  .lang button{padding:.42rem .5rem;font-size:.66rem;}
}
@media (max-width:1023px){.nav{gap:1rem;}}

/* Below 360px the three pieces of the bar stop fitting side by side and the
   whole page slides sideways under a thumb. Nothing is dropped: the gaps
   close, the wordmark and the language buttons step down one size, and the
   menu button loses 4px, which is enough to bring the row back inside the
   gutter on a 320px phone. */
@media (max-width:359px){
  .nav{gap:.6rem;}
  .brand{gap:.45rem;}
  .brand .mark-img{width:1.3rem;}
  .brand-name{font-size:1.05rem;}
  .lang button{padding:.42rem .36rem;font-size:.62rem;}
  .nav-toggle{width:40px;height:40px;}
}

/* held back for the moment it takes to swap the words in */
.t-wait body{opacity:0;}
body{transition:opacity .18s linear;}

/* --- how the two Asian languages are set ----------------------------------
   The Latin faces carry no Japanese or Chinese glyphs, so the browser falls
   through to the next name on the list for those characters while keeping
   Newsreader and Instrument Sans for the Latin ones. A line reading
   "GDPR に準拠" therefore stays on brand across both halves of itself. */
html[data-lang="ja"]{
  --font-display:'Newsreader','Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP','Iowan Old Style',Georgia,serif;
  --font-sans:'Instrument Sans','Hiragino Sans','Yu Gothic UI','Yu Gothic','Noto Sans JP',ui-sans-serif,system-ui,sans-serif;
}
html[data-lang="zh"]{
  --font-display:'Newsreader','Noto Serif TC','Songti TC','PMingLiU','Iowan Old Style',Georgia,serif;
  --font-sans:'Instrument Sans','PingFang TC','Microsoft JhengHei','Noto Sans TC',ui-sans-serif,system-ui,sans-serif;
}
/* Tracking drawn for Latin letters pulls Japanese and Chinese apart. It goes
   back to normal on headings and is eased off wherever it was set wide. */
html[data-lang="ja"] :is(h1,h2,h3,h4,.display-xl,.lede,.statement-line,blockquote),
html[data-lang="zh"] :is(h1,h2,h3,h4,.display-xl,.lede,.statement-line,blockquote){letter-spacing:normal;}
html[data-lang="ja"] :is(.label,.eyebrow,.chip,.tab,.btn-label,.crumbs),
html[data-lang="zh"] :is(.label,.eyebrow,.chip,.tab,.btn-label,.crumbs){letter-spacing:.06em;}
/* a row of Japanese or Chinese wants a little more air above and below it */
html[data-lang="ja"] :is(p,li,dd,.lede),
html[data-lang="zh"] :is(p,li,dd,.lede){line-height:1.85;}