/* ============================================================
   0. FONTS - self-hosted
   Google Fonts cost two extra DNS+TLS handshakes on a
   render-blocking path (googleapis for the CSS, then gstatic for the
   files), which showed as unstyled content on slow connections.
   Served from our own origin the browser is already connected to.
   unicode-range is kept, so a visitor only downloads the subsets the
   page actually uses - latin here, latin+cyrillic on /bg.
   ============================================================ */
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-200-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-200-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-200-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-300-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Montserrat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-200-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-200-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-200-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-300-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/MontserratAlternates-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================================
   CARROT DIGITAL — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Monochrome by default. Colour appears only on hover, and only on a card edge.
   Hierarchy is built from weight and size, never from grey text.

   FILE ORDER MATTERS. Sections run:
       1. tokens
       2. reset + base
       3. typography
       4. layout
       5. components
       6. mobile flip card        (overrides component internals)
       7. responsive              (every display:none toggle, in one place)

   Media queries add NO specificity. A rule that hides a component must appear
   AFTER that component declares its own `display`. Keeping all the toggles in
   section 7 makes that true by construction — do not scatter them upward.
   ============================================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink:#231F20;              /* the only text colour, ever */
  --paper:#FFFFFF;
  --rule:rgba(35,31,32,.18);  /* hairlines only, never text */
  --rule-soft:rgba(35,31,32,.10);

  /* hover accents — used on card edges and the glow, never on text */
  --pink:#FFBDF2;
  --lilac:#DEC2FD;
  --green:#57D482;
  --accent:#F26B21;           /* carrot orange — currently unused */

  --r:10px;                   /* cards */
  --r-btn:20px;               /* buttons */

  --wrap:1180px;              /* outer container */
  --measure:860px;            /* reading column */
  --nav-h:44px;               /* every header nav item is this tall */
  --header-h:74px;            /* sticky header height */
}


/* ============================================================
   2. RESET + BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{background:var(--paper);color:var(--ink);
  font-family:'Montserrat',system-ui,sans-serif;font-weight:200;font-size:18px;
  line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--ink);outline-offset:4px}

/* skip link - visible only when focused */
.skip{position:absolute;left:26px;top:-60px;z-index:100;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r) var(--r);font-size:14px;font-weight:500;
  transition:top .15s ease-out}
.skip:focus{top:0}

/* spacing utilities - use these instead of style="" */
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.pt-0{padding-top:0}
.section-tight{padding-bottom:34px}
.mt-lg{margin-top:52px}


/* ============================================================
   3. TYPOGRAPHY
   Two families only. Alternates carries every heading and every
   button; Montserrat carries body text at 200–300.
   ============================================================ */
h1,h2,h3,.alt{font-family:'Montserrat Alternates','Montserrat',sans-serif;
  font-weight:700;line-height:1.14;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:-.03em;margin-bottom:26px}
h1 .light{font-weight:200;letter-spacing:-.02em}   /* extra-light counterpoint */
h2{font-size:clamp(27px,3.8vw,44px);margin-bottom:24px;max-width:22ch}
h3{font-size:clamp(19px,2vw,23px);margin-bottom:12px}
p{color:var(--ink);margin-bottom:18px;max-width:64ch}
b,strong{font-weight:500;color:var(--ink)}

.lede{font-size:clamp(18px,2vw,21px);font-weight:200;max-width:58ch}
.meta{font-size:14px;font-weight:300;margin-top:18px}
.note{font-size:14px;font-weight:300;margin-top:26px;max-width:70ch}
.note + .note{margin-top:10px}
/* small caps label — the only uppercase in the system */
.sm{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:22px}
/* prose list — the reset zeroes padding, so markers need their indent back */
.list{margin:26px 0 0;padding-left:24px;max-width:64ch}
.list li{margin-bottom:12px}
.list li:last-child{margin-bottom:0}


/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.narrow > *{max-width:var(--measure)}   /* keeps a reading column inside a full-width wrap */
section{padding:78px 0}

/* Column-count overrides for any grid whose natural count doesn't suit the
   page — e.g. two pricing tiers in a 4-up .packs, or four case studies in a
   3-up .cases. Deliberately SINGLE-class so they stay at (0,1,0) and lose to
   the collapse rules in section 7; a compound selector like .packs.two would
   outrank them and break the mobile stack. */
.cols-1{grid-template-columns:1fr}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}


