/* Hallmark · macrostructure: Split Editorial · tone: premium-craftsman · anchor hue: amber/ochre
 * theme: custom (vibe: earthy-elevated builder · paper oklch(96.5% .012 85) · accent oklch(64% .135 62) warm · Fraunces + Archivo)
 * pre-emit critique: P5 H4 E4 S5 R4 V4
 */

/* ============ TOKENS ============ */
:root{
  --paper:        oklch(96.5% 0.012 85);
  --paper-2:      oklch(93.5% 0.016 82);
  --ink:          oklch(23% 0.014 60);
  --ink-2:        oklch(16% 0.012 55);
  --bone:         oklch(96.5% 0.012 85);
  --muted:        oklch(50% 0.012 65);
  --muted-d:      oklch(73% 0.015 72);
  --accent:       oklch(64% 0.135 62);
  --accent-d:     oklch(57% 0.13 56);
  --timber:       oklch(38% 0.07 50);
  --line:         oklch(86% 0.012 80);
  --line-d:       oklch(33% 0.016 58);

  --disp:"Newsreader", Georgia, serif;
  --body:"Archivo", system-ui, sans-serif;
  --mono:"Spline Sans Mono", ui-monospace, monospace;

  --maxw:1240px;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  --r:14px; --r-sm:8px;

  --t-display:clamp(2.7rem, 6.2vw, 5.2rem);
  --t-h2:clamp(1.9rem, 3.6vw, 3.1rem);
  --t-h3:clamp(1.2rem, 1.8vw, 1.55rem);
  --t-lede:clamp(1.05rem, 1.5vw, 1.3rem);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur:.8s;
}

/* ============ RESET / BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:17px;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;font-style:normal;line-height:1.05;letter-spacing:-0.02em;overflow-wrap:anywhere;min-width:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bone);padding:10px 16px;z-index:200}
.skip-link:focus{left:8px;top:8px}

.kicker{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-d)}
.kicker--light{color:var(--accent)}
.eyebrow{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d)}

.sec-head{max-width:760px;margin-bottom:var(--s-6)}
.sec-title{font-size:var(--t-h2);margin-top:var(--s-2)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--body);font-weight:600;font-size:.97rem;
  padding:.85em 1.5em;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;
  transition:transform .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
  white-space:nowrap;
}
.btn--solid{background:var(--accent);color:oklch(20% 0.02 60)}
.btn--solid:hover{background:var(--accent-d);transform:translateY(-2px)}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone);transform:translateY(-2px)}
.btn--block{width:100%;justify-content:center;margin-top:var(--s-2)}
.btn--phone{background:var(--accent);color:oklch(20% 0.02 60);padding:.8em 1.5em;font-size:1.08rem}
.btn--phone:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent-d);outline-offset:2px}

/* ============ MASTHEAD ============ */
.masthead{position:sticky;top:0;z-index:100;background:color-mix(in oklch, var(--ink-2) 90%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-d)}
.masthead__inner{display:flex;align-items:center;gap:var(--s-4);min-height:106px}
.brand__logo{height:80px;width:auto;object-fit:contain}
.nav{display:flex;gap:var(--s-5);margin-left:auto;font-size:1.12rem;font-weight:500}
.nav a{position:relative;padding:4px 0;color:var(--muted-d);white-space:nowrap;transition:color .18s var(--ease-out)}
.nav a:hover{color:var(--bone)}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent);transition:width .22s var(--ease-out)}
.nav a:hover::after{width:100%}
.masthead .btn--phone{margin-left:0}

/* ============ HERO (split) ============ */
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:min(86vh,820px);position:relative;background:var(--ink-2)}
.hero__media{position:relative;overflow:hidden}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;will-change:transform}
.hero__panel{background:var(--ink-2);color:var(--bone);display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,5vw,80px) clamp(24px,4vw,72px)}
.hero__title{font-size:var(--t-display);font-weight:700;color:var(--bone);margin:var(--s-3) 0 var(--s-3)}
.hero__lede{font-size:var(--t-lede);color:var(--muted-d);max-width:34ch;margin-bottom:var(--s-4)}
.hero__cta{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}
.hero__panel .btn--ghost{border-color:var(--muted-d);color:var(--bone)}
.hero__panel .btn--ghost:hover{background:var(--bone);color:var(--ink-2)}
.hero__note{font-size:.9rem;color:var(--muted-d)}

