/* ==========================================================================
   Isabelle Gecils Photography
   Single stylesheet. No build step, no framework.

   Design intent: get out of the way.

   The interface is monochrome on gallery white. No coloured labels, no rules,
   no brackets, no card shadows, no gradients laid over photographs. Her work
   is already loud (Tahitian water, corps uniforms, rodeo dust), so the frame
   around it stays silent and lets the contrast do the work.

   Type is small, quiet and mostly uppercase at label size. Headings are set
   at normal width rather than expanded: a poster face competes with pictures.
   Newsreader italic appears exactly once, for a quoted human voice.

   Images run edge to edge with hairline gutters. Captions sit *below* the
   frame, never on top of it.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root{
  --paper:#FCFCFB;
  --paper-2:#F4F4F2;
  --surface:#FFFFFF;
  --rule:#E6E6E3;
  --rule-2:#CFCFCA;

  --ink:#101112;
  --ink-2:#4C4F52;
  --ink-3:#6C7075;

  /* The one warm note left in the interface. Used for the current page marker
     and focus rings, nothing decorative. Buttons are ink, not amber. */
  --accent:#8A570A;
  --accent-wash:#FBF3E4;

  --over:#0B0C0D;

  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --quote:"Newsreader",Georgia,"Times New Roman",serif;

  --gut:clamp(20px,5vw,72px);
  --max:1560px;      /* wide: the pictures want the room */
  --measure:60ch;
  --gap:6px;         /* hairline gutter between photographs */

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px;}

/* --- type ----------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-stretch:100%;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:500;}
h2{font-size:clamp(1.4rem,2.3vw,1.95rem);font-weight:500;}
h3{font-size:1.02rem;font-weight:600;letter-spacing:.005em;}
h4{font-size:.92rem;font-weight:600;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

/* The workhorse label. Grey, never coloured. */
.eyebrow{
  font-family:var(--body);
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.4rem;
}

.lede{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.62;color:var(--ink-2);max-width:46ch;}
.prose{max-width:var(--measure);}
.prose p{color:var(--ink-2);}

/* --- layout --------------------------------------------------------------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);}
.wrap--narrow{max-width:1080px;}
.section{padding-block:clamp(64px,10vw,148px);}
.section--tight{padding-block:clamp(48px,6vw,86px);}
/* the logo row sits above the dark closing band and needs clearance */
.section--clients{padding-bottom:clamp(92px,11vw,170px);}
.stack{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);}
.rule{border:0;border-top:1px solid var(--rule);margin:0;}

/* --- header --------------------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(252,252,251,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
body[data-hero] .header:not(.is-stuck){
  background:transparent;backdrop-filter:none;border-bottom-color:transparent;
}
.header__inner{
  max-width:var(--max);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

.brand{
  font-family:var(--display);font-stretch:100%;font-weight:600;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;line-height:1.2;color:var(--ink);
}
/* "Photography" sits inline after the name, same weight and tracking */
.brand small{font-size:inherit;font-weight:inherit;letter-spacing:inherit;}
@media (max-width:360px){.brand{font-size:.74rem;letter-spacing:.12em;}}

.nav{display:flex;align-items:center;gap:2px;}
.nav a,.nav__toggle{
  text-decoration:none;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);padding:9px 12px;
  transition:color .2s var(--ease);white-space:nowrap;background:none;border:0;
  font-family:var(--body);cursor:pointer;
}
.nav a:hover,.nav__toggle:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--accent);}

