/* Self-hosted fonts (latin subset, woff2). Variable files cover the weights used. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/bricolage-grotesque-s1.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/plus-jakarta-sans-s1.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/caveat-700-s1.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-mono-500-s1.woff2) format('woff2')}
/* ==========================================================================
   Suncraft Studios: "paper, ink and a little sun"
   Hand-written CSS (no utility classes). Brand colors unchanged:
   navy #0F172A, orange #F97316, amber #FBBF24.
   Type: Bricolage Grotesque (display), Plus Jakarta Sans (body),
         Caveat (handwritten notes), DM Mono (labels).
   Rules: paper canvas, ink borders, hard offset shadows (no blur, no glow),
   two radii only (6px, pill), orange for action + marker highlights.
   ========================================================================== */

:root{
  --ink:#0F172A; --ink-2:#334155; --ink-3:#64748B;
  --paper:#FAF4E8; --paper-2:#F2E8D3; --card:#FFFDF6; --cream:#FFF4DC;
  --orange:#F97316; --orange-d:#C2410C; --amber:#FBBF24;
  --r:6px; --bw:2px;
  --display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
}

/* ---- reset + base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .1  0 0 0 0 .2  0 0 0 .06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
header,main,footer,section{position:relative;z-index:1}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
.hl svg,.circled svg{max-width:none}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[x-cloak]{display:none !important}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.sign :focus-visible,.ft :focus-visible{outline-color:var(--amber)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-64px;z-index:1000;background:var(--orange);color:var(--ink);font-weight:700;font-size:14px;padding:12px 20px;border:var(--bw) solid var(--ink);border-radius:999px;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}body{font-size:17px}}

/* ---- small type helpers ------------------------------------------------ */
.mono{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.hand{font-family:var(--hand);font-weight:700;line-height:1}
.eyebrow{font-family:var(--hand);font-weight:700;font-size:30px;color:var(--orange-d);display:inline-block;transform:rotate(-2deg);line-height:1}
.h-sec{font-family:var(--display);font-weight:800;font-size:clamp(40px,6.2vw,80px);line-height:.94;letter-spacing:-.035em;word-spacing:.04em}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink-2);max-width:34em}
.lede b{color:var(--ink)}

/* ---- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:800;font-size:17px;line-height:1;padding:16px 26px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--orange);color:var(--ink);box-shadow:5px 5px 0 var(--ink);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn--ink{background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--orange)}
.btn--ink:hover{box-shadow:7px 7px 0 var(--orange)}
.btn--amber{background:var(--amber)}
.btn--sm{font-size:15px;padding:12px 20px;box-shadow:4px 4px 0 var(--orange)}
.tel{font-family:var(--mono);font-weight:500;font-size:17px;text-decoration:none;border-bottom:2px dashed currentColor;padding:8px 0 2px}
.tel:hover{border-bottom-style:solid}

/* ---- header ------------------------------------------------------------ */
.hd{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:var(--bw) solid var(--ink)}
.hd__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.025em;line-height:1}
.logo b{color:var(--orange);font-weight:800}
.logo small{display:block;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.42em;color:var(--orange-d);margin-top:4px}
.hd__links{display:flex;gap:30px}
.hd__links a{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.hd__links a:hover{border-bottom-color:var(--orange)}
.hd__links a[aria-current="page"]{background:var(--amber);padding:10px 8px;margin:0 -8px;border-bottom-color:transparent}
.hd__cta{display:flex;align-items:center;gap:22px}
.hd__burger{display:none;width:48px;height:48px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--amber);align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--ink)}
.hd__menu{border-top:var(--bw) solid var(--ink);background:var(--paper);padding:24px 0 32px}
.hd__menu a.m{display:block;font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:-.03em;padding:8px 0;text-decoration:none}
.hd__menu a.m[aria-current="page"]{color:var(--orange-d)}
.hd__menu .row{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:20px;padding-top:20px;border-top:2px dashed var(--ink)}
@media (max-width:980px){.hd__links,.hd__cta .btn,.hd__cta .tel{display:none}.hd__burger{display:flex}.hd__cta{gap:0}}
@media (min-width:981px){.hd__menu{display:none !important}}

