/* =========================================================
   THE SILVER ASH
   Light porcelain page, deep-ink type, metal treated as metal.
   The hero is the one dark moment — a photograph, not a block.
   ========================================================= */

:root{
  /* paper */
  --paper:   #F2F4F6;
  --paper-2: #E8EBEF;
  --card:    #FFFFFF;

  /* ink */
  --ink:   #13171B;
  --body-tx:#3E4650;
  --muted: #5C656F;   /* AA on paper for body copy */
  --faint: #6E7680;   /* small caps + labels */

  --line:   rgba(19,23,27,.13);
  --line-2: rgba(19,23,27,.07);

  /* glass, over paper */
  --glass:      rgba(255,255,255,.66);
  --glass-soft: rgba(255,255,255,.34);
  --glass-line: rgba(255,255,255,.85);
  --glass-edge: rgba(19,23,27,.08);

  --blue:    #1F6FEB;
  --blue-dp: #0B4FC4;

  /* silver has to darken to survive on paper */
  --metal: linear-gradient(
    100deg,
    #6B7683 0%, #B6C0CB 16%, #58626F 34%,
    #9AA4B0 52%, #4B5462 70%, #A9B3BF 86%, #66707D 100%
  );

  --r-tile: 18px;
  --r-img:  12px;
  --r-btn:  6px;

  --display:"Cinzel", "Trajan Pro", Georgia, serif;
  --body:   "Manrope", "Helvetica Neue", Arial, sans-serif;

  --gut:  clamp(1.5rem, 5vw, 5.5rem);
  --maxw: 1180px;
  --slow: cubic-bezier(.16,.84,.28,1);
}

/* anything sitting on photography flips to light type */
.on-dark{
  --ink:    #FFFFFF;
  --body-tx:#D6DCE3;
  --muted:  #B4BCC5;
  --faint:  #98A0A9;
  --line:   rgba(255,255,255,.18);
  --line-2: rgba(255,255,255,.10);
  --metal: linear-gradient(
    100deg,
    #8E99A6 0%, #FFFFFF 18%, #B4BFCB 34%,
    #FFFFFF 52%, #939EAB 70%, #F2F6FA 86%, #A7B2BE 100%
  );
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--body-tx);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .16vw,1.05rem);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--ink); color:var(--paper); }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

/* grain, multiplied into the paper */
.grain{
  position:fixed;
  inset:0;
  z-index:900;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   TYPE
   ========================================================= */

.micro{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 2.25rem;
}

.h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,1.1rem + 3.1vw,3.5rem);
  line-height:1.16;
  letter-spacing:.004em;
  color:var(--ink);
  margin:0 0 1.75rem;
}
.h2--center{ text-align:center; }

.lead{
  max-width:54ch;
  color:var(--muted);
  font-size:1.06em;
  margin:0 0 2.5rem;
}
.lead--center{ margin-left:auto; margin-right:auto; text-align:center; }

.fine{
  font-size:.8rem;
  line-height:1.9;
  color:var(--muted);
  max-width:60ch;
  margin:0;
}
.fine--center{ margin:2.5rem auto 0; text-align:center; }

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--body);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.15rem 2.4rem;
  border:1px solid transparent;
  border-radius:var(--r-btn);
  cursor:pointer;
  transition:background .45s var(--slow), color .45s var(--slow),
             border-color .45s var(--slow), transform .45s var(--slow);
}

