/* ==========================================================================
   Magichouse Media — components
   References tokens.css only. If you are about to type a hex code or a
   spacing value in this file, it belongs in tokens.css instead.

   BREAKPOINTS — three, and only these three:
     640px   phone  -> large phone / small tablet
     900px   tablet -> desktop (columns appear here)
     1080px  desktop -> wide (two-column heroes split here)
   ========================================================================== */

/* --- Reset and base ------------------------------------------------------ */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%;
       /* .nav is position:sticky, so an anchor target would otherwise scroll to
          sit *under* the header. Pad every scroll destination by the header
          height plus a little breathing room. */
       scroll-padding-top:calc(var(--nav-h) + var(--s-5)); }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-base); font-weight:var(--w-body);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--accent); color:var(--on-accent); }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm); }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

.skip { position:absolute; left:-9999px; }
.skip:focus { left:var(--s-4); top:var(--s-4); z-index:100; background:var(--accent);
              color:var(--on-accent); padding:var(--s-3) var(--s-5); border-radius:var(--r-pill); }

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 { font-family:var(--font-display); font-weight:var(--w-display);
                 line-height:var(--lh-heading); letter-spacing:var(--track-tight);
                 overflow-wrap:break-word; }
h1 { font-size:var(--fs-display); line-height:var(--lh-tight); }
h2 { font-size:var(--fs-4xl); }
h3 { font-size:var(--fs-xl); }
p  { overflow-wrap:break-word; }

.accent-word { font-family:var(--font-accent); font-style:italic; font-weight:500;
               color:var(--accent); letter-spacing:0; }
.label   { font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-label);
           letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-subtle); }
.muted   { color:var(--text-muted); }
.subtle  { color:var(--text-subtle); }
.lead    { font-size:var(--fs-lg); color:var(--text-muted); }

/* --- Layout -------------------------------------------------------------- */
.wrap { width:80%; max-width:var(--measure); margin-inline:auto; }
@media (max-width:760px) { .wrap { width:88%; } }
section { padding-block:var(--section-y); }

/* --- Section banding ------------------------------------------------------
   Applied per-section in the templates rather than by :nth-child, so moving a
   section around doesn't silently invert the whole page. The hairlines are
   what actually sell the depth — without them the two greys are close enough
   to look like a rendering artefact. The inner gradient keeps a large band
   from reading as a flat slab. */
.band { background:var(--band);
        background-image:linear-gradient(180deg,
          rgba(var(--ink), 0.022) 0%, transparent 32%, transparent 68%,
          rgba(0,0,0,0.18) 100%);
        border-block:1px solid var(--band-edge); }
/* Two bands in a row would double the hairline into a 2px seam. */
.band + .band { border-top:0; }
.grid { display:grid; gap:var(--s-6); }

.section-head { max-width:62ch; margin-bottom:var(--s-9); }
.section-head p { margin-top:var(--s-4); color:var(--text-muted); font-size:var(--fs-md); }
.section-head.row { max-width:none; display:flex; align-items:flex-start;
                    justify-content:space-between; gap:var(--s-8); flex-wrap:wrap; }
.section-head.row p { margin-top:var(--s-2); max-width:36ch; }
.section-head.row .label { margin-top:var(--s-3); }
@media (min-width:900px) { .section-head.row p { text-align:right; } }

/* --- Nav ----------------------------------------------------------------- */
.nav { position:sticky; top:0; z-index:80; padding-block:var(--s-3);  /* above .nav-overlay: keeps logo + close button reachable */
       background:color-mix(in srgb, var(--surface-sunken) 78%, transparent);
       backdrop-filter:blur(12px); border-bottom:1px solid var(--hairline); }
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); }
.brand { display:inline-flex; align-items:center; padding-block:var(--s-2); }
.brand img { display:block; width:auto; height:26px; }
@media (max-width:520px) { .brand { min-width:var(--tap); } }
/* the yellow dot survives as a standalone device in eyebrows */
.brand-dot { width:11px; height:11px; border-radius:var(--r-pill); background:var(--accent); flex:none; }
.foot-brand { display:inline-flex; align-items:center; gap:var(--s-3); }
.foot-brand img { display:block; width:auto; height:20px; opacity:.8; }
.nav-links { display:flex; gap:var(--s-2); align-items:center; }
.nav-links a { font-size:var(--fs-sm); font-weight:var(--w-medium); color:var(--text-muted);
               padding:var(--s-3); border-radius:var(--r-sm);
               transition:color var(--dur) var(--ease); }
