@font-face{
  font-family:'Gunterz';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/Gunterz-Medium.otf') format('opentype');
}
@font-face{
  font-family:'Panchang';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/Panchang-Semibold.woff2') format('woff2');
}

/* interpolate-size lets the FAQ animate to an auto height without JS */
html{interpolate-size:allow-keywords}

:root{
  --paper:#F6F4F1;
  --paper-dim:#EDEAE4;
  --ink:#111111;
  --ink-soft:#5A5A55;
  --ink-faint:#6F6C66;
  --rule:#E3DFD8;
  --orange:#FF8E26;
  /* Paper-only orange. #FF8E26 scores 2.09:1 on paper, which is unreadable.
     It stays the accent on dark backgrounds, borders and fills. */
  --orange-ink:#B25607;
  --mint:#59F4B2;
  --blue:#3E8BFF;
  --pink:#FF5E84;
  --purple:#8C52FF;
  --dark-meta:#8E8B84;
  --pad:clamp(1.25rem,5vw,4rem);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:77.5rem;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- type ----------
   Tracking and leading are size-specific. A single letter-spacing value is
   wrong at one end of the scale: large caps need tightening, small caps need
   releasing. Brand default stays -0.02em at mid sizes. */
.display{
  font-family:'Gunterz','Inter',sans-serif;
  font-weight:500;
  text-transform:uppercase;
}
h1.display{font-size:clamp(2.75rem,7.5vw,6.5rem);letter-spacing:-0.035em;line-height:0.90}
h2.display{font-size:clamp(2.1rem,4vw,3.4rem);letter-spacing:-0.025em;line-height:0.94;max-width:17ch}
h3.display{font-size:clamp(1.35rem,2.2vw,1.9rem);letter-spacing:-0.02em;line-height:1}
.pill{
  display:inline-block;
  font-family:'Panchang','Inter',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.75rem;
  line-height:1;
  padding:0.5625rem 0.875rem 0.5rem;
  border:1px solid currentColor;
  border-radius:6.25rem;
}
.mono{
  font-family:'Panchang','Inter',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.75rem;
}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-soft);line-height:1.65;text-wrap:pretty}
p{color:var(--ink-soft);text-wrap:pretty}

/* ---------- sections ---------- */
section{padding:clamp(4.5rem,10vw,8.75rem) 0}
.dark{background:var(--ink);color:var(--paper)}
.dark p,.dark .lead{color:#B9B6AF}

.split{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,6vw,5rem);align-items:end}
.split .right{text-align:right;max-width:52ch;justify-self:end}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;
  font-family:'Inter',sans-serif;font-weight:500;font-size:0.9375rem;
  padding:1rem 1.75rem;border-radius:6.25rem;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;
  transition:transform 140ms var(--ease-out),background 180ms ease,color 180ms ease,border-color 180ms ease;
}
.btn:hover{transform:translateY(-2px);background:var(--orange);border-color:var(--orange);color:var(--ink)}
/* Press feedback fires on pointer-down. Hover does not exist on a phone,
   so without this a tap gives no feedback at all. */
.btn:active{transform:scale(0.97);transition-duration:100ms}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dark .btn,.hero .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dark .btn:hover,.hero .btn:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.dark .btn.ghost,.hero .btn.ghost{background:transparent;color:var(--paper);border-color:#46443F}
.dark .btn.ghost:hover,.hero .btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn[disabled]{opacity:.6;pointer-events:none}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;gap:0.5625rem;text-decoration:none;color:inherit}
.logo .shapes{display:flex;align-items:center;gap:0.25rem}
.logo .sq{width:0.8125rem;height:0.8125rem;background:linear-gradient(135deg,var(--purple),#FF5757)}
.logo .ci{width:0.8125rem;height:0.8125rem;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--blue))}
.logo .tr{width:0;height:0;border-left:0.75rem solid var(--orange);border-top:0.4375rem solid transparent;border-bottom:0.4375rem solid transparent}
.logo .word{font-family:'Gunterz','Inter',sans-serif;text-transform:uppercase;letter-spacing:-0.01em;font-size:1.0625rem;line-height:1;padding-top:2px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:4.625rem}
.nav-links{display:flex;gap:2.125rem}
.nav-links a{
  font-family:'Panchang','Inter',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:0.1em;font-size:0.75rem;color:var(--ink);text-decoration:none;opacity:.78;
  transition:opacity 160ms ease;
}
.nav-links a:hover{opacity:1}
.nav-cta{padding:0.75rem 1.375rem;font-size:0.875rem}
.nav-right{display:flex;align-items:center;gap:0.75rem}

