/* ============================================================
   SUMMIT UP DIGITAL — the site's design system (all pages).
   Page-specific pieces for the inner pages live in css/pages.css.
   (Originally built for the homepage only.)

   Standalone by design: the homepage loads THIS stylesheet and not
   css/styles.css, so the other 12 pages keep their existing design while
   this one is rebuilt. Black, white and a single yellow. Type carries the
   page; colour comes from the imagery.
   ============================================================ */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600.woff2') format('woff2')}

:root{
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ink:#111111;
  --ink-2:#444444;
  --muted:#777777;
  --paper:#ffffff;
  --ground:#f1f7f4;      /* page ground — faint mint, same family as --accent */
  --tone:#9a9e9c;        /* second half of two-tone headings */
  --rule:#e5e5e5;
  --black:#0d0d0d;
  --accent:#eaf9f2;       /* pale — soft bands and highlights */
  --accent-2:#7fd4ac;     /* deeper green — marks on dark, where the pale one disappears */
  --accent-3:#3f9d74;     /* deepest — small marks on white, where accent-2 is too light */   /* the single accent — swap this one value to re-colour the page */
  --radius-frame:clamp(16px,2vw,28px);
  --wrap:1280px;
  --gutter:clamp(20px,4vw,48px);
  --section:clamp(72px,10vw,140px);
  --display:clamp(44px,8vw,120px);
  --h2:clamp(34px,5vw,64px);
  --h3:clamp(22px,2.4vw,30px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--ground);color:var(--ink);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

h1,h2,h3{font-weight:500;line-height:1.06;text-wrap:balance}
h1{letter-spacing:-.028em}
h2{letter-spacing:-.032em}
h3{letter-spacing:-.022em}
h1{font-size:var(--display)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p{text-wrap:pretty}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section-sm{padding-block:calc(var(--section) * .6)}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2);line-height:1.6;max-width:62ch}
mark.hl{background:var(--accent);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---- links and buttons ---- */
.text-link{
  display:inline-block;font-weight:600;font-size:16px;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;transition:border-color .2s,color .2s;
}
.text-link:hover{border-bottom-color:var(--accent);box-shadow:inset 0 -8px 0 var(--accent)}
.on-dark .text-link,.text-link.on-dark{color:#fff;border-bottom-color:#fff}
.on-dark .text-link:hover{border-bottom-color:var(--accent);box-shadow:inset 0 -8px 0 rgba(234,249,242,.3)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font);font-weight:600;font-size:16px;padding:16px 30px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:7px;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:#000}
.btn-invert{background:#fff;color:var(--ink);border-color:#fff}
.btn-invert:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-outline-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-outline-dark:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---- header ---- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-block:22px;transition:background .3s ease,padding .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom-color:var(--rule);padding-block:14px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:24px;width:auto;max-width:none;filter:brightness(0) invert(1);transition:filter .3s ease}
.site-header.scrolled .logo img{filter:brightness(0)}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,42px)}
.site-nav a{font-size:15px;font-weight:500;color:#fff;transition:color .3s ease;white-space:nowrap}
.site-header.scrolled .site-nav a{color:var(--ink)}
.site-nav a:hover{opacity:.72}
.site-nav a.is-cta{border-bottom:1px solid currentColor;padding-bottom:2px}
/* phone, far right: green text with a 1px green line underneath (same weight
   as the Contact underline), which rises into a soft green fill behind the
   number on hover. Deeper green once the header turns white. */
.site-nav a.nav-phone{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:3px 2px;
  color:var(--accent-2);font-weight:600;
}
.site-nav a.nav-phone::after{
  content:"";position:absolute;left:2px;right:2px;bottom:1px;height:1px;z-index:-1;
  border-radius:4px;background:var(--accent-2);
  transition:height .25s ease,left .25s ease,right .25s ease,bottom .25s ease,background .25s ease;
}
.site-nav a.nav-phone:hover{opacity:1}
.site-nav a.nav-phone:hover::after{left:-4px;right:-4px;bottom:-3px;height:calc(100% + 6px);background:rgba(127,212,172,.16)}
.nav-phone svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;flex-shrink:0}
.site-header.scrolled .site-nav a.nav-phone{color:var(--accent-3)}
.site-header.scrolled .site-nav a.nav-phone::after{background:var(--accent-3)}
.site-header.scrolled .site-nav a.nav-phone:hover::after{background:rgba(63,157,116,.14)}
.site-nav a[aria-current="page"]{color:var(--accent-2)}
.site-header.scrolled .site-nav a[aria-current="page"]{color:var(--accent-3)}

/* ---- hero: black, full width, points in a row ---- */
.hero{
  background:var(--black);color:#fff;
  padding-top:clamp(124px,15vh,180px);
  padding-bottom:clamp(56px,7vw,92px);
}
.hero h1{color:#fff;max-width:none;position:relative;padding-bottom:.16em;
  /* third term: on wide screens the text area stops growing at 1184px
     (1280 wrap minus 48px gutters) and the longer line, "work for your
     business." plus the caret, is about 10.2em, so cap the size there to
     keep it on two lines */
  font-size:min(var(--display), calc((100vw - 40px) / 9.8), calc((var(--wrap) - 96px) / 10.5))}
.hero-sub{
  margin-top:clamp(20px,2.4vw,28px);max-width:68ch;
  font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:rgba(255,255,255,.74);
}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(28px,3.4vw,40px)}
.hero-note-wrap{margin-top:30px;min-height:1.6em}
.hero-note{display:flex;flex-wrap:wrap;gap:10px 30px}
/* typed version of the line: one phrase at a time. The list above stays as the
   accessible, no-JS version and is only hidden visually while this runs. */