.btn--solid{
  background:var(--ink);
  color:#fff;
}
.btn--solid:hover{ background:#000; transform:translateY(-2px); }

.btn--line{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn--line:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* on photography the solid button inverts.
   Literal ink here — inside .on-dark, --ink is flipped to white. */
.on-dark .btn--solid{ background:#fff; color:#13171B; }
.on-dark .btn--solid:hover{ background:#E6EAEE; }
.on-dark .btn--line{ color:#fff; border-color:rgba(255,255,255,.34); }
.on-dark .btn--line:hover{ border-color:#fff; }

/* =========================================================
   AGE GATE
   ========================================================= */

.gate{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:1.5rem;
  background:var(--paper);
}
.gate.is-gone{ display:none; }

.gate__panel{
  width:min(460px,100%);
  text-align:center;
  animation:fade-up 1s var(--slow) both;
}

@keyframes fade-up{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

.gate__logo{ width:min(210px,52vw); height:auto; margin:0 auto 2.25rem; }

.gate__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.5vw,2rem);
  line-height:1.25;
  color:var(--ink);
  margin:0 0 1.2rem;
}

.gate__body{
  color:var(--muted);
  max-width:34ch;
  margin:0 auto 2.75rem;
  font-size:.95rem;
}

.gate__actions{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.gate__actions .btn{ flex:1 1 auto; min-width:150px; }

.gate__fine{
  font-size:.68rem;
  letter-spacing:.05em;
  color:var(--faint);
  margin:2.5rem 0 0;
}

.gate__state--hidden{ display:none; }

/* =========================================================
   PROGRESS + HEADER
   ========================================================= */

.topbar{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:60;
  background:transparent;
}
.topbar__fill{
  height:100%; width:0%;
  background:var(--ink);
  transition:width .2s linear;
}

.head{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:1.6rem var(--gut);
  transition:padding .5s var(--slow), background .5s var(--slow),
             border-color .5s var(--slow);
  border-bottom:1px solid transparent;
}
.head__inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
/* Over the hero the header is bare, light type on the photograph.
   Once past it, the bar detaches into a floating glass capsule rather
   than becoming a full-width band of a different color. */
.head.is-stuck{
  padding-top:.7rem;
  padding-bottom:.7rem;
  background:transparent;
  border-bottom-color:transparent;
}
.head__inner{
  border:1px solid transparent;
  border-radius:999px;
  padding:.5rem .75rem;
  transition:background .55s var(--slow), border-color .55s var(--slow),
             box-shadow .55s var(--slow), padding .55s var(--slow),
             max-width .55s var(--slow), backdrop-filter .55s var(--slow);
}
.head.is-stuck .head__inner{
  max-width:min(var(--maxw), 100%);
  padding:.55rem .75rem .55rem 1.35rem;
  background:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 12px 38px -20px rgba(19,23,27,.4),
             0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(22px) saturate(1.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);
}

.mark{ display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; }
.mark img{ width:19px; height:auto; }
.mark__name{
  font-family:var(--display);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  transition:color .5s var(--slow);
}
.head.is-stuck .mark__name{ color:var(--ink); }

.nav{ display:none; gap:2.6rem; }
.nav a{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(255,255,255,.8);
  transition:color .5s var(--slow);
}
.nav a:hover{ color:#fff; }
.head.is-stuck .nav a{ color:var(--muted); }
.head.is-stuck .nav a:hover{ color:var(--ink); }

/* 44x44 minimum tap target — the bars are 22px, the button is not */
.burger{
  display:grid;
  place-content:center;
  gap:6px;
  width:44px; height:44px;
  margin-right:-10px;
  background:none; border:0; padding:0;
  cursor:pointer;
}
.burger span{
  display:block; width:22px; height:1.5px;
  background:#fff;
  transition:transform .4s var(--slow), background .5s var(--slow);
}
.head.is-stuck .burger span{ background:var(--ink); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

@media (min-width:960px){
  .nav{ display:flex; }
  .burger{ display:none; }
}

.nav-m{
  position:fixed;
  top:0; left:0; right:0;
  z-index:45;
  display:grid;
  padding:6rem var(--gut) 2.5rem;
  background:var(--paper);
  border-bottom:1px solid var(--line-2);
  transform:translateY(-100%);
  transition:transform .6s var(--slow);
}
.nav-m.is-open{ transform:none; }
.nav-m a{
  font-family:var(--display);
  font-size:1.35rem;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--ink);
  padding:.85rem 0;
  border-bottom:1px solid var(--line-2);
}
.nav-m a:last-child{ border-bottom:0; }

@media (min-width:960px){ .nav-m{ display:none; } }

/* =========================================================
   HERO — the one dark moment
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:11rem 0 7rem;
  overflow:hidden;
  isolation:isolate;
  background:#0C0F12;
}

.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:62% 50%;
  filter:grayscale(.62) contrast(1.1) brightness(.66);
  transform:scale(1.08);
  animation:drift 30s var(--slow) infinite alternate;
}
@keyframes drift{
  from{ transform:scale(1.08) translate3d(0,0,0); }
  to  { transform:scale(1.16) translate3d(-2%,-1.5%,0); }
}

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(10,13,16,.94) 4%, rgba(10,13,16,.82) 36%, rgba(10,13,16,.4) 70%, rgba(10,13,16,.5) 100%),
    linear-gradient(180deg, rgba(10,13,16,.7) 0%, transparent 24%, transparent 68%, var(--paper) 100%);
}

/* A bright photograph can't carry white type under the standard veil.
   This grades the image down hard and deepens the scrim where the copy sits. */
.hero--bright .hero__media img{
  filter:grayscale(.82) contrast(1.22) brightness(.32);
}
.hero--bright .hero__veil{
  background:
    linear-gradient(96deg, rgba(8,10,13,.96) 0%, rgba(8,10,13,.9) 40%, rgba(8,10,13,.66) 74%, rgba(8,10,13,.72) 100%),
    linear-gradient(180deg, rgba(8,10,13,.8) 0%, transparent 26%, transparent 62%, var(--paper) 100%);
}

.hero__inner{ position:relative; width:100%; }

.hero__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem,1rem + 5.6vw,5.2rem);
  line-height:1.1;
  color:#fff;
  margin:0 0 2.5rem;
}
.hero__title .line{ display:block; }
.hero__title .line--lit{
  background:var(--metal);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:sheen 13s var(--slow) infinite;
}
@keyframes sheen{
  0%,100%{ background-position:0% 0; }
  50%    { background-position:100% 0; }
}

.hero__lead{ max-width:48ch; color:var(--body-tx); margin:0 0 3rem; }
.hero__act{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* =========================================================
   STATEMENT
   ========================================================= */

.statement{ padding:clamp(7rem,17vw,15rem) 0; }
.statement__text{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,.9rem + 2.6vw,3rem);
  line-height:1.34;
  color:var(--faint);
  margin:0;
  max-width:22ch;
}
.statement__text .line{ display:block; }
.statement__text .line:last-child{ color:var(--ink); }

/* =========================================================
   QUALITY — bento of three checks
   ========================================================= */

.quality{ padding:clamp(4rem,9vw,7rem) 0; }
.quality .lead{ margin-bottom:clamp(2.5rem,5vw,3.5rem); }

.bento{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .bento{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  .bento{ grid-template-columns:repeat(4,1fr); }
  .tile--lab   { grid-column:span 2; }
  .tile--media { grid-column:span 2; grid-row:span 2; }
  .tile--ash   { grid-column:span 1; }
  .tile--palate{ grid-column:span 1; }
  .tile--note  { grid-column:span 4; }
}

.tile{
  position:relative;
  margin:0;
  padding:1.9rem;
  border-radius:var(--r-tile);
  background:linear-gradient(160deg,var(--glass),var(--glass-soft));
  border:1px solid var(--glass-edge);
  box-shadow:0 1px 0 var(--glass-line) inset, 0 18px 40px -30px rgba(19,23,27,.35);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  overflow:hidden;
  transition:transform .6s var(--slow), box-shadow .6s var(--slow);
}
.tile:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 0 var(--glass-line) inset, 0 26px 54px -30px rgba(19,23,27,.45);
}

.tile__k{
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 1rem;
}
.tile__t{
  font-family:var(--display);
  font-weight:400;
  font-size:1.2rem;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 .7rem;
}
.tile__b{
  margin:0;
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted);
}
.tile__b a{ color:var(--blue); text-decoration:none; border-bottom:1px solid rgba(31,111,235,.3); }
.tile__b a:hover{ border-bottom-color:var(--blue); }

.tile--media{ padding:0; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.tile--media img{
  width:100%; height:100%;
  min-height:260px;
  object-fit:cover;
  border-radius:var(--r-tile);
  filter:grayscale(.25) contrast(1.05);
}

.panelist{
  list-style:none;
  margin:1.25rem 0 0;
  padding:0;
  display:grid;
  gap:.5rem;
}
@media (min-width:520px){ .panelist{ grid-template-columns:1fr 1fr; } }
.panelist li{
  position:relative;
  padding-left:1.1rem;
  font-size:.85rem;
  line-height:1.6;
  color:var(--body-tx);
}
.panelist li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--blue);
}

.tile__chip{
  display:block;
  width:100%;
  height:56px;
  border-radius:10px;
  margin-bottom:1.15rem;
}
.tile__chip--pale{
  background:
    repeating-linear-gradient(168deg, rgba(255,255,255,.5) 0 3px, rgba(19,23,27,.05) 3px 6px),
    linear-gradient(140deg,#D9DEE4,#FFFFFF);
  box-shadow:inset 0 0 0 1px rgba(19,23,27,.08);
}
.tile__chip--palate{
  background:linear-gradient(140deg,#1F6FEB,#0B2F86);
  box-shadow:0 8px 20px -10px rgba(31,111,235,.6);
}

.tile--note{
  background:none;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:1rem 0 0;
}
.tile--note:hover{ transform:none; box-shadow:none; }

/* =========================================================
   VALUE CHAIN — the integrated span, stated once
   ========================================================= */

.chain{
  list-style:none;
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem 1.1rem;
  border-top:1px solid var(--line-2);
  padding-top:1.75rem;
}
.chain li{
  font-family:var(--display);
  font-size:clamp(.82rem,.75rem + .3vw,1rem);
  letter-spacing:.06em;
  color:var(--ink);
  white-space:nowrap;
}
.chain li::after{
  content:"→";
  margin-left:1.1rem;
  color:var(--faint);
  font-family:var(--body);
}
.chain li:last-child::after{ content:""; margin:0; }

/* =========================================================
   CAPABILITY SUMMARY — a routing list, not the full index
   ========================================================= */

.caps{
  list-style:none;
  margin:0 0 2.5rem;
  padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--line-2);
}
@media (min-width:720px){ .caps{ grid-template-columns:1fr 1fr; column-gap:3rem; } }

.caps li{
  padding:.85rem 0;
  border-bottom:1px solid var(--line-2);
  font-family:var(--display);
  font-size:clamp(.95rem,.88rem + .35vw,1.15rem);
  letter-spacing:.02em;
  color:var(--body-tx);
}

/* =========================================================
   FOUNDER
   ========================================================= */

.founder{ padding:clamp(4rem,9vw,7rem) 0; }

/* Portrait and intro only. The credential tiles moved out to full width,
   so the two columns are close in height and the portrait can stretch to
   match exactly — no dead space beside it. */
.founder__top{
  display:grid;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:stretch;
}
@media (min-width:940px){
  .founder__top{ grid-template-columns:.68fr 1fr; }
}

.founder__portrait{
  margin:0;
  border-radius:var(--r-tile);
  overflow:hidden;
  position:relative;
  min-height:clamp(340px,46vw,520px);
  height:100%;
  /* more tone than a plain glass tile, so an empty slot still reads
     as a deliberate frame rather than a gap in the page */
  background:linear-gradient(160deg,#FFFFFF,#DFE4EA);
  border:1px solid rgba(19,23,27,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 24px 54px -32px rgba(19,23,27,.5);
  display:grid;
  place-items:center;
}
.founder__portrait img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.founder__slot{
  display:grid;
  justify-items:center;
  gap:1rem;
  text-align:center;
  padding:2rem;
}
.founder__slot img{ position:static; width:36px; height:auto; opacity:.45; }
.founder__slot span{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--faint);
}

.founder__name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem);
  letter-spacing:.03em;
  color:var(--ink);
  margin:0 0 .4rem;
}
.founder__role{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 1.75rem;
}
.founder__bio{ color:var(--muted); max-width:56ch; margin:0 0 1.25rem; }

.creds{ display:grid; gap:12px; margin-top:clamp(2.5rem,5vw,3.5rem); }
@media (min-width:640px){ .creds{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .creds{ grid-template-columns:repeat(4,1fr); } }

/* =========================================================
   PARTNERS
   ========================================================= */

.partners{ padding:clamp(6rem,14vw,12rem) 0; text-align:center; }
.partners .micro{ text-align:center; }

.marquee{
  margin:clamp(3.5rem,7vw,5.5rem) 0 0;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{
  display:flex;
  align-items:center;
  gap:2.5rem;
  width:max-content;
  animation:slide 46s linear infinite;
}
.marquee__track span{
  font-family:var(--display);
  font-size:clamp(1.1rem,.8rem + 1.3vw,2rem);
  letter-spacing:.08em;
  color:var(--faint);
  white-space:nowrap;
  transition:color .5s var(--slow);
}
.marquee__track i{ color:var(--line); font-style:normal; }
.marquee:hover .marquee__track span{ color:var(--body-tx); }

@keyframes slide{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* =========================================================
   WORK
   ========================================================= */

.work{ padding:clamp(4rem,9vw,7rem) 0 clamp(6rem,12vw,10rem); position:relative; }
.work__head{ margin-bottom:clamp(3rem,6vw,5rem); }

.work__grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); }
@media (min-width:940px){
  .work__grid{ grid-template-columns:1fr .58fr; align-items:start; }
}

.index{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }

.row{ border-bottom:1px solid var(--line-2); position:relative; }
.row::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--slow);
}
.row.is-open::before{ transform:scaleX(1); }

.row__btn{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:.4rem 2rem;
  align-items:center;
  background:none;
  border:0;
  text-align:left;
  font:inherit;
  color:inherit;
  padding:1.8rem 0;
  cursor:pointer;
  transition:padding-left .55s var(--slow);
}
@media (min-width:940px){
  .row__btn{ grid-template-columns:minmax(13rem,1.4fr) 1fr auto; gap:2rem; align-items:baseline; }
  /* hover only — an open row must not sit indented against the others,
     which made the default-open first service look misaligned */
  .row__btn:hover{ padding-left:1rem; }
}

.row__t{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.15rem,.95rem + .8vw,1.6rem);
  line-height:1.25;
  color:var(--body-tx);
  transition:color .5s var(--slow);
}
.row__btn:hover .row__t, .row.is-open .row__t{ color:var(--ink); }

.row__d{
  font-size:.88rem;
  line-height:1.7;
  color:var(--faint);
  max-width:44ch;
  transition:color .5s var(--slow);
}
.row__btn:hover .row__d, .row.is-open .row__d{ color:var(--muted); }

.row__ind{
  position:relative;
  width:13px; height:13px;
  justify-self:end;
  align-self:center;
  grid-row:1;
  grid-column:2;
}
@media (min-width:940px){ .row__ind{ grid-column:3; } }
.row__ind::before,
.row__ind::after{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:13px; height:1px;
  background:var(--faint);
  transition:transform .55s var(--slow), background .5s var(--slow);
}
.row__ind::after{ transform:rotate(90deg); }
.row.is-open .row__ind::before,
.row.is-open .row__ind::after{ background:var(--ink); }
.row.is-open .row__ind::after{ transform:rotate(0deg); }

.row__media{
  margin:0;
  overflow:hidden;
  border-radius:var(--r-img);
  max-height:0;
  opacity:0;
  transition:max-height .7s var(--slow), opacity .55s var(--slow), margin .7s var(--slow);
}
.row.is-open .row__media{ max-height:60vh; opacity:1; margin:0 0 1.9rem; }
.row__media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:grayscale(.25) contrast(1.05);
  /* the picture fades and settles in rather than appearing with the box */
  opacity:0;
  transform:scale(1.05);
  transition:opacity .95s var(--slow) .1s, transform 1.5s var(--slow);
}
.row.is-open .row__media img{ opacity:1; transform:scale(1); }
@media (min-width:940px){ .row__media{ display:none; } }

