@font-face{font-family:"Reckless";src:url("assets/fonts/RecklessStandardM-TRIAL-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Reckless";src:url("assets/fonts/RecklessStandardM-TRIAL-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Reckless";src:url("assets/fonts/RecklessStandardM-TRIAL-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Reckless";src:url("assets/fonts/RecklessStandardM-TRIAL-Book.otf") format("opentype");font-weight:450;font-style:normal;font-display:swap}
@font-face{font-family:"Reckless";src:url("assets/fonts/RecklessStandardM-TRIAL-BookItalic.otf") format("opentype");font-weight:450;font-style:italic;font-display:swap}
@font-face{font-family:"Reckless";src:url("assets/fonts/RecklessStandardM-TRIAL-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Reckless";src:url("assets/fonts/RecklessStandardM-TRIAL-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-ExtraLight.ttf") format("truetype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-ExtraLightItalic.ttf") format("truetype");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-Thin.ttf") format("truetype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-ThinItalic.ttf") format("truetype");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-MediumItalic.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-ExtraBoldItalic.ttf") format("truetype");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu";src:url("assets/fonts/ApercuPro-BlackItalic.ttf") format("truetype");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu Mono";src:url("assets/fonts/Apercu Pro Mono.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}

/* FLMNO-style typography mapping */
body{font-family:"Apercu",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.brand{font-family:"Apercu",-apple-system,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.04em;text-decoration:none}
nav,.kicker,.section-heading p,.text-button,.logo-grid p,.frost-overlay p,.apple-card span,.contact-form span,footer strong,.apple-modal span,.scribble-label-svg{font-family:"Apercu Mono",monospace;font-weight:400}
.scroll-headline{font-family:"Reckless",serif;font-weight:400}
.display-heading,.contact-copy h2,.apple-modal h2{font-family:"Reckless",serif;font-weight:500}
.frost-overlay h2,.logo-grid h3,.apple-card h3{font-family:"Reckless",serif;font-weight:500}
.body-copy,.contact-copy p,.apple-modal p,.contact-form input,.contact-form textarea{font-family:"Apercu",sans-serif}
.lettering-card span,.logo-grid span{font-family:"Reckless",serif}

*{box-sizing:border-box}
:root{--bg:#050507;--text:#f7f7f2;--muted:rgba(247,247,242,.62)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;overflow-x:hidden;transition:background-color .45s ease,color .45s ease}
a{color:inherit;text-decoration:none}
.ambient{display:none}
.site-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(24px,5vw,72px);background:rgba(5,5,7,.66);backdrop-filter:blur(24px) saturate(165%)}
.brand{font-family:"Apercu",-apple-system,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.04em;text-decoration:none}
nav{display:flex;gap:24px;font-size:10px;letter-spacing:.055em;color:rgba(247,247,242,.72);flex-wrap:wrap}nav a:hover{color:#fff}
.hero{min-height:calc(100vh - 66px);padding:clamp(96px,12vw,168px) clamp(24px,6vw,88px) clamp(86px,10vw,140px);display:flex;flex-direction:column;justify-content:center;align-items:center}
.kicker{margin:0 0 22px;color:rgba(247,247,242,.55);font-size:11px;letter-spacing:.12em}
.scroll-headline{width:100%;max-width:1100px;margin:0 auto;font-size:clamp(24px,3vw,36px);line-height:1.18;letter-spacing:-.025em;font-weight:300;text-align:left;white-space:normal;word-break:normal}
.scroll-char{color:rgba(247,247,242,.2);opacity:.48;transition:color .28s ease,opacity .28s ease;white-space:pre-wrap}.scroll-char.visible{color:#fff;opacity:1}
.hero-actions{width:100%;max-width:1100px;display:flex;gap:24px;margin-top:36px}.text-button{font-size:11px;letter-spacing:.08em}.text-button.muted{color:rgba(255,255,255,.56)}
.section{padding:clamp(86px,11vw,160px) clamp(24px,6vw,88px)}.section-heading{margin-bottom:clamp(26px,4vw,48px)}.section-heading p{margin:0;font-size:12px;letter-spacing:.08em;color:rgba(247,247,242,.64)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.work-tile{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:34px;background:transparent}
.tile-image{position:absolute;inset:0;border-radius:34px;background:var(--image);background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.image-one{--image:radial-gradient(circle at 46% 38%,#f8f7f2 0 8%,transparent 9%),linear-gradient(135deg,#0b0d12,#5569ff 44%,#e7e1d4)}.image-two{--image:linear-gradient(145deg,#f7f5ee,#1a1d25 45%,#7d74f9)}.image-three{--image:repeating-linear-gradient(125deg,#0c111b 0 16px,#d7e4ff 16px 18px,#39465b 18px 52px)}.image-four{--image:radial-gradient(circle at 72% 34%,#fff 0 8%,transparent 9%),linear-gradient(135deg,#050505,#2234a8 48%,#0b0d12)}.image-five{--image:linear-gradient(145deg,#050505,#21242c 40%,#b8c6ff)}.image-six{--image:repeating-linear-gradient(90deg,#f2efe8 0 18px,#171717 18px 22px,#6c6c72 22px 54px)}.image-seven{--image:radial-gradient(circle at 25% 25%,#fff,transparent 12%),radial-gradient(circle at 72% 56%,#757dff,transparent 18%),linear-gradient(135deg,#101010,#30343d)}.image-eight{--image:linear-gradient(135deg,#fafafa 0 20%,#161616 20% 24%,#aaa 24% 70%,#fff 70%)}
.frost-overlay{position:absolute;inset:0;border-radius:34px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(26px,4vw,52px);background:rgba(0,0,0,.22);color:#fff;opacity:0;transition:opacity .35s ease}
.frost-overlay p{margin:0 0 10px;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.72)}.frost-overlay h2{max-width:620px;margin:0;font-size:clamp(24px,2.8vw,42px);line-height:.98;letter-spacing:-.055em;font-weight:300}.work-tile:hover .tile-image{transform:scale(1.04);filter:brightness(.38) blur(3px)}.work-tile:hover .frost-overlay{opacity:1}
.logo-grid{display:grid;padding-inline:clamp(20px,4vw,40px);max-width:none;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,38px)}.logo-grid article{padding:clamp(22px,3vw,36px);border-radius:30px;background:rgba(255,255,255,.045)}.logo-grid span{height:150px;display:grid;place-items:center;margin-bottom:22px;border-radius:26px;background:transparent;font-size:clamp(34px,5vw,78px);font-weight:300;letter-spacing:-.08em}.logo-grid h3{margin:0 0 7px;font-size:15px;font-weight:300}.logo-grid p{margin:0;color:var(--muted);font-size:12px}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,6vw,88px);align-items:center}.display-heading{max-width:1000px;margin:0;font-size:clamp(40px,6.3vw,104px);line-height:.94;letter-spacing:-.067em;font-weight:200}.lettering-card{min-height:520px;padding:clamp(28px,5vw,64px);border-radius:36px;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden}.lettering-card span{font-size:clamp(70px,13vw,188px);font-weight:700;letter-spacing:-.18em;transition:transform .4s ease}.lettering-card:hover span:nth-child(odd){transform:translateY(-18px)}.lettering-card:hover span:nth-child(even){transform:translateY(18px)}
.body-copy{max-width:760px;margin:28px 0 0;color:rgba(247,247,242,.7);font-size:clamp(18px,2vw,27px);line-height:1.42}
.apple-service-grid{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.apple-card{position:relative;min-height:360px;padding:34px;border:0;border-radius:36px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:#fff;text-align:left;cursor:pointer;backdrop-filter:blur(24px) saturate(140%);transition:transform .45s cubic-bezier(.22,1,.36,1),background .35s ease,box-shadow .45s ease;box-shadow:0 20px 80px rgba(0,0,0,.28)}.apple-card:hover{transform:translateY(-8px);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));box-shadow:0 40px 120px rgba(0,0,0,.34)}.apple-card span{display:block;margin-bottom:18px;color:rgba(255,255,255,.58);font-size:11px;letter-spacing:.12em}.apple-card h3{max-width:460px;margin:0;font-size:clamp(26px,2.6vw,42px);line-height:.98;letter-spacing:-.06em;font-weight:300}.apple-card b{position:absolute;left:34px;bottom:30px;width:42px;height:42px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.1);font-size:28px;font-weight:300}
.contact{padding:clamp(96px,12vw,180px) clamp(24px,6vw,88px)}.contact-panel{min-height:76vh;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,92px);align-items:end}.contact-copy h2{margin:0;font-size:clamp(44px,7.8vw,128px);line-height:.88;letter-spacing:-.04em;font-weight:200}.contact-copy p:not(.kicker){max-width:520px;margin:28px 0 0;color:rgba(255,255,255,.66);font-size:clamp(18px,2vw,26px);line-height:1.35}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px)}.contact-form label{display:grid;gap:12px}.contact-form .full{grid-column:1/-1}.contact-form span{font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.58)}.contact-form input,.contact-form textarea{width:100%;border:0;border-radius:24px;background:rgba(255,255,255,.12);color:inherit;padding:18px 22px;font:300 18px/1.25 inherit;outline:none}.contact-form textarea{min-height:190px;resize:vertical}.contact-form button{grid-column:1/-1;justify-self:start;border:0;border-radius:999px;background:#fff;color:#050507;padding:17px 30px;font-size:11px;letter-spacing:.13em;cursor:pointer}
footer{padding:28px clamp(20px,5vw,72px);color:rgba(247,247,242,.36);font-size:13px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:90}.modal-backdrop.active{opacity:1;pointer-events:auto}.apple-modal{position:fixed;left:50%;top:50%;width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:44px;border-radius:40px;background:linear-gradient(180deg,rgba(24,24,28,.98),rgba(10,10,12,.98));color:#fff;transform:translate(-50%,-50%) scale(.96);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);z-index:100;box-shadow:0 50px 160px rgba(0,0,0,.52)}.apple-modal.active{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.modal-close{position:absolute;right:24px;top:24px;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:28px;cursor:pointer}.apple-modal span{display:block;margin-bottom:18px;color:rgba(255,255,255,.58);font-size:12px;letter-spacing:.12em}.apple-modal h2{max-width:760px;margin:0 0 24px;font-size:clamp(42px,5vw,72px);line-height:.92;letter-spacing:-.07em;font-weight:300}.apple-modal p{max-width:700px;color:rgba(255,255,255,.72);font-size:20px;line-height:1.5}.apple-modal a{display:inline-block;margin-top:18px;color:#fff;font-size:18px}body.modal-open{overflow:hidden}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
body.contact-mode{background:var(--contact-bg,#FAF3C7);color:#050507}body.contact-mode .site-nav{background:rgba(250,243,199,.72)}body.contact-mode .brand,body.contact-mode nav,body.contact-mode nav a,body.contact-mode .kicker,body.contact-mode .section-heading p,body.contact-mode .body-copy,body.contact-mode .logo-grid p,body.contact-mode footer,body.contact-mode body.contact-mode .scroll-char{color:rgba(5,5,7,.24)}body.contact-mode .scroll-char.visible{color:#050507}body.contact-mode .contact-copy p:not(.kicker){color:rgba(0,0,0,.66)}body.contact-mode .contact-form span{color:rgba(0,0,0,.58)}body.contact-mode .text-button{color:#050507}body.contact-mode .text-button.muted{color:rgba(0,0,0,.58)}body.contact-mode .logo-grid article,body.contact-mode .logo-grid span,body.contact-mode .lettering-card,body.contact-mode .contact-form input,body.contact-mode .contact-form textarea{background:rgba(255,255,255,.28)}
@media(max-width:900px){.site-nav{align-items:flex-start;flex-direction:column}.portfolio-grid,.logo-grid,.apple-service-grid{grid-template-columns:1fr 1fr}.split,.contact-panel{grid-template-columns:1fr}.apple-card{min-height:280px}footer{grid-template-columns:1fr}}
@media(max-width:620px){nav{gap:12px}.portfolio-grid,.logo-grid,.apple-service-grid{grid-template-columns:1fr}.hero,.section,.contact{padding-left:20px;padding-right:20px}.contact-form{grid-template-columns:1fr}.work-tile,.tile-image,.frost-overlay{border-radius:26px}.apple-modal{padding:30px}.apple-modal h2{font-size:38px}}


/* Compact A-to-B scroll scribble */

.scribble-section{
  min-height:78vh;
  padding:clamp(34px,6vw,72px) clamp(24px,6vw,88px);
  display:grid;
  place-items:center;
}

.scribble-wrap{
  width:min(100%,780px);
  position:relative;
  display:grid;
  place-items:center;
}

.scribble-svg{
  width:min(82vw,620px);
  height:auto;
  overflow:visible;
}

.scribble-base,
.scribble-draw{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:5.5;
}

.scribble-base{
  stroke:rgba(247,247,242,.20);
}

.scribble-draw{
  stroke:#fff;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.16));
}

.scribble-label{
  position:absolute;
  font-size:13px;
  letter-spacing:.14em;
  color:rgba(247,247,242,.38);
  transition:color .25s ease;
}

.label-a{
  left:clamp(4px,5vw,56px);
  top:clamp(10px,4vw,36px);
}

.label-b{
  right:clamp(6px,6vw,74px);
  bottom:clamp(8px,4vw,34px);
}

.scribble-section.is-drawing .label-a,
.scribble-section.is-complete .label-a,
.scribble-section.is-complete .label-b{
  color:#fff;
}

body.contact-mode .scribble-base{
  stroke:rgba(5,5,7,.24);
}

body.contact-mode .scribble-draw{
  stroke:#050507;
  filter:none;
}

body.contact-mode .scribble-label{
  color:rgba(5,5,7,.42);
}

body.contact-mode .scribble-section.is-drawing .label-a,
body.contact-mode .scribble-section.is-complete .label-a,
body.contact-mode .scribble-section.is-complete .label-b{
  color:#050507;
}

@media(max-width:620px){
  .scribble-section{
    min-height:58vh;
    padding-top:30px;
    padding-bottom:30px;
  }

  .scribble-svg{
    width:min(92vw,520px);
  }

  .scribble-base,
  .scribble-draw{
    stroke-width:4.5;
  }
}


/* --- delayed A-to-B scribble tuning --- */

.scribble-section{
  min-height:92vh;
}

.scribble-wrap{
  max-height:520px;
}

.scribble-svg{
  max-height:500px;
}

.scribble-label{
  display:none;
}

.scribble-label-svg{
  font: 400 18px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.14em;
  fill:rgba(247,247,242,.38);
  transition:fill .25s ease;
}

.label-a-svg{
  transform:translate(0,0);
}

.label-b-svg{
  transform:translate(0,0);
}

.scribble-section.is-drawing .label-a-svg,
.scribble-section.is-complete .label-a-svg,
.scribble-section.is-complete .label-b-svg{
  fill:#fff;
}

body.contact-mode .scribble-label-svg{
  fill:rgba(5,5,7,.42);
}

body.contact-mode .scribble-section.is-drawing .label-a-svg,
body.contact-mode .scribble-section.is-complete .label-a-svg,
body.contact-mode .scribble-section.is-complete .label-b-svg{
  fill:#050507;
}

@media(max-width:620px){
  .scribble-section{
    min-height:72vh;
  }
  .scribble-svg{
    max-height:390px;
  }
}

/* Final font-use overrides */
.scroll-headline{
  font-family:"Reckless",serif;
  font-weight:400;
  letter-spacing:-0.02em;
}
.display-heading,
.contact-copy h2,
.apple-modal h2{
  font-family:"Reckless",serif;
  font-weight:500;
  letter-spacing:-0.055em;
}
.apple-card h3,
.frost-overlay h2{
  font-family:"Reckless",serif;
  font-weight:500;
}
body,
.body-copy,
.contact-copy p,
.apple-modal p{
  font-family:"Apercu",sans-serif;
}
nav,
.kicker,
.section-heading p,
.text-button,
.apple-card span,
.contact-form span,



/* --- user notes fix pass --- */

/* 1. Header should stay clear/transparent when contact color mode is active */
body.contact-mode .site-nav{
  background:transparent;
  backdrop-filter:none;
}

/* 2. Side-by-side about copy + animated drawing */
.about-intro{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  gap:clamp(28px,6vw,90px);
  align-items:center;
}

.about-copy-block{
  min-width:0;
}

.about .scribble-section{
  min-height:auto;
  padding:0;
  display:grid;
  place-items:center;
}

.about .scribble-svg{
  width:min(100%,520px);
  max-height:390px;
}

/* 3. Logo boxes: mark on top, text clearly beneath */
.logo-grid article{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  background:transparent;
}

.logo-grid span{
  width:100%;
  min-height:170px;
  margin:0 0 18px;
}

.logo-grid h3,
.logo-grid p{
  padding-inline:4px;
}

/* 4. Hero headline: three-line layout + smoother slower reveal */
.scroll-headline{
  max-width:980px;
  font-size:clamp(26px,3vw,36px);
  line-height:1.22;
  letter-spacing:-0.015em;
}

.scroll-line{
  display:block;
}

.hero-actions{
  max-width:980px;
}

/* 5. Services cards and modals: no shadows */
.apple-card,
.apple-card:hover,
.apple-modal{
  box-shadow:none;
}

.apple-card{
  background:rgba(255,255,255,.075);
}

.apple-card:hover{
  background:rgba(255,255,255,.12);
}

/* 5. Contact mode should make service cards and modals black/gray */
body.contact-mode .apple-card{
  color:#050507;
  background:rgba(255,255,255,.28);
}

body.contact-mode .apple-card:hover{
  background:rgba(255,255,255,.42);
}

body.contact-mode .apple-card span{
  color:rgba(5,5,7,.55);
}

body.contact-mode .apple-card b{
  background:rgba(5,5,7,.08);
  color:#050507;
}

body.contact-mode .apple-modal{
  background:rgba(255,255,255,.92);
  color:#050507;
  box-shadow:none;
}

body.contact-mode .apple-modal span{
  color:rgba(5,5,7,.52);
}

body.contact-mode .apple-modal p{
  color:rgba(5,5,7,.66);
}

body.contact-mode .apple-modal a{
  color:#050507;
}

body.contact-mode .modal-close{
  background:rgba(5,5,7,.08);
  color:#050507;
}

body.contact-mode .modal-backdrop{
  background:rgba(255,255,255,.36);
}

/* Let the modal itself also react after a user types into the form */
body.contact-mode.modal-open .apple-modal{
  color:#050507;
}

/* make form placeholder readable in contact mode */
body.contact-mode .contact-form input::placeholder,
body.contact-mode .contact-form textarea::placeholder{
  color:rgba(5,5,7,.42);
}

@media(max-width:900px){
  .about-intro{
    grid-template-columns:1fr;
  }

  .about .scribble-svg{
    width:min(100%,560px);
  }
}

@media(max-width:620px){
  .scroll-headline{
    font-size:clamp(24px,7vw,32px);
  }

  .about .scribble-svg{
    max-height:320px;
  }
}


/* --- refinements pass 2 --- */

/* 1. Cap all header-like text at 36px */
h1,h2,h3,
.scroll-headline,
.display-heading,
.contact-copy h2,
.apple-modal h2,
.frost-overlay h2,
.apple-card h3,
.logo-grid h3{
  font-size:min(var(--local-size, 36px), 36px);
}

.scroll-headline{
  --local-size:clamp(24px,3vw,36px);
  width:100%;
  max-width:820px;
  margin:0 auto;
  padding:clamp(22px,4vw,38px);
  border-radius:30px;
  background:transparent;
  line-height:1.22;
  letter-spacing:-0.012em;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}

.scroll-line{
  display:inline;
}

/* preserve spacing between generated inline lines when JS inserts them */
.scroll-line + .scroll-line:before{
  content:" ";
}

/* Make the reveal faster than the previous 3-line version */
.hero-actions{
  max-width:820px;
}

/* 2. Service cards: title-only h3 cards, no shadow */
.apple-service-grid{
  grid-template-columns:repeat(3,1fr);
}

.apple-card,
.apple-card:hover{
  box-shadow:none;
}

.apple-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:rgba(255,255,255,.07);
}

.apple-card:hover{
  background:rgba(255,255,255,.12);
}

.apple-card h3{
  --local-size:clamp(25px,2.4vw,36px);
  font-family:"Reckless",serif;
  font-weight:500;
  line-height:1;
  letter-spacing:-0.045em;
  text-transform:none;
}

.apple-card span{
  display:none;
}

/* 2b. Modals: title case label not mono/body; black/gray in contact mode */
.apple-modal span{
  font-family:"Reckless",serif;
  font-size:24px;
  line-height:1;
  letter-spacing:-0.04em;
  text-transform:none;
  color:rgba(255,255,255,.88);
}

body.contact-mode .apple-modal span{
  color:#050507;
}

/* 3. Animation finishes slightly earlier and visibly ends at B */
.scribble-draw{
  stroke-dashoffset:0;
}

.label-b-svg{
  dominant-baseline:middle;
}

/* 4. Logo boxes treated like image tiles with captions outside below */
.logo-grid article{
  display:block;
  background:transparent;
  padding:0;
  border-radius:0;
}

.logo-grid span{
  display:grid;
  place-items:center;
  aspect-ratio:1 / 1;
  height:auto;
  min-height:0;
  width:100%;
  margin:0 0 14px;
  border-radius:34px;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 22%),
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  font-family:"Reckless",serif;
  font-size:clamp(32px,5vw,72px);
  font-weight:500;
  letter-spacing:-0.08em;
}

.logo-grid h3{
  --local-size:16px;
  padding:0 4px;
  margin:0 0 6px;
  font-family:"Reckless",serif;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-0.02em;
}

.logo-grid p{
  padding:0 4px;
}

/* contact mode: keep service/modal readable and shadowless */
body.contact-mode .apple-card{
  background:rgba(255,255,255,.28);
  color:#050507;
}

body.contact-mode .apple-card h3{
  color:#050507;
}

body.contact-mode .apple-card b{
  background:rgba(5,5,7,.08);
  color:#050507;
}

/* Header remains visually clear */
body.contact-mode .site-nav{
  background:transparent;
  backdrop-filter:none;
}

/* Global safeguard: no giant headings */
.section h2,
.about h2,
.contact h2{
  max-font-size:36px;
}

@media(max-width:900px){
  .apple-service-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){
  .apple-service-grid{
    grid-template-columns:1fr;
  }

  .scroll-headline{
    --local-size:clamp(23px,6vw,32px);
    padding:22px;
  }

  .logo-grid span{
    border-radius:26px;
  }
}


/* --- logo + spacing + paragraph type pass --- */

/* Tighten gaps globally by roughly half */
.portfolio-grid,
.logo-grid,
.apple-service-grid,
.contact-form,
.services,
.feature-grid,
.illustration-grid{
  gap:clamp(9px,1.2vw,17px);
}

.hero-actions{
  gap:12px;
}

.split,
.about-intro,
.contact-panel{
  gap:clamp(18px,3vw,45px);
}

.section-heading{
  margin-bottom:clamp(14px,2vw,24px);
}

.apple-service-grid{
  margin-top:32px;
}

.body-copy{
  margin-top:16px;
}

/* Apercu/body/paragraph type max 16px */
body,
p,
.body-copy,
.contact-copy p,
.apple-modal p,
.logo-grid p,
.contact-form input,
.contact-form textarea,
.contact-form button,
.text-button,
nav,
.kicker,
.section-heading p,
.frost-overlay p,
.apple-card span,
.contact-form span,
footer,


.kicker,
.section-heading p,
.frost-overlay p,
.apple-card span,
.contact-form span,
footer strong,
nav,
.text-button{
  --body-size:11px;
}

.logo-grid p,
footer{
  --body-size:12px;
}

.contact-copy p,
.body-copy,
.apple-modal p{
  --body-size:16px;
  line-height:1.45;
}

/* Logo boxes mimic portfolio boxes exactly */
.logo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(9px,1.2vw,17px);
}

.logo-grid article,
.logo-grid .logo-item{
  display:block;
  padding:0;
  background:transparent;
  border-radius:0;
}

.logo-tile{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  margin:0 0 10px;
  border-radius:34px;
  overflow:hidden;
  background:transparent;
}

.logo-tile .tile-image{
  border-radius:34px;
}

.logo-tile .frost-overlay{
  border-radius:34px;
}

.logo-tile .frost-overlay h2{
  --local-size:clamp(24px,2.8vw,36px);
  font-family:"Reckless",serif;
  font-weight:500;
  letter-spacing:-0.055em;
}

.logo-grid h3{
  --local-size:16px;
  margin:0 0 4px;
  padding:0 4px;
  font-family:"Reckless",serif;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-0.02em;
}

.logo-grid p{
  margin:0;
  padding:0 4px;
  color:var(--muted);
  font-family:"Apercu Mono",monospace;
}

/* Disable any older custom mark box styling */
.logo-grid > article > span{
  display:none;
}

/* Tighten card internal padding slightly without making it cramped */
.apple-card{
  padding:24px;
  min-height:160px;
}

.apple-card b{
  left:24px;
  bottom:22px;
}

.frost-overlay{
  padding:clamp(18px,2vw,28px);
}

/* Keep all service/modal/card shadows off */
.apple-card,
.apple-card:hover,
.apple-modal{
  box-shadow:none;
}

@media(max-width:900px){
  .portfolio-grid,
  .logo-grid,
  .apple-service-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){
  .portfolio-grid,
  .logo-grid,
  .apple-service-grid{
    grid-template-columns:1fr;
  }

  .logo-tile,
  .logo-tile .tile-image,
  .logo-tile .frost-overlay{
    border-radius:26px;
  }
}


/* --- pinned headline + drawing/text polish pass --- */

/* Pin the hero until the headline reveal completes */
.hero{
  position:sticky;
  top:0;
  z-index:1;
  min-height:100vh;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 50% 32px auto;
  width:1px;
  height:42px;
  background:rgba(247,247,242,.24);
  transform:translateX(50%);
  opacity:.7;
}

body.headline-complete .hero{
  position:relative;
}

body.headline-complete .hero::after{
  opacity:0;
}

/* A subtle spacer creates the scroll distance needed for the pinned reveal */
.headline-scroll-spacer{
  height:80vh;
  pointer-events:none;
}

/* contained, natural headline box */
.scroll-headline{
  max-width:820px;
}

/* Make all smaller/body utility text match the contact helper paragraph styling */
.body-copy,
.contact-copy p,
.apple-modal p,
.logo-grid p,
.contact-form span,
.contact-form input,
.contact-form textarea,
.contact-form button,
footer,
footer strong,
.text-button,
nav,
.kicker,
.section-heading p,
.frost-overlay p{
  font-family:"Apercu",sans-serif;
  font-size:16px;
  line-height:1.45;
  letter-spacing:-0.01em;
  font-weight:300;
}

/* Keep nav/kickers compact but same family/feel */
nav,
.kicker,
.section-heading p,
.text-button,
.frost-overlay p,


.contact-form span{
  color:rgba(255,255,255,.66);
}

body.contact-mode .contact-form span,
body.contact-mode .body-copy,
body.contact-mode .contact-copy p,
body.contact-mode .logo-grid p,
body.contact-mode footer,
body.contact-mode 

/* Shorter, cleaner A-to-B drawing presentation */
.about .scribble-svg{
  width:min(100%,440px);
  max-height:320px;
}

.scribble-base,
.scribble-draw{
  stroke-width:6;
}

/* Ensure label B sits closer to the visual endpoint */
.label-b-svg{
  transform:translate(-22px,-26px);
}

/* no overlarge paragraph text from earlier rules */
.contact-copy p:not(.kicker),
.body-copy,
.apple-modal p{
  font-size:16px;
}

@media(max-width:620px){
  .headline-scroll-spacer{
    height:65vh;
  }

  .about .scribble-svg{
    max-height:280px;
  }
}


/* --- 960px content container + logo update --- */

/* Keep nav/footer full width, constrain only main site content */
main{
  width:100%;
}

main > section,
main > .headline-scroll-spacer{
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
}

/* Preserve sticky hero behavior while contained */
.hero{
  width:100%;
}

/* Make inner grids respect the 960 container */
.section,
.hero,
.contact,
.scribble-section{
  padding-left:clamp(20px,4vw,40px);
  padding-right:clamp(20px,4vw,40px);
}

/* Full-width nav remains unconstrained */
.site-nav{
  max-width:none;
  width:100%;
}

/* Logo styling */
.brand{font-family:"Apercu",-apple-system,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.04em;text-decoration:none}

body.contact-mode .brand{font-family:"Apercu",-apple-system,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.04em;text-decoration:none}

/* Keep footer full width, but align its inner grid nicely */
footer{
  max-width:none;
  width:100%;
}

/* Prevent older Laica logo mapping from overriding */
.site-nav .brand{font-family:"Apercu",-apple-system,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.04em;text-decoration:none}

body.contact-mode .site-nav .brand{font-family:"Apercu",-apple-system,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.04em;text-decoration:none}

@media(max-width:1000px){
  main > section,
  main > .headline-scroll-spacer{
    max-width:100%;
  }
}


/* --- notes pass: persistent headline + staggered cards + service sizing --- */

/* 1. Hero eyebrow removed in HTML. Keep hero content calmly centered. */
.hero{
  justify-content:center;
}

/* 2. Keep headline visible after animation; let page gently continue. */
body.headline-complete .hero{
  position:sticky;
}

body.headline-complete .scroll-headline .scroll-char{
  color:#fff;
  opacity:1;
}

body.contact-mode.headline-complete .scroll-headline .scroll-char{
  color:#050507;
  opacity:1;
}

/* Fade hero out only as it naturally gives way to the next section, not when animation completes */
.hero{
  transition:opacity .5s ease, transform .5s ease;
}

/* 3. Smooth per-card scroll reveal */
.card-reveal{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--card-delay,0ms);
}

.card-reveal.card-visible{
  opacity:1;
  transform:translateY(0);
}

/* Slightly stagger cards inside grid containers */
.portfolio-grid .card-reveal:nth-child(1),
.logo-grid .card-reveal:nth-child(1),
.apple-service-grid .card-reveal:nth-child(1){--card-delay:0ms}

.portfolio-grid .card-reveal:nth-child(2),
.logo-grid .card-reveal:nth-child(2),
.apple-service-grid .card-reveal:nth-child(2){--card-delay:70ms}

.portfolio-grid .card-reveal:nth-child(3),
.logo-grid .card-reveal:nth-child(3),
.apple-service-grid .card-reveal:nth-child(3){--card-delay:140ms}

.portfolio-grid .card-reveal:nth-child(4),
.logo-grid .card-reveal:nth-child(4),
.apple-service-grid .card-reveal:nth-child(4){--card-delay:210ms}

.portfolio-grid .card-reveal:nth-child(5),
.logo-grid .card-reveal:nth-child(5),
.apple-service-grid .card-reveal:nth-child(5){--card-delay:280ms}

.portfolio-grid .card-reveal:nth-child(6),
.logo-grid .card-reveal:nth-child(6),
.apple-service-grid .card-reveal:nth-child(6){--card-delay:350ms}

/* 4. Services/modals font size 32px max and no overlap */
.apple-card{
  min-height:180px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
}

.apple-card h3{
  --local-size:32px;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-0.04em;
  margin:0;
  padding-right:10px;
}

.apple-card b{
  position:static;
  flex:0 0 auto;
  align-self:flex-start;
  width:38px;
  height:38px;
  font-size:24px;
  margin-top:auto;
}

.apple-modal h2{
  --local-size:32px;
  font-size:32px;
  line-height:1.05;
}

.apple-modal span{
  font-size:32px;
  line-height:1.05;
}

.apple-modal{
  padding:clamp(28px,5vw,44px);
}

.apple-modal p{
  margin-top:18px;
}

/* Prevent earlier general min() header cap from shrinking weirdly */
.apple-card h3,
.apple-modal h2,
.apple-modal span{
  max-width:100%;
}

/* Mobile service boxes */
@media(max-width:620px){
  .apple-card{
    min-height:150px;
  }

  .apple-card h3,
  .apple-modal h2,
  .apple-modal span{
    font-size:28px;
  }
}


/* --- headline release fix --- */

/*
  Keep the hero pinned only until the headline reveal completes.
  After completion, it releases into the normal document flow so users can
  continue scrolling down the page.
*/
body.headline-complete .hero{
  position:relative;
  top:auto;
}

body.headline-complete .hero::after{
  opacity:0;
}

/* Keep the headline visible after release */
body.headline-complete .scroll-headline .scroll-char{
  color:#fff;
  opacity:1;
}

body.contact-mode.headline-complete .scroll-headline .scroll-char{
  color:#050507;
  opacity:1;
}


/* --- smooth headline release fix --- */

/*
  Do NOT change the hero from sticky to relative when the animation completes.
  That causes the apparent disappearing/jump. Instead, keep the hero sticky
  for the duration of its scroll spacer and let the next section naturally
  scroll over it after the spacer ends.
*/
body.headline-complete .hero{
  position:sticky;
  top:0;
}

.hero{
  z-index:0;
  background:transparent;
}

.headline-scroll-spacer{
  height:70vh;
}

/* Projects and later sections sit above the sticky hero once reached */
main > section:not(.hero){
  position:relative;
  z-index:2;
}

/* Keep the headline visible after the reveal completes */
body.headline-complete .scroll-headline .scroll-char{
  color:#fff;
  opacity:1;
}

body.contact-mode.headline-complete .scroll-headline .scroll-char{
  color:#050507;
  opacity:1;
}

/* Hide only the little scroll guide after completion, never the headline */
body.headline-complete .hero::after{
  opacity:0;
}


/* --- correct sticky headline stage --- */

/*
  The hero is sticky only inside .hero-pin-stage.
  When the parent stage ends, sticky naturally releases and the user scrolls
  to the next section normally. No class-based position switching.
*/
.hero-pin-stage{
  position:relative;
  min-height:180vh;
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
}

.hero-pin-stage .hero{
  position:sticky;
  top:0;
  min-height:100vh;
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
  z-index:1;
}

.hero-pin-stage .headline-scroll-spacer{
  height:80vh;
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
}

/* Override previous release attempts */
body.headline-complete .hero,
body.headline-complete .hero-pin-stage .hero{
  position:sticky;
  top:0;
}

/* Make the next sections flow after the pin stage normally */
.hero-pin-stage + section,
.hero-pin-stage + .section{
  position:relative;
  z-index:2;
}

/* Keep headline visible after reveal */
body.headline-complete .scroll-headline .scroll-char{
  color:#fff;
  opacity:1;
}

body.contact-mode.headline-complete .scroll-headline .scroll-char{
  color:#050507;
  opacity:1;
}

/* Remove any accidental huge empty spacing from previous main > spacer rule */
main > .headline-scroll-spacer{
  display:none;
}

@media(max-width:1000px){
  .hero-pin-stage,
  .hero-pin-stage .hero,
  .hero-pin-stage .headline-scroll-spacer{
    max-width:100%;
  }
}

@media(max-width:620px){
  .hero-pin-stage{
    min-height:160vh;
  }

  .hero-pin-stage .headline-scroll-spacer{
    height:60vh;
  }
}


/* --- shorter about illustration draw --- */

.about .scribble-svg{
  width:min(100%,390px);
  max-height:280px;
}

.scribble-base,
.scribble-draw{
  stroke-width:5.5;
}

@media(max-width:620px){
  .about .scribble-svg{
    max-height:240px;
  }
}


/* --- Apercu body typography scale update --- */

/*
  Raise all Apercu-based paragraph/body/helper typography to a minimum
  readable editorial size while preserving smaller mono utility labels/nav.
*/
body,
p,
.body-copy,
.contact-copy p,
.apple-modal p,
.logo-grid p,
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form span{
  font-family:"Apercu",sans-serif;
  font-size:max(24px, 1.18vw);
  line-height:1.42;
  letter-spacing:-0.015em;
  font-weight:300;
}

/* Keep the actual utility/mono interface text compact */
nav,
.kicker,
.section-heading p,
.text-button,
.frost-overlay p,


/* Logo captions should feel editorial */
.logo-grid h3{
  margin-top:4px;
}

.logo-grid p{
  margin-top:2px;
}

/* Inputs and placeholders should match the larger editorial type scale */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  font-size:24px;
}

/* Keep service cards balanced despite larger body text elsewhere */
.apple-card h3,
.apple-modal h2,
.apple-modal span{
  line-height:1.04;
}

@media(max-width:620px){
  body,
  p,
  .body-copy,
  .contact-copy p,
  .apple-modal p,
  .logo-grid p,
  .contact-form input,
  .contact-form textarea,
  .contact-form button,
  .contact-form span{
    font-size:24px;
  }
}


/* --- GLOBAL Apercu 24px minimum enforcement --- */

/*
  EVERY instance of Apercu or Apercu Mono across the site
  now has a minimum 24px size.
*/

/* Apercu */
body,
p,
.body-copy,
.contact-copy p,
.apple-modal p,
.logo-grid p,
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form span,
nav,
.kicker,
.section-heading p,
.text-button,
.frost-overlay p,
footer,


/* Apercu Mono */
nav,
.kicker,
.section-heading p,
.text-button,
.frost-overlay p,
.apple-card span,
.contact-form span,
footer strong,
.scribble-label-svg{
  font-family:"Apercu Mono",monospace;
  font-size:24px !important;
  line-height:1.25;
  letter-spacing:-0.02em;
  font-weight:400;
}

/* Inputs/placeholders/buttons */
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  font-size:24px !important;
}

/* Overlay labels */
.frost-overlay p{
  margin-bottom:14px;
}

/* Footer readability */
footer{
  gap:24px;
}

/* Mobile still stays at minimum 24 */
@media(max-width:620px){
  body,
  p,
  .body-copy,
  .contact-copy p,
  .apple-modal p,
  .logo-grid p,
  .contact-form input,
  .contact-form textarea,
  .contact-form button,
  .contact-form span,
  nav,
  .kicker,
  .section-heading p,
  .text-button,
  .frost-overlay p,
  footer,
  footer strong,
  .apple-card span,
  .scribble-label-svg{
    font-size:24px !important;
  }
}


/* --- refined Apercu sizing: 16–20px --- */

/* Editorial/body Apercu text */
body,
p,
.body-copy,
.contact-copy p,
.apple-modal p,
.logo-grid p,
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form span{
  font-family:"Apercu",sans-serif;
  font-size:clamp(16px,1.2vw,20px) !important;
  line-height:1.42;
  letter-spacing:-0.015em;
  font-weight:300;
}

/* Utility/mono Apercu text */
nav,
.kicker,
.section-heading p,
.text-button,
.frost-overlay p,
.apple-card span,
footer,
footer strong,
.scribble-label-svg{
  font-family:"Apercu Mono",monospace;
  font-size:clamp(16px,1vw,18px) !important;
  line-height:1.25;
  letter-spacing:-0.01em;
  font-weight:400;
}

/* Inputs/placeholders */
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  font-size:clamp(16px,1.2vw,20px) !important;
}

/* Slightly larger helper/editorial copy */
.body-copy,
.contact-copy p,
.apple-modal p{
  font-size:clamp(18px,1.3vw,20px) !important;
}

@media(max-width:620px){
  body,
  p,
  .body-copy,
  .contact-copy p,
  .apple-modal p,
  .logo-grid p,
  .contact-form input,
  .contact-form textarea,
  .contact-form button,
  .contact-form span{
    font-size:16px !important;
  }

  nav,
  .kicker,
  .section-heading p,
  .text-button,
  .frost-overlay p,
  .apple-card span,
  footer,
  footer strong,
  .scribble-label-svg{
    font-size:16px !important;
  }
}


/* --- final A/B drawing label + timing fix --- */

.about .scribble-svg{
  width:min(100%,360px);
  max-height:250px;
  overflow:visible;
}

.scribble-base,
.scribble-draw{
  stroke-width:5;
}

/* Keep labels readable and away from the stroke */
.scribble-label-svg{
  font-size:18px !important;
  paint-order:stroke;
  stroke:var(--bg);
  stroke-width:8px;
  stroke-linejoin:round;
}

/* A sits right beside the actual path start */
.label-a-svg{
  transform:translate(-34px,-12px);
}

/* B sits just beyond the final endpoint, not under the line */
.label-b-svg{
  transform:translate(18px,8px);
}

body.contact-mode .scribble-label-svg{
  stroke:var(--contact-bg,#FAF3C7);
}

/* Make the white drawing finish before it visually collides with B */
.scribble-draw{
  stroke-linecap:round;
}

@media(max-width:620px){
  .about .scribble-svg{
    width:min(100%,320px);
    max-height:220px;
  }

  .scribble-label-svg{
    font-size:16px !important;
    stroke-width:7px;
  }
}

/* Case-study links */
.work-tile{cursor:pointer}


/* Project link transition affordance */
body.leaving-page{
  opacity:.92;
  transition:opacity .18s ease;
}
.project-link{
  cursor:pointer;
}
.project-link:hover{
  transform:translateY(-2px);
}


/* CSV-populated project images */
.tile-image[style*="--image:url"]{
  background-image:var(--image);
}
.all-projects-grid .logo-item{
  min-width:0;
}


/* --- universal 10px radius system --- */

.work-tile,
.logo-tile,
.tile-image,
.frost-overlay,
.apple-card,
.apple-modal,
.contact-form input,
.contact-form textarea,
.scroll-headline,
.lettering-card,
.logo-grid span,
.case-media,
.case-hero-image,
.case-image,
.impact-card,
.augment,
.program-list span{
  border-radius:10px !important;
}


/* --- unified filterable work section --- */

.filter-bar::-webkit-scrollbar{display:none}.filter-bar{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;padding-inline:clamp(20px,4vw,40px);margin-bottom:clamp(28px,4vw,48px)}

.filter-pill{
  border:0;
  border-radius:10px;
  padding:9px 12px;
  background:rgba(255,255,255,.075);
  color:inherit;
  font-family:"Apercu",sans-serif;
  font-size:clamp(16px,1vw,18px);
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
;flex-shrink:0}

.filter-pill:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.14);
}

.filter-pill.is-active{
  background:#fff;
  color:#050507;
}

body.contact-mode .filter-pill{
  background:rgba(5,5,7,.08);
  color:#050507;
}

body.contact-mode .filter-pill.is-active{
  background:#050507;
  color:#fff;
}

.work-item{
  display:block;
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease;
}

.work-item.is-hidden{
  display:none;
}

.work-item h3{
  margin:10px 0 4px;
}

.work-item > p{
  margin:0;
  color:var(--muted);
  font-family:"Apercu",sans-serif;
  font-size:clamp(16px,1.1vw,20px);
}

.filterable-grid{
  align-items:start;
}


/* --- quick A-to-B draw timing visual support --- */

.scribble-section{
  scroll-margin-top:18vh;
}

.scribble-draw{
  transition:stroke-dashoffset .06s linear;
}


/* 2x faster line animation */
.scribble-draw{
  transition:stroke-dashoffset .03s linear;
}


/* --- homepage work link fix polish --- */
.work-item .work-tile,
.logo-item .work-tile{
  cursor:pointer;
}

.filterable-grid,
.all-projects-grid,
.logo-grid{
  gap:clamp(9px,1.2vw,17px) !important;
}


/* remove frosted white overlay behind work card text */
.frost-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:20px;
  background:transparent !important;
  backdrop-filter:none !important;
}

.frost-overlay::before{
  display:none !important;
}


/* --- hero scroll arrow cue --- */

.hero-actions.hero-scroll-cue-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:clamp(22px,5vw,48px);
}

.hero-scroll-cue{display:grid;place-items:center;color:rgba(255,255,255,.52);text-decoration:none;transition:color .2s,transform .3s ease;animation:cue-bob 2.4s ease-in-out infinite}

.hero-scroll-cue span{
  display:block;
  font-family:"Apercu",sans-serif;
  font-size:24px;
  line-height:1;
}

.hero-scroll-cue.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  animation:heroArrowBounce 1.8s ease-in-out infinite;
}

