/* =============================================================
   TOWPATH STUDIO — shared stylesheet
   Built against design.md. Tokens first, then base, then components.
   ============================================================= */
/* Self-hosted fonts (Fontshare, woff2). Paths resolve relative to this
   stylesheet at the site root, so they work from /blog/ pages too. */
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --bg:#07090A; --bg-elev:#0B0F11; --surface:#0E1416; --surface-2:#121A1C;
  --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.14);
  --text:#EDF1F1; --text-muted:#9AA7A7; --text-dim:#7E8C8B;
  --aqua-300:#6EE9DC; --aqua-400:#34D8C8; --aqua-500:#16BAAB; --aqua-600:#0E8F84;
  --amber-300:#FFB27A; --amber-400:#FF9255; --amber-500:#F2783A;
  --dusk-300:#DCA9EF; --dusk-400:#C77FE3; --dusk-500:#A557C6;
  --positive:#4FD8A8; --warning:#F2C14E; --negative:#F2705B;
  --grad:linear-gradient(118deg,var(--amber-400) 0%,var(--dusk-400) 52%,var(--aqua-400) 100%);
  --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.7); --shadow-sm:0 12px 30px -16px rgba(0,0,0,.6);
  --ease:cubic-bezier(.32,.72,0,1);
  --container:1200px; --pad:clamp(1.25rem,5vw,2.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:"General Sans",system-ui,sans-serif;
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--aqua-500);color:#05201E}

/* ---- background ---- */
.mesh{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  /* the dusk sky between the lamplight and the water — third, static orb */
  background:radial-gradient(52% 42% at 64% -6%,rgba(199,127,227,.11),transparent 72%)}
.mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(130px);
  animation:drift 28s var(--ease) infinite alternate}
.mesh::before{width:55vw;height:55vw;top:-16vw;left:-12vw;
  background:radial-gradient(circle,var(--amber-400),transparent 68%);opacity:.16}
.mesh::after{width:62vw;height:62vw;bottom:-24vw;right:-16vw;
  background:radial-gradient(circle,var(--aqua-400),transparent 68%);opacity:.16;animation-delay:-14s}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(4vw,3vw,0)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- typography ---- */
h1,h2,h3,h4,.display{font-family:"Clash Display",sans-serif;font-weight:600;color:var(--text);
  line-height:1.05;letter-spacing:-.02em}
.display-xl{font-size:clamp(2.7rem,6.5vw,5.5rem);font-weight:700;letter-spacing:-.03em;line-height:.98}
.display{font-size:clamp(2.3rem,4.5vw,3.6rem);letter-spacing:-.025em}
h2{font-size:clamp(2rem,3.5vw,3rem)}
h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15}
h4{font-size:1.15rem;line-height:1.25}
.lead{font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--text-muted);line-height:1.55;max-width:48ch}
p{color:var(--text-muted)}
.measure{max-width:62ch}
.grad-text{background:linear-gradient(90deg,var(--amber-400) 0%,var(--dusk-400) 26%,var(--aqua-400) 50%,var(--dusk-400) 74%,var(--amber-400) 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:gradScroll 11s linear infinite}
@keyframes gradScroll{from{background-position:200% 0}to{background-position:0% 0}}

/* ---- layout ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:880px;margin-inline:auto}
section{padding-block:clamp(2.75rem,5vw,4.25rem)}
.section-head{max-width:50ch;margin-bottom:2.4rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:.9rem 0 1rem}
.divider{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--hairline-strong),transparent)}
.grid{display:grid;gap:1.2rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:60;display:flex;justify-content:center;padding-top:1.25rem;padding-inline:var(--pad)}
.nav-pill{display:flex;align-items:center;gap:2rem;padding:.55rem .55rem .55rem 1.3rem;width:100%;max-width:var(--container);
  background:rgba(11,15,17,.62);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hairline);border-radius:var(--r-pill);box-shadow:var(--shadow-sm)}
.nav-brand{font-family:"Clash Display";font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
  display:flex;align-items:center;gap:.6rem;margin-right:auto}
.nav-mark{width:24px;height:24px;border-radius:8px;background:var(--grad);box-shadow:0 0 18px -4px var(--aqua-500);flex:none}
.nav-links{display:flex;gap:1.5rem;font-size:.92rem}
.nav-links a{color:var(--text-muted);transition:color .3s var(--ease);position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--grad);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-burger{display:none;width:44px;height:44px;border:1px solid var(--hairline);border-radius:var(--r-pill);
  background:var(--surface-2);cursor:pointer;position:relative}
.nav-burger span{position:absolute;left:13px;width:18px;height:1.6px;background:var(--text);border-radius:2px;
  transition:transform .42s var(--ease),opacity .42s var(--ease)}
.nav-burger span:nth-child(1){top:18px}.nav-burger span:nth-child(2){top:24px}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* mobile overlay menu */
.menu-overlay{position:fixed;inset:0;z-index:55;background:rgba(7,9,10,.86);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:0 2rem;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
body.menu-open .menu-overlay{opacity:1;pointer-events:auto}
.menu-overlay a{font-family:"Clash Display";font-weight:600;font-size:clamp(2rem,9vw,3rem);color:var(--text);
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
body.menu-open .menu-overlay a{opacity:1;transform:none}
body.menu-open .menu-overlay a:nth-child(1){transition-delay:.08s}
body.menu-open .menu-overlay a:nth-child(2){transition-delay:.14s}
body.menu-open .menu-overlay a:nth-child(3){transition-delay:.2s}
body.menu-open .menu-overlay a:nth-child(4){transition-delay:.26s}
body.menu-open .menu-overlay a:nth-child(5){transition-delay:.32s}
@media(max-width:820px){.nav-links{display:none}.nav-cta .btn{display:none}.nav-burger{display:block}}
@media(min-width:821px){.menu-overlay{display:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:"General Sans";font-weight:600;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;color:var(--text);
  transition:transform .42s var(--ease),border-color .42s var(--ease),background .42s var(--ease);will-change:transform}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#05201E;box-shadow:0 10px 40px -16px var(--aqua-500)}
.btn-primary .ico{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.18);display:grid;place-items:center;
  transition:transform .42s var(--ease),background .42s var(--ease)}
.btn-primary:hover .ico{transform:translate(3px,-2px);background:rgba(0,0,0,.28)}
.btn-secondary{background:var(--surface-2);border-color:var(--hairline)}
.btn-secondary:hover{border-color:var(--hairline-strong);background:var(--surface)}
.btn-ghost{padding-inline:.4rem;background:none}
.btn-ghost:hover{color:var(--aqua-300)}
.btn-lg{padding:1rem 1.7rem;font-size:1rem}
.ico svg{width:14px;height:14px}

/* ---- pills / tags / badges ---- */
.tag{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:var(--r-pill);font-size:.78rem;color:var(--text-muted)}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--aqua-400);box-shadow:0 0 10px var(--aqua-400)}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .75rem;border-radius:var(--r-pill);font-size:.74rem;font-weight:600}
.badge.pop{color:#05201E;background:var(--grad)}

/* ---- cards (double-bezel) ---- */
.bezel{padding:6px;border-radius:var(--r-xl);background:rgba(255,255,255,.03);border:1px solid var(--hairline);
  transition:border-color .5s var(--ease),transform .5s var(--ease);height:100%}
.bezel:hover{border-color:var(--hairline-strong);transform:translateY(-4px)}
.bezel-core{background:var(--surface);border-radius:calc(var(--r-xl) - 6px);padding:1.9rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);height:100%;display:flex;flex-direction:column}
.glow{box-shadow:var(--shadow),0 0 80px -42px var(--aqua-500)}
.card-icon{width:48px;height:48px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  margin-bottom:1.3rem;color:var(--aqua-300);background:rgba(52,216,200,.08);border:1px solid rgba(52,216,200,.20)}
.card-icon.amber{color:var(--amber-300);background:rgba(255,146,85,.09);border-color:rgba(255,146,85,.22)}
.card-icon.dusk{color:var(--dusk-300);background:rgba(199,127,227,.10);border-color:rgba(199,127,227,.24)}
.card-icon svg{width:23px;height:23px}
/* soft colour washes for feature cards — one per card, always subtle */
.bezel-core.wash{position:relative;overflow:hidden}
.bezel-core.wash::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:0}
.bezel-core.wash>*{position:relative;z-index:1}
.bezel-core.wash-aqua::after{background:radial-gradient(85% 85% at 100% 0%,rgba(52,216,200,.13),transparent 55%)}
.bezel-core.wash-amber::after{background:radial-gradient(85% 85% at 0% 0%,rgba(255,146,85,.13),transparent 55%)}
.bezel-core.wash-dusk::after{background:radial-gradient(85% 85% at 100% 0%,rgba(199,127,227,.14),transparent 55%)}
.bezel-core h3{margin-bottom:.5rem}
.bezel-core p{font-size:.96rem}

