/* ============================================================
   GOLDEN IVORY TRADING CO. — website. Single stylesheet.

   Follows the DELONIX website system (A9_DELONIX/02_WEBSITE/site.css):
   the same page grammar — eyebrow → title → standfirst → body → stat
   strip → hairline — the same type pairing, grid, header, dark hero,
   coloured band, black contact and corner-bleed emblem. The palette and
   the emblem are Golden Ivory's own: palette A "Delta" (Paul, 2026-09-23),
   a near-white page, water blue and one warm signal colour, so that the
   manufacturers' logos carry the colour on the page.

   TYPE. Jost (geometric sans) for headings, labels and navigation; Libre
   Baskerville for running text — as on the DELONIX site. Both are served
   from fonts/ (SIL Open Font License), not from Google: the connection to
   Google was the slowest part of the first paint.

   There is no second stylesheet and no style attribute for layout. The
   only inline style on a page is each partner logo's own --h (its optical
   height, see .plate below; the logos sit straight on the page).
   ============================================================ */

/* Latin subsets, as Google serves them. Jost is one variable file for all
   three weights. The version is in the filename so it can be cached for a
   year (_headers); a new version gets a new name. */
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:300 500; font-display:swap;
  src:url("fonts/jost-latin-v20.woff2") format("woff2");
}
@font-face{
  font-family:"Libre Baskerville"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/libre-baskerville-400-latin-v24.woff2") format("woff2");
}

:root{
  /* Palette A "Delta", in the roles the DELONIX tokens play. Contrast on
     --paper: --body 7.15:1, --signal 5.79:1 (the focus ring), --rule-dark
     3.9:1 (field borders). */
  --ebony:#15181C;            /* hero ground                 (DELONIX jungle) */
  --blue-deep:#1A4E78;        /* eyebrows, labels, CTA       (rainforest)     */
  --blue:#2F73A6;             /* second tile rule            (palm)           */
  --blue-pale:#BFD9EA;        /* band ground; hero accent    (lime)           */
  --signal:#A2480F;           /* focus ring, underline, step accent (coral)   */

  --paper:#FAFAF8;            /* the site's ground */
  --field:#FFFFFF;            /* form fields */
  --ink:#15181C;
  --body:#52555B;
  --rule:#E1E2DD;
  --rule-dark:#7C8085;
  --black:#0D0F12;            /* contact and footer */
  --bone:#DCE3E9;             /* light text on --black */
  --error:#9E3B1F;            /* a problem to fix, not a confirmation */

  --sans:"Jost","Century Gothic",Futura,"Avenir Next",Avenir,sans-serif;
  --serif:"Libre Baskerville","Baskerville Old Face",Baskerville,Georgia,serif;

  --gutter:clamp(20px, 5.21vw, 76px);
  --maxw:1320px;
  --section-y:clamp(64px, 8.4vw, 132px);
}

*{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100% }

body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--serif);
  font-size:clamp(.9375rem, 0.55vw + .8125rem, 1.0625rem);   /* rem, so the browser's text size applies */
  line-height:1.75;
  overflow-wrap:break-word;   /* a long email address wraps instead of running off a phone screen */
  overflow-x:hidden;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
}

img,svg{ max-width:100%; height:auto; display:block }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }

/* ============================================================
   THE EMBLEM
   The elephant head, as a faint white overlay, on every coloured ground:
   hero, band and contact. Same rules as the DELONIX mark:

   1. It ALWAYS bleeds off a corner, so it reads as a mark, not a panel.

   2. The crop is measured against the DRAWN SHAPE, not the canvas
      (tools/make_mark.py prints the numbers). The canvas is 915 × 1000,
      so the mark is 1.0929 × --mark-w tall; the ink fills 0.4–99.3 %
      across and 0.5–96.2 % down. To leave v = 0.58 of the shape in view,
      the offset past each edge is (inset + v × shape) − 1:
         right   −0.4220 × width
         bottom  −0.4399 × height  = −0.4808 × --mark-w
         top     −0.4069 × height  = −0.4447 × --mark-w
      Unlike the DELONIX emblem the elephant is not symmetric, so the
      three constants differ. Each side uses the inset of the side that stays
      in view, so 0.58 of the shape shows on each axis (tools/check_marks.py).

   3. --mark-w is a LENGTH (vw), never a percentage — a percentage resolves
      against width for right/left and height for top/bottom.

   4. Never where the words are: hero and contact bottom-right, the band
      top-right.
   ============================================================ */