/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* ---------- header ---------- */
header.top{position:sticky;top:0;background:var(--paper);z-index:60}
.top-in{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
/* One logo file for both placements — knocked to pure ink in the header and
   inverted to white in the footer, exactly as the live site does it. */
.brand{display:flex;align-items:center;gap:10px;font-family:'Montserrat Alternates',sans-serif;
  font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand img{height:28px;width:auto;filter:brightness(0)}
.brand .mark{width:22px;height:22px;background:var(--ink);
  border-radius:50% 50% 50% 4px;transform:rotate(-12deg)}
.burger{width:46px;height:46px;border:none;background:none;cursor:pointer;flex:0 0 auto;
  display:none;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.burger i{display:block;height:2px;width:26px;background:var(--ink);
  transition:transform .22s ease-out,opacity .18s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- navigation ---------- */
/* Desktop: inline links, with hover/focus dropdowns. The link fills the full
   74px header height so there is no dead gap between it and its panel. */
/* The nav is the only flexible item: it shrinks first, so the brand and the
   CTA keep their size and stay inside the wrap's padding at any width. */
.nav{margin-left:auto;min-width:0;align-self:stretch;display:flex}
/* The CTA is a member of this list, not a sibling of the nav — so it is
   centred by the same align-items as the links and cannot drift from them. */
.nav-list{list-style:none;display:flex;align-items:center;gap:26px}
.nav-list > li{position:relative;display:flex}
.nav-list > li.cta{margin-left:8px}
/* Every item in the row - links AND the CTA - is the same 44px box, centred by
   .nav-list. One rule sizes them all, so the button cannot sit off the others. */
.nav-link{display:flex;align-items:center;gap:6px;height:var(--nav-h);cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:15px;font-weight:400;
  background:none;border:none;color:var(--ink);letter-spacing:0}
.nav-link .chev{width:9px;height:9px;border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease-out}
.has-sub:hover .chev,.has-sub.open .chev{transform:rotate(-135deg) translateY(-2px)}
/* The item is 44px inside a 74px header, so the panel drops to the header's
   bottom edge and an invisible strip bridges the gap for hover. */
.has-sub:after{content:"";position:absolute;top:100%;left:0;right:0;
  height:calc((var(--header-h) - var(--nav-h)) / 2)}
.sub{position:absolute;top:calc(100% + (var(--header-h) - var(--nav-h)) / 2);left:-16px;min-width:240px;z-index:70;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:10px;
  box-shadow:0 18px 44px rgba(35,31,32,.13);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease-out,transform .18s ease-out,visibility .18s}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{
  opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:10px 12px;border-radius:6px;font-size:14.5px;font-weight:300;
  white-space:nowrap;transition:background .15s}
.sub a:hover{background:var(--rule-soft)}
/* .sm is also the small-caps label utility, which carries margin-bottom:22px.
   In the centred nav flex row that margin lifts the button off the links. */
.btn.sm{font-size:14px;padding:11px 22px;min-height:44px;border-width:1.5px;border-radius:14px;
  margin-bottom:0}
.nav-list > li.cta .btn{height:var(--nav-h);min-height:0;flex:0 0 auto}
/* ---------- language switcher ----------
   Both languages are always shown so the reader can see the site exists in
   theirs; the current one is marked, the other is a link. Small-caps like the
   .sm label, but NOT .sm - that utility carries margin-bottom, which would
   lift it off the nav row the same way it did the CTA. */
.lang{display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding-left:18px;margin-left:4px;border-left:1px solid var(--rule)}
.lang [aria-current="true"]{font-weight:700}
.lang a{opacity:.45;transition:opacity .15s}
.lang a:hover,.lang a:focus-visible{opacity:1}
.lang .sep{opacity:.3}
/* In the mobile panel it sits on its own row, away from the link list. */
.mobile-menu .lang{padding:18px 0 0;margin:10px 0 0;border-left:none;
  border-top:1px solid var(--rule);justify-content:flex-start}

.brand{flex:0 0 auto}

/* Mobile panel — one flat list. No group labels and no dividers between
   links; the single ink rule under the header is the only line. */
.mobile-menu{display:none;border-top:1px solid var(--ink);background:var(--paper);
  max-height:calc(100vh - var(--header-h));overflow-y:auto}
.mobile-menu.open{display:block}
.mobile-menu .wrap{padding-top:24px;padding-bottom:36px}
.mobile-menu a{display:block;padding:13px 0;font-size:18px;font-weight:300}
.mobile-menu .btn{width:100%;margin-top:24px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  font-family:'Montserrat Alternates','Montserrat',sans-serif;font-weight:700;
  letter-spacing:-.01em;font-size:17px;padding:18px 34px;
  border:2px solid var(--ink);border-radius:var(--r-btn);cursor:pointer;
  transition:background .18s,color .18s;min-height:54px;text-align:center}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.inv{background:#fff;color:var(--ink);border-color:#fff}      /* on .black */
.btn.inv:hover{background:transparent;color:#fff}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- link CTA ---------- */
/* Arrow nudges right on its own hover, or when the whole card is hovered. */
.go{margin-top:20px;font-family:'Montserrat Alternates','Montserrat',sans-serif;
  font-weight:700;font-size:15px;letter-spacing:-.01em;
  display:inline-block;align-self:flex-start}
.go .ar{display:inline-block;transition:transform .18s ease-out}
.go:hover .ar,.tilt:hover .go .ar{transform:translateX(5px)}

/* ---------- brand marquee ---------- */
/* Two identical sets side by side; translating -50% loops seamlessly. */
.marquee{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;flex:0 0 auto}
.marquee-set img{height:60px;width:auto;margin:0 40px;object-fit:contain;
  filter:grayscale(1) brightness(0);opacity:.72;transition:opacity .2s}
.marquee-set img:hover{opacity:1}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- star rating ---------- */
.stars{display:flex;gap:5px;margin-bottom:12px}
.stars svg{width:18px;height:18px;fill:var(--ink)}
.trust{padding-top:34px;padding-bottom:6px}
.trust p{font-weight:300;font-size:16px;margin-bottom:22px}

/* ---------- hero media ---------- */
/* Capped at the video's native width so it never upscales and softens. */
.hero-media{border-radius:var(--r);overflow:hidden;margin:26px auto 40px;max-width:960px}
.hero-media video{display:block;width:100%;height:auto;background:#FDFDFD}

/* ============================================================
   TILT CARD COMPONENT
   3D tilt toward the cursor + a soft glow that follows it.

   Usage:  <article class="card tilt tilt--pink"> … </article>
           .tilt          base, ink-coloured
           .tilt--pink / --lilac / --green

   The glow element is injected by carrot.js; markup needs only the classes.
   Each variant sets four custom properties:
           --edge      hover border colour
           --ring      1px box-shadow ring, doubles the edge so pale tints
                       stay legible on white without any layout shift
           --g1/--g0   glow centre and its transparent fade-out
   Add a colour by copying one line — nothing else changes.
   ============================================================ */
.tilt{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform;
  transition:transform .22s ease-out,box-shadow .22s ease-out,border-color .22s ease-out;
  --edge:var(--ink);--ring:transparent;--wash:transparent;
  --g1:rgba(35,31,32,.075);--g0:rgba(35,31,32,0)}
.tilt > *{position:relative;z-index:1}
/* The glow clips itself, so a card may use overflow:visible and let content
   hang off the edge (see .case-logo) without losing the rounded glow. */
.tilt-glow{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s;z-index:0;border-radius:inherit;overflow:hidden}
.tilt-glow i{position:absolute;width:120%;height:120%;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--g1) 0%,var(--g0) 55%)}
.tilt:hover{border-color:var(--edge);
  box-shadow:0 0 0 1px var(--ring),0 18px 44px rgba(35,31,32,.13)}
.tilt:hover .tilt-glow{opacity:1}

/* Green sits lower than the pastels — it is far more saturated and reads as a
   stain at matched opacity. */
/* --wash is the flat tint used on touch, where there is no cursor to follow.
   Far weaker than --g1: it covers the whole card rather than a soft spot. */
.tilt--pink {--edge:var(--pink) ;--ring:var(--pink) ;--g1:rgba(255,189,242,.60);--g0:rgba(255,189,242,0);--wash:rgba(255,189,242,.20)}
.tilt--lilac{--edge:var(--lilac);--ring:var(--lilac);--g1:rgba(222,194,253,.60);--g0:rgba(222,194,253,0);--wash:rgba(222,194,253,.20)}
.tilt--green{--edge:var(--green);--ring:var(--green);--g1:rgba(87,212,130,.34) ;--g0:rgba(87,212,130,0);--wash:rgba(87,212,130,.13)}

/* ---------- touch: colour on scroll instead of on hover ----------
   No cursor means the tilt and the glow are pointless, but the colour system
   should not be invisible to half the audience. carrot.js adds .in-view as a
   card crosses the middle of the screen; it fades to its own tint and fades
   back out again. Only the transform is disabled - colour still animates. */
@media(hover:none),(prefers-reduced-motion:reduce){
  .tilt-glow{display:none}
  .tilt{transform:none!important;
    transition:border-color .5s ease-out,background-color .5s ease-out,box-shadow .5s ease-out}
  .tilt:hover{border-color:var(--rule);box-shadow:none}
  .tilt.in-view{border-color:var(--edge);background-color:var(--wash);
    box-shadow:0 0 0 1px var(--ring)}
}
/* A flip face borrows the variant of whichever card it is currently showing,
   so tapping through the deck changes its colour too. */
.face[class*="tilt--"]{border-color:var(--edge);background-color:var(--wash);
  transition:border-color .4s ease-out,background-color .4s ease-out}

/* ---------- plain card (3-up) ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.card{border:1px solid var(--rule);border-radius:var(--r);padding:30px 28px 32px;
  display:flex;flex-direction:column;background:var(--paper)}
.card h3{margin-bottom:14px}
.card p{font-size:16.5px;margin-bottom:0;max-width:none}
/* .card used as a whole-card link: the body has to grow so every .go lands on
   a common baseline, the way .casecard already does. */
.card--link p{flex:1}
.card--link .sm{margin-bottom:14px}

/* ---------- form ---------- */
/* Hairline fields, ink text, no placeholder-as-label. Focus is handled by the
   global :focus-visible ring — do not add a second focus style. */
.form{margin-top:38px;max-width:var(--measure)}
.field{margin-bottom:26px}
.field label{display:block;font-size:11.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:10px}
.field input,.field textarea,.field select{display:block;width:100%;
  font-family:'Montserrat',system-ui,sans-serif;font-size:17px;font-weight:300;
  color:var(--ink);background:var(--paper);line-height:1.6;
  border:1px solid var(--rule);border-radius:var(--r);padding:15px 16px;
  transition:border-color .18s}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--ink)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px;
  padding-right:46px}
/* honeypot - hidden from people, still submitted, catches bots. Not display:none,
   which some bots skip; off-screen so assistive tech ignores it too. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field textarea{min-height:140px;resize:vertical}

/* ---------- article byline + author block ---------- */
/* Avatars reuse the .pill .av pattern: circle, hairline, initials fallback. */
.byline{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-size:14px;font-weight:300}
.byline p{margin-bottom:0;font-size:14px}
.byline .av,.authorbox .av{border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--rule);background:var(--paper);
  display:flex;align-items:center;justify-content:center;font-weight:500}
.byline .av{width:38px;height:38px;font-size:12px}
.authorbox .av{width:66px;height:66px;font-size:18px}
.byline .av img,.authorbox .av img{width:100%;height:100%;object-fit:cover}
.authorbox{display:flex;gap:20px;align-items:flex-start;
  margin-top:52px;padding-top:30px;border-top:1px solid var(--rule)}
.authorbox .nm{font-family:'Montserrat Alternates','Montserrat',sans-serif;font-weight:700;
  font-size:17px;letter-spacing:-.01em;margin-bottom:6px}
.authorbox p{font-size:15px;margin-bottom:0;max-width:56ch}

/* ---------- step card ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.stepcard{border:1px solid var(--rule);border-radius:var(--r);padding:28px 26px 30px;
  display:flex;flex-direction:column}
.stepcard h3{margin-bottom:12px}
.stepcard p{font-size:16.5px;margin-bottom:0;max-width:none}

/* ---------- case card ---------- */
/* Top padding and the grid's top margin exist to clear the overhanging chip. */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:66px}
.casecard{border:1px solid var(--rule);border-radius:var(--r);padding:58px 26px 30px;
  display:flex;flex-direction:column;background:var(--paper);overflow:visible}
.casecard .case-logo{position:absolute;z-index:2;top:-30px;left:26px;width:76px;height:76px;
  border-radius:16px;overflow:hidden;background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 8px 20px rgba(35,31,32,.10)}
.casecard .case-logo img{width:100%;height:100%;object-fit:cover}
/* Centred heading, for a heading that introduces centred content such as the
   testimonial block. Needs max-width:none or it centres inside the 22ch box. */
.h-center{text-align:center;max-width:none;margin-left:auto;margin-right:auto}

/* Marks the switch back from centred content to a left-aligned grid, so the
   change of alignment reads as deliberate rather than accidental. The chip on
   a case card overhangs 30px upward, which eats into the gap below. */
.cases-head{margin-top:96px}
.cases-head h3{margin-bottom:0}
.cases-head + .cases{margin-top:56px}
.casecard .metric{font-family:'Montserrat Alternates',sans-serif;font-weight:800;
  font-size:clamp(26px,3vw,32px);letter-spacing:-.03em;line-height:1.05;margin-bottom:10px}
.casecard h3{font-size:16px;margin-bottom:12px}
.casecard p{font-size:15.5px;font-weight:300;margin-bottom:0;max-width:none;flex:1}

/* ---------- breadcrumb ---------- */
/* Case-study and deep pages only. Pair with BreadcrumbList JSON-LD. */
.crumbs{padding-top:26px;font-size:13px;font-weight:300}
.crumbs a{border-bottom:1px solid transparent;transition:border-color .18s}
.crumbs a:hover{border-bottom-color:var(--ink)}
.crumbs i{font-style:normal;margin:0 9px}

/* ---------- case study head ---------- */
.case-mark{width:72px;height:72px;border-radius:16px;overflow:hidden;
  border:1px solid var(--rule);margin-bottom:24px}
.case-mark img{width:100%;height:100%;object-fit:cover}

/* Fact strip and stat strip: a hairline above marks them as data rather than
   prose. This is a within-component rule, not a section divider. */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  margin-top:42px;padding-top:26px;border-top:1px solid var(--rule)}
