/* =========================================================
   TOKENS (from DESIGN.md §3–6)
   ========================================================= */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('assets/fonts/bricolage-grotesque-latin-wght.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
}
:root{
  --blue:#1483c0;--blue-strong:#1174aa;--blue-light:#7fcffb;--blue-dark:#0d547b;--midnight:#081821;
  --off-white:#fffdf9;--sand:#f3f0ea;--ink:#2d2d2d;--muted:#5d5d5d;
  --line:rgba(45,45,45,.14);--line-dark:rgba(255,255,255,.16);

  --display:'Bricolage Grotesque','Segoe UI',system-ui,-apple-system,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --gutter:clamp(1rem,4vw,4rem);
  --section:clamp(3.25rem,7.5vw,6.5rem);
  --shadow-img:0 18px 40px -30px rgba(0,0,0,.45);
  --shadow-float:0 10px 30px -18px rgba(8,24,33,.35);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--off-white);color:var(--ink);font:400 1.0625rem/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue-light);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--midnight);color:#fff;padding:.75rem 1rem;border-radius:3px}
.skip:focus{top:1rem}

.icon{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

.wrap{padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.bg-sand{background:var(--sand)}
.bg-midnight{background:var(--midnight);color:var(--off-white)}

.h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.03em}
.h3{font-size:1.4rem;line-height:1.08}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.55;max-width:46ch}

/* Section with a vertical rail label (from the reference) */
.railed{display:grid;gap:1.5rem}
.rail{font:600 .95rem/1 var(--display);color:var(--blue-strong);letter-spacing:.01em;display:flex;align-items:center;gap:.6rem}
.rail::before{content:"";width:1.5rem;height:3px;background:var(--blue)}
.bg-midnight .rail{color:var(--blue-light)}
@media (min-width:900px){
  .railed{grid-template-columns:2.5rem minmax(0,1fr);gap:0 2.75rem}
  .rail{writing-mode:vertical-rl;transform:rotate(180deg);align-self:start;justify-content:flex-end;border-left:1px solid var(--line);padding-left:1.1rem;min-height:9rem}
  .rail::before{width:3px;height:1.5rem}
  .bg-midnight .rail{border-color:var(--line-dark)}
}
.railed > *{min-width:0}

.sec-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
@media (min-width:900px){.sec-head{grid-template-columns:1.1fr .9fr;align-items:end;gap:3rem}}
.sec-head p{color:var(--muted);max-width:60ch}
.bg-midnight .sec-head p{color:rgba(255,253,249,.75)}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.8rem 1.4rem;border-radius:3px;font:700 1rem/1.1 var(--display);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--blue-strong);color:#fff}
.btn--primary:hover{background:var(--blue-dark)}
.btn--light{background:var(--off-white);color:var(--midnight)}
.btn--light:hover{background:var(--blue-light)}
.btn--ghost{border-color:currentColor;background:transparent}
.btn--ghost:hover{background:rgba(127,207,251,.12)}
.btn--lg{font-size:1.12rem;padding:1.05rem 1.9rem}
.btn--block{width:100%}
.textlink{font:700 1rem var(--display);color:var(--blue-strong);text-decoration-thickness:2px;text-underline-offset:.25em}

/* =========================================================
   HEADER + MEGA MENU
   ========================================================= */
