:root{
    --ink:#141414;          /* charcoal base */
    --ink-2:#1d1d1d;
    --ink-3:#262626;
    --amber:#f5a623;        /* brand amber */
    --amber-deep:#e2920f;
    --paper:#f4f1ec;        /* warm off-white */
    --paper-2:#e9e4da;
    --line:rgba(255,255,255,.12);
    --line-dark:rgba(20,20,20,.12);
    --muted:#9b9690;
    --muted-dark:#5d5953;
    --maxw:1240px;
    --pad:clamp(20px,5vw,72px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* overflow-x was only on body, which iOS Safari ignores: the page could still
     be dragged sideways on a phone. It has to be on html too. Using clip rather
     than hidden because hidden on html makes html a scroll container and kills
     the sticky header; clip stops the drag without that side effect. */
  html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;max-width:100%}
  body{
    font-family:'Archivo',system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    overflow-x:clip;
    max-width:100%;
  }
  h1,h2,h3,.disp{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;line-height:1.0;letter-spacing:-.01em;}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
  .amber{color:var(--amber)}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:.95rem;
    padding:15px 26px;border-radius:3px;transition:.2s ease;letter-spacing:.01em;border:1.5px solid transparent;cursor:pointer}
  .btn-amber{background:var(--amber);color:var(--ink)}
  .btn-amber:hover{background:#fff;transform:translateY(-2px)}
  /* background MUST be set: on an <a> this class is transparent, but on a
     <button> the browser fills in its default grey (rgb(240,240,240)), which
     put near-white text on near-white and made the button invisible. */
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--paper)}
  .btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
  .btn-dark{background:var(--ink);color:var(--paper)}
  .btn-dark:hover{background:var(--amber);color:var(--ink);transform:translateY(-2px)}

  /* ---------- header ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(20,20,20,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{display:flex;align-items:center;gap:13px;color:var(--paper)}
  .brand .mark{flex:0 0 auto}
  .brand .txt{display:flex;flex-direction:column;line-height:1}
  .brand .txt b{font-family:'Archivo Expanded';font-weight:800;font-size:.98rem;letter-spacing:.02em;text-transform:uppercase}
  .brand .txt span{font-size:.62rem;letter-spacing:.34em;color:var(--amber);text-transform:uppercase;margin-top:5px;font-weight:600}
  .nav-links{display:flex;align-items:center;gap:34px}
  .nav-links a{color:var(--paper);font-size:.92rem;font-weight:500;opacity:.82;transition:.2s}
  .nav-links a:hover{opacity:1;color:var(--amber)}
  .nav-cta{display:flex;align-items:center;gap:18px}
  .nav-phone{color:var(--paper);font-family:'Archivo Expanded';font-weight:700;font-size:1.02rem;letter-spacing:.01em;white-space:nowrap}
  .nav-phone:hover{color:var(--amber)}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
  .burger span{width:26px;height:2px;background:var(--paper);transition:.3s}
  /* The burger used to take over only below 960px, but the desktop nav needs
     about 940px of its own. Between roughly 960 and 1080 the links wrapped and
     collided with the phone number. Hand over to the drawer while there is
     still room, and stop the row wrapping in the first place. */
  .nav{gap:20px;flex-wrap:nowrap}
  .nav-links{flex-wrap:nowrap;white-space:nowrap}
  .brand{min-width:0;flex-shrink:0}
  .nav-cta{flex-shrink:0}
  /* On a phone the wordmark is 340px on its own, and with flex-shrink:0 it shoved
     the burger to x=562 in a 375px viewport: the menu button was off screen and
     unreachable, which is what made the page draggable sideways. Below 620px the
     logo mark carries the brand and the wordmark steps aside. */
  @media(max-width:620px){
    .brand .txt{display:none}
    .brand{flex-shrink:1}
    .brand .mark{width:46px;height:auto}
    .nav{gap:12px}
    .nav-cta .btn{padding:12px 16px;font-size:.85rem}
  }
  @media(max-width:1080px){
    .nav-links{display:none}
    .nav-phone{display:none}
    .burger{display:flex}
  }

  /* ---------- hero ---------- */
  .hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:clamp(560px,82vh,820px)}
  .hero-left{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);position:relative;z-index:2}
  .hero-tag{display:flex;align-items:center;gap:14px;margin-bottom:30px;color:var(--amber);font-weight:600;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}
  .hero-tag .rule{width:46px;height:2px;background:var(--amber)}
  .hero h1{font-size:clamp(2.7rem,6.4vw,5.1rem);font-weight:900;text-transform:uppercase}
  .hero h1 .o{color:var(--amber)}
  .hero h1 em{font-style:normal;display:block}
  .hero-sub{margin:28px 0 36px;font-size:clamp(1.04rem,1.5vw,1.22rem);max-width:30ch;color:#d6d2cc;line-height:1.55}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
  .hero-right{position:relative;background:var(--ink)}
  .hero-right img,
  .hero-right video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* anyone who has asked their device to stop moving things gets the still frame */
  @media (prefers-reduced-motion:reduce){
    .hero-right video{display:none}
    .hero-right{background:url('assets/hero.jpg') center/cover no-repeat var(--ink)}
  }
  .hero-right::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(105deg,var(--ink) 0%,rgba(20,20,20,.35) 34%,transparent 60%)}

  /* ---------- section frame ---------- */
  section{position:relative}
  .pad-y{padding-top:clamp(64px,9vw,118px);padding-bottom:clamp(64px,9vw,118px)}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:54px}
  .sec-head h2{font-size:clamp(1.9rem,4vw,3.1rem);text-transform:uppercase}
  .sec-head .lead{max-width:40ch;color:var(--muted-dark);font-size:1.05rem}

  /* ---------- services (numbered editorial list) ---------- */
  .services{background:var(--paper)}
  .svc{display:grid;grid-template-columns:90px 1.1fr 1.4fr;gap:clamp(18px,3vw,46px);align-items:center;
    padding:34px 0;border-top:1px solid var(--line-dark)}
  .svc:last-child{border-bottom:1px solid var(--line-dark)}
  .svc .num{font-family:'Archivo Expanded';font-weight:800;font-size:1.5rem;color:var(--amber)}
  .svc h3{font-size:clamp(1.35rem,2.6vw,2rem);text-transform:uppercase}
  .svc p{color:var(--muted-dark);font-size:1.02rem;max-width:48ch}
  .svc .tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
  .svc .tags span{font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    border:1px solid var(--line-dark);color:var(--muted-dark);padding:5px 11px;border-radius:2px}
  .svc:hover{background:#ece7de}
  .svc{transition:background .25s}

  /* ---------- trust band / brand marquee ---------- */
  .trustband{background:var(--ink-2);color:var(--paper);padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
  .trust-lead{text-align:center;margin:0 auto 24px;padding:0 var(--pad);max-width:48ch;
    font-family:'Archivo';font-weight:500;font-size:1.02rem;color:var(--muted)}
  .trust-lead b{color:var(--paper);font-weight:700}
  .marquee{display:flex;overflow:hidden;user-select:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .marquee + .marquee{margin-top:12px}
  .mq-track{display:flex;flex:0 0 auto;align-items:center;animation:scrollx 42s linear infinite;will-change:transform}
  .marquee.rev .mq-track{animation-duration:52s;animation-direction:reverse}
  .trustband:hover .mq-track{animation-play-state:paused}
  .mq-track .item{font-family:'Archivo Expanded';font-weight:800;text-transform:uppercase;
    font-size:clamp(1.05rem,2.1vw,1.7rem);letter-spacing:.01em;color:#e7e2db;padding:0 22px;white-space:nowrap}
  .mq-track .sep{color:var(--amber);align-self:center;font-size:.5em;padding:0 2px}
  .marquee.row2 .mq-track .item{font-family:'Archivo';font-weight:600;text-transform:none;
    font-size:clamp(.84rem,1.5vw,1.02rem);letter-spacing:.03em;color:#9b9690;padding:0 18px}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- scroll reveal ---------- */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .mq-track{animation:none}
  }

  /* ---------- proof (full-bleed workshop) ---------- */
  .proof{position:relative;color:var(--paper);background:var(--ink)}
  .proof-img{position:relative;height:clamp(420px,60vh,640px)}
  .proof-img img{width:100%;height:100%;object-fit:cover}
  .proof-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.30),rgba(20,20,20,.86))}
  .proof-card{position:absolute;left:0;right:0;bottom:0;z-index:2}
  .proof-card .wrap{padding-bottom:clamp(40px,6vw,72px)}
  .proof-card h2{font-size:clamp(1.8rem,4.2vw,3.2rem);text-transform:uppercase;max-width:18ch}
  .proof-card p{margin-top:18px;max-width:52ch;color:#dcd8d2;font-size:1.08rem}
  .proof-pts{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:26px}
  .proof-pts div{display:flex;align-items:center;gap:11px;font-weight:600;font-size:.98rem}
  .proof-pts .dot{width:9px;height:9px;background:var(--amber);border-radius:50%;flex:0 0 auto}

  /* ---------- approach / why (split) ---------- */
  .why{background:var(--paper-2)}
  .why .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,6vw,80px);align-items:center}
  .why h2{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase;margin-bottom:22px}
  .why .big{font-size:1.18rem;color:var(--ink);max-width:46ch;margin-bottom:24px;font-weight:500}
  .why p{color:var(--muted-dark);max-width:48ch}
  .why p + p{margin-top:16px}
  .why-media{position:relative}
  .why-media img{width:100%;border-radius:4px;aspect-ratio:3/4;object-fit:cover}
  .why-badge{position:absolute;left:-22px;bottom:-22px;background:var(--ink);color:var(--paper);
    padding:22px 26px;border-radius:4px;max-width:230px}
  .why-badge b{font-family:'Archivo Expanded';font-weight:800;color:var(--amber);font-size:1.05rem;display:block;text-transform:uppercase;letter-spacing:.02em}
  .why-badge span{font-size:.88rem;color:#cdc9c2;display:block;margin-top:6px}

  /* ---------- detail trio ---------- */
  .trio{background:var(--paper)}
  .trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .trio-grid figure{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5}
  .trio-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .trio-grid figure:hover img{transform:scale(1.05)}
  .trio-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;color:var(--paper);
    background:linear-gradient(transparent,rgba(20,20,20,.85));font-family:'Archivo Expanded';font-weight:700;
    text-transform:uppercase;letter-spacing:.02em;font-size:.96rem}

  /* ---------- visit / contact ---------- */
  .visit{background:var(--ink);color:var(--paper)}
  .visit-photo{margin:24px 0 0;position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/9}
  .visit-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .visit-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
    background:linear-gradient(transparent,rgba(20,20,20,.85));font-size:.86rem;letter-spacing:.01em}
  .visit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px)}
  .visit h2{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase;margin-bottom:14px}
  .visit .intro{color:#d6d2cc;max-width:40ch;margin-bottom:34px;font-size:1.06rem}
  .info-row{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
  .info-row:last-child{border-bottom:1px solid var(--line)}
  .info-row .ic{flex:0 0 auto;width:42px;height:42px;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;color:var(--amber)}
  .info-row .lab{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .info-row .val{font-family:'Archivo Expanded';font-weight:700;font-size:1.1rem;margin-top:3px}
  .info-row .val a:hover{color:var(--amber)}
  .info-row small{display:block;color:var(--muted);font-family:'Archivo';font-weight:400;font-size:.82rem;letter-spacing:0;margin-top:3px}
  .visit-map{border-radius:4px;overflow:hidden;border:1px solid var(--line);min-height:340px;background:var(--ink-2)}
  .visit-map iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.3) contrast(1.05)}
  /* booking form */
  .book-form{margin-top:6px}
  .book-form .fld{display:flex;flex-direction:column;margin-bottom:16px}
  .book-form .fld-row{display:flex;gap:16px}
  .book-form .fld-row .fld{flex:1}
  .book-form label{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  /* select had been left out of this rule, so "Registered in" and "Preferred time"
     rendered as raw OS dropdowns: pale, wrong font, wrong height, next to fields
     that were dark. Everything the customer types into now shares one look. */
  .book-form input,.book-form select,.book-form textarea{background:var(--ink-2);border:1px solid var(--line);border-radius:3px;
    color:var(--paper);font-family:'Archivo',sans-serif;font-size:1rem;padding:13px 15px;width:100%;
    line-height:1.35;height:auto;transition:border-color .2s,background-color .2s}
  .book-form input::placeholder,.book-form textarea::placeholder{color:#6f6a64}
  .book-form input:focus,.book-form select:focus,.book-form textarea:focus{outline:none;border-color:var(--amber);background-color:#212121}
  /* native arrow is unreadable on a dark field, so draw our own */
  .book-form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 15px center;background-size:14px}
  .book-form select:disabled{opacity:.5;cursor:not-allowed}
  /* the dropdown list itself is drawn by the OS, so set it explicitly */
  .book-form select option{background:var(--ink-2);color:var(--paper)}
  /* same problem on the date field: the picker icon ships near black */
  .book-form input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.5;cursor:pointer;width:16px;height:16px}
  /* the picker icon is taller than a line of text, which left this field 2px
     proud of every other box; pin it so the column lines up exactly */
  .book-form input[type="date"]{height:50px}
  .book-form textarea{resize:vertical;min-height:92px}
  /* two ways out of this form: hold me a time, or just price it. They sit side
     by side on a desktop and stack on a phone, both full width to stay tappable. */
  .form-actions{display:flex;gap:12px;margin-top:4px}
  .book-form .form-actions .btn{flex:1 1 0;min-width:0;width:auto;justify-content:center;margin-top:0}
  /* it sits next to a solid amber button, so a 12% white hairline reads as
     disabled. Amber outline makes it obviously the second real choice. */
  .book-form .form-actions .btn-ghost{border-color:var(--amber);color:var(--amber)}
  .book-form .form-actions .btn-ghost:hover{background:var(--amber);color:var(--ink)}
  .form-hint{margin:10px 0 0;font-size:.85rem;color:var(--muted)}
  @media(max-width:560px){ .form-actions{flex-direction:column} }
  .form-note{margin-top:16px;color:var(--amber);font-weight:600;font-size:.96rem;line-height:1.5}

  .book-card{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:28px;margin-top:26px}
  .book-card h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:8px}
  .book-card p{color:var(--muted);font-size:.96rem;margin-bottom:18px}
  .book-card .btn{width:100%;justify-content:center}

  /* ---------- footer ---------- */
  footer{background:#0f0f0f;color:var(--paper)}
  /* these use the .wrap class but their padding shorthand was zeroing its side
     padding, so on a phone every line of footer text sat flush against the
     screen edge. Put the side padding back. */
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:clamp(48px,6vw,72px) var(--pad) 44px}
  .foot-brand .brand{margin-bottom:18px}
  .foot-brand p{color:var(--muted);max-width:34ch;font-size:.95rem}
  .foot-col h4{font-family:'Archivo Expanded';font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.1em;color:var(--amber);margin-bottom:18px}
  .foot-col a,.foot-col p{display:block;color:#cdc9c2;font-size:.95rem;margin-bottom:11px;transition:.2s}
  .foot-col a:hover{color:var(--amber)}
  .socials{display:flex;gap:12px;margin-top:6px}
  .socials a{width:42px;height:42px;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;color:var(--paper)}
  .socials a:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)}
  .foot-bottom{border-top:1px solid var(--line);padding:22px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
  /* ways to pay: plain wordmarks, not scraped brand logos we have no licence to */
  .pay-strip{border-top:1px solid var(--line);padding:18px var(--pad);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .pay-lab{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin-right:4px}
  .pay-badge{border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:6px 12px;
    font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.02em;opacity:.85}
  .foot-bottom p{color:var(--muted);font-size:.84rem}
  .jtn-credit{color:var(--muted);font-size:.84rem}
  .jtn-credit a{color:#cdc9c2;border-bottom:1px solid transparent;transition:.2s}
  .jtn-credit a:hover{color:var(--amber);border-color:var(--amber)}

  /* ---------- mobile nav drawer ---------- */
  .drawer{display:none;position:fixed;inset:0;z-index:60;background:rgba(15,15,15,.98);flex-direction:column;padding:30px var(--pad)}
  .drawer.open{display:flex}
  .drawer .x{align-self:flex-end;background:none;border:0;color:var(--paper);font-size:2rem;cursor:pointer;line-height:1}
  .drawer a{color:var(--paper);font-family:'Archivo Expanded';font-weight:700;font-size:1.6rem;text-transform:uppercase;padding:16px 0;border-bottom:1px solid var(--line)}
  .drawer .btn{margin-top:24px;justify-content:center}

  /* ---------- responsive ---------- */
  @media(max-width:960px){
    .nav-links{display:none}
    .nav-phone{display:none}
    .burger{display:flex}
    .hero-grid{grid-template-columns:1fr}
    .hero-right{height:300px;order:-1}
    .hero-right::before{background:linear-gradient(0deg,var(--ink) 2%,rgba(20,20,20,.25) 50%,transparent 80%)}
    .why .wrap{grid-template-columns:1fr}
    .why-media{max-width:420px}
    .why-badge{left:auto;right:18px}
    .makes .wrap{grid-template-columns:1fr;gap:24px}
    .trio-grid{grid-template-columns:1fr 1fr}
    .visit .wrap{grid-template-columns:1fr}
    .foot-top{grid-template-columns:1fr 1fr;gap:32px}
    .foot-brand{grid-column:1 / -1}
  }
  @media(max-width:560px){
    .book-form .fld-row{flex-direction:column;gap:0}
    .svc{grid-template-columns:54px 1fr;gap:14px}
    .svc .svc-desc{grid-column:1 / -1}
    .trio-grid{grid-template-columns:1fr}
    .foot-top{grid-template-columns:1fr}
  }

  /* service cards link through to their own page */
  .svc h3 a{transition:color .2s}
  .svc h3 a:hover{color:var(--amber)}

  /* ---------- article / service page prose ----------
     The global reset zeroes every margin, so bare <p>, <h2> and <ul> inside a
     generated page rendered as one solid block with no gaps at all. Content
     pages get real typographic rhythm here rather than inline styles. */
  .prose{color:var(--ink);font-size:1.02rem;line-height:1.75;max-width:68ch}
  .prose > *:first-child{margin-top:0}
  .prose h2{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;
    font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.15;letter-spacing:-.01em;
    margin:46px 0 14px}
  .prose h3{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:700;
    font-size:1.05rem;line-height:1.3;margin:28px 0 8px}
  .prose p{margin:0 0 18px}
  .prose ul{margin:0 0 24px;padding-left:24px;list-style:disc}
  .prose li{margin-bottom:9px;line-height:1.6}
  .prose li::marker{color:var(--amber)}
  .prose strong{font-weight:700;color:var(--ink)}
  .prose a{text-decoration:underline;text-underline-offset:3px}
  .prose a:hover{color:var(--amber-deep)}

  /* FAQ block */
  .faq-h{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;
    font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15;margin-bottom:6px}
  .faq-item{border-top:1px solid var(--line-dark);padding:20px 0}
  .faq-item h3{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:700;
    font-size:1.02rem;line-height:1.35;margin-bottom:8px}
  .faq-item p{color:var(--muted-dark);line-height:1.7;margin:0}

  /* breadcrumb + page hero */
  .crumb{font-size:.85rem;color:var(--muted);margin-bottom:20px}
  .crumb a{color:var(--muted)}
  .crumb a:hover{color:var(--amber)}
  .page-hero h1{font-size:clamp(1.9rem,5.2vw,3.2rem);line-height:1.08;max-width:20ch}
  .page-hero .lede{color:var(--muted);font-size:1.06rem;line-height:1.6;max-width:58ch;margin-top:18px}
  .page-hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

  /* end CTA + related cards */
  .cta-band{background:var(--ink-2);color:var(--paper);text-align:center}
  .cta-band h2{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.15}
  .cta-band p{max-width:52ch;margin:14px auto 26px;color:var(--muted);line-height:1.6}
  .cta-band .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .rel-h{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;
    font-size:clamp(1.25rem,2.8vw,1.7rem);margin-bottom:18px}
  .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
  .rel-grid a{border:1px solid var(--line-dark);border-radius:4px;padding:20px 22px;display:block;transition:.2s}
  .rel-grid a:hover{border-color:var(--amber);transform:translateY(-2px)}
  .rel-grid strong{display:block;font-family:'Archivo Expanded','Archivo',sans-serif;
    text-transform:uppercase;font-size:.92rem;margin-bottom:5px}
  .rel-grid span{color:var(--muted-dark);font-size:.9rem;line-height:1.5}