body[data-hero] .header:not(.is-stuck) .brand,
body[data-hero] .header:not(.is-stuck) .nav a,
body[data-hero] .header:not(.is-stuck) .nav__toggle{color:rgba(255,255,255,.86);}
body[data-hero] .header:not(.is-stuck) .brand{color:#FFF;}
body[data-hero] .header:not(.is-stuck) .nav a:hover,
body[data-hero] .header:not(.is-stuck) .nav__toggle:hover{color:#FFF;}
body[data-hero] .header:not(.is-stuck) .nav a[aria-current="page"]{color:#FFF;}
body[data-hero] .header:not(.is-stuck) .burger span{background:#FFF;}

.nav__group{position:relative;}
.nav__toggle{display:inline-flex;align-items:center;gap:6px;}
.nav__toggle svg{transition:transform .25s var(--ease);opacity:.6;}
.nav__group.is-open .nav__toggle svg{transform:rotate(180deg);}
.nav__menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:220px;
  background:var(--surface);border:1px solid var(--rule);
  padding:8px 0;display:none;flex-direction:column;
}
.nav__group.is-open .nav__menu{display:flex;}
.nav__menu a{
  text-transform:none;letter-spacing:.02em;font-size:.86rem;font-weight:500;
  padding:8px 18px;color:var(--ink-2)!important;
}
.nav__menu a:hover{color:var(--ink)!important;}
.nav__menu a[aria-current="page"]{color:var(--accent)!important;}

.burger{display:none;background:none;border:0;width:34px;height:34px;cursor:pointer;position:relative;}
.burger span{
  position:absolute;left:5px;right:5px;height:1px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:12px;}
.burger span:nth-child(2){top:17px;}
.burger span:nth-child(3){top:22px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

@media (max-width:940px){
  .burger{display:block;}
  .nav{
    position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--rule);
    padding:12px var(--gut) 26px;display:none;max-height:calc(100vh - 62px);overflow-y:auto;
  }
  .nav.is-open{display:flex;}
  body[data-hero] .header:not(.is-stuck) .nav.is-open a,
  body[data-hero] .header:not(.is-stuck) .nav.is-open .nav__toggle{color:var(--ink-2);}
  .nav a,.nav__toggle{padding:13px 0;font-size:.78rem;width:100%;text-align:left;}
  .nav__menu{position:static;display:flex;border:0;padding:0 0 8px 18px;min-width:0;}
  .nav__menu a{padding:8px 0;color:var(--ink-3)!important;}
  .nav__toggle svg{display:none;}
}

/* --- buttons: ink, not colour --------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:15px 30px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2);}
.btn--ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}
.btn-row--center{justify-content:center;}

.hero__inner .btn,.cta__inner .btn{background:#FFF;border-color:#FFF;color:var(--ink);}
.hero__inner .btn:hover,.cta__inner .btn:hover{background:transparent;color:#FFF;}
.hero__inner .btn--ghost,.cta__inner .btn--ghost{background:transparent;color:#FFF;border-color:rgba(255,255,255,.45);}
.hero__inner .btn--ghost:hover,.cta__inner .btn--ghost:hover{border-color:#FFF;}

.textlink{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--rule-2);padding-bottom:5px;
  transition:border-color .22s var(--ease),gap .22s var(--ease);
}
.textlink:hover{border-color:var(--ink);gap:14px;}

/* a <button> styled as a textlink, for the share control */
button.textlink{background:none;border:0;border-bottom:1px solid var(--rule-2);
  font-family:inherit;line-height:inherit;padding:0 0 5px;cursor:pointer;}
.linkrow{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3.2vw,44px);}

/* --- hero: a photograph, lightly captioned -------------------------------- */
.hero{position:relative;min-height:min(92vh,900px);display:flex;align-items:flex-end;overflow:hidden;background:var(--over);}
.hero--short{min-height:min(58vh,560px);}
.hero__media{position:absolute;inset:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
/* Far lighter than before; the point is to see the picture. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    /* bottom: enough to hold the caption */
    linear-gradient(to top,rgba(11,12,13,.62) 0%,rgba(11,12,13,.12) 38%,rgba(11,12,13,0) 62%),
    /* top: a thin scrim so the nav stays legible over a pale sky or a lagoon */
    linear-gradient(to bottom,rgba(11,12,13,.42) 0%,rgba(11,12,13,.12) 12%,rgba(11,12,13,0) 22%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(44px,6vw,76px);color:#FFF;}
.hero__inner .wrap{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.hero__inner .eyebrow{color:rgba(255,255,255,.75);margin-bottom:0;}
.hero__inner .lede{color:rgba(255,255,255,.88);max-width:42ch;}
.hero h1{max-width:18ch;color:#FFF;font-weight:400;letter-spacing:-.018em;}

.scrollcue{display:none;}

/* --- hero slideshow -------------------------------------------------------
   Slides are stacked and cross-faded; only .is-active is painted. The media
   layer's ::after scrim sits above them because it comes last in the box. */
.hero__media--slides img{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.1s var(--ease);
  will-change:opacity;
}
.hero__media--slides img.is-active{opacity:1;}

.hero__controls{
  position:absolute;z-index:3;right:clamp(16px,4vw,40px);bottom:clamp(18px,3vw,34px);
  display:flex;align-items:center;gap:14px;
}
.hero__arrow{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.4);border-radius:50%;
  background:rgba(11,12,13,.22);color:#FFF;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.hero__arrow:hover{background:rgba(11,12,13,.5);border-color:#FFF;}
.hero__arrow:focus-visible{outline:2px solid #FFF;outline-offset:3px;}

.hero__dots{display:flex;align-items:center;gap:8px;}
.hero__dot{
  width:7px;height:7px;padding:0;flex:0 0 auto;border:0;border-radius:50%;
  background:rgba(255,255,255,.42);cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.hero__dot:hover{background:rgba(255,255,255,.75);}
.hero__dot.is-active{background:#FFF;transform:scale(1.45);}
.hero__dot:focus-visible{outline:2px solid #FFF;outline-offset:3px;}

@media (max-width:600px){
  .hero__controls{left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);justify-content:center;}
  .hero__arrow{width:36px;height:36px;}
  /* clear the controls so they never sit on top of the buttons */
  .hero__media--slides ~ .hero__inner{padding-bottom:clamp(76px,17vw,100px);}
}
@media (prefers-reduced-motion:reduce){
  .hero__media--slides img{transition:none;}
}

/* --- featured work: the photo books --------------------------------------
   Four across, Paul-Nicklen-style: cover, title in caps, "More Information". */
.books{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px);}
@media (max-width:1040px){.books{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.books{grid-template-columns:1fr;}}

.book{display:block;text-decoration:none;color:inherit;}
/* 8:7, the proportion of the covers themselves, so none of a title is cropped */
.book__img{display:block;overflow:hidden;aspect-ratio:8/7;background:var(--paper-2);}
.book__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.book:hover .book__img img{transform:scale(1.03);}
.book h3{
  margin:18px 0 0;
  font-size:clamp(.82rem,.95vw,.92rem);font-weight:600;line-height:1.35;
  text-transform:uppercase;letter-spacing:.08em;
}
.book__note{
  display:block;margin-top:7px;
  font-size:.8rem;line-height:1.5;color:var(--ink-3);
}
.book__more{
  display:inline-block;margin-top:12px;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--rule-2);padding-bottom:3px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.book:hover .book__more{color:var(--ink);border-color:var(--ink);}

/* --- category tiles: caption BELOW the frame ------------------------------ */
/* auto-fit so the row stays full whatever the category count */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);}
@media (max-width:600px){.tiles{grid-template-columns:1fr;}}

/* Featured Work: fixed columns so a single tile stays tile-sized (one third)
   rather than stretching to full width the way an auto-fit grid would. */
.tiles--set3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.tiles--set3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.tiles--set3{grid-template-columns:1fr;}}

.tile{display:block;text-decoration:none;color:inherit;}
.tile__img{display:block;overflow:hidden;aspect-ratio:4/5;background:var(--paper-2);}
@media (max-width:600px){.tile__img{aspect-ratio:3/2;}}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.tile:hover .tile__img img{transform:scale(1.03);}
.tile__body{display:block;padding:16px 2px 4px;}
.tile__body h3{
  font-size:clamp(.96rem,1.15vw,1.06rem);font-weight:600;letter-spacing:-.005em;
  line-height:1.3;text-transform:none;
}
.tile__note{
  display:block;margin-top:8px;
  font-size:.84rem;line-height:1.5;color:var(--ink-3);
}

/* --- photo strip: the full-width row that opens the About page ------------ */
.strip{padding-top:clamp(26px,3.5vw,52px);}
.strip__row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);
}
.strip__row img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
@media (max-width:720px){
  .strip__row{grid-template-columns:1fr;}
}

/* --- a centred block of text, used for the partnerships list -------------- */
.centered{text-align:center;max-width:760px;margin-inline:auto;}
.accolades--center{margin-inline:auto;}
.accolades--center li{text-align:center;}

/* --- gallery: hairline gutters, no frames --------------------------------- */
.gallery{column-count:3;column-gap:var(--gap);}
@media (max-width:1000px){.gallery{column-count:2;}}
@media (max-width:620px){.gallery{column-count:1;}}

.gallery--full{margin-inline:calc(var(--gut) * -1);}

.shot{
  margin:0 0 var(--gap);position:relative;overflow:hidden;background:var(--paper-2);
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;display:block;
}
.shot img{width:100%;height:auto;}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 18px 14px;
  font-size:.72rem;letter-spacing:.06em;color:#FFF;
  background:linear-gradient(to top,rgba(11,12,13,.7),transparent);
  opacity:0;transition:opacity .35s var(--ease);
}
.shot:hover figcaption{opacity:1;}
.shot figcaption:empty{display:none;}

/* --- split ---------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,96px);align-items:start;}
.split--portrait{grid-template-columns:4fr 5fr;}
@media (max-width:880px){.split,.split--portrait{grid-template-columns:1fr;}}
.split__media img{width:100%;}

/* --- quote: the one typographic flourish ---------------------------------- */
.quote{
  font-family:var(--quote);font-style:italic;font-weight:300;
  font-size:clamp(1.18rem,2.15vw,1.62rem);line-height:1.42;color:var(--ink);
  max-width:26ch;margin:0;
}
.quote--wide{max-width:32ch;}
.attrib{
  margin-top:24px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.attrib strong{color:var(--ink-2);font-weight:600;}

/* --- season band: type only, no colour ------------------------------------ */
.season{border-block:1px solid var(--rule);}
.season__grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  border-bottom:1px solid var(--rule);margin-top:40px;
}
.season__m{
  padding:0 4px 10px;text-align:left;
  font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.season__track{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--rule);}
.season__span{
  background:var(--paper);padding:18px 12px 20px;min-height:88px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:5px;
}
.season__span b{
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--ink);
}
.season__span span{font-size:.75rem;line-height:1.45;color:var(--ink-3);}
/* Only the away windows are marked, and only with a hairline rule on top. */
.season__span--fp,.season__span--tour{box-shadow:inset 0 2px 0 var(--ink);}
@media (max-width:860px){
  .season__grid{display:none;}
  .season__track{grid-template-columns:1fr;gap:1px;margin-top:30px;}
  .season__span{grid-column:auto!important;min-height:0;}
}

/* --- reviews --------------------------------------------------------------- */
.reviews{text-align:center;display:flex;flex-direction:column;align-items:center;}
.reviews .quote{margin-inline:auto;}

/* The quotes share one grid cell, so the block is as tall as the longest of
   them and cross-fading never shifts the page. */
.reviews__track{display:grid;width:100%;}
.reviews__track > .quote{
  grid-area:1/1;opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease);
}
.reviews__track > .quote.is-active{opacity:1;pointer-events:auto;}
.quote--review{max-width:44ch;}

.reviews__dots{display:flex;align-items:center;gap:9px;margin-top:clamp(26px,3vw,40px);}
.reviews__dot{
  width:7px;height:7px;padding:0;flex:0 0 auto;border:0;border-radius:50%;
  background:var(--rule-2);cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.reviews__dot:hover{background:var(--ink-3);}
.reviews__dot.is-active{background:var(--ink);transform:scale(1.4);}
.reviews__dot:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .reviews__track > .quote{transition:none;}
}

/* --- client strip ----------------------------------------------------------
   Logos span the full width with even columns. auto-fit makes the row reflow
   as the viewport changes (five across on desktop, fewer on tablet/phone)
   and the tiles centre within their columns. Add or remove marks freely. */
.clients{
  display:grid;
  /* pinned to five so a sixth logo starts a new row at the same spacing
     rather than squeezing nine marks into one line */
  grid-template-columns:repeat(5,1fr);
  gap:clamp(16px,2.5vw,40px) clamp(16px,2.5vw,40px);
  align-items:center;
}
.clients div{
  aspect-ratio:1/1;width:100%;max-width:150px;margin-inline:auto;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
}
.clients img{
  width:100%;height:100%;object-fit:cover;max-height:none;
  opacity:.92;transition:opacity .3s var(--ease);
}
.clients div:hover img{opacity:1;}

/* --- footer logo ---------------------------------------------------------- */
.footer__logo{display:inline-block;max-width:210px;}
.footer__logo img{width:100%;height:auto;}

/* --- cards: hairline rules, no boxes -------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(28px,4vw,64px);}
.card{
  border-top:1px solid var(--ink);padding-top:22px;
  display:flex;flex-direction:column;gap:10px;background:none;
}
.card h3{font-size:1.15rem;font-weight:500;letter-spacing:-.01em;text-transform:none;}
.card p{font-size:.9rem;color:var(--ink-2);margin:0;}
.card .eyebrow{margin-bottom:.2rem;}
.card__price{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--ink);letter-spacing:-.01em;}
.card__note{font-size:.78rem;color:var(--ink-3);}
.card ul{margin:6px 0 0;padding:0;list-style:none;}
.card li{
  font-size:.85rem;color:var(--ink-3);padding:7px 0;border-top:1px solid var(--rule);
}

/* --- placeholder flags (temporary; delete the class when content lands) --- */
.todo{
  display:inline-block;font-family:var(--body);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border:1px solid currentColor;padding:2px 7px;vertical-align:middle;
}
.todo--block{
  display:block;background:var(--accent-wash);border:0;border-left:2px solid var(--accent);
  color:var(--accent);padding:14px 18px;letter-spacing:.01em;
  font-size:.79rem;font-weight:500;text-transform:none;line-height:1.6;
}
.todo--block code{background:rgba(138,87,10,.09);padding:.08em .34em;}

/* --- CTA band ------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--over);}
.cta__media{position:absolute;inset:0;}
.cta__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);}
.cta__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,12,13,.7),rgba(11,12,13,.22));}
.cta__inner{position:relative;z-index:2;padding-block:clamp(80px,10vw,150px);color:#FFF;}
.cta__inner h2{color:#FFF;font-weight:400;}
.cta__inner .lede{color:rgba(255,255,255,.88);}
.cta__inner .eyebrow{color:rgba(255,255,255,.7);}

/* --- forms ---------------------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:640px;}
@media (max-width:640px){.form{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;}
.field--full{grid-column:1/-1;}
.field label{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:.95rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule-2);border-radius:0;
  padding:9px 0;width:100%;transition:border-color .2s var(--ease);
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink);}
.field input::placeholder,.field textarea::placeholder{color:#A6ABAF;}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 11px) 55%,calc(100% - 6px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field--hp{position:absolute;left:-9999px;}

.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;}
.contact-list dt{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;}
.contact-list dd{margin:0;font-size:.98rem;color:var(--ink-2);}
.contact-list a{text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:1px;transition:border-color .2s var(--ease);}
.contact-list a:hover{border-color:var(--ink);}

/* --- footer --------------------------------------------------------------- */
.footer{border-top:1px solid var(--rule);padding-block:clamp(52px,7vw,86px) 32px;}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,56px);}
@media (max-width:880px){.footer__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr;}}
.footer h4{
  font-family:var(--body);font-size:.64rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer a{text-decoration:none;font-size:.86rem;color:var(--ink-2);transition:color .2s var(--ease);}
.footer a:hover{color:var(--ink);}
.footer__brand p{font-size:.86rem;color:var(--ink-3);max-width:32ch;margin-top:18px;}
.footer__base{
  margin-top:clamp(40px,6vw,68px);padding-top:26px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font-size:.74rem;color:var(--ink-3);letter-spacing:.02em;
}

/* --- reveal --------------------------------------------------------------- */
.reveal{opacity:0;transition:opacity .9s var(--ease);}
.reveal.is-in{opacity:1;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;}}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 20px;font-weight:600;
  font-size:.8rem;text-decoration:none;
}
.skip:focus{left:12px;top:12px;}