/* ============ TRUST STRIP ============ */
.trust{background:var(--timber);color:var(--bone);border-top:1px solid color-mix(in oklch,var(--bone) 10%,transparent)}
.trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:var(--s-7) 0}
.trust__item{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:3px;align-items:center;padding:4px clamp(22px,2.6vw,44px)}
.trust__item:first-child{padding-left:0}
.trust__item:not(:first-child)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:color-mix(in oklch,var(--bone) 14%,transparent)}
.trust__ico{grid-column:1;grid-row:1 / 3;align-self:center;width:44px;height:44px;color:var(--accent);margin:0}
.trust__ico svg{width:100%;height:100%}
.trust__item:hover .trust__ico{transform:translateY(-3px) scale(1.06);color:var(--accent-d)}
.trust__k{grid-column:2;grid-row:1;align-self:end;font-family:var(--disp);font-size:1.45rem;font-weight:700;color:var(--bone);line-height:1.1;transition:color .25s var(--ease-out)}
.trust__item:hover .trust__k{color:var(--accent)}
.trust__v{grid-column:2;grid-row:2;align-self:start;font-size:.9rem;color:color-mix(in oklch,var(--bone) 80%,transparent)}

/* ============ SERVICES ============ */
.services{padding:var(--s-8) 0}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.svc{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:clamp(28px,3vw,44px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .35s var(--ease-out),background-color .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.svc:hover{transform:translateY(-4px);background:var(--ink-2);border-color:var(--ink-2);box-shadow:0 36px 70px -44px rgba(20,15,8,.6)}
.svc__ico{width:46px;height:46px;color:var(--accent-d);transition:transform .4s var(--ease-out),color .35s var(--ease-out)}
.svc__ico svg{width:100%;height:100%}
.svc:hover .svc__ico{color:var(--accent);transform:translateY(-2px) rotate(-4deg) scale(1.05)}
.svc__name{font-size:clamp(1.45rem,2.4vw,2rem);font-weight:600;margin-top:var(--s-1);transition:color .35s var(--ease-out)}
.svc:hover .svc__name{color:var(--bone)}
.svc__desc{color:var(--muted);max-width:42ch;font-size:1.02rem;transition:color .35s var(--ease-out)}
.svc:hover .svc__desc{color:var(--muted-d)}

/* ============ STORY (dark) ============ */
.story{background:var(--ink-2);color:var(--bone);padding:var(--s-8) 0}
.story__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center}
.story__title{font-size:var(--t-h2);color:var(--bone);margin:var(--s-2) 0 var(--s-4);max-width:18ch}
.story__p{color:var(--muted-d);margin-bottom:var(--s-3);max-width:52ch}
.story__sig{font-family:var(--disp);font-style:italic;font-size:1.35rem;color:var(--accent);margin-top:var(--s-4)}
.story__fig{border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.story__fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.story__fig:hover img{transform:scale(1.04)}

/* ============ PROCESS ============ */
.process{padding:var(--s-8) 0;background:var(--paper-2)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);counter-reset:none}
.step{border-top:1px solid var(--line);padding-top:var(--s-3)}
.step__num{font-family:var(--mono);font-size:.85rem;color:var(--accent-d);font-weight:600}
.step__name{font-size:var(--t-h3);margin:var(--s-1) 0 var(--s-2)}
.step__desc{color:var(--muted);font-size:.96rem}

/* ============ WORK ============ */
.work{padding:var(--s-8) 0}
.work__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,64px);align-items:stretch}
.work__main{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 70px -42px rgba(40,30,15,.55)}
.work__main img{width:100%;height:100%;min-height:340px;object-fit:cover;transition:transform .6s var(--ease-out)}
.work__main:hover img{transform:scale(1.05)}
.work__cap{position:absolute;left:0;bottom:0;right:0;display:flex;flex-direction:column;gap:2px;padding:var(--s-4) var(--s-3) var(--s-3);color:var(--bone);background:linear-gradient(to top, rgba(15,12,8,.82), transparent)}
.work__tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.work__name{font-family:var(--disp);font-size:1.5rem;font-weight:600}
.work__aside{display:flex;flex-direction:column;justify-content:center;gap:var(--s-3);background:var(--paper-2);border-radius:var(--r);padding:clamp(28px,4vw,48px)}
.work__lede{font-family:var(--disp);font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:600;line-height:1.2}
.work__aside .btn{align-self:flex-start}
.link-yelp{font-weight:600;color:var(--accent-d);transition:color .18s var(--ease-out)}
.link-yelp:hover{color:var(--ink)}

/* ============ CONTACT ============ */
.contact{background:var(--ink-2);color:var(--bone);padding:var(--s-8) 0}
.contact__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,88px);align-items:start}
.contact__title{font-size:var(--t-h2);color:var(--bone);margin:var(--s-2) 0 var(--s-3);max-width:14ch}
.contact__p{color:var(--muted-d);margin-bottom:var(--s-4);max-width:46ch}
.contact__direct{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.contact__direct a{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) 0;border-top:1px solid var(--line-d);transition:color .18s var(--ease-out)}
.contact__direct a:hover{color:var(--accent)}
.cd__k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.cd__v{font-size:1.1rem;font-weight:600}

.cform{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:clamp(24px,3vw,40px);box-shadow:0 40px 90px -50px rgba(0,0,0,.6)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-2)}
.field span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.7em .85em;transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-d);box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 28%,transparent);outline:none}
.field textarea{resize:vertical}
.cform__note{font-size:.9rem;margin-top:var(--s-1);min-height:1.2em;color:var(--accent-d);font-weight:600}