/* ---- hero ---- */
.hero{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.25rem,4vw,3.25rem)}
.hero .display-xl{max-width:17ch;margin:1.4rem 0 1.6rem}
.hero .lead{margin-bottom:2.2rem}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.hero-stats{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:3rem;color:var(--text-muted);font-size:.9rem}
.hero-stats b{font-family:"Clash Display";font-weight:600;color:var(--text);font-size:1.5rem;display:block;letter-spacing:-.02em}

/* browser mockup visual */
.mock{padding:8px;border-radius:var(--r-xl);background:rgba(255,255,255,.04);border:1px solid var(--hairline);
  box-shadow:var(--shadow),0 0 120px -50px var(--aqua-500);position:relative;overflow:hidden}
.mock::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% -10%,rgba(255,146,85,.12),transparent 50%),radial-gradient(120% 90% at 100% 110%,rgba(52,216,200,.14),transparent 50%);pointer-events:none}
.mock-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem}
.mock-bar .dots{display:flex;gap:.4rem}.mock-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--surface-2)}
.mock-bar .url{margin-left:.6rem;flex:1;background:var(--surface-2);border-radius:var(--r-pill);padding:.35rem .9rem;
  font-size:.74rem;color:var(--text-dim);border:1px solid var(--hairline)}
.mock-body{background:var(--surface);border-radius:calc(var(--r-xl) - 8px);padding:1.6rem;border:1px solid var(--hairline);position:relative;z-index:1}
.mock-line{height:11px;border-radius:6px;background:var(--surface-2);margin-bottom:.7rem}
.mock-pill{display:inline-block;padding:.3rem .8rem;border-radius:var(--r-pill);font-size:.7rem;background:var(--grad);color:#05201E;font-weight:600;margin-bottom:1rem}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.2rem}
.mock-tile{height:64px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hairline)}
.mock-tile.lit{background:linear-gradient(135deg,rgba(255,146,85,.16),rgba(52,216,200,.16));border-color:var(--hairline-strong)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start}
/* desktop: drop the animation to line up with the H1 ("Websites"), not the tag above it */
@media(min-width:921px){.hero-stage{margin-top:3.6rem}}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr}.mock{margin-top:1rem}}

/* ---- steps ---- */
.steps{counter-reset:step}
.step{position:relative}
.step .num{font-family:"Clash Display";font-weight:700;font-size:2.4rem;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}