.panel{ display:none; }
@media (min-width:940px){
  .panel{ display:block; position:sticky; top:7.5rem; }
}
.panel__in{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--r-img);
  background:var(--paper-2);
  box-shadow:0 22px 50px -34px rgba(19,23,27,.5);
}
.panel__img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  filter:grayscale(.25) contrast(1.05);
  transition:opacity 1s var(--slow), transform 1.9s var(--slow);
}
.panel__img.is-vis{ opacity:1; transform:scale(1); }

/* =========================================================
   CONTACT
   ========================================================= */

.contact{ padding:clamp(5rem,11vw,9rem) 0; border-top:1px solid var(--line-2); }

.contact__grid{ display:grid; gap:clamp(3rem,7vw,6rem); align-items:start; }
@media (min-width:940px){ .contact__grid{ grid-template-columns:.9fr 1.1fr; } }

.direct a{
  font-family:var(--display);
  font-size:clamp(1.05rem,.9rem + .7vw,1.4rem);
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:.3rem;
  transition:border-color .5s var(--slow);
}
.direct a:hover{ border-bottom-color:var(--ink); }

.form{ display:grid; gap:2rem; }
@media (min-width:640px){
  .form{ grid-template-columns:1fr 1fr; }
  .f--wide{ grid-column:1 / -1; }
}