.hero-scroll-cue:hover{color:rgba(255,255,255,.9);transform:translateY(4px)}

@keyframes heroArrowBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}

body.contact-mode .hero-scroll-cue{display:grid;place-items:center;color:rgba(255,255,255,.52);text-decoration:none;transition:color .2s,transform .3s ease;animation:cue-bob 2.4s ease-in-out infinite}

body.contact-mode .hero-scroll-cue:hover{color:rgba(255,255,255,.9);transform:translateY(4px)}

.work-heading p{
  max-width:720px;
}


/* --- image hover behavior: lift, no zoom --- */

/* Disable any image zoom transforms */
.work-tile:hover .tile-image,
.logo-tile:hover .tile-image,
.case-media:hover .case-hero-image,
.case-media:hover .case-image,
.case-media:hover img,
.case-media:hover video,
.drag-carousel-slide:hover img,
.drag-carousel-slide:hover video,
.gallerysheet__item:hover img,
.gallerysheet__item:hover video,
.flipbook-card:hover img{
  transform:none !important;
  scale:1 !important;
  filter:none !important;
}

/* Lift the whole image/card instead, like filter tags */
.work-tile,
.logo-tile,
.case-media,
.drag-carousel-slide,
.gallerysheet__item,
.flipbook-card{
  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease !important;
}

