/* ==========================================================================
   MAIN STYLESHEET

   One file. The previous Elementor build served 38 stylesheets; this is 1 of 2.
   Every value comes from tokens.css.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:var(--t-base);line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
::selection{background:var(--lime);color:var(--ink)}

h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;margin:0 0 var(--s-5);
  line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:var(--t-4xl);line-height:1.05}
h2{font-size:var(--t-3xl)}h3{font-size:var(--t-xl)}h4{font-size:var(--t-lg)}
p{margin:0 0 var(--s-4);max-width:var(--measure);text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:inherit}
ul,ol{margin:0 0 var(--s-4);padding-left:1.15em;max-width:var(--measure)}
li{margin-bottom:var(--s-2)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;padding:var(--s-3) var(--s-5);
  background:var(--lime);color:var(--ink);font-weight:700;text-decoration:none}
.skip:focus{left:0;top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto;position:relative;z-index:2}
.narrow{width:min(100% - var(--gutter)*2,var(--narrow))}
section{padding-block:var(--sec)}
.alt{background:var(--paper-2)}
.dark{background:var(--d-800);color:var(--on-d)}
.dark h1,.dark h2,.dark h3{color:var(--on-d)}
.dark p{color:var(--on-d-soft)}

.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);
  padding:.4rem .9rem;margin:0 0 var(--s-5);
  background:var(--lime-wash);border:1px solid var(--lime);border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:var(--t-2xs);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-700)}
.dark .eyebrow,.hero .eyebrow,.phead .eyebrow{background:rgb(195 233 86/.12);border-color:rgb(195 233 86/.4);color:var(--lime)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:currentColor;font-style:normal}

.lede{font-size:var(--t-lg);color:var(--ink-soft)}
.dark .lede,.hero .lede,.phead .lede{color:var(--on-d-soft)}
.head{max-width:var(--measure);margin-bottom:var(--s-9)}
.head--c{margin-inline:auto;text-align:center}
.muted{color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   ACCENT WORD
   The colour is set per surface. Previously a single dark-teal value was used
   everywhere, which made the accent invisible on the dark hero: dark text on a
   dark background. Light surfaces get the deep teal, dark surfaces get lime.
   -------------------------------------------------------------------------- */
.hl{position:relative;white-space:nowrap;color:var(--d-600);z-index:0}
.hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.03em;height:.32em;
  background:var(--lime);z-index:-1;border-radius:3px;
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-s) var(--ease)}
.hl.on::after{transform:scaleX(1)}
html:not(.js) .hl::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.hl::after{transform:scaleX(1)}}
/* On dark surfaces the word itself becomes lime and the bar is dropped. */
.dark .hl,.hero .hl,.phead .hl,.cta .hl{color:var(--lime)}
.dark .hl::after,.hero .hl::after,.phead .hl::after,.cta .hl::after{display:none}

/* BUTTONS — Inter, not Playfair */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap);padding:0 var(--s-6);border:2px solid transparent;
  border-radius:var(--r-pill);font-family:var(--f-body);font-size:var(--t-sm);font-weight:700;
  text-decoration:none;cursor:pointer;
  transition:transform var(--dur-f) var(--ease),background var(--dur-f) var(--ease),
             color var(--dur-f) var(--ease),border-color var(--dur-f) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:.78em;background:var(--ink);color:var(--lime);flex:none}
.btn--l{background:var(--lime);color:var(--ink)}
.btn--l:hover{background:var(--lime-2)}
.btn--d{background:var(--d-800);color:var(--on-d)}
.btn--d i{background:var(--lime);color:var(--ink)}
.btn--d:hover{background:var(--d-900)}
.btn--o{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--o:hover{border-color:var(--ink)}
.dark .btn--o,.hero .btn--o,.phead .btn--o,.cta .btn--o{color:var(--on-d);border-color:var(--line-d)}
.dark .btn--o:hover,.hero .btn--o:hover,.phead .btn--o:hover,.cta .btn--o:hover{border-color:var(--lime)}
.arrow{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--f-body);
  font-size:var(--t-sm);font-weight:700;text-decoration:none;color:var(--d-600)}
.arrow::after{content:"→";transition:transform var(--dur-f) var(--ease)}
.arrow:hover::after{transform:translateX(5px)}
.dark .arrow{color:var(--lime)}

/* --------------------------------------------------------------------------
   HEADER — transparent over a dark hero, solid everywhere else and on scroll
   -------------------------------------------------------------------------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
/* The blur lives on a pseudo-element, not on .hdr itself.

   backdrop-filter creates a containing block for any fixed-position
   descendant. The mobile nav panel is a child of .hdr, so the moment .hdr
   gained its blur the panel stopped being positioned against the viewport and
   was confined to the header's own box — a strip roughly 76px tall. Tapping
   the burger appeared to do nothing except reveal a sliver of the first menu
   item, which is exactly the reported symptom.

   Moving the filter to ::before keeps the effect and leaves .hdr an ordinary
   containing block. */
.hdr.on,body:not(.has-hero) .hdr{background:transparent}
.hdr.on::before,body:not(.has-hero) .hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgb(13 43 42/.95);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);min-height:var(--hdr)}
.brand{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--f-head);
  font-size:var(--t-lg);font-weight:700;letter-spacing:-.03em;text-decoration:none;color:var(--on-d)}
.brand b{width:34px;height:34px;border-radius:10px;background:var(--lime);display:grid;
  place-items:center;font-family:var(--f-body);font-size:.72rem;color:var(--ink)}
.nav{display:flex;align-items:center;gap:var(--s-3)}
/* The nav is a pill. A submenu rendered INSIDE it would inflate the pill and
   the 999px radius would turn it into a circle, which is exactly what happened
   before the .sub-menu rules below were added. The submenu is absolutely
   positioned, so it never affects the pill's box. */
.nav__l{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:4px;
  max-width:none;background:rgb(255 255 255/.07);
  border:1px solid var(--line-d);border-radius:var(--r-pill)}
.nav__l>li{position:relative}
.nav__l li{margin:0}
.nav__l a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-5);
  border-radius:var(--r-pill);font-family:var(--f-body);font-size:var(--t-sm);font-weight:600;
  text-decoration:none;color:var(--on-d);white-space:nowrap;
  transition:background var(--dur-f) var(--ease),color var(--dur-f) var(--ease)}