.mark{
  position:absolute;
  width:var(--mark-w, 360px);
  pointer-events:none;
  user-select:none;
}
.mark-br{ right:calc(var(--mark-w, 360px) * -0.4220); bottom:calc(var(--mark-w, 360px) * -0.4808) }
.mark-tr{ right:calc(var(--mark-w, 360px) * -0.4220); top:calc(var(--mark-w, 360px) * -0.4447) }

.hero, .band, .contact{ position:relative; overflow:hidden }
.hero > .wrap, .band > .wrap, .contact > .wrap{ position:relative; z-index:1 }

.hero   { --mark-w:clamp(300px, 40vw, 580px) }  .hero    .mark{ opacity:.075 }
.band   { --mark-w:clamp(240px, 34vw, 490px) }  .band    .mark{ opacity:.07 }   /* logo-mark-ink.png: ebony ink, generated from the ink pixels only — the white mark vanished on the pale band, and logo-mark-dark-lg.png turned out to be ivory-bodied with a yellow tusk, not dark, so only the tusk showed. */
.contact{ --mark-w:clamp(220px, 30vw, 430px) }  .contact .mark{ opacity:.060 }

/* 5. Content yields to the mark: the last column of a row sharing the
   bottom-right corner is padded by the fragment's width (0.574 × --mark-w),
   less the room already between the content edge and the viewport edge —
   but never by more than 35 % of its own column, or at tablet widths the
   words stack one per line. The mark is faint enough to sit behind text. */
.hero .hero-stats > :last-child,
.contact .contact-grid > :last-child{
  padding-right:min(35%, max(0px, calc(var(--mark-w) * 0.574
                              - (100vw - min(100vw, var(--maxw))) / 2
                              - var(--gutter) + 16px)));
}

