:root{
    --sand:        #F3F5F0;
    --sand-deep:   #E9ECE4;
    --ink:         #1E2B27;
    --sea-deep:    #2F4F49;
    --glass-green: #8FB8A4;
    --glass-aqua:  #AFD0C9;
    --glass-amber: #C9A268;
    --glass-amber-text: #876430;
    --glass-grey:  #B9C4BE;
    --white:       #FFFFFF;
    --error:       #A6483D;
    --radius-soft: 8px;
    --max: 1180px;
    --gap: 16px;
    --shadow-soft: 0 14px 30px -18px rgba(47,79,73,0.35);
    --shadow-soft-hover: 0 20px 36px -18px rgba(47,79,73,0.42);

    /* Type scale: ratio 1.2 ("minor third"), rounded to practical values.
       Every font-size in this file resolves to one of these steps,
       no ad hoc sizes. Base is 1rem = 17px (see html{} below), so the
       scale still honours a user's browser/OS text-size preference
       instead of being pinned to a hard pixel value. */
    --fs-2xs:  0.7rem;    /* ~12px: mono labels, eyebrows, tags */
    --fs-xs:   0.85rem;   /* ~14px: captions, secondary/meta text */
    --fs-sm:   0.95rem;   /* ~16px: dense UI text, nav links */
    --fs-base: 1rem;      /* 17px:  body copy */
    --fs-md:   1.2rem;    /* ~20px: lead paragraphs, sub-heads */
    --fs-lg:   1.45rem;   /* ~25px: card/component headings (h3) */
    --fs-xl:   1.75rem;   /* ~30px: section headings (h2) */
    --fs-2xl:  2.1rem;    /* ~36px: display h1 / hard numbers */
    --fs-3xl:  2.5rem;    /* ~42px: large page-hero h1 */

    --lh-tight: 1.1;      /* large display type only */
    --lh-heading: 1.25;   /* headings under --fs-xl: room to wrap */
    --lh-body: 1.6;       /* running text */
  }

  *{ box-sizing:border-box; }
  html{ font-size:106.25%; scroll-behavior:smooth; } /* 1rem = 17px at default browser zoom, but still scales with user font-size prefs */
  body{
    margin:0;
    background:var(--sand);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:var(--fs-base);
    line-height:var(--lh-body);
    -webkit-font-smoothing:antialiased;
  }
  .page-bg{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    opacity:0.25;
    background-image:url("pebble-bg.svg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top;
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    line-height:var(--lh-heading);
    margin:0;
    color:var(--sea-deep);
  }
  h1{ font-size:var(--fs-2xl); line-height:var(--lh-tight); }
  h2{ font-size:var(--fs-xl); }
  h3{ font-size:var(--fs-lg); }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:var(--fs-2xs);
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sea-deep);
    opacity:0.8;
    display:block;
    margin-bottom:14px;
  }
  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
  section{ padding:64px 0; background:rgba(255,255,255,0.72); }
  @media (max-width:720px){
    section{ padding:28px 0; }
    .wrap{ padding:0 20px; }
    body{ padding-bottom:68px; } /* room for the sticky mobile CTA bar */
    .how-we-work{ padding:26px 0; }
    .hero p.hero-subtitle{ margin:8px 0 0; }
  }

  /* ---------- STICKY MOBILE CTA ---------- */
  .mobile-cta-bar{
    display:none;
  }
  /* Matches the nav collapse breakpoint: the header CTA hides at 900px, so the
     sticky bar has to take over at the same width or there is a band with no
     visible call to action. */
  @media (max-width:900px){
    .mobile-cta-bar{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45;
      background:rgba(243,245,240,0.94);
      backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      border-top:1px solid rgba(47,79,73,0.15);
      padding:12px 20px;
      box-shadow:0 -8px 20px -12px rgba(47,79,73,0.25);
    }
    .mobile-cta-bar .btn{
      width:100%; justify-content:center; padding:14px 20px; font-size:var(--fs-base);
    }
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--sea-deep);
    outline-offset:3px;
  }

  .skip-link{
    position:absolute; left:-9999px; top:0;
    background:var(--sea-deep); color:var(--white);
    padding:12px 20px; z-index:100; border-radius:0 0 4px 0;
    font-size:var(--fs-sm); font-weight:600; text-decoration:none;
  }
  .skip-link:focus{
    left:0;
  }

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(243,245,240,0.86);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(47,79,73,0.1);
  }
  /* On pages with a hero (home): float the nav over the hero panel itself
     instead of stacking a separate bar above it, so the nav no longer adds
     its own row of height before the hero, a standard overlaid-nav pattern.
     The translucent, blurred background keeps text legible over any image
     behind it without needing separate light/dark nav variants. */
  body.has-hero header.site{
    position:absolute; top:0; left:0; right:0; border-bottom:none;
  }
  nav{
    max-width:var(--max); margin:0 auto; padding:18px 32px;
    display:flex; align-items:center; justify-content:space-between;
    position:relative;
  }
  .brand{
    display:flex; align-items:center; gap:12px; text-decoration:none;
    border-radius:4px; padding:4px; margin:-4px;
    transition:background 0.15s ease;
  }
  .brand:hover, .brand:focus-visible{ background:rgba(47,79,73,0.08); }
  .brand:hover .brand-word, .brand:focus-visible .brand-word{ text-decoration:underline; text-decoration-color:var(--glass-amber); text-decoration-thickness:2px; text-underline-offset:3px; }
  .brand-mark{ width:44px; height:44px; }
  .brand-word{
    /* Logo/wordmark: an identity element, deliberately outside the
       content type scale (same convention as sizing a brand mark in px). */
    font-family:'Fraunces', serif; font-style:italic; font-weight:500;
    font-size:1.9rem; color:#1E3733; letter-spacing:0.01em; line-height:1;
    white-space:nowrap;
    display:flex; flex-direction:column; align-items:flex-end;
  }
  .brand-word-sub{
    display:block;
    font-size:0.5em;
    font-weight:500;
    letter-spacing:0.14em;
    line-height:1;
    margin-top:0.22em;
    opacity:0.85;
  }
  .nav-links{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
  .nav-links a{
    text-decoration:none; font-size:var(--fs-sm); font-weight:500; color:var(--ink);
    padding:6px 4px; margin:0 -4px; border-radius:3px;
    border-bottom:2px solid transparent;
    transition:color 0.15s ease, border-bottom-color 0.15s ease, background 0.15s ease, font-weight 0.15s ease;
  }
  .nav-links a:hover, .nav-links a:focus-visible{
    color:var(--sea-deep); font-weight:700;
    background:rgba(143,184,164,0.22); border-bottom-color:var(--glass-amber-text);
  }
  .nav-links a[aria-current="page"],
  .nav-links a.nav-current{
    color:var(--glass-amber-text); font-weight:700; border-bottom-color:var(--glass-amber-text);
  }
  .nav-cta{
    background:var(--sea-deep); color:var(--white); padding:9px 18px;
    border-radius:3px; text-decoration:none; font-size:var(--fs-xs); font-weight:600;
    border:1px solid var(--sea-deep);
    transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }
  .nav-cta:hover, .nav-cta:focus-visible{
    background:#16221F; border-color:#16221F; transform:translateY(-1px);
    box-shadow:0 6px 16px -6px rgba(30,43,39,0.55);
  }

  /* Mobile nav toggle (accessible button, JS-driven) */
  .nav-toggle-btn{
    display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    cursor:pointer; min-width:44px; min-height:44px; margin-left:14px; -webkit-tap-highlight-color:transparent;
    background:none; border:2px solid transparent; border-radius:4px;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .nav-toggle-btn:hover, .nav-toggle-btn:focus-visible{
    background:rgba(47,79,73,0.14); border-color:rgba(47,79,73,0.3);
  }
  .nav-toggle-btn .bar{
    width:22px; height:2px; background:var(--sea-deep); display:block; border-radius:1px;
    transition:transform 0.2s ease, opacity 0.2s ease, background 0.15s ease;
  }
  .nav-toggle-btn:hover .bar, .nav-toggle-btn:focus-visible .bar{ background:var(--glass-amber-text); }

  /* Collapses to the burger at 900px, not 760px: with About the bar carries
     seven items plus the CTA, which no longer fits between ~760 and ~860
     (iPad portrait sits right in that band). */
  @media (max-width:900px){
    .nav-toggle-btn{ display:flex; }
    .nav-links{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:2px;
      background:var(--sand); border-bottom:1px solid rgba(47,79,73,0.12);
      padding:8px 22px 20px; margin:0;
      box-shadow:0 16px 24px -18px rgba(47,79,73,0.3);
      opacity:0; pointer-events:none; transform:translateY(-6px);
      transition:opacity 0.2s ease, transform 0.2s ease;
    }
    .nav-links a{
      padding:14px 12px; margin:0 -12px; border-bottom:1px solid rgba(47,79,73,0.08); font-size:var(--fs-base);
      border-radius:4px;
    }
    .nav-links a:hover, .nav-links a:focus-visible{ background:rgba(143,184,164,0.28); }
    .nav-links.nav-open{
      opacity:1; pointer-events:auto; transform:translateY(0);
    }
    .nav-toggle-btn[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .nav-toggle-btn[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
    .nav-toggle-btn[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
    .brand-mark{ width:38px; height:38px; }
    .brand-word{ font-size:1.5rem; align-items:center; }
    .brand-word-sub{ letter-spacing:0.1em; }
    .nav-cta{ display:none; }
  }

  @media (max-width:380px){
    .brand-mark{ width:34px; height:34px; }
    .brand-word{ font-size:1.3rem; }
    .brand{ gap:9px; }
  }

  /* Landscape phones: short viewport, so keep the header shallow */
  @media (max-width:900px) and (orientation:landscape) and (max-height:500px){
    nav{ padding:10px 20px; }
    .brand-mark{ width:32px; height:32px; }
    .brand-word{ font-size:1.25rem; align-items:center; }
    .brand-word-sub{ letter-spacing:0.1em; }
    .nav-links{ max-height:70vh; overflow-y:auto; }
  }

  /* ---------- HERO ROTATOR: 4 full-height slides, auto-rotating ---------- */
  /* Each slide is a full-height square photo with an opaque text panel
     overlaid on the left: the panel is near-solid (not a light tint)
     specifically so body text stays high-contrast/AA-compliant
     regardless of what's underneath it in the image. */
  .hero{
    padding:0; overflow:hidden; position:relative;
    max-width:var(--max); margin:0 auto; background:var(--sand);
  }
  .hero-slides{ position:relative; }
  .visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }


  /* Only the active slide ever renders, true regardless of whether JS
     has run yet, so panels always rotate in place via the nav controls
     and never stack on top of each other (e.g. on first paint, or if
     the enhancement script is slow/blocked). JS's job is just to move
     the .is-active class and wire up the controls below. */
  .hero-slide:not(.is-active){ display:none; }
  .hero-slide.is-active{ display:flex; }
  .hero.is-carousel .hero-slide.is-active{ animation:hero-fade-in 0.5s ease; }
  @keyframes hero-fade-in{
    from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); }
  }

  .hero-banner{
    position:relative; min-height:0; width:100%;
    display:flex; align-items:stretch;
  }
  .hero-media{
    position:absolute; inset:0; z-index:0;
    -webkit-mask-image:linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  }
  .hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero-copy{
    position:relative; z-index:1;
    width:min(48%, 560px); min-width:340px;
    background:rgba(255,255,255,0.96);
    padding:56px 44px;
    display:flex; flex-direction:column; justify-content:center;
    box-shadow:24px 0 48px -24px rgba(30,43,39,0.35);
  }
  /* Clears the floating overlaid nav (body.has-hero header.site) so the
     eyebrow/heading never render underneath it. */
  body.has-hero .hero-copy{ padding-top:132px; }
  .hero h1, .hero-copy h2{ font-size:clamp(var(--fs-2xl), 3.2vw, var(--fs-3xl)); line-height:var(--lh-tight); }
  .hero p.hero-subtitle{
    font-size:var(--fs-md); line-height:1.55; max-width:46ch; margin:12px 0 0; color:var(--ink); opacity:0.85;
  }
  .btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:3px; text-decoration:none;
    font-weight:600; font-size:var(--fs-sm); border:1px solid transparent;
  }
  .btn-primary{ background:var(--glass-amber); color:var(--ink); }
  .btn-primary:hover{ background:#bb9257; }
  .btn-ghost{ border-color:var(--sea-deep); color:var(--sea-deep); }
  .btn-ghost:hover{ background:rgba(47,79,73,0.06); }

  /* Controls: a single set, positioned over the bottom of the text panel */
  .hero-controls{ display:none; }
  .hero.is-carousel .hero-controls{
    display:flex; align-items:center; gap:14px;
    position:absolute; z-index:2; left:44px; bottom:28px;
  }
  .hero-arrow, .hero-toggle{
    background:rgba(255,255,255,0.9); border:1px solid rgba(47,79,73,0.25); color:var(--sea-deep);
    width:34px; height:34px; border-radius:50%; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease;
  }
  .hero-arrow:hover, .hero-arrow:focus-visible,
  .hero-toggle:hover, .hero-toggle:focus-visible{
    background:rgba(143,184,164,0.3); border-color:var(--sea-deep);
  }
  .hero-arrow svg{ width:16px; height:16px; }
  .hero-dots{ display:flex; gap:8px; }
  .hero-dot{
    width:9px; height:9px; border-radius:50%; border:1px solid var(--sea-deep);
    background:transparent; padding:0; cursor:pointer;
  }
  .hero-dot.is-active{ background:var(--sea-deep); }
  .hero-toggle svg{ width:14px; height:14px; }
  .hero-toggle .icon-play{ display:none; }
  .hero-toggle[aria-pressed="true"] .icon-pause{ display:none; }
  .hero-toggle[aria-pressed="true"] .icon-play{ display:block; }

  @media (max-width:900px){
    .hero-banner{ min-height:0; display:block; }
    .hero.is-carousel .hero-banner{ position:relative; }
    .hero.is-carousel .hero-slide.is-active{ display:block; }
    .hero-media{ display:none; }
    .hero-copy{
      position:static; width:auto; min-width:0; box-shadow:none;
      padding:28px 20px 76px; background:var(--sand);
    }
    body.has-hero .hero-copy{ padding-top:96px; }
    .hero.is-carousel .hero-controls{
      left:0; right:0; bottom:16px; justify-content:space-between; padding:0 16px;
    }
    .hero-dots, .hero-toggle{ display:none; }
    .hero-arrow{
      width:48px; height:48px;
      box-shadow:0 8px 20px rgba(47,79,73,0.2);
    }
    .hero-arrow svg{ width:22px; height:22px; }
  }

  /* ---------- HOW WE WORK (three engagement cards, full detail on /process.html) ---------- */
  .how-we-work{
    padding:64px 0;
    background:var(--glass-aqua);
  }
  .how-we-work-lede{
    font-size:var(--fs-md); line-height:1.55; opacity:0.85; max-width:62ch; margin:0 0 32px;
  }
  .work-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
  @media (max-width:900px){ .work-cards{ grid-template-columns:1fr; } }
  .work-card{
    display:flex; flex-direction:column; overflow:hidden;
    text-decoration:none; color:inherit;
    background:var(--white); border:1.5px solid rgba(47,79,73,0.4);
    border-radius:var(--radius-soft);
    transition:box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .work-card:hover, .work-card:focus-visible{
    box-shadow:var(--shadow-soft-hover); border-color:var(--sea-deep);
  }
  .work-card-icon{ width:36px; height:36px; color:var(--sea-deep); margin-bottom:14px; }
  .work-card-image{ display:block; width:100%; height:auto; }
  .work-card-body{
    flex:1; min-height:0; display:flex; flex-direction:column;
    align-items:center; text-align:center;
    padding:20px 24px 26px;
  }
  .work-card h3{ margin:0 0 8px; font-size:1.6rem; }
  .work-card-link{ margin-top:auto; padding-top:14px; font-weight:600; font-size:var(--fs-sm); color:var(--sea-deep); }

  /* Below 640px, cards go from a tall stack (full-width image, then
     centred text underneath) to a compact centred layout: a small
     thumbnail and heading centred together, with the link as its own
     full-width row underneath, set off by a divider. The icon is
     dropped at this size, it's redundant next to the heading once space
     is this tight. min-width:0 on the body is load-bearing: without it
     a flex child refuses to shrink below its text's natural width and
     the heading pushes the card wider than the screen instead of
     wrapping. */
  @media (max-width:640px){
    .work-card{ flex-direction:column; align-items:center; text-align:center; }
    .work-card-image{ width:64px; height:64px; margin-top:20px; object-fit:cover; border-radius:4px; }
    .work-card-icon{ display:none; }
    .work-card-body{
      width:100%; flex:1; min-width:0;
      align-items:center; text-align:center;
      padding:12px 20px 0;
    }
    .work-card h3{ font-size:1.15rem; margin:0 0 4px; }
    .work-card-link{
      display:block; width:100%; margin-top:14px; padding:14px 20px;
      border-top:1px solid rgba(47,79,73,0.15);
    }
  }

  /* ---------- PAIN + OUTCOME, MERGED ----------
     One section carries both the recognisable-jobs list and the
     savings/growth payoff, so a reader gets problem and outcome in a
     single scan instead of two separate text blocks. The pain items are
     deliberately generic: these are the shapes admin takes in almost any
     small business, so a reader identifies with the job rather than
     needing their trade named. */
  .pain{ background:var(--sand-deep); }
  .pain-line{
    font-family:'Fraunces', serif; font-weight:500; color:var(--sea-deep);
    font-size:clamp(var(--fs-xl), 2.6vw, var(--fs-2xl)); line-height:1.4; max-width:38ch; margin:0;
  }
  .pain-tags{
    list-style:none; margin:26px 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:10px 12px; max-width:76ch;
  }
  .pain-tags li{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,0.7); border:1px solid rgba(47,79,73,0.25);
    border-radius:999px; padding:8px 14px 8px 10px;
    font-size:var(--fs-sm); color:var(--ink); opacity:0.9;
  }
  .pain-tag-icon{ width:16px; height:16px; flex-shrink:0; color:var(--sea-deep); }

  .pillars-compact{ margin-top:40px; padding-top:32px; border-top:1px solid rgba(47,79,73,0.15); }
  .pillars-compact-heading{ font-weight:700; font-size:var(--fs-lg); margin:0 0 18px; color:var(--sea-deep); }
  .pillars{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
  @media (max-width:700px){ .pillars{ grid-template-columns:1fr; } }
  .pillar{
    display:flex; align-items:flex-start; gap:16px;
    background:rgba(255,255,255,0.7); border:1.5px solid rgba(47,79,73,0.4);
    border-radius:var(--radius-soft); padding:20px 22px;
  }
  .pillar-icon{ width:34px; height:34px; flex-shrink:0; margin-top:2px; color:var(--sea-deep); }
  .pillar-body h4{ font-weight:700; margin:0 0 8px; font-size:var(--fs-md); }
  .pillar-body p{ font-size:var(--fs-sm); line-height:1.55; opacity:0.85; margin:0; }

  @media (max-width:700px){
    .pillar{ flex-direction:column; align-items:center; text-align:center; }
    .pillar-icon{ margin-top:0; }
  }

  .pain .btn-row{ margin-top:28px; }

  /* ---------- SECTION HEADING (promoted from the small eyebrow label to a
     full heading, used where a section has no separate, bigger headline) ---------- */
  .section-heading{
    font-weight:700; font-size:clamp(var(--fs-xl), 2.6vw, var(--fs-2xl)); margin-bottom:8px;
  }

  /* ---------- CASE STUDY / PROOF ---------- */
  .case{ }
  .case-lede{ font-size:var(--fs-md); line-height:1.55; max-width:66ch; opacity:0.85; margin:0 0 30px; }
  .proof-stats{
    display:flex; gap:40px; flex-wrap:wrap; margin:0 0 36px;
    padding:26px 0; border-top:1px solid rgba(47,79,73,0.15); border-bottom:1px solid rgba(47,79,73,0.15);
  }
  .proof-stats div strong{ display:block; font-family:'Fraunces',serif; font-size:var(--fs-3xl); line-height:var(--lh-tight); color:var(--glass-amber-text); }
  .proof-stats div span{ font-size:var(--fs-sm); opacity:0.75; }

  /* Reads the enterprise numbers back down to size, so they land as
     reassurance rather than as a business the reader can't afford. */
  .proof-stats:has(+ .proof-bridge){ margin-bottom:18px; }
  .proof-bridge{
    font-family:'Fraunces', serif; font-weight:500;
    font-size:var(--fs-md); line-height:1.4; color:var(--sea-deep);
    margin:0 0 34px;
  }
  .case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
  @media (max-width:900px){ .case-grid{ grid-template-columns:1fr; } }
  .case-mini{
    display:block; text-decoration:none; color:inherit;
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.8);
    border-radius:var(--radius-soft); padding:28px 26px;
    box-shadow:var(--shadow-soft);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    max-width:640px;
  }
  .case-mini:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-soft-hover);
  }
  .case-mini h3{ margin:14px 0 10px; }
  .case-mini p{ font-size:var(--fs-xs); line-height:1.5; opacity:0.78; margin:0 0 16px; }
  .case-link{
    font-family:'IBM Plex Mono',monospace; font-size:var(--fs-xs); letter-spacing:0.02em;
    color:var(--glass-amber-text); font-weight:500;
  }
  .case-tag{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:var(--fs-2xs);
    letter-spacing:0.08em; text-transform:uppercase; color:var(--sea-deep);
    background:var(--glass-aqua); padding:5px 10px; border-radius:2px; margin-bottom:18px;
  }
  .case-all-link{ display:inline-block; margin-top:22px; font-weight:600; font-size:var(--fs-sm); color:var(--sea-deep); text-decoration:none; }
  .case-all-link:hover{ text-decoration:underline; }

  /* ---------- FAQ ---------- */
  .faq-intro{
    max-width:760px; margin:0 auto 40px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  }
  .faq-intro p{ margin:0; max-width:52ch; font-size:var(--fs-base); color:var(--ink); opacity:0.85; }
  .faq-intro .btn{ flex-shrink:0; }
  @media (max-width:640px){
    .faq-intro{ flex-direction:column; align-items:flex-start; margin-bottom:28px; }
  }
  .faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  .faq-item{
    background:var(--white);
    border:1px solid rgba(47,79,73,0.12);
    border-radius:var(--radius-soft);
    overflow:hidden;
  }
  .faq-item summary{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:20px 24px; cursor:pointer; min-height:44px;
    font-family:'Fraunces', serif; font-weight:500; font-size:var(--fs-md); line-height:1.35;
    color:var(--sea-deep); list-style:none;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::marker{ content:""; }
  .faq-item summary:hover{ background:rgba(143,184,164,0.08); }
  .faq-item summary:focus-visible{ outline:2px solid var(--sea-deep); outline-offset:-2px; }
  .faq-chevron{ width:18px; height:18px; flex-shrink:0; color:var(--glass-amber-text); transition:transform 0.25s ease; }
  .faq-item[open] .faq-chevron{ transform:rotate(180deg); }
  .faq-answer{ padding:0 24px 22px; }
  .faq-answer p{ margin:0; font-size:var(--fs-base); line-height:1.65; color:var(--ink); opacity:0.85; max-width:66ch; }
  @media (max-width:640px){
    .faq-item summary{ padding:16px 18px; }
    .faq-answer{ padding:0 18px 18px; }
  }

  /* ---------- GET INVOLVED ---------- */
  .involve{ background:var(--sea-deep); text-align:center; }
  .involve .wrap{ max-width:640px; }
  .involve h2{ color:var(--white); font-size:clamp(var(--fs-xl),2.8vw,var(--fs-2xl)); margin-bottom:14px; }
  .involve p{ color:var(--white); opacity:0.88; font-size:var(--fs-md); line-height:1.5; margin:0 0 26px; }
  .involve .btn-row{ justify-content:center; margin-top:0; }
  .involve .btn-ghost{ border-color:rgba(255,255,255,0.5); color:var(--white); }
  .involve .btn-ghost:hover{ background:rgba(255,255,255,0.1); }

  /* ---------- FOOTER ---------- */
  footer{ padding:56px 0 40px; }
  .foot-grid{
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--gap);
    border-top:1px solid rgba(47,79,73,0.15); padding-top:36px;
  }
  .foot-brand{ display:flex; align-items:center; gap:10px; }
  .foot-brand .brand-mark{ width:28px; height:28px; }
  footer .fine{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-2xs); opacity:0.7; }
  .foot-links{ display:flex; gap:var(--gap); list-style:none; margin:0; padding:0; }
  .foot-links a{ text-decoration:none; font-size:var(--fs-xs); opacity:0.75; }
  .foot-links a:hover{ opacity:1; }
  .foot-legal{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-2xs); opacity:0.7; margin-top:18px; }