.nav__l a:hover,.nav__l li.on>a{background:var(--lime);color:var(--ink)}
.sub-wrap,
.nav__l .menu-item-has-children{position:relative}
.sub-wrap>a::after,
.nav__l .menu-item-has-children>a::after{content:"";width:0;height:0;margin-left:var(--s-2);
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor}
.sub,
.nav__l .sub-menu{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;min-width:290px;
  margin:0;padding:var(--s-3);list-style:none;max-width:none;background:var(--paper);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.sub-wrap:hover .sub,.sub-wrap:focus-within .sub,.sub-wrap.open .sub,
.nav__l .menu-item-has-children:hover>.sub-menu,
.nav__l .menu-item-has-children:focus-within>.sub-menu,
.nav__l .menu-item-has-children.open>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub a,
.nav__l .sub-menu a{display:block;min-height:0;padding:var(--s-3) var(--s-4);
  border-radius:var(--r);color:var(--ink);font-weight:600;white-space:normal}
.sub a:hover,
.nav__l .sub-menu a:hover{background:var(--lime-wash);color:var(--d-700)}
.burger{display:none;width:44px;height:44px;padding:11px;background:none;border:0;cursor:pointer}
.burger span{display:block;height:2px;background:var(--on-d);margin:5px 0;border-radius:2px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1080px){
  .burger{display:block}
  .nav{position:fixed;inset:var(--hdr) 0 0 0;z-index:99;
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s-6) var(--gutter) calc(var(--s-9) + env(safe-area-inset-bottom));
    background:var(--d-900);
    overflow-y:auto;overscroll-behavior:contain;
    /* visibility, not just transform: a translated panel is still focusable
       and still read by a screen reader, so tabbing from the burger walked
       into an off-screen menu. */
    visibility:hidden;
    transform:translateX(100%);
    transition:transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
  .nav.open{transform:translateX(0);visibility:visible;transition-delay:0s}
  .nav__l{flex-direction:column;align-items:stretch;background:none;border:0;padding:0}
  .nav__l li{border-bottom:1px solid var(--line-d)}
  .nav__l a{min-height:56px;font-size:var(--t-lg);border-radius:0;justify-content:space-between}
  .sub,.nav__l .sub-menu{position:static;translate:none;opacity:1;visibility:visible;
    transform:none;box-shadow:none;background:none;min-width:0;
    padding:0 0 var(--s-4) var(--s-4);display:none;border-radius:0}
  .sub a,.nav__l .sub-menu a{color:var(--on-d-soft);font-size:var(--t-base);min-height:46px}
  .sub-wrap.open .sub,.nav__l .menu-item-has-children.open>.sub-menu{display:block}
  .nav .btn{margin-top:var(--s-5)}
}

/* --------------------------------------------------------------------------
   HERO — patterned, so the largest surface on the site is not flat colour
   -------------------------------------------------------------------------- */
/* A gradient rather than flat colour: deepest at the top left where the
   headline sits, warming toward green at the bottom right behind the image.
   Text always sits on the dark end, which is what keeps contrast safe. */
.hero{color:var(--on-d);position:relative;overflow:hidden;
  padding-top:calc(var(--hdr) + var(--s-10));padding-bottom:var(--s-11);
  background:
    radial-gradient(120% 90% at 88% 12%, rgb(195 233 86/.16) 0%, transparent 55%),
    linear-gradient(152deg, var(--d-900) 0%, var(--d-800) 42%, var(--d-700) 76%, var(--d-600) 100%)}
.hero h1,.hero h2{color:var(--on-d)}

/* Layer 1: fine grid, drawn in CSS so there is no image to download */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgb(255 255 255/.045) 1px,transparent 1px),
    linear-gradient(90deg,rgb(255 255 255/.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 30%,transparent 78%)}
/* Layer 2: lime bloom behind the portrait */
.hero::after{content:"";position:absolute;width:720px;height:720px;right:-14%;top:-26%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgb(195 233 86/.20) 0%,transparent 66%);filter:blur(60px)}
/* Layer 3: a soft arc, echoing the reference boards */
.hero-arc{position:absolute;left:-8%;bottom:-30%;width:520px;height:520px;
  border:1px solid rgb(195 233 86/.16);border-radius:50%;pointer-events:none;z-index:1}
.hero-arc::after{content:"";position:absolute;inset:70px;border:1px solid rgb(195 233 86/.1);border-radius:50%}

.hero__in{display:grid;gap:var(--s-9);align-items:center}
@media (min-width:980px){.hero__in{grid-template-columns:1.25fr .75fr;gap:var(--s-9)}}
@media (min-width:1280px){.hero__in{grid-template-columns:1.15fr .85fr;gap:var(--s-10)}}
.hero h1{margin-bottom:var(--s-5)}
.hero__sub{font-size:var(--t-base);color:var(--on-d-soft);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}
.ticks{list-style:none;margin:var(--s-8) 0 0;padding:0;display:grid;gap:var(--s-3);max-width:none}
.ticks li{display:flex;align-items:flex-start;gap:var(--s-3);margin:0;font-size:var(--t-sm);color:var(--on-d-soft)}
.ticks b{flex:none;width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--ink);
  display:grid;place-items:center;font-size:11px;margin-top:2px}

.shot{position:relative;border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(160deg,rgb(255 255 255/.08),rgb(195 233 86/.15));border:1px solid var(--line-d)}
.ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:var(--s-5);
  font-family:var(--f-body);font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--on-d-soft)}
.chip{position:absolute;background:var(--paper);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);
  box-shadow:var(--sh-lg);z-index:3}
.chip b{display:block;font-family:var(--f-head);font-size:var(--t-lg);font-weight:700;color:var(--d-700);line-height:1.2}
.chip span{font-size:var(--t-2xs);color:var(--ink-soft)}
.chip--a{left:-7%;top:14%}
.chip--b{right:-5%;bottom:16%}
@media (max-width:980px){.chip{display:none}}

/* Inner page header, same pattern treatment but shorter */
.phead{color:var(--on-d);position:relative;overflow:hidden;
  padding-top:calc(var(--hdr) + var(--s-9));padding-bottom:var(--s-9);
  background:
    radial-gradient(110% 100% at 82% 10%, rgb(195 233 86/.13) 0%, transparent 58%),
    linear-gradient(152deg, var(--d-900) 0%, var(--d-800) 55%, var(--d-700) 100%);
  /* The hairline that separates the header from the page below it. */
  border-bottom:1px solid rgb(195 233 86/.28)}
.phead h1,.phead h2,.phead h3{color:var(--on-d)}
.phead p{color:var(--on-d-soft)}
.phead .muted{color:var(--on-d-soft)}
.phead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgb(255 255 255/.045) 1px,transparent 1px),
    linear-gradient(90deg,rgb(255 255 255/.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 100% at 30% 20%,#000 20%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 30% 20%,#000 20%,transparent 76%)}
.crumbs{font-family:var(--f-body);font-size:var(--t-2xs);color:var(--on-d-soft);margin-bottom:var(--s-5)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--lime)}
.crumbs span{opacity:.5;margin:0 var(--s-2)}

/* TRUSTED */
.trust{background:var(--d-900);padding-block:var(--s-8);color:var(--on-d)}
.trust p{font-family:var(--f-body);font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-d-soft);text-align:center;margin:0 auto var(--s-5)}
.trust ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-5) var(--s-9);
  list-style:none;margin:0;padding:0;max-width:none}
.trust li{font-family:var(--f-head);font-size:var(--t-lg);font-weight:700;color:var(--on-d);opacity:.6;margin:0}

/* STATS */
/* Four equal columns. auto-fill sized the tracks from their content and left
   the last one short, which reads as a mistake rather than a layout. */
.stats{display:grid;gap:var(--s-6);grid-template-columns:repeat(2,1fr);
  list-style:none;margin:0;padding:0;max-width:none}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
/* Three-up when there are only three, so the row still fills the width */
.stats:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.stats li{margin:0;border-top:3px solid var(--lime);padding-top:var(--s-4)}
.stats b{display:block;font-family:var(--f-head);font-size:var(--t-3xl);font-weight:700;
  letter-spacing:-.03em;line-height:1}
.stats span{display:block;margin-top:var(--s-2);font-size:var(--t-sm);color:var(--ink-soft);max-width:24ch}
.dark .stats span{color:var(--on-d-soft)}

/* --------------------------------------------------------------------------
   SERVICES — asymmetric grid. Two wide feature cards lead, six follow in a
   three-up row, so the block has a shape instead of eight identical boxes.
   -------------------------------------------------------------------------- */