.facts dt{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:8px}
.facts dd{font-family:'Montserrat Alternates',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:-.01em;line-height:1.45}
.facts dd a{border-bottom:1px solid transparent;transition:border-color .18s}
.facts dd a:hover{border-bottom-color:var(--ink)}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  margin-top:44px;padding-top:28px;border-top:1px solid var(--rule)}
.stat b{display:block;font-family:'Montserrat Alternates',sans-serif;font-weight:800;
  font-size:clamp(26px,3.2vw,36px);letter-spacing:-.03em;line-height:1}
.stat span{display:block;font-size:14px;font-weight:200;margin-top:10px;max-width:26ch}

/* ---------- captioned figure ---------- */
.figure{margin-top:42px}
.figure img{width:100%;border-radius:var(--r);border:1px solid var(--rule)}
.figure figcaption{margin-top:14px;font-size:14px;font-weight:300;max-width:70ch}

/* ---------- answer block ---------- */
/* A self-contained, quotable answer for AI assistants. One per page, near the
   top, and it must contain the number and read as a complete sentence. */
/* ---------- success panel ----------
   Green is a container colour in this system, never a text colour, so the
   confirmation borrows the tinted card's own treatment: --edge for the border,
   --ring to double it, --wash for the fill. Those three come from .tilt--green
   in the markup - the same one-line variant the cards use - so there is no
   second definition of green to drift. Text stays ink. */
