/* PTX Partners SRL — shared stylesheet.
   Brand: CHOP kit, exports/README.txt. No JavaScript anywhere on this site.

   IMAGES: every photo slot is a .fig element whose picture is supplied by the
   --img custom property. Drop a file into images/ and set --img inline. Until
   then the slot renders a labelled hatch placeholder, so the layout is final
   and the images are a one-line swap each. */

/* ---- Type. Self-hosted, latin + latin-ext (latin-ext carries ă ș ț). ------
   unicode-range means a Dutch visitor never downloads the ext subsets. */
@font-face{
  font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/noto-sans-400-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:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/noto-sans-400-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:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/noto-sans-700-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:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/noto-sans-700-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/ibm-plex-mono-400-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-mono-400-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;
}

:root{
  /* ---- GROUND -------------------------------------------------------------
     --page is the page ground, --card the surfaces that sit on it. They must
     differ or the cards flatten into the background. Three tested pairs:

       white   (current)  --page:#FFFFFF  --card:#FAFAF8
       rice    (CHOP kit) --page:#F6F3EC  --card:#FFFFFF
       grey    (overseas) --page:#F3F3F2  --card:#FFFFFF

     Swap the two values below to change the whole site. Nothing else needs to
     move. Note that Rice is a brand colour in the kit, so `white` and `grey`
     are both deviations — deliberate ones, kept switchable for that reason.

     ACCENT: --accent replaced Seal Vermilion #B32A1E with a deep blue at
     David's request. This is a larger brand deviation than the ground: Seal
     Vermilion is the CHOP kit's brand colour, so the mark, favicon, the files
     in ../exports/ and the logo already live on the LinkedIn company page are
     all still vermilion. The inline mark and favicon on this site were
     recoloured to match; the exports were not. Regenerate them, or revert
     --accent to #B32A1E. */
  --page:#FFFFFF;
  --card:#FAFAF8;

  --ink:#121212;
  --rice:#F6F3EC;      /* brand Rice — type on the accent/ink. Not the ground. */
  --accent:#123C69;   /* was Seal Vermilion #B32A1E — see note above */
  --mute:#7A736A;
  --body:#2A2723;
  --rule:rgba(18,18,18,.11);
  --sans:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(1rem,3vw,1.75rem);      /* page inset — hero and bands sit inside it */
  --gap:clamp(1.5rem,4vw,4rem);
  --r:24px;                            /* surface radius. Cards only, never the mark. */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--body);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `hidden` makes body a scroll container, which detaches
     the scroll-driven reveals from the document scroller and strands them. */
  overflow-x:clip;
}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;display:block}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:1rem;top:1rem;z-index:100;background:var(--ink);color:var(--rice);
  padding:.6rem 1rem;border-radius:6px;
}

/* Wide. Content runs close to the edges the way overseas.be does, rather than
   sitting in a narrow centred column. Measures on individual blocks keep the
   text readable — it is the container that widens, not the line length. */
.wrap{max-width:1560px;margin:0 auto;padding:0 clamp(1rem,3vw,2.5rem)}

/* ---- Floating pill nav --------------------------------------------------- */
.nav{
  position:sticky;top:var(--pad);z-index:50;
  margin:var(--pad) var(--pad) 0;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(140%) blur(12px);
  border:1px solid var(--rule);border-radius:999px;
  padding:.55rem .65rem .55rem 1rem;
  display:flex;align-items:center;gap:1rem;
  box-shadow:0 1px 2px rgba(18,18,18,.05),0 16px 34px -26px rgba(18,18,18,.5);
}
.nav .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);flex:none}
.nav .brand svg{width:34px;height:34px;flex:none;display:block}  /* small master, 16–63px */
.nav .brand b{font-weight:700;font-size:.78rem;letter-spacing:.055em;line-height:1.15}
.nav ul{
  list-style:none;margin:0 auto;padding:0;display:flex;gap:clamp(.75rem,2.4vw,2rem);
}
.nav ul a{text-decoration:none;color:var(--body);font-size:.92rem;padding:.3rem 0}
.nav ul a:hover,.nav ul a:focus-visible{color:var(--accent)}
.nav .pill{
  flex:none;background:var(--ink);color:var(--rice);text-decoration:none;
  padding:.6rem 1.25rem;border-radius:999px;font-weight:700;font-size:.86rem;letter-spacing:.03em;
}
.nav .pill:hover,.nav .pill:focus-visible{background:var(--accent)}