.svc{display:grid;gap:var(--s-5);grid-template-columns:1fr;list-style:none;margin:0;padding:0;max-width:none;align-items:stretch}
@media (min-width:760px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){
  .svc{grid-template-columns:repeat(6,1fr)}
  .svc li{grid-column:span 2}
  .svc li:nth-child(1),.svc li:nth-child(2){grid-column:span 3}
}
.svc li{position:relative;margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--s-7);display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.svc li:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:transparent}
/* Icons are Font Awesome, drawn in one colour so the palette stays at two.
   Multi-colour icon sets fight the accent for attention. */
.svc .ic{width:54px;height:54px;border-radius:16px;background:var(--lime-wash);
  display:grid;place-items:center;margin-bottom:var(--s-5);font-size:1.2rem;
  color:var(--d-700);flex:none}
.svc li.dk .ic{color:var(--lime)}
.svc li.lm .ic{color:var(--d-700)}
.svc li.dk{background:var(--d-800);border-color:transparent;color:var(--on-d)}
.svc li.dk h3{color:var(--on-d)}.svc li.dk p{color:var(--on-d-soft)}
.svc li.dk .ic{background:rgb(195 233 86/.16)}
.svc li.lm{background:var(--lime);border-color:transparent}
.svc li.lm .ic{background:rgb(255 255 255/.55)}
.svc li.lm p{color:var(--d-700)}
.svc h3{font-size:var(--t-lg);margin-bottom:var(--s-3)}
.svc h3 a{text-decoration:none}
.svc h3 a::after{content:"";position:absolute;inset:0}
.svc p{font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:var(--s-4)}
.svc .foot{margin-top:auto;padding-top:var(--s-4)}
.stack{font-family:var(--f-body);font-size:var(--t-2xs);color:var(--ink-soft);letter-spacing:.03em;margin-top:var(--s-3)}
.svc li.dk .stack,.svc li.lm .stack{color:inherit;opacity:.7}
.proof{display:inline-block;padding:var(--s-2) var(--s-4);background:var(--lime-wash);
  border-radius:var(--r-pill);font-size:var(--t-2xs);font-weight:600;color:var(--d-700)}
.svc li.dk .proof{background:rgb(195 233 86/.16);color:var(--lime)}
.svc li.lm .proof{background:rgb(255 255 255/.55);color:var(--d-700)}

/* --------------------------------------------------------------------------
   PROCESS — three columns per row, as asked. Six steps become two clean rows.
   -------------------------------------------------------------------------- */
.proc{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:var(--s-5);
  grid-template-columns:1fr;align-items:start}
@media (min-width:720px){.proc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.proc{grid-template-columns:repeat(3,1fr)}}
.proc li{margin:0;background:rgb(255 255 255/.05);border:1px solid var(--line-d);
  border-radius:var(--r-xl);padding:var(--s-6);transition:background var(--dur) var(--ease)}
.proc li:hover{background:rgb(255 255 255/.09)}
.proc b{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:var(--lime);color:var(--ink);font-family:var(--f-body);font-size:var(--t-sm);
  font-weight:500;margin-bottom:var(--s-5)}
.proc h3{font-size:var(--t-lg);margin-bottom:var(--s-3)}
.proc p{font-size:var(--t-sm)}
.tools{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line-d);
  font-family:var(--f-body);font-size:var(--t-2xs);color:var(--on-d-soft);opacity:.85;letter-spacing:.03em}

/* CASE STUDY band */
.case{background:var(--lime);border-radius:var(--r-2xl);padding:clamp(2.5rem,5vw,4rem);color:var(--ink)}
.case h2{color:var(--ink)}
.case .stats li{border-top-color:var(--d-800)}
.case .stats span{color:var(--d-700)}
.case .eyebrow{background:rgb(255 255 255/.5);border-color:rgb(13 43 42/.2);color:var(--d-700)}

/* --------------------------------------------------------------------------
   CAROUSEL — CSS scroll-snap. Works with JS off; JS adds arrows and progress.
   -------------------------------------------------------------------------- */
.car{position:relative}
.car__vp{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;
  margin-inline:calc(var(--gutter)*-1);padding:var(--s-2) var(--gutter) var(--s-6)}
.car__vp::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.car__vp{scroll-behavior:auto}}
.car__tr{display:flex;gap:var(--s-5);list-style:none;margin:0;padding:0;max-width:none}
.car__s{flex:0 0 min(84%,390px);scroll-snap-align:start;margin:0}
@media (min-width:768px){.car__s{flex-basis:min(48%,420px)}}
@media (min-width:1100px){.car__s{flex-basis:calc((100% - var(--s-5)*2)/3)}}
.car__c{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-4)}
/* Autoplay pause toggle. Autoplay without a visible way to stop it is a
   WCAG failure for anything that moves for more than five seconds. */
.car__pause{width:var(--tap);height:var(--tap);flex:none;display:inline-flex;
  align-items:center;justify-content:center;background:transparent;color:inherit;
  border:1px solid var(--line);border-radius:50%;cursor:pointer;font-size:.85rem;
  transition:background var(--dur-f) var(--ease)}
.dark .car__pause{border-color:var(--line-d)}
.car__pause:hover{background:var(--lime);color:var(--ink);border-color:transparent}
.car__b{width:var(--tap);height:var(--tap);flex:none;display:inline-flex;align-items:center;
  justify-content:center;background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:50%;cursor:pointer;font-size:1.05rem;
  transition:background var(--dur-f) var(--ease),transform var(--dur-f) var(--ease),border-color var(--dur-f) var(--ease)}
.car__b:hover:not(:disabled){background:var(--lime);border-color:transparent;transform:scale(1.06)}
.car__b:disabled{opacity:.32;cursor:default}
.dark .car__b{background:rgb(255 255 255/.08);color:var(--on-d);border-color:var(--line-d)}
.dark .car__b:hover:not(:disabled){background:var(--lime);color:var(--ink)}
.car__p{flex:1;height:3px;background:var(--line);border-radius:3px;position:relative;overflow:hidden}
.dark .car__p{background:rgb(255 255 255/.16)}
.car__p span{position:absolute;inset:0 auto 0 0;width:100%;background:var(--lime);border-radius:3px;
  transform-origin:left;transform:scaleX(.14);transition:transform var(--dur) var(--ease)}
.car__n{font-family:var(--f-body);font-size:var(--t-2xs);color:var(--ink-soft);flex:none;margin:0;
  font-variant-numeric:tabular-nums}
.dark .car__n{color:var(--on-d-soft)}

/* WORK CARDS */
.wc{position:relative;margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;height:100%;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.wc:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.wc>a{display:block;text-decoration:none;height:100%}
.wc__m{aspect-ratio:4/3;background:linear-gradient(150deg,var(--lime-wash),var(--lime-soft));
  display:grid;place-items:center;font-family:var(--f-body);font-size:var(--t-2xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-600);padding:var(--s-5);text-align:center}
.wc__b{padding:var(--s-6)}
.wc__cat{display:inline-block;font-family:var(--f-body);font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-600);background:var(--lime-wash);
  padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);margin-bottom:var(--s-4)}
.wc h3{font-size:var(--t-lg);margin-bottom:var(--s-3)}
.wc p{font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:var(--s-4)}
.wc__k{display:inline-flex;align-items:baseline;gap:var(--s-2);font-family:var(--f-body);
  background:var(--d-800);color:var(--on-d);padding:var(--s-2) var(--s-4);border-radius:var(--r-pill)}