.ok{border:1px solid var(--edge);border-radius:var(--r);background:var(--wash);
  box-shadow:0 0 0 1px var(--ring);padding:24px 26px 26px;margin:34px 0 0;
  max-width:64ch}
.ok:focus{outline:none}            /* focused only to announce it, not to ring it */
.ok .q{font-family:'Montserrat Alternates',sans-serif;font-weight:600;font-size:17px;
  margin-bottom:8px;padding-left:28px;position:relative}
/* Same tick as the .pack lists, in ink. */
.ok .q:before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.9'/%3E%3C/svg%3E") no-repeat center/contain}
.ok p{font-size:16.5px;margin-bottom:0}

.answer{border-left:2px solid var(--ink);padding:4px 0 4px 22px;margin:34px 0 0;max-width:64ch}
.answer .q{font-family:'Montserrat Alternates',sans-serif;font-weight:600;font-size:17px;
  margin-bottom:8px}
.answer p{font-size:16.5px;margin-bottom:0}

/* ---------- price table ---------- */
/* A table, not cards: twelve services with a guarantee column only compare if
   the columns line up. Scrolls sideways on narrow screens rather than
   collapsing, because the comparison is the point. */
.ptable-wrap{margin-top:34px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;min-width:840px;border-collapse:collapse}
.ptable th{text-align:left;vertical-align:bottom;
  font-family:'Montserrat Alternates',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:-.01em;padding:0 22px 14px 0;border-bottom:1px solid var(--ink)}