/* ---- Image slots --------------------------------------------------------- */
/* Placeholder hatch shows until --img is set. Swapping in a photo is one
   inline declaration; nothing else about the layout moves. */
.fig{
  position:relative;overflow:hidden;border-radius:var(--r);
  /* Matches --card, so where a rounded corner clips a square panel inside the
     slot there is no coloured sliver. Also the colour shown while a photo
     loads. */
  background-color:#FAFAF8;
  background-image:var(--img,none);
  background-size:cover;background-position:var(--pos,center);
  /* Explicit. The default is `repeat`, which is invisible under `cover` but
     tiles the moment anything changes background-size. */
  background-repeat:no-repeat;
}

.fig::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,
    rgba(18,60,105,.10) 0 12px, rgba(18,60,105,0) 12px 24px);
}
.fig::after{
  content:attr(data-slot);position:absolute;left:1.25rem;bottom:1.15rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--page);padding:.4rem .7rem;border-radius:6px;
}
/* Once a picture is supplied, the hatch and label are switched off. */
.fig.has-img::before,.fig.has-img::after{content:none}

/* Hero only: the photograph moves onto a pseudo-element so the push-in scales
   the picture and not the copy panel and headline sitting on top of it. */
.fig-hero.has-img{background-image:none}
.fig-hero.has-img::before{
  content:"";position:absolute;inset:0;
  background-image:var(--img);
  background-size:cover;background-position:var(--pos,center);
  background-repeat:no-repeat;
}

.fig-hero{height:clamp(380px,62vh,620px)}
.fig-tall{height:clamp(280px,38vh,430px)}
.fig-card{height:clamp(180px,22vw,260px);border-radius:0}

/* Light scrim only. The copy now sits on its own Rice panel, so this is for
   depth and to stop a bright photo shouting over the panel — not legibility. */
.scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,18,18,.16) 0%,rgba(18,18,18,.06) 45%,rgba(18,18,18,.30) 100%);
}

/* ---- Hero ----------------------------------------------------------------
   The overseas.be move: the copy sits in a light panel notched into the photo
   rather than floating on top of it. Reads as one interlocked surface, and it
   fixes legibility structurally — Ink on Rice always wins, no scrim needed. */
.hero{margin:var(--pad);position:relative}
.hero .fig{display:flex;align-items:flex-end;padding:0}
.hero-copy{
  position:relative;z-index:2;
  background:var(--page);
  /* Flush into the hero's bottom-left corner, matching its radius there, and
     rounded on the inboard corner. That interlock is the whole effect. */
  border-radius:0 var(--r) 0 var(--r);
  padding:clamp(1.5rem,3.4vw,2.75rem);
  max-width:min(46rem,80%);
  box-shadow:0 2px 6px rgba(18,18,18,.10),0 26px 60px -30px rgba(18,18,18,.55);
}
.hero-copy h1{
  margin:0;color:var(--ink);font-weight:700;
  letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(2rem,4.9vw,3.5rem);
}
.hero-copy p{
  margin:1rem 0 0;color:var(--mute);max-width:44ch;
  font-size:clamp(1rem,1.55vw,1.15rem);
}
.hero-cta{margin-top:1.6rem}

/* ---- Contact hero ---------------------------------------------------------
   Full-bleed image with the enquiry panel floating over it. min-height sets
   the floor; the flex container grows past it on narrow screens where the form
   is taller than the image would otherwise be, so nothing is ever clipped. */
/* Not .hero — that rule zeroes the padding and bottom-aligns, which is
   right for the homepage banner and wrong for a floating form panel. */