/* mobile menu button, hidden on desktop */
.menu-btn{
  display:none;width:2.75rem;height:2.75rem;border:1px solid var(--rule);background:transparent;
  border-radius:6.25rem;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:transform 140ms var(--ease-out),border-color 160ms ease;
}
.menu-btn:active{transform:scale(0.94)}
.menu-btn span{display:block;width:1.125rem;height:1.5px;background:var(--ink);transition:transform 220ms var(--ease-out),opacity 160ms ease}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
/* Opens downward from the button and closes back along the same path. */
.mobile-menu{
  display:none;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper);
  transform-origin:top right;
}
.mobile-menu[hidden]{display:none}
.mobile-menu .inner{display:flex;flex-direction:column;gap:0.25rem;padding:1rem 0 1.5rem}
.mobile-menu a{
  font-family:'Panchang','Inter',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:0.1em;font-size:0.8125rem;color:var(--ink);text-decoration:none;padding:0.875rem 0;
  border-bottom:1px solid var(--rule);
}
@keyframes menu-in{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{
  color:var(--paper);position:relative;overflow:hidden;
  background:
    linear-gradient(rgba(17,17,17,.86),rgba(17,17,17,.92)),
    url(images/hero.webp) center/cover no-repeat,
    var(--ink);
  padding:clamp(5.625rem,13vw,10rem) 0 clamp(3.75rem,7vw,6rem);
  text-align:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);
  background-size:4rem 4rem;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 78%);
}
.hero .wrap{position:relative}
.hero .pill{color:var(--orange);margin-bottom:1.625rem}
.hero h1{max-width:16ch;margin:0 auto}
.hero .lead{max-width:60ch;margin:1.625rem auto 0;color:#C3C0B9}
.hero-actions{display:flex;gap:0.875rem;justify-content:center;flex-wrap:wrap;margin-top:2.375rem}
.hero-strip{margin-top:3.25rem;padding-top:1.375rem;border-top:1px solid #2A2A28;color:#8B887F}
.slot-tag{
  position:absolute;right:var(--pad);bottom:1.375rem;color:#5A5750;
  font-family:'Panchang','Inter',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:0.1em;font-size:0.625rem;
}
/* One load-in, on the hero only. Rare tier: a visitor sees it once. */
.rise{opacity:0;transform:translateY(0.75rem);animation:rise 500ms var(--ease-out) forwards}
.rise:nth-of-type(1){animation-delay:60ms}
.hero .pill.rise{animation-delay:60ms}
.hero h1.rise{animation-delay:120ms}
.hero .lead.rise{animation-delay:180ms}
.hero-actions.rise{animation-delay:240ms}
.hero-strip.rise{animation-delay:300ms}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- problem trays ----------
   A moulded-slab treatment kept to this one section: a bevelled light tray
   holding a recessed dark tile. The inner radius is the outer minus the tray
   padding, so the curves stay concentric. No hover lift, because these are not
   clickable and motion there would imply an affordance that does not exist. */
.punch{margin-top:clamp(3rem,7vw,5rem);display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.75rem)}
.tray{
  background:linear-gradient(180deg,#FFFFFF 0%,var(--paper) 52%,#E0DBD2 100%);
  border-radius:3rem;
  padding:1rem;
  display:flex;
  gap:1rem;
  box-shadow:
    0 1.5rem 2.75rem -1.125rem rgba(17,17,17,.20),
    0 0.5rem 1rem -0.375rem rgba(17,17,17,.10),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -2px 4px rgba(60,50,30,.10);
}
.tile{
  background:linear-gradient(180deg,#1B1B1A 0%,var(--ink) 100%);
  color:var(--paper);
  border-radius:2.125rem;
  position:relative;
  overflow:hidden;
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 2px 3px rgba(255,255,255,.5);
}
.tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.05) 0%,transparent 32%,transparent 70%,rgba(0,0,0,.28) 100%);
}
.tile-label{
  flex:0 0 22%;aspect-ratio:1/1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:1.25rem;gap:0.5rem;
}
.tile-label .num{
  font-family:'Gunterz','Inter',sans-serif;font-size:clamp(1.75rem,3vw,2.75rem);
  line-height:.85;letter-spacing:-0.02em;color:var(--orange);
}
.tile-label .word{
  font-family:'Panchang','Inter',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:0.1em;font-size:0.6875rem;color:var(--dark-meta);
}
.tile-body{flex:1;padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3.5vw,2.75rem);display:flex;flex-direction:column;justify-content:center;gap:0.625rem}
.tile-body h3{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:600;color:var(--paper)}
.tile-body p{color:#B4B1AA;font-size:.98rem;margin:0}
.closing{margin-top:clamp(2.5rem,5vw,3.5rem);max-width:62ch;font-size:1.15rem;color:var(--ink-soft)}

/* ---------- why us ---------- */
.why{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.25rem,6vw,5rem);margin-top:clamp(2.75rem,6vw,4.5rem);align-items:start}
.reasons{display:grid;gap:1.875rem}
.reason{border-left:2px solid var(--orange);padding-left:1.375rem}
.reason:nth-child(2){border-color:var(--blue)}
.reason:nth-child(3){border-color:var(--mint)}
.reason h4{font-size:1.02rem;font-weight:600;margin-bottom:0.4375rem}
.reason p{font-size:.97rem}

