/* ═══════════════════════════════════════════════════════════
   PAGE SCULPTORS — Marble & Shadow
   Instrument Serif (display) · DM Sans (text)

   Cool marble, not warm stone — deliberately nothing like the
   client work it frames. One light source, from above-left:
   things that matter are raised off the ground and cast a
   shadow; section grounds are cut into it. Ultramarine is the
   only colour on the site that isn't grey.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:   #F2F2F0;   /* the ground */
  --raised:  #FCFCFB;   /* lit face */
  --recess:  #E5E5E2;   /* cut into the ground */
  --ink:     #14151A;   /* cool charcoal */
  --soft:    #55575E;
  --blue:    #22346B;   /* ultramarine, ground down — pigment, not screen */
  --blue-dp: #141D34;   /* the same pigment at depth: the contact panel */
  --blue-lt: #B9C4EC;   /* on blue */
  --line:    rgba(20,21,26,.14);
  --line-2:  rgba(20,21,26,.08);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  --gutter: clamp(22px,5vw,72px);
  --ease: cubic-bezier(.16,1,.3,1);

  --lift-1: 3px 4px 12px rgba(20,21,26,.08);
  --lift-2: 9px 12px 28px rgba(20,21,26,.11);
  --lift-3: 16px 22px 48px rgba(20,21,26,.14);
  --edge:   inset 1px 1px 0 rgba(255,255,255,.9);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
[id]{ scroll-margin-top:clamp(80px,10vh,110px) }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* the surface: a fine grain, and light raking in from above-left */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 90% at 10% -12%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 56%);
}
main,header,footer{ position:relative; z-index:2 }

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; font-weight:400 }
p{ margin:0 }
ul,ol,li,dl,dd,dt{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:14px 22px; font-size:13px }
.skip:focus{ left:0 }

.wrap{ max-width:1220px; margin-inline:auto; padding-inline:var(--gutter) }

/* ── type ────────────────────────────────────────── */
.kick{ font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue) }

h1,h2,.slab h3,.cut__list li,.cut__after{
  font-family:'Instrument Serif',Georgia,serif; font-weight:400;
}
h1{
  font-size:clamp(42px,7.2vw,102px); line-height:1.02;
  letter-spacing:-.012em; max-width:15ch; margin:var(--s3) 0 0;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
h1 em,h2 em,.cut__after em{ font-style:italic; color:var(--blue) }
h2{
  font-size:clamp(30px,4.4vw,58px); line-height:1.06;
  letter-spacing:-.008em; max-width:19ch;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 32px; border:0; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500;
  background:var(--ink); color:var(--paper); border-radius:3px;
  box-shadow:var(--lift-1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--lift-2) }
.btn:active{ transform:translateY(0); box-shadow:var(--lift-1) }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line) }
.btn--ghost:hover{ background:var(--raised); box-shadow:var(--lift-1) }
.btn--solid{ background:#fff; color:var(--blue) }
.btn--solid:hover{ background:var(--paper) }

.go{ display:inline-block; margin-top:var(--s4); font-size:15px; font-weight:500;
  color:var(--blue); border-bottom:1px solid rgba(34,52,107,.35); padding-bottom:4px;
  transition:border-color .25s var(--ease) }
.go:hover{ border-bottom-color:var(--blue) }

.reveal{ opacity:0; transform:translateY(14px);
  transition:opacity .65s var(--ease), transform .65s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }

/* ═══════════ NAV ═══════════ */
/* the header stays put the whole way down the page — it never hides.
   What it does instead is shrink: once you are past the top it goes
   compact and translucent, so it costs the reading area as little as
   a permanent bar can. */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease) }
.nav.is-stuck{ background:rgba(242,242,240,.9); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line) }
.nav__in{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:14px var(--gutter);
  transition:padding .3s var(--ease) }
/* once you are reading, the header draws itself in */
.nav.is-stuck .nav__in{ padding:8px var(--gutter) }
.nav.is-stuck .mark__logo{ width:70px; height:26.6px }
/* ── the mark ─────────────────────────────────────
   The studio's own logo — PAGE reversed out of a
   block, then SCULPTORS. — drawn as outlines in
   assets/logo.svg, so it needs no webfont and stays
   sharp at any size. The descriptor is set off it by
   a rule: the logo says who, the rule says what.    */
.mark{ display:inline-flex; align-items:center }
.mark__logo{ width:82px; height:31.1px; flex:none;
  transition:width .3s var(--ease), height .3s var(--ease) }
.mark__sub{ margin-left:14px; padding-left:14px; border-left:1px solid var(--line);
  align-self:stretch; display:flex; align-items:center; max-width:96px; line-height:1.45;
  font-size:8px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--soft) }