.contact-hero{margin:var(--pad)}
.fig-contact{
  min-height:clamp(620px,88vh,900px);
  display:flex;align-items:center;
  padding:clamp(1rem,3.5vw,3.25rem);
}
.contact-panel{
  position:relative;z-index:2;
  background:var(--page);border-radius:var(--r);
  padding:clamp(1.5rem,3.2vw,2.75rem);
  width:min(580px,100%);
  box-shadow:0 2px 6px rgba(18,18,18,.10),0 30px 70px -34px rgba(18,18,18,.6);
}
.contact-panel .kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .75rem;
}
.contact-panel h1{
  margin:0 0 .75rem;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,3.4vw,2.6rem);
}
.contact-panel .intro{margin:0 0 1.5rem;color:var(--mute);max-width:42ch}
.contact-direct{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  margin:0 0 1.75rem;padding-bottom:1.5rem;border-bottom:1px solid var(--rule);
}
.contact-direct dt{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);margin:0;
}
.contact-direct dd{margin:0}
.contact-direct a{color:var(--ink);font-weight:700}
.contact-panel .form{max-width:none}

/* ---- Specification strip -------------------------------------------------
   Verifiable facts only. Density where the page was emptiest. */
.spec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  margin:clamp(2.5rem,5vw,4rem) 0 0;
}
.spec div{background:var(--card);padding:1.15rem 1.25rem}
.spec dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .4rem;
}
.spec dd{margin:0;color:var(--ink);font-size:.98rem;line-height:1.4;font-weight:700}

/* ---- Numbered steps ------------------------------------------------------- */
.steps{
  display:grid;gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(2rem,4vw,3rem);
}
.step{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.25rem,2.4vw,1.75rem);
}
.step b{
  display:block;font-family:var(--mono);font-weight:400;font-size:.72rem;
  letter-spacing:.09em;color:var(--accent);margin-bottom:.85rem;
}
.step h3{margin:0 0 .5rem;font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.step p{margin:0;font-size:.95rem;max-width:none}

/* ---- Accordion -----------------------------------------------------------
   Native <details>/<summary>. No JavaScript, keyboard-accessible and
   screen-reader-announced for free — which a div-and-script version is not. */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(1.15rem,2.2vw,1.6rem) 0;
  font-size:clamp(1.05rem,1.9vw,1.35rem);font-weight:700;
  color:var(--ink);letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover,.faq summary:focus-visible{color:var(--accent)}
/* The +/− is drawn, not typed: a glyph minus sits off-centre in most faces. */
.faq .sign{position:relative;width:18px;height:18px;flex:none}
.faq .sign::before,.faq .sign::after{
  content:"";position:absolute;background:var(--accent);border-radius:1px;
}
.faq .sign::before{left:0;top:8px;width:18px;height:2px}
.faq .sign::after{left:8px;top:0;width:2px;height:18px}
.faq details[open] .sign::after{display:none}
.faq details p{margin:0 0 clamp(1.25rem,2.4vw,1.75rem);max-width:76ch;color:var(--body)}

/* ---- Site footer ---------------------------------------------------------- */
.sitefoot{border-top:1px solid var(--rule);margin-top:clamp(2rem,5vw,4rem);padding-top:clamp(2.5rem,5vw,3.5rem)}
.sitefoot-grid{
  display:grid;gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:1.4fr 1fr 1.2fr 1fr;
}
.sitefoot h4{
  margin:0 0 1rem;font-family:var(--mono);font-weight:400;font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
}
.sitefoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.sitefoot a{color:var(--body);text-decoration:none;font-size:.95rem}
.sitefoot a:hover,.sitefoot a:focus-visible{color:var(--accent)}
.sitefoot p{margin:0 0 .5rem;font-size:.95rem;max-width:34ch}
.foot-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.foot-brand svg{width:38px;height:38px;flex:none;display:block}
.foot-brand b{font-weight:700;font-size:.8rem;letter-spacing:.055em;line-height:1.2;color:var(--ink)}
.foot-in{display:inline-flex;align-items:center;gap:.5rem}
.foot-in svg{width:17px;height:17px;flex:none;fill:currentColor}
.foot-bar{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.5rem 0 3rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--mute);
}
.foot-bar p{margin:0;max-width:none;font-size:inherit}

/* ---- Sections ------------------------------------------------------------ */
section{padding:clamp(3rem,7vw,5.5rem) 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}

