:root{
  --cream:#FFF9F0; --cream-2:#FDEFD9; --tang:#FF6B1A; --tang-d:#E85A0C;
  --teal:#0C5B66; --teal-d:#083B43; --ink:#22302F; --gold:#FFC531; --card:#fff;
  --shadow:6px 6px 0 var(--ink); --shadow-s:4px 4px 0 var(--ink); --r:18px;
  --fd:"Bricolage Grotesque",system-ui,sans-serif; --fb:"Inter",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--fb);background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:hidden}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--tang);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.05;letter-spacing:-.02em}
h1{font-size:clamp(2.8rem,6.4vw,5rem);font-weight:800}
h2{font-size:clamp(2rem,4vw,3rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
.hl{background:linear-gradient(transparent 62%,var(--gold) 62% 96%,transparent 96%)}
.hl-teal{background:linear-gradient(transparent 62%,#9fd8d2 62% 96%,transparent 96%)}
.hl-gold{color:var(--gold)}
.kicker{display:inline-block;background:var(--ink);color:var(--cream);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:.4em 1em;border-radius:999px;margin-bottom:16px}
.kicker-light{background:var(--cream);color:var(--ink)}

.btn{display:inline-block;font:700 1rem var(--fd);padding:.85em 1.7em;border-radius:999px;border:3px solid var(--ink);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-tang{background:var(--tang);color:#fff;box-shadow:var(--shadow-s)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--shadow-s)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}

.sticker{display:inline-block;font:700 .95rem var(--fd);background:var(--gold);border:3px solid var(--ink);border-radius:999px;padding:.4em 1.1em;box-shadow:var(--shadow-s);white-space:nowrap}
.sticker-teal{background:var(--teal);color:#fff;transform:rotate(-2deg)}
.sticker-pop{position:absolute;z-index:3;animation:bob 4.5s ease-in-out infinite}
.sticker-a{top:-14px;right:-6px;background:var(--tang);color:#fff;transform:rotate(5deg)}
.sticker-b{bottom:-14px;left:-6px;background:#fff;transform:rotate(-4deg);animation-delay:1.3s}
@keyframes bob{50%{margin-top:-8px}}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,249,240,.94);backdrop-filter:blur(10px);border-bottom:3px solid var(--ink)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--tang);color:#fff;border:3px solid var(--ink);display:grid;place-items:center;font:800 1.2rem var(--fd)}
.brand-name{font:800 1.3rem var(--fd)}
.brand-name em{font-style:normal;color:var(--tang-d)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{text-decoration:none;font-weight:600}
.nav-links a:not(.nav-quote):hover{color:var(--tang-d)}
.nav-quote{background:var(--ink);color:var(--cream);padding:.55em 1.3em;border-radius:999px;box-shadow:var(--shadow-s)}
.nav-toggle{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;flex-direction:column;gap:5px;justify-content:center;align-items:center}
.nav-toggle span{width:24px;height:3px;background:var(--ink);border-radius:2px}

/* hero */
.hero{padding:72px 0 80px;background:radial-gradient(circle at 90% 10%,var(--cream-2),transparent 55%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero .sticker-teal{margin-bottom:22px}
.lede{font-size:1.15rem;color:#445251;max-width:52ch;margin:22px 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:16px}

.mock{position:relative;padding:10px 0 30px}
.mock-win{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:10px 10px 0 var(--teal);overflow:hidden;transform:rotate(1.5deg)}
.mock-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--cream-2);border-bottom:3px solid var(--ink)}
.mock-bar span{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:var(--gold)}
.mock-bar span:nth-child(1){background:var(--tang)}.mock-bar span:nth-child(3){background:#9fd8d2}
.mock-bar em{margin-left:10px;font:.78rem var(--fb);font-style:normal;color:#586766}
.mock-body{padding:18px}
.mock-nav{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.mock-nav b{width:60px;height:14px;background:var(--tang);border-radius:6px;margin-right:auto}
.mock-nav i{width:34px;height:8px;background:#d8dcd9;border-radius:4px}
.mock-hero h4{height:18px;width:80%;background:var(--ink);border-radius:6px;margin-bottom:8px}
.mock-hero h4.s{width:55%;background:var(--teal)}
.mock-hero p{height:8px;width:70%;background:#d8dcd9;border-radius:4px;margin:14px 0}
.mock-btn{display:block;width:90px;height:26px;background:var(--gold);border:3px solid var(--ink);border-radius:999px}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.mock-cards div{height:54px;border:3px solid var(--ink);border-radius:10px;background:var(--cream)}
.mock-cards div:nth-child(2){background:var(--tang)}
.mock-code{position:absolute;left:-18px;bottom:-4px;background:var(--ink);color:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-s);transform:rotate(-2deg);z-index:2}
.mock-code pre{font:.82rem/1.6 ui-monospace,Consolas,monospace}
.mock-code .k{color:var(--gold)}.mock-code .f{color:#9fd8d2}.mock-code .c{color:#8aa09d}

/* marquee */
.marquee{background:var(--ink);color:var(--cream);border-block:3px solid var(--ink);overflow:hidden;padding:14px 0}
.marquee-track{display:flex;gap:28px;width:max-content;animation:slide 28s linear infinite;font:700 1.15rem var(--fd);white-space:nowrap}
.marquee-track i{color:var(--gold);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
.section{padding:96px 0}
.section-alt{background:var(--cream-2);border-block:3px solid var(--ink)}
.head{margin-bottom:46px}
.head .sub{color:#4a5756;max-width:56ch;margin-top:14px}
.head.left{margin-bottom:0}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.tile{grid-column:span 2;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:28px;transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.tile h3{margin:16px 0 10px}
.tile p{color:#4a5756;font-size:.98rem}
.tile-ico{display:grid;place-items:center;width:52px;height:52px;border:3px solid var(--ink);border-radius:14px;background:var(--cream-2);font:700 1.2rem var(--fd)}
.tile-big{grid-column:span 4;background:var(--teal);color:#fff}
.tile-big p{color:#dceeed;max-width:52ch}
.tile-big .tile-ico{background:var(--gold);color:var(--ink)}
.tile-tang{background:var(--tang);color:#fff}
.tile-tang p{color:#fff0e6}
.tile-gold{grid-column:span 4;background:var(--gold)}
.tile-gold p{color:#3b3a2a}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chips li{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:.2em .9em;font-weight:700;font-size:.85rem}

.hero-img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 0 transparent)}
.tile{display:flex;flex-direction:column}
.tile-art{width:100%;height:auto;margin-top:auto;padding-top:22px;display:block}
.tile-big .tile-art{max-width:420px;align-self:flex-end}
.tile-gold .tile-art{max-width:300px;align-self:flex-end}
.showcase{padding:0 0 96px}
.show-fig{position:relative;border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:10px 10px 0 var(--ink);line-height:0}
.show-fig img{width:100%;height:auto;display:block}
.show-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 32px;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(8,59,67,.92))}
.show-cap h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.show-cap p{margin-top:6px;color:#dceeed}

/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.why-item{border-top:6px solid var(--ink);padding-top:18px}
.why-item span{font:800 2.4rem var(--fd);color:var(--tang)}
.why-item h3{margin:6px 0 8px}
.why-item p{color:#4a5756;font-size:.96rem}

/* process */
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.track::before{content:"";position:absolute;top:26px;left:6%;right:6%;border-top:4px dashed var(--ink);opacity:.35}
.track li{position:relative}
.track b{display:grid;place-items:center;width:54px;height:54px;border:3px solid var(--ink);border-radius:50%;background:var(--gold);box-shadow:var(--shadow-s);font:800 1.3rem var(--fd);margin-bottom:18px;position:relative}
.track li:nth-child(even) b{background:var(--tang);color:#fff}
.track h3{margin-bottom:8px}
.track p{color:#4a5756;font-size:.96rem}

/* faq */
.faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;align-items:start}
.faq{display:grid;gap:14px}
.faq details{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-s);padding:0 20px}
.faq summary{cursor:pointer;font:700 1.08rem var(--fd);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--tang-d);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:#4a5756}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--teal);color:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:10px 10px 0 var(--ink);padding:52px;align-items:center}
.contact-copy>p{margin:16px 0 26px;color:#dceeed}
.contact-copy li{display:flex;gap:16px;margin-top:12px}
.contact-copy b{width:60px;color:var(--gold);text-transform:uppercase;font-size:.8rem;letter-spacing:.1em;padding-top:3px}
.contact-copy a{font-weight:600}
.form{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r);padding:26px;display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
.form input,.form select,.form textarea{width:100%;font:1rem var(--fb);padding:.7em .9em;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--tang)}
.form .bad{border-color:#d12;}
.note{min-height:1.2em;font-size:.9rem;font-weight:600;color:var(--teal)}
.note.err{color:#d12}

.footer{border-top:3px solid var(--ink);padding:28px 0;font-size:.9rem}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

@media (max-width:960px){
  .hero-grid,.faq-wrap,.contact{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile,.tile-big,.tile-gold{grid-column:span 1}
  .tile-big,.tile-gold{grid-column:span 2}
  .why,.track{grid-template-columns:repeat(2,1fr)}
  .track::before{display:none}
  .contact{padding:32px}
}
@media (max-width:640px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:72px;left:0;right:0;background:var(--cream);border-bottom:3px solid var(--ink);flex-direction:column;align-items:flex-start;gap:14px;padding:18px 24px 24px;display:none}
  .nav-links.open{display:flex}
  .bento,.why,.track{grid-template-columns:1fr}
  .tile,.tile-big,.tile-gold{grid-column:span 1}
  .section{padding:68px 0}
  .hero{padding:48px 0 60px}
  .mock-code{left:0}
  .contact{padding:24px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---- compact sizing ---- */
html{font-size:15.5px}
h1{font-size:clamp(2.3rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3vw,2.3rem)}
h3{font-size:1.1rem}
.wrap{max-width:1080px}
.section{padding:60px 0}
.head{margin-bottom:30px}
.hero{padding:44px 0 52px}
.hero-grid{gap:36px}
.lede{font-size:1.02rem;margin:16px 0 22px}
.hero-img{max-width:440px;margin-inline:auto}
.bento{gap:16px}
.tile{padding:20px;box-shadow:5px 5px 0 var(--ink)}
.tile h3{margin:12px 0 6px}
.tile p{font-size:.92rem}
.tile-ico{width:42px;height:42px;font-size:1rem}
.tile-art{max-height:130px;width:auto;max-width:100%;margin-inline:auto;padding-top:14px}
.tile-big .tile-art,.tile-gold .tile-art{max-height:150px;max-width:260px}
.showcase{padding:0 0 60px}
.show-fig{max-width:820px;margin-inline:auto;box-shadow:7px 7px 0 var(--ink);border-radius:20px}
.show-cap{padding:18px 24px}
.why{gap:18px}
.why-item span{font-size:1.9rem}
.track b{width:44px;height:44px;font-size:1.1rem;margin-bottom:12px}
.track::before{top:22px}
.faq-wrap{gap:32px}
.faq summary{font-size:1rem;padding:12px 0}
.contact{padding:34px;gap:28px;border-radius:20px;box-shadow:7px 7px 0 var(--ink)}
.form{padding:18px;gap:10px}
.nav-inner{height:62px}
.nav-links{top:62px}
@media (min-width:821px) and (max-width:960px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .faq-wrap{grid-template-columns:.7fr 1.3fr}
  .contact{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(6,1fr)}
  .tile{grid-column:span 2}
  .tile-big,.tile-gold{grid-column:span 4}
  .why,.track{grid-template-columns:repeat(4,1fr)}
}

/* hero fits one screen */
.hero{padding:28px 0 34px}
.hero-grid{gap:28px}
h1{font-size:clamp(2rem,4.2vw,3.1rem)}
.hero .sticker-teal{margin-bottom:14px;font-size:.85rem}
.lede{font-size:.98rem;margin:12px 0 18px}
.btn{font-size:.95rem;padding:.7em 1.4em}
.hero-img{max-width:360px;max-height:56vh;width:auto}
.mock{padding:6px 0 16px}
.marquee{padding:9px 0}
.marquee-track{font-size:1rem}

/* services grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);overflow:hidden;transition:transform .2s,box-shadow .2s}
.svc:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.svc-pic{height:150px;display:grid;place-items:center;border-bottom:3px solid var(--ink);padding:10px}
.svc-pic img{height:100%;width:auto;max-width:100%}
.pic-teal{background:var(--teal)}.pic-tang{background:#ffd2b8}.pic-gold{background:var(--gold)}.pic-mint{background:#9fd8d2}.pic-cream{background:var(--cream-2)}
.svc h3{margin:16px 20px 6px}
.svc p{margin:0 20px 20px;color:#4a5756;font-size:.92rem}
.svc-cta{background:var(--ink);color:var(--cream);justify-content:center;padding:24px;align-items:flex-start}
.svc-cta h3{margin:0 0 8px;font-size:1.4rem}
.svc-cta p{margin:0 0 18px;color:#cfd8d6}
@media (max-width:820px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ---- one section per screen ---- */
:root{--navh:62px}
html{scroll-snap-type:y proximity;scroll-padding-top:var(--navh)}
.hero,.section,.showcase{
  min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));
  display:flex;flex-direction:column;justify-content:center;
  scroll-snap-align:start;
}
.hero{min-height:calc(100svh - var(--navh) - 44px)}
.marquee{scroll-snap-align:none}
.section,.showcase{padding:28px 0}
.head{margin-bottom:clamp(14px,3vh,30px)}
.hero-img{max-height:50vh}
.svc-pic{height:clamp(70px,15vh,140px)}
.svc h3{margin-top:clamp(8px,1.6vh,14px)}
.svc p{margin-bottom:clamp(10px,2vh,18px)}
.svc-grid{gap:clamp(12px,2vh,18px)}
.show-fig img{max-height:70vh;object-fit:cover}
.why-item p,.track p{font-size:.95rem}
.contact{padding:clamp(20px,4vh,34px)}
@media (max-width:820px){
  .hero,.section,.showcase{min-height:auto}
  .hero,.section,.showcase{padding:44px 0}
  html{scroll-snap-type:none}
}
@media (min-width:821px){
  .svc-pic{height:clamp(56px,11vh,120px)}
  #services .head{margin-bottom:clamp(10px,2vh,22px)}
  #services .head .sub{margin-top:8px}
  .svc h3{margin:10px 18px 4px}
  .svc p{margin:0 18px 12px;font-size:.88rem;line-height:1.45}
  .svc-cta{padding:18px}
}

/* services: keep pictures inside their panels */
.svc-pic{position:relative;overflow:hidden;display:block;padding:0}
.svc-pic img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain}
@media (min-width:821px){
  .svc-pic{height:clamp(84px,17vh,150px)}
  .svc h3{margin:12px 18px 4px}
  .svc p{margin:0 18px 14px;font-size:.9rem}
}

/* ---- nav active ---- */
.nav-links a.active:not(.nav-quote){color:var(--tang-d);box-shadow:inset 0 -3px 0 var(--tang)}
.nav-links{gap:22px}

/* ---- footer ---- */
.footer{background:var(--ink);color:#cfd8d6;border-top:3px solid var(--ink);padding:44px 0 0;margin-top:0;scroll-snap-align:end}
.footer a{text-decoration:none}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:34px}
.foot-brand .brand-name{color:var(--cream)}
.foot-brand p{margin:14px 0;font-size:.92rem;max-width:34ch}
.foot-col h4{color:var(--cream);font:700 1rem var(--fd);margin-bottom:12px;letter-spacing:0}
.foot-col a{display:block;padding:4px 0;font-size:.92rem;color:#cfd8d6;transition:color .15s}
.foot-col a:hover{color:var(--gold)}
.btn-sm{font-size:.9rem;padding:.55em 1.2em}
.foot-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid #3b4a49;padding:16px 0;font-size:.85rem}
.foot-bar a:hover{color:var(--gold)}

/* ---- page hero ---- */
.page-hero{padding:56px 0 44px;background:radial-gradient(circle at 90% 0%,var(--cream-2),transparent 55%);border-bottom:3px solid var(--ink)}
.page-hero .lede{max-width:60ch}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}

/* ---- alternating rows ---- */
.row-sec{padding:44px 0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.row.flip .row-pic{order:2}
.row-pic{border:3px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:22px;display:grid;place-items:center}
.row-pic img{width:100%;max-height:280px;object-fit:contain}
.row-copy h2{margin-bottom:12px}
.row-copy p{color:#4a5756;margin-bottom:14px}
.ticklist{display:grid;gap:8px;margin:14px 0 22px}
.ticklist li{position:relative;padding-left:28px;font-weight:500}
.ticklist li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);font-size:.7rem;font-weight:800;display:grid;place-items:center}

/* ---- packages ---- */
.pkg-sec{padding:48px 0}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pkg{position:relative;display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);padding:26px}
.pkg-feat{background:var(--teal);color:#fff;transform:translateY(-8px)}
.pkg-feat .pkg-blurb{color:#dceeed}
.pkg-feat .ticklist li{color:#fff}
.pkg-badge{position:absolute;top:-16px;right:18px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);border-radius:999px;font:700 .8rem var(--fd);padding:.2em .9em;transform:rotate(3deg)}
.pkg-tag{font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tang-d)}
.pkg-feat .pkg-tag{color:var(--gold)}
.pkg h3{font-size:1.5rem;margin:6px 0}
.pkg-blurb{color:#4a5756;font-size:.95rem}
.pkg .ticklist{flex:1;margin:16px 0 22px}
.pkg .btn{text-align:center}
.pkg-compact .pkg{padding:20px}
.pkg-compact .pkg .ticklist{margin:12px 0 0}
.center-cta{text-align:center;margin-top:26px}
.addons{padding:20px 0 56px}
.addons h2{margin-bottom:20px}
.addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.addon{background:var(--cream-2);border:3px solid var(--ink);border-radius:14px;padding:16px 18px;box-shadow:4px 4px 0 var(--ink)}
.addon b{display:block;font:700 1.05rem var(--fd)}
.addon span{font-size:.9rem;color:#4a5756}

/* ---- industries / tech ---- */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ind{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 var(--ink);padding:18px 20px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.ind b{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;border:3px solid var(--ink);background:var(--gold);font-size:1.3rem}
.ind:nth-child(even) b{background:#9fd8d2}.ind:nth-child(3n) b{background:#ffd2b8}
.ind h3{font-size:1.05rem}
.ind p{font-size:.88rem;color:#4a5756;grid-column:2}
.tech{display:flex;flex-wrap:wrap;gap:12px}
.tech li{background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:.4em 1.2em;font:700 1rem var(--fd)}
.tech li:nth-child(4n+1){background:var(--gold)}.tech li:nth-child(4n+3){background:#9fd8d2}

/* ---- CTA band ---- */
.cta-band{background:var(--tang);border-block:3px solid var(--ink);padding:36px 0;color:#fff}
.cta-band p{color:#fff0e6;margin-top:6px}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band .btn-tang{background:var(--ink);color:var(--cream)}
.cta-full{min-height:auto;scroll-snap-align:start;padding:56px 0}

/* ---- contact page / legal ---- */
.contact-sec{padding:48px 0}
.contact-2{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:start}
.info-cards{display:grid;gap:16px}
.info-card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);padding:18px 22px;text-decoration:none;transition:transform .15s}
.info-card:hover{transform:translate(-2px,-2px)}
.info-card b{display:block;color:var(--tang-d);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.info-card span{font-weight:600;word-break:break-word}
.legal{padding:48px 0 64px}
.narrow{max-width:760px}
.legal h2{font-size:1.4rem;margin:26px 0 8px}
.legal p{color:#4a5756}
.legal a{color:var(--tang-d);font-weight:600}
.fine-print{margin-top:30px;font-size:.85rem}

/* subpages: sections don't need full-screen height */
.row-sec,.pkg-sec,.addons,.contact-sec,.legal,.page-hero{min-height:0;display:block;scroll-snap-align:none}
.sub .section{min-height:0;display:block;padding:56px 0;scroll-snap-align:none}

@media (max-width:820px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .row,.contact-2{grid-template-columns:1fr}
  .row.flip .row-pic{order:0}
  .pkg-grid,.ind-grid{grid-template-columns:1fr}
  .addon-grid{grid-template-columns:1fr 1fr}
  .pkg-feat{transform:none}
}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
@media (min-width:821px){
  .cta-full{min-height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start}
  .cta-full h2{font-size:clamp(2rem,4vw,3rem)}
  .sub .cta-band{min-height:0;display:block;padding:40px 0}
}

/* fix: wrappers must span the full width inside flex sections */
.hero>.wrap,.section>.wrap,.showcase>.wrap,.cta-full>.wrap{width:100%}
.show-fig{width:100%}
.show-fig img{width:100%;height:auto;max-height:68vh;object-fit:cover}
.show-fig{max-width:none}

/* ---- inner page hero ---- */
.page-hero{position:relative;overflow:hidden;padding:40px 0 44px;background:
  radial-gradient(circle at 88% 20%,#ffd9bf,transparent 45%),
  radial-gradient(circle at 5% 100%,#d6efe9,transparent 40%),var(--cream)}
.ph-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.ph-solo{grid-template-columns:1fr}
.crumbs{font-size:.85rem;font-weight:600;color:#586766;margin-bottom:14px}
.crumbs a{text-decoration:none;color:var(--tang-d)}
.crumbs span{margin:0 6px;opacity:.5}
.ph-copy .kicker{display:none}
.ph-copy h1{font-size:clamp(2.1rem,4.4vw,3.3rem);margin-bottom:12px}
.ph-copy .lede{margin:0 0 20px;max-width:52ch}
.ph-chips{display:flex;flex-wrap:wrap;gap:10px}
.ph-chips a{background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:.35em 1em;font:700 .9rem var(--fd);text-decoration:none;transition:transform .15s}
.ph-chips a:hover{transform:translate(-2px,-2px);background:var(--gold)}
.ph-art{position:relative;justify-self:center;width:100%;max-width:400px;background:var(--gold);border:3px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);padding:18px;transform:rotate(1.5deg)}
.ph-art img{width:100%;height:auto;max-height:260px;object-fit:contain;display:block}
.ph-art .sticker-a{top:-16px;right:-10px;font-size:.85rem}
@media (max-width:820px){.ph-grid{grid-template-columns:1fr}.ph-art{max-width:320px}}
.pkg .ticklist{align-content:start}

/* short windows (or browser zoom above 100%): let sections size naturally */
@media (max-height:720px){
  html{scroll-snap-type:y proximity}
  .hero{padding:24px 0 30px}
  .hero-img{max-height:46vh}
  .section,.showcase,.cta-full{padding:24px 0}
}
@media (max-width:1280px){.wrap{padding:0 20px}}

/* ---- inner pages: every section fits the view ---- */
.sub .page-hero,.sub .row-sec,.sub .pkg-sec,.sub .addons,.sub .contact-sec,.sub .section{
  min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));
  display:flex;flex-direction:column;justify-content:center;
  scroll-snap-align:start;
}
.sub .page-hero>.wrap,.sub .row-sec>.wrap,.sub .pkg-sec>.wrap,.sub .addons>.wrap,.sub .contact-sec>.wrap,.sub .section>.wrap{width:100%}
.sub .page-hero{padding:32px 0}
.sub .row-sec,.sub .pkg-sec,.sub .addons,.sub .contact-sec{padding:32px 0}
.sub .section{padding:32px 0}
.sub .cta-band{min-height:0;scroll-snap-align:start}
.sub .legal{min-height:0;display:block}
.sub .row-pic img{max-height:min(300px,38vh)}
@media (max-width:820px){
  .sub .page-hero,.sub .row-sec,.sub .pkg-sec,.sub .addons,.sub .contact-sec,.sub .section{min-height:0}
}
@media (min-width:821px){.sub .ph-copy h1{font-size:clamp(2.4rem,4.6vw,3.8rem)}.sub .ph-copy .lede{font-size:1.1rem}.sub .ph-art{max-width:460px}}

/* ---- projects ---- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proj{position:relative;display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.proj:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.proj-top{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--pc);border-bottom:3px solid var(--ink)}
.proj-top span{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.proj-top em{margin-left:8px;font:.72rem var(--fb);font-style:normal;color:#fff;opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-body{padding:clamp(12px,2.4vh,20px) 18px}
.proj-tag{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pc)}
.proj h3{font-size:1.25rem;margin:4px 0 10px}
.proj-link{font-weight:700;font-size:.9rem;border-bottom:3px solid var(--gold)}
.proj-link i{font-style:normal}
.proj-badge{position:absolute;top:34px;right:12px;background:var(--gold);border:2px solid var(--ink);border-radius:999px;font:700 .7rem var(--fd);padding:.15em .8em;transform:rotate(4deg)}
.proj-sec{padding:44px 0 56px}
.sub .proj-sec{min-height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start}
.sub .proj-sec>.wrap{width:100%}
@media (max-width:820px){.proj-grid{grid-template-columns:1fr 1fr}.sub .proj-sec{min-height:0}}
@media (max-width:560px){.proj-grid{grid-template-columns:1fr}}

/* project card preview */
.proj-body::before{content:"";display:block;height:clamp(64px,13vh,120px);margin-bottom:14px;border:3px solid var(--ink);border-radius:12px;
  background:
   linear-gradient(var(--ink),var(--ink)) 14px 52%/44% 9px no-repeat,
   linear-gradient(#d8dcd9,#d8dcd9) 14px 70%/64% 7px no-repeat,
   linear-gradient(#d8dcd9,#d8dcd9) 14px 84%/50% 7px no-repeat,
   linear-gradient(var(--gold),var(--gold)) calc(100% - 14px) 46%/22% 44% no-repeat,
   linear-gradient(var(--pc),var(--pc)) top/100% 30% no-repeat,#fff}
.proj-badge{top:auto;bottom:14px;right:14px}
.proj-body{position:relative}
#projects .proj-body::before{height:clamp(36px,7vh,70px);margin-bottom:10px}
#projects .proj-body{padding:12px 16px 14px}
#projects .proj h3{margin-bottom:6px}
#projects .head{margin-bottom:clamp(10px,2vh,20px)}
#projects .center-cta{margin-top:clamp(10px,2vh,18px)}

/* ---- moving hero art ---- */
.hero-img,.ph-art img{animation:floaty 6s ease-in-out infinite;transform-origin:center}
.ph-art{animation:tilt 8s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1deg)}}
@keyframes tilt{0%,100%{transform:rotate(1.5deg)}50%{transform:rotate(-1deg) translateY(-6px)}}
.mock,.ph-art{position:relative}
.fx{position:absolute;z-index:2;pointer-events:none;font-style:normal;line-height:1;display:grid;place-items:center}
.fx-star{color:var(--tang);font-size:1.7rem;animation:spin 7s linear infinite}
.fx-star.gold{color:var(--gold);text-shadow:0 0 0 var(--ink)}
.fx-dot{width:18px;height:18px;border-radius:50%;border:3px solid var(--ink);background:var(--gold);animation:drift 5s ease-in-out infinite}
.fx-dot.teal{background:var(--teal);width:14px;height:14px}
.fx-code{font:800 .9rem ui-monospace,Consolas,monospace;background:var(--ink);color:var(--gold);padding:.25em .6em;border-radius:8px;border:2px solid var(--ink);animation:drift 6s ease-in-out infinite}
.fx-ring{width:34px;height:34px;border-radius:50%;border:4px dashed var(--teal);animation:spin 12s linear infinite}
.fx1{top:4%;left:-4%}.fx2{top:-4%;left:46%}.fx3{bottom:14%;right:-5%}.fx4{bottom:-2%;left:34%}.fx5{top:38%;left:-8%}.fx6{top:52%;right:-7%}
.ph-art .fx1{top:-14px;left:-14px}.ph-art .fx3{bottom:-12px;right:-12px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(8px,-10px)}66%{transform:translate(-6px,-4px)}}
@media (prefers-reduced-motion:reduce){.hero-img,.ph-art,.ph-art img,.fx{animation:none!important}}

/* ---- more motion ---- */
/* staggered entrance in grids */
.svc-grid>.reveal:nth-child(2),.why>.reveal:nth-child(2),.ind-grid>.reveal:nth-child(2),.proj-grid>.reveal:nth-child(2),.track>.reveal:nth-child(2),.pkg-grid>.reveal:nth-child(2){transition-delay:.12s}
.svc-grid>.reveal:nth-child(3),.why>.reveal:nth-child(3),.ind-grid>.reveal:nth-child(3),.proj-grid>.reveal:nth-child(3),.track>.reveal:nth-child(3),.pkg-grid>.reveal:nth-child(3){transition-delay:.24s}
.svc-grid>.reveal:nth-child(4),.why>.reveal:nth-child(4),.ind-grid>.reveal:nth-child(4),.proj-grid>.reveal:nth-child(4),.track>.reveal:nth-child(4){transition-delay:.36s}
.svc-grid>.reveal:nth-child(5),.ind-grid>.reveal:nth-child(5),.proj-grid>.reveal:nth-child(5){transition-delay:.48s}
.svc-grid>.reveal:nth-child(6),.ind-grid>.reveal:nth-child(6),.proj-grid>.reveal:nth-child(6){transition-delay:.6s}

/* why items */
.why-item{position:relative;border-top:none;padding:22px 20px 20px;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);transition:transform .25s,box-shadow .25s,background .25s}
.why-item::before{content:"";position:absolute;left:0;top:0;height:6px;width:0;background:var(--tang);transition:width .9s .3s ease}
.why-item.in::before{width:100%}
.why-item:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:9px 9px 0 var(--ink);background:var(--cream-2)}
.why-item span{display:inline-block;animation:numpop 3.2s ease-in-out infinite}
.why-item:nth-child(2) span{animation-delay:.4s}.why-item:nth-child(3) span{animation-delay:.8s}.why-item:nth-child(4) span{animation-delay:1.2s}
@keyframes numpop{0%,70%,100%{transform:scale(1) rotate(0)}80%{transform:scale(1.25) rotate(-6deg)}90%{transform:scale(1.05) rotate(3deg)}}

/* process steps */
.track b{animation:ping 2.8s ease-out infinite}
.track li:nth-child(2) b{animation-delay:.5s}.track li:nth-child(3) b{animation-delay:1s}.track li:nth-child(4) b{animation-delay:1.5s}
@keyframes ping{0%{box-shadow:4px 4px 0 var(--ink),0 0 0 0 rgba(255,107,26,.5)}70%,100%{box-shadow:4px 4px 0 var(--ink),0 0 0 16px rgba(255,107,26,0)}}
.track::before{animation:dash 1.2s linear infinite;border-top-style:dashed}
@keyframes dash{to{background-position:20px 0}}

/* service + project picture panels */
.svc-pic img{animation:floaty 5s ease-in-out infinite}
.svc:nth-child(2) .svc-pic img{animation-delay:.6s}.svc:nth-child(3) .svc-pic img{animation-delay:1.2s}.svc:nth-child(4) .svc-pic img{animation-delay:1.8s}.svc:nth-child(5) .svc-pic img{animation-delay:2.4s}
.row-pic img,.show-fig img{animation:floaty 7s ease-in-out infinite}
.proj:hover .proj-body::before{animation:wiggle .5s ease}
@keyframes wiggle{25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}

/* industries, tech, packages, buttons */
.ind b{transition:transform .3s}
.ind:hover b{animation:wiggle .6s ease;transform:scale(1.12)}
.tech li{animation:bobchip 4s ease-in-out infinite;transition:transform .2s}
.tech li:nth-child(2n){animation-delay:.5s}.tech li:nth-child(3n){animation-delay:1s}.tech li:nth-child(5n){animation-delay:1.5s}
.tech li:hover{transform:translateY(-4px) rotate(-3deg);background:var(--tang);color:#fff}
@keyframes bobchip{50%{transform:translateY(-5px)}}
.pkg-feat{animation:featpulse 3.5s ease-in-out infinite}
@keyframes featpulse{0%,100%{transform:translateY(-8px)}50%{transform:translateY(-14px)}}
.pkg-badge{animation:badgewob 3s ease-in-out infinite}
@keyframes badgewob{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg) scale(1.06)}}
.btn-tang{position:relative}
.cta-inner .btn,.hero .btn-tang,.contact .btn-tang{animation:btnpulse 2.6s ease-in-out infinite}
@keyframes btnpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.cta-band h2 .hl-gold{display:inline-block;animation:floaty 4s ease-in-out infinite}

/* highlighter draws in under headings */
.hl,.hl-teal{background-repeat:no-repeat;background-size:0 100%;animation:hldraw .9s .3s ease forwards}
.hl{background-image:linear-gradient(transparent 62%,var(--gold) 62% 96%,transparent 96%)}
.hl-teal{background-image:linear-gradient(transparent 62%,#9fd8d2 62% 96%,transparent 96%)}
@keyframes hldraw{to{background-size:100% 100%}}

/* footer + nav small touches */
.brand-mark{transition:transform .3s}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.1)}
.foot-col a{transition:color .15s,transform .15s}
.foot-col a:hover{transform:translateX(4px)}
.info-card:hover,.addon:hover{transform:translate(-3px,-3px) rotate(-.5deg)}
.addon{transition:transform .2s}

@media (prefers-reduced-motion:reduce){
  .why-item span,.track b,.track::before,.svc-pic img,.row-pic img,.show-fig img,.tech li,.pkg-feat,.pkg-badge,.btn,.cta-band h2 .hl-gold{animation:none!important}
  .hl,.hl-teal{animation:none!important;background-size:100% 100%}
}

/* ---- pricing modes ---- */
.mode-toggle{display:flex;width:max-content;max-width:100%;margin:0 auto 12px;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);padding:4px}
.mode-btn{font:700 .95rem var(--fd);border:0;background:transparent;color:var(--ink);padding:.6em 1.4em;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.mode-btn.active{background:var(--ink);color:var(--cream)}
.mode-btn:not(.active):hover{background:var(--cream-2)}
.mode-help{text-align:center;color:#4a5756;margin-bottom:26px;min-height:1.6em}
.mode-panel[hidden]{display:none}
.mode-panel{animation:modein .4s ease}
@keyframes modein{from{opacity:0;transform:translateY(10px)}}
.pkg-note{font:700 .85rem var(--fd);background:var(--cream-2);border:2px dashed var(--ink);border-radius:10px;padding:.5em .8em;margin:-6px 0 16px}
.pkg-feat .pkg-note{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.sub-fine{text-align:center;font-size:.85rem;color:#586766;margin-top:20px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
.cmp{position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);padding:24px}
.cmp h3{font-size:1.35rem;margin-bottom:8px}
.cmp p{color:#4a5756;margin-bottom:6px}
.cmp-sub{background:var(--teal);color:#fff}
.cmp-sub p{color:#dceeed}
.cmp .ticklist{margin:14px 0 0}
.cmp-sub .pkg-badge{top:-16px;right:18px}
@media (max-width:700px){.compare{grid-template-columns:1fr}}
.brand-mark svg{width:24px;height:24px;display:block}

/* three-colour wordmark */
.brand-name .c1{color:var(--teal)}
.brand-name .c2{color:var(--tang-d)}
.brand-name .c3{color:var(--ink)}
.footer .brand-name .c1{color:#9fd8d2}
.footer .brand-name .c2{color:var(--tang)}
.footer .brand-name .c3{color:var(--gold)}
.nav-inner{gap:32px}
.brand{flex-shrink:0}

/* wordmark-only logo */
.brand-name{font-size:1.7rem;letter-spacing:-.035em;line-height:1}
.nav-inner{height:68px}

/* contact: visible label + smaller form */
.kicker-light{background:var(--cream);color:var(--ink)}
.contact .kicker{color:var(--ink)}
.contact{grid-template-columns:1.1fr .9fr}
.contact .form{max-width:420px;justify-self:end;width:100%;padding:16px 18px;gap:8px;border-radius:14px}
.contact .form label{font-size:.82rem;gap:4px}
.contact .form input,.contact .form select,.contact .form textarea{font-size:.9rem;padding:.5em .75em;border-radius:10px;border-width:2px}
.contact .form textarea{min-height:0}
.contact .form .btn{padding:.6em 1.2em;font-size:.95rem}
.contact-2 .form{max-width:520px;padding:18px 20px;gap:9px}
.contact-2 .form input,.contact-2 .form select,.contact-2 .form textarea{font-size:.92rem;padding:.55em .8em}
@media (max-width:820px){.contact .form,.contact-2 .form{max-width:none;justify-self:stretch}}

/* ---- E-E-A-T: developer block, related links ---- */
.dev{display:grid;grid-template-columns:.7fr 1.3fr;gap:44px;align-items:center}
.dev-card{background:var(--gold);border:3px solid var(--ink);border-radius:22px;box-shadow:7px 7px 0 var(--ink);padding:28px;text-align:center}
.dev-avatar{display:grid;place-items:center;width:96px;height:96px;margin:0 auto 14px;border-radius:50%;background:var(--teal);color:#fff;border:3px solid var(--ink);font:800 2rem var(--fd)}
.dev-card h3{font-size:1.4rem}
.dev-card p{margin:2px 0 16px;font-weight:600}
.dev-copy h2{margin:6px 0 12px}
.dev-copy p{color:#4a5756;margin-bottom:10px}
.dev-copy a,.row-copy a:not(.btn),.legal a{color:var(--tang-d);font-weight:600}
.svc-link{color:inherit;text-decoration:none;border-bottom:3px solid transparent;transition:border-color .15s}
.svc-link:hover{border-color:var(--gold)}
.related{padding:44px 0}
.sub .related{min-height:0;display:block}
.related h2{margin-bottom:18px;font-size:1.6rem}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel{display:block;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .15s,background .15s}
.rel:hover{transform:translate(-3px,-3px);background:var(--cream-2)}
.rel b{display:block;font:700 1.05rem var(--fd)}
.rel b i{font-style:normal;color:var(--tang-d)}
.rel span{font-size:.88rem;color:#4a5756}
@media (max-width:820px){.dev{grid-template-columns:1fr}.rel-grid{grid-template-columns:1fr}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* local / areas */
.foot-loc{font-size:.88rem;color:#9fb3b0;line-height:1.5}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.area-col{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);padding:22px}
.area-col h3{margin-bottom:14px}
.area-col .tech{gap:10px}
.area-col .tech li{font-size:.9rem;padding:.3em 1em;animation:none}
@media (max-width:820px){.areas{grid-template-columns:1fr}}

/* ---- blog ---- */
.nav-links{gap:18px}
.blog-sec{padding:44px 0 56px}
.sub .blog-sec{min-height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center}
.sub .blog-sec>.wrap{width:100%}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);padding:22px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.post-card-cat,.post-cat{align-self:flex-start;background:var(--gold);border:2px solid var(--ink);border-radius:999px;font:700 .72rem var(--fd);letter-spacing:.06em;text-transform:uppercase;padding:.2em .8em}
.post-card h3{margin:12px 0 8px;font-size:1.2rem}
.post-card p{color:#4a5756;font-size:.92rem;flex:1}
.post-card-meta{margin-top:14px;font-size:.8rem;color:#586766;font-weight:600}
.blog-empty{text-align:center;font-size:1.1rem;color:#4a5756}
.blog-empty a{color:var(--tang-d);font-weight:700}
.post-hero{padding:40px 0 28px;background:radial-gradient(circle at 90% 20%,#ffd9bf,transparent 45%),var(--cream);border-bottom:3px solid var(--ink)}
.post-wrap{max-width:860px}
.post-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);margin:12px 0 14px}
.post-meta{font-size:.9rem;color:#586766;font-weight:500}
.post-meta a{color:var(--tang-d);font-weight:700}
.post-body{padding:40px 0}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:48px;align-items:start;max-width:1080px}
.prose{font-size:1.05rem;line-height:1.75;color:#2c3a39}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.2rem 0 .8rem;scroll-margin-top:90px}
.prose h3{font-size:1.2rem;margin:1.6rem 0 .5rem;scroll-margin-top:90px}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.3rem;list-style:revert}
.prose li{margin:.3rem 0}
.prose a{color:var(--tang-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:6px solid var(--gold);background:var(--cream-2);padding:.8rem 1.2rem;margin:1.4rem 0;border-radius:0 12px 12px 0}
.prose img{max-width:100%;height:auto;border:3px solid var(--ink);border-radius:14px}
.prose strong{color:var(--ink)}
.table-wrap{overflow-x:auto;margin:1.4rem 0;border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem}
.prose th,.prose td{padding:.7rem .9rem;text-align:left;border-bottom:2px solid #e6dfd2}
.prose th{background:var(--ink);color:var(--cream);font-family:var(--fd)}
.prose tr:last-child td{border-bottom:0}
.toc{position:sticky;top:90px;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 var(--ink);padding:18px}
.toc-title{font:700 .78rem var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--tang-d);margin-bottom:8px}
.toc ul{display:grid;gap:6px;margin-bottom:14px}
.toc a{text-decoration:none;font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3;display:block}
.toc a:hover{color:var(--tang-d)}
.toc-cta{border-top:2px dashed var(--ink);padding-top:14px;display:grid;gap:6px;font-size:.88rem}
.toc-cta b{font-family:var(--fd)}
.author-sec{padding:10px 0 40px}
.author-box{display:flex;gap:18px;align-items:center;background:var(--gold);border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);padding:20px}
.author-box .dev-avatar{flex:none;margin:0;width:72px;height:72px;font-size:1.4rem}
.author-name{font:800 1.1rem var(--fd);margin-bottom:2px}
.author-box p{font-size:.92rem}
.author-box a{color:var(--ink);font-weight:700}
@media (max-width:900px){.post-grid{grid-template-columns:1fr}.toc{position:static;order:-1}.blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.blog-grid{grid-template-columns:1fr}.author-box{flex-direction:column;text-align:center}}
.post-cat,.post-card-cat{display:inline-block;width:auto}

/* ---- prices ---- */
.pkg-price{font-size:1.05rem;margin:2px 0 8px;color:var(--ink)}
.pkg-price b{font:800 1.9rem var(--fd);letter-spacing:-.02em}
.pkg-price span{font-size:.85rem;font-weight:600;opacity:.85}
.pkg-feat .pkg-price{color:#fff}
.care-only{background:var(--gold);border:3px solid var(--ink);border-radius:12px;padding:.7em 1em;margin:0 auto 12px;max-width:640px;color:var(--ink);font-size:.95rem}
.care-only a{color:var(--ink);font-weight:700;text-decoration:underline}
.sub-fine p{margin:0 0 8px}
.narrow2{max-width:760px}

/* ---- mobile call bar ---- */
.mbar{display:none}
@media (max-width:820px){
  .mbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--cream);border-top:3px solid var(--ink)}
  .mbar a{flex:1;text-align:center;font:700 1rem var(--fd);text-decoration:none;padding:.7em 1em;border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink)}
  .mbar-call{background:#fff;color:var(--ink)}
  .mbar-quote{background:var(--tang);color:#fff}
  body{padding-bottom:78px}
}
.more-link{margin-left:12px;font-weight:700;color:var(--tang-d);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---- legal pages ---- */
.legal-updated{font-size:.9rem;font-weight:600;color:#586766;margin-bottom:16px}
.legal-toc{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 var(--ink);padding:18px 22px;margin-bottom:28px}
.legal-toc b{font:700 .8rem var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--tang-d)}
.legal-toc ol{columns:2;column-gap:28px;margin:10px 0 0 1.2rem;list-style:decimal}
.legal-toc li{margin:.25rem 0;break-inside:avoid}
.legal-toc a{text-decoration:none;font-weight:600;color:var(--ink)}
.legal-toc a:hover{color:var(--tang-d)}
.legal h2{scroll-margin-top:90px;font-size:1.35rem}
.legal ul{margin:0 0 1rem 1.3rem;list-style:disc;color:#4a5756}
.legal li{margin:.35rem 0}
.legal p{margin-bottom:.9rem}
@media (max-width:560px){.legal-toc ol{columns:1}}
.sub .page-hero:has(+ .legal){min-height:0;display:block;padding:44px 0 36px;scroll-snap-align:none}
.sub .legal{padding:36px 0 64px}

/* ---- blog images ---- */
.post-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;max-width:1080px}
.post-cover{margin:0;border:3px solid var(--ink);border-radius:20px;box-shadow:7px 7px 0 var(--ink);overflow:hidden;background:#fff;line-height:0}
.post-cover img{width:100%;height:auto;display:block}
.fig{margin:2rem 0;border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);overflow:hidden;background:#fff}
.fig img{width:100%;height:auto;display:block;border:0;border-radius:0}
.fig figcaption{padding:.7rem 1rem;font-size:.88rem;color:#586766;border-top:3px solid var(--ink);background:var(--cream-2)}
.post-card{padding:0;overflow:hidden}
.post-card-img{width:100%;height:auto;display:block;border-bottom:3px solid var(--ink)}
.post-card>*:not(.post-card-img){margin-left:20px;margin-right:20px}
.post-card-cat{margin-top:16px}
.post-card-meta{margin-bottom:18px}
.prose .fig img{border:0}
@media (max-width:820px){.post-hero-grid{grid-template-columns:1fr}.post-cover{order:-1}}

/* ---- free website check ---- */
.check-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}
.check-card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink);padding:26px}
.check-card h2{font-size:1.6rem;margin-bottom:14px}
.check-card .form{border:0;box-shadow:none;padding:0;background:transparent;gap:12px}
.fine-print{font-size:.85rem;color:#586766;margin-top:12px}
.check-results:empty{display:none}
.check-results{background:var(--cream);border:3px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink);padding:24px}
.check-results h3{margin:14px 0 12px;font-size:1.1rem;word-break:break-all}
.score{display:flex;align-items:baseline;gap:10px}
.score b{font:800 3.4rem var(--fd);line-height:1}
.score span{font-weight:700;color:#586766}
.score-good b{color:var(--green,#2f9e5b)}.score-warn b{color:var(--tang-d)}.score-bad b{color:#d9483b}
.res-list{display:grid;gap:8px}
.res{display:flex;gap:12px;align-items:flex-start;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:10px 14px}
.res b{display:block;font-family:var(--fd)}
.res span:not(.res-ic){font-size:.9rem;color:#4a5756}
.res-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:3px solid var(--ink);font-weight:800;font-size:.85rem;margin-top:2px}
.res-good .res-ic{background:#bfe8cf}.res-warn .res-ic{background:var(--gold)}.res-bad .res-ic{background:#f5b5ad}
.res-cta{margin-top:16px;background:var(--gold);border:3px solid var(--ink);border-radius:14px;padding:16px 18px;display:grid;gap:12px}
@media (max-width:900px){.check-wrap{grid-template-columns:1fr}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.promo-band{background:var(--teal);color:#fff;border-block:3px solid var(--ink);padding:44px 0;scroll-snap-align:start}
.promo-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.promo-band h2{margin:8px 0}
.promo-band p:not(.kicker){color:#dceeed;max-width:60ch}
.promo-band .kicker{background:var(--cream);color:var(--ink)}

/* ---- accessibility: strong contrast on orange ---- */
.btn-tang{color:var(--ink)}
.sticker-a,.pkg-feat .btn-tang,.mbar-quote{color:var(--ink)}
.cta-band{color:var(--ink)}
.cta-band p{color:#33291a}
.cta-band h2 .hl-gold{color:var(--ink);background:linear-gradient(transparent 62%,var(--gold) 62% 96%,transparent 96%)}
.foot-col h3{color:var(--cream);font:700 1rem var(--fd);margin-bottom:12px;letter-spacing:0}