.site-header{position:sticky;top:0;z-index:50;background:var(--off-white);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.site-header.is-scrolled{box-shadow:var(--shadow-float)}
.hdr{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.hdr__logo img{height:34px;width:auto}
@media (min-width:900px){.hdr__logo img{height:40px}}
.nav{display:none;margin-left:auto}
.nav > ul{display:flex;align-items:center;gap:.25rem}
.nav a,.nav__btn{display:inline-flex;align-items:center;gap:.3rem;padding:.6rem .8rem;font:600 1rem var(--display);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;border-radius:3px}
.nav a:hover,.nav__btn:hover,.nav__btn[aria-expanded="true"]{color:var(--blue-strong)}
.nav__btn .icon{width:1rem;height:1rem;transition:transform .2s}
.nav__btn[aria-expanded="true"] .icon{transform:rotate(180deg)}
.hdr__cta{display:none}
@media (min-width:1000px){.nav,.hdr__cta{display:flex}.hdr__cta{margin-left:.5rem}}

.has-menu{position:relative}
.mega{position:fixed;left:0;right:0;top:72px;background:var(--off-white);border-top:1px solid var(--line);border-bottom:4px solid var(--blue);box-shadow:var(--shadow-float);display:none}
.mega.is-open{display:block}
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-block:2rem 1.5rem}
.mega h3{font-size:.95rem;font-weight:700;color:var(--blue-strong);margin-bottom:.75rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.mega li a{display:block;text-decoration:none;padding:.45rem .5rem;margin-inline:-.5rem;border-radius:3px}
.mega li a strong{display:block;font:700 1rem var(--display)}
.mega li a span{display:block;font:400 .875rem/1.4 var(--body);color:var(--muted)}
.mega li a:hover{background:var(--sand)}
.mega__foot{border-top:1px solid var(--line);padding-block:1rem}
.drop{position:absolute;top:calc(100% + .4rem);left:0;min-width:13rem;background:var(--off-white);border:1px solid var(--line);border-top:4px solid var(--blue);box-shadow:var(--shadow-float);padding:.5rem;display:none}
.drop.is-open{display:block}
.drop a{display:flex;width:100%;text-decoration:none}

/* Mobile menu (works without JS via <details>) */
.mnav{margin-left:auto;display:flex;align-items:center;gap:.5rem}
@media (min-width:1000px){.mnav{display:none}}
.mnav summary{list-style:none;display:grid;place-items:center;width:48px;height:48px;border-radius:3px;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .icon{width:1.6rem;height:1.6rem}
.mnav .i-close{display:none}
.mnav details[open] .i-close{display:block}
.mnav details[open] .i-open{display:none}
.mnav__panel{position:fixed;inset:72px 0 0 0;background:var(--midnight);color:var(--off-white);overflow-y:auto;padding:1.5rem var(--gutter) 2rem}
.mnav__panel > ul > li{border-bottom:1px solid var(--line-dark)}
.mnav__panel a{display:block;padding:.9rem 0;text-decoration:none;font:800 1.7rem/1.1 var(--display);letter-spacing:-.02em}
.mnav__panel details summary{width:auto;height:auto;display:flex;justify-content:space-between;padding:.9rem 0;font:800 1.7rem/1.1 var(--display);letter-spacing:-.02em}
.mnav__panel details li a{font:600 1.05rem var(--body);padding:.5rem 0;color:rgba(255,253,249,.85)}
.mnav__panel h4{font-size:.95rem;color:var(--blue-light);margin:1rem 0 .25rem}
.mnav__contact{margin-top:2rem;display:grid;gap:.75rem;color:rgba(255,253,249,.8)}
.mnav__contact a{font:600 1rem var(--body);padding:0;display:flex;gap:.6rem;align-items:center}
.btn--short{min-height:44px;padding:.6rem 1rem}

/* =========================================================
   HERO SLIDER
   Four messages, one per service family. Autoplays every 7s,
   keeps running on hover, pauses on keyboard focus, has a pause button, and never
   autoplays when reduced motion is on.
   ========================================================= */
.hero{background:var(--midnight);color:var(--off-white);position:relative;overflow:hidden}
.slides{display:grid}
.slide{grid-area:1 / 1}
html:not(.js) .slide + .slide{display:none}
.js .slide{visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.js .slide.is-active{visibility:visible;opacity:1;transition:opacity .5s var(--ease)}

.hero__grid{display:grid;gap:2.5rem;padding-top:clamp(2.5rem,6vw,5rem)}
@media (min-width:960px){.hero__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0;padding-top:0;min-height:min(86vh,800px)}}
.hero__copy{align-self:center;padding-block:0 1rem}
@media (min-width:960px){.hero__copy{padding-block:4.5rem 8rem;padding-right:3rem}}
.hero__title{font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:.9;letter-spacing:-.045em;margin-bottom:1.6rem}
.hero__title .ln{display:block;white-space:nowrap}
.hero__title .ln--blue{color:var(--blue-light)}
.hero .lead{color:rgba(255,253,249,.82);margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* The price slab: bleeds off the right edge. Colour alternates per slide. */
.slab{position:relative;background:var(--blue);color:#fff;margin-inline:calc(var(--gutter) * -1);padding:2.5rem var(--gutter) 2rem;display:flex;flex-direction:column;justify-content:flex-end;transition:background-color .5s}
.slab--dark{background:var(--blue-dark)}
@media (min-width:960px){
  .slab{margin:0 calc(var(--gutter) * -1) 0 0;padding:2.5rem var(--gutter) 3rem 2.5rem}
}
.slab__img{position:absolute;width:min(44%,260px);top:-3.5rem;right:.5rem;filter:drop-shadow(0 30px 30px rgba(8,24,33,.45))}
.slab__img--photo{width:min(52%,300px);top:-2rem;border:5px solid var(--off-white);border-radius:6px;transform:rotate(3deg);filter:none;box-shadow:0 24px 40px -18px rgba(8,24,33,.6)}
@media (min-width:960px){
  .slab__note{max-width:16rem}
  .slab__img{width:auto;height:60%;max-width:none;top:1.75rem;right:auto;left:-13%}
  .slab__img--photo{height:auto;width:100%;top:3.5rem;left:-15%}
}
.slab__from{font:700 1.15rem var(--display)}
.slab__price{font:800 clamp(5.5rem,13vw,9.5rem)/.82 var(--display);letter-spacing:-.06em;margin:.2rem 0 .9rem;margin-left:-.05em;white-space:nowrap}
.slab__price sup{font-size:.42em;vertical-align:.95em;letter-spacing:0;margin-right:.03em}
.slab__price small{font-size:.24em;letter-spacing:0;margin-left:.15em}
.slab__note{font:600 1.05rem/1.35 var(--display);max-width:min(52%,16rem);padding-top:.9rem;border-top:2px solid rgba(255,255,255,.4)}
.slab__note a{color:#fff;text-decoration-thickness:2px;text-underline-offset:.2em}

/* Slider controls: named tabs with a progress line, plus pause */
.hero__ctrl{position:relative;z-index:2;background:var(--midnight)}
.hero__ctrl-in{padding-block:1.25rem 1.5rem}
.hero__ctrl-in > div{display:flex;gap:.75rem;align-items:flex-start}
@media (min-width:960px){
  .hero__ctrl{position:absolute;left:0;right:0;bottom:0;background:none;pointer-events:none}
  .hero__ctrl-in{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);padding-block:0 2.25rem}
  .hero__ctrl-in > div{gap:1rem;padding-right:3rem;pointer-events:auto}
}
.tabs{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.tab{position:relative;background:none;border:0;color:rgba(255,253,249,.55);text-align:left;padding:1rem 0 .25rem;min-height:48px;cursor:pointer;font:600 .95rem/1.2 var(--display);transition:color .2s}
.tab small{display:block;font:400 .82rem var(--body);margin-top:.2rem;opacity:.8}
.tab::before,.tab__bar{content:"";position:absolute;top:0;left:0;width:100%;height:3px;border-radius:2px}
.tab::before{background:var(--line-dark)}
.tab__bar{background:var(--blue-light);transform:scaleX(0);transform-origin:left}
.tab:hover,.tab[aria-selected="true"]{color:var(--off-white)}
.tab[aria-selected="true"] .tab__bar{transform:scaleX(1)}
.hero.is-playing .tab[aria-selected="true"] .tab__bar{animation:progress 7s linear both}
.hero.is-playing.is-held .tab[aria-selected="true"] .tab__bar{animation-play-state:paused}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:600px){.tab small{display:none}.tab{font-size:.85rem}}
.hero__pause{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-dark);background:none;color:var(--off-white);display:grid;place-items:center;cursor:pointer;margin-top:.1rem}
.hero__pause:hover{border-color:var(--blue-light);color:var(--blue-light)}
.hero__pause .icon{width:1.1rem;height:1.1rem}
.hero__pause .i-play{display:none}
.hero:not(.is-playing) .hero__pause .i-play{display:block}
.hero:not(.is-playing) .hero__pause .i-pause{display:none}
html:not(.js) .hero__ctrl{display:none}

/* Trust strip */
.trust{background:var(--blue-dark);color:#fff}
.trust ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem;padding-block:1.1rem}
.trust li{display:flex;align-items:center;gap:.55rem;font:600 1rem var(--display)}
.trust .icon{color:var(--blue-light)}

/* Slide entrance: replays each time a slide becomes active */
@media (prefers-reduced-motion:no-preference){
  .slide.is-active .hero__title .ln,.slide.is-active .lead,.slide.is-active .hero__actions,.slide.is-active .slab > p{animation:rise .7s var(--ease) both}
  .slide.is-active .hero__title .ln:nth-child(2){animation-delay:.06s}
  .slide.is-active .hero__title .ln:nth-child(3){animation-delay:.12s}
  .slide.is-active .lead{animation-delay:.2s}
  .slide.is-active .hero__actions{animation-delay:.26s}
  .slide.is-active .slab > p{animation-delay:.18s}
  .slide.is-active .slab__img{animation:float-in .9s var(--ease) .1s both}
  .slide.is-active .slab__img--photo{animation-name:float-in-photo}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes float-in{from{opacity:0;transform:translate(40px,20px) rotate(2deg)}}
@keyframes slab-in{from{opacity:0;transform:translateY(40px)}}
@keyframes bg-in{from{transform:scale(1.06)}}
@keyframes float-in-photo{from{opacity:0;transform:translate(40px,20px) rotate(7deg)}}

/* =========================================================
   CLIENT NAME SCROLLER
   ========================================================= */
.clients{background:#fff;padding-block:2.25rem;border-bottom:1px solid var(--line)}
.clients__label{font:600 .95rem var(--display);color:var(--muted);margin-bottom:1rem}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__track span{font:800 clamp(1.4rem,2.6vw,2rem)/1 var(--display);letter-spacing:-.03em;color:rgba(45,45,45,.38);padding-right:3rem;white-space:nowrap;transition:color .2s}
.marquee__track span:hover{color:var(--blue-dark)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;width:auto}}

/* =========================================================
   WHAT WE DO: image-led tiles, one per service group.
   Checkerboard of dark and light tiles; every row shows a price.
   ========================================================= */
.bento{display:grid;gap:1.25rem}
@media (min-width:760px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .bento{grid-template-columns:repeat(12,minmax(0,1fr))}
  .bt--web,.bt--dp{grid-column:span 7}
  .bt--mkt,.bt--mp{grid-column:span 5}
}
.bt{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:var(--sand);border-top:4px solid var(--blue);min-width:0}
.bt--dark{background:var(--midnight);color:var(--off-white);border-top-color:var(--blue-light)}
.bt__media{position:relative;height:clamp(210px,22vw,270px);overflow:hidden;background:var(--sand)}
.bt__media > img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bt:hover .bt__media > img{transform:scale(1.04)}
.bt__pill{position:absolute;left:1rem;bottom:1rem;background:var(--off-white);color:var(--midnight);font:700 .9rem var(--display);padding:.45rem .85rem;border-radius:999px;display:flex;gap:.4rem;align-items:center;box-shadow:var(--shadow-float)}
.bt__pill .icon{width:1rem;height:1rem;color:var(--blue-strong)}

.bt__body{padding:1.5rem 1.5rem 1rem;display:flex;flex-direction:column;flex:1}
@media (min-width:1000px){.bt__body{padding:1.75rem 2rem 1.25rem}}
.bt__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.bt__head h3{font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;letter-spacing:-.035em}
.bt__count{font:600 .88rem var(--display);color:var(--muted);white-space:nowrap}
.bt__intro{color:var(--muted);margin:.5rem 0 1rem;font-size:.98rem}
.bt--dark .bt__count,.bt--dark .bt__intro{color:rgba(255,253,249,.7)}
.bt__list{margin-top:auto}
.bt__list li{border-top:1px solid var(--line)}
.bt--dark .bt__list li{border-color:var(--line-dark)}
.bt__row{display:flex;align-items:center;gap:1rem;padding:.8rem 0;text-decoration:none;min-height:48px}
.bt__row strong{flex:1;font:700 1.08rem/1.2 var(--display)}
.bt__row span{font:700 .98rem var(--display);color:var(--blue-dark);white-space:nowrap}
.bt--dark .bt__row span{color:var(--blue-light)}
.bt__row .icon{width:1.3rem;height:1.3rem;color:var(--blue-strong);transition:transform .15s}
.bt--dark .bt__row .icon{color:var(--blue-light)}
.bt__row:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.bt__row:hover .icon{transform:translate(2px,-2px)}

/* Marketing tile: a drawn Google results page that explains SEO vs PPC */
.bt--mkt .bt__media{background:linear-gradient(160deg,#e4eef4,#d3e6f1);display:grid;place-items:start center;padding:1.5rem 1.25rem 0}
.bt--mkt .serp{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.serp{width:min(100%,380px);background:#fff;border-radius:10px;box-shadow:0 20px 40px -24px rgba(8,24,33,.5);padding:.85rem;font:400 .8rem/1.35 var(--body);color:#3c4043;display:grid;gap:.55rem}
.serp__bar{display:flex;gap:.5rem;align-items:center;border:1px solid #dfe1e5;border-radius:999px;padding:.45rem .8rem;color:#202124}
.serp__bar .icon{width:.95rem;height:.95rem;color:#9aa0a6}
.serp__res{position:relative;padding:.45rem .55rem;border-radius:6px}
.serp__res b{display:block;color:#1a0dab;font-weight:600;font-size:.86rem}
.serp__res i{font-style:normal;color:#4d5156;font-size:.75rem}
.serp__res--ad{outline:2px solid var(--blue-strong);outline-offset:-2px}
.serp__res--map{outline:2px solid var(--blue-light);outline-offset:-2px;display:flex;gap:.55rem;align-items:center}
.serp__map{width:2.1rem;height:2.1rem;border-radius:6px;flex:none;display:grid;place-items:center;background:#e8f0e3;color:#d93025}
.serp__map .icon{width:1rem;height:1rem}
.serp__res--dim{opacity:.4}
.serp__stars{color:#e8a317;letter-spacing:.05em}
.serp__label{position:absolute;right:-.4rem;top:50%;transform:translate(0,-50%);font:700 .72rem var(--display);padding:.2rem .55rem;border-radius:999px;color:#fff;background:var(--blue-strong)}
.serp__res--map .serp__label{background:var(--blue-light);color:var(--midnight)}
.serp__spons{font-weight:700;font-size:.72rem;color:#202124}

/* Marketplaces tile: transparent mockup on light blue */
.bt--mp .bt__media{background:var(--blue-light)}
.bt--mp .bt__media > img{object-fit:contain;padding:1rem 1rem 0;object-position:center bottom}

/* Design & Print tile: photo plus a stack of logo chips */
.chips{position:absolute;right:1rem;bottom:1rem;display:flex}
.chips img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:3px solid var(--off-white);box-shadow:var(--shadow-float);margin-left:-14px}
.chips img:nth-child(1){transform:rotate(-6deg)}
.chips img:nth-child(3){transform:rotate(5deg)}

/* =========================================================
   PACKAGES
   ========================================================= */
.pkgs{display:grid;gap:1.25rem;align-items:center}
@media (min-width:900px){.pkgs{grid-template-columns:repeat(3,1fr)}}
.pkg{background:var(--off-white);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:6px;padding:1.75rem 1.6rem;display:flex;flex-direction:column;gap:1rem;transition:transform .2s var(--ease),box-shadow .2s}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow-float)}
.pkg__badge{align-self:flex-start;font:700 .85rem var(--display);background:var(--blue-light);color:var(--midnight);padding:.3rem .75rem;border-radius:999px}
.pkg h3{font-size:1.5rem}
.pkg__price{font:800 clamp(3rem,5vw,3.75rem)/.9 var(--display);letter-spacing:-.05em}
.pkg__price small{font:600 1rem var(--display);letter-spacing:0;color:var(--muted);margin-left:.35rem}
.pkg__for{color:var(--muted);font-size:.98rem}
.pkg ul{display:grid;gap:.55rem;padding-block:.25rem .5rem;border-top:1px solid var(--line);padding-top:1rem}
.pkg li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem;line-height:1.4}
.pkg li .icon{color:var(--blue-strong);margin-top:.05rem;width:1.15rem;height:1.15rem}
.pkg__care{font-size:.88rem;color:var(--muted);text-align:center}
.pkg--featured{background:var(--midnight);color:var(--off-white);border-color:var(--midnight);border-top-color:var(--blue-light);padding-block:2.25rem}
.pkg--featured .pkg__for,.pkg--featured .pkg__price small,.pkg--featured .pkg__care{color:rgba(255,253,249,.72)}
.pkg--featured ul{border-color:var(--line-dark)}
.pkg--featured li .icon{color:var(--blue-light)}
@media (max-width:899px){.pkg--featured{order:-1}}
.pkgs__foot{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:center;margin-top:2rem;color:var(--muted);font-size:.95rem}
.pkgs__foot span{display:inline-flex;gap:.45rem;align-items:center}
.pkgs__foot .icon{color:var(--blue-strong)}

/* =========================================================
   RECENT WORK (square tiles)
   ========================================================= */
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width:800px){.work{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}}
.tile{margin:0}
.tile a{display:block;text-decoration:none}
.tile__img{aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--sand);box-shadow:var(--shadow-img)}
.tile__img img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .5s var(--ease)}
.tile--logo .tile__img img{object-position:center}
.tile a:hover img{transform:scale(1.04)}
.tile figcaption{display:flex;justify-content:space-between;gap:.5rem;padding-top:.7rem}
.tile figcaption strong{font:700 1rem/1.2 var(--display)}
.tile figcaption span{font-size:.85rem;color:var(--muted);white-space:nowrap}
@media (min-width:800px){
  .tile--big{grid-column:span 2;grid-row:span 2}
  .tile--big figcaption strong{font-size:1.35rem}
}
.work__more{margin-top:2rem;display:flex;justify-content:flex-end}

/* =========================================================
   HOW IT WORKS (no numbers; order carried by <ol> + line)
   ========================================================= */
.steps{display:grid;gap:0;position:relative}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:2rem}
  .steps::before{content:"";position:absolute;left:28px;right:12%;top:28px;height:2px;background:linear-gradient(90deg,var(--blue-light),rgba(127,207,251,.25))}
}
.step{display:grid;grid-template-columns:56px 1fr;gap:1.1rem;padding-block:1.25rem;border-top:1px solid var(--line-dark)}
.step:first-child{border-top:0}
@media (min-width:900px){.step{grid-template-columns:1fr;border:0;padding:0}}
.step__icon{width:56px;height:56px;border-radius:50%;border:2px solid var(--blue-light);display:grid;place-items:center;background:var(--midnight);position:relative;color:var(--blue-light)}
.step__icon .icon{width:1.5rem;height:1.5rem}
.step h3{font-size:1.35rem;margin-bottom:.4rem}
.step p{color:rgba(255,253,249,.75);font-size:.98rem}
.steps__cta{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.steps__cta p{color:rgba(255,253,249,.7);font-size:.95rem}

/* =========================================================
   STRATEGY CALL (poster type, after the reference)
   ========================================================= */
.talk{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#fff;overflow:hidden}
.talk__grid{display:grid;gap:2rem;align-items:end}
@media (min-width:900px){.talk__grid{grid-template-columns:1.5fr 1fr;gap:3rem}}
.talk h2{font-size:clamp(3rem,8.4vw,7rem);line-height:.88;letter-spacing:-.05em}
.talk p{font-size:1.1rem;line-height:1.55;margin-bottom:1.5rem;max-width:36ch}
.talk__small{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:1rem;font-size:.92rem;opacity:.9}
.talk__small span{display:inline-flex;gap:.4rem;align-items:center}

/* =========================================================
   REVIEWS
   ========================================================= */
.rev-top{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;margin-bottom:1.75rem}
.rev-src{display:flex;gap:.6rem;align-items:center;font:600 .95rem var(--display);color:var(--ink);text-decoration:none}
a.rev-src:hover{color:var(--blue-strong);text-decoration:underline;text-underline-offset:.2em}
.stars{display:inline-flex;gap:1px;color:#e8a317}
.stars .icon{width:1rem;height:1rem;fill:currentColor;stroke:none}
.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,22rem);gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
@media (min-width:1000px){.reviews{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
.review{margin:0;scroll-snap-align:start;background:var(--off-white);border:1px solid var(--line);border-radius:6px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;position:relative}
.review::before{content:"\201C";font:800 4.5rem/1 var(--display);color:var(--blue-light);height:2.2rem;margin-top:-.4rem}
.review blockquote{margin:0;font-size:1rem;line-height:1.55;flex:1}
.review footer{display:flex;gap:.75rem;align-items:center;border-top:1px solid var(--line);padding-top:1rem}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font:800 1rem var(--display);color:var(--blue-dark);flex:none}
.review cite{font-style:normal;font-size:.9rem;line-height:1.35}
.review cite strong{display:block;font:700 1rem var(--display)}
.review cite span{display:block;color:var(--muted)}
.review cite .via{color:var(--blue-strong);font-weight:600}

/* =========================================================
   UK TEAM / WHY US
   ========================================================= */
.why{display:grid;gap:2.5rem}
@media (min-width:900px){.why{grid-template-columns:1fr 1fr;gap:4rem;align-items:center}}
.photo-ph{aspect-ratio:4/5;border-radius:8px;background:
  repeating-linear-gradient(135deg,rgba(13,84,123,.06) 0 12px,transparent 12px 24px),var(--off-white);
  border:1px solid var(--line);display:grid;place-items:center;text-align:center;color:var(--muted);padding:2rem;position:relative}
.photo-ph strong{display:block;font:700 1.15rem var(--display);color:var(--blue-dark)}
.photo-ph .pin{position:absolute;left:-1px;bottom:1.5rem;background:var(--midnight);color:var(--off-white);padding:.8rem 1.1rem;border-radius:0 3px 3px 0;display:flex;gap:.6rem;align-items:center;font:600 1rem var(--display)}
.photo-ph .pin .icon{color:var(--blue-light)}
.bignum{display:flex;align-items:flex-end;gap:1rem;margin:1.75rem 0}
.bignum b{font:800 clamp(5rem,12vw,8rem)/.8 var(--display);letter-spacing:-.06em;color:var(--blue)}
.bignum span{font:600 1.1rem/1.25 var(--display);max-width:12rem;padding-bottom:.4rem}
.points li{display:flex;gap:.8rem;padding-block:.95rem;border-top:1px solid var(--line)}
.points li:last-child{border-bottom:1px solid var(--line)}
.points .icon{color:var(--blue-strong);margin-top:.15rem}
.points strong{font:700 1.05rem var(--display);display:block}
.points p{color:var(--muted);font-size:.96rem}

/* =========================================================
   FAQ
   ========================================================= */
.faq{display:grid;gap:0 3rem}
@media (min-width:760px){.faq{grid-template-columns:1fr 1fr}}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font:700 1.15rem/1.3 var(--display);color:var(--blue-dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--blue-strong);margin-top:.1rem;transition:transform .25s var(--ease)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details p{padding-bottom:1.25rem;color:var(--ink);max-width:60ch}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{display:grid;gap:2.5rem}
@media (min-width:900px){.contact{grid-template-columns:.85fr 1.15fr;gap:4rem}}
.direct{display:grid;gap:1rem;margin-top:2rem}
.direct a,.direct div{display:flex;gap:.85rem;align-items:center;text-decoration:none;font:600 1.05rem var(--display)}
.direct .icon{width:2.75rem;height:2.75rem;padding:.7rem;border-radius:50%;background:var(--off-white);border:1px solid var(--line);color:var(--blue-strong)}
.direct small{display:block;font:400 .88rem var(--body);color:var(--muted)}
.form{background:var(--off-white);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:6px;padding:clamp(1.25rem,3vw,2.25rem);display:grid;gap:1.1rem}
@media (min-width:600px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1 / -1}}
.field label{display:block;font:600 .95rem var(--display);margin-bottom:.4rem}
.field label span{font:400 .85rem var(--body);color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.7rem .85rem;font:inherit;font-size:1rem;color:var(--ink);background:var(--off-white);border:1px solid rgba(45,45,45,.35);border-radius:3px}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border:2px solid var(--blue-strong);padding:calc(.7rem - 1px) calc(.85rem - 1px);outline:3px solid var(--blue-light);outline-offset:1px}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;line-height:1.45}
.check input{width:1.25rem;height:1.25rem;margin-top:.1rem;accent-color:var(--blue-strong);flex:none}
.form__foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.form__foot p{font-size:.88rem;color:var(--muted)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--midnight);color:rgba(255,253,249,.78);padding-top:clamp(3rem,6vw,4.5rem);font-size:.95rem}
.footer__top{display:grid;gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line-dark)}
@media (min-width:900px){.footer__top{grid-template-columns:1.2fr repeat(6,minmax(0,1fr));gap:1.75rem}}
.footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
@media (min-width:600px){.footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.footer__cols{display:contents}}
.footer__brand img{height:38px;width:auto;margin-bottom:1rem}
.footer__brand p{max-width:30ch}
.footer h4{font-size:1rem;color:var(--off-white);margin-bottom:.8rem;letter-spacing:0}
.footer li a{display:inline-block;padding:.3rem 0;text-decoration:none}
.footer li a:hover{color:var(--blue-light)}
.footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-block:1.5rem;font-size:.85rem;color:rgba(255,253,249,.6)}


/* Current section in the nav */
.nav [aria-current]{color:var(--blue-strong);box-shadow:inset 0 -3px 0 var(--blue)}


/* =========================================================
   SERVICE PAGE COMPONENTS (shared by every service page)
   ========================================================= */

/* ---------- Service hero (shares the home hero system) ---------- */
.shero .hero__grid{padding-top:clamp(1.5rem,4vw,2.5rem)}
.shero .hero__title{font-size:clamp(2.6rem,5.6vw,4.6rem)}
@media (min-width:960px){.shero .hero__grid{min-height:min(86vh,780px);padding-top:0}.shero .hero__copy{padding-block:3.5rem 4rem}}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.9rem;color:rgba(255,253,249,.6);margin-bottom:1.5rem}
.crumbs a{color:rgba(255,253,249,.85);text-decoration:none}
.crumbs a:hover{color:var(--blue-light);text-decoration:underline}
.crumbs li + li::before{content:"/";margin-right:.5rem;color:rgba(255,253,249,.35)}
.facts{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line-dark)}
.facts li{display:flex;gap:.55rem;align-items:center;font:600 .98rem var(--display);color:rgba(255,253,249,.9)}
.facts .icon{color:var(--blue-light)}
/* Full-width photo behind the service hero, darkened on the copy side */
.shero{isolation:isolate}
.shero__bg{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden}
.shero__bg img{width:100%;height:100%;object-fit:cover}
.shero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,33,.8),rgba(8,24,33,.93) 60%)}
@media (min-width:960px){.shero__bg::after{background:linear-gradient(90deg,rgba(8,24,33,.95) 0%,rgba(8,24,33,.86) 40%,rgba(8,24,33,.3) 78%,rgba(8,24,33,.1) 100%)}}
/* Price slab: a solid blue block anchored bottom-right over the photo */
.shero .slab{margin-top:.5rem}
@media (min-width:960px){
  .shero .slab{align-self:end;justify-self:end;width:min(100%,27rem);margin:0 calc(var(--gutter) * -1) 0 0;padding:2.25rem var(--gutter) 2.5rem 2.25rem}
}
@media (prefers-reduced-motion:no-preference){
  .js .shero .hero__title .ln,.js .shero .lead,.js .shero .hero__actions,.js .shero .facts,.js .shero .slab > p{animation:rise .7s var(--ease) both}
  .js .shero .hero__title .ln:nth-child(2){animation-delay:.06s}
  .js .shero .lead{animation-delay:.16s}
  .js .shero .hero__actions{animation-delay:.22s}
  .js .shero .facts{animation-delay:.28s}
  .js .shero .slab{animation:slab-in .8s var(--ease) .12s both}
  .js .shero__bg img{animation:bg-in 1.6s var(--ease) both}
}