.nav-links a:hover { color:var(--accent); background:var(--hairline); }
.nav-right { display:flex; align-items:center; gap:var(--s-3); }

/* The toggle stays focusable (never display:none) so the menu is keyboard-operable. */
.nav-toggle { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.nav-btn { display:none; align-items:center; justify-content:center;
           width:var(--tap); height:var(--tap); flex:none; cursor:pointer;
           border:1px solid var(--hairline-strong); border-radius:var(--r-pill);
           color:var(--text); transition:color var(--dur) var(--ease),
                                        border-color var(--dur) var(--ease); }
.nav-toggle:focus-visible + .nav .nav-btn,
.nav-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.nav-bars { display:grid; gap:4px; }
.nav-bars i { display:block; width:18px; height:2px; background:currentColor; border-radius:1px;
              transition:transform var(--dur-menu) var(--ease), opacity var(--dur) var(--ease); }

/* --- Full-screen menu ---------------------------------------------------- */
.nav-overlay { position:fixed; inset:0; z-index:70; display:grid;
               background:var(--bg);              /* opaque: it is a full-screen menu */
               opacity:0; visibility:hidden; pointer-events:none;
               transition:opacity var(--dur-menu) var(--ease),
                          visibility var(--dur-menu) var(--ease); }
/* transparent click-catcher behind the links, so tapping empty space closes */
.nav-scrim { position:absolute; inset:0; cursor:default; }
.nav-full { position:relative; display:flex; flex-direction:column; justify-content:center;
            gap:var(--s-8); min-height:100dvh; padding:var(--s-11) var(--gutter) var(--s-9);
            overflow-y:auto; }
.nav-full-list { list-style:none; display:grid; gap:var(--s-2); }
.nav-full-list li { opacity:0; transform:translateY(14px);
                    transition:opacity var(--dur-menu) var(--ease),
                               transform var(--dur-menu) var(--ease); }
.nav-full a, .nav-sub > summary {
  font-family:var(--font-accent); font-style:italic; font-weight:500;
  font-size:clamp(30px, 8vw, 44px); line-height:1.18; color:var(--text);
  letter-spacing:0; }
.nav-full-list > li > a, .nav-sub > summary {
  display:flex; align-items:center; gap:var(--s-4);
  padding-block:var(--s-3); min-height:var(--tap); cursor:pointer; }
.nav-full-list > li > a:hover, .nav-sub > summary:hover { color:var(--accent); }

.nav-sub > summary { list-style:none; }
.nav-sub > summary::-webkit-details-marker { display:none; }
.arrow { width:11px; height:11px; flex:none; border-right:2px solid currentColor;
         border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-3px);
         transition:transform var(--dur) var(--ease); }
.nav-sub[open] > summary { color:var(--accent); }
.nav-sub[open] .arrow { transform:rotate(-135deg) translateY(-3px); }
.nav-sublinks { display:grid; gap:var(--s-1); padding:var(--s-3) 0 var(--s-4) var(--s-6);
                border-left:1px solid var(--hairline-strong); margin-left:var(--s-2); }
.nav-sublinks a { font-family:var(--font-body); font-style:normal; font-weight:var(--w-medium);
                  font-size:var(--fs-md); color:var(--text-muted);
                  display:flex; align-items:center; min-height:var(--tap); }
.nav-sublinks a:hover { color:var(--accent); }

.nav-full-foot { display:grid; gap:var(--s-5); justify-items:start;
                 opacity:0; transform:translateY(14px);
                 transition:opacity var(--dur-menu) var(--ease),
                            transform var(--dur-menu) var(--ease); }
