:root{
  --sky:#2F9FE6; --sky-hi:#3DABF0; --sky-lo:#1E8AD6;
  /* drenched text-bearing surfaces deepened for WCAG AA (was #3DABF0→#1E8AD6) */
  --drench-1:#1478BE; --drench-2:#0F66A6; --drench-3:#0A4F86;
  --blue-txt:#1687D9; --blue-deep:#0F6CB5; --cyan:#16ADEF; --teal:#35C4BE; --teal-deep:#1FA79F;
  --pink:#E8447C; --pink-deep:#D6336B; --sun:#FFC33C;
  --ink:#31313D; --ink-2:#585868; --canvas:#ffffff; --tint:#F2F9FF; --line:#E1EEF9;
  --shadow-sm:0 2px 10px rgba(15,70,120,.08);
  --shadow-md:0 14px 30px -12px rgba(15,70,120,.22);
  --shadow-lg:0 36px 70px -22px rgba(10,55,100,.35);
  --r-md:16px; --r-lg:26px; --r-xl:38px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-back:cubic-bezier(.34,1.45,.64,1);
  --z-sticky:100; --z-nav-menu:200; --z-modal:310;
  --maxw:1180px;
  --f-display:"Baloo 2",sans-serif; --f-body:"Figtree",sans-serif; --f-script:"Pacifico",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;scrollbar-color:#9CC4E2 #fff}
.hero{overflow:hidden}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--canvas);font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.06;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:#BFE3FA;color:#123A5C}
:focus-visible{outline:3px solid var(--blue-txt);outline-offset:3px;border-radius:6px}
.ondrench :focus-visible{outline-color:#fff}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--blue-txt);color:#fff;padding:.6rem 1rem;z-index:400;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--f-display);font-weight:700;font-size:1.06rem;letter-spacing:.01em;padding:.95rem 1.7rem;border-radius:var(--r-md);border:none;cursor:pointer;transition:transform .25s var(--ease-back),box-shadow .25s var(--ease);will-change:transform;line-height:1.2}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn--white{background:#fff;color:var(--blue-txt);box-shadow:0 0 0 5px rgba(255,255,255,.22),0 12px 26px -8px rgba(6,50,90,.35)}
.btn--white:hover{box-shadow:0 0 0 7px rgba(255,255,255,.3),0 18px 34px -10px rgba(6,50,90,.4)}
.btn--blue{background:var(--blue-txt);color:#fff;box-shadow:0 12px 24px -8px rgba(22,135,217,.55)}
.btn--blue:hover{box-shadow:0 18px 32px -10px rgba(22,135,217,.6)}
.btn--pink{background:var(--pink);color:#fff;box-shadow:0 12px 24px -8px rgba(232,68,124,.5)}
.btn--ghostblue{background:transparent;color:#fff;border:2.5px solid rgba(255,255,255,.55)}
.btn--ghostblue:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--lg{padding:1.15rem 2.1rem;font-size:1.15rem}
.btn .play{width:19px;height:19px;fill:currentColor;flex:none}

.nav{position:sticky;top:0;z-index:var(--z-sticky);background:#fff;padding:.85rem 0;transition:box-shadow .3s var(--ease)}
.nav.is-stuck{box-shadow:0 2px 20px rgba(15,70,120,.1)}
.nav__inner{display:flex;align-items:center;gap:1.4rem}
.logo{display:inline-flex;align-items:center;line-height:0;flex:none}
.logo img{height:36px;width:auto;display:block;transition:transform .3s var(--ease-back)}
.logo:hover img{transform:translateY(-2px)}
.logo--footer img{height:44px}
@media (max-width:420px){.logo img{height:30px}}
.nav__links{display:flex;gap:.2rem;margin-left:auto}
.nav__links a{padding:.5rem .8rem;border-radius:12px;font-weight:600;color:var(--ink-2);transition:color .2s,background .2s}
.nav__links a:hover{color:var(--blue-txt);background:var(--tint)}
/* services dropdown: CSS-only on desktop, an indented sub-list inside the burger
   menu on mobile. The Services label itself still links to /services, so the
   menu is an accelerator, never the only way through. */
.nav__drop{position:relative;display:flex}
.nav__droptop{display:inline-flex;align-items:center;gap:.15rem}
.nav__caret{width:15px;height:15px;fill:currentColor;transition:transform .2s var(--ease)}
.nav__drop:hover .nav__caret,.nav__drop:focus-within .nav__caret{transform:rotate(180deg)}
.nav__sub{position:absolute;top:100%;left:0;margin-top:.45rem;min-width:16rem;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:.4rem;display:grid;gap:.1rem;z-index:var(--z-nav-menu);opacity:0;visibility:hidden;transform:translateY(-.4rem);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-.45rem;height:.45rem}
.nav__drop:hover .nav__sub,.nav__drop:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{white-space:nowrap}
.nav__cta{display:flex;align-items:center;gap:.8rem}
.nav__mobilecta{display:none}
.burger{display:none;width:46px;height:46px;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;padding:0}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);margin:auto;transition:.25s var(--ease);position:relative}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}

/* waves — one symbol, reused everywhere */
/* fill inherits through the <use> shadow boundary; the soft layer carries its own opacity attribute */
/* Where the wave's fill meets the edge of its own box the fill is antialiased,
   so at any viewport width that makes the wave's height land on a fractional
   pixel, the drenched section colour behind it shows through as a 1px hairline.
   The bottom 2px of the shape are solid white at every width, so painting an
   opaque white strip BEHIND that strip hides the section colour without
   changing a single visible pixel. The flipped waves mirror their background
   along with the element, so this one rule covers the seam at the top of a
   section as well as the one at the bottom.
   Two things that do NOT work here, both tried:
   - a negative margin. It fixes .hero only because .hero has overflow:hidden;
     on .worksec and .pricesec it collapses through and the background box never
     shrinks, and it cannot help the flipped waves at all.
   - a white drop-shadow. It fills the seam, but it also sits behind the .35
     opacity wave layer and visibly lightens it. */
.wave{display:block;width:100%;height:clamp(42px,6vw,86px);fill:#fff;background:linear-gradient(#fff,#fff) 0 100%/100% 2px no-repeat}

/* Belt and braces for the wave seam (see .wave above). The inset shadows paint a
   2px white bar along exactly the edges that carry a wave, and because they are
   drawn in the same paint pass as the section's own background they are pixel-
   snapped identically to it — which the wave, sitting in its own transformed
   layer, is not. Those 2px are solid white in the wave artwork at every width,
   so nothing visible changes. Only edges with a wave get a bar: .hero and .phead
   at the bottom, .worksec and .pricesec top and bottom. If a wave is ever added
   or removed from one of these sections, update the matching shadow. */

/* ============ HERO — deepened drench for AA ============ */
.hero{position:relative;isolation:isolate;color:#fff;background:linear-gradient(168deg,var(--drench-1) 0%,var(--drench-2) 52%,var(--drench-3) 100%);padding:clamp(2.9rem,1.8rem + 4.4vw,5.5rem) 0 0;box-shadow:inset 0 -2px 0 #fff}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center;padding-bottom:clamp(2.75rem,2.2rem + 3.3vw,4.95rem)}
.hero h1{font-size:clamp(1.9rem,.95rem + 2.8vw,3.15rem);line-height:1.08}
.hero h1 .h1t{display:block}
.hero h1 .h1s{font-family:var(--f-script);font-weight:400;display:block;font-size:clamp(1.5rem,.65rem + 2.2vw,2.6rem);line-height:1.3;letter-spacing:0;margin-top:.28em;transform:rotate(-1.5deg);transform-origin:left;white-space:nowrap}
.hero__sub{margin-top:1.4rem;font-size:clamp(1.02rem,.98rem + .4vw,1.22rem);color:#fff;max-width:46ch;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:var(--ink);font-weight:700;font-size:.92rem;padding:.5rem .9rem .5rem .55rem;border-radius:100px;box-shadow:0 8px 18px -6px rgba(6,50,90,.3)}
.chip i{width:22px;height:22px;border-radius:50%;background:var(--sky);display:grid;place-items:center;flex:none}
.chip i svg{width:12px;height:12px;fill:#fff}
.has-js .chip{opacity:0;transform:translateY(10px) scale(.9);animation:chipIn .5s var(--ease-back) forwards}
.has-js .chip:nth-child(1){animation-delay:.35s}
.has-js .chip:nth-child(2){animation-delay:.48s}
.has-js .chip:nth-child(3){animation-delay:.61s}
.has-js .chip:nth-child(4){animation-delay:.74s}
.has-js .chip:nth-child(5){animation-delay:.87s}
@keyframes chipIn{to{opacity:1;transform:none}}
.chip--label{background:var(--sun);color:var(--ink);padding:.5rem 1rem}
.chips{flex-wrap:nowrap}
@media (max-width:1160px){.chips{flex-wrap:wrap}}

.spark{position:absolute;color:rgba(255,255,255,.8);pointer-events:none;animation:twinkle 3.4s ease-in-out infinite}
.spark svg{width:100%;height:100%;fill:currentColor}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8) rotate(0deg)}50%{opacity:.95;transform:scale(1.15) rotate(18deg)}}

.deck{position:relative;aspect-ratio:16/11.4;width:100%;max-width:560px;margin-left:auto}
.deck__card{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:5px solid #fff;background:linear-gradient(140deg,#57b7f0,#1e86cf);transition:transform .5s var(--ease)}
.deck__card img{width:100%;height:100%;object-fit:cover}
.deck__card .fall{position:absolute;inset:0;display:none;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.6rem}
.deck__card.noimg img{display:none}
.deck__card.noimg .fall{display:grid}
.deck__card--3{transform:rotate(6deg) translate(4%,6%)}
.deck__card--2{transform:rotate(-5deg) translate(-3.5%,3%)}
.deck__card--1{transform:rotate(1deg)}
.deck:hover .deck__card--3{transform:rotate(8deg) translate(6%,7%)}
.deck:hover .deck__card--2{transform:rotate(-7deg) translate(-5%,4%)}
.deck__play{position:absolute;inset:0;margin:auto;width:86px;height:86px;border-radius:50%;z-index:3;background:#fff;color:var(--blue-txt);border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 18px 40px -8px rgba(6,50,90,.5);transition:transform .3s var(--ease-back)}
.deck__play::after{content:"";position:absolute;inset:-13px;border-radius:50%;border:2.5px solid rgba(255,255,255,.6);animation:ping 2.4s ease-out infinite}
.deck__play:hover{transform:scale(1.09)}
.deck__play svg{width:32px;height:32px;fill:currentColor}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}

.proof{padding:clamp(1.6rem,1.2rem + 1.5vw,2.6rem) 0 .4rem;background:#fff}
.proof__label{text-align:center;color:var(--ink-2);font-weight:600;margin-bottom:1.3rem}
.proof__label b{color:var(--ink)}
.marquee{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:3.2rem;width:max-content;animation:scroll 30s linear infinite}
.marquee__track span{font-family:var(--f-display);font-weight:700;font-size:1.45rem;color:#6A6A78;white-space:nowrap;transition:color .2s}
.marquee__track span:hover{color:var(--blue-txt)}
@keyframes scroll{to{transform:translateX(-50%)}}

.sec{padding:clamp(3.6rem,2.6rem + 4.5vw,6.2rem) 0;position:relative}
.sec__head{max-width:62ch;margin-inline:auto;text-align:center;margin-bottom:clamp(1.8rem,1.2rem + 2vw,3rem)}
.sec__head h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,3.1rem)}
.sec__head p{margin-top:.9rem;margin-inline:auto;color:var(--ink-2);font-size:1.12rem;max-width:54ch}
/* for a head carrying a longer paragraph than the standard two-liner */
.sec__head--wide{max-width:78ch}
.sec__head--wide p{max-width:60ch}
.sec__head__cta{margin-top:1.6rem}
.center{text-align:center;margin-inline:auto}
.center p{margin-inline:auto}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch}
.tile{border-radius:var(--r-lg);padding:1.8rem;position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tile h3{font-size:1.42rem;margin-bottom:.45rem}
.tile p{color:var(--ink-2)}
.tile__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:1rem}
.tile__ico svg{width:26px;height:26px}
/* Portrait tiles: the clip fills the whole tile and the tile's own gradient
   washes back in over its lower half, so the copy still sits on flat, opaque
   colour. Every gradient is built so the body half stays at or below the colour
   where white text clears AA (4.5:1) — the scrim reaches full opacity well
   above the heading, so that guarantee is unchanged. */
.tile--tall{color:#fff;border:none;padding:0;display:flex;flex-direction:column;overflow:hidden;
  --tallgrad:linear-gradient(165deg,#2A97D8 0%,var(--drench-1) 26%,var(--drench-2) 46%,#093F6C 100%);
  background:var(--tallgrad)}
.tile--tall--pink{--tallgrad:linear-gradient(165deg,#F2679B 0%,var(--pink) 22%,var(--pink-deep) 44%,#8F2049 100%)}
.tile--tall--green{--tallgrad:linear-gradient(165deg,#4FD3CD 0%,#22B0A9 22%,#0F7A75 44%,#07514E 100%)}
/* Once a clip is playing it covers the tile completely, so the tile's own
   gradient is switched off. Left on, the rounded corners antialias twice — clip
   over gradient over page — and a pixel of the gradient reads as a hairline
   along the top edge. The scrim below still carries the colour. */
.tile--tall:has(.tallvid.playing){background:none}
/* The scrim is the tile's gradient again, masked from nothing to solid, so
   there is no second colour to keep in sync and no seam where the fade lands. */
.tile--tall::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--tallgrad);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.10) 30%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.85) 56%,#000 64%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.10) 30%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.85) 56%,#000 64%,#000 100%)}
.tile--tall__body{padding:.4rem 1.6rem 1.8rem;position:relative;z-index:1;margin-top:auto}
.tile--tall .tallvid{flex:1 1 auto}
/* Line the three tiles up on shared rows (art / heading / copy) so the headings sit on
   one baseline whatever their size, and the copy starts on one line beneath them. */
@supports (grid-template-rows:subgrid){
  @media (min-width:861px){
    /* Row 1 carries no content now the clip is out of flow, so it is sized
       directly. It tracks the viewport so the tile keeps a near-3:5 shape and
       the clip is barely cropped at any desktop width. */
    .bento:has(.tile--tall){grid-template-rows:minmax(clamp(240px,27vw,380px),auto) auto auto}
    .tile--tall{display:grid;grid-row:span 3;grid-template-rows:subgrid}
    .tile--tall .tallvid{flex:none}
    .tile--tall__body{display:contents}
    .tile--tall__body>*{padding-inline:1.6rem;position:relative;z-index:1}
    .tile--tall__body h3,.tile--tall__body .big{align-self:end;margin:0}
    .tile--tall__body p{align-self:start;margin:.45rem 0 0;padding-bottom:1.8rem}
    .tile--tall__body .big + p{margin-top:.5rem}
  }
}
/* Without subgrid the tile is a flex column and the out-of-flow clip gives it
   no height of its own, so state one. Headings will not share a baseline here. */
@supports not (grid-template-rows:subgrid){
  @media (min-width:861px){.tile--tall{min-height:clamp(370px,45vw,520px)}}
}
.tile--tall__body h3{font-size:1.5rem;margin-bottom:.4rem;color:#fff}
/* The clip is taken out of flow and fills the tile edge to edge. The fade is
   handled by .tile--tall::after above, which paints over it. The 1px overhang
   stops the tile's own gradient showing as a hairline where the rounded corners
   are antialiased and the tile height lands on a fractional pixel. */
.tallvid{position:absolute;inset:-1px;z-index:0;overflow:hidden}
.tallvid__v,.tallvid__fb{position:absolute;inset:0;width:100%;height:100%}
.tallvid__v{object-fit:cover;display:none}
.tallvid.playing .tallvid__v{display:block}
.tallvid.playing .tallvid__fb{display:none}
/* Placeholder art sits in the top half — the half the scrim leaves visible —
   rather than being stretched to a shape it was never drawn for. */
.tallvid__fb svg{width:100%;height:auto;aspect-ratio:200/130;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%)}
.tallvid__fb--mark{display:grid;place-items:center;align-content:start;padding-top:14%;color:rgba(255,255,255,.9)}
.tallvid__fb--mark svg{width:38%;height:auto;aspect-ratio:1;max-width:150px}
.has-js .tv-clouds{animation:tvdrift 9s ease-in-out infinite alternate}
.has-js .tv-device{animation:tvfloat 4.4s ease-in-out infinite;transform-origin:100px 63px}
.has-js .tv-play{animation:tvpulse 2.4s ease-out infinite;transform-origin:100px 63px}
.has-js .tv-dot{animation:tvbob 3.6s ease-in-out infinite}
.has-js .tv-dot--2{animation-delay:.7s}
.has-js .tv-dot--3{animation-delay:1.4s}
@keyframes tvdrift{from{transform:translateX(-6px)}to{transform:translateX(10px)}}
@keyframes tvfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes tvpulse{0%{transform:scale(1);opacity:1}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes tvbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.tile--tall__body .big{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,2rem + 4vw,4.6rem);line-height:.95}
.tile--tall__body p{color:#fff;margin-top:.6rem}
.tile--teal{background:#E7FAF7;border-color:#C4F0EA}
.tile--pink{background:#FDEFF5;border-color:#F9D6E4}
.tile--sky{background:#E9F5FE;border-color:#CBE6F8}
/* Lottie slots: the inline SVG is the placeholder. Drop the matching .json into
   assets/lottie/ and wire a player — markup and sizing are already in place. */
.lottie{display:grid;place-items:center;width:100%;height:100%}
.lottie>svg{width:26px;height:26px}

.worksec{background:linear-gradient(175deg,var(--drench-1),var(--drench-2) 55%,var(--drench-3));color:#fff;position:relative;box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 #fff}
.worksec .sec__head p{color:#fff}
/* portrait sits on the page with no card behind it. NOTE: the "Sam Gregory"
   label baked into this PNG is white handwriting on transparency, so it is
   invisible against the white background — deliberate for now, Sam is replacing
   the image with a version that works on light. Don't "fix" it with a panel. */
.story__side.story__side--portrait{background:none;padding:0;border-radius:0;display:grid;place-items:center}
.story__side--portrait img{width:100%;max-width:400px;height:auto;display:block}
@media (max-width:860px){.story__side--portrait img{max-width:320px}}
.work__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem}
/* five cards: centre the orphan pair on the second row */
.work__grid--5{grid-template-columns:repeat(6,1fr)}
.work__grid--5>*{grid-column:span 2}
.work__grid--5>:nth-child(4){grid-column:2/span 2}
.work__grid--5>:nth-child(5){grid-column:4/span 2}
@media (max-width:960px){.work__grid--5{grid-template-columns:repeat(4,1fr)}.work__grid--5>:nth-child(4){grid-column:1/span 2}.work__grid--5>:nth-child(5){grid-column:2/span 2}}
@media (max-width:620px){.work__grid--5{grid-template-columns:1fr}.work__grid--5>*{grid-column:auto!important}}
.vcard{position:relative;border-radius:var(--r-lg);overflow:hidden;display:block;aspect-ratio:16/10;border:5px solid #fff;box-shadow:0 16px 34px -14px rgba(6,45,85,.45);transition:transform .35s var(--ease),box-shadow .35s var(--ease);background:linear-gradient(140deg,#4FB2EE,#1B84CE)}
.vcard:hover{transform:translateY(-7px) rotate(-.6deg);box-shadow:0 30px 54px -18px rgba(4,38,72,.55)}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vcard:hover img{transform:scale(1.05)}
.vcard.noimg img{display:none}
.vcard__fall{position:absolute;inset:0;display:none;place-items:center;font-family:var(--f-display);font-weight:800;font-size:2rem;color:rgba(255,255,255,.9)}
.vcard.noimg .vcard__fall{display:grid}
.vcard__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,35,64,.94) 0%,rgba(7,35,64,.78) 26%,rgba(7,35,64,.34) 52%,transparent 78%)}
.vcard__meta{position:absolute;left:0;right:0;bottom:0;padding:1.15rem 1.25rem;color:#fff;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem}
.vcard__client{font-family:var(--f-display);font-weight:800;font-size:1.3rem;line-height:1.1}
.vcard__type{font-size:.88rem;color:#D8E9F7;font-weight:600;margin-top:.15rem}
.vcard__play{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .3s var(--ease-back);box-shadow:var(--shadow-sm)}
.vcard:hover .vcard__play{transform:scale(1.14)}
.vcard__play svg{width:18px;height:18px;fill:var(--blue-txt)}
.vcard--flat{cursor:default}
.vcard--flat:hover{transform:none;box-shadow:0 16px 34px -14px rgba(6,45,85,.45)}
.vcard--flat:hover img{transform:none}
.work__cta{text-align:center;margin-top:2.6rem}

.whysec{background:var(--tint);border-radius:var(--r-xl);margin:1.2rem}
.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem 1.6rem}
.feat{display:flex;gap:1rem;padding:1.25rem;border-radius:var(--r-lg);transition:background .25s,box-shadow .25s}
.feat:hover{background:#fff;box-shadow:var(--shadow-md)}
.feat__n{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-sm)}
.feat__n svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feat__n--sun svg{stroke:var(--ink)}
.feat h3{font-size:1.22rem;margin-bottom:.25rem}
.feat p{color:var(--ink-2);font-size:1rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;position:relative}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:calc(1.7rem + 22px);height:3px;border-radius:100px;background:linear-gradient(90deg,var(--sky),var(--teal) 34%,var(--pink) 67%,var(--sun));transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .12s;z-index:0}
.steps.in::before{transform:scaleX(1)}
html:not(.has-js) .steps::before{transform:scaleX(1);transition:none}
@media (max-width:980px){.steps::before{display:none}}
.step{position:relative;z-index:1;padding:1.7rem 1.5rem;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.step__n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.3rem;margin-bottom:.9rem;box-shadow:0 8px 16px -6px rgba(47,159,230,.55)}
.step:nth-child(2) .step__n{background:var(--teal);box-shadow:0 8px 16px -6px rgba(53,196,190,.55)}
.step:nth-child(3) .step__n{background:var(--pink);box-shadow:0 8px 16px -6px rgba(232,68,124,.5)}
.step:nth-child(4) .step__n{background:var(--sun);color:var(--ink);box-shadow:0 8px 16px -6px rgba(255,195,60,.55)}
.step h3{font-size:1.28rem;margin-bottom:.35rem}
.step p{color:var(--ink-2);font-size:.98rem}

.quotes{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;grid-auto-rows:1fr}
.quotes>*{grid-column:span 2}
/* five quotes: centre the orphan pair on the second row */
.quotes>:nth-child(4):nth-last-child(2){grid-column:2/span 2}
.quotes>:nth-child(5):last-child{grid-column:4/span 2}
.quote{margin:0;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.quote__stars{display:flex;gap:3px;margin-bottom:.7rem}
.quote__stars svg{width:16px;height:16px;fill:#E8A912}
.quote p{font-size:1.04rem;line-height:1.6}
.quote__by{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:auto;padding-top:1.1rem}
.quote__by b{display:block;font-size:.95rem}
.quote__by small{color:var(--ink-2)}
.quote__g{font-size:.78rem;font-weight:700;color:var(--ink-2);border:1.5px solid var(--line);border-radius:100px;padding:.22rem .6rem;white-space:nowrap}

.pricesec{background:linear-gradient(172deg,var(--drench-1),var(--drench-2) 50%,var(--drench-3));color:#fff;position:relative;box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 #fff}
.price__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,1rem + 2.5vw,2.8rem);align-items:stretch}
.pcard{background:#fff;color:var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column}
.pcard__top{background:linear-gradient(150deg,var(--drench-2),var(--drench-3));color:#fff;text-align:center;padding:1.9rem 1.5rem 2.4rem;position:relative}
.pcard__top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px;background:#fff;clip-path:ellipse(58% 100% at 50% 100%)}
.pcard__from{font-weight:700;font-size:1rem}
.pcard__amt{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,2.4rem + 2.4vw,4.2rem);line-height:1;margin:.15rem 0}
.pcard__per{font-family:var(--f-display);font-weight:700;font-size:1.25rem}
.pcard__body{padding:1.6rem 1.8rem 1.9rem;display:flex;flex-direction:column;gap:1.2rem;flex:1}
.pcard__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.65rem .9rem}
.pcard__list li{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.98rem}
.pcard__list svg{width:19px;height:19px;flex:none;fill:var(--teal-deep)}
.pcard__minis{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.pcard__mini{border:1.5px solid var(--line);border-radius:14px;padding:.85rem 1rem;text-align:left;background:#fff;font:inherit;color:inherit;display:block;width:100%}
button.pcard__mini{cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease-back)}
button.pcard__mini:hover{border-color:var(--sky);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.pcard__swap{display:block;margin-top:.35rem;font-family:var(--f-display);font-weight:700;font-size:.82rem;color:var(--blue-deep)}
button.pcard__mini:hover .pcard__swap{text-decoration:underline}
.pcard__mini b{font-family:var(--f-display);font-weight:700;font-size:.98rem;display:block}
.pcard__mini span{color:var(--ink-2);font-size:.86rem}
.pcard__mini .mp{font-family:var(--f-display);font-weight:800;color:var(--blue-deep);font-size:1.15rem;display:block;margin-top:.15rem}
.pcard__note{color:var(--ink-2);font-size:.95rem;border-top:1.5px solid var(--line);padding-top:1.1rem;margin-top:auto}
.pcard__note b{color:var(--ink)}

.form{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);box-shadow:var(--shadow-lg)}
.form h3{font-size:1.55rem;margin-bottom:.3rem}
.form>p{color:var(--ink-2);margin-bottom:1.6rem;font-size:.98rem}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:2px solid var(--line);border-radius:14px;font-family:inherit;font-size:1rem;color:var(--ink);background:#FAFDFF;transition:border-color .2s,box-shadow .2s;caret-color:var(--blue-txt)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(47,159,230,.16)}
.field input::placeholder,.field textarea::placeholder{color:#6B7C8C}
.form .btn{width:100%;margin-top:.4rem}
.form__note{text-align:center;font-size:.85rem;color:var(--ink-2);margin-top:.9rem}
.form__ok{display:none;text-align:center;padding:1.2rem 0}
.form__ok.show{display:block;animation:pop .5s var(--ease-back)}
.form__ok .tick{width:66px;height:66px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin:0 auto 1rem}
.form__ok .tick svg{width:34px;height:34px;fill:#fff}
.form__err{margin-top:1rem;padding:.85rem 1.05rem;border-radius:var(--r-md);background:#FDE7E7;color:#93231F;font-size:.94rem;line-height:1.5}
.form__err p{margin:0;color:inherit}
.form__err a{color:inherit;text-decoration:underline}
/* honeypot: off-screen, never focusable, never announced. Bots fill it, people don't. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.price__talk{margin-top:1.6rem;color:#fff;text-align:center;grid-column:1/-1}
.price__talk a{color:#fff;font-weight:700;border-bottom:2.5px solid var(--sun)}

.footer{padding:clamp(3rem,2.2rem + 2.5vw,4.5rem) 0 2.4rem;background:#fff;border-top:1.5px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:2rem}
.footer h4{font-size:1.05rem;margin-bottom:1rem}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.footer a{color:var(--ink-2);transition:color .2s}
.footer a:hover{color:var(--blue-txt)}
.footer__blurb{color:var(--ink-2);margin-top:.9rem;max-width:34ch}
.footer__social{display:flex;gap:.6rem;margin-top:1.2rem}
.footer__social a{width:42px;height:42px;border-radius:13px;background:var(--tint);display:grid;place-items:center;transition:transform .25s var(--ease-back),background .2s}
.footer__social a:hover{transform:translateY(-3px);background:#E2F2FF}
.footer__social svg{width:20px;height:20px;fill:var(--blue-txt)}
.footer__bottom{margin-top:2.8rem;padding-top:1.6rem;border-top:1.5px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--ink-2);font-size:.9rem}
.contact-row{display:flex;align-items:center;gap:.55rem;color:var(--ink-2)}
.contact-row svg{width:16px;height:16px;fill:var(--blue-txt);flex:none}

dialog.modal{border:none;padding:0;border-radius:var(--r-lg);max-width:min(880px,92vw);width:100%;background:transparent;overflow:visible}
dialog.modal::backdrop{background:rgba(6,38,68,.75);backdrop-filter:blur(6px)}
.modal__box{background:#0B2B4A;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.modal__video{aspect-ratio:16/9;position:relative;display:grid;place-items:center;color:#fff;background:radial-gradient(80% 80% at 50% 40%,#155E9C,#0B2B4A)}
.modal__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.modal__ph{text-align:center;padding:1rem}
.modal__video p{max-width:36ch;text-align:center;color:#BFD9EF;padding:1rem}
.modal__video .ph{font-family:var(--f-display);font-weight:800;font-size:1.4rem;margin-bottom:.4rem}
.modal__close{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;background:#fff;border:none;cursor:pointer;box-shadow:var(--shadow-md);display:grid;place-items:center;z-index:2}
.modal__close svg{width:20px;height:20px;fill:var(--ink)}

.has-js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.has-js .reveal.in{opacity:1;transform:none}
.has-js [data-stagger]>*{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.has-js [data-stagger]:not(.in)>*{opacity:0;transform:translateY(18px)}
.has-js [data-stagger].in>*{opacity:1;transform:none}

@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .deck{margin:1.4rem auto 0;max-width:480px}
  .price__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:repeat(4,1fr)}
  .quotes>:nth-child(4):nth-last-child(2){grid-column:1/span 2}
  .quotes>:nth-child(5):last-child{grid-column:2/span 2}
  .footer__grid{grid-template-columns:1fr 1fr}
}
/* Six top-level items including two dropdowns no longer fit a tablet bar,
   so the burger takes over at 900px. Below that the Get Pricing button moves inside
   the menu, leaving the collapsed bar as just the logo and the burger — which gives
   the burger the whole right-hand side instead of squeezing it past a button. */
@media (max-width:900px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:grid;place-items:center;margin-left:auto}
  /* beats .nav__links a, which is more specific than .btn on its own */
  /* order:-1 floats it to the top of the column. On a small phone the menu scrolls,
     and the primary action should not be the thing you have to scroll for. */
  .nav__links a.nav__mobilecta{order:-1;display:inline-flex;margin-bottom:.5rem;color:#fff;background:var(--blue-txt);padding:.95rem 1.7rem;border-radius:var(--r-md);font-family:var(--f-display);font-size:1.06rem;justify-content:center}
  .nav__links a.nav__mobilecta:hover{color:#fff;background:var(--blue-deep)}
  /* The open menu is capped to the viewport and scrolls inside itself. Without this it
     runs off the bottom of a smaller phone and Contact becomes unreachable. */
  .nav__menu-open .nav__links{display:flex;flex-direction:column;position:fixed;inset:70px 1rem auto 1rem;z-index:var(--z-nav-menu);background:#fff;padding:1rem;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);gap:.2rem;max-height:calc(100vh - 86px);max-height:calc(100dvh - 86px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .nav__drop{display:block}
  .nav__droptop{width:100%}
  .nav__caret{display:none}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;margin:.1rem 0 .25rem .8rem;padding:0 0 0 .8rem;min-width:0;border:none;border-left:2px solid var(--line);border-radius:0;box-shadow:none}
  .nav__sub::before{display:none}
}
@media (max-width:720px){
  .quotes{grid-template-columns:1fr}
  .quotes>*{grid-column:auto!important}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
  .pcard__list{grid-template-columns:1fr}
  .pcard__minis{grid-template-columns:1fr}
}
/* On a phone the hero's two columns have collapsed to one, and left-aligned text
   under a centred stack of full-width buttons reads as unbalanced. Centring the whole
   block settles it. Desktop and tablet keep the original left alignment. */
@media (max-width:720px){
  .hero__grid > div:first-child{text-align:center}
  /* the script line is rotated 1.5deg off a left origin; centre the pivot too, or it
     sits visibly off-axis once the text is centred */
  .hero h1 .h1s{transform-origin:center}
  .hero__sub{margin-inline:auto}
  .hero__cta{justify-content:center}
  .chips{justify-content:center}
}
@media (max-width:520px){
  .hero__cta .btn{flex:1 1 100%}
  .deck{width:86%}
}
@media (max-width:400px){
  .hero h1 .h1s{white-space:normal}
}
@media (max-width:460px){
  .steps{grid-template-columns:1fr}
}
@media (max-width:860px){
  .bento{grid-template-columns:1fr}
  /* Uncapped, a full-width portrait tile would be over 1200px tall on a tablet. */
  .tile--tall{max-width:420px;margin-inline:auto;aspect-ratio:2/3}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,[data-stagger]>*,.chip{opacity:1!important;transform:none!important}
}

/* ============ SUB-PAGES ============ */
.page[hidden]{display:none}
.nav__links a[aria-current="page"]{color:var(--blue-txt);background:var(--tint)}
.phead{background:linear-gradient(168deg,var(--drench-1) 0%,var(--drench-2) 60%,var(--drench-3) 100%);color:#fff;box-shadow:inset 0 -2px 0 #fff}
/* Sub-page headers are centred and generous. The homepage hero is .hero, a
   separate component, and is deliberately left-aligned — don't fold them together. */
.phead__pad{padding:clamp(3.4rem,2.6rem + 3vw,5.4rem) 0 clamp(2.8rem,2.1rem + 2.6vw,4.4rem);text-align:center}
.phead h1{color:#fff;font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem);margin-inline:auto;max-width:26ch}
.phead p{color:#fff;margin:1rem auto 0;max-width:56ch;font-size:1.08rem}
.work__grid--page .vcard{box-shadow:var(--shadow-md)}
.reelbanner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:2rem;background:linear-gradient(160deg,var(--drench-1),var(--drench-3));color:#fff;border-radius:var(--r-lg);padding:1.8rem 2rem;box-shadow:var(--shadow-md)}
.reelbanner h3{color:#fff;font-size:1.45rem}
.reelbanner>div{flex:1 1 20rem}
.reelbanner__shot{flex:0 0 13rem;aspect-ratio:16/9;border-radius:var(--r-md,12px);overflow:hidden;position:relative;padding:0;border:0;background:rgba(255,255,255,.12);cursor:pointer;display:block}
.reelbanner__shot img{width:100%;height:100%;object-fit:cover;display:block}
.reelbanner__shot .fall{display:none}.reelbanner__shot.noimg .fall{display:grid;place-items:center;position:absolute;inset:0;color:#fff;font-weight:700}
.reelbanner__shot .vcard__play{position:absolute;inset:0;margin:auto;width:3rem;height:3rem}
@media (max-width:600px){.reelbanner__shot{flex-basis:100%}}
.reelbanner p{color:#fff;margin-top:.3rem;max-width:44ch}
.pagenote{margin-top:1.6rem;color:var(--ink-2);font-size:.95rem}
.pagenote a{color:var(--blue-deep);font-weight:700;border-bottom:2px solid rgba(15,108,181,.3)}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,1.2rem + 2vw,3rem);align-items:center;padding:clamp(1.8rem,1.4rem + 1.5vw,2.6rem) 0;border-top:1.5px solid var(--line)}
.svc:first-of-type{border-top:none}
.svc--flip .svc__shot{order:2}
.svc h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:.6rem}
.svc>div>p{color:var(--ink-2)}
.svc__shot{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;border:5px solid #fff;box-shadow:var(--shadow-md);background:linear-gradient(140deg,#4FB2EE,#1B84CE)}
.svc__shot img{width:100%;height:100%;object-fit:cover}
.svc__shot.noimg img{display:none}
.svc__shot .fall{position:absolute;inset:0;display:none;place-items:center;font-family:var(--f-display);font-weight:800;font-size:1.6rem;color:rgba(255,255,255,.92)}
.svc__shot.noimg .fall{display:grid}
.svc__list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.svc__list li{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.98rem}
.svc__list svg{width:18px;height:18px;flex:none;fill:var(--teal-deep)}
.svc__price{margin:1rem 0 1.2rem;font-weight:600;color:var(--ink-2)}
.svc__price b{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--ink)}
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pkg{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.pkg__top{padding:1.5rem 1.6rem;background:linear-gradient(150deg,var(--drench-2),var(--drench-3));color:#fff}
.pkg__top--sun{background:var(--sun);color:#2A2413}
.pkg__top--pink{background:linear-gradient(150deg,#D6336B,#B8285A);color:#fff}
.pkg__top b{font-family:var(--f-display);font-weight:700;font-size:1.08rem;display:block}
.pkg__amt{font-family:var(--f-display);font-weight:800;font-size:2.1rem;line-height:1.1;display:block;margin-top:.3rem}
.pkg__per{font-weight:600;font-size:.92rem;opacity:.85;display:block}
.pkg ul{list-style:none;margin:0;padding:1.3rem 1.6rem 1.5rem;display:grid;gap:.55rem}
.pkg li{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem}
.pkg li svg{width:17px;height:17px;flex:none;fill:var(--teal-deep)}
.howworks{max-width:70ch;margin:2.6rem auto 0}
.howworks h2{font-size:1.6rem;margin-bottom:.7rem}
.howworks p{color:var(--ink-2);margin-top:.7rem}
.howworks p b{color:var(--ink)}
/* long-form article column — the three retained blog posts and the video
   marketing guide. Prose only; everything else on those pages is existing kit. */
.article{max-width:70ch;margin-inline:auto}
.article h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);margin:2.4rem 0 .2rem}
.article h3{font-size:1.18rem;margin:1.7rem 0 .1rem}
.article p{color:var(--ink-2);margin-top:.9rem}
.article ul,.article ol{color:var(--ink-2);margin:.9rem 0 0;padding-left:1.3rem}
.article li{margin-top:.4rem}
/* comparison table inside an article; scrolls rather than squashing on mobile */
.ctable__wrap{overflow-x:auto;margin-top:1.2rem;border:1.5px solid var(--line);border-radius:var(--r-md)}
.ctable{width:100%;border-collapse:collapse;font-size:.95rem;min-width:34rem}
.ctable th{text-align:left;padding:.75rem .9rem;background:var(--tint);color:var(--ink);font-family:var(--f-display);font-weight:700;border-bottom:1.5px solid var(--line)}
.ctable td{padding:.7rem .9rem;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.ctable tr:last-child td{border-bottom:none}
.ctable td:first-child{font-weight:700;color:var(--ink)}
/* copyable snippet — straight quotes matter, After Effects rejects smart ones */
.codeblock{margin-top:1rem;padding:1rem 1.1rem;background:#0B2B4A;color:#DCEBFA;border-radius:var(--r-md);overflow-x:auto}
.codeblock code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.article__hero{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);margin-bottom:1.6rem}
.article__lead{font-size:1.1rem;color:var(--ink)}
.byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .9rem;margin-top:1.2rem;color:#fff;font-size:.95rem}
.byline b{font-weight:700}
.byline span{opacity:.75}
.pagecta{text-align:center;margin-top:2.6rem}
.pagecta p{color:var(--ink-2);margin-top:.7rem;font-size:.95rem}
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1.4rem + 2.5vw,3.5rem);align-items:start}
.contactgrid h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.contactlist{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.8rem}
.contactlist li{display:flex;align-items:center;gap:.65rem;font-weight:600}
.contactlist svg{width:18px;height:18px;fill:var(--blue-txt);flex:none}
.contactlist a{color:var(--blue-deep);font-weight:700}
@media (max-width:960px){
  .svc{grid-template-columns:1fr}
  .svc--flip .svc__shot{order:0}
  .pkgs{grid-template-columns:1fr}
  .contactgrid{grid-template-columns:1fr}
}

/* ============ EXPANDED PAGE COMPONENTS ============ */
.phead__jump{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.6rem}
.phead__jump a{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.35);color:#fff;font-weight:600;font-size:.94rem;padding:.45rem 1rem;border-radius:100px;transition:background .2s,transform .2s var(--ease-back)}
.phead__jump a:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
/* split header: copy on the left, a picture on the right. Overrides the centred
   default, so it only applies where .phead--split is on the section. */
.phead--split .phead__pad{text-align:left}
.phead--split .phead__pad{padding-bottom:clamp(1.6rem,1.2rem + 1.2vw,2.4rem)}
.phead__split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);align-items:center}
.phead--split h1{margin-inline:0;max-width:16ch}
.phead--split p{margin:1.1rem 0 0}
.phead__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.phead__photo img{width:100%;max-width:440px;height:auto;display:block;margin-inline:auto}
/* the running total sits inside the header, under the copy and the picture —
   it fills the band and saves a thin white strip between two blue sections */
.phead__tally{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.6rem 0 .4rem;border-top:1px solid rgba(255,255,255,.28);text-align:center}
.phead__tally b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,1.5rem + 1.8vw,2.9rem);line-height:1;color:#fff;letter-spacing:-.02em}
.phead__tally span{display:block;margin-top:.3rem;color:rgba(255,255,255,.88);font-weight:600;font-size:.98rem}
@media (max-width:860px){
  .phead__split{grid-template-columns:1fr;gap:1.6rem}
  .phead--split .phead__pad{text-align:center}
  .phead--split h1{margin-inline:auto}
  .phead__cta{justify-content:center}
  .phead__photo{order:-1}
  .phead__photo img{max-width:320px}
}
.vcard__note{font-size:.88rem;margin-top:.4rem;max-width:38ch}
.vcard--stack{aspect-ratio:auto;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.vcard--stack img{position:relative;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.vcard--stack .vcard__grad{display:none}
.vcard--stack .vcard__fall{position:relative;aspect-ratio:16/10;display:none;place-items:center;background:linear-gradient(140deg,#4FB2EE,#1B84CE)}
.vcard--stack.noimg .vcard__fall{display:grid}
.vcard--stack .vcard__meta{position:relative;padding:1rem 1.15rem 1.15rem;color:var(--ink);align-items:flex-start}
.vcard--stack .vcard__client{color:var(--ink)}
.vcard--stack .vcard__type{color:var(--blue-deep);font-weight:700}
.vcard--stack .vcard__note{color:var(--ink-2)}
.vcard--stack .vcard__play{background:var(--tint);box-shadow:none}
.vcard--stack .vcard__play svg{fill:var(--blue-txt)}
.vcard--stack:hover .vcard__play{background:var(--sun)}
.vcard--stack:hover .vcard__play svg{fill:#2A2413}
.filterempty{margin-top:1.4rem;color:var(--ink-2)}
.linkbtn{background:none;border:none;padding:0;font:inherit;color:var(--blue-deep);font-weight:700;cursor:pointer;border-bottom:2px solid rgba(15,108,181,.35)}
.svc__cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.4rem}
.svc__price a{color:var(--blue-deep);border-bottom:2px solid rgba(15,108,181,.3)}
.btn--soft{background:var(--tint);color:var(--blue-deep);border:2px solid var(--line)}
.btn--soft:hover{border-color:var(--sky)}
.svc__best{margin-top:1.1rem;padding-top:1rem;border-top:1.5px solid var(--line);color:var(--ink-2);font-size:.96rem}
.svc__best b{color:var(--ink)}
/* migrated service pages run several paragraphs per block; the reset zeroes p margins */
.svc>div>p + p{margin-top:.8rem}
.incgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
/* 3-up variant for migrated pages whose feature lists come in threes and sixes */
.incgrid--3{grid-template-columns:repeat(3,1fr)}
.inc{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--shadow-sm)}
.inc__ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:.9rem}
.inc__ico svg{width:23px;height:23px}
.inc h3{font-size:1.14rem;margin-bottom:.3rem}
.inc p{color:var(--ink-2);font-size:.95rem}
/* social format tiles: looping MP4s at their native feed aspect ratios.
   Same show-on-load mechanism as .tallvid, so a missing file leaves the
   branded tile and its label rather than a black box. */
.socialgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:start}
.socialvid{position:relative;border-radius:var(--r-lg);overflow:hidden;border:5px solid #fff;box-shadow:var(--shadow-md);background:linear-gradient(140deg,#4FB2EE,#1B84CE)}
.socialvid--916{aspect-ratio:9/16;width:100%;max-width:320px;margin-inline:auto}
.socialvid--11{aspect-ratio:1/1}
.socialvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.socialvid.playing video{display:block}
.socialvid .fall{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem;color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.15rem}
.socialvid.playing .fall{display:none}
.socialpair{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(1.6rem,1.2rem + 2vw,3rem);align-items:center}
@media (max-width:860px){.socialgrid{grid-template-columns:1fr 1fr}.socialpair{grid-template-columns:1fr}.socialpair .socialvid{max-width:300px}}
@media (max-width:560px){.socialgrid{grid-template-columns:1fr}}
.sectorlist{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.sector{background:var(--tint);border-radius:var(--r-lg);padding:1.5rem 1.6rem}
.sector h3{font-size:1.18rem;margin-bottom:.3rem}
.sector p{color:var(--ink-2);font-size:.96rem}
.sector a{display:inline-block;margin-top:.7rem;font-weight:700;color:var(--blue-deep);border-bottom:2px solid rgba(15,108,181,.3)}
.sector a.btn{display:inline-flex;margin-top:0;border-bottom:0;color:#fff}
.sec--tint .sector{background:#fff;border:1.5px solid var(--line)}
.pkg__foot{padding:1.2rem 1.6rem 1.6rem;margin-top:auto}
.pkg__foot .btn{width:100%}
.estimator{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,1rem + 2vw,2.6rem);align-items:center;margin-top:2.4rem;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);box-shadow:var(--shadow-md)}
.estimator h2{font-size:1.5rem;margin-bottom:.3rem}
.estimator__intro{color:var(--ink-2);margin-bottom:1.2rem}
.est__row + .est__row{margin-top:1.3rem}
.segsm{border:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.segsm legend{font-weight:700;font-size:.9rem;margin-bottom:.45rem;padding:0}
.segsm label{position:relative;cursor:pointer}
.segsm input{position:absolute;opacity:0;inset:0}
.segsm span{display:block;text-align:center;padding:.65rem .5rem;border-radius:12px;border:2px solid var(--line);font-weight:700;font-size:.96rem;transition:border-color .2s,background .2s,color .2s}
.segsm small{display:block;font-weight:600;font-size:.82rem;color:var(--ink-2)}
.segsm input:checked + span{border-color:var(--blue-txt);background:var(--tint);color:var(--blue-deep)}
.segsm input:focus-visible + span{outline:3px solid var(--blue-txt);outline-offset:2px}
.est__lab{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:.94rem}
.est__lab output{font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--blue-deep)}
.estimator input[type=range]{width:100%;margin-top:.6rem;appearance:none;-webkit-appearance:none;height:26px;background:transparent;cursor:pointer}
.estimator input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:100px;background:var(--line)}
.estimator input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8.5px;border-radius:50%;background:var(--blue-txt);border:none;box-shadow:0 4px 12px rgba(22,135,217,.45)}
.estimator input[type=range]::-moz-range-track{height:7px;border-radius:100px;background:var(--line)}
.estimator input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--blue-txt);border:none}
.estimator input[type=range]:focus-visible{outline:3px solid var(--blue-txt);outline-offset:4px;border-radius:100px}
.est__scale{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-top:.2rem}
.est__out{background:linear-gradient(160deg,var(--drench-1),var(--drench-3));color:#fff;border-radius:var(--r-lg);padding:1.6rem;text-align:center}
.est__label{font-weight:700;font-size:.9rem;color:#fff;display:block}
.est__price{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,2rem + 1.8vw,3.2rem);line-height:1.1;display:block;font-feature-settings:"tnum"}
.est__out p{color:#fff;font-size:.88rem;margin:.5rem 0 1.1rem}
.est__out .btn{width:100%}
.faq{display:grid;gap:.7rem;max-width:72ch}
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:.95rem 1.2rem;box-shadow:var(--shadow-sm)}
.faq summary{font-family:var(--f-display);font-weight:700;font-size:1.04rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--blue-txt);flex:none;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-2);margin-top:.6rem;font-size:.97rem}
.faq--tight{margin-top:1.8rem}
.story{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.6rem,1.2rem + 2vw,3rem);align-items:start}
.story__side--portrait{align-self:center}
.story--solo{grid-template-columns:1fr}
.story__main h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem);margin-bottom:.7rem}
.story__main p{color:var(--ink-2);margin-top:.8rem;max-width:62ch}
.story__side{background:var(--tint);border-radius:var(--r-lg);padding:1.6rem}
.story__side h3{font-size:1.15rem;margin-bottom:1rem}
.story__side ul{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.8rem}
.story__side li{display:grid;gap:.1rem}
.story__side b{font-family:var(--f-display);font-weight:700;font-size:.92rem;color:var(--blue-deep)}
.story__side span{color:var(--ink-2);font-size:.94rem}
.story__side .btn{width:100%}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.value{background:var(--tint);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem}
.value:nth-child(2){background:#E7FAF7;border-color:#C4F0EA}
.value:nth-child(3){background:#FDEFF5;border-color:#F9D6E4}
.value:nth-child(4){background:#FFF6E2;border-color:#FBE6B8}
.value h3{font-size:1.14rem;margin-bottom:.3rem}
.value p{color:var(--ink-2);font-size:.95rem}
.workwith{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.4rem,1rem + 2vw,2.6rem);align-items:center;margin-top:3.4rem;background:var(--tint);border-radius:var(--r-xl);padding:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.workwith h2{font-size:1.6rem;margin-bottom:.5rem}
.workwith p{color:var(--ink-2)}
.logolist{display:flex;flex-wrap:wrap;gap:.6rem}
.logolist span{background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:.5rem 1.1rem;font-family:var(--f-display);font-weight:700;color:#5A6C7D;font-size:.98rem}
.expect{margin-top:2.2rem;background:var(--tint);border-radius:var(--r-lg);padding:1.5rem 1.6rem}
.expect h3{font-size:1.15rem;margin-bottom:1rem}
.expect ol{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.expect li{display:flex;gap:.9rem;align-items:flex-start}
.expect li>span{flex:none;width:32px;height:32px;border-radius:50%;background:var(--blue-txt);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:.95rem}
.expect b{display:block;font-size:.98rem}
.expect p{color:var(--ink-2);font-size:.93rem;margin-top:.15rem}
.opt{color:var(--ink-2);font-weight:400}
@media (max-width:1080px){
  .incgrid{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .estimator{grid-template-columns:1fr}
  .story{grid-template-columns:1fr}
  .workwith{grid-template-columns:1fr}
  .sectorlist{grid-template-columns:1fr}
}
@media (max-width:640px){
  .incgrid,.values{grid-template-columns:1fr}
  .segsm{grid-template-columns:1fr}
}


/* ============ LIGHT PAGE HEADER (.lhead) ============
   Every page except the homepage now opens on white instead of a drench band.
   The colour moves into the panel on the right, and a tinted proof strip closes
   the header off where the wave used to. .phead and its wave stay in the sheet
   only because the homepage hero shares the wave symbol — no page uses .phead. */
.lhead{background:#fff;color:var(--ink)}
.lhead__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,1.2rem + 3vw,3.4rem);align-items:center;padding-block:clamp(2.6rem,1.9rem + 3vw,4.4rem)}
.lhead__eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--tint);border:1.5px solid var(--line);color:var(--blue-txt);border-radius:100px;padding:.42rem 1rem;font-weight:700;font-size:.9rem}
.lhead h1{margin:1.2rem 0 0;font-size:clamp(2.1rem,1.35rem + 2.7vw,3.15rem)}
.lhead h1 .h1t{display:block}
.lhead h1 .h1s{display:block;font-family:var(--f-script);font-weight:400;font-size:clamp(1.5rem,.65rem + 2.2vw,2.6rem);line-height:1.25;letter-spacing:0;color:var(--blue-txt);margin-top:.3rem;transform:rotate(-1.5deg);transform-origin:left center}
.lhead__sub{margin:1.4rem 0 0;font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.65;max-width:46ch;color:var(--ink-2)}
.lhead__ticks{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.7rem}
.lhead__ticks li{display:flex;align-items:center;gap:.65rem;font-weight:600;font-size:1rem}
.lhead__ticks i{width:22px;height:22px;border-radius:50%;background:var(--teal);display:grid;place-items:center;flex:none}
.lhead__ticks svg{width:12px;height:12px;fill:#fff}
.lhead__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
/* the jump pills were built for a blue field; on white they take the soft treatment */
.lhead .phead__jump{justify-content:flex-start;margin-top:1.6rem}
.lhead .phead__jump a{background:var(--tint);border:1.5px solid var(--line);color:var(--blue-deep)}
.lhead .phead__jump a:hover{background:var(--social-hover,#E2F2FF);border-color:#CBE6F8}
/* soft button — the light-background counterpart to btn--ghostblue */
.btn--soft{background:var(--tint);color:var(--blue-deep);border:2px solid var(--line)}
.btn--soft:hover{border-color:var(--sky);background:#E9F5FE}

.lpanel{position:relative;background:linear-gradient(165deg,#2A97D8 0%,var(--drench-1) 26%,var(--drench-2) 46%,#093F6C 100%);border-radius:var(--r-xl);padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);color:#fff;box-shadow:0 30px 60px -24px rgba(6,40,72,.5);overflow:hidden}
.lpanel__spark{position:absolute;top:22px;right:24px;width:20px;height:20px;pointer-events:none;z-index:2}
.lpanel__spark svg{display:block;width:100%;height:100%;fill:#fff}
.has-js .lpanel__spark{animation:twinkle 4.5s var(--ease) infinite}
.lpanel__shot{position:relative;border:5px solid #fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 22px 44px -18px rgba(6,40,72,.6);background:linear-gradient(140deg,#4FB2EE,#1B84CE)}
.lpanel__shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.lpanel__shot .fall{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:1rem;color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.5rem}
.lpanel__shot.noimg img{display:none}
.lpanel__shot.noimg .fall{display:grid}
.lpanel__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.6rem}
.lpanel__stat{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.28);border-radius:var(--r-md);padding:.9rem}
.lpanel__stat b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.4rem;line-height:1}
.lpanel__stat span{display:block;font-size:.85rem;color:rgba(255,255,255,.85);margin-top:.2rem}

.lhead__proof{background:var(--tint);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.lhead__proof__in{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding-block:1.1rem;font-size:.95rem;color:var(--ink-2)}
.lhead__proof b{color:var(--ink)}
.lhead + .sec{padding-top:clamp(2.6rem,2rem + 2vw,4rem)}
/* a white header leaves the white nav with no edge to sit on */
.nav--onlight{border-bottom:1.5px solid var(--line)}

/* plain variant: articles and the privacy page, where a sales panel would be wrong */
.lhead--plain .lhead__grid{grid-template-columns:1fr;text-align:center;justify-items:center;padding-block:clamp(2.6rem,2rem + 2.4vw,4rem)}
.lhead--plain .lhead__sub{margin-inline:auto;max-width:62ch}
.lhead--plain .phead__jump{justify-content:center}
.lhead--plain + .sec{padding-top:clamp(1.4rem,1rem + 1.4vw,2.4rem)}

/* centred variant: one column, no panel, no proof strip. The header is white and
   the band below it carries the tint, so the seam between the two is the divider. */
.lhead--centred .lhead__grid{grid-template-columns:1fr;justify-items:center;text-align:center;padding-block:clamp(3rem,2.2rem + 3.2vw,5rem)}
.lhead--centred .lhead__copy{max-width:54rem}
.lhead--centred h1 .h1s{transform-origin:center}
.lhead--centred .lhead__sub{margin-inline:auto;max-width:58ch}
.lhead--centred .lhead__ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1.7rem;margin-top:1.9rem}
.lhead--centred .lhead__cta{justify-content:center}
.lhead--centred .phead__jump{justify-content:center}

/* tinted band — the one tint, used to break the body away from a white header */
.sec--tint{background:var(--tint);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.lhead--centred + .sec--tint{padding-top:clamp(3rem,2.4rem + 2.4vw,4.6rem)}
/* where a tinted band meets a drenched one, the wave and its 2px seam bar must be
   tinted too, or a white wave silhouette shows against the band above it */
.sec--tint + .worksec{box-shadow:inset 0 2px 0 var(--tint),inset 0 -2px 0 #fff}
.sec--tint + .worksec > .wave{fill:var(--tint);background-image:linear-gradient(var(--tint),var(--tint))}

/* article and policy headers: no panel to begin with, so a hairline does the parting */
.lhead--plain{border-bottom:1.5px solid var(--line)}
.lhead__meta{margin:1rem 0 0;color:var(--ink-2);font-size:.98rem;font-weight:500}
.lhead__meta b{color:var(--ink);font-weight:700}

@media (max-width:900px){
  .lhead__grid{grid-template-columns:1fr;gap:1.8rem}
  .lhead__proof__in{flex-direction:column;align-items:flex-start;gap:.35rem}
}
@media (max-width:560px){
  .lpanel__stats{grid-template-columns:1fr 1fr}
  .lhead__cta .btn{flex:1 1 100%}
}

/* ============ COOKIE CONSENT ============
   Bottom-anchored rather than a full-screen blocker. Nothing is stored until a choice
   is made, so there is no need to hold the page hostage in order to get one — and a
   modal over the hero on a lead-generation site costs more than it earns. */
.cc{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:var(--z-modal);display:flex;justify-content:center;pointer-events:none}
.cc[hidden]{display:none}
.cc__inner{pointer-events:auto;width:min(100%,var(--maxw));background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:1.25rem 1.45rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.cc__copy{flex:1 1 22rem;min-width:0}
.cc__title{font-family:var(--f-display);font-weight:700;font-size:1.08rem;color:var(--ink);margin:0 0 .15rem}
.cc__text{color:var(--ink-2);font-size:.94rem;line-height:1.55;margin:0;max-width:76ch}
.cc__text a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px}
.cc__text a:hover{color:var(--sky-lo)}
.cc__actions{display:flex;gap:.6rem;flex:0 0 auto}
.cc__btn{font-size:.98rem;padding:.8rem 1.45rem}
.has-js .cc__inner{animation:ccRise .45s var(--ease) both}
@keyframes ccRise{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .cc{left:.65rem;right:.65rem;bottom:.65rem}
  .cc__inner{padding:1.1rem;gap:1rem}
  .cc__actions{width:100%}
  .cc__btn{flex:1 1 0;padding:.8rem .9rem}
}

/* Withdrawing consent has to be as easy as giving it, so this sits in every footer. */
.footer__cookies{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px;opacity:.85}
.footer__cookies:hover{opacity:1}

/* The menu and the consent bar are both overlays; showing them together buried the
   bottom of the menu (About, Contact) behind the bar on a phone. The class is set on
   <html> by site.js, because the menu's own open class lives on the header. */
.menu-open .cc{display:none}