/* ---------- CASE STUDY DETAIL PAGE ---------- */
.cs-hero{ padding:64px 0 40px; }
.cs-hero:has(+ .faq){ padding-bottom:6px; }
.cs-hero + .faq{ padding-top:15px; }
.cs-hero .case-tag{ margin-bottom:18px; }
.cs-hero h1{ font-size:clamp(var(--fs-2xl),4vw,var(--fs-3xl)); line-height:var(--lh-tight); max-width:22ch; }
.cs-hero .client{
  font-family:'IBM Plex Mono',monospace; font-size:var(--fs-xs); letter-spacing:0.04em;
  text-transform:uppercase; color:var(--sea-deep); opacity:0.7; margin-top:16px; display:block;
}
.cs-hero-image{ width:100%; max-width:70ch; height:auto; border-radius:12px; margin-top:32px; display:block; }
.cs-body{ padding-top:0; }
.cs-body h2{ font-size:var(--fs-lg); margin:44px 0 14px; max-width:70ch; }
.cs-body p{ font-size:var(--fs-base); opacity:0.86; margin:0 0 16px; max-width:70ch; }
.cs-body ul{ font-size:var(--fs-base); opacity:0.86; padding-left:20px; margin:0 0 16px; max-width:70ch; }
.cs-body li{ margin-bottom:8px; }
.cs-stats-row{ display:flex; gap:40px; flex-wrap:wrap; margin:36px 0; padding:26px 0; border-top:1px solid rgba(47,79,73,0.15); border-bottom:1px solid rgba(47,79,73,0.15); }
.cs-stats-row div strong{ display:block; font-family:'Fraunces',serif; font-size:var(--fs-2xl); line-height:var(--lh-tight); color:var(--glass-amber-text); }
.cs-stats-row div span{ font-size:var(--fs-xs); opacity:0.7; }
.cs-back{ display:inline-block; margin-bottom:28px; font-size:var(--fs-xs); color:var(--sea-deep); text-decoration:none; font-weight:600; }
.cs-back:hover{ text-decoration:underline; }
/* Page-opening copy. Body size made these read as a wall of text; --fs-md is
   what the rest of the site uses to introduce a page (see .case-lede). */