/* ---- hero -------------------------------------------------------------- */
.hero{padding:56px 0 110px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:32px;align-items:center}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(60px,9.4vw,122px);line-height:.9;letter-spacing:-.04em;word-spacing:.05em;margin-top:8px}
.hl{position:relative;display:inline-block;z-index:0;white-space:nowrap}
.hl svg{position:absolute;left:-.06em;bottom:.05em;width:calc(100% + .12em);height:.42em;z-index:-1;overflow:visible}
.hero .lede{margin-top:30px}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 26px;margin-top:36px}
.collage{position:relative;height:600px}
.frame{position:absolute;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:12px 12px 0 var(--ink)}
.frame__bar{height:34px;border-bottom:var(--bw) solid var(--ink);display:flex;align-items:center;gap:7px;padding:0 12px;background:#FFF7E6}
.frame__bar i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);display:block}
.frame picture,.frame img{width:100%}
.collage .frame--web{right:0;top:40px;width:94%;transform:rotate(3deg)}
.collage .phone{position:absolute;left:2%;bottom:0;width:30%;max-width:190px;transform:rotate(-5deg);border:var(--bw) solid var(--ink);border-radius:26px;overflow:hidden;background:#fff;box-shadow:8px 8px 0 var(--orange)}
.collage .phone img{width:100%;height:330px;object-fit:cover;object-position:top}
.tape{position:absolute;width:104px;height:28px;background:rgba(251,191,36,.82);box-shadow:0 1px 2px rgba(15,23,42,.18);z-index:3}
.collage .note{position:absolute;left:36%;bottom:12px;width:230px;font-family:var(--hand);font-weight:700;font-size:30px;line-height:1;transform:rotate(-3deg)}
.collage .note svg{width:70px;height:46px;margin:0 0 6px 18px}
.sticker{position:absolute;width:122px;height:122px;border-radius:50%;background:var(--amber);border:var(--bw) solid var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.02;letter-spacing:-.01em;box-shadow:4px 4px 0 var(--ink);z-index:4}
@media (max-width:980px){
  .hero{padding:40px 0 80px}
  .hero__grid{grid-template-columns:1fr;gap:56px}
  .collage{height:min(104vw,540px);margin-top:8px}
}
@media (max-width:640px){
  .collage .frame--web{width:100%;top:20px}
  .collage .phone{width:34%;left:0}
  .collage .note{left:40%;font-size:26px;width:190px}
  .sticker{width:96px;height:96px;font-size:15px}
}

/* ---- ticker ------------------------------------------------------------ */
.ticker-wrap{overflow:hidden;padding:34px 0;margin-top:-34px;position:relative;z-index:3}
.ticker{background:var(--orange);border-block:var(--bw) solid var(--ink);transform:rotate(-1.2deg);margin:0 -3vw;overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker__set{display:flex;align-items:center;gap:34px;padding:16px 17px 16px 0;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.ticker__set i{font-style:normal;font-size:18px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;flex-wrap:wrap;width:auto}.ticker__set[aria-hidden]{display:none}.ticker__set{flex-wrap:wrap;white-space:normal}}

/* ---- sections ---------------------------------------------------------- */
.sec{padding:120px 0}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:56px}
.sec__head .note{font-family:var(--hand);font-weight:700;font-size:30px;color:var(--orange-d);transform:rotate(-2deg);max-width:300px;line-height:1}
@media (max-width:640px){.sec{padding:84px 0}}

/* services as a price list */
.menu{border-top:var(--bw) solid var(--ink)}
.menu li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:baseline;gap:8px 28px;padding:30px 12px;border-bottom:var(--bw) solid var(--ink);transition:background .15s ease,padding-left .15s ease}
.menu li:hover{background:var(--amber);padding-left:24px}
.menu .n{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--orange-d)}
.menu li:hover .n{color:var(--ink)}
.menu h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,46px);letter-spacing:-.035em;line-height:1}
.menu p{margin-top:8px;color:var(--ink-2);max-width:36em;font-size:17px}
.menu .p{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;white-space:nowrap;text-align:right}
.menu .p small{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.more{display:inline-flex;padding:8px 0;margin-top:28px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.more:hover{color:var(--orange-d)}
@media (max-width:760px){.menu li{grid-template-columns:44px 1fr;padding:24px 4px}.menu .p{grid-column:2;text-align:left;margin-top:6px}.menu li:hover{padding-left:12px}}

/* work */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.feature .frame{position:relative;width:100%;transform:rotate(-2deg)}
.tag{display:inline-block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:var(--bw) solid var(--ink);border-radius:999px;padding:3px 12px;background:var(--amber)}
.tag--paper{background:#fff}
.feature h3{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:.98;letter-spacing:-.04em;margin:16px 0 14px}
.feature p{color:var(--ink-2)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:104px}
.tile{display:block;text-decoration:none;background:var(--card);border:var(--bw) solid var(--ink);padding:12px 12px 18px;box-shadow:8px 8px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.tile:nth-child(1){transform:rotate(-1.4deg)}.tile:nth-child(2){transform:translateY(28px) rotate(1deg)}.tile:nth-child(3){transform:rotate(-.6deg)}
.tile:hover{transform:rotate(0) translateY(-6px);box-shadow:12px 12px 0 var(--orange)}
.tile picture{display:block}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:left top;border:var(--bw) solid var(--ink)}
.tile h3{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.025em;margin:14px 4px 6px;line-height:1.1}
.tile p{font-size:15.5px;color:var(--ink-2);margin:0 4px}
.tile .tag{margin:14px 4px 0}
.work__cta{margin-top:84px;display:flex;justify-content:center}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:48px}.tiles{grid-template-columns:1fr;gap:44px;margin-top:72px}.tile:nth-child(n){transform:none}.tile:nth-child(2){transform:rotate(.8deg)}}

/* pricing receipt */
.price-grid{display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:80px;align-items:start}
.receipt{position:relative;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:40px 36px 48px;font-family:var(--mono);font-size:15px;margin-bottom:26px;transform:rotate(-.8deg)}
.receipt::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-16px;height:16px;background:linear-gradient(135deg,var(--card) 25%,transparent 25%) -8px 0,linear-gradient(225deg,var(--card) 25%,transparent 25%) -8px 0;background-size:16px 16px;filter:drop-shadow(2px 2px 0 var(--ink))}
.receipt__top{text-align:center;border-bottom:2px dashed var(--ink);padding-bottom:18px;margin-bottom:12px}
.receipt__top b{display:block;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;text-transform:uppercase}
.receipt__top span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.receipt li{display:flex;align-items:baseline;gap:10px;padding:9px 0;position:relative}
.receipt li .dots{flex:1;border-bottom:2px dotted rgba(15,23,42,.4);transform:translateY(-4px);min-width:16px}
.receipt li .amt{font-weight:500;white-space:nowrap}
.receipt li strong{font-weight:500}
.receipt .zero .amt{color:var(--orange-d)}
.receipt__total{border-top:2px dashed var(--ink);margin-top:14px;padding-top:16px;text-align:center;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.receipt__total b{display:block;font-family:var(--hand);font-size:34px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--orange-d);transform:rotate(-2deg);margin-top:6px}
.stamp{flex:none;border:2px solid var(--orange-d);color:var(--orange-d);font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:4px;transform:rotate(-5deg);line-height:1.4;white-space:nowrap}
.price-notes h3{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}
.price-notes .block+.block{margin-top:34px}
.ticks li{position:relative;padding-left:34px;margin:8px 0;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:22px;height:18px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'><path d='M2 10.5 L9 17 L22 2' fill='none' stroke='%23F97316' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.price-notes .btn{margin-top:36px}
@media (max-width:980px){.price-grid{grid-template-columns:1fr;gap:64px}.receipt{max-width:560px}.stamp{right:-6px}}
@media (max-width:480px){.receipt{padding:32px 20px 40px;font-size:13.5px}}

/* about, on a navy "sign" */
.sign{background:var(--ink);color:var(--cream);border-block:3px solid var(--cream);overflow:hidden}
.sign::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,244,220,.05) 79px 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(255,244,220,.05) 79px 80px)}
.sign .wrap{position:relative;z-index:1}
.sign__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:88px;align-items:center}
.polaroid{position:relative;max-width:400px;justify-self:center;background:var(--cream);padding:14px 14px 20px;border:3px solid var(--cream);box-shadow:14px 14px 0 var(--amber);transform:rotate(-3deg)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border:3px solid var(--ink)}
.polaroid figcaption{font-family:var(--hand);font-weight:700;font-size:30px;color:var(--ink);text-align:center;margin-top:12px;line-height:1}
.polaroid .tape{top:-16px;left:50%;margin-left:-52px;transform:rotate(-4deg)}
.sign .eyebrow{color:var(--amber)}
.sign h2{font-family:var(--display);font-weight:800;font-size:clamp(42px,6vw,80px);line-height:.94;letter-spacing:-.04em;margin:10px 0 26px;text-shadow:3px 3px 0 var(--orange)}
.sign p{color:#E7DCC3;font-size:19px;max-width:34em}
.sign p+p{margin-top:16px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:36px}
.facts li{position:relative;padding-left:36px;font-weight:600;line-height:1.35;color:var(--cream)}
.facts li::before{content:"";position:absolute;left:0;top:.2em;width:24px;height:20px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'><path d='M2 10.5 L9 17 L22 2' fill='none' stroke='%23FBBF24' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.facts small{display:block;font-weight:500;font-size:14px;color:#BFB49A}
@media (max-width:900px){.sign__grid{grid-template-columns:1fr;gap:72px}.polaroid{max-width:340px}.facts{grid-template-columns:1fr}}

/* testimonial */
.quote{padding:130px 0}
.quote blockquote{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.2vw,68px);line-height:1.02;letter-spacing:-.035em;max-width:17em;text-wrap:balance}
.circled{position:relative;display:inline-block;white-space:nowrap}
.circled svg{position:absolute;left:-.22em;top:-.18em;width:calc(100% + .44em);height:calc(100% + .36em);overflow:visible;pointer-events:none}
.quote__by{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:44px}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--orange);border:var(--bw) solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:28px;box-shadow:3px 3px 0 var(--ink)}
.quote__by b{display:block;font-size:19px;color:var(--ink)}
.quote__by .avatar{color:var(--ink)}
.quote__by span{color:var(--ink-3);font-size:16px}
.stars{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.stars svg{width:22px;height:22px}
.stars span{margin-left:8px;color:var(--ink)}

/* notes (blog) */
.notes{border-top:var(--bw) solid var(--ink)}
.notes a{display:grid;grid-template-columns:200px 1fr auto;gap:8px 32px;align-items:baseline;padding:28px 12px;border-bottom:var(--bw) solid var(--ink);text-decoration:none;transition:background .15s ease}
.notes a:hover{background:var(--amber)}
.notes .d{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-d)}
.notes a:hover .d{color:var(--ink)}
.notes h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.03em;line-height:1.05}
.notes p{margin-top:6px;color:var(--ink-2);font-size:16.5px;max-width:40em}
.notes .go{font-family:var(--display);font-weight:800;font-size:28px}
@media (max-width:760px){.notes a{grid-template-columns:1fr;gap:6px}.notes .go{display:none}}