/* ---- bento ---- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(140px,auto);gap:1.2rem}
.bento .span-2{grid-column:span 2}.bento .row-2{grid-row:span 2}
@media(max-width:860px){.bento{grid-template-columns:1fr}.bento .span-2{grid-column:span 1}.bento .row-2{grid-row:span 1}}

/* ---- pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.price-grid.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
@media(max-width:920px){.price-grid,.price-grid.two{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.plan{display:flex;flex-direction:column;height:100%}
.plan .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.plan .name{font-family:"Clash Display";font-weight:600;font-size:1.25rem}
.plan .price{font-family:"Clash Display";font-weight:700;font-size:2.6rem;letter-spacing:-.03em;margin:.6rem 0 .2rem;line-height:1}
.plan .price span{font-family:"General Sans";font-weight:500;font-size:.95rem;color:var(--text-dim)}
.plan .price small{font-size:1rem;color:var(--text-dim);font-weight:500;font-family:"General Sans"}
.plan p.sub{font-size:.92rem;margin-bottom:1.4rem}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:.8rem;margin:1.4rem 0;flex:1}
.plan li{display:flex;gap:.65rem;font-size:.93rem;color:var(--text-muted);align-items:flex-start}
.plan li svg{width:18px;height:18px;color:var(--aqua-400);flex:none;margin-top:1px}
.plan.featured{box-shadow:var(--shadow),0 0 90px -40px var(--aqua-500)}
.plan.featured .price{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;padding:1.4rem 0;display:flex;justify-content:space-between;align-items:center;
  gap:1.5rem;font-family:"Clash Display";font-weight:600;font-size:1.1rem;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:30px;height:30px;border-radius:50%;border:1px solid var(--hairline);flex:none;position:relative;
  transition:transform .42s var(--ease),border-color .42s var(--ease)}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--text);
  left:50%;top:50%;transition:transform .42s var(--ease)}
.faq summary .plus::before{width:12px;height:1.6px;transform:translate(-50%,-50%)}
.faq summary .plus::after{width:1.6px;height:12px;transform:translate(-50%,-50%)}
.faq details[open] summary .plus{transform:rotate(135deg);border-color:var(--aqua-500)}
.faq details p{padding:0 0 1.5rem;font-size:.96rem;max-width:64ch}

/* ---- forms ---- */
.form{display:grid;gap:1.1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.84rem;color:var(--text-muted);font-weight:500}
.field input,.field textarea,.field select{background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:.85rem 1rem;color:var(--text);font-family:inherit;font-size:.95rem;width:100%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{resize:vertical;min-height:140px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--aqua-500);
  box-shadow:0 0 0 3px rgba(52,216,200,.22)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239AA7A7' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.form-note{font-size:.82rem;color:var(--text-dim)}
.form-note a{color:var(--text-muted);border-bottom:1px solid var(--hairline-strong);transition:color .3s var(--ease)}
.form-note a:hover{color:var(--aqua-300)}
.form-status{padding:1rem 1.2rem;border-radius:var(--r-md);font-size:.92rem;display:none}
.form-status.show{display:block}
.form-status.ok{background:rgba(79,216,168,.12);color:var(--positive);border:1px solid rgba(79,216,168,.25)}
.form-status.err{background:rgba(242,112,91,.12);color:var(--negative);border:1px solid rgba(242,112,91,.25)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* contact split */
.contact-grid{display:grid;grid-template-columns:1fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:start}
/* on phones, WhatsApp (the stated quickest channel) comes before the form */
@media(max-width:920px){.contact-grid{grid-template-columns:1fr}.contact-grid .contact-aside{order:-1}}
/* WhatsApp-solid: distinct from the brand-gradient primary so the two CTAs don't compete */
.btn-wa-solid{background:#1FAF54;color:#fff;box-shadow:0 10px 40px -18px rgba(37,211,102,.55)}
.btn-wa-solid:hover{background:#25D366}
.contact-detail{display:flex;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--hairline)}
.contact-detail .ci{width:42px;height:42px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hairline);
  display:grid;place-items:center;color:var(--aqua-300);flex:none}
.contact-detail .ci svg{width:20px;height:20px}
.contact-detail .k{font-size:.78rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em}
.contact-detail .v{color:var(--text);font-weight:500}

/* ---- CTA band ---- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(2.5rem,6vw,5rem);text-align:center;
  background:var(--surface);border:1px solid var(--hairline)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 18% -20%,rgba(255,146,85,.16),transparent 55%),radial-gradient(70% 110% at 82% -15%,rgba(199,127,227,.14),transparent 55%),radial-gradient(80% 120% at 50% 120%,rgba(52,216,200,.18),transparent 55%);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{margin-bottom:1rem;max-width:18ch;margin-inline:auto}

/* ---- value list ---- */
.value{display:flex;gap:1rem;align-items:flex-start}
.value .vi{width:40px;height:40px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hairline);
  display:grid;place-items:center;color:var(--aqua-300);flex:none}
.value .vi svg{width:19px;height:19px}
.value h4{margin-bottom:.3rem}
.value p{font-size:.93rem}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--hairline);margin-top:2rem;padding-block:4rem 2.5rem;background:var(--bg-elev)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:2rem}}
.foot-brand{font-family:"Clash Display";font-weight:600;font-size:1.1rem;display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.foot-col h5{font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--text-dim);margin-bottom:1rem;font-weight:600;font-family:"General Sans"}
.foot-col a{display:block;color:var(--text-muted);font-size:.93rem;padding:.3rem 0;transition:color .3s var(--ease)}
@media(max-width:760px){.foot-col a{padding:.55rem 0}}
.foot-col a:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:2rem;
  border-top:1px solid var(--hairline);color:var(--text-dim);font-size:.85rem}

/* ---- reveal ----
   Hidden ONLY when JS is running (app.js adds .js to <html> first thing),
   so no-JS visitors, print and any observer failure still see the content. */
html.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .reveal.in{opacity:1;transform:none;filter:none}
@media print{html.js .reveal{opacity:1;transform:none;filter:none}}

/* ---- WhatsApp button ---- */
.btn-wa .wa{width:18px;height:18px;flex:none}
.btn-wa .wa svg{width:18px;height:18px;display:block}
.btn-secondary.btn-wa:hover{border-color:var(--positive);color:var(--text)}

/* ---- trust strip (under hero CTA) ---- */
.trust-strip{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem;
  font-size:.86rem;color:var(--text-dim)}
.trust-strip b{color:var(--text-muted);font-weight:500}
.trust-strip a{color:var(--text-muted);border-bottom:1px solid var(--hairline-strong);transition:color .3s var(--ease)}
.trust-strip a:hover{color:var(--aqua-300)}

/* ---- audiences / industries ---- */
.aud-out{margin-top:auto;padding-top:1rem;font-size:.84rem;font-weight:600;letter-spacing:.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- selected work ---- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
/* portfolio page: two-up so the screenshots actually sell the work,
   with the first (featured) card full width */
.work-grid.duo{grid-template-columns:repeat(2,1fr)}
@media(min-width:861px){
  .work-grid.duo .w-feat{grid-column:1/-1}
  .work-grid.duo .w-feat .work-shot{aspect-ratio:21/9}
}
@media(max-width:860px){.work-grid,.work-grid.duo{grid-template-columns:1fr}}
.work-type{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua-300);
  margin-bottom:.8rem;display:block}
/* rotate the project-type label colour so the grid reads hand-coloured, not stamped */
.work-grid>:nth-child(3n+2) .work-type{color:var(--amber-300)}
.work-grid>:nth-child(3n) .work-type{color:var(--dusk-300)}
.work-card h3{font-size:1.25rem;margin-bottom:.5rem}
.work-card p{font-size:.94rem;margin-bottom:1.3rem}
.work-link{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;
  color:var(--text);transition:gap .3s var(--ease),color .3s var(--ease);align-self:flex-start}
.work-link svg{width:14px;height:14px;color:var(--aqua-400)}
.work-link:hover{gap:.7rem;color:var(--aqua-300)}
.work-card .url{font-size:.82rem;color:var(--text-dim);margin-bottom:1.1rem;font-family:"General Sans"}
.tag-demo{display:inline-flex;align-items:center;margin-left:.6rem;padding:.14rem .55rem;border-radius:var(--r-pill);
  font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-300);
  background:rgba(255,146,85,.10);border:1px solid rgba(255,146,85,.28);vertical-align:middle}
.work-shot{display:block;width:calc(100% + 3.8rem);margin:-1.9rem -1.9rem 1.4rem;aspect-ratio:16/10;object-fit:cover;
  object-position:top center;border-radius:calc(var(--r-xl) - 6px) calc(var(--r-xl) - 6px) 0 0;border-bottom:1px solid var(--hairline)}