.work-tile:hover,
.logo-tile:hover,
.case-media:hover,
.drag-carousel-slide:hover,
.gallerysheet__item:hover,
.flipbook-card:hover{
  transform:translateY(-2px) !important;
}

/* Keep overlay text behavior intact without zooming the image */
.work-tile:hover .frost-overlay,
.logo-tile:hover .frost-overlay{
  opacity:1;
}

/* If project-page CSS has stronger hover rules, override there too */
.tile-image{
  transition:none !important;
}


/* --- frosted hover overlay, top-left text, no duplicate captions --- */

/* Card overlay starts hidden, no always-on white panel */
.frost-overlay{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  padding:20px !important;
  text-align:left !important;
  opacity:0;
  background:
    linear-gradient(
      to bottom,
      rgba(5,5,7,.72) 0%,
      rgba(5,5,7,.42) 38%,
      rgba(5,5,7,.08) 100%
    ) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  transition:opacity .25s ease !important;
  pointer-events:none;
}

.frost-overlay::before{
  display:none !important;
}

.work-tile:hover .frost-overlay,
.logo-tile:hover .frost-overlay{
  opacity:1 !important;
}

.frost-overlay p,
.frost-overlay h2{
  color:#fff !important;
  text-align:left !important;
  margin-left:0 !important;
  max-width:88%;
}