/* faq (native details, works without JS) */
.faq{border-top:var(--bw) solid var(--ink);max-width:880px}
.faq details{border-bottom:var(--bw) solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 8px;font-family:var(--display);font-weight:800;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.025em;line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(251,191,36,.35)}
.faq .plus{flex:none;width:36px;height:36px;border:var(--bw) solid var(--ink);border-radius:50%;position:relative;background:var(--amber)}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .2s ease}
.faq .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.faq details[open] summary{color:var(--orange-d)}
.faq .a{padding:0 8px 30px;color:var(--ink-2);max-width:40em}

/* closing CTA */
.cta-band{background:var(--orange);border-block:var(--bw) solid var(--ink);padding:110px 0;overflow:hidden}
.cta-band h2{font-family:var(--display);font-weight:800;font-size:clamp(50px,8.6vw,120px);line-height:.9;letter-spacing:-.04em;word-spacing:.05em;max-width:9em}
.cta-band .row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:44px}
.cta-band .hand{font-size:32px;transform:rotate(-2deg);display:inline-block}
.cta-band .tel{font-size:19px}

/* footer */
.ft{background:var(--ink);color:var(--cream);padding:76px 0 34px}
.ft__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:56px}
.ft .logo{color:var(--cream)}
.ft p{color:#BFB49A;font-size:16px;max-width:24em;margin-top:18px}
.ft h3{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.ft li{margin:2px 0}
.ft nav ul{columns:2;column-gap:28px}
.ft .logo small{color:var(--amber)}
.ft li a{display:inline-block;padding:6px 0;text-decoration:none;font-weight:500}
.ft li a:hover{color:var(--amber);text-decoration:underline;text-underline-offset:4px}
.ft__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:56px;padding-top:22px;border-top:2px dashed rgba(255,244,220,.35);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#BFB49A}
.ft__bar a{color:var(--cream);display:inline-block;padding:6px 0}
@media (max-width:820px){.ft__grid{grid-template-columns:1fr 1fr;gap:44px 32px}.ft__grid>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.ft__grid{grid-template-columns:1fr}.ft li a{overflow-wrap:anywhere}}

/* mobile call button */
.fab{position:fixed;right:18px;bottom:18px;z-index:55;display:none;align-items:center;gap:10px;font-weight:800;font-size:16px;padding:14px 20px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--orange);color:var(--ink);box-shadow:4px 4px 0 var(--ink);text-decoration:none;transition:opacity .2s ease,transform .2s ease}
.fab[data-hidden="true"]{opacity:0;pointer-events:none;transform:translateY(16px)}
@media (max-width:980px){.fab{display:inline-flex}}

/* ==========================================================================
   Inner pages (services, work, about, contact, blog, article, privacy, 404)
   ========================================================================== */

/* page header */
.phead{padding:76px 0 72px;border-bottom:var(--bw) solid var(--ink)}
.h-page{font-family:var(--display);font-weight:800;font-size:clamp(46px,8vw,108px);line-height:.92;letter-spacing:-.04em;word-spacing:.04em;margin-top:10px;max-width:12em;text-wrap:balance}
.phead .lede{margin-top:28px;font-size:clamp(19px,2.2vw,24px);max-width:30em}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:var(--bw) solid var(--ink);border-radius:999px;padding:12px 18px;background:#fff;box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.chip:hover{background:var(--amber);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
@media (max-width:640px){.phead{padding:52px 0 52px}}

/* service rows */
.svc{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px 56px;padding:44px 0;border-top:var(--bw) solid var(--ink)}
.svc:last-child{border-bottom:var(--bw) solid var(--ink)}
.svc__l .n{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--orange-d)}
.svc__l .k{display:block;font-family:var(--hand);font-weight:700;font-size:30px;line-height:1;margin-top:8px;transform:rotate(-2deg);transform-origin:left}
.svc__l .big{display:block;font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:-.03em;margin-top:10px}
.svc h3{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.035em}
.svc p{margin-top:16px;color:var(--ink-2);max-width:36em}
.svc p+p{margin-top:12px}
.pill{display:inline-block;margin-top:22px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;border:var(--bw) solid var(--ink);border-radius:999px;padding:6px 18px;background:var(--amber);box-shadow:3px 3px 0 var(--ink);text-decoration:none;color:var(--ink)}
a.pill:hover{background:var(--orange)}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tagrow span,.stack span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;border:var(--bw) solid var(--ink);border-radius:4px;padding:3px 9px;background:#fff}
@media (max-width:760px){.svc{grid-template-columns:1fr;gap:10px;padding:34px 0}}