/* Scoped with p.cs-lede on purpose: bare .cs-lede loses to `.cs-body p`, which
   is more specific, so the lede silently rendered at body size. */
.cs-body p.cs-lede{
  font-size:var(--fs-md); line-height:1.55; max-width:62ch;
  opacity:0.85; margin:0 0 18px;
}
.cs-body p.cs-lede + p.cs-lede{ margin-bottom:0; }

.cs-cta{
  margin:56px 0 0; padding:36px; background:var(--sea-deep);
  border-radius:var(--radius-soft); color:var(--white);
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.cs-cta h3{ color:var(--white); margin-bottom:0; max-width:24ch; }
.cs-cta .btn{ flex:0 0 auto; }
@media (max-width:640px){
  .cs-cta{ display:block; padding:28px; }
  .cs-cta h3{ margin-bottom:16px; max-width:none; }
  .cs-cta .btn{ width:100%; justify-content:center; }
}

/* ---------- ABOUT ---------- */
/* Career track: a definition list rather than cards, because these are four
   entries of plain fact, not four things to choose between. */
.about-track{
  margin:24px 0 8px; padding:0;
  display:flex; flex-direction:column; gap:22px;
  max-width:70ch;
}
.about-track > div{
  padding-top:18px; border-top:1px solid rgba(47,79,73,0.15);
}
.about-track > div:first-child{ padding-top:0; border-top:0; }
.about-track dt{
  font-family:'Fraunces',serif; font-size:var(--fs-lg);
  line-height:var(--lh-heading); color:var(--sea-deep); margin:0 0 6px;
}
.about-track dt span{
  display:block; font-family:'IBM Plex Mono',monospace;
  font-size:var(--fs-2xs); letter-spacing:0.02em; text-transform:uppercase;
  color:var(--glass-amber-text); font-weight:600; margin-top:6px;
}
.about-track dd{
  margin:0; font-size:var(--fs-base); line-height:var(--lh-body); opacity:0.86;
}
.about-portrait{
  display:block; width:100%; max-width:340px; height:auto;
  border-radius:var(--radius-soft); margin:28px 0 4px;
}

/* ---------- THREE LEVELS OF ENGAGEMENT ---------- */
/* The cards previously sat inside an inset mint panel, which boxed them in and
   appeared nowhere else on the site. They now sit on the page like every other
   card grid; the mint stays a full-section device, not a container. */
.tier-section{ margin:24px 0 8px; }

/* Section heading above the cards: .cs-body h2 is tuned for running prose in
   case studies, so this one is promoted and given room to breathe. */
.tier-heading{
  font-size:var(--fs-xl); margin:48px 0 6px; max-width:70ch;
}
.tier-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin:0;
}
@media (max-width:900px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-card{
  overflow:hidden; background:var(--white);
  border:1.5px solid rgba(47,79,73,0.4);
  border-radius:var(--radius-soft); scroll-margin-top:88px;
  display:flex; flex-direction:column;
}
.tier-image{
  display:block; width:100%; height:150px;
  /* centred, not top-anchored: top cropping cut the base off every object */
  object-fit:cover; object-position:center; margin:0;
}
.tier-card-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.tier-card h3{ margin-bottom:12px; line-height:var(--lh-heading); }
.tier-card .tier-fit{
  font-family:'IBM Plex Mono',monospace; font-size:var(--fs-2xs); letter-spacing:0.02em;
  text-transform:uppercase; color:var(--glass-amber-text); font-weight:600;
  opacity:1; margin:0 0 16px; max-width:none;
  line-height:1.55;   /* it wraps to two lines in every card; it needs leading */
}
.tier-card-body > p:not(.tier-fit){ font-size:var(--fs-sm); line-height:var(--lh-body); opacity:0.86; margin:0; }
.tier-facts{
  margin:22px 0 0; padding:16px 0 0 0; border-top:1px solid rgba(47,79,73,0.12);
  display:flex; flex-direction:column; gap:14px;
}
@media (min-width:901px){ .tier-facts{ margin-top:auto; } }
.tier-facts dt{
  font-family:'IBM Plex Mono',monospace; font-size:var(--fs-2xs); letter-spacing:0.02em;
  text-transform:uppercase; color:var(--sea-deep); opacity:0.7; font-weight:600; margin-bottom:4px;
}
.tier-facts dd{
  font-size:var(--fs-xs); line-height:1.5; opacity:0.8; margin:0;
}

/* ---------- ADMIN DRAG CALCULATOR ---------- */
/* How-to steps: deliberately normal body copy, not the mono/uppercase
   eyebrow treatment used for the section labels further down the page.
   Numbered because this genuinely is a sequence: each step depends on
   the one before it. */
.calc-howto{ margin-bottom:32px; max-width:78ch; }
.calc-howto h2{ font-size:var(--fs-lg); margin-bottom:14px; }
.calc-howto-steps{
  margin:0; padding:0 0 0 1.3em;
  display:flex; flex-direction:column; gap:12px;
}
.calc-howto-steps li{
  font-size:var(--fs-base); line-height:var(--lh-body);
  color:var(--ink); opacity:0.88; padding-left:4px;
}
.calc-howto-steps li::marker{ color:var(--glass-amber-text); font-weight:700; }
.calc-howto-steps strong{ font-weight:600; opacity:1; }
.calc-howto-note{
  margin:16px 0 0; font-size:var(--fs-xs); opacity:0.7;
}

/* The privacy reassurance moved up next to the tool: it removes a reason to
   hesitate, so it has to be visible before the first drag, not below it. */
.calc-privacy-note{
  margin:10px 0 0; font-size:var(--fs-xs); opacity:0.7;
}

/* The steps sit below the tool as a disclosure. The sliders are self-evident,
   and the page promises "just drag the sliders" - so reading comes second, for
   the people who want it. */
.calc-howto--collapsed{
  margin:36px 0 0; padding-top:22px;
  border-top:1px solid var(--rule, rgba(0,0,0,0.1));
}
.calc-howto--collapsed > summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display, inherit);
  font-size:var(--fs-base); font-weight:600;
  color:var(--ink); opacity:0.85;
  padding:6px 2px; border-radius:6px;
}
.calc-howto--collapsed > summary::-webkit-details-marker{ display:none; }
.calc-howto--collapsed > summary::before{
  content:""; width:8px; height:8px; flex:0 0 auto;
  border-right:2px solid var(--glass-amber-text);
  border-bottom:2px solid var(--glass-amber-text);
  transform:rotate(-45deg); transition:transform 0.2s ease;
}
.calc-howto--collapsed[open] > summary::before{ transform:rotate(45deg); }
.calc-howto--collapsed > summary:hover{ opacity:1; }
.calc-howto--collapsed > summary:focus-visible{
  outline:2px solid var(--glass-amber-text); outline-offset:3px;
}
.calc-howto--collapsed .calc-howto-steps{ margin-top:16px; }
@media (prefers-reduced-motion:reduce){
  .calc-howto--collapsed > summary::before{ transition:none; }
}
@media (max-width:640px){
  .calc-howto{ margin-bottom:26px; }
  .calc-howto-steps li{ font-size:var(--fs-sm); }
}