/* ============ FOOTER ============ */
.foot{background:var(--ink);color:var(--bone);padding:var(--s-7) 0 var(--s-4)}
.foot__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr .7fr;gap:var(--s-4);padding-bottom:var(--s-5);border-bottom:1px solid var(--line-d)}
.foot__logo{height:48px;width:auto;object-fit:contain;margin-bottom:var(--s-2)}
.foot__slogan{font-family:var(--disp);font-style:italic;color:var(--muted-d);max-width:24ch}
.foot__h{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-2)}
.foot__col p{color:var(--muted-d);font-size:.95rem;margin-bottom:4px}
.foot__col a{transition:color .18s var(--ease-out)}
.foot__col a:hover{color:var(--bone)}
.foot__lic{margin-top:var(--s-2);font-family:var(--mono);font-size:.78rem;color:var(--muted-d)}
.foot__social{font-weight:600;color:var(--bone)}
.foot__social:hover{color:var(--accent)}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);padding-top:var(--s-3);font-size:.85rem;color:var(--muted-d)}
.foot__credit a{color:var(--accent);font-weight:600}

/* ============ REVEAL (motion) — VARIED per element, only when JS active ============ */
.js-anim .reveal{opacity:0;transition:opacity .65s var(--ease-expo), transform .85s var(--ease-expo), clip-path .95s var(--ease-expo)}
.js-anim .reveal.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
/* per-element entrance flavors — only the NOT-yet-revealed (initial) state */
.js-anim .reveal:not([data-anim]):not(.in){transform:translateY(40px)}
.js-anim .reveal[data-anim="rise"]:not(.in){transform:translateY(52px)}
.js-anim .reveal[data-anim="left"]:not(.in){transform:translateX(-70px)}
.js-anim .reveal[data-anim="right"]:not(.in){transform:translateX(70px)}
.js-anim .reveal[data-anim="zoom"]:not(.in){transform:scale(.88)}
.js-anim .reveal[data-anim="clipup"]:not(.in){clip-path:inset(0 0 105% 0);transform:translateY(14px)}
.js-anim .reveal[data-anim="wipe"]:not(.in){clip-path:inset(0 105% 0 0)}

/* Trust icons: overshoot pop after the item slides in */
.js-anim .trust__ico{opacity:0;transform:scale(.3) translateY(10px);transition:opacity .5s var(--ease-out) .2s, transform .7s var(--ease-back) .2s}
.js-anim .trust__item.in .trust__ico{opacity:1;transform:none;transition:transform .3s var(--ease-out), color .25s var(--ease-out)}

/* Service icons: spin-pop in after the card lands */
.js-anim .svc__ico{opacity:0;transform:scale(.4) rotate(-14deg);transition:opacity .5s var(--ease-out) .18s, transform .7s var(--ease-back) .18s}
.js-anim .svc.in .svc__ico{opacity:1;transform:none}
.svc:hover .svc__ico{transition:transform .4s var(--ease-out),color .35s var(--ease-out)}

/* Process timeline: amber line draws across, numbers count up under it */
.steps__rail{position:relative;height:2px;background:var(--line);margin-bottom:var(--s-5);overflow:hidden}
.steps__fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-expo) .1s}
.js-anim .steps__rail.in .steps__fill{transform:scaleX(1)}
.steps__rail:not(.js-target){opacity:1}
.js-anim .steps__rail{opacity:1}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .nav{display:none}
  .brand__logo{height:58px}
  .masthead__inner{min-height:86px}
  .hero{grid-template-columns:1fr}
  .hero__media{min-height:46vh;position:relative}
  .hero__media img,.hero__media video{position:absolute}
  .story__grid,.work__grid,.contact__grid{grid-template-columns:1fr}
  .story__fig{order:-1;max-height:380px}
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
  .trust__item,.trust__item:first-child{padding:0}
  .trust__item:not(:first-child)::before{display:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .brand__logo{height:42px}
  .masthead__inner{justify-content:space-between;gap:var(--s-2);min-height:64px}
  .btn--phone{padding:.6em 1em;font-size:.94rem}
  .services,.story,.process,.work,.contact{padding:var(--s-7) 0}
  .trust__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:var(--s-3)}
  .cform__row{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .svc{padding:var(--s-4)}
  .foot__inner{grid-template-columns:1fr;gap:var(--s-4)}
  .foot__bottom{flex-direction:column;align-items:flex-start}
  .hero__cta .btn{flex:1 1 auto}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js-anim .reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none}
  .js-anim .trust__ico,.js-anim .svc__ico{opacity:1!important;transform:none!important}
  .js-anim .steps__fill{transform:scaleX(1)!important}
  .hero__media img,.hero__media video{will-change:auto}
}