.head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 2rem;padding-bottom:.7rem;border-bottom:2px solid var(--ink);
}
.head h2{
  margin:0;font-size:.86rem;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink);
}
.head h2::before{
  content:"";display:inline-block;width:.45em;height:.45em;border-radius:50%;
  background:var(--accent);margin-right:.85em;vertical-align:.12em;
}
.head h2 span{color:var(--accent);margin-right:.6rem;font-family:var(--mono);font-weight:400}
.ref{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--mute);flex:none}

/* Label-left / content-right, the overseas.be asymmetry.
   align-items:start, not center — centring short text against a tall image
   leaves a dead band underneath and is most of why the page read as empty. */
.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:1.02fr .98fr;align-items:start}
.split.text-first > :first-child{order:-1}

.lead{
  font-size:clamp(1.3rem,2.5vw,1.72rem);line-height:1.34;letter-spacing:-.012em;
  color:var(--ink);max-width:37ch;margin:0 0 1.5rem;text-wrap:balance;
}
section p{margin:0 0 1.15rem;max-width:60ch}
section p:last-child{margin-bottom:0}

/* Scope cards — image on top, copy beneath. */
.cards{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tile{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(18,18,18,.05),0 14px 30px -20px rgba(18,18,18,.34);
  display:flex;flex-direction:column;
}
.tile-body{padding:clamp(1.25rem,2.5vw,1.6rem)}
.tile h3{
  margin:0 0 .5rem;font-size:1.2rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.tile p{margin:0;color:var(--body);font-size:.98rem}
.tile .kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .6rem;
}

/* Vermilion band. Rice on Seal — never the reverse, never on ink. */
.band{
  background:var(--accent);color:var(--rice);border-radius:var(--r);
  margin:0 var(--pad);padding:clamp(2.25rem,5vw,3.5rem) clamp(1.5rem,4vw,3.25rem);
}
.band p{
  margin:0;max-width:30ch;font-weight:700;letter-spacing:-.015em;line-height:1.18;
  font-size:clamp(1.5rem,3.5vw,2.35rem);text-wrap:balance;
}

/* ---- Contact ------------------------------------------------------------- */
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.25rem);
  box-shadow:0 1px 2px rgba(18,18,18,.05),0 12px 28px -16px rgba(18,18,18,.26);
}
.card dl{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 1.75rem}
.card dl:last-child{margin-bottom:0}
.card dt{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.35rem;
}
.card dd{margin:0;color:var(--ink)}
.card dd a{color:var(--ink)}

/* Split two-tone button. Vermilion sits adjacent to ink as a solid ground,
   which is what the kit permits — never vermilion as type on ink. */
.cta{
  display:inline-flex;align-items:stretch;gap:3px;text-decoration:none;
  font-weight:700;font-size:.92rem;letter-spacing:.03em;
}
.cta span{padding:.85rem 1.4rem;border-radius:10px;color:var(--rice);background:var(--ink)}
.cta .cta-arrow{background:var(--accent);padding-inline:1.05rem}
.cta:hover .cta-arrow,.cta:focus-visible .cta-arrow{background:var(--ink)}
.cta:hover .cta-label,.cta:focus-visible .cta-label{background:var(--accent)}
.cta.on-dark span{background:var(--rice);color:var(--ink)}
.cta.on-dark .cta-arrow{background:var(--accent);color:var(--rice)}

footer{
  padding:2.5rem 0 3.5rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;color:var(--mute);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
}
footer a{color:var(--mute)}