.note-type{display:none;font-size:15px;line-height:1.5;color:rgba(255,255,255,.66)}
.note-type .t-caret{min-width:2px;height:1em;vertical-align:-.15em;margin-left:2px}
.note-type.is-resting .t-caret{animation:caretSoft 1.1s ease-in-out infinite}
.hero-note-wrap.is-live .hero-note{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hero-note-wrap.is-live .note-type{display:block}
.hero-note li{position:relative;font-size:15px;color:rgba(255,255,255,.5)}
.hero-note li:not(:last-child)::after{
  content:"";position:absolute;right:-16px;top:.6em;width:4px;height:4px;
  border-radius:50%;background:rgba(255,255,255,.26);
}

/* three key points, evenly across */
.hero-points{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);
  margin-top:clamp(44px,6vw,84px);
}
.hero-points li{position:relative;padding-left:24px;opacity:0;transform:translateY(22px)}
.hero-points li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent-2);transform:scaleY(0);transform-origin:top;
}
.hero-point-n{display:block;font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--accent-2);margin-bottom:9px}
.hero-point-t{display:block;font-size:clamp(19px,1.9vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.18;color:#fff}
.hero-point-d{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.58);max-width:34ch}

.hero-points.go li{animation:pointIn .72s cubic-bezier(.22,.9,.26,1) forwards}
.hero-points.go li::before{animation:keyIn .62s cubic-bezier(.3,.9,.3,1) forwards}
.hero-points.go li:nth-child(1),.hero-points.go li:nth-child(1)::before{animation-delay:.06s}
.hero-points.go li:nth-child(2),.hero-points.go li:nth-child(2)::before{animation-delay:.22s}
.hero-points.go li:nth-child(3),.hero-points.go li:nth-child(3)::before{animation-delay:.38s}
@keyframes pointIn{to{opacity:1;transform:none}}
@keyframes keyIn{to{transform:scaleY(1)}}

/* ---- statement ---- */
.statement h2{max-width:18ch;margin-bottom:34px}
.statement .lede{margin-bottom:30px}

/* ---- numbered accordion (shared) ---- */
.acc{border-top:1px solid var(--rule)}
.acc-item{border-bottom:1px solid var(--rule)}
.acc-head{
  width:100%;background:none;border:0;cursor:pointer;font-family:var(--font);color:inherit;
  display:flex;align-items:flex-start;gap:clamp(16px,3vw,40px);
  padding:clamp(22px,3vw,34px) 0;text-align:left;
}
.acc-num{font-size:14px;font-weight:600;color:var(--muted);padding-top:.5em;flex-shrink:0;letter-spacing:.04em}
.acc-title{flex:1;font-size:var(--h3);font-weight:500;letter-spacing:-.022em;line-height:1.18}
.acc-plus{flex-shrink:0;width:24px;height:24px;position:relative;margin-top:.35em;transition:transform .3s ease}
.acc-plus::before,.acc-plus::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.acc-plus::before{left:0;right:0;top:11px;height:2px}
.acc-plus::after{top:0;bottom:0;left:11px;width:2px;transition:opacity .3s ease}
.acc-item.is-open .acc-plus{transform:rotate(90deg)}
.acc-item.is-open .acc-plus::after{opacity:0}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc-item.is-open .acc-body{grid-template-rows:1fr}
.acc-body-inner{overflow:hidden}
.acc-content{padding:0 0 clamp(26px,3vw,40px) 0;max-width:68ch}
.acc-content p{color:var(--ink-2);margin-bottom:18px}

/* ---- WORK (dark) ---- */
.work{background:var(--black);color:#fff;padding-block:var(--section)}
.work-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(30px,4vw,54px);flex-wrap:wrap}
.work-head h2{font-size:var(--display);line-height:.95}
.work-head .work .acc,.work .acc-item{border-color:rgba(255,255,255,.16)}
.work .acc-num{color:rgba(255,255,255,.5)}
.work .acc-content p{color:rgba(255,255,255,.72)}
.work-panel{position:relative;border-radius:var(--radius-frame);overflow:hidden;margin-bottom:22px;background:#1a1a1a}
.work-panel img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;opacity:.62}
.work-panel-info{position:absolute;inset:auto 0 0 0;padding:clamp(20px,3vw,40px);background:linear-gradient(180deg,rgba(13,13,13,0),rgba(13,13,13,.9))}
.work-panel-info h3{color:#fff;max-width:20ch;margin-bottom:14px}
.work-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:12px}
.work-foot{margin-top:clamp(26px,3vw,40px);color:rgba(255,255,255,.58);font-size:16px}

/* ---- yellow section ---- */
.accent-band{background:var(--accent);color:var(--ink);padding-block:var(--section)}
.accent-band h2{max-width:20ch;margin-bottom:34px}
.accent-band p{color:var(--ink);max-width:60ch;margin-bottom:18px;font-size:17.5px}
.accent-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.accent-media img,.accent-media video{width:100%;border-radius:var(--radius-frame);aspect-ratio:16/10;object-fit:cover}
.accent-rule{height:1px;background:rgba(17,17,17,.22);margin-block:clamp(34px,4vw,54px)}
.accent-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.accent-cols h3{font-size:19px;font-weight:600;letter-spacing:-.012em;margin-bottom:8px}
.accent-cols p{font-size:16px;margin-bottom:0;color:rgba(17,17,17,.78)}



/* ---- contact (dark) ---- */
.contact{background:var(--black);color:#fff;padding-block:var(--section)}
.contact h2{font-size:var(--display);line-height:.98;max-width:14ch;margin-bottom:28px;color:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start;margin-top:clamp(34px,4vw,56px)}
.contact p{color:rgba(255,255,255,.72)}
.contact-info{margin-top:30px;font-size:16px;line-height:2}
.contact-info a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.contact-info a:hover{border-bottom-color:var(--accent)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:8px}
.field input,.field textarea{
  width:100%;font-family:var(--font);font-size:16px;color:#fff;background:transparent;
  border:0;border-bottom:1px solid rgba(255,255,255,.28);padding:11px 0;transition:border-color .2s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.34)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field textarea{min-height:92px;resize:vertical}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;font-size:15px;font-weight:600}
.form-status.ok{color:var(--accent)}
.form-status.err{color:#ff9f8a}
.form-note{margin-top:16px;font-size:14px;color:rgba(255,255,255,.55)}

/* ---- footer ---- */
.site-footer{background:var(--black);color:rgba(255,255,255,.62);padding-block:clamp(44px,5vw,72px) 30px;border-top:1px solid rgba(255,255,255,.12);font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
.site-footer a{color:rgba(255,255,255,.86)}
.site-footer a:hover{color:var(--accent)}
.site-footer h3{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px}
.footer-links{display:grid;gap:10px}
.footer-logo img{height:22px;width:auto;max-width:none;filter:brightness(0) invert(1);margin-bottom:16px}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;font-size:13.5px;color:rgba(255,255,255,.45)}

/* ---- sticky mobile bar ---- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--ink);padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));gap:10px}
.mobile-bar a{flex:1;text-align:center;padding:14px 10px;border-radius:7px;font-weight:600;font-size:15px}
.mobile-bar .call{background:#fff;color:var(--ink)}
.mobile-bar .wa{background:var(--accent);color:var(--ink)}

/* ---- motion ---- */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- responsive ---- */
@media(max-width:1000px){
  .accent-grid,.contact-grid{grid-template-columns:1fr}
  .accent-cols{grid-template-columns:1fr;gap:26px}
}
@media(max-width:1000px){
  .hero-points li:nth-child(2),.hero-points li:nth-child(3){margin-left:0}
}
@media(max-width:760px){
  body{font-size:16px}
  .site-nav{gap:16px}
  .site-nav a:not(.is-cta):not(.nav-phone){display:none}
  .site-nav a.nav-phone{padding:4px}
  /* logo shrinks a touch on narrow phones so Contact and the phone icon still fit */
  .header-inner{gap:14px}
  .logo img{height:min(24px,calc((100vw - 40px) * .057))}
  .nav-phone span{display:none}
  .row-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .mobile-bar{display:flex}
  body{padding-bottom:0}
  .site-footer{padding-bottom:86px}
  .work-head h2{font-size:clamp(52px,16vw,80px)}
  .contact h2{font-size:clamp(40px,11vw,64px)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-points li{opacity:1;transform:none}
  .hero-points li::before{transform:scaleY(1)}
  .acc-body{transition:none}
}

/* ============================================================
   Editorial components for the full content set.
   Left-aligned, thin rules, no cards or lozenges.
   ============================================================ */

.section-head{max-width:22ch;margin-bottom:clamp(30px,4vw,56px)}
.section-head p{margin-top:20px;max-width:58ch}

/* price stated as type, not a card */
.price-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.price-big{font-size:clamp(46px,6vw,86px);font-weight:500;letter-spacing:-.03em;line-height:1}
.price-unit{font-size:17px;color:var(--muted)}
.price-note{font-size:16px;color:var(--ink-2);max-width:54ch;margin-top:14px}

/* a list of services with price on the right, divided by thin rules */
.price-list{border-top:1px solid var(--rule);margin-top:clamp(26px,3vw,40px)}
.price-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.price-list .pl-name{font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:-.018em}
.price-list .pl-desc{display:block;font-size:15.5px;font-weight:400;color:var(--muted);margin-top:6px;letter-spacing:0;max-width:46ch}
.price-list .pl-price{font-size:clamp(20px,2vw,26px);font-weight:500;white-space:nowrap;letter-spacing:-.018em}
.on-dark .price-list,.on-dark .price-list li{border-color:rgba(255,255,255,.16)}
.on-dark .price-list .pl-desc{color:rgba(255,255,255,.58)}

/* plain inline list, replaces the old pill tags */
.inline-list{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px}
.inline-list li{font-size:16px;color:var(--ink-2);position:relative}
.inline-list li:not(:last-child)::after{content:"";position:absolute;right:-15px;top:.55em;width:3px;height:3px;border-radius:50%;background:var(--rule)}

/* ticked inclusions, no boxes */
.checks{margin-top:26px;display:grid;gap:14px;max-width:56ch}
.checks li{position:relative;padding-left:30px;color:var(--ink-2);line-height:1.5}
.checks li::before{
  content:"";position:absolute;left:0;top:.44em;width:15px;height:11px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}
.accent-band .checks li::before,.accent-band .checks li{color:var(--ink);border-color:var(--ink)}
.on-dark .checks li{color:rgba(255,255,255,.76)}
.on-dark .checks li::before{border-color:#fff}

/* numbered steps, editorial */
.steps-list{border-top:1px solid var(--rule);margin-top:clamp(26px,3vw,40px)}
.steps-list li{display:flex;gap:clamp(18px,3vw,44px);padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--rule)}
.steps-list .st-num{font-size:14px;font-weight:600;color:var(--muted);flex-shrink:0;padding-top:.35em}
.steps-list h3{margin-bottom:8px}
.steps-list p{color:var(--ink-2);max-width:54ch}
.on-dark .steps-list,.on-dark .steps-list li{border-color:rgba(255,255,255,.16)}
.on-dark .steps-list p{color:rgba(255,255,255,.7)}
.on-dark .steps-list .st-num{color:rgba(255,255,255,.5)}

/* facts row (replaces the old proof strip) */
.facts{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,80px);padding-block:clamp(30px,4vw,44px);border-bottom:1px solid var(--rule)}
.facts div{min-width:140px}
.facts .fact-n{display:block;font-size:clamp(26px,3vw,38px);font-weight:500;letter-spacing:-.025em;line-height:1}
.facts .fact-l{display:block;font-size:15px;color:var(--muted);margin-top:8px}

/* two-column editorial split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start}
.split.tight{grid-template-columns:1fr .85fr}

/* case study rows (work section) */
.work-row-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;border-radius:var(--radius-frame)}

/* featured callout (complete package) */
.callout{border-top:2px solid var(--ink);padding-top:clamp(26px,3vw,40px);margin-top:clamp(30px,4vw,48px)}
.saving{display:inline-block;background:var(--ink);color:#fff;font-weight:600;font-size:15px;padding:8px 15px;margin-top:20px}

@media(max-width:1000px){
  .hero-points{grid-template-columns:1fr;gap:20px}
  .split,.split.tight{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
  .price-list li{flex-direction:column;gap:8px}
  .facts{gap:24px 36px}
}

/* ---- recurring options: priced accordion ---- */
.plans{border-top:1px solid var(--rule);margin-top:clamp(30px,4vw,48px)}
.plans .acc-item{border-bottom:1px solid var(--rule)}
.plans .acc-head{align-items:center;gap:clamp(14px,2.5vw,28px)}
.plans .acc-title{font-size:clamp(20px,2.1vw,27px)}
.acc-price{
  font-size:clamp(19px,2vw,25px);font-weight:500;letter-spacing:-.02em;
  white-space:nowrap;flex-shrink:0;
}
.acc-price span{font-size:.62em;font-weight:400;color:var(--muted);margin-left:2px}
.plans .acc-content{max-width:none;padding-top:4px}
.plan-lead{font-size:17px;color:var(--ink-2);margin-bottom:18px;max-width:52ch}
.plan-feats{display:flex;flex-wrap:wrap;gap:12px 36px;margin-bottom:6px}
.plan-feats li{position:relative;padding-left:26px;font-size:16px;color:var(--ink-2)}
.plan-feats li::before{
  content:"";position:absolute;left:0;top:.36em;width:13px;height:9px;
  border-left:2px solid var(--accent-3);border-bottom:2px solid var(--accent-3);transform:rotate(-45deg);
}
/* the recommended one, marked with the soft green rather than a badge */
.plans .acc-item.is-feature{background:var(--accent);border-bottom-color:#d3ece1}
.plans .acc-item.is-feature .acc-head,
.plans .acc-item.is-feature .acc-content{padding-inline:clamp(16px,2.4vw,28px)}
.plan-flag{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);opacity:.55;margin-bottom:8px;
}
.plan-save{margin-top:16px;font-size:16px;color:var(--ink-2)}
.plan-save strong{color:var(--ink);font-weight:600}
.plans-foot{margin-top:26px;font-size:15.5px;color:var(--muted)}

/* ---- team block + facts ---- */
.team-copy h2{margin-bottom:28px;max-width:17ch}
.team-copy p{color:var(--ink-2);font-size:clamp(17px,1.5vw,19px);line-height:1.62;margin-bottom:18px;max-width:56ch}
@media(max-width:900px){
    .plan-feats{gap:11px 24px}
}

/* ---- statement: offset right, negative space on the left ---- */
.offset-grid{display:grid;grid-template-columns:.9fr 1.35fr;gap:clamp(32px,6vw,96px);align-items:start}
.offset-mark{position:relative;min-height:120px}
.offset-mark::before{
  content:"";position:absolute;left:0;top:10px;width:2px;height:clamp(76px,10vw,132px);
  background:var(--accent-3);transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.22,.9,.26,1)
}
.offset-mark.in::before{transform:scaleY(1)}
@media(max-width:900px){
  .offset-grid{grid-template-columns:1fr;gap:26px}
  .offset-mark{min-height:0}
  .offset-mark::before{height:52px}
}

/* ---- the website offer: dark, to separate it from the light sections around it ---- */
.offer{background:#0f1110;color:#fff;padding-block:var(--section)}
.offer h2{color:#fff}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center}
/* the price, as a pale object that reads clearly against the black */
/* price set in the deeper green, no box — same green as the tile icons beside it */
.price-tag{display:flex;align-items:baseline;gap:14px;margin-block:clamp(22px,3vw,30px)}
.price-tag .amount{font-size:clamp(46px,6.5vw,84px);font-weight:500;letter-spacing:-.035em;line-height:1;color:var(--accent-2)}
.price-tag .unit{font-size:17px;line-height:1.3;color:var(--accent-2);opacity:.8}
.offer .price-note{color:rgba(255,255,255,.72);max-width:46ch}

/* inclusions as small tiles, each with its own icon */
.feature-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-tiles li{
  display:flex;flex-direction:column;gap:16px;padding:18px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.88);
  transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.feature-tiles li:hover{border-color:var(--accent-2);background:rgba(255,255,255,.07);transform:translateY(-2px)}
.feature-tiles .ic{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:rgba(127,212,172,.13);display:flex;align-items:center;justify-content:center;
}
.feature-tiles .ic svg{width:20px;height:20px;stroke:var(--accent-2);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* full-width strip under the offer: rule, then the button and the larger-job note on one line */
.offer-bar{
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.18);
}
.offer-bar .btn{flex-shrink:0}
.offer-bar p{font-size:16px;line-height:1.5;color:rgba(255,255,255,.7)}
.offer-bar p strong{color:#fff;font-weight:600}

/* ---- four plan cards in a row ---- */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(32px,4vw,52px)}
.plan-card{
  display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--rule);border-radius:var(--radius-frame);background:var(--paper);
  transition:border-color .25s ease,transform .25s ease;
}
.plan-card:hover{border-color:var(--ink);transform:translateY(-3px)}
.plan-name{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.plan-price{font-size:clamp(34px,3.6vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1}
.plan-per{font-size:15px;color:var(--muted);margin-top:8px}
.plan-desc{font-size:15.5px;color:var(--ink-2);line-height:1.5;margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.plan-list{display:grid;gap:11px;margin-top:18px;margin-bottom:24px}
.plan-list li{position:relative;padding-left:24px;font-size:15.5px;color:var(--ink-2);line-height:1.45}
.plan-list li::before{
  content:"";position:absolute;left:0;top:.32em;width:12px;height:8px;
  border-left:2px solid var(--accent-3);border-bottom:2px solid var(--accent-3);transform:rotate(-45deg);
}
.plan-card .btn{margin-top:auto;width:100%}
.plan-card.is-feature{background:var(--accent);border-color:var(--accent-3)}
.plan-card.is-feature .plan-name{color:var(--accent-3);opacity:1}
.plan-saving{margin-top:16px;font-size:14.5px;color:var(--ink-2)}
.plan-saving strong{display:block;color:var(--ink);font-weight:600;margin-top:3px}
/* ReviewMore feature under the cards: copy left, the tap-card clip right */
.rm-feature{
  display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,72px);align-items:center;
  margin-top:clamp(16px,2vw,24px);padding:clamp(24px,3.6vw,48px);
}
.rm-copy h3{font-size:clamp(26px,2.8vw,38px);margin-bottom:16px}
.rm-copy p{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:46ch;margin-bottom:26px}
.rm-video{margin:0;width:clamp(220px,22vw,300px)}
.rm-video video{
  width:100%;aspect-ratio:607/1080;object-fit:cover;display:block;
  border-radius:var(--radius-frame);background:#d9dcd8;
  box-shadow:0 24px 50px -28px rgba(13,13,13,.45);
}
@media(max-width:760px){
  .rm-feature{grid-template-columns:1fr}
  .rm-video{width:min(260px,100%)}
}
@media(max-width:1040px){.plan-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.plan-grid{grid-template-columns:1fr}.offer-grid{grid-template-columns:1fr;gap:32px}.feature-tiles{grid-template-columns:1fr}}

/* ---- typewriter headline ----
   .type-ghost holds the real text and reserves the exact box, so nothing
   reflows while typing. JS hides it and types into .type-out on top. With no
   JS, or under reduced motion, the ghost simply stays visible.
   Line two ("work for your business.") is its own block, in the soft green. */
.type-h1{position:relative}
.type-ghost{display:block}
.type-out{display:none}
.type-accent,.t-accent{display:block;color:var(--accent-2)}
.type-h1.is-typing .type-ghost{visibility:hidden}
.type-h1.is-typing .type-out{display:block;position:absolute;inset:0}
/* the caret is a real element so it can sit at the end of either line */
.t-caret{
  display:inline-block;width:.05em;min-width:3px;height:.78em;margin-left:.05em;
  background:var(--accent-2);vertical-align:-.04em;border-radius:1px;
}
/* solid while typing or erasing, soft blink only while it rests */
.type-h1.is-resting .t-caret{animation:caretSoft 1.1s ease-in-out infinite}
@keyframes caretSoft{0%,45%{opacity:1}55%,95%{opacity:0}100%{opacity:1}}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}

/* ---- statement: image in the left column ---- */
.offset-media img{width:100%;border-radius:var(--radius-frame);aspect-ratio:9/11;object-fit:cover}

/* ---- wider section heading ---- */
.section-head--wide{max-width:none}
.section-head--wide h2{max-width:none;margin-bottom:0}
.section-head--wide p{margin-top:18px;max-width:58ch}

/* ---- plan buttons: one line, always ---- */
.btn-plan{font-size:14.5px;padding:13px 16px;white-space:nowrap}


/* ============================================================
   Containers and holding devices (after twcreative.co.uk):
   white rounded boxes on a soft grey ground, bento grids,
   stats shown as graphics, two-tone headings.
   ============================================================ */

.box{background:var(--paper);border-radius:var(--radius-frame);padding:clamp(24px,4vw,56px)}
.tone{color:var(--tone)}

/* statement inside a container */
.statement .box{padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(16px,2vw,24px)}
.statement .offset-grid{align-items:center}
.statement .offset-grid > div{padding:clamp(8px,3vw,40px) clamp(4px,2vw,28px) clamp(8px,3vw,40px) 0}

/* service icons on the plan cards */
.svc-icon{
  width:48px;height:48px;border-radius:14px;background:var(--ground);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  transition:background .25s ease,transform .25s ease;
}
.svc-icon svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.plan-card{border-color:transparent}
.plan-card:hover .svc-icon{background:var(--accent);transform:scale(1.06)}
.plan-card.is-feature .svc-icon{background:var(--paper)}
.plan-card.is-feature .svc-icon svg{stroke:var(--accent-3)}

/* ---- team: split container, people + stats bento on the right ---- */
.team-box{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);padding:clamp(12px,1.4vw,16px)}
.team-box .team-copy{padding:clamp(20px,3.6vw,48px) clamp(10px,2vw,28px) clamp(20px,3.6vw,48px) clamp(16px,3vw,40px)}
.team-box .team-copy h2{max-width:none;font-size:clamp(30px,3.3vw,46px);margin-bottom:26px}
.team-box .team-copy p strong{color:var(--ink);font-weight:600}
.team-box .team-copy p{font-size:clamp(16px,1.35vw,18px)}
.people{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}
.person{
  position:relative;overflow:hidden;border-radius:calc(var(--radius-frame) - 6px);
  background:#1b1d1c;color:#fff;min-height:clamp(220px,24vw,300px);margin:0;
  display:flex;flex-direction:column;justify-content:space-between;padding:18px;
}
.person img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.9,.26,1);
}
.person:nth-child(1) img{object-position:56% 28%}
.person:nth-child(2) img{object-position:50% 26%}
.person:nth-child(4) img{object-position:50% 50%}
.person:hover img{transform:scale(1.045)}
/* lets the name stay legible over any photo */
.person::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,13,13,0) 52%,rgba(13,13,13,.62) 100%)}
.person > *:not(img){position:relative;z-index:1}