/* ---------- Introduction with photography ---------- */
.intro{display:grid;gap:2.5rem;align-items:center}
@media (min-width:960px){.intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem)}}
.intro__photos{position:relative;padding:0 0 18% 0}
.intro__main{width:88%;aspect-ratio:4 / 3;object-fit:cover;border-radius:8px;box-shadow:var(--shadow-img)}
.intro__inset{position:absolute;right:0;bottom:0;width:52%;margin:0}
.intro__inset img{width:100%;aspect-ratio:4 / 3;object-fit:cover;object-position:center 30%;border-radius:8px;border:6px solid var(--off-white);box-shadow:0 24px 40px -20px rgba(8,24,33,.5)}
.intro__inset figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem;padding-left:.4rem}
.intro__copy{display:grid;gap:1.1rem;justify-items:start}
.intro__copy .h2{margin-bottom:.4rem}
.intro__copy .lead{color:var(--ink);max-width:52ch}
.intro__copy p:not(.lead){color:var(--muted);max-width:60ch}

/* ---------- Packages extras ---------- */
.needs{margin-top:2rem;display:flex;gap:1rem;align-items:flex-start;background:var(--off-white);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:6px;padding:1.1rem 1.25rem}
.needs .icon{color:var(--blue-strong);margin-top:.15rem}
.needs strong{font:700 1.02rem var(--display)}
.needs p{color:var(--muted);font-size:.95rem}
.compare{margin-top:1.25rem;border:1px solid var(--line);border-radius:6px;background:var(--off-white)}
.compare summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;font:700 1.05rem var(--display);color:var(--blue-dark);min-height:48px}
.compare summary::-webkit-details-marker{display:none}
.compare summary .icon{transition:transform .25s var(--ease);color:var(--blue-strong)}
.compare[open] summary .icon{transform:rotate(45deg)}
.compare__scroll{overflow-x:auto;padding:0 1.25rem 1.25rem}
.compare table{width:100%;min-width:520px;border-collapse:collapse;font-size:.95rem}
.compare th,.compare td{padding:.7rem .5rem;border-top:1px solid var(--line);text-align:center}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{font:700 1rem var(--display);border-top:0}
.compare thead th.is-pop{color:var(--blue-strong)}
.compare td .icon{color:var(--blue-strong);width:1.15rem;height:1.15rem}
.compare td .icon.no{color:rgba(45,45,45,.3)}