/* photos */
.photo-frame{overflow:hidden;background:var(--paper-dim);min-height:17.5rem}
.slot{
  border:1px dashed var(--rule);background:var(--paper-dim);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);text-align:center;padding:1.5rem;min-height:17.5rem;
}
.steps .slot{align-self:stretch;min-height:24rem}
.slot span{max-width:28ch;line-height:1.7}
.steps .photo-frame{align-self:stretch;min-height:24rem}
.photo{width:100%;height:100%;object-fit:cover;display:block}
.photo.faces{object-position:center 32%}
.photo.top{object-position:center 12%}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.125rem;margin-top:clamp(2.75rem,6vw,4.5rem)}
.fact{background:var(--paper);color:var(--ink);padding:1.75rem 1.5rem 1.5rem;border-left:4px solid var(--orange);min-height:11.875rem;display:flex;flex-direction:column;justify-content:space-between}
.fact:nth-child(2){border-color:var(--mint)}
.fact:nth-child(3){border-color:var(--blue)}
.fact:nth-child(4){border-color:var(--pink)}
.fact .big{
  font-family:'Gunterz','Inter',sans-serif;text-transform:uppercase;
  letter-spacing:-0.02em;font-size:clamp(1.9rem,3.4vw,3rem);line-height:.95;text-wrap:balance;
}
.fact p{font-size:.92rem;color:var(--ink-soft);margin-top:0.875rem}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.25rem,6vw,5rem);margin-top:clamp(2.75rem,6vw,4.5rem);align-items:start}
.step{background:#fff;border:1px solid var(--rule);padding:1.875rem;display:grid;grid-template-columns:3.5rem 1fr;gap:1.25rem;margin-bottom:1rem}
.step .num{
  font-family:'Gunterz','Inter',sans-serif;font-size:2.4rem;line-height:.8;
  letter-spacing:-0.02em;color:var(--orange-ink);
}
.step h4{font-size:1.08rem;font-weight:600;margin-bottom:0.5rem}
.step p{font-size:.96rem}

/* ---------- guarantee ---------- */
.guarantee{background:var(--paper-dim);text-align:center}
.stamp{
  display:inline-block;border:2px solid var(--ink);padding:clamp(2.125rem,5vw,3.625rem) clamp(1.875rem,6vw,4.5rem);
  transform:rotate(-2deg);background:var(--paper);max-width:51.25rem;
}
.stamp .pill{color:var(--ink);margin-bottom:1.5rem}
.stamp h2{margin-bottom:1.375rem;font-size:clamp(1.9rem,3.4vw,3rem);max-width:19ch;margin-left:auto;margin-right:auto}
.stamp p{max-width:52ch;margin:0 auto;font-size:1.05rem}
.stamp .bar{height:6px;width:7.5rem;background:var(--mint);margin:0 auto 1.625rem}

/* ---------- faq ---------- */
.faq-list{margin-top:clamp(2.5rem,5vw,4rem);max-width:56.25rem}
details{border-top:1px solid var(--rule)}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{
  list-style:none;cursor:pointer;padding:1.5rem 2.75rem 1.5rem 0;position:relative;
  font-size:1.08rem;font-weight:600;color:var(--ink);
}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--orange-ink);outline-offset:2px}
summary::after{
  content:"";position:absolute;right:0.5rem;top:50%;width:0.6875rem;height:0.6875rem;
  border-radius:50%;border:1.5px solid var(--ink);transform:translateY(-50%);
  transition:background 160ms ease;
}
details[open] summary::after{background:var(--ink)}
/* Animates open instead of snapping, so the page does not jump under the reader. */
details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size 220ms var(--ease-out),content-visibility 220ms allow-discrete;
}
details[open]::details-content{block-size:auto}
details p{padding:0 3.75rem 1.625rem 0;font-size:1rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.25rem,6vw,5rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start}
form{background:#fff;border:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.25rem)}
.field{margin-bottom:1.125rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;font-size:0.8125rem;font-weight:500;margin-bottom:0.4375rem;color:var(--ink)}
input,textarea,select{
  width:100%;padding:0.8125rem 0.875rem;border:1px solid var(--rule);background:var(--paper);
  font-family:'Inter',sans-serif;font-size:0.9375rem;color:var(--ink);border-radius:0;
  transition:border-color 160ms ease;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink)}