.frost-overlay p{
  margin:0 0 8px !important;
}

.frost-overlay h2{
  margin:0 !important;
}

/* Keep image lift, but text overlay should not shift */
.work-tile:hover .frost-overlay,
.logo-tile:hover .frost-overlay{
  transform:none !important;
}

/* Remove visual spacing left behind by deleted captions */
.work-item,
.logo-item{
  display:block;
}

.work-item > h3,
.work-item > p,
.logo-item > h3,
.logo-item > p{
  display:none !important;
}


/* --- card title + description typography --- */

/* Globally keep paragraph/body type as lightweight Apercu */
p,
.body-copy,
.contact-copy p,
.apple-modal p,
.logo-grid p,
.work-item > p,
.logo-item > p,
.project-tldr,
.case-thesis{
  font-family:"Apercu",sans-serif !important;
  font-weight:300 !important;
  letter-spacing:-0.015em;
}

/* Project card titles under image boxes */
.work-item > h3,
.logo-item > h3{
  display:block !important;
  margin:10px 0 4px !important;
  font-family:"Apercu",sans-serif !important;
  font-size:20px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  letter-spacing:-0.025em;
  color:inherit;
}

/* Project card descriptions under image boxes */
.work-item > p,
.logo-item > p{
  display:block !important;
  margin:0 !important;
  font-family:"Apercu",sans-serif !important;
  font-size:clamp(16px,1.05vw,18px) !important;
  line-height:1.35 !important;
  font-weight:300 !important;
  color:var(--muted);
}