/* ---------- Other builds (spin-off pages) ---------- */
.types{display:grid;gap:1.25rem}
@media (min-width:800px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}
.type{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:var(--sand);border-top:4px solid var(--blue)}
.type__media{position:relative;height:clamp(200px,20vw,280px);overflow:hidden;background:var(--sand)}
.type__media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.type:hover .type__media img{transform:scale(1.03)}
.type__body{padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
@media (min-width:1000px){.type__body{padding:1.75rem 2rem}}
.type h3{font-size:clamp(1.6rem,2.6vw,2rem);line-height:1;letter-spacing:-.03em}
.type__best{color:var(--muted)}
.type__best b{color:var(--ink);font-weight:600}
.type ul{display:grid;gap:.45rem}
.type li{display:flex;gap:.55rem;align-items:flex-start;font-size:.96rem}
.type li .icon{width:1.1rem;height:1.1rem;color:var(--blue-strong);margin-top:.1rem}
.type__foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem}
.type__price{font:800 1.5rem var(--display);letter-spacing:-.03em}
.type__price small{font:600 .9rem var(--display);color:var(--muted);letter-spacing:0}
.type__link{display:inline-flex;align-items:center;gap:.45rem;font:700 1rem var(--display);color:var(--blue-strong);text-decoration:none;min-height:44px}
.type__link .icon{transition:transform .15s}
.type__link:hover{color:var(--blue-dark)}
.type__link:hover .icon{transform:translateX(3px)}
.types__note{margin-top:1.5rem;color:var(--muted);font-size:.95rem}