/* ---- Form ---------------------------------------------------------------- */
.form{display:grid;gap:1.25rem;margin:0;max-width:34rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
}
.field label em{color:var(--accent);font-style:normal}
.field input,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:10px;padding:.75rem .9rem;width:100%;
}
.field input:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field textarea{resize:vertical;min-height:8rem}
.form button{
  justify-self:start;font:inherit;font-weight:700;font-size:.92rem;letter-spacing:.03em;
  background:var(--ink);color:var(--rice);border:0;border-radius:10px;
  padding:.85rem 1.75rem;cursor:pointer;
}
.form button:hover,.form button:focus-visible{background:var(--accent)}
.note{font-size:.86rem;color:var(--mute);margin:1.25rem 0 0}
/* Honeypot. Web3Forms rejects the submission when this is filled. */
.botcheck{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Narrow -------------------------------------------------------------- */
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split.text-first > :first-child{order:0}
  .nav ul{display:none}                 /* mark + Contact only; sections are one scroll away */
  .nav{padding-right:.55rem}
  .nav .brand{margin-right:auto}
  .fig-tall{height:clamp(240px,42vh,340px)}
  .sitefoot-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* ---- Phone: stack the heroes -----------------------------------------------
   The notched panel needs width to overlap a picture. Below ~700px there is
   none, and it collapses into a floating card with the image squashed above it
   and the container's corners showing behind. So stop overlapping: the .fig
   keeps the photograph in its padding-top band, the panel fills the rest edge
   to edge, and .fig's own overflow:hidden rounds the bottom corners for us. */
@media (max-width:700px){
  .hero .fig,.fig-contact{
    display:block;height:auto;min-height:0;
    padding:0;padding-top:min(46vh,320px);
  }
  .hero-copy,.contact-panel{
    width:100%;max-width:none;
    border-radius:0;box-shadow:none;
    padding:clamp(1.35rem,5.5vw,1.9rem);
  }
  .hero-copy h1{font-size:clamp(1.95rem,8.5vw,2.6rem)}
  .fig-contact{padding-top:min(34vh,240px)}
  /* The scrim would otherwise darken the panel it sits behind. */
  .scrim{bottom:auto;height:min(46vh,320px)}
}

/* ---- Motion --------------------------------------------------------------
   All CSS, no JavaScript. Everything below is inside a reduced-motion guard,
   and the scroll-driven reveals are additionally behind @supports — where the
   browser lacks scroll timelines (Firefox today) content simply renders in
   place. Nothing here is load-bearing; the page is fully readable without it. */

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* Hover feedback. Cheap, always supported, and the thing that actually makes
     a page feel handmade rather than generated. */
  .tile{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
  .tile:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(18,18,18,.05),0 22px 44px -24px rgba(18,18,18,.42)}
  .tile .fig{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
  .tile:hover .fig{transform:scale(1.04)}
  .cta span,.nav .pill,.form button{transition:background-color .22s ease}
  .nav ul a{transition:color .22s ease}
  .index a,.card dd a{transition:color .22s ease}

  /* Hero: a slow push-in once, on load. 14s, 6% — below the threshold where it
     reads as movement, above the one where it reads as dead.
     Transform only. An earlier version also animated background-size to
     `100% auto`, which combined with the default background-repeat to tile the
     photograph down a narrow phone hero — the image appeared two or three
     times. Never animate background-size on a cover background. */
  .fig-hero.has-img::before{animation:push 14s cubic-bezier(.16,.6,.35,1) forwards}
  @keyframes push{from{transform:scale(1.06)}to{transform:scale(1)}}

  /* Headline and its supporting lines rise on load, staggered. */
  .hero-copy h1{animation:rise .9s cubic-bezier(.16,.8,.3,1) both}
  .hero-copy p{animation:rise .9s cubic-bezier(.16,.8,.3,1) .12s both}
  .hero-cta{animation:rise .9s cubic-bezier(.16,.8,.3,1) .24s both}
  .nav{animation:drop .7s cubic-bezier(.16,.8,.3,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

  /* SCROLL-DRIVEN REVEALS — written, deliberately not enabled.
     ------------------------------------------------------------------------
     `animation-timeline: view()` fades each block in as it enters the viewport
     with no JavaScript, which is exactly what we want. The catch is the failure
     mode: when the timeline is inactive for any reason, `animation-fill-mode:
     both` holds the FROM keyframe — opacity 0 — and the content never appears
     at all. A blank page is a far worse outcome than no animation.

     I could not verify this in a real browser from here; headless Chrome does
     not drive scroll timelines reliably under virtual time, and the probe gave
     contradictory results. Until someone scrolls the real thing in Chrome and
     Safari, it stays off.

     To try it: delete this comment's opening and closing markers, load the page,
     and scroll the whole way down. If every section is visible, keep it. If
     anything stays blank, revert — that is the bug this guard exists for. */
  /*
  @supports (animation-timeline:view()){
    .head,.lead,.split > div > p,.tile,.card,.band p{
      animation:reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    .split .fig{
      animation:revealfig linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 65%;
    }
    @keyframes reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    @keyframes revealfig{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}
  }
  */
}