/* ---- founder strip ---- */
.founder{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
@media(max-width:680px){.founder{grid-template-columns:1fr}}
.founder .avatar{width:84px;height:84px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  font-family:"Clash Display";font-weight:700;font-size:2rem;color:#05201E;flex:none;
  box-shadow:0 0 50px -16px var(--aqua-500)}
.founder .sig{font-family:"Clash Display";font-weight:600;color:var(--text);margin-top:.9rem;font-size:1.05rem}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html.js .reveal{opacity:1;transform:none;filter:none}
  .mesh::before,.mesh::after{animation:none}
}

/* ============================================================
   HERO STAGE · looping "what we deliver" animation
   One synchronised 24s master loop. Every animated element keyframes
   the SAME period in absolute %, so scenes stay in sync + loop seamlessly.
   Scenes: 1 design & build · 2 turnaround · 3 phone rings · 4 UK hosting.
   ============================================================ */
@property --hsn{syntax:'<integer>';initial-value:0;inherits:false}

.hero-stage{--hs:30s;position:relative;isolation:isolate}
.hero-stage .hs-glow{position:absolute;inset:-12% -8% -16% -8%;z-index:-1;border-radius:50%;
  background:
    radial-gradient(40% 55% at 26% 28%,rgba(255,146,85,.30),transparent 60%),
    radial-gradient(34% 48% at 72% 16%,rgba(199,127,227,.26),transparent 62%),
    radial-gradient(46% 60% at 80% 74%,rgba(52,216,200,.34),transparent 62%);
  filter:blur(46px);opacity:.9;animation:hsGlow var(--hs) ease-in-out infinite}
@keyframes hsGlow{
  0%,100%{transform:translate3d(-3%,2%,0) scale(1)}
  25%{transform:translate3d(4%,-2%,0) scale(1.06)}
  50%{transform:translate3d(2%,3%,0) scale(1.02)}
  75%{transform:translate3d(-2%,-1%,0) scale(1.05)}
}

.hs-window{position:relative;border-radius:var(--r-xl);padding:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--hairline-strong);box-shadow:var(--shadow);overflow:hidden}
.hs-window::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.10),transparent 30%);mix-blend-mode:screen}

/* browser chrome */
.hs-bar{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem .7rem}
.hs-dots{display:flex;gap:.4rem}
.hs-dots i{width:9px;height:9px;border-radius:50%;background:var(--surface-2)}
.hs-url{flex:1;display:flex;align-items:center;gap:.45rem;background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:.34rem .8rem;
  font-size:.74rem;color:var(--text-muted);font-family:"General Sans"}
.hs-url .hs-lock{width:13px;height:13px;color:var(--aqua-400);flex:none}
.hs-caret{width:1.5px;height:13px;background:var(--aqua-300);margin-left:1px;animation:hsCaret 1.1s steps(1) infinite}
@keyframes hsCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
.hs-livetag{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;color:var(--text-muted);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:.26rem .6rem;flex:none}
.hs-livedot{width:7px;height:7px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 0 rgba(79,216,168,.6);
  animation:hsLive 2.4s ease-out infinite}
@keyframes hsLive{0%{box-shadow:0 0 0 0 rgba(79,216,168,.55)}70%,100%{box-shadow:0 0 0 8px rgba(79,216,168,0)}}

/* screen + scene stacking */
.hs-screen{position:relative;min-height:336px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:calc(var(--r-xl) - 8px);overflow:hidden}
.hs-scene{position:absolute;inset:0;padding:1.35rem 1.45rem;opacity:0;display:flex;flex-direction:column}
.hs-s1{animation:hsScene1 var(--hs) var(--ease) infinite}
.hs-s2{animation:hsScene2 var(--hs) var(--ease) infinite}
.hs-s3{animation:hsScene3 var(--hs) var(--ease) infinite}
.hs-s4{animation:hsScene4 var(--hs) var(--ease) infinite;justify-content:center;gap:1.2rem}
@keyframes hsScene1{0%{opacity:0;transform:translateY(12px) scale(.99)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-8px) scale(.99)}}
@keyframes hsScene2{0%,25%{opacity:0;transform:translateY(12px) scale(.99)}28%,47%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-8px) scale(.99)}}
@keyframes hsScene3{0%,50%{opacity:0;transform:translateY(12px) scale(.99)}53%,72%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-8px) scale(.99)}}
@keyframes hsScene4{0%,75%{opacity:0;transform:translateY(12px) scale(.99)}78%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px) scale(.99)}}

.hs-eyebrow{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1rem;opacity:0}
.hs-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--aqua-400);box-shadow:0 0 12px var(--aqua-400)}

/* reusable gradient tick */
.hs-tick{width:16px;height:16px;border-radius:50%;background:var(--grad);position:relative;flex:none;
  box-shadow:0 0 12px -3px var(--aqua-500)}
.hs-tick::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;
  border:2px solid #05201E;border-top:0;border-left:0;transform:rotate(45deg)}

/* ---- SCENE 1 · designed & built ---- */
.hs-site{display:flex;flex-direction:column;height:100%}
.hs-site-top{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;opacity:0;animation:s1in var(--hs) var(--ease) infinite}
.hs-logo{width:26px;height:26px;border-radius:8px;background:var(--grad);box-shadow:0 0 16px -4px var(--aqua-500);flex:none}
.hs-navpill{width:38px;height:9px;border-radius:5px;background:var(--surface-2)}
.hs-navpill:first-of-type{margin-left:.4rem}
.hs-navpill.cta{margin-left:auto;width:64px;height:24px;border-radius:var(--r-pill);background:linear-gradient(120deg,rgba(255,146,85,.4),rgba(52,216,200,.4))}
.hs-pill{align-self:flex-start;padding:.32rem .8rem;border-radius:var(--r-pill);font-size:.7rem;font-weight:600;
  color:#05201E;background:var(--grad);margin-bottom:1.1rem;box-shadow:0 8px 24px -10px var(--aqua-500);
  opacity:0;animation:s1in var(--hs) var(--ease) infinite;animation-delay:calc(var(--hs)*.012)}
.hs-fill{height:13px;border-radius:6px;background:var(--surface-2);margin-bottom:.7rem;overflow:hidden;width:70%}
.hs-fill.lg{height:20px;width:90%}
.hs-fill i{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--aqua-600),var(--aqua-300));animation:s1fill var(--hs) var(--ease) infinite}
.hs-fill:nth-of-type(3) i{animation-delay:calc(var(--hs)*.01)}
.hs-fill:nth-of-type(4) i{animation-delay:calc(var(--hs)*.02)}
@keyframes s1fill{0%,4%{width:0}14%,21%{width:100%}24%,100%{width:0}}
.hs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-top:.5rem}
.hs-tiles span{height:60px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hairline);
  opacity:0;transform:scale(.85);animation:s1pop var(--hs) var(--ease) infinite}