.nav__links{ display:flex; align-items:center; gap:var(--s4) }
.nav__links a{ font-size:15px; color:var(--soft); transition:color .2s var(--ease) }
.nav__links a:hover{ color:var(--ink) }
.nav__cta{ color:var(--ink)!important; box-shadow:inset 0 -2px 0 var(--blue); padding-bottom:2px }
.nav__toggle{ display:none; align-items:center; gap:9px; min-height:44px; padding:0 4px;
  background:none; border:0; cursor:pointer; color:var(--ink); font-family:inherit; font-size:15px }
.nav__bars{ display:grid; gap:5px; width:20px }
.nav__bars i{ height:1.5px; background:currentColor; transition:transform .3s var(--ease) }
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child{ transform:translateY(3px) rotate(7deg) }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child{ transform:translateY(-3.5px) rotate(-7deg) }
.nav__panel{ background:var(--raised); box-shadow:var(--lift-2); padding:var(--s2) var(--gutter) var(--s4) }
.nav__panel a{ display:block; padding:15px 0; border-bottom:1px solid var(--line-2);
  font-family:'Instrument Serif',serif; font-size:24px }
.nav__panel a:last-child{ border-bottom:0; color:var(--blue) }

/* a plate: a photograph raised off the ground, lit the same way
   as everything else — same shadow ramp, same lit top edge */
.plate{ margin:0; border-radius:4px; overflow:hidden; background:var(--raised);
  box-shadow:var(--lift-3), var(--edge) }
.plate img{ display:block; width:100%; height:auto }

/* ═══════════ HERO ═══════════ */
.hero{ padding:clamp(122px,18vw,186px) 0 clamp(64px,9vw,110px) }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:clamp(34px,5vw,80px); align-items:center }
.hero__sub{ margin-top:var(--s4); font-size:20px; line-height:1.55;
  color:#3A3C43; max-width:38ch }
.hero__cta{ display:flex; gap:12px; margin-top:var(--s4); flex-wrap:wrap }
.plate--hero img{ aspect-ratio:3/4; object-fit:cover }

/* ═══════════ WHAT WE BUILD ═══════════ */
.build{ padding:clamp(64px,8vw,104px) 0; background:var(--recess);
  box-shadow:inset 0 1px 0 rgba(20,21,26,.07), inset 0 -1px 0 rgba(255,255,255,.55) }
.build__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,44px); margin-top:clamp(30px,4vw,52px) }
.slab{ background:var(--raised); border-radius:4px; padding:clamp(28px,3.4vw,48px);
  box-shadow:var(--lift-2), var(--edge) }
p.slab__n{ font-family:'Instrument Serif',serif; font-size:17px; color:var(--blue) }
.slab h3{ font-size:clamp(27px,3vw,38px); letter-spacing:-.01em; margin:var(--s2) 0 var(--s3) }
.slab h3 + p{ color:#42444B; font-size:16.5px; line-height:1.66 }

/* ═══════════ SUBTRACTION ═══════════ */
.cut{ padding:clamp(64px,8vw,104px) 0 }
.cut__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(34px,5vw,76px); align-items:center }
.plate--cut img{ aspect-ratio:4/5; object-fit:cover }
.cut__list{ margin-top:clamp(28px,3.6vw,46px) }
.cut__list li{
  padding:19px 0; border-bottom:1px solid var(--line-2);
  font-size:clamp(20px,2.6vw,33px); line-height:1.3; color:var(--soft);
}
.cut__list li span{ position:relative; display:inline }
/* the cut is drawn as the line passes, and withdrawn if you scroll back */
.cut__list li span::after{
  content:""; position:absolute; left:-2px; right:-2px; top:53%; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease);
}
.cut__list li.is-cut span::after{ transform:scaleX(1) }
.cut__after{ margin-top:clamp(30px,4vw,50px);
  font-size:clamp(22px,2.9vw,38px); line-height:1.24; max-width:22ch; color:var(--ink) }

/* ═══════════ WORK ═══════════ */
.work{ padding:clamp(64px,8vw,104px) 0 clamp(80px,9vw,124px);
  background:var(--recess);
  box-shadow:inset 0 1px 0 rgba(20,21,26,.07), inset 0 -1px 0 rgba(255,255,255,.55) }
.work__grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(28px,4vw,64px); align-items:center; margin-top:clamp(28px,3.6vw,48px) }

/* the desktop frame, with the phone standing in front of it */
.work__frames{ position:relative; display:block; padding-bottom:9% }
.frame{ display:block; background:var(--raised); border-radius:4px; overflow:hidden;
  box-shadow:var(--lift-3), var(--edge);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease) }
.frame--desk{ padding:9px 9px 11px; width:88% }
.frame__bar{ display:flex; align-items:center; gap:6px; padding:4px 4px 9px }
.frame__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(20,21,26,.15) }
.frame--desk img{ width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:2px }
.frame--phone{ position:absolute; right:0; bottom:0; width:23%;
  padding:5px 5px 6px; border-radius:10px }