.calc-persona{ margin-bottom:28px; }
.calc-subhead-standalone{ border-bottom:none; padding-bottom:0; margin-bottom:0; }
.calc-persona-lede{ font-size:var(--fs-sm); opacity:0.75; margin:8px 0 0; max-width:64ch; }
.calc-persona-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.calc-persona-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Inter',sans-serif; font-size:var(--fs-xs); font-weight:600;
  padding:9px 16px; border-radius:999px; border:1.5px solid rgba(47,79,73,0.25);
  background:var(--white); color:var(--sea-deep); cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.calc-persona-pill svg{ width:16px; height:16px; flex-shrink:0; }
.calc-persona-pill:hover{ border-color:var(--sea-deep); background:rgba(143,184,164,0.12); }
.calc-persona-pill.is-active{ background:var(--sea-deep); border-color:var(--sea-deep); color:var(--white); }
/* Selected, but the numbers have been changed: keep the pill legible so you can
   still see which estimate they started from, while making clear these figures
   are no longer the standard ones we set. */
.calc-persona-pill.is-customized{
  background:var(--sand-deep); border-color:rgba(47,79,73,0.2);
  border-style:dashed; color:rgba(30,43,39,0.55);
}
.calc-persona-pill.is-customized:hover{ background:rgba(143,184,164,0.18); color:var(--sea-deep); }
.calc-persona-pill:focus-visible{ outline:2px solid var(--sea-deep); outline-offset:2px; }