.ptable td{vertical-align:top;padding:22px 22px 22px 0;font-size:15px;font-weight:200;
  border-bottom:1px solid var(--rule-soft)}
.ptable tr:last-child td{border-bottom:none}
.ptable .svc{min-width:196px}
.ptable .svc a{font-family:'Montserrat Alternates',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:-.01em;border-bottom:1px solid transparent;transition:border-color .18s}
.ptable .svc a:hover{border-bottom-color:var(--ink)}
.ptable .amt{font-family:'Montserrat Alternates',sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.02em;white-space:nowrap;min-width:130px}
.ptable .amt small{display:block;font-family:'Montserrat',sans-serif;font-size:12.5px;
  font-weight:300;letter-spacing:0;margin-top:4px;white-space:normal}
.ptable .gtee{font-size:14px;min-width:230px}
.swipe{display:none;font-size:13px;font-weight:500;margin-top:22px}
@media(max-width:900px){.swipe{display:block}}

/* ---------- problem card (big) ---------- */
/* Leads with the customer's own words, not the service name. */
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.prob{border:1px solid var(--rule);border-radius:var(--r);padding:34px 30px 32px;
  display:flex;flex-direction:column;background:var(--paper);min-height:290px}
.prob .situation{font-family:'Montserrat Alternates',sans-serif;font-weight:700;
  font-size:clamp(21px,2.3vw,26px);line-height:1.2;letter-spacing:-.02em;margin-bottom:16px}
.prob p{font-size:15.5px;font-weight:300;margin-bottom:0;max-width:none;flex:1}
.prob .price{margin-top:22px;font-family:'Montserrat Alternates',sans-serif;
  font-weight:700;font-size:15px}

/* ---------- problem card (compact) ---------- */
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.mini{border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--paper);
  font-family:'Montserrat Alternates',sans-serif;font-weight:700;font-size:15.5px;
  line-height:1.3;letter-spacing:-.01em}
.mini .ar{display:inline-block;flex:0 0 auto;transition:transform .18s ease-out}
.mini:hover .ar{transform:translateX(5px)}