.frame--phone img{ width:100%; aspect-ratio:468/1014; object-fit:cover; border-radius:6px }
.work__frames:hover .frame--desk{ transform:translateY(-4px) }
.work__frames:hover .frame--phone{ transform:translateY(-10px) }

.work__body h2{ font-size:clamp(42px,5.6vw,76px); letter-spacing:-.015em }
.work__meta{ margin-top:10px; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soft) }
.work__body > p:not(.work__meta){ margin-top:var(--s3);
  color:#42444B; font-size:16.5px; line-height:1.7 }

/* ═══════════ START ═══════════ */
.start{ padding:clamp(64px,8vw,104px) 0 clamp(72px,9vw,116px);
  background:var(--blue-dp); color:#fff }
.start .kick{ color:var(--blue-lt) }
.start h2{ color:#fff; text-shadow:none; max-width:14ch; margin-top:var(--s3) }
.start__grid{ display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1fr);
  gap:clamp(38px,5vw,80px); align-items:start }
.start__intro > p:not(.kick){ margin-top:var(--s3);
  color:rgba(255,255,255,.84); max-width:40ch }

.how{ margin-top:var(--s5); border-top:1px solid rgba(255,255,255,.26) }
.how li{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--s3);
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.26); align-items:baseline }
.how b{ font-family:'Instrument Serif',serif; font-weight:400; font-size:19px; color:#fff }
.how span{ font-size:14.5px; color:rgba(255,255,255,.8); line-height:1.55 }

.detail{ display:grid; gap:2px; margin-top:var(--s5) }
.detail div{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--s3); padding:7px 0 }
.detail dt{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.76) }
.detail dd{ font-size:15px; color:#fff }
.detail a{ border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px }
.detail a:hover{ border-bottom-color:#fff }

.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) }
.field{ display:flex; flex-direction:column; gap:9px }
.field--full{ grid-column:1/-1 }
.field label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.88) }
.field input,.field select,.field textarea{
  font-family:inherit; font-size:16px; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.36);
  border-radius:3px; padding:14px 15px; min-height:52px; width:100%;
  transition:border-color .2s var(--ease), background-color .2s var(--ease) }
.field textarea{ resize:vertical; min-height:112px; line-height:1.6 }
.field select{ appearance:none; cursor:pointer }
.field select option{ color:var(--ink) }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.6) }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(255,255,255,.62) }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:#fff; background:rgba(255,255,255,.16) }
.start :focus-visible{ outline-color:#fff }
.form .btn--solid{ grid-column:1/-1; justify-self:start; padding:0 42px; box-shadow:none }
.hp{ position:absolute; left:-9999px }

/* ═══════════ FOOTER ═══════════ */
.foot{ padding:var(--s4) 0; background:var(--recess) }
.foot__base{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s2) var(--s4) }
.foot p{ font-size:14px; color:var(--soft) }
.foot a{ transition:color .2s var(--ease) }
.foot a:hover{ color:var(--blue) }

/* ═══════════════════════════════════════════════════
   PHONE — laid out again, not squeezed
   ═══════════════════════════════════════════════════ */
@media (max-width:900px){
  .build__grid,.work__grid,.start__grid,.hero__grid,.cut__grid{ grid-template-columns:1fr }
  .plate--hero,.plate--cut{ max-width:440px; margin-top:var(--s4) }
  /* the source files are 3:4 and 4:5. On a phone they are shown at
     exactly that — a landscape or square crop of a standing figure
     cuts the head off at both ends and the subject reads as squashed.
     It costs about 270px of page; the photographs are the argument. */
  .plate--hero img{ aspect-ratio:3/4 }
  .plate--cut img{ aspect-ratio:4/5 }
  .work__body{ order:-1 }
  .work__frames{ margin-top:var(--s4) }
}
@media (max-width:720px){
  .mark__sub{ display:none }
  .nav__in{ padding:10px var(--gutter) }
  .nav.is-stuck .nav__in{ padding:6px var(--gutter) }
  body{ font-size:16px }
  .nav__links{ display:none }
  .nav__toggle{ display:inline-flex }
  .nav{ background:rgba(242,242,240,.92); backdrop-filter:blur(12px) }

  .hero{ padding-top:clamp(108px,26vw,144px) }
  .hero__sub{ font-size:18px }
  .hero__cta .btn{ flex:1 1 auto }

  .frame--desk{ width:100% }
  .frame--phone{ width:28%; right:-2%; bottom:-2% }
  .work__frames{ padding-bottom:14% }

  .how li,.detail div{ grid-template-columns:1fr; gap:3px; padding:12px 0 }
  .form{ grid-template-columns:1fr }
  .form .btn--solid{ justify-self:stretch }
  .foot__base{ flex-direction:column; align-items:flex-start; gap:var(--s1) }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  .reveal{ opacity:1; transform:none }
  .cut__list li span::after{ transform:scaleX(1) }
  .frame{ transform:none!important }
}