/* =====================================================================
   BRIGHTSIDE STUDIO  |  styles.css  (how the site looks)
   ✏️ EDIT HERE (optional): the colours are the lines starting with -- just below.
   A colour looks like #1e88f0. Change the code to change the colour everywhere.
     --brand-blue  = logo blue        --brand-dark = charcoal background
     --accent      = buttons/links    --surface    = page background
   The second and third blocks are the same colours for dark mode.
   You don't need to touch anything else in this file.
   ===================================================================== */
/* Brightside Studio — layout: charcoal hero band with device mockups, then calm off-white sections on a 1120px grid */
:root{
  --surface:#f6f5f1; --surface-raised:#ffffff; --ink:#1a1c20; --ink-muted:#5c636e;
  --brand-blue:#1e88f0; --brand-dark:#1b1e23; --paper:#f6f5f1; --paper-muted:#9aa3ae;
  --accent:#1569c7; --on-accent:#ffffff; --border:#dedcd5; --control:#5c636e;
  --tint:#e8f1fc; --dark-line:#353a42;
  --display:"Space Grotesk", system-ui, sans-serif;
  --sans:"Inter", system-ui, sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:48px; --s5:96px;
  --r-sm:4px; --r-md:8px; --r-lg:16px;
  --wrap:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#1b1e23; --surface-raised:#23272e; --ink:#f6f5f1; --ink-muted:#9aa3ae;
    --brand-dark:#2b3039; --accent:#5aa8f5; --on-accent:#0e1116; --border:#353a42; --control:#9aa3ae;
    --tint:#1f2b3a; --dark-line:#414854; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --surface:#1b1e23; --surface-raised:#23272e; --ink:#f6f5f1; --ink-muted:#9aa3ae;
  --brand-dark:#2b3039; --accent:#5aa8f5; --on-accent:#0e1116; --border:#353a42; --control:#9aa3ae;
  --tint:#1f2b3a; --dark-line:#414854; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--surface);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--brand-dark)}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent)}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.dark :focus-visible{outline-color:var(--brand-blue)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}

.label{font:500 12px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.lede{font-size:18px;line-height:28px;color:var(--ink-muted);max-width:56ch}
.h-display{font-size:clamp(36px,6vw,60px);line-height:1.04;letter-spacing:-.02em}
.h1{font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-.01em}
.h2{font-size:24px;line-height:30px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s1);min-height:48px;padding:0 22px;border-radius:var(--r-md);font:600 15px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s ease, background-color .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--control)}
.dark .btn-ghost{color:var(--paper);border-color:#6b7380}
.dark .btn-primary{background:var(--brand-blue);color:#0e1116}
.btn svg{width:18px;height:18px}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--brand-dark);color:var(--paper);border-bottom:1px solid var(--dark-line)}
.nav{display:flex;align-items:center;gap:var(--s3);min-height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none}
.brand svg{width:40px;height:30px;flex:none}
.brand-name{font:700 20px/1 var(--sans);letter-spacing:-.01em;display:block}
.brand-tag{font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--paper-muted);display:block;margin-top:5px}
.nav-links{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{display:block;padding:10px 14px;border-radius:var(--r-md);color:#c9ced5;text-decoration:none;font-weight:500;font-size:15px}
.nav-links a:hover{color:var(--paper);background:rgba(246,245,241,.06)}
.nav-links a[aria-current="page"]{color:var(--paper);box-shadow:inset 0 -2px 0 var(--brand-blue);border-radius:0}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;border:1px solid #4a515c;border-radius:var(--r-md);overflow:hidden}
.lang button{background:none;border:0;color:var(--paper-muted);font:600 13px/1 var(--sans);padding:9px 10px;cursor:pointer;letter-spacing:.04em}
.lang button[aria-pressed="true"]{background:var(--paper);color:#1b1e23}
.menu-btn{display:none;background:none;border:1px solid #4a515c;border-radius:var(--r-md);color:var(--paper);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
@media (max-width:880px){
  .nav-cta{display:none}
}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  .nav-actions{margin-left:auto}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--brand-dark);border-bottom:1px solid var(--dark-line);padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));gap:0;margin:0}
  .nav-links:not(.open){display:none}
  .nav-links a{padding:14px 8px;font-size:17px}
  .nav-links a[aria-current="page"]{box-shadow:none;color:var(--brand-blue)}
  .brand-tag{display:none}
}