.hs-tiles .t1{background:linear-gradient(135deg,rgba(255,146,85,.22),rgba(52,216,200,.22));border-color:var(--hairline-strong);
  box-shadow:0 0 26px -10px var(--aqua-500)}
.hs-tiles .t2{animation-delay:calc(var(--hs)*.012)}
.hs-tiles .t3{animation-delay:calc(var(--hs)*.024)}
@keyframes s1pop{0%,7%{opacity:0;transform:scale(.85)}13%,21%{opacity:1;transform:none}24%,100%{opacity:0;transform:scale(.9)}}
.hs-site-foot{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:1rem;
  opacity:0;animation:s1in var(--hs) var(--ease) infinite;animation-delay:calc(var(--hs)*.05)}
.hs-cta{padding:.55rem 1.1rem;border:0;border-radius:var(--r-pill);font:600 .8rem/1 "General Sans";
  color:#05201E;background:var(--grad);cursor:default;animation:s1pulse var(--hs) var(--ease) infinite}
@keyframes s1pulse{0%,15%{box-shadow:0 0 0 0 rgba(110,233,220,.5)}18.5%{box-shadow:0 0 0 11px rgba(110,233,220,0)}19%,100%{box-shadow:0 0 0 0 rgba(110,233,220,0)}}
.hs-tel{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text-muted)}
.hs-tel svg{width:14px;height:14px;color:var(--aqua-300)}
.hs-cursor{position:absolute;left:90px;bottom:30px;width:22px;height:22px;color:#fff;opacity:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));animation:s1cursor var(--hs) var(--ease) infinite;z-index:4}
.hs-cursor svg{width:100%;height:100%}
@keyframes s1cursor{
  0%,6%{opacity:0;transform:translate(54px,-34px)}
  9%{opacity:1}
  16%{opacity:1;transform:translate(0,0)}
  17.5%{transform:translate(0,3px) scale(.88)}
  19%{transform:translate(0,0) scale(1)}
  21%{opacity:1;transform:translate(0,0)}
  24%,100%{opacity:0}}
@keyframes s1in{0%,3%{opacity:0;transform:translateY(10px)}8%,21%{opacity:1;transform:none}24%,100%{opacity:0;transform:translateY(-6px)}}

/* ---- SCENE 2 · turnaround times ---- */
.hs-s2 .hs-eyebrow{animation:s2in var(--hs) var(--ease) infinite}
.hs-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:.4rem 0 1.5rem}
.hs-rail{position:absolute;left:12.5%;right:12.5%;top:8px;height:3px;border-radius:3px;background:var(--surface-2);overflow:hidden;z-index:0}
.hs-rail i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);animation:s2rail var(--hs) var(--ease) infinite}
@keyframes s2rail{0%,28%{width:0}43%,46%{width:100%}49%,100%{width:0}}
.hs-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.28rem}
.hs-step b{font:600 .82rem/1 "General Sans";color:var(--text)}
.hs-step small{font-size:.68rem;color:var(--text-dim)}
.hs-node{width:18px;height:18px;border-radius:50%;background:var(--surface-2);border:1px solid var(--hairline-strong);
  position:relative;animation:s2node var(--hs) var(--ease) infinite}
.hs-step.st2 .hs-node{animation-delay:calc(var(--hs)*.03)}
.hs-step.st3 .hs-node{animation-delay:calc(var(--hs)*.06)}
.hs-step.st4 .hs-node{animation-delay:calc(var(--hs)*.09)}
@keyframes s2node{
  0%,28%{transform:scale(.7);background:var(--surface-2);box-shadow:none}
  33%,46%{transform:scale(1);background:var(--grad);box-shadow:0 0 16px -3px var(--aqua-500)}
  49%,100%{transform:scale(.7);background:var(--surface-2);box-shadow:none}}
.hs-node.go::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--aqua-400);
  opacity:0;animation:s2go var(--hs) var(--ease) infinite}