/* ---------- Recent websites ---------- */
.sites{display:grid;gap:1.5rem}
@media (min-width:800px){.sites{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sitecard{margin:0}
.sitecard img{width:100%;aspect-ratio:16 / 10;object-fit:cover;object-position:top;border-radius:8px;box-shadow:var(--shadow-img)}
.sitecard figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.85rem}
.sitecard strong{font:700 1.1rem var(--display)}
.sitecard small{display:block;color:var(--muted);font-size:.88rem}
.sitecard a{display:inline-flex;gap:.3rem;align-items:center;font:700 .92rem var(--display);color:var(--blue-strong);text-decoration:none;white-space:nowrap}
.sitecard a .icon{width:1rem;height:1rem}
.quote{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:1.5rem;align-items:center;padding:clamp(1.5rem,4vw,2.75rem);background:var(--off-white);border-radius:8px;border:1px solid var(--line);position:relative}
@media (min-width:900px){.quote{grid-template-columns:1fr auto}}
.quote blockquote{margin:0;font:700 clamp(1.35rem,2.6vw,2rem)/1.2 var(--display);letter-spacing:-.02em}
.quote blockquote::before{content:"\201C";display:block;font-size:3.5em;line-height:.6;height:.45em;color:var(--blue-light)}
.quote footer{display:flex;gap:.8rem;align-items:center}
.quote cite{font-style:normal;font-size:.92rem;line-height:1.35}
.quote cite strong{display:block;font:700 1.02rem var(--display)}
.quote cite span{display:block;color:var(--muted)}
.quote cite .via{color:var(--blue-strong);font-weight:600}

/* ---------- Day-by-day timeline ---------- */
.days{display:grid;gap:0;position:relative}
@media (min-width:900px){
  .days{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem}
  .days::before{content:"";position:absolute;left:9px;right:9px;top:9px;height:2px;background:linear-gradient(90deg,var(--blue-light),rgba(127,207,251,.3))}
}
.day{position:relative;padding:0 0 1.75rem 2.25rem;border-left:2px solid rgba(127,207,251,.3);margin-left:9px}
.day:last-child{border-left-color:transparent;padding-bottom:0}
@media (min-width:900px){.day{border-left:0;margin:0;padding:2.25rem 0 0}}
.day::before{content:"";position:absolute;left:-10px;top:0;width:18px;height:18px;border-radius:50%;background:var(--midnight);border:2px solid var(--blue-light)}
@media (min-width:900px){.day::before{left:0}}
.day:last-child::before{background:var(--blue-light)}
.day__when{font:700 .95rem var(--display);color:var(--blue-light)}
.day h3{font-size:1.3rem;margin:.3rem 0 .4rem}
.day p{color:rgba(255,253,249,.75);font-size:.96rem}
.days__note{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.days__note p{color:rgba(255,253,249,.7);font-size:.95rem;max-width:52ch}

/* ---------- Care plans ---------- */
.care{display:grid;gap:1.25rem}
@media (min-width:800px){.care{grid-template-columns:1fr 1fr}}
.plan{border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:6px;padding:1.75rem;display:flex;flex-direction:column;gap:1rem;background:var(--off-white)}
.plan__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.plan h3{font-size:1.5rem}
.plan__kind{color:var(--muted);font-size:.95rem;margin-top:.25rem}
.plan__price{font:800 2.6rem/.9 var(--display);letter-spacing:-.05em;white-space:nowrap}
.plan__price small{font:600 .95rem var(--display);letter-spacing:0;color:var(--muted)}
.plan ul{display:grid;gap:.5rem;border-top:1px solid var(--line);padding-top:1rem}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem}
.plan li .icon{width:1.15rem;height:1.15rem;color:var(--blue-strong);margin-top:.1rem}
.plan .btn{margin-top:auto;align-self:flex-start}
.care__note{margin-top:1.25rem;color:var(--muted);font-size:.95rem;display:flex;gap:.5rem;align-items:center}
.care__note .icon{color:var(--blue-strong)}

/* ---------- Project sizes (quote-led pricing) ---------- */
.sizes{display:grid;gap:1.25rem}
@media (min-width:900px){.sizes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.size{background:var(--off-white);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:6px;padding:1.75rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.size h3{font-size:1.45rem}
.size__price{font:800 clamp(2.4rem,4vw,3rem)/.95 var(--display);letter-spacing:-.05em}
.size__price small{font:600 1rem var(--display);letter-spacing:0;color:var(--muted);margin-right:.35rem}
.size__for{color:var(--muted)}
.size ul{display:grid;gap:.5rem;border-top:1px solid var(--line);padding-top:1rem}
.size li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem}
.size li .icon{width:1.15rem;height:1.15rem;color:var(--blue-strong);margin-top:.1rem}
.size__time{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);display:flex;gap:.5rem;align-items:center;font:600 .95rem var(--display);color:var(--blue-dark)}
.size__time .icon{color:var(--blue-strong)}
.sizes__cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.sizes__cta p{color:var(--muted);max-width:52ch}
.size .btn{margin-top:.25rem}

/* ---------- Icon blocks (used on Web Apps, SEO and others) ---------- */
.apps{display:grid;gap:1.25rem}
@media (min-width:700px){.apps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.apps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.app{display:flex;flex-direction:column;gap:.9rem;background:var(--off-white);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:6px;padding:1.75rem 1.6rem 1.25rem;transition:transform .2s var(--ease),box-shadow .2s}
.app:hover{transform:translateY(-4px);box-shadow:var(--shadow-float)}
.app__icon{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--blue-strong);color:#fff;display:grid;place-items:center}
.app__icon .icon{width:1.45rem;height:1.45rem}
.app h3{font-size:clamp(1.5rem,2.2vw,1.85rem);line-height:1.05;letter-spacing:-.03em}
.app p{color:var(--muted);max-width:42ch}
.app__swap{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);display:flex;gap:.6rem;align-items:baseline;color:var(--ink) !important;font-size:.95rem}
.app__swap b{font:700 .85rem var(--display);color:var(--blue-strong);white-space:nowrap}
.apps__note{margin-top:1.5rem;color:var(--muted)}

/* ---------- Featured shop: the page scrolls through its window ---------- */
.feature{display:grid;gap:2.5rem}
@media (min-width:960px){.feature{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(3rem,6vw,6rem)}}
.feature__copy{display:grid;gap:1.25rem;align-content:start}
@media (min-width:960px){.feature__copy{position:sticky;top:7rem;align-self:start}}
.feature__name{font:800 clamp(2.4rem,5vw,4rem)/.95 var(--display);letter-spacing:-.045em}
.feature__what{color:var(--muted);font-size:1.05rem;max-width:44ch}
.feature__list{display:grid;border-top:1px solid var(--line)}
.feature__list li{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--line)}
.feature__list .icon{color:var(--blue-strong);margin-top:.1rem}
.feature__list strong{display:block;font:700 1.02rem var(--display)}
.feature__list p{color:var(--muted);font-size:.93rem}
.feature__quote{font:600 1.1rem/1.4 var(--display);padding-left:1rem;border-left:4px solid var(--blue-light);max-width:44ch}
.feature__quote span{display:block;font:400 .88rem var(--body);color:var(--muted);margin-top:.35rem}