/* ---------- shared page grammar ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue-deep);
  margin-bottom:1.1rem;
}
h1,h2,h3,h4{ font-family:var(--sans); font-weight:400; color:var(--ink); line-height:1.1 }
h2{ font-size:clamp(1.9rem, 3.6vw, 3.05rem); letter-spacing:-.005em }
h3, .step h4{ font-size:clamp(1.05rem, 1.25vw, 1.24rem); line-height:1.24 }
.subhead{
  font-size:clamp(1.5rem, 2.4vw, 1.95rem); line-height:1.16;
  margin-top:clamp(48px, 6vw, 84px);
}
.standfirst{
  font-size:clamp(1.02rem, 1.35vw, 1.28rem); line-height:1.45; color:var(--ink);
  max-width:62ch; margin-top:1.5rem;
}
.body-copy{ max-width:66ch; margin-top:1.4rem }
p + p{ margin-top:1.15rem }
em{ font-style:italic; color:var(--ink) }
strong{ font-weight:400; color:var(--ink) }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

.section{ padding-block:var(--section-y) }
.section + .section{ border-top:1px solid var(--rule) }
.band + .section, .section + .band{ border-top:0 }
.lead-in{ margin-top:clamp(44px, 5.5vw, 76px) }

/* ---------- stat strip ---------- */
.stats{
  display:grid; gap:2rem clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  margin-top:clamp(48px, 6vw, 84px);
  padding-bottom:1.4rem; border-bottom:1.4px solid var(--ebony);
}
.stat .l{
  font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--body);
  margin-bottom:.75rem;
}
.stat .v{
  font-family:var(--sans); font-size:clamp(1.35rem,2.1vw,1.75rem);
  color:var(--blue-deep); line-height:1.08;
}
.stat .v small{ display:block; font-size:.62em; color:var(--body); margin-top:.3rem }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,248,.93);
  backdrop-filter:saturate(140%) blur(9px); -webkit-backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.site-header.scrolled{ border-bottom-color:var(--rule) }
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:78px;
}
.brand{ display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; flex:0 1 auto; min-width:0 }
.brand img{ width:auto; height:46px; flex:none }
.brand-name{
  font-family:var(--sans); font-size:1.06rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); line-height:1.05;
}
.brand-name small{
  display:block; font-size:.58rem; font-weight:400; letter-spacing:.34em; color:var(--body);
  margin-top:.3rem;
}
.nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); flex:none }
.nav a{
  font-family:var(--sans); font-size:.79rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; padding:.4rem 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.nav a:hover::after, .nav a:focus-visible::after{ transform:scaleX(1) }
.nav .cta{
  border:1px solid var(--blue-deep); border-radius:2px;
  padding:.62rem 1.15rem; color:var(--blue-deep);
  transition:background .25s, color .25s;
}
.nav .cta::after{ display:none }
.nav .cta:hover, .nav .cta:focus-visible{ background:var(--blue-deep); color:#fff }
.nav-toggle{ display:none }

/* ---------- hero ---------- */
.hero{
  background:var(--ebony); color:#fff;
  padding-block:clamp(84px, 12vw, 176px);
}
.hero .eyebrow{ color:var(--blue-pale) }
.hero h1{
  color:#fff; font-size:clamp(2.5rem, 6.1vw, 5.2rem); line-height:1.02;
  max-width:19ch; letter-spacing:-.012em;
}
.hero .lede{
  font-size:clamp(1.06rem, 1.55vw, 1.4rem); line-height:1.55;
  color:rgba(255,255,255,.82); max-width:56ch; margin-top:2rem;
}
.hero .rule{ border-top:1px solid rgba(255,255,255,.26); margin-top:clamp(40px,5vw,68px) }
.hero .hero-stats{
  display:grid; gap:1.75rem clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  margin-top:2.2rem;
}
.hero .hero-stats .l{
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue-pale); margin-bottom:.6rem;
}
.hero .hero-stats .v{ font-family:var(--sans); font-size:1.3rem; color:#fff; line-height:1.15 }

/* ---------- definition rows ---------- */
.defrow{
  display:grid; grid-template-columns:minmax(180px,23%) 1fr;
  gap:clamp(18px,3vw,52px);
  border-top:1px solid var(--rule); padding-block:clamp(22px,2.6vw,34px);
}
.defrow:last-child{ border-bottom:1px solid var(--rule) }
.defrow .k{ font-family:var(--sans); font-size:clamp(1.05rem,1.4vw,1.32rem); color:var(--blue-deep); line-height:1.2 }
.defrow .k small{
  display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--body); margin-top:.6rem;
}
.defrow .t{ font-size:.98rem; line-height:1.62 }

/* ---------- tiles ---------- */
.tiles{ display:grid; gap:clamp(28px,3.4vw,48px); grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr)) }
.tile{ border-top:2px solid var(--ebony); padding-top:1.3rem }
.tile.blue{ border-top-color:var(--blue) }
.tile.pale{ border-top-color:var(--blue-pale) }
.tile.signal{ border-top-color:var(--signal) }
/* Four manufacturers: 2 × 2 or 4 in a row, never 3 + 1. */
@media (min-width:600px){ .tiles.four{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1200px){ .tiles.four{ grid-template-columns:repeat(4,1fr) } }
.tile p{ font-size:.94rem; line-height:1.68; margin-top:.85rem }
.tile .num{
  display:block; font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:.7rem;
}
.tile .tags{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--body); margin-top:1rem; line-height:1.6;
}