/* ---------- pricing card ---------- */
.packs-head{margin:34px 0 0}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.pack{padding:28px 24px 30px;border:1px solid var(--rule);border-radius:var(--r);
  display:flex;flex-direction:column}
.pack h3{font-size:17px;margin-bottom:0}
.pack .amt{font-family:'Montserrat Alternates',sans-serif;font-weight:800;font-size:29px;
  letter-spacing:-.02em;margin:6px 0 4px}
.pack .amt small{display:block;font-family:'Montserrat',sans-serif;font-size:13px;
  font-weight:300;letter-spacing:0;margin-top:4px}
.pack ul{list-style:none;margin-top:18px;flex:1}
.pack li{font-size:15px;font-weight:300;padding:8px 0 8px 25px;position:relative;
  border-bottom:1px solid var(--rule-soft)}
.pack li:last-child{border-bottom:none}
.pack li:before{content:"";position:absolute;left:0;top:13px;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.9'/%3E%3C/svg%3E") no-repeat center/contain}
.pack .go{margin-top:24px}

/* ---------- testimonials ---------- */
/* Quote text is written into .quote-box q by carrot.js. If a page needs the
   quotes visible to non-rendering crawlers, put them in the HTML instead. */
.testi-block{display:flex;flex-direction:column;align-items:center;gap:38px;
  padding:50px 0 6px;margin-top:20px}
.quote-box{position:relative;padding:0 34px;max-width:640px}
.quote-box .mk{position:absolute;font-family:'Montserrat Alternates',serif;font-size:76px;
  line-height:1;color:rgba(35,31,32,.08);user-select:none;pointer-events:none}
.quote-box .mk.l{left:-6px;top:-26px}
.quote-box .mk.r{right:-6px;bottom:-46px}
.quote-box q{display:block;font-family:'Montserrat Alternates',sans-serif;font-weight:300;
  font-size:clamp(21px,3vw,31px);line-height:1.42;text-align:center;letter-spacing:-.015em;
  quotes:'' '';transition:opacity .4s ease-out,filter .4s ease-out,transform .4s ease-out}
.quote-box.anim q{opacity:0;filter:blur(3px);transform:scale(.985)}
.who{display:flex;flex-direction:column;align-items:center;gap:22px}
.role{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;transition:opacity .5s ease-out,transform .5s ease-out}
.who.anim .role{opacity:0;transform:translateY(8px)}
.pills{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.pill{display:flex;align-items:center;border:none;background:transparent;border-radius:999px;
  cursor:pointer;padding:2px;font-family:'Montserrat',sans-serif;
  transition:background .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}
.pill:hover{background:var(--rule-soft)}
.pill.on{background:var(--ink);padding:6px 16px 6px 6px}
.pill.show{padding:6px 16px 6px 6px}
.pill .av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;background:var(--paper);transition:box-shadow .4s}
.pill.on .av{border-color:transparent;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.pill .av img{width:100%;height:100%;object-fit:cover}
.pill .nm{display:grid;grid-template-columns:0fr;opacity:0;margin-left:0;
  transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1),opacity .4s,margin .5s}
.pill.show .nm,.pill.on .nm{grid-template-columns:1fr;opacity:1;margin-left:9px}
.pill .nm > span{overflow:hidden;white-space:nowrap;font-size:14px;font-weight:400}
.pill.on .nm > span{color:var(--paper)}

/* ---------- rotating statement ---------- */
/* One word cycles through a list. Words are stacked absolutely and clipped by
   the line box, so the layout never shifts as the word changes length.
   The easing overshoots slightly to read as a spring rather than a slide. */
.rotator{max-width:780px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:28px}
/* Left-aligned variant: pins the word's left edge so only the right edge moves
   as the word changes length, and keeps the section on the page's left axis. */
.rotator--left{margin:0;align-items:flex-start;text-align:left}
.rotator h2{max-width:none;margin:0;font-size:clamp(30px,5vw,54px);line-height:1.12}
.rot{position:relative;display:block;overflow:hidden;height:1.2em}
.rot > span{position:absolute;left:0;right:0;top:0;line-height:1.2;font-weight:800;
  opacity:0;transform:translateY(115%);
  transition:transform .62s cubic-bezier(.22,1.35,.36,1),opacity .42s ease-out}
.rot > span.up{transform:translateY(-115%)}
.rot > span.on{opacity:1;transform:translateY(0)}
.rotator p{max-width:60ch;margin:0;font-size:clamp(17px,2vw,20px);font-weight:200}
.rotator .btn{margin-top:6px}
/* with motion off, only the first word is shown - no jumping */
@media(prefers-reduced-motion:reduce){
  .rot > span{opacity:0;transform:none}
  .rot > span:first-child{opacity:1}
}

/* screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- pull quote ---------- */
.pullquote{margin-top:38px;max-width:640px}
.pullquote q{display:block;font-family:'Montserrat Alternates',sans-serif;font-weight:300;
  font-size:clamp(21px,2.8vw,29px);line-height:1.4;letter-spacing:-.015em;
  quotes:'\201C' '\201D'}
.pullquote figcaption{margin-top:16px;font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase}

/* ---------- FAQ ---------- */
/* <details>/<summary>: no JS, and the answers stay in the HTML for crawlers. */
/* No rules between items - the bold summaries and the spacing do the
   separating, consistent with the rest of the page. */
.faq{margin-top:38px;max-width:var(--measure)}
.faq details + details{margin-top:10px}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:18px 52px 18px 0;
  font-family:'Montserrat Alternates',sans-serif;font-weight:600;
  font-size:clamp(17px,2vw,20px);line-height:1.35;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:10px;top:14px;
  font-family:'Montserrat',sans-serif;font-weight:200;font-size:28px;line-height:1;
  transition:transform .22s ease-out}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 52px 22px 0}