/* Make sure the overlay still uses the tag/kicker and title only */
.frost-overlay p{
  font-weight:400 !important;
}


/* --- global typography system --- */

h1,
h2,
h3,
h4,
.display,
.section-heading p{
  font-family:"Reckless", serif !important;
  font-weight:500 !important;
  letter-spacing:-0.04em;
  line-height:.98;
}

h1{ font-size:36px !important; }
h2{ font-size:27px !important; }
h3{ font-size:18px !important; }
h4{ font-size:16px !important; }

p,
.body-copy,
.work-item > p,
.logo-item > p,
.contact-copy,
.project-tldr,
.case-copy,
input,
textarea,
button,
label{
  font-family:"Apercu Pro","Apercu",sans-serif !important;
  font-size:16px !important;
  font-weight:300 !important;
  line-height:1.4;
  letter-spacing:-0.01em;
}

.frost-overlay h2{
  font-size:27px !important;
}

.frost-overlay p{
  font-size:16px !important;
  font-weight:300 !important;
}

.work-item > h3,
.logo-item > h3{
  font-size:18px !important;
  font-family:"Reckless", serif !important;
  font-weight:500 !important;
}


/* --- global paragraph sizing update --- */

p,
.body-copy,
.work-item > p,
.logo-item > p,
.contact-copy,
.project-tldr,
.case-copy,
input,
textarea,
button,
label{
  font-size:18px !important;
  line-height:1.5 !important;
}