/* white lozenge, top right */
.chip{
  align-self:flex-end;display:inline-block;max-width:100%;
  background:#fff;color:#6a6a6a;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1.25;
  padding:7px 14px;text-align:right;box-shadow:0 4px 14px -6px rgba(13,13,13,.35);
}

.stat-card{
  border-radius:calc(var(--radius-frame) - 6px);background:var(--ground);
  padding:18px;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(150px,15vw,190px);
}

/* Every card's bottom-left caption: same face, size, weight and spacing.
   Each card is a size container, so the caption scales with the card and the
   longest one ("Years each in the industry", 15.5em wide at this spacing)
   always stays on a single line. 16.4 sits just over the widest (15.5em) for headroom. */
.person,.stat-card{container-type:inline-size}
.card-label{
  align-self:flex-start;white-space:nowrap;
  font-size:11px;font-size:clamp(11px,calc((100cqw - 36px) / 16.4),14px);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
}
.person .card-label{color:#fff}
.stat-card .card-label{color:var(--ink-2)}
.stat-card.is-accent{background:var(--accent)}
.stat-num{font-size:clamp(38px,4.4vw,58px);font-weight:500;letter-spacing:-.035em;line-height:1}

/* ---- reviews bento ---- */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
.rv-card{background:var(--paper);border-radius:var(--radius-frame);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.rv-wide{grid-column:span 2}
.rv-card blockquote{font-size:clamp(17px,1.5vw,20px);line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.rv-wide blockquote{font-size:clamp(21px,2.2vw,30px);line-height:1.3;letter-spacing:-.02em;font-weight:500;max-width:30ch}
.rv-who{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted)}
.rv-who strong{display:block;color:var(--ink);font-weight:600;font-size:15px}
.rv-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-3);font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rv-stars{color:#f5b301;letter-spacing:.14em;font-size:14px}

.rv-rating{align-items:center;justify-content:center;text-align:center;gap:14px}
.ring{position:relative;width:132px;height:132px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{stroke:var(--ground);stroke-width:9;fill:none}
.ring .bar{stroke:var(--accent-3);stroke-width:9;fill:none;stroke-linecap:round;stroke-dasharray:345.6;stroke-dashoffset:345.6;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.9,.26,1)}
.ring.in .bar{stroke-dashoffset:0}
.ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:500;letter-spacing:-.03em}
.rv-rating p{font-size:15px;color:var(--ink-2)}

.rv-cta{background:var(--black);color:#fff}
.rv-cta h3{color:#fff;font-size:clamp(22px,2.2vw,28px);max-width:12ch}
.rv-cta .text-link{color:#fff;border-bottom-color:#fff;align-self:flex-start}
.rv-cta .text-link:hover{box-shadow:inset 0 -8px 0 rgba(127,212,172,.35);border-bottom-color:var(--accent-2)}

/* ---- FAQ in a container, heading column beside it ---- */
.faq-box{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,72px);align-items:start}
.faq-side h2{max-width:11ch;margin-bottom:20px}
.faq-side p{color:var(--ink-2);margin-bottom:22px;max-width:30ch}
.faq-box .acc{border-top-color:var(--rule);--num-w:26px;--acc-gap:clamp(14px,2vw,24px)}
.faq-box .acc-head{gap:var(--acc-gap);padding:clamp(15px,1.6vw,20px) 0}
.faq-box .acc-num{width:var(--num-w);padding-top:.4em}
.faq-box .acc-title{font-size:clamp(17px,1.5vw,21px);letter-spacing:-.015em;line-height:1.3}
.faq-box .acc-plus{margin-top:2px}
/* answer lines up with the question text (past the number), with a little room on the right */
.faq-box .acc-content{padding:0 20px 20px calc(var(--num-w) + var(--acc-gap));max-width:none}
.faq-box .acc-content p{font-size:16px;line-height:1.6;margin-bottom:0}

@media(max-width:1000px){
  .team-box,.faq-box{grid-template-columns:1fr}
  .rv-grid{grid-template-columns:1fr 1fr}
  .rv-wide{grid-column:span 2}
}
@media(max-width:620px){
  .rv-grid{grid-template-columns:1fr}
  .rv-wide{grid-column:auto}
  .people{grid-template-columns:1fr 1fr}
  .person{min-height:210px;padding:12px}
  .stat-card{padding:12px}
  .card-label{white-space:normal;font-size:10.5px;letter-spacing:.07em}
  .chip{font-size:11.5px;padding:6px 11px;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .ring .bar{transition:none;stroke-dashoffset:0}
}

/* ---- statement: narrower text, wider infographic ---- */
.statement .offset-grid{grid-template-columns:1.12fr 1fr}
.green{color:var(--accent-3)}

@media(max-width:900px){
  .statement .offset-grid{grid-template-columns:1fr}
}

/* ---- journey infographic: search -> found on the map -> call ----
   Default (no JS, or reduced motion) is the finished state: everything shown.
   js/home.js adds .armed to run it, then s1/s2/s3 cumulatively. */
.journey{
  background:var(--ground);border-radius:calc(var(--radius-frame) - 6px);
  padding:clamp(18px,2.4vw,30px);display:flex;flex-direction:column;
}
.j-label{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.j-label span{color:var(--accent-3)}
.j-card{background:#fff;border-radius:16px;box-shadow:0 14px 30px -22px rgba(13,13,13,.35)}
.journey.armed .j-step{opacity:.34;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.journey.armed.s1 .j-search,.journey.armed.s2 .j-found,.journey.armed.s3 .j-call{opacity:1;transform:none}

/* 01 search bar */
.search-card{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:999px;border:1px solid #dfe7e2}
.search-card svg{width:19px;height:19px;flex-shrink:0;stroke:var(--muted);stroke-width:2.2;fill:none;stroke-linecap:round}
.j-query{font-size:clamp(15px,1.4vw,17px);color:var(--ink);white-space:nowrap;min-height:1.4em}
.j-caret{display:none;width:2px;height:1.15em;background:var(--accent-3);margin-left:1px;animation:caret 1s step-end infinite}
.journey.armed .j-caret{display:inline-block}
.journey.armed.s2 .j-caret{display:none}

/* dashed connector with a travelling dot */
.j-link{position:relative;height:clamp(20px,2.4vw,28px);margin-left:24px;border-left:2px dashed #c4dbcf}
.j-dot{position:absolute;left:-6px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent-3);opacity:0}
.journey.armed .j-dot{transition:top .6s ease,opacity .25s ease}
.journey.armed.s2 .j-link--1 .j-dot,.journey.armed.s3 .j-link--2 .j-dot{opacity:1;top:calc(100% - 5px)}

/* 02 map */
.map-card{position:relative;overflow:hidden}
.map-card svg.map{display:block;width:100%;height:auto}
.pin{position:absolute;width:22px;height:29px;transform:translate(-50%,-100%)}
.pin svg{display:block;width:100%;height:100%}
.pin--other svg path{fill:#b4c6bc}
.pin--other svg circle{fill:#fff}
.pin--you{width:28px;height:37px;z-index:2}
.pin--you svg path{fill:var(--ink)}
.pin--you svg circle{fill:var(--accent-2)}
.journey.armed .pin--you{opacity:0;transform:translate(-50%,-100%) translateY(-16px);transition:transform .55s cubic-bezier(.3,1.55,.5,1),opacity .25s ease}
.journey.armed.s2 .pin--you{opacity:1;transform:translate(-50%,-100%)}
.pin-pulse{position:absolute;left:50%;bottom:-5px;width:38px;height:13px;margin-left:-19px;border-radius:50%;background:rgba(63,157,116,.38);opacity:0}
.journey.armed.s2 .pin-pulse{animation:pinPulse 1.6s ease-out .45s infinite}
@keyframes pinPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.map-result{
  position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 10px 24px -14px rgba(13,13,13,.4);
}
.journey.armed .map-result{opacity:0;transform:translateY(14px);transition:opacity .45s ease .3s,transform .45s ease .3s}
.journey.armed.s2 .map-result{opacity:1;transform:none}
.mr-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mr-mark svg{width:14px;height:19px}
.mr-mark svg path{fill:var(--ink)}
.mr-mark svg circle{fill:var(--accent-2)}
.mr-text{min-width:0}
.mr-text strong{display:block;font-size:15px;font-weight:600;line-height:1.2}
.mr-text span{font-size:13px;color:var(--muted);white-space:nowrap}
.mr-text em{font-style:normal;color:#f5b301;letter-spacing:.06em}

/* 03 call */
.call-card{display:flex;align-items:center;gap:14px;padding:14px 16px}
.call-icon{width:44px;height:44px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.call-icon svg{width:19px;height:19px;stroke:var(--accent-3);stroke-width:2;fill:none;stroke-linejoin:round}
.journey.armed.s3 .call-icon{animation:ring 1.3s ease-in-out .3s infinite}
@keyframes ring{0%,55%,100%{transform:rotate(0)}8%,24%{transform:rotate(-13deg)}16%,32%{transform:rotate(13deg)}40%{transform:rotate(0)}}
.call-text{flex:1;min-width:0}
.call-text strong{display:block;font-size:15px;font-weight:600;line-height:1.2}
.call-text span{font-size:13px;color:var(--muted)}
.call-btn{background:var(--accent-3);color:#fff;font-size:13px;font-weight:600;padding:8px 15px;border-radius:999px;flex-shrink:0}

/* ---- cookie consent: a small cookie icon, bottom left, on every page ----
   A compact card opens from it on a first visit and whenever it is tapped.
   Built by js/consent.js. */
.cookie-btn{
  position:fixed;left:16px;bottom:16px;z-index:70;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink-2);
  box-shadow:0 8px 22px -12px rgba(13,13,13,.45);transition:background .2s ease,color .2s ease,transform .2s ease;
}
.cookie-btn:hover,.cookie-btn[aria-expanded="true"]{background:var(--accent);color:var(--ink)}
.cookie-btn:hover{transform:translateY(-1px)}
.cookie-btn:focus-visible{outline:2px solid var(--accent-3);outline-offset:2px}
.cookie-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cookie-btn svg circle{fill:currentColor;stroke:none}
.consent{
  position:fixed;left:16px;bottom:64px;z-index:70;width:min(280px,calc(100vw - 32px));
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:14px;
  opacity:0;visibility:hidden;transform:translateY(8px);transform-origin:bottom left;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
  box-shadow:0 20px 50px -26px rgba(13,13,13,.45);
}
.consent.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .22s ease}
.consent-text{font-size:13.5px;color:var(--ink-2);line-height:1.45;margin-bottom:12px}
.consent-text a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.consent-actions{display:flex;gap:6px}
.consent-btn{
  flex:1;font-family:var(--font);font-size:13.5px;font-weight:600;padding:9px 10px;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--rule);transition:background .2s,border-color .2s,color .2s;
}
.consent-btn:hover{border-color:var(--ink)}
.consent-btn.is-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.consent-btn.is-primary:hover{background:#000}
.consent-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--accent-3);border-color:var(--accent-3)}
.consent-btn[aria-pressed="true"]::after{content:" ✓"}
/* phones: sit just above the Call / WhatsApp bar */
@media(max-width:760px){
  .cookie-btn{left:12px;bottom:calc(74px + env(safe-area-inset-bottom));width:34px;height:34px}
  .cookie-btn svg{width:17px;height:17px}
  .consent{left:12px;bottom:calc(116px + env(safe-area-inset-bottom));width:min(280px,calc(100vw - 24px))}
}
@media(prefers-reduced-motion:reduce){.consent,.consent.is-open,.cookie-btn{transition:none}}


/* ---- phone menu ----
   Below 760px the header is logo, phone icon and a two-line menu button.
   The button opens a full-screen black panel under the header with large
   links, then phone / WhatsApp / email. The header stays black while it is
   open, even if the page has been scrolled. */
.menu-toggle{
  display:none;position:relative;width:40px;height:40px;margin-right:-8px;padding:0;
  background:none;border:0;cursor:pointer;color:#fff;
}
.menu-toggle span{
  position:absolute;left:9px;right:9px;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.3,.9,.3,1),top .3s cubic-bezier(.3,.9,.3,1);
}
.menu-toggle span:nth-child(1){top:15px}
.menu-toggle span:nth-child(2){top:23px}
.menu-toggle:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:8px}
.site-header.scrolled .menu-toggle{color:var(--ink)}
.menu-open .menu-toggle span:nth-child(1){top:19px;transform:rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){top:19px;transform:rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:59;background:var(--black);color:#fff;
  padding-top:96px;padding-bottom:calc(100px + env(safe-area-inset-bottom));overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s;
}
.menu-open .mobile-menu{opacity:1;visibility:visible;transition:opacity .28s ease}
.mm-links li{border-bottom:1px solid rgba(255,255,255,.12)}
.mm-links a{
  display:block;padding:13px 0;color:#fff;
  font-size:clamp(22px,6.4vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.2;
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,.9,.26,1),color .2s;
}
.mm-links a[aria-current="page"]{color:var(--accent-2)}
.mm-links a:active{color:var(--accent-2)}
.menu-open .mm-links a{opacity:1;transform:none}
.menu-open .mm-links li:nth-child(2) a{transition-delay:.04s}
.menu-open .mm-links li:nth-child(3) a{transition-delay:.08s}
.menu-open .mm-links li:nth-child(4) a{transition-delay:.12s}
.menu-open .mm-links li:nth-child(5) a{transition-delay:.16s}
.menu-open .mm-links li:nth-child(6) a{transition-delay:.2s}
.mm-contact{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:30px}
.mm-contact a{font-size:16px;color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px}
.mm-contact a:first-child{color:var(--accent-2);border-bottom-color:var(--accent-2);font-weight:600}

/* header stays black over the open menu */
.menu-open,.menu-open body{overflow:hidden}
.menu-open .site-header,.menu-open .site-header.scrolled{background:var(--black);border-bottom-color:transparent;backdrop-filter:none}
.menu-open .site-header .logo img{filter:brightness(0) invert(1)}
.menu-open .site-header .menu-toggle{color:#fff}
.menu-open .site-header .site-nav a.nav-phone{color:var(--accent-2)}
.menu-open .site-header .site-nav a.nav-phone::after{background:var(--accent-2)}

@media(max-width:760px){
  .menu-toggle{display:block}
  .site-nav a.is-cta{display:none}
}
@media(min-width:761px){.mobile-menu{display:none}}
@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mm-links a,.menu-toggle span{transition:none}
}