.wc__k b{font-size:var(--t-sm);color:var(--lime)}
.wc__k span{font-size:var(--t-2xs);opacity:.8}

/* TESTIMONIAL CARDS */
.tm{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-7);height:100%;display:flex;flex-direction:column;margin:0}
.dark .tm{background:rgb(255 255 255/.05);border-color:var(--line-d)}
.tm .stars{color:var(--lime);letter-spacing:.15em;margin-bottom:var(--s-4);font-size:.9rem}
.tm blockquote{margin:0 0 var(--s-6);padding:0;border:0;flex:1;
  font-family:var(--f-head);font-size:var(--t-lg);line-height:1.5}
.dark .tm blockquote{color:var(--on-d)}
.tm figcaption{display:flex;align-items:center;gap:var(--s-4)}
.tm .av{width:46px;height:46px;border-radius:50%;background:var(--lime);color:var(--ink);
  display:grid;place-items:center;font-family:var(--f-body);font-size:var(--t-xs);font-weight:500;flex:none}
.tm .nm{font-weight:700;margin:0;font-size:var(--t-sm)}
.tm .rl{font-size:var(--t-xs);color:var(--ink-soft);margin:0}
.dark .tm .rl{color:var(--on-d-soft)}

/* ABOUT split */
.ab{display:grid;gap:var(--s-9);align-items:center}
@media (min-width:980px){.ab{grid-template-columns:.9fr 1.1fr;gap:var(--s-10)}}
.ab__m{border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(160deg,var(--d-700),var(--d-800))}
.badges{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.badge{padding:var(--s-3) var(--s-5);border-radius:var(--r);background:var(--lime-wash);border:1px solid var(--lime)}
.badge b{display:block;font-family:var(--f-head);font-size:var(--t-base);font-weight:700;color:var(--d-700)}
.badge span{font-size:var(--t-2xs);color:var(--ink-soft)}
blockquote{margin:var(--s-7) 0 0;padding:var(--s-5) 0 0;border:0;border-top:1px solid var(--line);
  font-family:var(--f-head);font-size:var(--t-lg);max-width:var(--measure)}

/* --------------------------------------------------------------------------
   FAQ — an explicit plus that rotates to a minus. The previous version had a
   pseudo-element that read as decoration rather than a control.
   -------------------------------------------------------------------------- */
.faq{max-width:var(--narrow);margin-inline:auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:var(--s-3);overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.faq details:hover{border-color:var(--lime-2)}
.faq details[open]{border-color:var(--lime);box-shadow:var(--sh)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding:var(--s-5) var(--s-6);font-family:var(--f-head);font-size:var(--t-lg);font-weight:700;
  cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .ico{flex:none;width:34px;height:34px;border-radius:50%;background:var(--lime-wash);
  border:1px solid var(--lime);position:relative;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.faq .ico::before,.faq .ico::after{content:"";position:absolute;inset:50% 9px auto 9px;height:2px;
  background:var(--d-700);border-radius:2px;translate:0 -50%;transition:opacity var(--dur) var(--ease)}
.faq .ico::after{rotate:90deg}
.faq details[open] .ico{background:var(--lime);transform:rotate(180deg)}
.faq details[open] .ico::after{opacity:0}
.faq .a{padding:0 var(--s-6) var(--s-6);color:var(--ink-soft)}
.faq .a p{max-width:none}

/* CONTACT */
.cgrid{display:grid;gap:var(--s-9);align-items:start}
@media (min-width:980px){.cgrid{grid-template-columns:.85fr 1.15fr;gap:var(--s-10)}}
.cmeth{list-style:none;margin:0;padding:0;max-width:none}
.cmeth li{display:flex;gap:var(--s-5);align-items:flex-start;padding-block:var(--s-5);
  border-bottom:1px solid var(--line);margin:0}
.cmeth .ic{width:46px;height:46px;flex:none;border-radius:14px;background:var(--lime);
  display:grid;place-items:center;font-size:1rem;color:var(--ink)}
.cmeth .lb{font-family:var(--f-body);font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s-1)}
.cmeth .vl{font-family:var(--f-head);font-size:var(--t-lg);font-weight:700;margin:0}
.cmeth .vl a{text-decoration:none}
.form{background:var(--paper-2);border-radius:var(--r-2xl);padding:var(--s-8)}
.field{margin-bottom:var(--s-5)}
.field label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:var(--s-2)}
.field input,.field textarea,.field select{width:100%;min-height:var(--tap);padding:var(--s-3) var(--s-4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:var(--t-sm);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.two{display:grid;gap:var(--s-4)}
@media (min-width:600px){.two{grid-template-columns:1fr 1fr}}

/* ENGAGEMENT table */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tbl th,.tbl td{padding:var(--s-5) var(--s-4);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-family:var(--f-body);font-size:var(--t-2xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500}
.tbl td:first-child{font-weight:700}

/* LISTS */
.checks{list-style:none;padding:0}
.checks li{position:relative;padding-left:var(--s-7);margin-bottom:var(--s-3)}
.checks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;
  border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:11px}
.dark .checks li::before{background:var(--lime)}
.pills{display:flex;flex-wrap:wrap;gap:var(--s-3);list-style:none;padding:0;margin:0;max-width:none}
.pills li{margin:0}
.pills a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-5);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;text-decoration:none;
  transition:background var(--dur-f) var(--ease),border-color var(--dur-f) var(--ease)}
.pills a:hover{background:var(--lime);border-color:transparent}

/* ARTICLE */
/* Article body sits inside the full 1280 container, but the reading column is
   a FIXED width, not a ch value.
   ch is relative to the current font, so a Playfair heading at 3.25rem and an
   Inter paragraph at 1rem produce wildly different widths from the same 66ch.
   That is what threw headings and body onto different left edges. One px value
   keeps every element on the same measure. */
/* Article measure.
   760px inside a 1280px container left most of the width empty, which reads as
   a broken page rather than a comfortable measure. 820px keeps the line length
   readable while the surrounding space stops feeling accidental. */
.article{max-width:none}
.article>*{max-width:820px;margin-inline:auto}
/* Full-width elements break the measure deliberately, so they read as figures
   rather than as part of the running text. */
.article>figure,.article>.tbl,.article>table,
.article>.plist,.article>.stats,.article>.pills{max-width:100%}

/* The article column is centred inside the container rather than left in it,
   so the space either side is symmetrical and reads as a margin rather than as
   a column that failed to fill. */
.article{margin-inline:auto}
.article>h2{margin-top:var(--s-10)}
.article>h3{margin-top:var(--s-8)}
.article>p,.article>ul,.article>ol{max-width:760px}
.article>table,.article>pre,.article>figure,.article>.faq{max-width:960px;margin-inline:auto}
.article>.authorbox{max-width:960px;margin-inline:auto}
.article>.pills{max-width:760px}
.article h2{margin-top:var(--s-9)}
.article h3{margin-top:var(--s-7)}
.article table{width:100%;border-collapse:collapse;margin-bottom:var(--s-5);font-size:var(--t-sm)}
.article th,.article td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);text-align:left}
.article th{background:var(--paper-2);font-weight:700}
.article pre{padding:var(--s-6);background:var(--d-900);color:var(--on-d);border-radius:var(--r);
  overflow-x:auto;font-family:var(--f-body);font-size:var(--t-xs);line-height:1.7}
.article code{font-family:var(--f-body);font-size:.92em}
.article :not(pre)>code{background:var(--paper-2);padding:.15em .4em;border-radius:6px}
.pmeta{display:flex;flex-wrap:wrap;gap:var(--s-5);font-family:var(--f-body);font-size:var(--t-2xs);
  color:var(--on-d-soft);margin-bottom:var(--s-4)}