.nav-full-foot .btn { width:auto; min-width:220px; }
.nav-full-tel { display:inline-flex; align-items:center; min-height:var(--tap);
                font-family:var(--font-display); font-weight:var(--w-display);
                font-size:var(--fs-xl); letter-spacing:var(--track-tight); }
.nav-full-tel:hover { color:var(--accent); }

/* --- Open state ---------------------------------------------------------- */
.nav-toggle:checked ~ .nav-overlay { opacity:1; visibility:visible; pointer-events:auto; }
.nav-toggle:checked ~ .nav-overlay .nav-full-list li,
.nav-toggle:checked ~ .nav-overlay .nav-full-foot {
  opacity:1; transform:none;
  transition-delay:calc(60ms + var(--i, 1) * 45ms);
}
.nav-toggle:checked ~ .nav .nav-btn { color:var(--accent); border-color:var(--accent); }
.nav-toggle:checked ~ .nav .nav-bars i:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .nav .nav-bars i:nth-child(2) { opacity:0; }
.nav-toggle:checked ~ .nav .nav-bars i:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
body:has(.nav-toggle:checked) { overflow:hidden; }

@media (max-width:900px) {
  .nav-links { display:none; }
  /* .nav-right scope needed: a bare .nav-cta ties with .btn on specificity
     and .btn is declared later in this file, so it would win. */
  .nav-right .nav-cta { display:none; }
  .nav-btn { display:inline-flex; }
}
@media (min-width:901px) { .nav-overlay { display:none; } }

/* --- Buttons and pills --------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
       min-height:var(--tap);
       font-family:var(--font-display); font-weight:var(--w-display); font-size:var(--fs-sm);
       padding:var(--s-3) var(--s-6); border-radius:var(--r-pill); border:1px solid transparent;
       white-space:nowrap;
       cursor:pointer; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover { background:color-mix(in srgb, var(--accent) 86%, #fff);
                     transform:translateY(-2px);
                     box-shadow:0 8px 24px rgba(255,230,0,.20); }
.btn-ghost { border-color:var(--hairline-strong); color:var(--text); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent);
                   transform:translateY(-2px); }
.btn-lg { font-size:var(--fs-base); padding:var(--s-4) var(--s-7); width:100%; }

.pill { display:inline-flex; align-items:center; gap:var(--s-2);
        padding:var(--s-2) var(--s-4); border-radius:var(--r-pill);
        border:1px solid var(--hairline); font-size:var(--fs-sm); }
.pill b { font-weight:var(--w-bold); color:var(--accent); }
.pill-row { display:flex; flex-wrap:wrap; gap:var(--s-3); }

.card { background:var(--surface); border:1px solid var(--hairline);
        border-radius:var(--r-card); padding:var(--s-7); }
.card-quiet { background:var(--surface-sunken); }

/* --- Hero (homepage) ----------------------------------------------------- */
/* Hero backdrop, three layers, all behind the content (z-index:-1 under
   `isolation:isolate`, so nothing here can ever sit over the form controls):

     ::before — accent bloom + a faint 64px grid, both pure CSS. The grid is
                masked so it never reaches an edge and turns into a seam.
     ::after  — the artwork. hero-art.webp is the old WordPress illustration
                with the black cut to real alpha and relit in yellow (see
                IMAGE_BRIEF.md). It is decorative only: no <img>, no alt text,
                and it carries no information the copy doesn't already state.

   Opacity is deliberately low. At full strength it fights the h1; the point is
   for it to register as lighting, not as a picture. */
.hero { padding-top:clamp(40px, 6vw, 84px); position:relative; isolation:isolate;
        overflow:hidden;     /* the bloom bleeds right, the art bleeds left */
        padding-bottom:clamp(96px, 13vw, 210px); }  /* room for ::after */