@keyframes s2go{0%,40%{opacity:0;transform:scale(.6)}44%{opacity:.9;transform:scale(1)}50%,100%{opacity:0;transform:scale(1.3)}}
.hs-turn{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;opacity:0;animation:s2turn var(--hs) var(--ease) infinite}
.hs-turn-big{display:flex;align-items:baseline;gap:.45rem}
.hs-turn-big b{font:700 3.1rem/.85 "Clash Display";letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hs-turn-big span{font-size:.74rem;color:var(--text-muted);line-height:1.25}
.hs-turn-list{list-style:none;display:flex;flex-direction:column;gap:.45rem;font-size:.8rem;color:var(--text-muted)}
.hs-turn-list li{display:flex;align-items:center;gap:.55rem}
@keyframes s2in{0%,25%{opacity:0;transform:translateY(10px)}30%,46%{opacity:1;transform:none}49%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes s2turn{0%,35%{opacity:0;transform:translateY(12px)}41%,46%{opacity:1;transform:none}49%,100%{opacity:0;transform:translateY(-6px)}}

/* ---- SCENE 3 · the phone rings ---- */
.hs-s3 .hs-eyebrow{animation:s3in var(--hs) var(--ease) infinite}
.hs-note{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--hairline);margin-bottom:.65rem;
  opacity:0;transform:translateX(30px);animation:s3note var(--hs) var(--ease) infinite}
.hs-note b{display:block;font:600 .86rem/1.2 "General Sans";color:var(--text)}
.hs-note small{color:var(--text-muted);font-size:.75rem}
.hs-note>div{flex:1}
.hs-time{font-size:.66rem;color:var(--text-dim);flex:none;align-self:flex-start}
.hs-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none}
.hs-ic svg{width:18px;height:18px}
.hs-ic.aqua{background:rgba(52,216,200,.14);color:var(--aqua-300)}
.hs-ic.amber{background:rgba(255,146,85,.16);color:var(--amber-300)}
.hs-ic.wa{background:rgba(37,211,102,.16);color:#25D366}
.hs-n2{animation-delay:calc(var(--hs)*.035)}
.hs-n3{animation-delay:calc(var(--hs)*.07)}
@keyframes s3note{0%,51%{opacity:0;transform:translateX(30px)}56%,71%{opacity:1;transform:none}74%,100%{opacity:0;transform:translateX(-10px)}}
.hs-counter{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.9rem;
  font-size:.8rem;color:var(--text-muted);opacity:0;animation:s3in var(--hs) var(--ease) infinite;animation-delay:calc(var(--hs)*.1)}
.hs-num{counter-reset:n var(--hsn);font:700 1.05rem/1 "Clash Display";color:var(--aqua-300);--hsn:0;
  animation:hsCount var(--hs) linear infinite}
.hs-num::after{content:counter(n)}
@keyframes hsCount{0%,55%{--hsn:0}69%{--hsn:27}72%,100%{--hsn:27}}
.hs-trend{font-size:.7rem;color:var(--positive);border:1px solid rgba(79,216,168,.3);border-radius:var(--r-pill);
  padding:.18rem .55rem;flex:none}
@keyframes s3in{0%,50%{opacity:0;transform:translateY(10px)}55%,71%{opacity:1;transform:none}74%,100%{opacity:0;transform:translateY(-6px)}}

/* ---- SCENE 4 · fast, secure UK hosting ---- */
.hs-host-row{display:flex;align-items:center;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:s4in var(--hs) var(--ease) infinite}
.hs-gauge{position:relative;width:134px;height:134px;flex:none}
.hs-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.hs-gauge circle{fill:none;stroke-width:9;stroke-linecap:round}
.hs-gauge .track{stroke:var(--surface-2)}
.hs-gauge .prog{stroke:var(--aqua-400);stroke-dasharray:327;stroke-dashoffset:327;
  filter:drop-shadow(0 0 8px rgba(52,216,200,.5));animation:s4gauge var(--hs) var(--ease) infinite}
@keyframes s4gauge{0%,78%{stroke-dashoffset:327}90%,97%{stroke-dashoffset:4}100%{stroke-dashoffset:327}}
.hs-gauge-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.hs-gauge-mid b{font:600 1.55rem/1 "Clash Display";letter-spacing:-.02em;color:var(--text)}
.hs-gauge-mid small{display:block;color:var(--text-muted);font-size:.72rem;margin-top:.2rem}
.hs-speed{display:flex;flex-direction:column;gap:.5rem;min-width:148px}
.hs-speed-num{display:flex;align-items:baseline;gap:.4rem}
.hs-speed-num b{font:600 1.5rem/1 "Clash Display";color:var(--text)}
.hs-speed-num small{font-size:.72rem;color:var(--text-muted)}
.hs-speedbar{display:block;height:9px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.hs-speedbar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);animation:s4speed var(--hs) var(--ease) infinite}
@keyframes s4speed{0%,80%{width:0}90%,97%{width:100%}100%{width:0}}
.hs-speed-tag{align-self:flex-start;font-size:.66rem;color:var(--aqua-300);
  border:1px solid var(--hairline-strong);border-radius:var(--r-pill);padding:.2rem .55rem}
.hs-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;
  max-width:330px;margin:0 auto;width:100%}
.hs-feats li{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted);
  opacity:0;animation:s4feat var(--hs) var(--ease) infinite}