/* --- filtered project cards: hover-only info --- */
.work-item > h3,
.work-item > p,
.logo-item > h3,
.logo-item > p{
  display:none !important;
}


/* =========================================================
   SECTION DIVIDERS
   ========================================================= */

.section,
section{
  position:relative;
}

.section::before,
section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(247,247,242,.12);
  pointer-events:none;
}

/* avoid line at very top hero */
.hero::before,
.site-hero::before,
.hero-section::before,
header::before{
  display:none !important;
}

/* keep lines aligned with content container */
.section > *,
section > *{
  position:relative;
  z-index:1;
}


/* =========================================================
   SECTION LABELS UNDER DIVIDER LINES
   ========================================================= */

section,
.section{
  padding-top:clamp(54px,7vw,86px);
}

section::after,
.section::after{
  content:attr(data-section-label);
  position:absolute;
  top:10px;
  left:max(20px,calc((100vw - 960px)/2));
  z-index:2;
  font-family:"Apercu Pro","Apercu",sans-serif;
  font-size:18px;
  font-weight:300;
  line-height:1;
  letter-spacing:-0.01em;
  color:rgba(247,247,242,.58);
  pointer-events:none;
}

/* Keep hero label from crowding the headline too much */
.hero{
  padding-top:clamp(72px,9vw,112px);
}