.authorbox{display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap;background:var(--paper-2);
  border-radius:var(--r-xl);padding:var(--s-7);margin-top:var(--s-9)}
.authorbox .av{width:80px;height:80px;border-radius:50%;background:var(--lime);color:var(--ink);
  display:grid;place-items:center;font-family:var(--f-head);font-size:1.4rem;font-weight:700;flex:none}

/* POST LIST */
/* auto-FILL, not auto-fit.
   auto-fit collapses empty tracks, so filtering down to one project would
   stretch that single card across the whole row. auto-fill keeps the three
   columns and leaves the empty space, which is what a filtered grid should
   look like and what happens naturally as more projects are added. */
/* Explicit column counts rather than auto-fill.
   auto-fill derives the count from the available width and the gap, and at
   1280px that arithmetic lands on two columns instead of three. Stating the
   count directly removes the guesswork, and filtering still leaves the empty
   tracks in place because the count is fixed. */
.plist{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media (min-width:620px){.plist{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.plist{grid-template-columns:repeat(3,1fr)}}
/* Cards must not stretch to fill a track taller than their content */
.plist>li{align-self:start}
.plist li{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.plist li:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.plist .m{aspect-ratio:16/10;background:linear-gradient(150deg,var(--lime-wash),var(--lime-soft));
  display:grid;place-items:center;font-family:var(--f-body);font-size:var(--t-2xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-600);text-align:center;padding:var(--s-5)}
.plist .b{padding:var(--s-6)}
.plist h3{font-size:var(--t-lg);margin-bottom:var(--s-3)}
.plist h3 a{text-decoration:none}

/* FILTERS */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0 0 var(--s-8);padding:0;max-width:none}
.filters li{margin:0}
.filters a{display:inline-flex;align-items:center;min-height:42px;padding:0 var(--s-5);
  border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;
  text-decoration:none;transition:background var(--dur-f) var(--ease),border-color var(--dur-f) var(--ease)}
.filters a:hover{border-color:var(--ink)}
.filters a.on{background:var(--d-800);color:var(--on-d);border-color:transparent}
/* Filtering hides cards rather than removing them, so the DOM and any
   analytics on those links stay intact. */
.plist li[hidden],.work-grid li[hidden]{display:none}
.plist{transition:opacity var(--dur) var(--ease)}

/* CTA + FOOTER */
.cta{background:var(--d-800);border-radius:var(--r-2xl);padding:clamp(3rem,6vw,5rem) var(--gutter);
  text-align:center;color:var(--on-d);position:relative;overflow:hidden}
.cta h2{color:var(--on-d);margin-inline:auto}
.cta p{margin-inline:auto;color:var(--on-d-soft)}
.cta::before{content:"";position:absolute;width:440px;height:440px;left:50%;top:-42%;translate:-50% 0;
  border-radius:50%;background:radial-gradient(circle,rgb(195 233 86/.22),transparent 66%);filter:blur(48px)}
.ftr{background:var(--d-900);color:var(--on-d);padding-block:var(--s-10) var(--s-6)}
.ftr a{color:var(--on-d-soft);text-decoration:none;font-size:var(--t-sm)}
.ftr a:hover{color:var(--lime)}
/* Five columns, sized by what each actually holds rather than by an equal
   split. The brand needs room for a paragraph, the link lists do not, and the
   subscribe column needs enough width that the input is not a slot.
   Everything stacks below 700px. */
.ftr__g{display:grid;gap:var(--s-8) var(--s-6);grid-template-columns:1fr}
@media (min-width:700px){.ftr__g{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .ftr__g{grid-template-columns:1.5fr 1.1fr .9fr 1.3fr 1.2fr;gap:var(--s-6)}
}
.ftr__br{grid-column:1/-1}
@media (min-width:700px){.ftr__br{grid-column:span 2}}
@media (min-width:1000px){.ftr__br{grid-column:span 1;padding-right:var(--s-5)}}
.ftr__br .ftr__tag{max-width:30ch}

/* Column headings sit on one baseline across all five */
.ftr__g > *{min-width:0}
.ftr__g h2{margin-top:0}
/* Long service names wrapping to two lines threw the vertical rhythm out */
.ftr__g nav a{display:inline-block;text-wrap:balance}
.ftr h2{font-family:var(--f-body);font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);margin-bottom:var(--s-5);font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;max-width:none}
.ftr li{margin-bottom:var(--s-3)}
.ftr__b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3) var(--s-6);
  margin-top:var(--s-9);padding-top:var(--s-5);border-top:1px solid var(--line-d);
  font-size:var(--t-xs);color:var(--on-d-soft)}
.ftr__b p{margin:0;max-width:none}
/* The legal links were stacking because the list had no flex context of its
   own; wp_nav_menu outputs a <ul>, so both cases need it. */
.ftr__legal,.ftr__b ul{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);
  list-style:none;margin:0;padding:0;max-width:none}
.ftr__legal li,.ftr__b li{margin:0}
.ftr__b a{font-size:var(--t-xs)}
/* Separator between the legal links */
.ftr__b ul li + li::before,.ftr__legal li + li::before{
  content:"";display:inline-block;width:1px;height:11px;
  background:var(--line-d);margin-right:var(--s-5);vertical-align:-1px}

/* CHATBOT */
.bot{position:fixed;right:1.25rem;bottom:1.25rem;z-index:200;display:inline-flex;align-items:center;
  gap:var(--s-2);min-height:52px;padding:0 1.35rem;background:var(--lime);color:var(--ink);border:0;
  border-radius:var(--r-pill);font-family:var(--f-body);font-size:var(--t-sm);font-weight:700;
  cursor:pointer;box-shadow:var(--sh-lg)}
.bot i{width:9px;height:9px;border-radius:50%;background:var(--d-800);font-style:normal}

/* --------------------------------------------------------------------------
   MOTION
   Reveal on scroll, and a word-by-word rise for headings marked [data-split].
   Both animate transform and opacity only, so the compositor handles them and
   no frame triggers a layout recalculation.
   -------------------------------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none;transition:opacity var(--dur-s) var(--ease),transform var(--dur-s) var(--ease)}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

.js .word{display:inline-block;opacity:0;transform:translateY(.7em) rotate(2deg)}
.js .word.in{opacity:1;transform:none;
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
@media (prefers-reduced-motion:reduce){.js .word{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   HOME HERO — differentiated from the inner page headers

   The home hero is taller, carries the pattern layers and a richer gradient,
   so the landing page reads as the front door rather than as one more page.
   Inner pages get the same treatment at a shorter height with a hairline
   under it.
   -------------------------------------------------------------------------- */

body.has-hero .hero{padding-bottom:calc(var(--s-11) + var(--s-4));
  border-bottom:1px solid rgb(195 233 86/.28)}

/* Scroll cue, home only */
.scroll-cue{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-9);
  font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-d-soft);text-decoration:none}
.scroll-cue span{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-d);
  display:grid;place-items:center;animation:bob 2.4s ease-in-out infinite}
.scroll-cue:hover span{border-color:var(--lime);color:var(--lime)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}

/* --------------------------------------------------------------------------
   FOOTER SOCIAL
   -------------------------------------------------------------------------- */