/* Dark band */
.dark{background:var(--brand-dark);color:var(--paper)}
.dark .label{color:var(--paper-muted)}
.dark .lede{color:#b8bfc8}

/* Hero */
.hero{overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s4);align-items:center;padding-block:72px 88px}
.hero-copy{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.hero-copy .h-display span span{color:var(--brand-blue)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 20px;color:#b8bfc8;font-size:14px;list-style:none;padding:0;margin:0}
.hero-facts li{display:flex;align-items:center;gap:8px}
.hero-facts svg{width:18px;height:18px;color:var(--brand-blue)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;padding-block:48px 64px}}

/* Device mockups */
.devices{position:relative;min-width:0;padding-bottom:28px}
.laptop{position:relative;width:88%;max-width:100%}
.screen{background:#0f1114;border:1px solid #3a404a;border-radius:var(--r-lg) var(--r-lg) 6px 6px;padding:10px}
.laptop-base{height:14px;margin:0 -6%;background:#3a404a;border-radius:0 0 14px 14px;position:relative}
.laptop-base::after{content:"";position:absolute;left:42%;right:42%;top:0;height:5px;background:#2a2f37;border-radius:0 0 6px 6px}
.phone{position:absolute;right:0;bottom:0;width:30%;min-width:120px;background:#0f1114;border:1px solid #3a404a;border-radius:24px;padding:7px}
.phone .site{border-radius:18px}
.site{background:#fbfaf7;color:#1f1b17;border-radius:6px;overflow:hidden;aspect-ratio:16/10;display:flex;flex-direction:column;font-family:var(--sans)}
.phone .site{aspect-ratio:9/18.5}
.site-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:#ece9e2;flex:none}
.site-bar i{width:7px;height:7px;border-radius:50%;background:#c9c4ba;display:block}
.site-bar b{flex:1;height:14px;margin-left:8px;background:#fbfaf7;border-radius:4px;font:500 8px/14px var(--sans);color:#8a847a;padding-left:8px;white-space:nowrap;overflow:hidden}

/* sample restaurant site inside laptop */
.m-rest{display:grid;grid-template-columns:1.1fr 1fr;flex:1;min-height:0}
.m-rest .copy{padding:8% 7%;display:flex;flex-direction:column;gap:7%;justify-content:center}
.m-rest .k{font:600 clamp(6px,.8vw,9px)/1 var(--sans);letter-spacing:.14em;color:#b5542c;text-transform:uppercase}
.m-rest .t{font:600 clamp(13px,2.1vw,26px)/1.02 Georgia,"Times New Roman",serif;color:#1f1b17}
.m-rest .p{display:grid;gap:5px}
.m-rest .p i{display:block;height:5px;border-radius:3px;background:#ddd7cc}
.m-rest .p i:nth-child(2){width:80%}
.m-rest .b{display:flex;gap:6px}
.m-rest .b i{display:block;height:clamp(12px,1.6vw,20px);width:40%;border-radius:4px;background:#b5542c}
.m-rest .b i+i{background:none;border:1px solid #b5542c;width:30%}
.m-rest .art{background:#d9643a;position:relative;overflow:hidden}
.m-rest .art .sun{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;background:#f2b544;right:14%;top:14%}
.m-rest .art .sea{position:absolute;left:0;right:0;bottom:0;height:38%;background:#1f5d7a}
.m-rest .art .sea::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:#2d7899;border-radius:50% 50% 0 0}
.m-rest .art .plate{position:absolute;left:12%;bottom:16%;width:40%;aspect-ratio:1;border-radius:50%;background:#fbfaf7;border:5px solid #efe8dc;display:grid;place-items:center}
.m-rest .art .plate::after{content:"";width:46%;aspect-ratio:1;border-radius:50%;background:#e2a03f;box-shadow:6px -4px 0 -2px #6f8d3a}

/* sample salon site inside phone */
.m-salon{flex:1;display:flex;flex-direction:column;background:#f3eee9}
.m-salon .top{display:flex;justify-content:space-between;align-items:center;padding:10px 10px 6px}
.m-salon .logo{font:700 9px/1 var(--sans);letter-spacing:.12em;color:#2f2a35}
.m-salon .burg{width:12px;display:grid;gap:2px}.m-salon .burg i{display:block;height:2px;background:#2f2a35}
.m-salon .pic{margin:0 10px;border-radius:12px;flex:1.3;background:#c9b6d4;position:relative;overflow:hidden}
.m-salon .pic::before{content:"";position:absolute;left:22%;bottom:-12%;width:56%;height:78%;border-radius:50% 50% 0 0;background:#6d5577}
.m-salon .pic::after{content:"";position:absolute;left:34%;top:16%;width:32%;aspect-ratio:1;border-radius:50%;background:#e7c9b5}
.m-salon .body{padding:10px;display:grid;gap:6px;flex:1;align-content:start}
.m-salon .t{font:600 13px/1.1 var(--display);color:#2f2a35}
.m-salon .row{display:flex;justify-content:space-between;font:500 8px/1 var(--sans);color:#5d5563;padding:6px 0;border-bottom:1px solid #ddd3cb}
.m-salon .cta{margin-top:4px;height:22px;border-radius:11px;background:#2f2a35;color:#f3eee9;font:600 8px/22px var(--sans);text-align:center}

/* floating chips on hero */
.chip{position:absolute;display:flex;align-items:center;gap:10px;background:var(--surface-raised);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;font-size:13px;font-weight:500;white-space:nowrap}
.chip svg{width:20px;height:20px;color:var(--brand-blue);flex:none}
.chip small{display:block;color:var(--ink-muted);font-weight:400;font-size:12px}
.chip-a{left:-4%;top:58%}
.chip-b{right:22%;top:-4%}
@media (max-width:520px){.chip-a{left:0;top:auto;bottom:-6px}.chip-b{display:none}}

/* load sequence */
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>*:nth-child(2){animation-delay:.08s}
  .hero-copy>*:nth-child(3){animation-delay:.16s}
  .hero-copy>*:nth-child(4){animation-delay:.24s}
  .hero-copy>*:nth-child(5){animation-delay:.32s}
  .laptop{animation:rise 1s .15s cubic-bezier(.2,.7,.2,1) both}
  .phone{animation:phoneIn 1s .45s cubic-bezier(.2,.7,.2,1) both}
  .chip{animation:pop .6s cubic-bezier(.2,.8,.2,1.2) both}
  .chip-a{animation-delay:.9s}.chip-b{animation-delay:1.05s}
  .float{animation:pop .6s .9s cubic-bezier(.2,.8,.2,1.2) both, bob 6s 1.6s ease-in-out infinite}
}
@keyframes rise{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes phoneIn{from{opacity:.001;transform:translate(24px,24px) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:.001;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes bob{50%{transform:translateY(-6px)}}

/* Scroll reveal: elements start visible; JS only defers ones below the fold at load */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.pending{opacity:0;transform:translateY(32px)}
.reveal.pending.from-left{transform:translateX(-32px)}
.reveal.pending.scale{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.reveal.pending{opacity:1;transform:none}.reveal{transition:none}}

/* Sections */
.section{padding-block:var(--s5)}
.section.tight{padding-block:64px}
.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--s4);max-width:640px}
.section-head.split{max-width:none;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.section-head.split>div{display:flex;flex-direction:column;gap:12px;max-width:600px}
.alt{background:var(--surface-raised);border-block:1px solid var(--border)}

/* Business types marquee */
.types{border-bottom:1px solid var(--border);background:var(--surface);overflow:hidden}
.types-inner{display:flex;align-items:center;gap:var(--s3);padding-block:20px}
.types .label{flex:none}
.marquee{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:36px;width:max-content;font:500 18px/1 var(--display);color:var(--ink)}
.marquee-track span{display:flex;align-items:center;gap:36px;white-space:nowrap}
.marquee-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-blue)}
@media (prefers-reduced-motion:no-preference){.marquee-track{animation:slide 38s linear infinite}}
@keyframes slide{to{transform:translateX(-50%)}}
@media (max-width:600px){.types-inner{flex-direction:column;align-items:flex-start;gap:12px}.marquee{width:100%}}

/* Outcomes */
.outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.outcome{display:flex;flex-direction:column;gap:12px;padding-top:var(--s3);border-top:1px solid var(--border)}
.outcome .ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--tint);display:grid;place-items:center;color:var(--brand-blue)}
.outcome .ic svg{width:24px;height:24px}
.outcome p{color:var(--ink-muted)}
@media (max-width:820px){.outcomes{grid-template-columns:1fr}}

/* Process (a real sequence) */
.process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);counter-reset:step;position:relative}
.step{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3);display:flex;flex-direction:column;gap:12px;position:relative}
.step-num{font:500 14px/1 var(--display);color:var(--accent);display:flex;align-items:center;gap:10px}
.step-num::after{content:"";flex:1;height:1px;background:var(--border)}
.step p{color:var(--ink-muted)}
.alt .step{background:var(--surface)}
@media (max-width:820px){.process{grid-template-columns:1fr}}

/* Split feature */
.split-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:center}
.split-feature .copy{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks svg{width:22px;height:22px;flex:none;color:var(--brand-blue);margin-top:1px}
.checks b{font-weight:600}
.checks span{color:var(--ink-muted)}
@media (max-width:860px){.split-feature{grid-template-columns:1fr}}

/* Google-style result card (subject detail) */
.serp{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s3);display:grid;gap:14px;min-width:0}
.serp-q{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:999px;padding:10px 16px;color:var(--ink-muted);font-size:15px}
.serp-q svg{width:18px;height:18px;flex:none}
.serp-r{display:grid;gap:4px;padding:14px;border-radius:var(--r-md);border:1px solid var(--border)}
.serp-r.hit{border-color:var(--accent);background:var(--tint)}
.serp-r .u{font-size:13px;color:var(--ink-muted);overflow-wrap:anywhere}
.serp-r .n{font:500 18px/1.3 var(--sans);color:var(--accent)}
.serp-r .d{font-size:14px;color:var(--ink-muted)}
.serp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.serp-actions span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:6px 12px;border:1px solid var(--control);border-radius:999px;color:var(--ink)}
.serp-actions svg{width:14px;height:14px}
.serp-r.ghost{opacity:.6}
.serp-r.ghost .n{color:var(--ink-muted)}

/* Price teaser / pricing */
.price-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s4);align-items:center;padding-block:72px}
.price-band .copy{display:flex;flex-direction:column;gap:var(--s3)}
.price-figure{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-family:var(--display)}
.price-figure .big{font-size:clamp(56px,8vw,88px);line-height:1;letter-spacing:-.03em;font-weight:500}
.price-figure .unit{font-size:20px;color:var(--paper-muted)}
.price-figure .plus{font-size:28px;color:var(--brand-blue)}
@media (max-width:860px){.price-band{grid-template-columns:1fr}}

.plan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-raised)}
.plan-main{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:var(--s3)}
.plan-side{padding:clamp(24px,4vw,48px);background:var(--brand-dark);color:var(--paper);display:flex;flex-direction:column;gap:var(--s3)}
.plan-side .label{color:var(--paper-muted)}
.plan-side .checks svg{color:var(--brand-blue)}
.plan-side .checks span{color:#b8bfc8}
.plan-prices{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.plan-prices>div{background:var(--surface-raised);padding:var(--s3);display:grid;gap:6px}
.plan-prices .amt{font:500 clamp(40px,6vw,56px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan-prices .amt small{font-size:18px;color:var(--ink-muted);letter-spacing:0}
.plan-prices p{color:var(--ink-muted);font-size:14px}
@media (max-width:860px){.plan{grid-template-columns:1fr}}
@media (max-width:420px){.plan-prices{grid-template-columns:1fr}}

/* Cost calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:center}
.calc-panel{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s3);display:grid;gap:var(--s3)}
.calc label{font-weight:600;display:flex;justify-content:space-between;gap:12px}
.calc label output{font-family:var(--display);color:var(--accent);font-weight:500}
.calc input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.calc-rows{display:grid;gap:0;border-top:1px solid var(--border)}
.calc-rows div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.calc-rows div span:first-child{color:var(--ink-muted)}
.calc-rows .total{font-weight:600}
.calc-rows .total span:last-child{font:500 24px/1 var(--display)}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--border);max-width:820px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:22px 0;font:500 19px/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;flex:none;color:var(--accent);transition:transform .25s ease}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink-muted);max-width:64ch}

/* Work */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:500 14px/1 var(--sans);padding:10px 16px;border-radius:999px;border:1px solid var(--control);background:transparent;color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
.work-card{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.work-card[hidden]{display:none}
.frame{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-raised);padding:12px;transition:transform .35s ease}
.work-card:hover .frame{transform:translateY(-4px)}
.frame .site{aspect-ratio:16/10;border-radius:8px}
.work-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.work-meta h3{font-size:22px;line-height:1.2}
.work-meta p{color:var(--ink-muted);font-size:15px;margin-top:4px}
.tag{font:500 12px/1 var(--sans);letter-spacing:.04em;padding:6px 10px;border-radius:var(--r-sm);background:var(--tint);color:var(--accent);white-space:nowrap}
@media (max-width:760px){.work-grid{grid-template-columns:1fr}}

/* mini site designs for work cards — each a different layout */
.ws{flex:1;min-height:0;display:grid;font-family:var(--sans)}
.w-cafe{grid-template-columns:1fr;background:#efe6d6;position:relative}
.w-cafe .hdr{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;padding:4% 5%;font:700 clamp(7px,1vw,11px)/1 Georgia,serif;color:#3a2a1c;z-index:1}
.w-cafe .hdr i{font:500 clamp(6px,.8vw,9px)/1 var(--sans);font-style:normal;color:#6b5847}
.w-cafe .cups{display:flex;align-items:flex-end;justify-content:center;gap:6%;padding:16% 8% 0}
.w-cafe .cup{width:22%;aspect-ratio:1/1.05;background:#fbf7ef;border-radius:0 0 40% 40%;position:relative;border-top:6px solid #6b4529}
.w-cafe .cup::after{content:"";position:absolute;right:-22%;top:18%;width:26%;height:36%;border:4px solid #fbf7ef;border-left:0;border-radius:0 50% 50% 0}
.w-cafe .cup:nth-child(2){width:28%;border-top-color:#c98b4a}
.w-cafe .ttl{text-align:center;font:600 clamp(12px,2vw,24px)/1 Georgia,serif;color:#3a2a1c;padding-top:5%}
.w-cafe .sub{width:30%;height:5px;background:#cdbda4;border-radius:3px;margin:3% auto 0}

.w-trade{grid-template-rows:auto 1fr;background:#ffffff}
.w-trade .bar{display:flex;justify-content:space-between;align-items:center;padding:3% 5%;background:#0f3b5f;color:#fff;font:700 clamp(7px,1vw,11px)/1 var(--sans)}
.w-trade .bar i{font-style:normal;background:#ffc93c;color:#0f3b5f;padding:4px 8px;border-radius:4px;font-size:.85em}
.w-trade .bd{display:grid;grid-template-columns:1.3fr 1fr;gap:5%;padding:6% 5%}
.w-trade .bd .t{font:800 clamp(12px,2vw,24px)/1.05 var(--sans);color:#0f3b5f}
.w-trade .bd .l{display:grid;gap:6px;margin-top:8%}
.w-trade .bd .l i{display:block;height:5px;background:#dfe6ec;border-radius:3px}
.w-trade .bd .l i:last-child{width:60%}
.w-trade .tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.w-trade .tiles i{display:block;border-radius:6px;background:#e7eef4;position:relative}
.w-trade .tiles i::after{content:"";position:absolute;inset:30%;border:3px solid #0f3b5f;border-radius:4px}
.w-trade .tiles i:nth-child(2)::after{border-radius:50%}
.w-trade .tiles i:nth-child(3)::after{inset:35% 25%;border-radius:2px;border-color:#ffc93c}
.w-trade .tiles i:nth-child(4){background:#ffc93c}
.w-trade .tiles i:nth-child(4)::after{border-color:#0f3b5f;inset:38% 30%}

.w-shop{grid-template-columns:1fr;grid-template-rows:auto 1fr;background:#f4f1ec}
.w-shop .bar{display:flex;justify-content:center;padding:3.5% 5%;font:500 clamp(8px,1.1vw,12px)/1 var(--display);letter-spacing:.3em;color:#222}
.w-shop .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4%;padding:2% 5% 6%}
.w-shop .it{display:grid;grid-template-rows:1fr auto auto;gap:6px}
.w-shop .it b{display:block;border-radius:6px;background:#d8cfc3;position:relative}
.w-shop .it:nth-child(2) b{background:#a7b59b}.w-shop .it:nth-child(3) b{background:#c97c5d}.w-shop .it:nth-child(4) b{background:#2f3e46}
.w-shop .it b::after{content:"";position:absolute;left:28%;right:28%;top:22%;bottom:22%;border-radius:40% 40% 8px 8px;background:rgba(255,255,255,.55)}
.w-shop .it i{display:block;height:4px;background:#cfc7bb;border-radius:2px}
.w-shop .it i:last-child{width:50%;background:#222}

.w-bakery{grid-template-columns:1fr 1.2fr;background:#fff6f2}
.w-bakery .side{background:#e98a8a;display:flex;flex-direction:column;justify-content:flex-end;padding:8%;gap:8px}
.w-bakery .side .t{font:700 clamp(12px,2vw,24px)/1 Georgia,serif;color:#fff6f2}
.w-bakery .side i{display:block;height:5px;width:70%;background:rgba(255,246,242,.6);border-radius:3px}
.w-bakery .menu{padding:8% 8%;display:grid;align-content:center;gap:10%}
.w-bakery .row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.w-bakery .row b{width:clamp(14px,2.4vw,28px);aspect-ratio:1;border-radius:50%;background:#e7b56c;display:block}
.w-bakery .row:nth-child(2) b{background:#c86b5a}.w-bakery .row:nth-child(3) b{background:#f0d9a8}
.w-bakery .row i{display:block;height:5px;background:#f0d5cc;border-radius:3px}
.w-bakery .row em{font:600 clamp(6px,.9vw,10px)/1 var(--sans);font-style:normal;color:#a24a4a}

.w-fitness{grid-template-columns:1fr;background:#121417;position:relative;overflow:hidden}
.w-fitness .bg{position:absolute;inset:0;background:repeating-linear-gradient(115deg,#1b1f24 0 14px,#121417 14px 28px)}
.w-fitness .c{position:relative;padding:8% 6%;display:grid;align-content:center;gap:8%}
.w-fitness .t{font:800 clamp(14px,2.6vw,32px)/.95 var(--sans);color:#fff;text-transform:uppercase;letter-spacing:-.01em}
.w-fitness .t span{color:#c6f432}
.w-fitness .sched{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.w-fitness .sched i{display:block;height:clamp(16px,3vw,34px);border-radius:4px;background:#23282f;border-top:3px solid #c6f432}
.w-fitness .sched i:nth-child(even){border-top-color:#59606b}

.w-salon{grid-template-columns:1.1fr 1fr;background:#f3eee9}
.w-salon .im{background:#c9b6d4;position:relative;overflow:hidden}
.w-salon .im::before{content:"";position:absolute;left:20%;bottom:-10%;width:60%;height:74%;border-radius:50% 50% 0 0;background:#6d5577}
.w-salon .im::after{content:"";position:absolute;left:33%;top:14%;width:34%;aspect-ratio:1;border-radius:50%;background:#e7c9b5}
.w-salon .c{padding:10% 8%;display:grid;align-content:center;gap:10px}
.w-salon .t{font:600 clamp(12px,1.9vw,22px)/1.05 var(--display);color:#2f2a35}
.w-salon .r{display:flex;justify-content:space-between;border-bottom:1px solid #ddd3cb;padding-bottom:5px}
.w-salon .r i{display:block;height:4px;width:50%;background:#cbbfb5;border-radius:2px}
.w-salon .r em{display:block;height:4px;width:16%;background:#2f2a35;border-radius:2px}
.w-salon .b{height:clamp(12px,1.8vw,20px);width:60%;border-radius:999px;background:#2f2a35;margin-top:4px}

/* CTA band */
.cta-band{padding-block:88px}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap}
.cta-inner>div{display:flex;flex-direction:column;gap:14px;max-width:620px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s4);align-items:start}
.contact-cards{display:grid;gap:var(--s2)}
.ccard{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:start;padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-raised)}
.ccard .ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--tint);display:grid;place-items:center;color:var(--brand-blue)}
.ccard .ic svg{width:22px;height:22px}
.ccard h3{font-size:18px;line-height:1.3}
.ccard .val{font:500 17px/1.4 var(--sans);user-select:all;overflow-wrap:anywhere}
.ccard .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ccard p{color:var(--ink-muted);font-size:14px}
.mini{font:600 13px/1 var(--sans);padding:9px 12px;border-radius:var(--r-md);border:1px solid var(--control);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.mini svg{width:15px;height:15px}
.form{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(20px,4vw,40px);display:grid;gap:var(--s3)}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:15px}
.field .hint{font-size:13px;color:var(--ink-muted)}
.field input,.field select,.field textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--control);border-radius:var(--r-md);padding:12px 14px;width:100%;min-width:0}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.radio-row{display:flex;flex-wrap:wrap;gap:8px}
.radio-row label{display:flex;align-items:center;gap:8px;font-weight:500;padding:10px 14px;border:1px solid var(--control);border-radius:var(--r-md);cursor:pointer}
.radio-row input{accent-color:var(--accent)}
.form-note{font-size:13px;color:var(--ink-muted)}
.form-out{border:1px solid var(--accent);background:var(--tint);border-radius:var(--r-md);padding:var(--s2);display:grid;gap:12px}
.form-out pre{white-space:pre-wrap;font:400 14px/1.5 var(--sans);margin:0;color:var(--ink)}
.err{color:#b3261e;font-size:13px}
:root[data-theme="dark"] .err{color:#ffb4ab}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#ffb4ab}}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}

/* Page heading band */
.page-head{padding-block:72px 64px}
.page-head .wrap{display:flex;flex-direction:column;gap:18px}
.page-head .h-display{max-width:16ch}
.crumb{display:flex;align-items:center;gap:10px}
.crumb::before{content:"";width:24px;height:2px;background:var(--brand-blue)}

/* Footer */
.footer{background:var(--brand-dark);color:#b8bfc8;padding-block:64px 32px;border-top:1px solid var(--dark-line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s4)}
.foot-grid h4{font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-muted);margin:0 0 16px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot-grid a{color:var(--paper);text-decoration:none}
.foot-grid a:hover{color:var(--brand-blue)}
.foot-about{display:grid;gap:16px;max-width:36ch}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-about{grid-column:1/-1}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:12px 18px;border-radius:var(--r-md);font-weight:500;z-index:80}

/* Featured real demo */
.feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s4);align-items:center}
.feature-shots{position:relative;padding:0 8% 14% 0;min-width:0}
.shot-desk{position:relative;z-index:2;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#0a0a0b}
.shot-desk img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shot-desk .site-bar{background:#1d1d20}
.shot-desk .site-bar i{background:#3a3a40}
.shot-desk .site-bar b{background:#0a0a0b;color:#8b8578}
.shot-back{position:absolute;z-index:1;left:14%;right:0;top:16%;opacity:.9;transform:scale(.94)}
.shot-phone{position:absolute;z-index:3;right:0;bottom:0;width:26%;min-width:96px;border:6px solid #0f1114;outline:1px solid var(--border);border-radius:22px;overflow:hidden;background:#0a0a0b}
.shot-phone img{display:block;width:100%;height:auto;aspect-ratio:390/800;object-fit:cover;object-position:top}
.feature-copy{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;min-width:0}
.feature-copy p{color:var(--ink-muted)}
.facts{list-style:none;padding:0;margin:0;display:grid;gap:12px;width:100%;border-top:1px solid var(--border)}
.facts li{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:baseline;padding-top:12px;color:var(--ink-muted);font-size:15px}
.facts b{font:500 32px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  .feature .shot-back{transition:transform .9s cubic-bezier(.2,.7,.2,1) .2s, opacity .9s .2s}
  .feature.pending .shot-back{transform:translate(-6%,-8%) scale(.9);opacity:0}
  .feature .shot-phone{transition:transform .9s cubic-bezier(.2,.7,.2,1) .35s}
  .feature.pending .shot-phone{transform:translate(12%,10%) rotate(4deg)}
}
@media (max-width:900px){.feature{grid-template-columns:1fr}}

/* Legal page */
.legal-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.legal-links a{color:#c9ced5;text-decoration:none}
.legal-links a:hover{color:var(--paper);text-decoration:underline}
.legal{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s4);align-items:start}
.legal-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);display:flex;flex-direction:column;gap:6px}
.legal-nav .label{margin-top:16px}
.legal-nav .label:first-child{margin-top:0}
.legal-nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--border);font-size:15px}
.legal-nav a:hover{color:var(--accent)}
.legal-body{display:grid;gap:var(--s5);min-width:0;max-width:72ch}
.legal-block{display:grid;gap:16px}
.legal-block h2{scroll-margin-top:100px;margin-top:32px}
.legal-block h2:first-child{margin-top:0}
.legal-block h3{font-size:19px;line-height:1.35;margin-top:12px}
.legal-block p{color:var(--ink-muted)}
.legal-dl{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);margin:0;border-top:1px solid var(--border)}
.legal-dl dt,.legal-dl dd{padding:12px 0;border-bottom:1px solid var(--border);margin:0}
.legal-dl dt{font-weight:600;padding-right:16px}
.legal-dl dd{color:var(--ink-muted);overflow-wrap:anywhere}
.ph{background:var(--tint);color:var(--accent);border:1px dashed var(--accent);border-radius:var(--r-sm);padding:0 4px;font-weight:600}
.legal-date{font-size:14px;color:var(--ink-muted)}
@media (max-width:860px){.legal{grid-template-columns:1fr}.legal-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 16px}.legal-nav a{border:0}.legal-nav .label{width:100%;margin-top:8px}}
@media (max-width:480px){.legal-dl{grid-template-columns:1fr}.legal-dl dt{border-bottom:0;padding-bottom:0}}

/* Extra pricing plans (filled in from site.js, hidden while empty) */
.extra-plans{margin-top:var(--s5)}
.xplan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s3);align-items:start}
.xplan{position:relative;display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s3)}
.xplan.is-popular{border:2px solid var(--accent)}
.xplan-badge{font:600 12px/1 var(--sans);letter-spacing:.04em;padding:7px 10px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent)}
.xplan-prices{display:flex;flex-wrap:wrap;gap:var(--s3);width:100%;padding-bottom:var(--s3);border-bottom:1px solid var(--border)}
.xplan-prices>div{display:grid;gap:6px}
.xplan-prices .amt{font:500 36px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xplan-prices .amt small{font-size:16px;color:var(--ink-muted);letter-spacing:0}
.xplan .checks span{color:var(--ink)}
.xplan .btn{margin-top:auto}

/* Contact form: send options */
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.link-btn{background:none;border:0;padding:8px 0;font:500 15px/1.3 var(--sans);color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.link-btn:hover{text-decoration-thickness:2px}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.form-sent{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--accent);background:var(--tint);border-radius:var(--r-md);padding:var(--s2)}
.form-sent svg{width:24px;height:24px;flex:none;color:var(--accent)}
.radio-row label{flex:0 1 auto;max-width:100%;text-align:left}

/* Several featured projects in a row (Work page) */
.feature + .feature{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border)}
@media (min-width:901px){
  .feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .feature.flip .feature-shots{order:2;padding:0 0 14% 8%}
  .feature.flip .shot-back{left:0;right:14%}
  .feature.flip .shot-phone{right:auto;left:0}
}