.calc-customized-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Inter',sans-serif; font-size:var(--fs-xs); font-weight:600;
  padding:9px 16px; border-radius:999px;
  border:1.5px dashed rgba(47,79,73,0.35);
  /* Muted, but kept at 4.5:1+ against the sand background: this is real text,
     not decoration, so it has to stay readable. */
  background:var(--sand-deep); color:#4A5652;
}
.calc-customized-badge[hidden]{ display:none; }
.calc-customized-badge svg{ width:16px; height:16px; flex-shrink:0; }

.calc-persona-note{
  margin-top:16px; padding:14px 18px; background:var(--sand-deep); border-radius:var(--radius-soft);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.calc-persona-note[hidden]{ display:none; }
.calc-persona-note p{ margin:0; font-size:var(--fs-xs); opacity:0.85; max-width:60ch; }

.calc-source-banner{
  display:flex; align-items:center; gap:8px; margin-bottom:20px; padding:10px 14px;
  background:rgba(175,208,201,0.3); border:1px solid rgba(47,79,73,0.18);
  border-radius:6px; font-size:var(--fs-2xs); color:var(--sea-deep); font-weight:600;
  flex-wrap:wrap;
}
.calc-source-banner[hidden]{ display:none; }
.calc-source-banner svg{ width:15px; height:15px; flex-shrink:0; }
.calc-source-banner span{ flex:1; min-width:0; }
.calc-source-banner.is-customized{
  background:rgba(201,162,104,0.15); border-color:rgba(201,162,104,0.4);
  color:var(--glass-amber-text);
}
.calc-reset-btn{
  flex-shrink:0; background:none; border:none; padding:0; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:600; font-size:var(--fs-2xs);
  color:inherit; text-decoration:underline; text-underline-offset:3px;
}
.calc-reset-btn[hidden]{ display:none; }
.calc-reset-btn:hover{ opacity:0.75; }

@media (max-width:640px){
  .calc-persona-pill{ padding:8px 13px; font-size:var(--fs-2xs); }
}

.calc-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start; }
@media (max-width:900px){ .calc-grid{ grid-template-columns:1fr; } }
.calc-panel{
  background:var(--white); border:1px solid rgba(47,79,73,0.12);
  border-radius:var(--radius-soft); padding:32px;
}
@media (max-width:640px){ .calc-panel{ padding:22px; } }