/* tickets (pricing) */
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;align-items:start;margin-top:36px}
.ticket{position:relative;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:36px 28px 32px}
.ticket--ink{background:var(--ink);color:var(--cream);box-shadow:8px 8px 0 var(--orange)}
.ticket--amber{background:var(--amber)}
.ticket:nth-child(1){transform:rotate(-1deg) translateY(20px)}
.ticket:nth-child(2){transform:translateY(-8px) scale(1.03);z-index:2}
.ticket:nth-child(3){transform:rotate(1.2deg) translateY(32px)}
.ticket .for{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.ticket h3{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;margin-top:6px;line-height:1.05}
.ticket .amt{font-family:var(--display);font-weight:800;font-size:76px;letter-spacing:-.05em;line-height:1;margin-top:16px}
.ticket .amt small{font-size:20px;letter-spacing:-.01em;margin-left:6px;font-weight:700;opacity:.8}
.ticket .perf{position:relative;margin:26px -28px;border-top:2px dashed currentColor}
.ticket .perf::before,.ticket .perf::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:var(--bw) solid var(--ink)}
.ticket .perf::before{left:-14px}.ticket .perf::after{right:-14px}
.ticket .ticks li{color:inherit}
.ticket--ink .ticks li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'><path d='M2 10.5 L9 17 L22 2' fill='none' stroke='%23FBBF24' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.ticket--amber .ticks li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'><path d='M2 10.5 L9 17 L22 2' fill='none' stroke='%230F172A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.ticket .btn{margin-top:26px;width:100%;justify-content:center}
.ticket--ink .btn{box-shadow:5px 5px 0 var(--amber)}
.ticket .stamp{position:absolute;right:14px;top:-18px;background:var(--amber);color:var(--ink);border-color:var(--ink);font-size:13px;padding:3px 10px;transform:rotate(5deg)}
.incl{margin-top:104px;border:var(--bw) solid var(--ink);background:var(--card);box-shadow:8px 8px 0 var(--ink);padding:36px 40px;display:grid;grid-template-columns:1fr 1fr;gap:6px 48px}
.incl h3{grid-column:1/-1;font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;margin-bottom:10px}
.price-foot{margin-top:30px;font-family:var(--hand);font-weight:700;font-size:28px;color:var(--orange-d);line-height:1.1;max-width:32em;transform:rotate(-1deg)}
@media (max-width:980px){.tickets{grid-template-columns:1fr;gap:56px}.ticket:nth-child(n){transform:none}.incl{grid-template-columns:1fr;padding:28px 22px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--bw) solid var(--ink);border-left:var(--bw) solid var(--ink)}
.step{padding:28px 24px 34px;border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
.step:nth-child(even){background:var(--paper-2)}
.step .n{font-family:var(--hand);font-weight:700;font-size:76px;line-height:.8;color:var(--orange)}
.step h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;margin:16px 0 8px;line-height:1.05}
.step p{color:var(--ink-2);font-size:16.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* case-study spreads (work) */
.spread{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center;padding:84px 0;border-bottom:var(--bw) solid var(--ink)}
.spread--flip{grid-template-columns:.9fr 1.1fr}
.spread--flip .spread__media{order:2}
.spread__media .frame{position:relative;width:100%;transform:rotate(-2deg)}
.spread--flip .spread__media .frame{transform:rotate(2deg)}
.spread .meta{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:16px}
.spread h2{font-family:var(--display);font-weight:800;font-size:clamp(38px,5vw,64px);line-height:.96;letter-spacing:-.04em;margin:12px 0 6px}
.spread .sub{font-family:var(--hand);font-weight:700;font-size:28px;color:var(--orange-d);line-height:1}
.spread p.d{margin-top:18px;color:var(--ink-2)}
.spread .ticks{margin-top:18px;columns:2;column-gap:28px}
.spread .ticks li{break-inside:avoid}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.spread .links{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:26px}
.spread .fine{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:900px){.spread,.spread--flip{grid-template-columns:1fr;gap:44px;padding:60px 0}.spread--flip .spread__media{order:0}.spread .ticks{columns:1}}

/* testimonials */
.tq{padding:44px 0;border-top:var(--bw) solid var(--ink)}
.tq:last-child{border-bottom:var(--bw) solid var(--ink)}
.tq blockquote{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,44px);line-height:1.08;letter-spacing:-.03em;max-width:24em;text-wrap:pretty}
.tq--small blockquote{font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.2}