/* Partner and team logos: official artwork, transparent, straight on the
   page (Paul, 2026-09-22: no white plate), never recoloured. The slot keeps
   a fixed height so the text below lines up across a row; --h is set per
   logo so a wide lockup and a square emblem carry the same visual weight. */
.plate{
  height:72px; display:grid; align-items:center; justify-items:start;
  margin-bottom:1.2rem;
}
.plate.tall{ height:110px }
.plate img{ height:var(--h, 34px); width:auto; max-width:100%; object-fit:contain }

/* ---------- numbered steps ---------- */
.steps{
  list-style:none; display:grid; gap:clamp(30px,3.4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin-top:clamp(28px,3.4vw,44px);
}
.step .n{
  font-family:var(--sans); font-size:1.35rem; color:var(--blue-deep); line-height:1;
  padding-bottom:.75rem; border-bottom:1px solid var(--rule); margin-bottom:1rem; display:block;
}
.step p{ font-size:.92rem; line-height:1.66; margin-top:.7rem }

/* ---------- pull band ----------
   Pale water blue with ebony type, the way DELONIX runs its lime band.
   Labels are deep blue here. */
.band{ background:var(--blue-pale); color:var(--ebony) }
.band .eyebrow{ color:var(--blue-deep) }
.band h2, .band h3, .band h4{ color:var(--ebony) }
.band .standfirst{ color:var(--ebony) }
.band p, .band .defrow .t{ color:rgba(21,24,28,.84) }
.band .defrow{ border-top-color:rgba(21,24,28,.22) }
.band .defrow:last-child{ border-bottom-color:rgba(21,24,28,.22) }
.band .defrow .k{ color:var(--ebony) }
.band .defrow .k small{ color:var(--blue-deep) }
.band .step .n{ color:var(--ebony); border-bottom-color:rgba(21,24,28,.28) }
.band .stats{ border-bottom-color:rgba(21,24,28,.55) }
.band .stat .l{ color:var(--blue-deep) }
.band .stat .v{ color:var(--ebony) }
.band .stat .v small{ color:rgba(21,24,28,.72) }

/* ---------- enquiry form ---------- */
.enquiry{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem clamp(20px,3vw,44px); max-width:880px }
.field{ display:grid; gap:.55rem }
.field.full, .form-status, .form-foot{ grid-column:1 / -1 }
.field label{
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--body);
}
.field label{ font-size:.8rem }   /* the form's labels: larger than the page's other labels */
.field .req{ letter-spacing:.06em; text-transform:none; font-weight:400 }
.field input, .field select, .field textarea{
  font:400 1rem/1.4 var(--sans); color:var(--ink); background:var(--field);
  border:1px solid var(--rule-dark); border-radius:2px; padding:.8rem .9rem; width:100%;
  transition:border-color .2s;
}
.field textarea{ min-height:132px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue-deep) }   /* the focus ring stays */
.field [aria-invalid="true"], .field [aria-invalid="true"]:focus{ border-color:var(--error); border-width:2px; padding:calc(.8rem - 1px) calc(.9rem - 1px) }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; margin-top:.4rem }
.form-foot small{ font-family:var(--sans); font-size:.8rem; color:var(--body) }
.button{
  font-family:var(--sans); font-size:.79rem; letter-spacing:.15em; text-transform:uppercase;
  border:1px solid var(--blue-deep); border-radius:2px; background:none; color:var(--blue-deep);
  padding:.8rem 1.4rem; cursor:pointer; transition:background .25s, color .25s;
}
.button:hover, .button:focus-visible{ background:var(--blue-deep); color:#fff }
/* The status line is in the page from the start and never display:none, so a
   screen reader is already watching it when the first message is written. */
.form-status{
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
  border-left:2px solid transparent; padding-left:1rem;
}
.form-status.show{ border-left-color:var(--signal); padding-block:.2rem }
.form-status.show.error{ border-left-color:var(--error) }

/* Shown only when JavaScript is off: the Worker sends the browser back to
   #enquiry-sent or #enquiry-failed after a plain form post. */
.nojs-status{ display:none; grid-column:1 / -1; font-family:var(--sans); font-size:.95rem; color:var(--ink);
  border-left:2px solid var(--signal); padding:.2rem 0 .2rem 1rem }
.nojs-status:target{ display:block }
#enquiry-failed{ border-left-color:var(--error) }

.button[disabled], .button[disabled]:hover{
  cursor:default; background:none; color:var(--body); border-color:var(--rule-dark)
}

/* The spam trap in the enquiry form (index.html). Off-screen, not display:none:
   bots skip hidden fields but fill this one, which is how they give themselves away. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---------- contact ---------- */
.contact{ background:var(--black); color:#fff; padding-block:clamp(72px,9vw,124px) }
.contact .eyebrow{ color:var(--blue-pale) }
.contact h2{ color:#fff; font-size:clamp(2.4rem,5.4vw,4.4rem) }
.contact .lede{
  font-size:clamp(1.02rem,1.45vw,1.3rem); line-height:1.5;
  color:var(--bone); max-width:58ch; margin-top:1.7rem;
}
.contact .rule{ border-top:1px solid rgba(255,255,255,.24); margin-top:clamp(40px,5vw,64px) }
.contact-grid{
  display:grid; gap:2rem clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-top:2.4rem;
}
.contact-grid .l{
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone); margin-bottom:.7rem;
}
.contact-grid .v{ font-family:var(--sans); font-size:1.06rem; color:#fff; line-height:1.45; overflow-wrap:anywhere }
.contact-grid a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6) }
.contact-grid a:hover{ border-bottom-color:var(--blue-pale) }
.tbc{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-pale); border:1px solid var(--blue-pale); border-radius:2px;
  padding:.18rem .45rem; display:inline-block; vertical-align:middle; max-width:100%;
}