.calc-subhead{
  font-family:'IBM Plex Mono',monospace; font-size:var(--fs-2xs); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--sea-deep); opacity:0.75; font-weight:600;
  border-bottom:1px solid rgba(47,79,73,0.12); padding-bottom:10px; margin:0 0 22px;
}
.calc-subhead:not(:first-child){ margin-top:36px; }

.calc-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:640px){ .calc-field-row{ grid-template-columns:1fr; } }

.calc-field{ margin-bottom:22px; }
.calc-field:last-child{ margin-bottom:0; }
.calc-field-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; }
.calc-field-top label{ display:block; font-weight:600; font-size:var(--fs-sm); color:var(--ink); }
.calc-field-top p{ margin:2px 0 0; font-size:var(--fs-2xs); opacity:0.65; }
.calc-value{
  flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:var(--fs-xs);
  color:var(--ink); background:var(--sand); border:1px solid rgba(47,79,73,0.15);
  padding:4px 10px; border-radius:4px;
}

.calc-slider{
  width:100%; height:6px; border-radius:3px; background:rgba(47,79,73,0.15);
  appearance:none; -webkit-appearance:none; cursor:pointer; margin:0;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--sea-deep); border:2px solid var(--white);
  box-shadow:0 1px 4px rgba(30,43,39,0.4); cursor:pointer;
}
.calc-slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--sea-deep);
  border:2px solid var(--white); box-shadow:0 1px 4px rgba(30,43,39,0.4); cursor:pointer;
}
.calc-slider::-moz-range-track{ height:6px; border-radius:3px; background:rgba(47,79,73,0.15); }
.calc-slider:focus-visible{ outline:2px solid var(--sea-deep); outline-offset:3px; }