.reel-track{position:relative}
.reel{position:relative;height:min(78vh,760px);border-radius:10px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 40px 70px -40px rgba(8,24,33,.6);background:#fff;scrollbar-width:thin}
.reel img{width:100%;height:auto;display:block}
.reel__hint{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:2;display:flex;gap:.45rem;align-items:center;background:var(--midnight);color:var(--off-white);font:600 .85rem var(--display);padding:.5rem .9rem;border-radius:999px;box-shadow:var(--shadow-float);pointer-events:none}
.reel__hint .icon{width:1rem;height:1rem;color:var(--blue-light)}
/* Where supported, scrolling the page scrolls the shop: the reel sticks while its track passes */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:960px){
    .reel-track{height:240vh;view-timeline-name:--reel}
    .reel{position:sticky;top:6.5rem;overflow:hidden}
    .reel img{animation:reel linear both;animation-timeline:--reel;animation-range:contain 0% contain 100%}
    .reel__hint{display:none}
  }
}
@keyframes reel{from{transform:translateY(0)}to{transform:translateY(calc(-100% + min(78vh,760px)))}}

/* ---------- Site wall: hover a site to scroll its full page ---------- */
.wall{display:grid;gap:2rem 1.5rem}
@media (min-width:760px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.wall{grid-template-columns:repeat(3,minmax(0,1fr))}.site--big{grid-row:span 2}}
.site{margin:0;display:flex;flex-direction:column;min-width:0}
.scrollshot{position:relative;height:clamp(300px,26vw,400px);overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 30px 50px -34px rgba(8,24,33,.55);outline-offset:4px}
@media (min-width:1100px){.site--big .scrollshot{height:auto;flex:1 1 0;min-height:clamp(300px,26vw,400px)}.site--big .scrollshot img{position:absolute;top:0;left:0}}
.scrollshot img{width:100%;height:auto;display:block;transition:transform var(--dur,6s) cubic-bezier(.45,0,.4,1)}
.site:hover .scrollshot img,.scrollshot:focus-visible img{transform:translateY(var(--shift,0px))}
.scrollshot__hint{position:absolute;right:.85rem;bottom:.85rem;display:flex;gap:.4rem;align-items:center;background:var(--midnight);color:var(--off-white);font:600 .8rem var(--display);padding:.4rem .75rem;border-radius:999px;transition:opacity .25s;pointer-events:none}
.scrollshot__hint .icon{width:.95rem;height:.95rem;color:var(--blue-light)}
.site:hover .scrollshot__hint,.scrollshot:focus-visible .scrollshot__hint{opacity:0}
/* Touch screens and reduced motion: scroll inside the box instead */
@media (hover:none),(prefers-reduced-motion:reduce){
  .scrollshot{overflow-y:auto;overscroll-behavior:contain}
  .scrollshot img{transition:none;transform:none !important}
  .scrollshot__hint .when-hover{display:none}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.scrollshot__hint .when-touch{display:none}}