/* ---------- footer ---------- */
.site-footer{ background:var(--black); color:rgba(255,255,255,.55); padding-bottom:2.6rem }
.site-footer .wrap{
  border-top:1px solid rgba(255,255,255,.16); padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .defrow{ grid-template-columns:1fr; gap:.9rem }
  .defrow .k small{ margin-top:.35rem }
}
/* The desktop nav needs about 1060 px; below that it becomes the MENU. */
@media (max-width:67.5em){
  .nav{
    position:fixed; inset:78px 0 auto; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--paper); border-bottom:1px solid var(--rule);
    padding:.5rem var(--gutter) 1.6rem; display:none;
    max-height:calc(100vh - 78px); max-height:calc(100dvh - 78px); overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.open{ display:flex }
  .nav a{ width:100%; padding:.85rem 0; border-bottom:1px solid var(--rule); font-size:.85rem }
  .nav a:last-child:not(.cta){ border-bottom:none }
  .nav .cta{ margin-top:1rem; text-align:center; padding:.8rem 1.15rem }
  .nav-toggle{
    display:inline-flex; align-items:center; gap:.55rem; background:none; cursor:pointer;
    border:1px solid var(--rule-dark); border-radius:2px; padding:.55rem .8rem;
    font-family:var(--sans); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink); flex:none;
  }
}
/* On a tablet the open menu is a panel at the right, not a full-width list. */
@media (min-width:47.5625em) and (max-width:67.5em){
  .nav{ left:auto; width:min(360px, 100%); border-left:1px solid var(--rule) }
}
@media (max-width:760px){
  .enquiry{ grid-template-columns:1fr }
  .contact h2 br{ display:none }
  br.wide{ display:none }        /* a desktop-only line break in a heading */
}
@media (max-width:420px){
  .brand img{ height:40px }
  .brand-name{ font-size:.9rem; letter-spacing:.16em }
}