/* =========================================================
   CONTACT ALIGNMENT + HEIGHT
   ========================================================= */

#contact{
  min-height:auto !important;
}

#contact .contact-grid,
#contact .contact-layout,
#contact .contact-inner,
#contact .contact-content{
  align-items:start !important;
  max-height:960px !important;
}

#contact .contact-copy,
#contact form,
#contact .contact-form{
  align-self:start !important;
}

#contact .contact-form,
#contact form{
  margin-top:0 !important;
}

/* If the contact section itself is the grid/container */
#contact{
  align-items:start !important;
}

@media(max-width:760px){
  section::after,
  .section::after{
    left:20px;
  }

  #contact .contact-grid,
  #contact .contact-layout,
  #contact .contact-inner,
  #contact .contact-content{
    max-height:none !important;
  }
}


/* =========================================================
   SECTION LABELS: TOP LEFT, TITLE CASE, BELOW LINE
   ========================================================= */

section::after,
.section::after{
  top:12px !important;
  left:20px !important;
  text-transform:none !important;
  font-family:"Apercu Pro","Apercu",sans-serif !important;
  font-size:18px !important;
  font-weight:300 !important;
  line-height:1 !important;
  letter-spacing:-0.01em !important;
  color:rgba(247,247,242,.58) !important;
}