.calc-total-strip{
  margin-top:28px; padding:14px 18px; background:var(--sand); border-radius:6px;
  border:1px solid rgba(47,79,73,0.1); display:flex; justify-content:space-between;
  align-items:center; font-size:var(--fs-xs); gap:12px; flex-wrap:wrap;
}
.calc-total-strip strong{ font-size:var(--fs-sm); color:var(--sea-deep); }

.calc-stat-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px; }
@media (max-width:400px){ .calc-stat-cards{ grid-template-columns:1fr; } }
.calc-stat-card{
  background:var(--sand); border:1px solid rgba(47,79,73,0.12);
  border-radius:var(--radius-soft); padding:16px 18px;
}
.calc-stat-label{
  display:flex; align-items:center; gap:6px; font-size:var(--fs-2xs); font-weight:600;
  color:var(--ink); opacity:0.7; margin-bottom:8px;
}
.calc-stat-label svg{ width:15px; height:15px; flex-shrink:0; opacity:0.7; }
.calc-stat-value{ font-family:'Fraunces',serif; font-weight:600; font-size:var(--fs-lg); color:var(--sea-deep); }
.calc-stat-value span{ font-family:'Inter',sans-serif; font-size:var(--fs-2xs); font-weight:400; opacity:0.6; margin-left:4px; }
.calc-stat-value--drag{ color:var(--error); }