.hero::before {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:0 0 auto 0; height:min(760px, 100%);
  background-image:
    radial-gradient(46% 52% at 84% 26%, rgba(255,230,0,.18), transparent 70%),
    /* second, warmer pool low-left: this one sits under ::after so the
       illustration looks lit from the page rather than pasted onto it */
    radial-gradient(38% 42% at 26% 92%, rgba(255,230,0,.16), transparent 72%),
    linear-gradient(to right,  rgba(var(--ink),.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink),.045) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 64px 64px, 64px 64px;
  /* Mask kept generous at the bottom so the low-left pool survives it. */
  -webkit-mask-image:radial-gradient(135% 108% at 66% 26%, #000 0%, transparent 78%);
          mask-image:radial-gradient(135% 108% at 66% 26%, #000 0%, transparent 78%);
}
.hero::after {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  /* The whole strip, visible end to end. It is five recognisable objects in a
     row, so any crop or upscale turns it into an unreadable smudge — the two
     earlier attempts (behind the copy, full-bleed band) both failed that way.
     Sized to the dead space under the left column instead, where it fits at
     natural ratio and the quote card never crosses it. */
  /* 10% left, not 0: .wrap is 80% centred, so this lines the illustration up
     with the headline instead of hanging off the viewport edge. */
  left:10%; bottom:clamp(10px, 2.4vw, 34px);
  width:min(700px, 48vw); aspect-ratio:1200/449;
  background:url('/img/hero-art.webp') no-repeat left bottom/contain;
  opacity:.40;
  /* Feather the right edge so it dissolves toward the card rather than
     stopping mid-laptop. */
  -webkit-mask-image:linear-gradient(90deg, #000 62%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 62%, transparent 100%);
}
@media (max-width:1080px) {
  /* Stacked layout: no dead column to sit in, so it becomes a quiet full-width
     band under the hero instead. */
  .hero { padding-bottom:clamp(178px, 40vw, 250px); }
  .hero::after { left:50%; transform:translateX(-50%);
                 bottom:clamp(26px, 6vw, 44px);
                 width:min(560px, 88vw); opacity:.26;
                 -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
                         mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
}

.hero-grid { display:grid; gap:var(--s-10); align-items:start; }
@media (min-width:1080px) { .hero-grid { grid-template-columns:1.15fr 0.85fr; gap:var(--s-9); } }
.hero-eyebrow { display:inline-flex; align-items:center; gap:var(--s-2); flex-wrap:wrap;
                border:1px solid var(--hairline); border-radius:var(--r-pill);
                padding:var(--s-2) var(--s-4); margin-bottom:var(--s-7); }
.hero h1 { margin-bottom:var(--s-6); }
.hero .lead { max-width:56ch; margin-bottom:var(--s-7); }

/* --- Quote form ---------------------------------------------------------- */
.quote-card { background:var(--surface); border:1px solid var(--hairline);
              border-radius:var(--r-lg); padding:var(--s-7); }
.quote-head { display:flex; align-items:baseline; justify-content:space-between;
              gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-6); }
.quote-head h2 { font-size:var(--fs-2xl); }
.opts { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-block:var(--s-5); }
.opt { display:inline-flex; align-items:center; min-height:var(--tap);
       padding:var(--s-2) var(--s-5); border-radius:var(--r-pill);
       border:1px solid var(--hairline-strong); background:transparent; color:var(--text);
       font-family:var(--font-body); font-size:var(--fs-sm); font-weight:var(--w-medium);
       cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.opt:hover { border-color:var(--accent); color:var(--accent); }
.opt input { position:absolute; opacity:0; width:0; height:0; }
.opt:has(input:checked) { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.opt:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
.field { display:block; margin-bottom:var(--s-4); }
.field span { display:block; font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--s-2); }
.field input, .field textarea {
  width:100%; min-height:var(--tap); padding:var(--s-3) var(--s-4); border-radius:var(--r-sm);
  background:var(--surface-sunken); border:1px solid var(--hairline-strong);
  color:var(--text); font-family:var(--font-body); font-size:var(--fs-base); }
.field input:focus, .field textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
.fieldset { border:0; }
.honeypot { position:absolute; left:-9999px; }
.quote-note { font-size:var(--fs-sm); margin-bottom:var(--s-4); }
.quote-call { font-size:var(--fs-xs); margin-top:var(--s-4); }
.quote-call a { color:var(--accent); display:inline-block; padding-block:var(--s-2);
                font-weight:var(--w-medium); }

/* --- Marquee (work + testimonials) --------------------------------------- */
/* #000 below is a mask stop, not a palette colour — only its alpha matters. */
.marquee { overflow-x:auto; overflow-y:hidden; padding-inline:10%;
           scrollbar-width:none;
           -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
                   mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.marquee::-webkit-scrollbar { display:none; }
.marquee-track { display:flex; gap:var(--s-5); width:max-content;
                 animation:marquee 48s linear infinite; }
.marquee-track--slow { animation-duration:70s; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state:paused; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.work-card { border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden;
             background:var(--surface-sunken); transition:border-color var(--dur) var(--ease); }
.work-card:hover { border-color:var(--accent); transform:translateY(-3px); }
.work-card { transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.marquee .work-card { width:248px; flex:none; }
.work-shot { aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden;
             background:var(--surface); color:var(--text-subtle); }
.work-shot img { width:100%; height:100%; object-fit:cover; }
.work-meta { padding:var(--s-5); }
.work-meta h3 { font-size:var(--fs-md); margin-bottom:var(--s-1); }
.work-meta p  { font-size:var(--fs-xs); color:var(--text-subtle); }

.marquee .slot { width:320px; flex:none; }
.slot { border:1px dashed var(--hairline-strong); border-radius:var(--r-card);
        padding:var(--s-6); background:transparent; }
.slot blockquote { font-family:var(--font-accent); font-style:italic; font-weight:500;
                   font-size:var(--fs-xl); color:var(--text-subtle);
                   margin-block:var(--s-4); line-height:1.32; }
.slot cite { font-style:normal; font-size:var(--fs-sm); color:var(--text-subtle); }

/* --- Services ------------------------------------------------------------ */
.svc-grid  { display:grid; gap:var(--s-5); }
.svc-stack { display:grid; gap:var(--s-5); min-width:0; }
@media (min-width:900px) { .svc-grid { grid-template-columns:1.05fr 0.95fr; align-items:start; } }
.svc { min-width:0; }
.svc-head { display:flex; align-items:flex-start; justify-content:space-between;
            gap:var(--s-4); flex-wrap:wrap; }
.svc-head h3 { min-width:0; }
.svc h3 { font-size:var(--fs-2xl); }
.svc .price { font-family:var(--font-display); font-weight:var(--w-display);
              font-size:var(--fs-sm); color:var(--accent); white-space:nowrap; }
.svc .price--pill { background:var(--accent); color:var(--on-accent);
                    padding:var(--s-2) var(--s-4); border-radius:var(--r-pill); }
.svc p  { margin-block:var(--s-5); color:var(--text-muted); }
.svc ul { list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.svc li { font-size:var(--fs-xs); color:var(--text-subtle);
          border:1px solid var(--hairline); border-radius:var(--r-pill); padding:var(--s-2) var(--s-4); }
.svc--lead { display:flex; flex-direction:column; min-height:100%; }
.svc--lead h3 { font-size:var(--fs-3xl); }
a.svc { transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.svc-more { transition:transform var(--dur) var(--ease); }
a.svc:hover { border-color:var(--accent); transform:translateY(-3px); }
a.svc:hover .svc-more { transform:translateX(4px); }
.svc-more { margin-top:var(--s-5); font-size:var(--fs-sm); font-weight:var(--w-medium);
            color:var(--accent); }
.svc--lead ul { margin-top:auto; padding-top:var(--s-7); }
.svc--lead .svc-more { margin-top:var(--s-6); }

/* --- Process ------------------------------------------------------------- */
.steps { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.step .n { font-family:var(--font-display); font-weight:var(--w-display);
           font-size:var(--fs-sm); color:var(--accent); }
.step .when { margin-block:var(--s-2); }
.step h3 { margin-bottom:var(--s-3); }
.step p  { color:var(--text-muted); font-size:var(--fs-sm); }
.step .tag { margin-top:var(--s-4); font-size:var(--fs-xs); color:var(--text-subtle); }

/* --- Plans (hosting page; also sections/pricing.php if restored) ---------- */
.plans { display:grid; gap:var(--s-4); grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:900px) { .plans { grid-template-columns:1fr; } }
.plan { background:var(--surface); border:1px solid var(--hairline);
        border-radius:var(--r-card); padding:var(--s-6); display:flex; flex-direction:column; }
.plan--featured { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.plan--featured .plan-list li,
.plan--featured .plan-foot,
.plan--featured .plan-promise { color:color-mix(in srgb, var(--on-accent) 78%, transparent); }
.plan--featured .plan-list li::before { color:var(--on-accent); }
.plan-top { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2); }
.plan-top h3 { font-size:var(--fs-lg); }
.badge { font-size:var(--fs-label); font-weight:var(--w-bold); padding:var(--s-1) var(--s-3);
         border-radius:var(--r-pill); border:1px solid currentColor; opacity:.75; }
.plan-price { font-family:var(--font-display); font-weight:var(--w-display);
              font-size:var(--fs-3xl); margin-top:var(--s-3); letter-spacing:var(--track-tight); }
.plan-price small { font-family:var(--font-body); font-weight:var(--w-body);
                    font-size:var(--fs-xs); opacity:.7; }
.plan-promise { font-size:var(--fs-sm); margin-block:var(--s-3); color:var(--text-muted); }
.plan-list { list-style:none; display:grid; gap:var(--s-2); align-content:start; flex:1; }
.plan-list li { font-size:var(--fs-sm); color:var(--text-muted);
                padding-left:var(--s-4); position:relative; }
.plan-list li::before { content:'·'; position:absolute; left:0; color:var(--accent); }
.plan-foot { margin-top:var(--s-5); font-size:var(--fs-xs); color:var(--text-subtle); }

/* --- FAQ ----------------------------------------------------------------- */
.faq-list { border-top:1px solid var(--hairline); }
.faq-item { border-bottom:1px solid var(--hairline); }
.faq-item summary { cursor:pointer; list-style:none; padding-block:var(--s-6);
                    display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
                    font-family:var(--font-display); font-weight:var(--w-display);
                    font-size:var(--fs-lg); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; color:var(--accent); font-size:var(--fs-xl); flex:none;
                            transition:transform var(--dur) var(--ease); }
.faq-item summary:hover { color:var(--accent); }
.faq-item[open] summary::after { content:'–'; }
.faq-item p { padding-bottom:var(--s-6); color:var(--text-muted); }

/* --- Contact and footer -------------------------------------------------- */
.contact h2 { font-size:var(--fs-5xl); }
.contact .lead { margin-block:var(--s-5) var(--s-7); }
.contact-lines { display:flex; flex-wrap:wrap; gap:var(--s-5); align-items:center; }
.contact-lines > a { display:inline-flex; align-items:center; min-height:var(--tap); }
.contact-lines .tel { font-family:var(--font-display); font-weight:var(--w-display);
                      font-size:var(--fs-3xl); letter-spacing:var(--track-tight); }
.contact-lines a:hover { color:var(--accent); }
.foot-areas { border-top:1px solid var(--hairline); padding-top:var(--s-7);
              font-size:var(--fs-xs); color:var(--text-subtle); }
.foot { padding-block:var(--s-7); display:flex; flex-wrap:wrap; gap:var(--s-4);
        justify-content:space-between; font-size:var(--fs-sm); color:var(--text-subtle); }

/* --- Service detail pages ------------------------------------------------ */
.crumbs { font-size:var(--fs-sm); color:var(--text-subtle); margin-bottom:var(--s-7); }
.crumbs a { padding-block:var(--s-2); transition:color var(--dur) var(--ease); }
.crumbs a:hover { color:var(--accent); }
.crumbs span { margin-inline:var(--s-2); }
.page-hero { padding-block:var(--s-9) var(--s-8); }
.page-hero-grid { display:grid; gap:var(--s-9); align-items:center; }
@media (min-width:1080px) { .page-hero-grid { grid-template-columns:1.05fr 0.95fr; gap:var(--s-8); } }
.page-hero h1 { font-size:clamp(30px, 4.4vw, 56px); margin-bottom:var(--s-5); }
.page-intro { margin-top:var(--s-4); max-width:70ch; font-size:var(--fs-md); }
.page-proof { display:flex; flex-wrap:wrap; gap:var(--s-8); margin-block:var(--s-7); }
.page-cta { margin-top:var(--s-6); }
.page-figure { position:relative; margin:0; }
.page-figure img { width:100%; border-radius:var(--r-lg); border:1px solid var(--hairline);
                   background:var(--surface-sunken); }
.page-figure figcaption { position:absolute; left:var(--s-5); bottom:var(--s-5);
                          background:var(--accent); color:var(--on-accent);
                          font-family:var(--font-display); font-weight:var(--w-display);
                          font-size:var(--fs-sm); padding:var(--s-2) var(--s-5);
                          border-radius:var(--r-pill); }
/* Transparent illustrations sit on the page rather than in a framed panel.
   They also can't take an absolutely-positioned caption: the PNG has empty
   margins, so a pill pinned to the figure's bottom-left lands in dead space
   with nothing above it. For --art the pill goes back into normal flow,
   centred under the drawing, where it stays attached to what it labels. */
.page-figure--art { text-align:center; }
.page-figure--art img { border:0; background:none; border-radius:0;
                        max-height:420px; width:auto; max-width:100%;
                        margin-inline:auto; }
.page-figure--art figcaption { position:static; display:inline-block;
                               margin-top:var(--s-4); }

.plans-section { padding-block:var(--s-8); }
.blocks { padding-block:var(--s-8) var(--s-9); }
/* stretch, NOT start: these cards hold lists of wildly different lengths
   ("What the build includes" has 8 bullets, "What moves the price" has 5).
   With align-items:start each card kept its natural height and the short one
   left a hole under itself, which read as a broken layout. Stretching makes
   every card in a row share the tallest height; the content still sits at the
   top because .card is a column flex container with the spacer below. */
.block-grid { display:grid; gap:var(--s-5); align-items:stretch; }
.block { display:flex; flex-direction:column; }
.block > :last-child { margin-bottom:0; }
@media (min-width:900px) { .block-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.block h2 { font-size:var(--fs-xl); margin-bottom:var(--s-4); }
.block p  { font-size:var(--fs-sm); }
.block ul { list-style:none; margin-top:var(--s-4); display:grid; gap:var(--s-2); }
.block li { font-size:var(--fs-sm); color:var(--text-muted);
            padding-left:var(--s-4); position:relative; }
.block li::before { content:'·'; position:absolute; left:0; color:var(--accent); }
.page-foot { margin-bottom:var(--s-7); max-width:70ch; }

/* --- Stats (service page proof; also sections/about.php if restored) ------ */
.stats { display:grid; gap:var(--s-6); grid-template-columns:repeat(3, 1fr); margin-top:var(--s-8); }
.stat b { display:block; font-family:var(--font-display); font-weight:var(--w-display);
          font-size:var(--fs-xl); }
.stat span { font-size:var(--fs-sm); color:var(--text-subtle); }
@media (max-width:640px) { .stats { grid-template-columns:1fr; gap:var(--s-4); } }

.link-accent { color:var(--accent); }

/* --- Form result states -------------------------------------------------- */
.form-note { font-size:var(--fs-sm); line-height:var(--lh-body);
             padding:var(--s-4) var(--s-5); border-radius:var(--r-sm);
             margin-bottom:var(--s-5); }
.form-note--ok  { background:var(--accent); color:var(--on-accent); font-weight:var(--w-medium); }
.form-note--err { border:1px solid var(--hairline-strong); color:var(--text-muted); }