.faq .a p{font-size:16.5px;margin-bottom:14px;max-width:70ch}
.faq .a p:last-child{margin-bottom:0}

/* ---------- inverted section ---------- */
.black{background:var(--ink);color:#fff}
.black h2,.black h3,.black p,.black li{color:#fff}
.promise{list-style:none;margin-top:34px;border-top:1px solid rgba(255,255,255,.24)}
.promise li{font-size:clamp(18px,2.2vw,23px);font-weight:200;padding:22px 0 22px 46px;
  border-bottom:1px solid rgba(255,255,255,.24);position:relative;max-width:none}
.promise li svg{position:absolute;left:2px;top:26px;width:22px;height:22px;stroke:#fff;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* ---------- footer ---------- */
/* Inverted block. The logo is the same file as the header, flipped to white. */
footer{background:var(--ink);color:#fff;padding:72px 0 46px;font-size:14px;font-weight:200}
footer a{color:#fff}
footer .brand img{filter:brightness(0) invert(1)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:40px 30px}
.foot-brand .brand{margin-bottom:20px}
.foot-brand p{color:#fff;font-size:15px;font-weight:200;max-width:36ch;margin:0}
/* column headings: Alternates bold, sentence case */
.foot-title{font-family:'Montserrat Alternates',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:-.01em;margin-bottom:12px}
/* items: Montserrat extra light */
.foot-col a,.foot-col span{display:block;padding:7px 0;font-size:15px;font-weight:200}
.foot-col a{width:fit-content;border-bottom:1px solid transparent;transition:border-color .18s}
.foot-col a:hover{border-bottom-color:#fff}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;font-weight:200}


/* ============================================================
   6. MOBILE FLIP CARD
   Below 760px a grid of cards collapses to one tappable card that
   cycles through them. carrot.js CLONES the real cards, so the copy
   lives in exactly one place and mobile can never drift from desktop.

   Markup:
     <div class="flipwrap" data-flip-src=".packs .pack">
       <div class="flip" tabindex="0"> <div class="flip-in">
         <div class="face front"><span class="dot"></span><div class="fc"></div></div>
         <div class="face back" ><span class="dot"></span><div class="fc"></div></div>
       </div></div>
       <div class="flip-measure" aria-hidden="true"></div>
     </div>

   This section comes after the components on purpose: it overrides their
   internals (borders, padding, the case chip's positioning).
   ============================================================ */
.flipwrap{display:none;margin-top:32px}
.flip{position:relative;perspective:1400px;cursor:pointer;min-height:330px;
  -webkit-tap-highlight-color:transparent}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1)}
.flip.is-flipped .flip-in{transform:rotateY(180deg)}
.flip.no-anim .flip-in{transition:none}
/* iOS Safari intermittently ignores backface-visibility inside a preserve-3d
   parent, so both faces paint at once mid-flip and the text overlaps (the back
   one mirrored). The opacity swap below is the guarantee: it fires at .275s,
   half of the .55s flip, where the card is edge-on at 90deg and neither face is
   legible - so the switch is invisible even when backface-visibility works. */
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  padding:28px 26px;display:flex;flex-direction:column;
  opacity:1;transition:opacity 0s linear .275s}
.face.back{transform:rotateY(180deg);opacity:0}
.flip.is-flipped .face.front{opacity:0}
.flip.is-flipped .face.back{opacity:1}
/* The snap-back to 0deg is instant, so its swap must be too - with the .275s
   delay still applied both faces would be hidden for a moment and the card
   would blink empty. */
.flip.no-anim .face{transition:none}
.face h3{margin-bottom:12px}
.face p{font-size:16.5px;margin-bottom:0;max-width:none}
.face .fc{display:flex;flex-direction:column;flex:1}
/* A cloned card drops its own chrome — the face already provides it. */
.face .card,.face .stepcard,.face .pack,.face .casecard{
  border:none;border-radius:0;padding:0;background:none;box-shadow:none;
  transform:none;width:100%;flex:1}
/* No card border to straddle inside a face, so the chip joins normal flow. */
.face .casecard .case-logo{position:static;width:60px;height:60px;
  margin-bottom:16px;box-shadow:none}
/* Tap affordance: solid core, two softer haloes stepping outward. Sits on the
   same row as the first line of content, or as the case-study logo. */
.dot{position:absolute;top:38px;right:24px;width:10px;height:10px;border-radius:50%;
  background:var(--lilac);
  box-shadow:0 0 0 6px rgba(222,194,253,.42),0 0 0 13px rgba(222,194,253,.15);
  animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 6px rgba(222,194,253,.42),0 0 0 13px rgba(222,194,253,.15)}
  50%    {box-shadow:0 0 0 3px rgba(222,194,253,.60),0 0 0 8px rgba(222,194,253,.24)}
}
.flip-measure{position:absolute;visibility:hidden;pointer-events:none;left:-9999px;top:0}


/* ============================================================
   6b. BLOG ARTICLE
   The base h1/h2/h3 sizes are display sizes tuned for landing pages. Inside a
   long article they have to sit much closer to the body text, so this scope
   resets the scale and the rhythm. Nothing here leaks outside .post.
   ============================================================ */
.post{max-width:var(--measure)}
.post > :first-child{margin-top:0}
.post h2{font-size:clamp(23px,2.6vw,31px);max-width:34ch;margin:54px 0 16px}
.post h3{font-size:clamp(18px,1.7vw,20.5px);margin:34px 0 10px}
.post h4{font-family:'Montserrat Alternates','Montserrat',sans-serif;font-weight:600;
  font-size:17px;letter-spacing:-.01em;margin:26px 0 8px}
.post p{margin-bottom:18px;max-width:none}
/* The global reset zeroes list padding, so markers need their indent back. */
.post ul,.post ol{margin:0 0 20px;padding-left:24px}
.post li{margin-bottom:9px}
.post li:last-child{margin-bottom:0}
/* Body links are underlined - in a wall of prose colour alone is not enough
   to mark them, and the palette has no link colour to spare. */
.post a:not(.btn){text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--rule);
  transition:text-decoration-color .15s}
.post a:not(.btn):hover{text-decoration-color:var(--ink)}

/* Breadcrumb - same small-caps treatment as .sm but inline and marginless. */
.crumb{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:20px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.crumb span{opacity:.45;padding:0 7px}

/* Byline under the article lede. */
.post-meta{font-size:13.5px;font-weight:300;margin-top:22px;margin-bottom:0}


/* ============================================================
   7. RESPONSIVE
   Every display toggle lives here, after all components. This is what
   guarantees the hide rules win — see the note at the top of the file.
   ============================================================ */
@media(max-width:980px){
  .cards3{grid-template-columns:1fr 1fr}
  .packs{grid-template-columns:repeat(2,1fr)}
  .cols-4{grid-template-columns:repeat(2,1fr)}   /* 4-up never jumps straight to 1 */
}
@media(max-width:860px){
  .cases{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .probs{grid-template-columns:1fr}
  .minis{grid-template-columns:1fr}
  .prob{min-height:0}
}
/* Nav collapses to the burger. Declared here, after .nav and .burger, so the
   hide/show wins — see the note at the top of the file. */
@media(max-width:1000px){
  .nav{display:none}      /* takes the CTA with it - it lives in the list */
  .burger{display:flex}
}
@media(max-width:760px){
  /* A grid only disappears if it has opted in by carrying .has-flip, meaning
     a .flipwrap on the page takes over. Without it the grid simply stacks -
     otherwise a page that adds cards but no flip loses them on mobile. */
  .cards3.has-flip,.packs.has-flip,.cases.has-flip,.steps.has-flip,.probs.has-flip{display:none}
  .cards3,.packs,.cases{grid-template-columns:1fr}
  .flipwrap{display:block}
  .marquee{padding:10px 0}
  .marquee-set img{height:40px;margin:0 26px}
  .marquee-track{animation-duration:26s}
}
@media(max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:760px){
  .facts,.stat-row{grid-template-columns:1fr 1fr;gap:22px}
}
@media(max-width:640px){
  body{font-weight:300}          /* 200 is too thin at small sizes */
  footer{padding:56px 0 40px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  section{padding:56px 0}
  .btn{width:100%}
  .btnrow{flex-direction:column}
  .quote-box{padding:0 18px}
  .quote-box .mk{font-size:56px}
  .testi-block{padding-top:32px}
  .faq summary{padding-right:40px}
  .faq .a{padding-right:0}
  .promise li{padding-left:38px}
  .promise li svg{width:19px;height:19px;top:25px;left:0}
}
@media(max-width:600px){
  .packs{grid-template-columns:1fr}
}