/* about */
.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:88px;align-items:start}
.polaroid--paper{border-color:var(--ink);box-shadow:14px 14px 0 var(--ink)}
.story h2{font-family:var(--display);font-weight:800;font-size:clamp(38px,5vw,64px);line-height:.96;letter-spacing:-.04em;margin:8px 0 22px}
.story p{color:var(--ink-2);max-width:34em}
.story p+p{margin-top:16px}
.dashbox{border:var(--bw) dashed var(--ink);background:var(--card);padding:20px 22px;margin-top:26px;max-width:34em}
.dashbox h3{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d);margin-bottom:6px}
.dashbox p{margin:0;font-size:16.5px}
.sig{font-family:var(--hand);font-weight:700;font-size:38px;line-height:1;margin-top:24px;transform:rotate(-2deg);display:inline-block}
@media (max-width:900px){.story{grid-template-columns:1fr;gap:64px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}
.formcard{background:var(--card);border:var(--bw) solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:40px 36px}
.formcard h2,.direct h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,42px);letter-spacing:-.035em;line-height:1}
.formcard .sub{margin-top:12px;color:var(--ink-2)}
.form{display:grid;gap:20px;margin-top:28px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);padding:13px 14px}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--amber);outline-offset:0;box-shadow:4px 4px 0 var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.form .btn{justify-self:start}
.form .btn[disabled]{opacity:.6;cursor:wait}
.form .fine{font-size:14px;color:var(--ink-3)}
.form .fine a{text-decoration:underline;text-underline-offset:3px}
.done{text-align:center;padding:40px 8px}
.done .hand{display:inline-block;font-size:60px;color:var(--orange-d);transform:rotate(-3deg)}
.done p{margin-top:14px;color:var(--ink-2);font-size:19px}
.err{border:var(--bw) solid var(--orange-d);background:#FFF1E6;padding:16px 18px;border-radius:var(--r);margin-top:22px}
.err b{display:block;margin-bottom:4px}
.err a{text-decoration:underline;font-weight:700}
.direct dl{margin-top:24px;border-top:var(--bw) solid var(--ink)}
.direct dl>div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:16px 0;border-bottom:var(--bw) solid var(--ink)}
.direct dt{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d);padding-top:4px}
.direct dd{font-weight:600;line-height:1.4}
.direct dd small{display:block;font-weight:500;color:var(--ink-3);font-size:15px}
.direct a{text-decoration:underline;text-underline-offset:4px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.stats div{border:var(--bw) solid var(--ink);background:var(--amber);padding:14px 10px;text-align:center;box-shadow:4px 4px 0 var(--ink)}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1}
.stats span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:64px}.form .two{grid-template-columns:1fr}.formcard{padding:30px 20px}}