.hs-feats .f2{animation-delay:calc(var(--hs)*.02)}
.hs-feats .f3{animation-delay:calc(var(--hs)*.04)}
.hs-feats .f4{animation-delay:calc(var(--hs)*.06)}
@keyframes s4in{0%,75%{opacity:0;transform:translateY(12px)}79%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes s4feat{0%,82%{opacity:0;transform:translateY(8px)}87%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}

/* ---- caption strip ---- */
.hs-caption{position:relative;height:1.5rem;margin-top:.7rem;text-align:center}
.hs-cap{position:absolute;inset:0;font:600 .9rem/1.5rem "General Sans";opacity:0;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hs-c1{animation:hsScene1 var(--hs) var(--ease) infinite}
.hs-c2{animation:hsScene2 var(--hs) var(--ease) infinite}
.hs-c3{animation:hsScene3 var(--hs) var(--ease) infinite}
.hs-c4{animation:hsScene4 var(--hs) var(--ease) infinite}

@media(max-width:920px){.hs-screen{min-height:312px}}

/* reduced motion: hold a clean first frame, no looping */
@media(prefers-reduced-motion:reduce){
  .hs-s1,.hs-c1{opacity:1!important;transform:none!important}
  .hs-s2,.hs-s3,.hs-s4,.hs-c2,.hs-c3,.hs-c4{opacity:0!important}
  .hs-site-top,.hs-pill,.hs-site-foot,.hs-tiles span{opacity:1!important;transform:none!important}
  .hs-fill i{width:100%!important}
  .hs-cursor{display:none}
}

/* =============================================================
   BLOG  — index, cards, article. Built on the same tokens.
   ============================================================= */

/* ---- category tag (colour-coded by topic) ---- */
.ptag{display:inline-flex;align-items:center;gap:.45rem;font-family:"General Sans";font-weight:600;
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:.34rem .7rem;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--text-muted);white-space:nowrap}
.ptag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aqua-400);box-shadow:0 0 10px var(--aqua-400)}
.ptag.t-google{color:#bff0ea;background:rgba(52,216,200,.10);border-color:rgba(52,216,200,.28)}
.ptag.t-google::before{background:var(--aqua-400);box-shadow:0 0 10px var(--aqua-400)}
.ptag.t-reviews{color:#ffd9bd;background:rgba(255,146,85,.10);border-color:rgba(255,146,85,.28)}
.ptag.t-reviews::before{background:var(--amber-400);box-shadow:0 0 10px var(--amber-400)}
.ptag.t-social{color:#cfeee9;background:rgba(110,233,220,.09);border-color:rgba(110,233,220,.26)}
.ptag.t-social::before{background:var(--aqua-300);box-shadow:0 0 10px var(--aqua-300)}
.ptag.t-bookings{color:#ffe0c7;background:rgba(255,178,122,.10);border-color:rgba(255,178,122,.28)}
.ptag.t-bookings::before{background:var(--amber-300);box-shadow:0 0 10px var(--amber-300)}
.ptag.t-website{color:#cfe9e6;background:rgba(22,186,171,.10);border-color:rgba(22,186,171,.30)}
.ptag.t-website::before{background:var(--aqua-500);box-shadow:0 0 10px var(--aqua-500)}
.ptag.t-local{color:#ffd2b3;background:rgba(242,120,58,.10);border-color:rgba(242,120,58,.30)}
.ptag.t-local::before{background:var(--amber-500);box-shadow:0 0 10px var(--amber-500)}

/* ---- blog index hero ---- */
.blog-hero{text-align:center;max-width:62ch;margin-inline:auto}
.blog-hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.04;
  max-width:24ch;margin:1rem auto 1.1rem}
.blog-hero .lead{margin-inline:auto}

/* ---- category filter ---- */
.cat-bar{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:2.4rem}
.cat-chip{font-family:"General Sans";font-weight:600;font-size:.85rem;padding:.5rem 1.05rem;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--text-muted);cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.cat-chip:hover{border-color:var(--hairline-strong);color:var(--text)}
.cat-chip.active{background:var(--grad);color:#05201E;border-color:transparent;box-shadow:0 8px 24px -14px var(--aqua-500)}

/* ---- post grid + cards ---- */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.8rem}
.post-card{display:flex;flex-direction:column;padding:6px;border-radius:var(--r-xl);background:rgba(255,255,255,.03);
  border:1px solid var(--hairline);transition:transform .42s var(--ease),border-color .42s var(--ease),box-shadow .42s var(--ease);overflow:hidden}
.post-card:hover{transform:translateY(-5px);border-color:var(--hairline-strong);box-shadow:var(--shadow),0 0 70px -42px var(--aqua-500)}
.pc-art{position:relative;border-radius:calc(var(--r-xl) - 6px);overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.pc-art svg{display:block;width:100%;height:100%}
.pc-body{padding:1.35rem 1.25rem 1.45rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.pc-body .ptag{align-self:flex-start}
.pc-body h3{font-size:1.28rem;line-height:1.18;letter-spacing:-.01em;transition:color .3s var(--ease)}
.post-card:hover .pc-body h3{color:var(--aqua-300)}
.pc-body p{font-size:.95rem;color:var(--text-muted);flex:1}
.pc-meta{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--text-dim);margin-top:.2rem}
.pc-meta .dot-sep{width:3px;height:3px;border-radius:50%;background:var(--text-dim)}
/* featured: full-width, art beside text */
.post-card.feat{grid-column:1 / -1;flex-direction:row}
.post-card.feat .pc-art{aspect-ratio:auto;flex:0 0 48%;min-height:300px}
.post-card.feat .pc-body{justify-content:center;padding:2.2rem 2.4rem}
.post-card.feat .pc-body h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.post-card.feat .pc-body p{font-size:1.02rem;max-width:46ch;flex:none}
.feat-flag{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-300)}
@media(max-width:820px){.post-card.feat{flex-direction:column}.post-card.feat .pc-art{flex:none;width:100%;aspect-ratio:16/9;min-height:0}}
@media(max-width:680px){.post-grid{grid-template-columns:1fr}}

/* empty state */
.blog-empty{text-align:center;color:var(--text-dim);padding:4rem 1rem;display:none}

/* ============ ARTICLE ============ */
.article{max-width:820px;margin-inline:auto;padding-inline:var(--pad)}
.crumb{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-dim);margin-bottom:1.6rem}
.crumb a{color:var(--text-muted)}.crumb a:hover{color:var(--text)}
.art-head{text-align:center;max-width:62ch;margin-inline:auto}
.art-head h1{font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.06;margin:1.1rem 0 1.1rem}
.art-head .dek{font-size:clamp(1.1rem,1.6vw,1.32rem);color:var(--text-muted);line-height:1.55;max-width:54ch;margin-inline:auto}
.art-meta{display:flex;align-items:center;justify-content:center;gap:.85rem;margin-top:1.8rem;flex-wrap:wrap}
.art-meta .avatar{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  font-family:"Clash Display";font-weight:700;color:#05201E;font-size:1rem;flex:none}
.art-meta .byl{text-align:left;font-size:.86rem;line-height:1.35}
.art-meta .byl b{color:var(--text);font-weight:600}
.art-meta .byl span{color:var(--text-dim);display:block}

/* article hero art */
.art-hero{margin:2.6rem 0;padding:8px;border-radius:var(--r-xl);background:rgba(255,255,255,.04);
  border:1px solid var(--hairline);box-shadow:var(--shadow);position:relative;overflow:hidden}
.art-hero svg{display:block;width:100%;height:auto;border-radius:calc(var(--r-xl) - 8px)}

/* prose */
.prose{max-width:68ch;margin-inline:auto;font-size:1.075rem;line-height:1.75;color:var(--text-muted)}
.prose>p{margin:1.25rem 0}
.prose>p:first-of-type{font-size:1.18rem;line-height:1.7;color:#cbd5d4}
.prose h2{font-family:"Clash Display";font-weight:600;color:var(--text);font-size:clamp(1.6rem,2.6vw,2.05rem);
  letter-spacing:-.02em;line-height:1.12;margin:2.8rem 0 1rem}
.prose h3{font-family:"Clash Display";font-weight:600;color:var(--text);font-size:1.32rem;margin:2rem 0 .7rem}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--aqua-300);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(110,233,220,.4);
  transition:text-decoration-color .3s var(--ease)}
.prose a:hover{text-decoration-color:var(--aqua-300)}
.prose ul,.prose ol{margin:1.2rem 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.7rem}
.prose ul li,.prose ol li{position:relative;padding-left:1.9rem}
.prose ul li::before{content:"";position:absolute;left:.1rem;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 10px -1px var(--aqua-500)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:.05em;width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--aqua-300);font-size:.78rem;font-weight:600;
  display:grid;place-items:center;font-family:"General Sans"}
.prose blockquote{margin:2rem 0;padding:.4rem 0 .4rem 1.6rem;border-left:3px solid transparent;
  border-image:var(--grad) 1;font-family:"Clash Display";font-weight:500;font-size:1.35rem;line-height:1.4;
  color:var(--text);letter-spacing:-.01em}

/* callout / key takeaway */
.callout{margin:2.2rem 0;padding:6px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid var(--hairline)}
.callout-core{background:var(--surface);border-radius:calc(var(--r-lg) - 6px);padding:1.5rem 1.6rem;position:relative;overflow:hidden}
.callout-core::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 0% 0%,rgba(52,216,200,.10),transparent 55%);pointer-events:none}
.callout p{color:var(--text);font-size:1.04rem;margin:0}
.callout.amber .callout-core::after{background:radial-gradient(90% 120% at 0% 0%,rgba(255,146,85,.12),transparent 55%)}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.4rem 0}
@media(max-width:620px){.stat-band{grid-template-columns:1fr}}
.stat-cell{padding:1.5rem 1.4rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--hairline);text-align:left}
.stat-cell .big{font-family:"Clash Display";font-weight:700;font-size:clamp(2rem,4vw,2.7rem);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}
.stat-cell p{font-size:.92rem;color:var(--text-muted);margin:0}

/* checklist */
.checklist{margin:1.6rem 0;display:flex;flex-direction:column;gap:.8rem}
.checklist .ci{display:flex;gap:.85rem;align-items:flex-start;font-size:1.02rem;color:var(--text-muted)}
.checklist .ci svg{flex:none;width:24px;height:24px;margin-top:.05rem;color:var(--aqua-400)}
.checklist .ci b{color:var(--text);font-weight:600}