.site figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.85rem}
.site strong{font:700 1.1rem var(--display)}
.site--big strong{font-size:1.35rem}
.site small{display:block;color:var(--muted);font-size:.88rem}
.site figcaption a{display:inline-flex;gap:.3rem;align-items:center;font:700 .92rem var(--display);color:var(--blue-strong);text-decoration:none;white-space:nowrap}
.site figcaption a .icon{width:1rem;height:1rem}

/* ---------- Forms (shared by every form that posts to forms/submit.php) ---------- */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.field__error{display:none;gap:.4rem;align-items:center;font-size:.88rem;color:var(--alert,#c62f2f);margin-top:.45rem}
.field__error .icon{width:1rem;height:1rem;flex:none}
.field.is-invalid .field__error{display:flex}
.field.is-invalid input:not([type=radio]):not([type=checkbox]),.field.is-invalid select,.field.is-invalid textarea{border-color:var(--alert,#c62f2f)}
.field__hint{display:block;font-size:.85rem;color:var(--muted);margin-top:.35rem}
.formerror{display:none;gap:.75rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:8px;background:rgba(198,47,47,.08);border-left:4px solid var(--alert,#c62f2f)}
.formerror.is-on{display:flex}
.formerror .icon{color:var(--alert,#c62f2f);flex:none;margin-top:.15rem}

/* ---------- Company details (partials/company.html) ---------- */
mark.fill{background:rgba(232,163,23,.28);color:inherit;border-radius:3px;padding:0 .2em}
.footer__bar .co{font-size:.75rem;line-height:1.5;opacity:.85}
.co a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.co a:hover{color:var(--blue-light)}
.legal .co a{color:var(--blue-strong)}
.co--block{display:grid;gap:.2rem}
.co--block .co__sep{display:none}
.co--block .co__name{font-weight:700}

/* ---------- Legal pages (privacy, cookies, terms) ---------- */
.lhead{padding-block:clamp(2rem,5vw,3.5rem) 0}
.lhead .crumbs{color:var(--muted)}
.lhead .crumbs a{color:var(--ink)}
.lhead .crumbs a:hover{color:var(--blue-strong)}
.lhead .crumbs li + li::before{color:var(--line)}
.lhead h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:.92;letter-spacing:-.05em;margin:1rem 0 .9rem}
.lhead__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.92rem;color:var(--muted)}
.lhead__meta span{display:inline-flex;gap:.4rem;align-items:center}
.lhead__meta .icon{width:1rem;height:1rem}
.ltabs{margin-top:clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--line)}
.ltabs ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.ltabs a{display:block;white-space:nowrap;padding:.9rem 1rem;font:600 .98rem var(--display);color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.ltabs a:hover{color:var(--ink)}
.ltabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)}
.llayout{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr);padding-block:clamp(2rem,4vw,3.5rem) clamp(3rem,6vw,5rem)}
@media (min-width:1050px){.llayout{grid-template-columns:16rem minmax(0,70ch);gap:clamp(3rem,5vw,5rem)}}
.ltoc{font-size:.92rem}
@media (min-width:1050px){.ltoc{position:sticky;top:6rem;align-self:start;max-height:calc(100vh - 8rem);overflow:auto}}
.ltoc h2{font-size:1rem;margin-bottom:.75rem}
.ltoc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;border-left:2px solid var(--line)}
.ltoc a{display:block;padding:.35rem 0 .35rem 1rem;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;line-height:1.35}
.ltoc a:hover{color:var(--ink)}
.ltoc a[aria-current="true"]{color:var(--blue-strong);border-left-color:var(--blue-strong);font-weight:600}
@media (max-width:1049px){.ltoc{border:1px solid var(--line);border-radius:8px;padding:1rem 1.15rem;background:var(--off-white)}.ltoc ol{columns:2;column-gap:1.5rem;display:block}.ltoc li{break-inside:avoid}}
@media (max-width:600px){.ltoc ol{columns:1}}
.legal{font-size:1.04rem;line-height:1.7;min-width:0}
.legal > * + *{margin-top:1.1em}
.legal h2{font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.15;letter-spacing:-.025em;margin-top:2.2em;scroll-margin-top:6rem}
.legal h3{font-size:1.15rem;margin-top:1.6em}
.legal a{color:var(--blue-strong);text-decoration:underline;text-underline-offset:.18em}
.legal ul,.legal ol{padding-left:1.25rem}
.legal li + li{margin-top:.45em}
.legal li::marker{color:var(--blue-strong)}
.lsum{background:var(--sand);border-radius:8px;padding:1.4rem 1.5rem}
.lsum h2{font-size:1.15rem;margin:0 0 .75rem;letter-spacing:-.01em}
.lsum ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.lsum li{display:flex;gap:.65rem;align-items:flex-start;margin:0}
.lsum li .icon{color:var(--blue-strong);margin-top:.3rem;flex:none}
.ltable{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.ltable table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:36rem}
.ltable th,.ltable td{text-align:left;padding:.75rem .95rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.ltable thead th{background:var(--midnight);color:var(--off-white);font:700 .92rem var(--display)}
.ltable tbody tr:last-child td{border-bottom:0}
.ltable td:first-child{font-weight:600}
.lcontact{border:1px solid var(--line);border-radius:8px;padding:1.4rem 1.5rem;display:grid;gap:.5rem}

/* ---------- Home hero: real client work behind each slide ---------- */
.slide{position:relative;isolation:isolate}
.slide__bg{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;background:var(--midnight)}
.slide__bg img{width:100%;height:100%;object-fit:cover;display:block}
.slide__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,33,.55),rgba(8,24,33,.9) 60%)}
@media (min-width:960px){
  /* The photo sits behind the right of the hero and fades into the headline side */
  .slide__bg{left:24%}
  .slide__bg::after{background:
    linear-gradient(0deg,rgba(8,24,33,.9) 0%,rgba(8,24,33,0) 32%),
    linear-gradient(90deg,var(--midnight) 0%,rgba(8,24,33,.8) 20%,rgba(8,24,33,.3) 52%,rgba(8,24,33,.08) 78%,rgba(8,24,33,.2) 100%)}
  /* Text-heavy work (e.g. the billboard wall) starts further right so it never sits behind the headline */
  .slide__bg--busy{left:44%}
  .slide__bg--busy img{filter:saturate(.85)}
  .hero .slab{align-self:end;justify-self:end;width:min(100%,25rem);margin:0 calc(var(--gutter) * -1) 0 0;padding:2.1rem var(--gutter) 2.4rem 2.1rem}
  .hero .slab__price{font-size:clamp(4.6rem,7vw,6.6rem)}
  .hero .slab__note{max-width:none}
}
@media (prefers-reduced-motion:no-preference){
  .slide.is-active .slide__bg img{animation:hero-pan 9s var(--ease) both}
}
@keyframes hero-pan{from{transform:scale(1.06)}to{transform:scale(1)}}