textarea{min-height:6.875rem;resize:vertical}
.form-note{font-size:0.8125rem;color:var(--ink-soft);margin-top:0.875rem}
form .btn{width:100%}
/* Validation shows on blur, not on submit. */
.field .err{display:none;font-size:0.8125rem;color:#B3261E;margin-top:0.375rem}
.field.invalid input{border-color:#B3261E}
.field.invalid .err{display:block}
.spinner{
  width:0.9375rem;height:0.9375rem;border:2px solid #ffffff59;border-top-color:#fff;
  border-radius:50%;animation:spin 700ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.form-status{
  margin-top:1rem;padding:0.875rem 1rem;font-size:0.9375rem;
  animation:rise 200ms var(--ease-out) forwards;opacity:0;
}
.form-status.ok{background:#EAF6EF;color:#1E5B3A;border-left:3px solid #1E5B3A}
.form-status.bad{background:#FBEAE9;color:#8C1D18;border-left:3px solid #8C1D18}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:4rem 0 2.5rem}
.foot-top{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;padding-bottom:2.25rem;border-bottom:1px solid #2A2A28}
.foot-links{display:flex;gap:1.875rem;flex-wrap:wrap}
.foot-links a{color:#B9B6AF;text-decoration:none;transition:color 160ms ease}
.foot-links a:hover{color:var(--paper)}
.foot-bot{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;padding-top:1.625rem;color:var(--dark-meta)}

/* ---------- responsive ---------- */
@media(max-width:56.25rem){
  .split,.why,.steps,.contact-grid{grid-template-columns:1fr}
  .split .right{text-align:left;justify-self:start}
  .facts{grid-template-columns:1fr 1fr}
  .tray{flex-direction:column;border-radius:2rem;gap:0.75rem;padding:0.75rem}
  .tile{border-radius:1.375rem}
  .tile-label{flex:0 0 auto;aspect-ratio:auto;flex-direction:row;gap:0.75rem;padding:1rem 1.25rem;justify-content:flex-start}
  .tile-label .num{font-size:1.5rem}
  .nav-links{display:none}
  .menu-btn{display:flex}
  .mobile-menu{display:block}
  .nav-cta{display:none}
}
@media(max-width:35rem){
  .facts{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
}

/* ---------- reduced motion ----------
   Gentler, not zero. Opacity survives, travel and scaling do not. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{transform:none;animation-duration:200ms}
  .btn:hover{transform:none}
  .btn:active{transform:none}
  .menu-btn:active{transform:none}
  details::details-content{transition-duration:1ms}
  .spinner{animation-duration:1400ms}
}