.calc-highlight{ background:var(--sea-deep); color:var(--white); border-radius:var(--radius-soft); padding:28px; margin-bottom:22px; }
.calc-highlight-eyebrow{
  display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace;
  font-size:var(--fs-2xs); letter-spacing:0.08em; text-transform:uppercase;
  color:var(--glass-aqua); margin-bottom:14px;
}
.calc-highlight-eyebrow svg{ width:16px; height:16px; flex-shrink:0; }
.calc-highlight-value{ font-family:'Fraunces',serif; font-size:var(--fs-2xl); line-height:var(--lh-tight); }
.calc-highlight-sub{ font-size:var(--fs-xs); opacity:0.8; margin:6px 0 0; }
.calc-highlight-days{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.18);
  display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm); gap:12px; flex-wrap:wrap;
}
.calc-highlight-days span{ display:flex; align-items:center; gap:6px; opacity:0.9; }
.calc-highlight-days svg{ width:16px; height:16px; flex-shrink:0; }
.calc-highlight-days strong{ font-size:var(--fs-base); }

.calc-proof-list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; }
.calc-proof-list li{ display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-xs); opacity:0.85; }
.calc-proof-list svg{ width:16px; height:16px; color:var(--sea-deep); flex-shrink:0; margin-top:1px; }

.calc-cta{ padding-top:22px; border-top:1px solid rgba(47,79,73,0.12); }
.calc-cta-btn{ width:100%; justify-content:center; padding:14px 20px; }
.calc-cta-btn svg{ width:16px; height:16px; flex-shrink:0; }
.calc-cta-fine{ text-align:center; font-size:var(--fs-2xs); opacity:0.65; margin:10px 0 0; }

/* ---------- ENQUIRY MODAL ---------- */
body.enquiry-open{ overflow:hidden; }
.enquiry-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(30,43,39,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.enquiry-overlay[hidden]{ display:none; }
.enquiry-modal{
  position:relative; width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  background:var(--white); border-radius:var(--radius-soft);
  padding:36px 32px; box-shadow:var(--shadow-soft-hover);
}
.enquiry-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  border:none; background:transparent; color:var(--sea-deep); font-size:1.5rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.enquiry-close:hover, .enquiry-close:focus-visible{ background:rgba(47,79,73,0.08); }
.enquiry-modal h2{ font-size:var(--fs-lg); max-width:22ch; padding-right:20px; }
.enquiry-sub{ font-size:var(--fs-sm); opacity:0.8; margin:10px 0 26px; max-width:38ch; }
.enquiry-form .field{ display:flex; flex-direction:column; margin-bottom:18px; }
.enquiry-form label{
  font-family:'IBM Plex Mono',monospace; font-size:var(--fs-2xs); letter-spacing:0.02em;
  text-transform:uppercase; color:var(--sea-deep); opacity:0.7; font-weight:600; margin-bottom:6px;
}
.enquiry-form input, .enquiry-form textarea{
  font-family:'Inter',sans-serif; font-size:var(--fs-base); color:var(--ink);
  padding:12px 14px; border:1.5px solid rgba(47,79,73,0.25); border-radius:6px;
  background:var(--sand); resize:vertical;
}
.enquiry-form input::placeholder, .enquiry-form textarea::placeholder{ color:rgba(30,43,39,0.42); }
.enquiry-form input:focus, .enquiry-form textarea:focus{
  outline:none; border-color:var(--sea-deep); background:var(--white);
}
.enquiry-form .field.has-error input, .enquiry-form .field.has-error textarea{
  border-color:var(--error); background:rgba(166,72,61,0.06);
}
.enquiry-field-error{ display:none; font-size:var(--fs-2xs); color:var(--error); margin-top:6px; }
.enquiry-form .field.has-error .enquiry-field-error{ display:block; }
.enquiry-privacy{ font-size:var(--fs-2xs); line-height:1.5; opacity:0.72; margin:4px 0 22px; }
.enquiry-submit{ width:100%; justify-content:center; }
@media (max-width:600px){
  .enquiry-overlay{ align-items:flex-end; padding:0; }
  .enquiry-modal{ max-width:100%; border-radius:var(--radius-soft) var(--radius-soft) 0 0; padding:28px 22px 32px; }
}