.social{display:flex;flex-wrap:wrap;gap:var(--s-3);list-style:none;margin:var(--s-5) 0 0;padding:0;max-width:none}
.social li{margin:0}
.social a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:rgb(255 255 255/.07);border:1px solid var(--line-d);color:var(--on-d-soft);
  font-size:.95rem;text-decoration:none;
  transition:background var(--dur-f) var(--ease),color var(--dur-f) var(--ease),
             transform var(--dur-f) var(--ease),border-color var(--dur-f) var(--ease)}
.social a:hover{background:var(--lime);color:var(--ink);border-color:transparent;transform:translateY(-2px)}

/* --------------------------------------------------------------------------
   PAGINATION

   Twelve per page on both archives. Each control is a full 48px tap target,
   because pagination is one of the easiest places to fail that on mobile.
   -------------------------------------------------------------------------- */

.pagination{margin-top:var(--s-9);display:flex;justify-content:center}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap);min-height:var(--tap);padding:0 var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;text-decoration:none;color:var(--ink);
  transition:background var(--dur-f) var(--ease),border-color var(--dur-f) var(--ease),
             color var(--dur-f) var(--ease)}
.pagination .page-numbers:hover{border-color:var(--ink);background:var(--paper-2)}
.pagination .page-numbers.current{
  background:var(--d-800);color:var(--on-d);border-color:transparent}
.pagination .page-numbers.dots{border-color:transparent;background:none;min-width:auto;padding:0 var(--s-2)}
.pagination .prev,.pagination .next{font-weight:700}
.dark .pagination .page-numbers{color:var(--on-d);border-color:var(--line-d)}
.dark .pagination .page-numbers:hover{background:rgb(255 255 255/.08)}
.dark .pagination .page-numbers.current{background:var(--lime);color:var(--ink)}

/* The screen-reader heading WordPress prints above the links */
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   EMPTY IMAGE SLOT

   Every image is a real upload. Until one is set, the slot shows a tinted
   panel with the item's name, so an unfinished page reads as unfinished rather
   than broken. It disappears the moment an image is attached.
   -------------------------------------------------------------------------- */

.img-slot{
  width:100%;height:100%;
  display:grid;place-items:center;text-align:center;padding:var(--s-5);
  background:linear-gradient(150deg,var(--lime-wash),var(--lime-soft));
  color:var(--d-600);
  font-size:var(--t-2xs);letter-spacing:.1em;text-transform:uppercase}
.img-slot span{display:block;max-width:22ch}
.dark .img-slot,.ab__m .img-slot{
  background:linear-gradient(160deg,rgb(255 255 255/.06),rgb(195 233 86/.12));
  color:var(--on-d-soft)}

/* --------------------------------------------------------------------------
   FOOTER SUBSCRIBE

   WPForms outputs its own markup, so this restyles it rather than replacing
   it. Selectors are scoped to .ftr__form so nothing here touches the contact
   form on the light background.
   -------------------------------------------------------------------------- */

.ftr__sub{grid-column:1/-1}
@media (min-width:900px){.ftr__sub{grid-column:span 1}}
.ftr__subtext{color:var(--on-d-soft);font-size:var(--t-xs);margin:0 0 var(--s-4);max-width:30ch}

.ftr__form .wpforms-container{margin:0}
.ftr__form .wpforms-field{padding:0 0 var(--s-3)}
.ftr__form .wpforms-field-label{
  font-size:var(--t-2xs);color:var(--on-d-soft);font-weight:500;margin-bottom:var(--s-2)}
.ftr__form input[type=text],
.ftr__form input[type=email]{
  width:100%;min-height:46px;padding:var(--s-3) var(--s-4);
  background:rgb(255 255 255/.07);border:1px solid var(--line-d);
  border-radius:var(--r-pill);color:var(--on-d);font:inherit;font-size:var(--t-sm)}
.ftr__form input::placeholder{color:var(--on-d-soft);opacity:.75}
.ftr__form input:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.ftr__form button[type=submit],
.ftr__form .wpforms-submit{
  width:100%;min-height:46px;padding:0 var(--s-6);
  background:var(--lime);color:var(--ink);border:0;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:var(--t-sm);font-weight:700;cursor:pointer;
  transition:background var(--dur-f) var(--ease),transform var(--dur-f) var(--ease)}
.ftr__form .wpforms-submit:hover{background:var(--lime-2);transform:translateY(-2px)}
.ftr__form .wpforms-confirmation-container-full{
  background:rgb(195 233 86/.14);border:1px solid rgb(195 233 86/.4);
  border-radius:var(--r);padding:var(--s-4);color:var(--on-d);font-size:var(--t-sm)}