/* --- social buttons --------------------------------------------------------
   A horizontal row of icon-only buttons under the contact block, after the
   pattern on the Upshift footer, but outlined rather than filled, so they
   stay quiet on a light ground. */
.sbtns{display:flex;gap:10px;margin-top:20px;}
.sbtn{
  width:40px;height:40px;flex:0 0 auto;border:1px solid var(--rule-2);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.sbtn:hover{border-color:var(--ink);color:var(--ink);}
.sbtn .sico{width:17px;height:17px;}

/* --- contact form, centred --------------------------------------------- */
/* reCAPTCHA renders a fixed 304px widget; keep it from forcing the grid
   wider than the form on narrow screens. */
.recaptcha{overflow-x:auto;}
.recaptcha > div{max-width:100%;}

.formwrap{max-width:640px;margin-inline:auto;width:100%;}
.formwrap .form{max-width:none;}

/* --- thank you ---------------------------------------------------------- */
.thanks{max-width:900px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(30px,4vw,48px);}
.thanks h1{font-size:clamp(2rem,4vw,3rem);font-weight:400;}
.thanks__shot{margin:0;width:100%;}
.thanks__shot img{width:100%;height:auto;}

/* --- accolades ------------------------------------------------------------
   A credits list: one title per rule, no prose. */
.accolades{list-style:none;margin:0;padding:0;max-width:760px;}
.accolades li{
  font-family:var(--display);font-weight:500;letter-spacing:-.005em;color:var(--ink);
  font-size:clamp(1.02rem,1.5vw,1.26rem);line-height:1.35;
  padding:20px 0;border-top:1px solid var(--rule);
}
.accolades li:last-child{border-bottom:1px solid var(--rule);}
.accolades__open{opacity:.65;}
/* body copy under an accolade line, for the class descriptions */
.accolades__note{
  display:block;margin-top:10px;max-width:52ch;
  font-family:var(--body);font-weight:400;letter-spacing:0;
  font-size:.88rem;line-height:1.62;color:var(--ink-3);
}

/* Visually hidden, still read by screen readers and parsed by crawlers. */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (max-width:760px){
  .clients{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:420px){
  .clients{grid-template-columns:repeat(2,1fr);}
}