/* ---------- Floating WhatsApp button (partials/site-extras.html) ---------- */
.wa{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;flex-direction:row-reverse;height:3.5rem;min-width:3.5rem;padding:0 .9rem;border-radius:999px;background:#25d366;color:#fff;text-decoration:none;box-shadow:0 10px 24px -8px rgba(8,24,33,.45),0 2px 6px rgba(8,24,33,.18);transition:transform .2s var(--ease),box-shadow .2s,background-color .2s}
.wa:hover{background:#1ebe5b;transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(8,24,33,.5),0 2px 6px rgba(8,24,33,.18)}
.wa:focus-visible{outline:3px solid var(--blue-light);outline-offset:3px}
.wa__icon{width:1.75rem;height:1.75rem;flex:none}
.wa__label{max-width:0;overflow:hidden;white-space:nowrap;font:700 .95rem var(--display);transition:max-width .3s var(--ease),margin .3s var(--ease)}
.wa:hover .wa__label,.wa:focus-visible .wa__label{max-width:12rem;margin-right:.6rem}
@media (max-width:700px){.wa{height:3.25rem;min-width:3.25rem;padding:0 .75rem}.has-cookiebar .wa{display:none}}
@media print{.wa,.cookiebar{display:none !important}}

/* ---------- Cookie banner (bottom left) ---------- */
.cookiebar{position:fixed;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));z-index:70;width:min(24rem,calc(100% - 2rem));background:var(--off-white);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:10px;padding:1.25rem 1.3rem 1.1rem;box-shadow:0 24px 48px -16px rgba(8,24,33,.4),0 4px 10px rgba(8,24,33,.12);display:grid;gap:.75rem}
.cookiebar[hidden]{display:none}
.cookiebar h2{font-size:1.15rem;letter-spacing:-.01em}
.cookiebar p{font-size:.92rem;line-height:1.5;color:var(--muted)}
.cookiebar__btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cookiebar__btns .btn{min-height:44px;padding-inline:.75rem;font-size:.92rem;justify-content:center}
.cookiebar__more{font-size:.88rem;color:var(--blue-strong);font-weight:600;justify-self:start}
@media (max-width:700px){.cookiebar{left:0;right:0;bottom:0;width:auto;border-radius:12px 12px 0 0;border-inline:0;border-bottom:0;padding-bottom:max(1.1rem,env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:no-preference){.cookiebar:not([hidden]){animation:cookie-in .45s var(--ease) .6s both}}
@keyframes cookie-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- "+ VAT" label on every price (prices exclude VAT) ---------- */
.vat{display:inline-block;font-family:var(--display);font-weight:700;font-size:max(.72rem,min(.3em,1.05rem));letter-spacing:0;line-height:1;margin-left:.35em;opacity:.78;white-space:nowrap;vertical-align:baseline}
.slab__price .vat{margin-left:.5rem}