.ftr__form .wpforms-error{color:#FFB4B4;font-size:var(--t-2xs)}

/* Contact page form, on the light panel */
.form .wpforms-container{margin:0}
.form .wpforms-field-label{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.form input[type=text],.form input[type=email],.form input[type=tel],
.form input[type=url],.form textarea,.form select{
  width:100%;min-height:var(--tap);padding:var(--s-3) var(--s-4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:var(--t-sm);color:var(--ink)}
.form textarea{min-height:140px;resize:vertical}
.form .wpforms-submit{
  min-height:var(--tap);padding:0 var(--s-7);background:var(--lime);color:var(--ink);
  border:0;border-radius:var(--r-pill);font-family:var(--f-body);
  font-size:var(--t-sm);font-weight:700;cursor:pointer}
.form .wpforms-submit:hover{background:var(--lime-2)}

/* --------------------------------------------------------------------------
   WPFORMS

   WPForms ships its own stylesheet with a blue submit button and its own input
   styling, which matches nothing. These rules override it in both places the
   plugin renders: the dark footer and the light contact panel.

   Selectors are deliberately specific rather than using !important, because
   !important makes the next override harder for whoever comes after.
   -------------------------------------------------------------------------- */

/* ---- Shared ---------------------------------------------------------- */

.wpforms-container,
.wpforms-container-full{margin:0!important;max-width:none}
.wpforms-container .wpforms-form{font-family:var(--f-body)}
.wpforms-container .wpforms-field{padding:0 0 var(--s-4)}
.wpforms-container .wpforms-field-label{
  font-family:var(--f-body);font-size:var(--t-sm);font-weight:600;margin-bottom:var(--s-2)}
.wpforms-container .wpforms-required-label{color:var(--lime-2)}
.wpforms-container .wpforms-field-description{font-size:var(--t-2xs);opacity:.75}
.wpforms-container .wpforms-field-sublabel{font-size:var(--t-2xs);opacity:.7}

/* Kill the blue focus glow WPForms adds */
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus{box-shadow:none!important}

/* ---- Contact page, light panel --------------------------------------- */

.form .wpforms-container input[type=text],
.form .wpforms-container input[type=email],
.form .wpforms-container input[type=tel],
.form .wpforms-container input[type=url],
.form .wpforms-container input[type=number],
.form .wpforms-container textarea,
.form .wpforms-container select{
  width:100%;min-height:var(--tap);padding:var(--s-3) var(--s-4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--f-body);font-size:var(--t-sm);color:var(--ink);box-shadow:none}
.form .wpforms-container textarea{min-height:140px;resize:vertical}
.form .wpforms-container input:focus-visible,
.form .wpforms-container textarea:focus-visible,
.form .wpforms-container select:focus-visible{
  outline:3px solid var(--lime);outline-offset:1px;border-color:transparent}
.form .wpforms-container .wpforms-field-label{color:var(--ink)}

.form .wpforms-container button[type=submit],
.form .wpforms-container .wpforms-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap);padding:0 var(--s-7);
  background:var(--lime);color:var(--ink);
  border:2px solid transparent;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:var(--t-sm);font-weight:700;
  cursor:pointer;box-shadow:none;
  transition:background var(--dur-f) var(--ease),transform var(--dur-f) var(--ease)}
.form .wpforms-container .wpforms-submit:hover{background:var(--lime-2);transform:translateY(-2px)}

/* ---- Footer, dark --------------------------------------------------- */

.ftr__form .wpforms-container input[type=text],
.ftr__form .wpforms-container input[type=email]{
  width:100%;min-height:46px;padding:var(--s-3) var(--s-4);
  background:rgb(255 255 255/.07);border:1px solid var(--line-d);
  border-radius:var(--r-pill);color:var(--on-d);
  font-family:var(--f-body);font-size:var(--t-sm);box-shadow:none}
.ftr__form .wpforms-container input::placeholder{color:var(--on-d-soft);opacity:.8}
.ftr__form .wpforms-container input:focus-visible{
  outline:3px solid var(--lime);outline-offset:1px;border-color:transparent}
.ftr__form .wpforms-container .wpforms-field-label{color:var(--on-d-soft);font-size:var(--t-2xs)}

.ftr__form .wpforms-container button[type=submit],
.ftr__form .wpforms-container .wpforms-submit{
  width:100%;min-height:46px;padding:0 var(--s-6);
  background:var(--lime);color:var(--ink);
  border:0;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:var(--t-sm);font-weight:700;
  cursor:pointer;box-shadow:none;
  transition:background var(--dur-f) var(--ease),transform var(--dur-f) var(--ease)}
.ftr__form .wpforms-container .wpforms-submit:hover{background:var(--lime-2);transform:translateY(-2px)}

/* Confirmations and errors, both contexts */
.wpforms-confirmation-container-full{
  background:var(--lime-wash)!important;border:1px solid var(--lime)!important;
  border-radius:var(--r)!important;padding:var(--s-4)!important;
  color:var(--ink)!important;font-size:var(--t-sm)}
.ftr__form .wpforms-confirmation-container-full{
  background:rgb(195 233 86/.14)!important;border-color:rgb(195 233 86/.4)!important;
  color:var(--on-d)!important}
.wpforms-container label.wpforms-error{color:#C0392B;font-size:var(--t-2xs);font-weight:500}
.ftr__form .wpforms-container label.wpforms-error{color:#FFB4B4}
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error{border-color:#C0392B!important}

/* --------------------------------------------------------------------------
   NATIVE FORMS

   The site's own contact and subscribe forms. No plugin stylesheet to
   override, so these are the only rules that apply to them.
   -------------------------------------------------------------------------- */

.sk-form__field{margin:0 0 var(--s-4);max-width:none}
.sk-form__field label{
  display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:var(--s-2);color:var(--ink)}
.sk-form__field label span{color:var(--d-600)}

.sk-form input[type=text],
.sk-form input[type=email],
.sk-form input[type=tel],
.sk-form textarea,
.sk-form select{
  width:100%;min-height:var(--tap);padding:var(--s-3) var(--s-4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--f-body);font-size:var(--t-sm);color:var(--ink);
  transition:border-color var(--dur-f) var(--ease)}
.sk-form textarea{min-height:150px;resize:vertical;line-height:1.6}
.sk-form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 15px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s-9)}
.sk-form input:hover,.sk-form textarea:hover,.sk-form select:hover{border-color:var(--line)}
.sk-form input:focus-visible,
.sk-form textarea:focus-visible,
.sk-form select:focus-visible{
  outline:3px solid var(--lime);outline-offset:0;border-color:transparent}

/* Two fields side by side on anything wider than a phone */
.sk-form__row{display:grid;gap:var(--s-4)}
@media (min-width:560px){.sk-form__row{grid-template-columns:1fr 1fr}}

.sk-form__small{
  margin:var(--s-4) 0 0;font-size:var(--t-2xs);color:var(--ink-soft);max-width:44ch}

/* The honeypot. Hidden from people, left in the markup for bots to fill.
   Not display:none, because some bots skip anything with that. */
.sk-form__hp{
  position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  margin:-1px;padding:0}

/* Result messages */
.sk-form__notice{
  margin:0 0 var(--s-5);padding:var(--s-4) var(--s-5);
  background:var(--lime-wash);border:1px solid var(--lime);
  border-radius:var(--r);font-size:var(--t-sm);color:var(--ink);max-width:none}
.sk-form__notice--err{background:#FFF4F4;border-color:#F0CFCF;color:#8A2222}

/* ---- Footer subscribe, on the dark band ------------------------------ */

.ftr__form .sk-form--sub{display:grid;gap:var(--s-3)}
.ftr__form .sk-form__field{margin:0}
.ftr__form .sk-form input[type=email]{
  min-height:46px;background:rgb(255 255 255/.07);border-color:var(--line-d);
  border-radius:var(--r-pill);color:var(--on-d)}
.ftr__form .sk-form input::placeholder{color:var(--on-d-soft);opacity:.8}
.ftr__form .sk-form input:focus-visible{outline-color:var(--lime);border-color:transparent}
.ftr__form .btn{width:100%;min-height:46px}
.ftr__form .sk-form__notice{
  background:rgb(195 233 86/.14);border-color:rgb(195 233 86/.4);
  color:var(--on-d);font-size:var(--t-xs);padding:var(--s-3) var(--s-4)}
.ftr__form .sk-form__notice--err{background:rgb(255 180 180/.12);border-color:rgb(255 180 180/.35);color:#FFD4D4}

/* Inline validation messages */
.sk-form__err{
  margin:var(--s-2) 0 0;font-size:var(--t-2xs);font-weight:500;color:#B3261E;max-width:none}
.sk-form [aria-invalid=true]{border-color:#B3261E}
.sk-form [aria-invalid=true]:focus-visible{outline-color:#B3261E}
.ftr__form .sk-form__err{color:#FFB4B4}
.ftr__form .sk-form [aria-invalid=true]{border-color:rgb(255 180 180/.6)}

/* Captcha widget spacing */
.sk-form__captcha{margin:0 0 var(--s-5)}
.ftr__form .sk-form__captcha{margin:0 0 var(--s-3);transform:scale(.85);transform-origin:left top}

/* Submit button while sending */
.sk-form [type=submit]:disabled{opacity:.6;cursor:wait;transform:none}

/* --------------------------------------------------------------------------
   AJAX CONFIRMATION

   Replaces the form on success. Nothing is persisted, so a refresh brings the
   empty form back — which is what someone sending a second enquiry expects.
   -------------------------------------------------------------------------- */

.sk-form__notice--done{
  display:grid;gap:var(--s-4);justify-items:start;
  padding:var(--s-6) var(--s-6);
  animation:sk-notice-in var(--dur) var(--ease)}
.sk-form__notice--done::before{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--lime);color:var(--ink);font-size:var(--t-sm)}
@media (prefers-reduced-motion:no-preference){
  @keyframes sk-notice-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.sk-form__notice--done{animation:none}}
.sk-form__notice--done:focus{outline:none}
.sk-form__notice--done:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

.sk-form__again{
  min-height:var(--tap);padding:0 var(--s-5);
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:var(--t-sm);font-weight:600;cursor:pointer;
  transition:background var(--dur-f) var(--ease),color var(--dur-f) var(--ease)}
.sk-form__again:hover{background:var(--ink);color:var(--paper)}

/* Footer, on the dark band */
.ftr__form .sk-form__notice--done{padding:var(--s-4);gap:var(--s-3)}
.ftr__form .sk-form__notice--done::before{width:32px;height:32px;font-size:var(--t-xs)}
.ftr__form .sk-form__again{
  color:var(--on-d);border-color:var(--line-d);min-height:40px;font-size:var(--t-xs)}
.ftr__form .sk-form__again:hover{background:var(--lime);color:var(--ink);border-color:transparent}

/* A hidden form must not leave a gap behind it */
.sk-form[hidden]{display:none}

/* --------------------------------------------------------------------------
   INLINE SVG ICONS

   Sized in em so an icon always matches the text it sits beside, and inherits
   colour through currentColor.
   -------------------------------------------------------------------------- */

.i{width:1em;height:1em;flex:none;vertical-align:-0.125em;display:inline-block}
.btn .i{width:.85em;height:.85em}
.ticks b .i,.checks .i{width:.75em;height:.75em}
.stars .i{width:.9em;height:.9em}
.cmeth .ic .i{width:1.05em;height:1.05em}
.car__b .i{width:1.05em;height:1.05em}

/* The main landmark takes focus from the skip link but must not draw a ring
   when the page is simply clicked. */
#main:focus{outline:none}
#main:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}

/* --------------------------------------------------------------------------
   SECTION DIFFERENTIATION

   The featured case study, the work carousel and the testimonials were three
   variations of the same shape: eyebrow, heading, row of cards. Changing only
   the background is not a difference a reader notices — it reads as one long
   section that will not end.

   Each now has its own structure:
     Featured case  split layout, image beside the text, metrics overlapping
     Work carousel  cards that move
     Testimonials   quote-led, with the mark as a graphic element
   -------------------------------------------------------------------------- */

/* ---- Featured case study: asymmetric split -------------------------- */

.feat{background:var(--paper);position:relative;overflow:hidden}
.feat::before{
  content:"";position:absolute;inset:auto auto -10% -12%;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,var(--lime-wash) 0%,transparent 68%);
  pointer-events:none}
.feat__in{display:grid;gap:var(--s-8);align-items:center;position:relative}
@media (min-width:900px){
  .feat__in{grid-template-columns:.85fr 1.15fr;gap:var(--s-10)}
}
.feat__txt h2{max-width:16ch}
.feat__m{position:relative;border-radius:var(--r-2xl);overflow:visible}
.feat__m img,.feat__m .img-slot{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-2xl);display:block}

/* Metrics overlap the image, so the two read as one object rather than a
   picture with a list underneath it. */
.feat__k{
  list-style:none;margin:calc(var(--s-7) * -1) 0 0;padding:var(--s-5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr));
  gap:var(--s-4);max-width:none;
  position:relative;z-index:1;
  margin-inline:var(--s-6);
  background:var(--d-800);color:var(--on-d);
  border-radius:var(--r-lg);
  box-shadow:0 18px 44px rgb(10 26 25/.22)}
.feat__k li{text-align:center}
.feat__k b{
  display:block;font-family:var(--f-head);font-size:var(--t-xl);
  color:var(--lime);line-height:1.05}
.feat__k span{
  display:block;margin-top:var(--s-2);
  font-size:var(--t-2xs);color:var(--on-d-soft);
  letter-spacing:.04em;text-transform:uppercase}

/* ---- Testimonials: quote-led --------------------------------------- */

.tms{position:relative;overflow:hidden}
/* An oversized quote mark, low contrast, as texture rather than decoration */
.tms::before{
  content:"\201C";
  position:absolute;top:-.18em;left:2%;
  font-family:var(--f-head);font-size:clamp(18rem,32vw,30rem);
  line-height:1;color:rgb(195 233 86/.045);
  pointer-events:none;user-select:none}
.tms .head{position:relative;z-index:1}
.tms .car{position:relative;z-index:1}

/* Testimonial cards are wider and shorter than work cards, so the two
   carousels do not read as the same component twice. */
.tms .car__s{flex-basis:min(520px,88%)}
@media (min-width:900px){.tms .car__s{flex-basis:calc(50% - var(--s-5))}}

/* ---- Filter tabs, with counts -------------------------------------- */

.filters span{
  display:inline-block;margin-left:var(--s-2);
  font-size:var(--t-2xs);opacity:.55;font-variant-numeric:tabular-nums}
.filters a.on span{opacity:.75}

/* --------------------------------------------------------------------------
   TESTIMONIALS

   Previously on .dark, directly under the work carousel on .alt. Two carousels
   one after the other read as a single section that will not end, whatever
   colour sits behind them. This one gets its own treatment: a lime field, so
   the eye registers a genuine change of subject.
   -------------------------------------------------------------------------- */

.tms{
  background:linear-gradient(168deg,var(--lime-wash) 0%,var(--lime-soft) 100%);
  color:var(--ink);
  position:relative;overflow:hidden}
.tms::before{
  content:"\201C";
  position:absolute;top:-.2em;left:1.5%;
  font-family:var(--f-head);font-size:clamp(16rem,30vw,26rem);
  line-height:1;color:rgb(13 43 42/.05);
  pointer-events:none;user-select:none}
.tms .eyebrow{color:var(--d-700)}
.tms .eyebrow i{background:var(--d-700)}
.tms h2,.tms .lede{color:var(--ink)}
.tms .lede{color:var(--ink-soft)}
.tms .hl{background-image:linear-gradient(var(--lime-2),var(--lime-2));color:inherit}

/* Cards read as paper on the lime field */
.tms .tm{
  background:var(--paper);border:1px solid rgb(13 43 42/.08);
  box-shadow:0 2px 6px rgb(10 26 25/.04),0 18px 40px rgb(10 26 25/.07)}
.tms .tm blockquote{color:var(--ink)}
.tms .tm .nm{color:var(--ink)}
.tms .tm .rl{color:var(--ink-soft)}
.tms .tm .av{background:var(--d-800);color:var(--on-d)}
.tms .stars{color:var(--d-700)}

/* Controls on a light field */
.tms .car__b{border-color:rgb(13 43 42/.18);color:var(--ink)}
.tms .car__b:hover{background:var(--d-800);color:var(--on-d);border-color:transparent}
.tms .car__pause{border-color:rgb(13 43 42/.18);color:var(--ink)}
.tms .car__p{background:rgb(13 43 42/.12)}
.tms .car__p span{background:var(--d-800)}
.tms .car__n{color:var(--ink-soft)}

/* Wider, shorter cards than the work carousel, so the two never read as the
   same component repeated. */
.tms .car__s{flex-basis:min(520px,88%)}
@media (min-width:900px){.tms .car__s{flex-basis:calc(50% - var(--s-5))}}

/* --------------------------------------------------------------------------
   CONTACT PROMISES

   Three numbered points, not a four-column counter grid. Three items in a grid
   built for four leaves a visible hole at the end of the row.
   -------------------------------------------------------------------------- */

.promises{
  list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media (min-width:760px){.promises{grid-template-columns:repeat(3,1fr);gap:var(--s-8)}}
.promises li{margin:0;padding-top:var(--s-5);border-top:2px solid var(--lime)}
.promises b{
  display:block;font-family:var(--f-head);font-size:var(--t-sm);
  color:var(--lime);letter-spacing:.06em;margin-bottom:var(--s-3)}
.promises h2{
  font-size:var(--t-lg);margin-bottom:var(--s-2);color:var(--on-d);max-width:none}
.promises p{color:var(--on-d-soft);font-size:var(--t-sm);margin:0;max-width:34ch}