.f{ display:grid; gap:.7rem; }
.f label{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
}
.f input,
.f select,
.f textarea{
  font-family:var(--body);
  /* 16px minimum — anything smaller makes iOS Safari zoom the page on focus */
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:.7rem 0;
  width:100%;
  transition:border-color .5s var(--slow);
}
.f textarea{ resize:vertical; min-height:100px; }
.f input:focus, .f select:focus, .f textarea:focus{ border-bottom-color:var(--ink); outline:none; }

.f select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(1.15em), calc(100% - 7px) calc(1.15em);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2rem;
}

.form .f--wide .btn{ justify-self:start; }

.f input.is-bad, .f textarea.is-bad{ border-bottom-color:#C4441B; }

.note{
  font-size:.82rem;
  line-height:1.75;
  color:var(--muted);
  margin:1.25rem 0 0;
  min-height:1.2em;
}
.note.is-bad{ color:#C4441B; }
.note.is-good{ color:var(--blue); }

/* =========================================================
   FOOTER
   ========================================================= */

.foot{
  padding:clamp(3.5rem,7vw,5rem) 0 3rem;
  border-top:1px solid var(--line-2);
  background:var(--paper-2);
}
.foot__top{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items:center;
  justify-content:space-between;
  margin-bottom:3.5rem;
}
.foot .mark__name{ color:var(--ink); }
.mark--foot .mark__name{ font-size:.74rem; }

.foot__nav{ display:flex; flex-wrap:wrap; gap:2rem; }
.foot__nav a{
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  transition:color .4s var(--slow);
}
.foot__nav a:hover{ color:var(--ink); }

.foot__legal{ padding-top:2.5rem; border-top:1px solid var(--line-2); }
.foot__legal p{
  font-size:.72rem;
  line-height:2;
  color:var(--muted);
  max-width:82ch;
  margin:0 0 1rem;
}
.foot__c{ color:var(--muted); margin-bottom:0; }

/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1.2s var(--slow), transform 1.2s var(--slow);
  transition-delay:calc(var(--d,0) * 110ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   NARROW
   ========================================================= */

@media (max-width:560px){
  .hero__act{ display:grid; }
  .hero__act .btn{ width:100%; }
  .gate__actions .btn{ min-width:0; width:100%; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__media img{ transform:scale(1.08); }
  .marquee__track{ animation:none; }
}

/* =========================================================
   POWERED BY — capability groups
   Three stages of a brand's life, three cards each. Text-only
   cards on purpose: nine photographs here would read as a
   catalogue, and the page is about judgment, not inventory.
   ========================================================= */

.group{ padding:clamp(3.5rem,8vw,6rem) 0; }
.group + .group{ border-top:1px solid var(--line-2); }

.group__n{
  display:block;
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.26em;
  color:var(--faint);
  margin:0 0 .9rem;
}

.trio{ display:grid; gap:12px; margin-top:clamp(2.25rem,5vw,3rem); }
@media (min-width:640px){  .trio{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .trio{ grid-template-columns:repeat(3,1fr); } }

/* the two capabilities that get their own page */
.duo{ display:grid; gap:12px; margin-top:clamp(2.25rem,5vw,3rem); }
@media (min-width:760px){ .duo{ grid-template-columns:1fr 1fr; } }

.tile--link{ padding:0; display:flex; flex-direction:column; }
/* height:auto is load-bearing — the img height attribute (kept for CLS)
   lands as a presentational hint, and without this it wins over
   aspect-ratio, so the crop never happens and the full photo renders. */
.tile--link img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.tile__in{ padding:1.9rem; }

/* =========================================================
   HONEYPOT
   Off-screen rather than display:none — some bots skip
   hidden inputs, and the point is that they fill this one.
   ========================================================= */

.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* =========================================================
   QUALITY CARDS (.qcards)
   Homepage only. The three cards previously mixed two
   treatments — two carried a 56px colour swatch, one carried
   nothing — so the third read as a different component.
   All three now share one image slot: same size, same
   position, same treatment.

   Scoped to .qcards so the bento swatches on the About page
   keep their original treatment.
   ========================================================= */

.qcards .tile{ display:flex; flex-direction:column; }

/* One image slot per card. Identical box on all three: the aspect ratio
   fixes the height, so a portrait, a square and a landscape source all
   display the same once object-fit crops them. */
.qcards .qcard__media{
  position:relative;
  margin:0 0 1.6rem;
  aspect-ratio:16/9;
  border-radius:var(--r-img);
  overflow:hidden;
  background:linear-gradient(140deg,var(--paper-2),#FFFFFF);
  box-shadow:inset 0 0 0 1px var(--glass-edge);
  display:grid;
  place-items:center;
}

/* Absolute + 100%/100% rather than aspect-ratio on the img itself: the
   width/height attributes stay for layout stability, and the box keeps
   its shape whatever the source dimensions are. */
.qcards .qcard__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Per-card focal point is set inline in the markup, e.g.
     style="object-position:center 30%" — nothing here overrides it. */
  object-position:center center;
}

/* An unfilled slot reads as pending rather than broken. */
.qcards .qcard__media--empty{
  box-shadow:inset 0 0 0 1px var(--line);
  background:repeating-linear-gradient(
    -45deg, transparent 0 7px, rgba(19,23,27,.025) 7px 14px), var(--paper-2);
}
.qcards .qcard__media--empty em{
  display:block;
  margin-top:.35rem;
  font-style:normal;
  font-size:.92em;
  letter-spacing:.08em;
  text-transform:none;
  opacity:.75;
}

/* Placeholder label, visible only until a real photograph is dropped in. */
.qcards .qcard__media span{
  padding:0 1rem;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  text-align:center;
}

/* The card that ends in a link would otherwise sit shorter than
   its neighbours; push the last paragraph's slack to the bottom
   so the three blocks stay optically level. */
.qcards .tile__b{ margin-bottom:0; }

/* =========================================================
   FOUNDER — the rest of the bio
   Runs full width beneath the portrait row. The portrait
   stretches to match its column, so keeping the whole bio
   beside it would pull the image to roughly twice its
   natural height and crop it hard.
   ========================================================= */

.founder__more{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--line-2);
  max-width:74ch;
}
.founder__more p{
  color:var(--muted);
  margin:0 0 1.15rem;
}
.founder__more p:last-child{ margin-bottom:0; }

/* the closing line is the brand statement, so it gets the display face */
.founder__close{
  margin-top:1.75rem !important;
  font-family:var(--display);
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
  line-height:1.5;
  color:var(--ink) !important;
}