/* figure + attribution (for real photos later) */
.figure{margin:2.4rem 0}
.figure img{display:block;width:100%;border-radius:var(--r-lg);border:1px solid var(--hairline)}
.figure figcaption{margin-top:.7rem;font-size:.82rem;color:var(--text-dim);text-align:center}
.figure figcaption a{color:var(--text-muted)}

/* in-article CTA */
.art-cta{margin:3.2rem 0 1rem;padding:6px;border-radius:var(--r-xl);background:rgba(255,255,255,.03);border:1px solid var(--hairline)}
.art-cta-core{position:relative;overflow:hidden;border-radius:calc(var(--r-xl) - 6px);background:var(--surface);padding:clamp(1.8rem,4vw,2.6rem);text-align:center}
.art-cta-core::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% -20%,rgba(255,146,85,.14),transparent 55%),radial-gradient(80% 120% at 50% 120%,rgba(52,216,200,.16),transparent 55%);pointer-events:none}
.art-cta-core>*{position:relative;z-index:1}
.art-cta-core h2{font-family:"Clash Display";font-weight:600;font-size:clamp(1.5rem,3vw,2rem);margin:.6rem 0 .8rem;letter-spacing:-.02em}
.art-cta-core p{max-width:48ch;margin:0 auto 1.6rem;color:var(--text-muted)}
.art-cta-core .btn-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* author + share + related */
.art-foot{max-width:68ch;margin:3rem auto 0}
.share{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:1.4rem 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.share span{font-size:.85rem;color:var(--text-dim);margin-right:.2rem}
.share a,.share button{display:inline-flex;align-items:center;gap:.5rem;font-family:"General Sans";font-weight:500;font-size:.88rem;
  color:var(--text-muted);background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:.5rem .95rem;cursor:pointer;transition:all .3s var(--ease)}
.share a:hover,.share button:hover{color:var(--text);border-color:var(--hairline-strong)}
.share svg{width:16px;height:16px}
.author-card{display:flex;gap:1.2rem;align-items:center;margin-top:2.2rem;padding:1.6rem;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--hairline)}
.author-card .avatar{width:56px;height:56px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  font-family:"Clash Display";font-weight:700;color:#05201E;font-size:1.4rem;flex:none}
.author-card h4{font-size:1.05rem;margin-bottom:.2rem}
.author-card p{font-size:.92rem;color:var(--text-muted);margin:0}
.related{margin-top:3.5rem}
.related h2{text-align:center;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:1.8rem}

/* article art accents (reusable svg motifs animate gently) */
@media (prefers-reduced-motion: no-preference){
  .pin-pulse{transform-box:fill-box;transform-origin:center;animation:pinp 3.2s var(--ease) infinite}
  @keyframes pinp{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:.9;transform:scale(1.15)}}
  .twinkle{animation:tw 2.6s ease-in-out infinite}
  @keyframes tw{0%,100%{opacity:.35}50%{opacity:1}}
}

/* ========== PRICING: monthly framing + pay-monthly band ========== */
.plan .pm{font-size:.85rem;color:var(--text-dim);margin:-.9rem 0 1.2rem}
.price-example{text-align:center;font-size:1.02rem;color:var(--text-muted);margin:2rem auto 0;max-width:58ch;
  padding:1.1rem 1.5rem;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--hairline)}
.price-example b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}

/* ---- pricing FAQ groups ---- */
.faq-group{margin:2.6rem 0 .9rem;font-family:"Clash Display";font-weight:600;font-size:1.15rem;color:var(--text)}
.faq-group:first-of-type{margin-top:0}
.monthly-band{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.monthly-band ul{margin-bottom:0}
.monthly-side{text-align:center;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:1.6rem 1.4rem;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.monthly-side .pm{margin-bottom:1.1rem}
.monthly-side .price{justify-content:center}
.monthly-side .btn{justify-content:center}
@media (max-width:760px){
  .monthly-band{grid-template-columns:1fr}
  .monthly-side{text-align:left}
}

/* ========== CONTACT: WhatsApp reply-time note ========== */
.wa-note{text-align:center;font-size:.86rem;color:var(--text-dim);margin:-.8rem 0 1.4rem}

/* ========== MOBILE WHATSAPP BUTTON (injected by app.js) ========== */
.wa-fab{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:70;display:none;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.45);transition:transform .2s var(--ease, ease)}
.wa-fab svg{width:28px;height:28px;display:block}
.wa-fab:active{transform:scale(.94)}
@media (max-width:860px){.wa-fab{display:flex}}

/* ========== FOOTER LEGAL LINKS ========== */
.foot-legal a{color:var(--text-dim);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(154,167,167,.35)}
.foot-legal a:hover{color:var(--text-muted)}

/* ========== COOKIE NOTICE (injected by app.js) ========== */
.cookie-notice{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:80;
  display:flex;align-items:center;gap:1.2rem;max-width:560px;margin-inline:auto;
  padding:1rem 1.2rem;border-radius:16px;border:1px solid rgba(255,255,255,.1);
  background:rgba(10,14,15,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);animation:cnup .5s var(--ease, ease) both}
@keyframes cnup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cookie-notice p{margin:0;font-size:.88rem;line-height:1.55;color:var(--text-muted)}
.cookie-notice b{color:var(--text)}
.cookie-notice a{color:var(--aqua-300);text-decoration:underline;text-underline-offset:3px}
.cookie-notice .cookie-ok{flex:none;padding:.55rem 1.1rem}
.cookie-notice.gone{opacity:0;transform:translateY(16px);transition:.35s}
@media (max-width:560px){.cookie-notice{flex-direction:column;align-items:stretch;text-align:left}
  .cookie-notice .cookie-ok{justify-content:center}}
/* keep the WhatsApp bubble clear of the notice on mobile */
@media (max-width:860px){body.notice-open .wa-fab{display:none}}

/* ============ MOBILE COMPACTION (design-review 2026-07-02) ============ */
@media(max-width:680px){
  section{padding-block:2.4rem}
  .bezel-core{padding:1.35rem}
  .card-icon{width:40px;height:40px;margin-bottom:1rem}
  .card-icon svg{width:19px;height:19px}
  .section-head{margin-bottom:1.8rem}
}

/* ---- "whole job" bento checklist ---- */
.whole-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;margin-top:1.2rem;padding:0}
.whole-list li{position:relative;padding-left:1.5rem;font-size:.92rem;color:var(--text-muted)}
.whole-list li::before{content:"";position:absolute;left:0;top:.42em;width:.9rem;height:.5rem;
  border-left:2px solid var(--aqua-400);border-bottom:2px solid var(--aqua-400);transform:rotate(-45deg)}
@media(max-width:480px){.whole-list{grid-template-columns:1fr}}