/* blog index */
.feat{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;border:var(--bw) solid var(--ink);background:var(--amber);box-shadow:10px 10px 0 var(--ink);padding:48px 44px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.feat:hover{transform:translate(-3px,-3px);box-shadow:13px 13px 0 var(--ink)}
.feat .hand{font-size:34px;transform:rotate(-2deg);display:inline-block}
.feat h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.4vw,56px);line-height:.98;letter-spacing:-.04em;margin:10px 0 16px}
.feat p{max-width:30em}
.feat .go{justify-self:end;font-family:var(--display);font-weight:800;font-size:clamp(60px,9vw,120px);line-height:1}
.notes .soon{display:grid;grid-template-columns:200px 1fr;gap:8px 32px;padding:24px 12px;border-bottom:var(--bw) dashed var(--ink);opacity:.72}
.notes .soon .d{color:var(--ink-3)}
.notes .soon h3{font-size:clamp(20px,2.4vw,28px)}
@media (max-width:760px){.feat{grid-template-columns:1fr;padding:30px 22px}.feat .go{display:none}.notes .soon{grid-template-columns:1fr}}

/* article */
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:22px}
.crumbs a{text-decoration:underline;text-underline-offset:4px}
.ameta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:24px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.art{display:grid;grid-template-columns:minmax(0,700px) 320px;gap:72px;padding:72px 0 40px;justify-content:space-between}
.prose{font-size:19px;line-height:1.7;color:var(--ink-2)}
.prose p{margin:0 0 1.2em}
.prose h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,42px);line-height:1.05;letter-spacing:-.035em;color:var(--ink);margin:2em 0 .6em}
.prose h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--ink);margin:1.6em 0 .5em}
.prose ul{margin:0 0 1.4em}
.prose ul li{position:relative;padding-left:32px;margin:.55em 0}
.prose ul li::before{content:"";position:absolute;left:0;top:.5em;width:22px;height:18px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'><path d='M2 10.5 L9 17 L22 2' fill='none' stroke='%23F97316' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.prose blockquote{margin:2em 0;padding:8px 0 8px 28px;border-left:6px solid var(--orange);font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.15;color:var(--ink);letter-spacing:-.025em}
.prose a{color:var(--orange-d);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.prose strong{color:var(--ink)}
.prose--narrow{max-width:720px}
.aside{position:sticky;top:104px;align-self:start;display:grid;gap:28px}
.card{background:var(--card);border:var(--bw) solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:24px}
.card--amber{background:var(--amber)}
.card .h4{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;margin:4px 0 8px;line-height:1.05;color:var(--ink)}
.menu h3 a{text-decoration:none}
.menu h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.card p{font-size:16px;color:var(--ink-2)}
.card .btn{margin-top:16px}
.author{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.author b{display:block;font-size:17px}
.author span{font-size:14px;color:var(--ink-3)}
@media (max-width:980px){.art{grid-template-columns:1fr;gap:48px;padding-top:52px}.aside{position:static}}

/* 404 */
.big404{font-family:var(--display);font-weight:800;font-size:clamp(120px,26vw,320px);line-height:.8;letter-spacing:-.06em;color:var(--orange);text-shadow:6px 6px 0 var(--ink)}

/* Step-by-step contact form */
.form--steps .fstep{border:0;padding:0;margin:0;min-width:0;display:grid;gap:20px}
.form--steps .fstep legend{scroll-margin-top:120px;font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.02em;line-height:1.15;padding:0;margin-bottom:6px}
.form--steps .fstep legend:focus{outline:none}
.steps__top{display:grid;gap:10px}
.steps__top .fine{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.steps__top .bar{height:10px;border:var(--bw) solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.steps__top .bar i{display:block;height:100%;background:var(--orange);transition:width .25s ease}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.form .opt{margin:0;font-family:inherit;font-weight:600;font-size:17px;letter-spacing:0;text-transform:none;position:relative;cursor:pointer}
.form .opt input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0}
.opt span{display:flex;align-items:center;min-height:52px;padding:12px 16px;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);transition:transform .12s,box-shadow .12s,background-color .12s}
.opt:hover span{box-shadow:3px 3px 0 var(--ink)}
.opt input:checked+span{background:var(--amber);box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}
.opt input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.steps__nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn--ghost{background:transparent;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.steps__top .bar i,.opt span{transition:none}}

/* Next-steps timeline (form success state) */
.done:focus{outline:none}
.done{scroll-margin-top:110px}
.done .tl{list-style:none;margin:28px 0 0;padding:0;text-align:left;counter-reset:tl}
.done .tl li{position:relative;padding:0 0 26px 62px;counter-increment:tl}
.done .tl li::before{content:counter(tl);position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px;background:var(--amber);border:var(--bw) solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink)}
.done .tl li::after{content:"";position:absolute;left:19px;top:46px;bottom:6px;border-left:2px dashed var(--ink-3)}
.done .tl li:last-child{padding-bottom:0}
.done .tl li:last-child::after{display:none}
.done .tl b{display:block;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;line-height:1.2;margin-bottom:4px}
.done .tl span{display:block;color:var(--ink-2);font-size:16.5px;line-height:1.5}
.done .tl__note{font-size:16px;margin-top:26px;text-align:left}
.done .tl__note a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.done{padding:24px 0}.done .hand{font-size:48px}}

/* Numbered steps in blog posts */
.prose ol{list-style:none;margin:0 0 1.4em;padding:0;counter-reset:step}
.prose ol li{position:relative;padding-left:48px;margin:.8em 0;counter-increment:step}
.prose ol li::before{content:counter(step);position:absolute;left:0;top:.05em;width:32px;height:32px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px;background:var(--amber);border:var(--bw) solid var(--ink);border-radius:50%}