/* Redundant heading blocks removed from HTML; hide leftovers if any */
.section-heading.work-heading{
  display:none !important;
}


/* =========================================================
   HOMEPAGE LABEL CLEANUP
   ========================================================= */

/* No label at the very top hero */
.hero::after{
  display:none !important;
}

/* Ensure Work section label/line remain visible and top-left */
#work::before{
  display:block !important;
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(247,247,242,.12);
}

#work::after{
  display:block !important;
  content:attr(data-section-label);
  position:absolute;
  top:12px !important;
  left:20px !important;
  font-family:"Apercu Pro","Apercu",sans-serif !important;
  font-size:18px !important;
  font-weight:300 !important;
  line-height:1 !important;
  letter-spacing:-0.01em !important;
  color:rgba(247,247,242,.58) !important;
  pointer-events:none;
}

/* Better scroll destination for arrow click */
#work{
  scroll-margin-top:72px;
}

/* Remove any remaining kicker styling/visibility */
.kicker{
  display:none !important;
}


/* remove scroll headline background */
#scrollHeadline,
.scroll-headline,
.headline-shell,
.headline-panel{
  background:transparent !important;
}

.site-footer a{color:rgba(247,247,242,.36);text-decoration:none}.site-footer a:hover{color:var(--fg,#f7f7f2)}

/* ── Mobile nav hamburger ── */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:6px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px}
.nav-hamburger span{display:block;width:22px;height:1.2px;background:var(--fg,#f7f7f2);transition:transform .3s ease,opacity .3s ease,width .3s ease}
.nav-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.is-open span:nth-child(2){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:680px){
  .nav-hamburger{display:flex}
  .site-nav nav{
    position:fixed;inset:0;z-index:90;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:36px;
    background:var(--bg,#050507);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  .site-nav nav.is-open{opacity:1;pointer-events:auto}
  .site-nav nav a{font-size:clamp(28px,8vw,40px);font-family:"Reckless",Georgia,serif;font-weight:400;letter-spacing:.02em}
  .nav-hamburger{position:relative;z-index:100}
}

/* ── Unified button style — matches filter pills ── */
.filter-pill,
.btn,
.cta-btn,
button[type="submit"],
.hero-actions a,
.contact-submit {
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(247,247,242,.28);
  background:transparent;
  color:rgba(247,247,242,.6);
  font-family:"Apercu",sans-serif;font-size:14px;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
  white-space:nowrap;
  text-decoration:none;
}
.filter-pill:hover,.btn:hover,.cta-btn:hover,
button[type="submit"]:hover,.contact-submit:hover,
.filter-pill.is-active {
  color:#f7f7f2;
  border-color:rgba(247,247,242,.7);
  background:rgba(247,247,242,.07);
}

/* ── Form inputs — no jarring focus flash ── */
.contact-form input,
.contact-form textarea,
form input, form textarea {
  outline:none !important;
  border:1px solid rgba(247,247,242,.15) !important;
  transition:border-color .3s ease, background .3s ease !important;
  background:rgba(247,247,242,.04) !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
form input:focus, form textarea:focus {
  border-color:rgba(247,247,242,.15) !important;
  background:rgba(247,247,242,.04) !important;
}
/* Only highlight when the field has content */
.contact-form input:not(:placeholder-shown),
.contact-form textarea:not(:placeholder-shown),
form input:not(:placeholder-shown),
form textarea:not(:placeholder-shown) {
  border-color:rgba(247,247,242,.45) !important;
  background:rgba(247,247,242,.07) !important;
}

/* ── Reckless / serif — loosen tracking globally ── */
.reckless,
h1, h2, h3,
.contact-copy h2,
.contact-copy p,
.scroll-text,
[style*="Reckless"] {
  letter-spacing: .01em !important;
}
/* Hero scroll characters */
.scroll-char { letter-spacing: .015em !important; }