/* ============================================================
   X DENTAL LAB (EXPRESS DENTAL LABORATORY) — GLOBAL STYLESHEET
   ============================================================
   Hand-written. Not generator-owned (F9): no script rewrites this file.

   Source: the v5 site export ("Express Dental Lab homepage design.zip",
   2026-10-21): EDL Home v5, About, Get Started, Services Hub, Service
   Category, Service Detail, Service Sections, Insights (hub, archive,
   article) and the Global Header, Footer, Primary CTA, Steps and
   Testimonials, built on the X Dental Lab design system (violet #432E7D +
   coral #ED7366). Token blocks are verbatim from its tokens/*.css; every
   component is the export's inline styles moved into named classes (F6).

   Load order: tailwind.css (compiled utilities) first, then this file (F7).

   Brand rules carried from the export:
   - Violet grounds, Ink type, cool Paper page, Lilac soft cards.
   - Coral is the action colour: the pill, the X, icons, underlines, accents.
   - Dark heroes run under a transparent fixed header; it turns into a white
     floating pill once the page scrolls (or from the start on light pages).
   - Heroes end in the pixel edge into the next band; ink and violet bands
     meet the same way. Chevron patterns sit behind coral and violet bands.
   - Motion: scroll reveals (global.js) start from the authored layout and
     never hide copy without JS or with reduced motion.
   ============================================================ */

/* ============================================================
   1. FONTS — Figtree, self-hosted (variable 300–900)
   ============================================================ */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/Figtree-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/Figtree-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url('../fonts/Figtree-Italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url('../fonts/Figtree-Italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================
   2. TOKENS — verbatim from the design system (tokens/*.css)
   ============================================================ */
:root{
  /* Core */
  --xdl-violet:#432E7D;
  --xdl-coral:#ED7366;
  --xdl-ink:#08123A;
  --xdl-paper:#F6F7F2;
  --xdl-white:#FFFFFF;
  /* Secondary */
  --xdl-lilac:#EDEBF0;
  --xdl-mist:#E5E3E6;
  --xdl-violet-soft:#4C3A84;
  --xdl-violet-line:#67529B;
  --xdl-violet-100:#D9D1F3;
  --xdl-slate:#5F5F73;
  --xdl-gray:#A29DB1;
  --xdl-rule:#E6E7E0;
  --xdl-field:#D9D6DF;
  --xdl-field-strong:#C0BDC4;
  /* Derived interaction shades */
  --xdl-violet-hover:#3A2770;
  --xdl-violet-press:#301F60;
  --xdl-coral-hover:#E35F51;
  --xdl-coral-press:#D45244;
  --xdl-ink-hover:#142057;
  --xdl-lilac-strong:#DDD9E6;
  --xdl-white-a12:rgba(255,255,255,.12);
  --xdl-white-a24:rgba(255,255,255,.24);
  --xdl-white-a72:rgba(255,255,255,.72);
  --xdl-ink-a08:rgba(8,18,58,.08);
  --xdl-ink-a16:rgba(8,18,58,.16);
  --xdl-ink-a56:rgba(8,18,58,.56);
  /* Status */
  --xdl-red:#C02A43;
  --xdl-red-tint:#FBE6EA;
  --xdl-green:#12805C;
  --xdl-green-tint:#DDF4EA;
  /* Coral fill-sweep shade (oklch l − 0.09 of coral, as in the export) */
  --xdl-coral-sweep:#C95A4F;
  /* Accessible coral shades (WCAG 2.1 AA; not in the export's token set).
     Brand coral #ED7366 reaches only 2.7:1 on paper and 2.9:1 against white,
     so: coral grounds use the hover coral, which white display type clears at
     3.5:1; coral type on light grounds uses the press coral for headings
     (3.5–3.8:1, large text) and a deeper coral for small labels (5:1+);
     small coral type on dark grounds uses the brand hue at full saturation,
     lifted just enough to clear 4.5:1 on violet (Pastel #92, #98: the earlier
     pale tint read as pink, not coral). */
  --xdl-coral-ground:#E35F51;
  /* Pastel #4 (Sebastian): white pill labels. The lightest coral that keeps white
     text at WCAG AA (4.6:1); the hover sweep is the AA type coral (5.9:1). */
  --xdl-coral-btn:#C94A3D;
  --xdl-coral-type-lg:#D45244;
  --xdl-coral-type:#B03E33;
  --xdl-coral-on-dark:#FF8375;

  /* Semantic */
  --surface-page:var(--xdl-paper);
  --surface-card:var(--xdl-white);
  --text-strong:var(--xdl-ink);
  --text-body:var(--xdl-ink);
  --text-muted:var(--xdl-slate);
  --text-error:var(--xdl-red);
  --border-field:var(--xdl-field);
  --border-field-hover:var(--xdl-field-strong);
  --border-focus:var(--xdl-violet);
  --focus-ring:0 0 0 3px rgba(67,46,125,.24);

  /* Type */
  --font-sans:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --fs-body-lg:18px; --fs-body:16px; --fs-small:14px; --fs-caption:13px; --fs-eyebrow:12px; --fs-tag:11px;
  --ls-eyebrow:0.28em; --ls-tag:0.12em;

  /* Space, radius, layout */
  --radius-xs:4px; --radius-sm:8px; --radius-md:10px; --radius-lg:20px; --radius-card:28px; --radius-pill:999px;
  --control-h:48px; --control-h-sm:40px; --control-h-lg:56px;
  --page-max:1200px;
  --nav-h:80px;

  /* Elevation & motion */
  --shadow-feature:0 28px 64px rgba(67,46,125,.16),0 6px 18px rgba(67,46,125,.08);
  --shadow-card:0 1px 2px rgba(8,18,58,.05),0 16px 40px -20px rgba(8,18,58,.18);
  --shadow-card-hover:0 2px 4px rgba(8,18,58,.06),0 36px 72px -28px rgba(8,18,58,.3);
  --shadow-float:0 1px 2px rgba(8,18,58,.05),0 32px 72px -36px rgba(8,18,58,.35);
  --shadow-overlay:0 24px 64px rgba(8,18,58,.24);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-express:cubic-bezier(.3,0,0,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --ease-sweep:cubic-bezier(.65,0,.35,1);

  /* Section rhythm used by the export */
  --pad-xl:clamp(96px,12vw,170px);
  --pad-lg:clamp(88px,10vw,150px);
  --pad-md:clamp(80px,9vw,140px);
}

/* ============================================================
   3. BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; scroll-padding-top:96px; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.6; color:var(--text-body); background:var(--surface-page); overflow-x:clip; }
img,video,svg{ max-width:100%; }
img{ height:auto; display:block; }
a{ color:var(--text-body); text-decoration:underline; text-decoration-color:var(--xdl-coral); text-decoration-thickness:2px; text-underline-offset:5px; }
a:hover{ color:var(--xdl-coral-type); }
::selection{ background:var(--xdl-coral); color:var(--xdl-ink); }
h1,h2,h3,h4,h5,h6{ margin:0; color:inherit; text-wrap:balance; }
p,li{ text-wrap:pretty; }
p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; }
address{ font-style:normal; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--xdl-violet); outline-offset:3px; border-radius:6px; }
.ground-violet :focus-visible,.ground-ink :focus-visible,.site-header:not(.is-solid) :focus-visible,.site-footer :focus-visible{ outline-color:var(--xdl-coral); }

.skip-nav{
  position:fixed; left:16px; top:-80px; z-index:100;
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--radius-pill);
  background:var(--xdl-coral); color:var(--xdl-ink); font-weight:var(--fw-bold); font-size:15px; text-decoration:none;
}
.skip-nav:focus{ top:16px; color:var(--xdl-ink); }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================
   4. LAYOUT — container, sections, grounds
   ============================================================ */
.container{ width:100%; max-width:calc(var(--page-max) + 48px); margin-inline:auto; padding-inline:24px; }
.section{ position:relative; }
.pad-xl{ padding-block:var(--pad-xl); }
.pad-lg{ padding-block:var(--pad-lg); }
.pad-md{ padding-block:var(--pad-md); }

.ground-paper{ background:var(--xdl-paper); color:var(--xdl-ink); }
.ground-white{ background:var(--xdl-white); color:var(--xdl-ink); }
.ground-lilac{ background:var(--xdl-lilac); color:var(--xdl-ink); }
.ground-coral{ background:var(--xdl-coral-ground); color:var(--xdl-ink); overflow:hidden; }
.ground-violet{ background:var(--xdl-violet); color:var(--xdl-white); }
.ground-ink{ background:var(--xdl-ink); color:var(--xdl-white); }
.ground-violet a:not(.btn),.ground-ink a:not(.btn){ color:var(--xdl-white); }
/* Consecutive bands on the same light ground read as one: no double padding. */
.ground-paper + .ground-paper,.ground-white + .ground-white,.ground-lilac + .ground-lilac{ padding-top:0; }

/* ============================================================
   5. TYPE — the export's scale
   ============================================================ */
.h-section{ font-weight:var(--fw-extrabold); font-size:clamp(40px,5.6vw,80px); line-height:1; letter-spacing:-0.04em; }
.h-section-sm{ font-weight:var(--fw-extrabold); font-size:clamp(36px,4.6vw,64px); line-height:1; letter-spacing:-0.04em; }
.h-xl{ font-weight:var(--fw-extrabold); font-size:clamp(48px,7.4vw,112px); line-height:.96; letter-spacing:-0.045em; }
.h-band{ font-weight:var(--fw-extrabold); font-size:clamp(52px,8.6vw,132px); line-height:.94; letter-spacing:-0.045em; }
.lede{ font-size:22px; line-height:1.6; }
.lede-xl{ font-weight:var(--fw-medium); font-size:clamp(30px,4.1vw,60px); line-height:1.1; letter-spacing:-0.03em; }
/* Words an editor wraps in *asterisks*: coral, or ink on a coral band. */
.accent{ color:var(--xdl-coral-type-lg); }
.hero .accent,.ground-ink .accent,.ground-violet .accent,.card-ink .accent,.card-violet .accent,.reviews .accent,.cta-final .accent,.icard .accent{ color:var(--xdl-coral); }
.ground-coral .accent{ color:var(--xdl-ink); }

/* Eyebrow — tracked caps label (footer column titles) */
.eyebrow{ display:block; margin:0; font-weight:var(--fw-bold); font-size:var(--fs-eyebrow); line-height:1.2; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--xdl-violet); }
.ground-ink .eyebrow,.site-footer .eyebrow{ color:var(--xdl-coral); }
.ground-violet .eyebrow{ color:var(--xdl-coral-on-dark); }

/* Tag — pill ("CLIENT TO CONFIRM") */
.tag{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 12px; border-radius:var(--radius-pill); background:var(--xdl-violet); color:var(--xdl-white); font-weight:var(--fw-extrabold); font-size:var(--fs-tag); letter-spacing:var(--ls-tag); text-transform:uppercase; line-height:1; white-space:nowrap; }
.tag--coral{ background:var(--xdl-coral); color:var(--xdl-ink); }

/* Prose — wysiwyg output */
.prose > * + *{ margin-top:22px; }
.prose p,.prose li{ font-size:20px; line-height:1.65; }
.prose ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.prose ul li{ position:relative; padding-left:calc(.42em + 16px); }
.prose ul li::before{ content:""; position:absolute; left:0; top:.62em; width:.42em; height:.42em; background:var(--xdl-coral); }
.prose ol{ padding-left:1.3em; }
.prose strong{ font-weight:var(--fw-bold); color:var(--xdl-coral-type); }
.ground-ink .prose strong{ color:var(--xdl-coral); }
.ground-ink .prose li strong{ color:var(--xdl-white); }
.ground-violet .prose strong{ color:var(--xdl-coral-on-dark); }
.prose a{ font-weight:var(--fw-bold); }

/* Placeholder marker chip (export rich(): dashed coral border, tinted ground,
   "Confirm days" / "Needs content: kit photo"). Applied by edl_mark(). It is
   unmistakable on purpose (C5) and must be gone before launch. */
.ctc{
  display:inline; padding:.08em .4em; margin:0 .08em; border-radius:6px;
  border:1.5px dashed var(--xdl-coral); background:rgba(237,115,102,.14);
  color:inherit; font-size:.8em; font-weight:var(--fw-bold); letter-spacing:0; line-height:1.5;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero .ctc,.ground-ink .ctc,.ground-violet .ctc,.card-violet .ctc,.card-ink .ctc{ background:var(--xdl-white-a12); }
.ground-coral .ctc,.steps-band .ctc,.steps-card .ctc{ border-color:var(--xdl-ink); background:var(--xdl-white-a24); }
.ctc-para{ font-size:15px; line-height:1.5; }
/* Inside a coral label the chip keeps ink type: coral at chip size fails contrast */
.team-role .ctc,.tm-role .ctc,.ta-pick .ctc,.post-topic .ctc,.faq summary .ctc,.note-bar strong .ctc,.prose strong .ctc{ color:var(--xdl-ink); }
.ctc-para .ctc{ font-size:1em; }

/* ============================================================
   6. BUTTONS & LINKS — the export's pills and underline links
   ============================================================ */
/* Pill with a fill that sweeps in from the left on hover. */
.btn{
  --btn-bg:var(--xdl-coral-btn); --btn-sweep:var(--xdl-coral-type); --btn-fg:var(--xdl-white);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--control-h-lg); padding:0 32px; border:0; border-radius:var(--radius-pill);
  background-color:var(--btn-bg); background-image:linear-gradient(var(--btn-sweep),var(--btn-sweep));
  background-size:0% 100%; background-position:left center; background-repeat:no-repeat;
  color:var(--btn-fg); font:var(--fw-bold) var(--fs-body)/1 var(--font-sans);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-size 650ms var(--ease-sweep);
}
.btn:hover{ color:var(--btn-fg); background-size:100% 100%; }
.btn svg{ flex:none; width:18px; height:18px; }
.btn--md{ height:var(--control-h); padding:0 24px; gap:8px; font-size:15px; }
.btn--dark{ --btn-bg:var(--xdl-ink); --btn-sweep:var(--xdl-violet); --btn-fg:var(--xdl-white); }
.btn--block{ display:flex; width:100%; }

/* Underlined link: a 2px base line with a coral line sweeping over it. */
.tlink{
  --tl-base:var(--xdl-ink-a16);
  display:inline-flex; align-items:center; gap:4px; padding-bottom:7px;
  font-weight:var(--fw-bold); font-size:var(--fs-body); line-height:1.2; color:var(--xdl-ink); text-decoration:none;
  background-image:linear-gradient(var(--xdl-coral),var(--xdl-coral)),linear-gradient(var(--tl-base),var(--tl-base));
  background-size:0% 2px,100% 2px; background-position:0 100%,0 100%; background-repeat:no-repeat;
  transition:background-size 600ms var(--ease-soft);
}
.tlink:hover{ color:var(--xdl-ink); background-size:100% 2px,100% 2px; }
.tlink svg{ flex:none; width:16px; height:16px; }
.tlink--soft{ --tl-base:var(--xdl-ink-a16); }
.hero .tlink,.ground-ink .tlink,.ground-violet .tlink,.card-violet .tlink,.card-ink .tlink{ color:var(--xdl-white); --tl-base:var(--xdl-white); }
.hero .tlink:hover,.ground-ink .tlink:hover,.ground-violet .tlink:hover,.card-violet .tlink:hover,.card-ink .tlink:hover{ color:var(--xdl-white); }
.hero--light .tlink{ color:var(--xdl-ink); --tl-base:var(--xdl-ink-a16); }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }

/* Round arrow buttons (card arrows) and icon buttons */
.round{ flex:none; width:52px; height:52px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center; background:var(--xdl-violet); color:var(--xdl-white); transition:background 200ms ease; }
.round svg{ width:22px; height:22px; }
a.round:hover,.round-host:hover .round{ background:var(--xdl-coral); color:var(--xdl-white); }
.round--coral{ background:var(--xdl-coral-ground); transition:background 450ms var(--ease-soft),transform 150ms ease; }
a.round--coral:hover,.round-host:hover .round--coral{ background:var(--xdl-coral-btn); }
a.round:active{ transform:scale(.94); }
.round--lg{ width:56px; height:56px; }
.round--lg svg{ width:24px; height:24px; }
.icon-btn{ flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--xdl-white-a12); color:var(--xdl-white); cursor:pointer; transition:background 120ms var(--ease-out),transform 120ms var(--ease-out); }
.icon-btn:hover{ background:var(--xdl-white-a24); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn svg{ width:20px; height:20px; }

/* Phone link pill ("(405) 217-2282" under the founder) and phone lines */
.phone-pill{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px; border-radius:var(--radius-pill); color:var(--xdl-ink); font-weight:var(--fw-bold); font-size:17px; text-decoration:none; font-variant-numeric:tabular-nums; transition:background 150ms ease,color 150ms ease; }
.phone-pill:hover{ background:var(--xdl-lilac); color:var(--xdl-violet); }
.phone-pill svg{ width:18px; height:18px; }
.phone-line{ font-size:18px; line-height:1.6; }
.phone-line a{ font-weight:var(--fw-bold); text-decoration:none; padding-bottom:4px; background-image:linear-gradient(var(--xdl-coral),var(--xdl-coral)),linear-gradient(currentColor,currentColor); background-size:0% 2px,100% 2px; background-position:0 100%,0 100%; background-repeat:no-repeat; transition:background-size 600ms var(--ease-soft); white-space:nowrap; }
.phone-line a:hover{ background-size:100% 2px,100% 2px; }

/* ============================================================
   7. BRAND GRAPHICS — pixel edge, chevron patterns, pixel icons
   ============================================================ */
/* 42 squares across the full width, three rows; a seam between two bands. */
.pixel-edge{ position:relative; z-index:2; line-height:0; }
.pixel-edge svg{ display:block; width:100%; height:auto; max-width:none; }
.pixel-edge--join{ margin-bottom:-1px; }
/* The chevron (the X's left stroke) tiled at -30°, tone on tone. */
.chev-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; max-width:none; }
.chev-bg .chev{ fill:#DC5A4C; }
.chev-bg--violet .chev{ fill:#3E2A75; }
/* A row of coral chevrons streaming behind a portrait, faded at the sides. */
.chev-row{ position:absolute; top:50%; left:calc(50% - 50vw); width:100vw; height:140px; transform:translateY(-50%); display:block; max-width:none; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%,#000 65%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 35%,#000 65%,transparent 100%); }
.chev-row .chev{ fill:var(--xdl-coral); }
.pixel-icon{ display:block; flex:none; width:88px; height:88px; }

/* ============================================================
   8. HEADER — fixed; transparent over dark heroes, white pill when solid
   ============================================================ */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; }
.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header{ top:46px; } }
.header-bar{ position:relative; isolation:isolate; max-width:1272px; margin:0 auto; padding:0 20px 0 36px; height:var(--nav-h); display:flex; align-items:center; gap:20px; }
.header-pill{ position:absolute; top:8px; bottom:8px; left:12px; right:12px; z-index:-1; border-radius:var(--radius-pill); background:var(--xdl-white); border:1px solid rgba(8,18,58,.08); box-shadow:0 12px 32px rgba(8,18,58,.14); opacity:0; transition:opacity 300ms ease; pointer-events:none; }
.site-header.is-solid .header-pill,.site-header.menu-open .header-pill{ opacity:1; }
.header-logo{ display:flex; align-items:center; min-height:44px; flex:none; text-decoration:none; }
.header-logo svg{ display:block; height:26px; width:auto; }
.logo .logo-accent{ fill:var(--xdl-coral); }
.logo .logo-ink{ fill:var(--xdl-white); transition:fill 300ms ease; }
.site-header.is-solid .logo-ink,.site-header.menu-open .logo-ink{ fill:var(--xdl-ink); }
.header-nav-wrap{ flex:1; display:flex; align-items:center; gap:20px; }
.primary-nav{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.nav-link{
  display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 14px; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--xdl-white); text-decoration:none; font:var(--fw-medium) 15px/1 var(--font-sans); white-space:nowrap; cursor:pointer;
  transition:background 150ms ease,color 300ms ease;
}
.nav-link svg{ width:14px; height:14px; color:var(--xdl-coral); }
.nav-link:hover,.nav-item.is-open > .nav-link{ background:var(--xdl-white-a12); color:var(--xdl-white); }
.nav-link.is-active{ background:var(--xdl-white-a12); }
.site-header.is-solid .nav-link{ color:var(--xdl-ink); }
.site-header.is-solid .nav-link:hover,.site-header.is-solid .nav-item.is-open > .nav-link,.site-header.is-solid .nav-link.is-active{ background:var(--xdl-lilac); color:var(--xdl-ink); }
.nav-divider{ flex:none; width:1px; height:40px; margin:0 8px; background:var(--xdl-white-a24); transition:background 300ms ease; }
.site-header.is-solid .nav-divider{ background:var(--xdl-ink-a16); }
.header-actions{ flex:none; display:flex; align-items:center; gap:8px; }
.nav-login{ gap:8px; font-weight:var(--fw-bold); padding:0 16px; }
.nav-link .nav-login-icon{ width:18px; height:18px; stroke-width:2.25; }
.header-cta{ flex:none; }

/* Mega panel (Services) and dropdowns (For Dentists, About) */
.menu-panel{ position:absolute; z-index:5; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity 320ms var(--ease-soft),transform 320ms var(--ease-soft),visibility 0s linear 320ms; }
.nav-item.is-open > .menu-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
.mega{ top:72px; left:12px; right:12px; padding-top:8px; }
.mega-box{ border-radius:28px; background:var(--xdl-white); border:1px solid rgba(8,18,58,.08); box-shadow:0 32px 80px -24px rgba(8,18,58,.35); padding:clamp(28px,3vw,40px) clamp(28px,3vw,40px) 24px; display:flex; flex-direction:column; gap:24px; max-height:calc(100dvh - 120px); overflow:hidden; }
.mega-grid{ flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -12px; padding:0 12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 28px; }
.mega-col{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mega-cat{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:6px 10px; margin:0 -10px 4px; border-radius:12px; color:var(--xdl-ink); text-decoration:none; font-weight:var(--fw-extrabold); font-size:18px; line-height:1.25; letter-spacing:-0.015em; transition:color 150ms ease; }
.mega-cat:hover{ color:var(--xdl-coral-type); }
.mega-cat svg{ width:16px; height:16px; }
.mega-item{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; margin:0 -10px; border-radius:12px; color:var(--xdl-ink); text-decoration:none; transition:background 150ms ease; }
.mega-item:hover{ background:var(--xdl-coral-btn); color:var(--xdl-white); }
.mega-item-name{ font-weight:var(--fw-semibold); font-size:15px; line-height:1.35; }
.mega-item-desc{ font-size:14px; line-height:1.45; }
.mega-foot{ flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding-top:20px; white-space:nowrap; border-top:2px dotted var(--xdl-ink-a16); }
.mega-phone{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-bold); font-size:16px; color:var(--xdl-ink); text-decoration:none; }
.mega-phone:hover{ color:var(--xdl-coral-type); }
.mega-phone svg{ width:18px; height:18px; }
.nav-item--dd{ position:relative; }
.dropdown{ top:44px; left:-8px; padding-top:12px; }
.dropdown-box{ min-width:260px; border-radius:20px; background:var(--xdl-white); border:1px solid rgba(8,18,58,.08); box-shadow:0 24px 60px -20px rgba(8,18,58,.32); padding:8px; display:flex; flex-direction:column; }
.dropdown-link{ display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:12px; color:var(--xdl-ink); text-decoration:none; font-weight:var(--fw-semibold); font-size:15px; white-space:nowrap; transition:background 150ms ease; }
.dropdown-link:hover{ background:var(--xdl-coral-btn); color:var(--xdl-white); }

/* Menu button + mobile menu (below 1080px) */
.menu-btn{ display:none; }
.site-header.is-solid .menu-btn,.site-header.menu-open .menu-btn{ background:transparent; color:var(--xdl-ink); }
.menu-btn,.menu-btn:hover,.site-header.is-solid .menu-btn:hover,.site-header.menu-open .menu-btn:hover{ background:transparent; }
.menu-btn .icon-close{ display:none; }
.menu-btn[aria-expanded="true"] .icon-menu{ display:none; }
.menu-btn[aria-expanded="true"] .icon-close{ display:block; }
.mobile-menu{ position:absolute; left:0; right:0; top:var(--nav-h); background:var(--xdl-white); border-top:1px solid var(--xdl-lilac); padding:8px 24px 28px; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; box-shadow:var(--shadow-overlay); }
.mobile-menu[hidden]{ display:none; }
.mm-nav{ display:flex; flex-direction:column; }
.mm-group{ border-bottom:1px solid var(--xdl-lilac); }
.mm-toggle,.mm-link{ width:100%; display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:0; border:0; background:none; color:var(--xdl-ink); font:var(--fw-semibold) 18px/1.2 var(--font-sans); text-align:left; text-decoration:none; cursor:pointer; }
.mm-toggle svg,.mm-link svg{ width:20px; height:20px; transition:transform 200ms ease; }
.mm-toggle svg{ color:var(--xdl-coral); }
.mm-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mm-link{ border-bottom:1px solid var(--xdl-lilac); }
.mm-link:hover{ color:var(--xdl-coral-type); }
.mm-link--case{ border-bottom:0; font-weight:var(--fw-bold); }
.mm-link--case svg{ color:var(--xdl-coral); }
.mm-login{ display:inline-flex; align-items:center; gap:10px; }
.mm-sub{ display:flex; flex-direction:column; padding:0 0 12px; }
.mm-sub[hidden]{ display:none; }
.mm-sub a{ display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:12px; color:var(--xdl-ink); font-size:16px; font-weight:var(--fw-medium); text-decoration:none; }
.mm-sub a:hover{ background:var(--xdl-coral); color:var(--xdl-ink); }
.mm-foot{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.mm-phone{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--xdl-ink); font-weight:var(--fw-bold); text-decoration:none; }
.mm-phone svg{ width:18px; height:18px; }
body.menu-locked{ overflow:hidden; }
@media (max-width:1079px){
  .header-nav-wrap{ display:none; }
  .menu-btn{ display:inline-flex; }
}
@media (min-width:1080px){ .header-actions--mobile,.mobile-menu{ display:none!important; } }
.header-actions--mobile{ margin-left:auto; gap:12px; }
@media (max-width:559px){ .header-actions--mobile .header-cta{ display:none; } .header-bar{ padding:0 20px 0 24px; } }

/* ============================================================
   9. HEROES
   ============================================================ */
.hero{ position:relative; overflow:hidden; background:var(--xdl-violet); color:var(--xdl-white); }
.hero-media{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block; pointer-events:none; background:var(--xdl-ink); }
.hero-overlay{ position:absolute; inset:0; background:var(--xdl-ink); opacity:.25; pointer-events:none; }
/* Final export: the Home hero video sits under a violet veil (78%). */
.hero--home .hero-overlay{ background:var(--xdl-violet); opacity:.78; }
.hero-inner{ position:relative; z-index:1; max-width:calc(var(--page-max) + 48px); margin:0 auto; padding:calc(var(--nav-h) + clamp(72px,8vw,120px)) 24px clamp(72px,8vw,128px); display:flex; flex-direction:column; align-items:flex-start; }
.hero--center .hero-inner{ align-items:center; text-align:center; }
.hero--home .hero-inner{ padding-bottom:clamp(72px,8vw,120px); }
.hero-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:36px; font-weight:var(--fw-semibold); font-size:15px; line-height:1.4; }
.hero-crumb ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.hero-crumb li{ display:flex; align-items:center; gap:8px; }
.hero-crumb a{ color:var(--xdl-white); text-decoration:none; transition:color 200ms ease; }
.hero-crumb a:hover{ color:var(--xdl-coral-on-dark); }
.hero-crumb svg{ width:14px; height:14px; opacity:.8; }
.hero-crumb [aria-current]{ color:var(--xdl-coral-on-dark); }
.hero-kicker{ width:100%; max-width:max(60%,min(100%,560px)); font-weight:var(--fw-medium); font-size:22px; line-height:1.45; text-wrap:pretty; }
.hero--center .hero-kicker{ max-width:34em; text-wrap:balance; }
.hero-display{ margin-top:20px; font-weight:var(--fw-extrabold); font-size:clamp(48px,8.4vw,132px); line-height:.92; letter-spacing:-0.045em; text-wrap:balance; }
.hero--home .hero-display{ margin-top:clamp(28px,3vw,44px); font-size:clamp(48px,10vw,152px); }
.hero-display .line{ display:block; }
.hero-title{ font-weight:var(--fw-extrabold); font-size:clamp(44px,7.6vw,120px); line-height:.93; letter-spacing:-0.045em; text-wrap:balance; }
.hero--center .hero-title{ max-width:11em; font-size:clamp(48px,8.4vw,128px); line-height:.92; }
.hero--big .hero-title{ font-size:clamp(56px,9vw,140px); line-height:.9; letter-spacing:-0.05em; }
.hero--xl .hero-title{ font-size:clamp(48px,9vw,144px); line-height:.92; }
.hero-sub{ margin-top:36px; width:100%; max-width:max(60%,min(100%,560px)); font-size:22px; line-height:1.6; }
.hero--center .hero-sub{ max-width:30em; }
.hero-sub a{ color:var(--xdl-white); font-weight:var(--fw-bold); text-decoration-color:var(--xdl-coral); white-space:nowrap; }
.hero-sub a:hover{ color:var(--xdl-coral-on-dark); }
.hero--light .hero-sub a{ color:var(--xdl-ink); }
.hero--light .hero-sub a:hover{ color:var(--xdl-coral-type); }
.hero-line{ margin-top:20px; width:100%; max-width:max(60%,min(100%,560px)); font-weight:var(--fw-bold); font-size:22px; line-height:1.5; }
.hero-actions{ margin-top:40px; }
.hero--center .hero-actions{ justify-content:center; }
.hero--home .hero-actions{ margin-top:clamp(40px,4vw,56px); }
.hero-micro{ margin-top:20px; font-size:16px; line-height:1.5; }
.hero-badge{ margin-top:28px; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--radius-pill); background:var(--xdl-white-a12); font-weight:var(--fw-bold); font-size:15px; line-height:1.3; }
.hero-badge svg{ width:18px; height:18px; flex:none; }
.hero .phone-line{ margin-top:20px; }
/* Light hero (articles, legal): ink on paper; the header is solid from the start. */
.hero--light{ background:var(--xdl-paper); color:var(--xdl-ink); }
.hero--light .hero-inner{ padding-top:calc(var(--nav-h) + clamp(56px,6vw,96px)); padding-bottom:clamp(40px,5vw,64px); }
.hero--light .hero-title{ font-size:clamp(40px,5.6vw,80px); line-height:1; letter-spacing:-0.04em; }
.hero--light .hero-crumb a{ color:var(--xdl-ink); }
.hero--light .hero-sub{ font-size:20px; }
/* Hero with the account form (Get Started): copy left, white form card right. */
.hero--form .hero-inner{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:56px clamp(48px,6vw,96px); align-items:start; padding-top:calc(var(--nav-h) + clamp(64px,7vw,112px)); padding-bottom:clamp(64px,7vw,112px); }
.hero--form .hero-title{ max-width:8em; font-size:clamp(48px,7vw,108px); }
.hero--form .hero-sub{ max-width:26em; }
.hero-copy{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.hero-contacts{ list-style:none; margin-top:48px; width:100%; max-width:30em; display:flex; flex-direction:column; border-top:2px dotted var(--xdl-white-a24); }
.hero-contacts li{ display:flex; align-items:flex-start; gap:16px; padding:22px 0; border-bottom:2px dotted var(--xdl-white-a24); }
.hc-icon{ flex:none; display:inline-flex; margin-top:3px; color:var(--xdl-coral); }
.hc-icon svg{ width:22px; height:22px; }
.hero-contacts p{ font-size:18px; line-height:1.6; }
.hero-contacts .hc-split{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
.hero-contacts a:not(.tlink){ font-weight:var(--fw-bold); color:var(--xdl-white); text-decoration:underline; text-decoration-color:var(--xdl-coral); text-decoration-thickness:2px; text-underline-offset:5px; }
.hero-contacts a:not(.tlink):hover{ color:var(--xdl-coral-on-dark); }
.form-card{ min-width:0; border-radius:var(--radius-card); background:var(--xdl-white); color:var(--xdl-ink); box-shadow:0 40px 96px -40px rgba(8,18,58,.55),0 2px 6px rgba(8,18,58,.08); padding:clamp(28px,3.6vw,48px); }
.form-card-title{ margin-bottom:28px; font-weight:var(--fw-extrabold); font-size:clamp(30px,3vw,40px); line-height:1.05; letter-spacing:-0.035em; }

/* ============================================================
   10. SECTIONS — the export's section patterns
   ============================================================ */
.sec-head{ display:flex; flex-direction:column; gap:24px; margin-bottom:clamp(40px,5vw,72px); }
.sec-head--center{ align-items:center; text-align:center; }
.sec-head--center .h-section{ max-width:12em; }
.sec-head .lede{ max-width:36em; font-size:20px; }
.sec-head--split{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 48px; }

/* Intro: a large lede and the proof points with coral squares (Home) */
.intro-lede{ max-width:19em; }
.proof-list{ list-style:none; margin-top:clamp(56px,7vw,112px); max-width:980px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:24px 48px; }
.proof-list li{ display:flex; align-items:baseline; gap:16px; font-size:clamp(22px,2.2vw,30px); line-height:1.3; letter-spacing:-0.015em; }
.proof-list li::before{ content:""; flex:none; width:.36em; height:.36em; background:var(--xdl-coral); transform:translateY(-.08em); }
.proof-sub{ display:block; margin-top:6px; font-size:.6em; letter-spacing:0; }

/* Coral band: two-tone heading, a dark pill and a paragraph */
.band-inner{ position:relative; z-index:1; }
.band-title{ max-width:8.4em; color:var(--xdl-white); }
.band-grid{ margin-top:clamp(64px,8vw,128px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px 80px; align-items:end; }
.band-text p{ max-width:30em; font-weight:var(--fw-medium); font-size:clamp(19px,1.6vw,22px); line-height:1.55; }

/* Two columns: heading left, text right (About story, Get Started pricing) */
.tcols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:40px clamp(48px,6vw,96px); align-items:start; }
.tcols .h-section{ max-width:9em; }
.tcols-body{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; padding-top:clamp(0px,1vw,12px); min-width:0; }
.tcols-body .prose{ max-width:32em; }
.tcols-line{ font-weight:var(--fw-bold); font-size:22px; line-height:1.5; }
.text-center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:32px; }
.text-center .h-section-sm{ max-width:14em; }
.text-center .prose{ max-width:34em; }
.text-center .prose p{ font-size:22px; }
.lede-block{ display:flex; flex-direction:column; gap:20px; }
.lede-block .lede-xl{ max-width:19em; }
.lede-block .actions{ margin-top:20px; }
.phone-callout{ display:flex; justify-content:center; }
.phone-callout p{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; font-weight:var(--fw-extrabold); font-size:clamp(28px,3.2vw,44px); line-height:1.15; letter-spacing:-0.03em; text-align:center; }
.phone-callout a{ display:inline-flex; align-items:center; gap:12px; color:var(--xdl-ink); text-decoration:none; transition:color 200ms ease; }
.phone-callout a:hover{ color:var(--xdl-coral-type); }
.phone-callout svg{ width:32px; height:32px; }

/* Services as folder tabs (Home). global.js sets each folder's tier;
   server-side the first folder is open and every panel is in the markup. */
.svc-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 48px; margin-bottom:clamp(48px,6vw,96px); }
.svc-head .h-xl{ max-width:8.6em; }
.svc-head .tlink{ margin-bottom:14px; }
.folders{ position:relative; height:calc(16px * 5 + 64px + 600px); --tab-gap:10px; }
.folder{ position:absolute; top:0; left:0; right:0; z-index:var(--z,1); transform:translateY(calc(var(--t,0) * 16px)); transition:transform 750ms var(--ease-soft); pointer-events:none; }
.folder-tab{ pointer-events:auto; position:absolute; top:0; left:calc((100% - 5 * var(--tab-gap)) / 6 * var(--i) + var(--tab-gap) * var(--i)); width:calc((100% - 5 * var(--tab-gap)) / 6); height:64px; display:flex; align-items:center; gap:12px; padding:0 20px; border:0; border-radius:18px 18px 0 0; background:var(--bg); color:var(--xdl-white); font:var(--fw-extrabold) 15px/1.2 var(--font-sans); text-align:left; cursor:pointer; transition:background 500ms,color 300ms; }
.folder:last-child .folder-tab{ width:auto; right:0; }
.folder.is-active .folder-tab{ color:var(--xdl-coral-on-dark); }
.folder-fillet{ position:absolute; top:50px; width:14px; height:14px; background:var(--bg); transition:background 500ms; }
.folder-fillet--l{ left:calc((100% - 5 * var(--tab-gap)) / 6 * var(--i) + var(--tab-gap) * var(--i) - 14px); -webkit-mask:radial-gradient(circle at 0 0,transparent 13.5px,#000 14px); mask:radial-gradient(circle at 0 0,transparent 13.5px,#000 14px); }
.folder-fillet--r{ left:calc((100% - 5 * var(--tab-gap)) / 6 * (var(--i) + 1) + var(--tab-gap) * var(--i)); -webkit-mask:radial-gradient(circle at 100% 0,transparent 13.5px,#000 14px); mask:radial-gradient(circle at 100% 0,transparent 13.5px,#000 14px); }
.folder:first-child .folder-fillet--l,.folder:last-child .folder-fillet--r{ display:none; }
.folder-body{ position:absolute; top:64px; left:0; right:0; height:600px; border-radius:28px; background:var(--bg); transition:background 500ms; }
.folder:first-child .folder-body{ border-radius:0 28px 28px 28px; }
.folder:last-child .folder-body{ border-radius:28px 0 28px 28px; }
.folder-panel{ pointer-events:auto; height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; padding:56px; }
.folder-panel[hidden]{ display:none; }
.folder-copy{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.folder-title{ font-weight:var(--fw-extrabold); font-size:clamp(44px,5.2vw,76px); line-height:.98; letter-spacing:-0.04em; color:var(--xdl-white); }
.folder-title a{ color:inherit; text-decoration:none; }
.folder-desc{ margin-top:24px; max-width:24em; font-size:18px; line-height:1.6; }
.folder-copy .pills{ margin-top:28px; }
.folder-copy .round{ margin-top:auto; }
.folder-media{ position:relative; min-height:240px; border-radius:var(--radius-md); overflow:hidden; background:var(--xdl-violet-soft); }
.folder-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.folder-cards{ display:none; flex-direction:column; gap:16px; }
.fcard{ display:flex; flex-direction:column; gap:20px; padding:28px; border-radius:var(--radius-lg); }
.fcard-title{ font-weight:var(--fw-extrabold); font-size:clamp(30px,6vw,40px); line-height:1.02; letter-spacing:-0.035em; }
.fcard-title a{ color:inherit; text-decoration:none; }
.fcard.card-lilac .fcard-title a{ color:var(--xdl-ink); }
.fcard p{ font-size:18px; line-height:1.6; }
.fcard .folder-media{ min-height:220px; }
.fcard-foot{ display:flex; justify-content:flex-end; }
@media (max-width:959px){ .folders{ display:none; } .folder-cards{ display:flex; } }

/* Sub-link pills (service cards and folders) */
.pills{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.pills a{ display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:var(--radius-pill); background:var(--xdl-white-a12); color:var(--xdl-white); font-weight:var(--fw-bold); font-size:14px; line-height:1; text-decoration:none; white-space:nowrap; transition:background 120ms,color 120ms; }
.pills a:hover{ background:var(--xdl-coral); color:var(--xdl-ink); }
.card-lilac .pills a{ background:var(--xdl-white); color:var(--xdl-ink); }

/* Card shells */
.card-violet{ background:var(--xdl-violet); color:var(--xdl-white); }
.card-ink{ background:var(--xdl-ink); color:var(--xdl-white); }
.card-lilac{ background:var(--xdl-lilac); color:var(--xdl-ink); }
.card-white{ background:var(--xdl-white); color:var(--xdl-ink); }

/* Large pixel-icon cards ("Where most new clients start") */
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:20px; }
.pcard{ min-height:clamp(340px,32vw,460px); display:flex; flex-direction:column; align-items:flex-start; padding:clamp(28px,3.4vw,48px); border-radius:var(--radius-lg); }
.pcard-title{ margin-top:clamp(40px,5vw,72px); max-width:8em; font-weight:var(--fw-extrabold); font-size:clamp(36px,4.2vw,60px); line-height:1; letter-spacing:-0.04em; }
.pcard-body{ margin-top:24px; max-width:24em; font-size:18px; line-height:1.6; }
.pcard-link{ margin-top:auto; padding-top:40px; }
/* v6 For Dentists "Where to start": white cards, two columns, the whole card is the link */
.grid-2--pixel{ grid-template-columns:repeat(auto-fit,minmax(min(100%,max(380px,50% - 12px)),1fr)); gap:24px; }
.pcard--grid{ position:relative; min-height:0; gap:14px; padding:clamp(32px,3.4vw,44px); border-radius:28px; box-shadow:var(--shadow-card); transition:transform 450ms var(--ease-soft),box-shadow 450ms var(--ease-soft); }
.pcard--grid:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); }
.pcard--grid .pixel-icon{ width:72px; height:72px; margin-bottom:clamp(20px,2.6vw,36px); }
.pcard--grid .pcard-title{ margin-top:0; max-width:none; font-size:clamp(28px,2.8vw,40px); line-height:1.05; letter-spacing:-0.03em; text-wrap:balance; }
.pcard--grid .pcard-body{ margin-top:0; flex:1; }
.pcard--grid .pcard-link{ margin-top:12px; padding-top:0; }
.pcard--grid .tlink::after,.mcard .mcard-more::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.pcard--grid:hover .tlink,.mcard:hover .mcard-more{ background-size:100% 2px,100% 2px; }

/* Violet service cards (Services hub) */
.grid-svc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,500px),1fr)); gap:24px; }
.svc-card{ display:flex; flex-direction:column; min-width:0; padding:12px; border-radius:28px; box-shadow:var(--shadow-feature); transition:transform 450ms var(--ease-soft),box-shadow 450ms var(--ease-soft); }
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 40px 80px -28px rgba(67,46,125,.45),0 8px 20px rgba(67,46,125,.12); }
.svc-card-media{ position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:var(--xdl-violet-soft); }
.svc-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc-card-body{ flex:1; display:flex; flex-direction:column; gap:16px; padding:32px 24px 16px; }
.svc-card-title{ font-weight:var(--fw-extrabold); font-size:clamp(32px,3.4vw,52px); line-height:1; letter-spacing:-0.04em; }
.svc-card-title a{ color:var(--xdl-white); text-decoration:none; }
.svc-card-desc{ max-width:28em; font-size:18px; line-height:1.6; }
.svc-card-body .pills{ margin-top:8px; }
.svc-card-foot{ margin-top:auto; padding-top:24px; display:flex; justify-content:flex-end; }

/* White media cards (category children, related services) */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min,320px)),1fr)); gap:24px; }
.mcard{ display:flex; flex-direction:column; min-width:0; padding:12px 12px 28px; border-radius:28px; background:var(--xdl-white); color:var(--xdl-ink); box-shadow:var(--shadow-card); transition:transform 450ms var(--ease-soft),box-shadow 450ms var(--ease-soft); }
.mcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); }
.mcard--compact{ padding:32px 28px 28px; }
.mcard-media{ position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background:var(--xdl-mist); }
.mcard-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mcard-body{ flex:1; display:flex; flex-direction:column; gap:12px; padding:28px 16px 0; }
.mcard--compact .mcard-body{ padding:0; }
.mcard-title{ font-weight:var(--fw-extrabold); font-size:clamp(26px,2.4vw,34px); line-height:1.05; letter-spacing:-0.03em; }
.mcard-desc{ max-width:28em; font-size:18px; line-height:1.6; }
.mcard-foot{ margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mcard{ position:relative; }
.mcard-more{ align-self:flex-start; margin-top:auto; padding-top:16px; }
.mcard-foot + .mcard-more{ margin-top:16px; }
.mcard-badge{ display:flex; align-items:center; gap:8px; font-weight:var(--fw-bold); font-size:15px; line-height:1.4; }
.mcard-badge svg{ width:18px; height:18px; flex:none; }
.sub-links{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:15px; }
.sub-links a{ font-weight:var(--fw-semibold); }

/* Two audience cards with bullets ("Where is your practice with implants?") */
.path-card{ display:flex; flex-direction:column; gap:20px; padding:clamp(32px,4vw,56px); border-radius:28px; box-shadow:var(--shadow-card); }
.path-card.card-violet{ box-shadow:var(--shadow-feature); }
.path-title{ font-weight:var(--fw-extrabold); font-size:clamp(30px,3.2vw,48px); line-height:1.02; letter-spacing:-0.035em; }
.path-card p{ font-size:18px; line-height:1.7; }
.bullets{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.bullets li{ display:flex; align-items:baseline; gap:14px; font-size:18px; line-height:1.6; }
.bullets li::before{ content:""; flex:none; width:.5em; height:.5em; background:var(--xdl-coral); transform:translateY(-.04em); }

/* Ink callout cards with a photo on top ("Need another solution?") */
.ccard{ display:flex; flex-direction:column; border-radius:28px; overflow:hidden; box-shadow:0 24px 56px -28px rgba(8,18,58,.45); }
.ccard-media{ position:relative; aspect-ratio:16/9; background:var(--xdl-violet); }
.ccard-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ccard-body{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:32px; padding:clamp(36px,4.4vw,64px); }
.ccard-title{ font-weight:var(--fw-extrabold); font-size:clamp(30px,3.4vw,52px); line-height:1; letter-spacing:-0.04em; }
.ccard-body p{ margin-top:16px; max-width:30em; font-size:18px; line-height:1.6; }
.ccard--white{ box-shadow:0 1px 2px rgba(8,18,58,.05),0 24px 56px -32px rgba(8,18,58,.28); }
.ccard--white .ccard-title{ font-size:clamp(28px,2.8vw,40px); line-height:1.05; letter-spacing:-0.03em; }

/* Option cards with a tab tag ("Three ways to send zirconia") + note bar */
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:24px; }
.ocard{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:clamp(72px,6vw,88px) clamp(32px,3.4vw,48px) clamp(32px,3.4vw,48px); border-radius:28px; background:var(--xdl-white); color:var(--xdl-ink); box-shadow:var(--shadow-card); }
.ocard-tag{ position:absolute; top:0; left:clamp(32px,3.4vw,48px); display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:0 0 12px 12px; background:var(--xdl-violet); color:var(--xdl-white); font-weight:var(--fw-extrabold); font-size:12px; letter-spacing:.12em; text-transform:uppercase; line-height:1; white-space:nowrap; }
.ocard-title{ font-weight:var(--fw-extrabold); font-size:clamp(28px,2.6vw,38px); line-height:1.04; letter-spacing:-0.03em; }
.ocard p{ font-size:18px; line-height:1.65; }
.note-bar{ width:100%; display:flex; align-items:flex-start; gap:18px; padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px); border-radius:20px; background:var(--xdl-lilac); color:var(--xdl-ink); }
.note-bar--white{ background:var(--xdl-white); }
.note-bar > svg{ flex:none; width:26px; height:26px; margin-top:2px; color:var(--xdl-coral); }
.note-bar p{ max-width:52em; font-size:20px; line-height:1.6; text-align:left; }
.note-bar strong{ font-weight:var(--fw-extrabold); color:var(--xdl-coral-type-lg); }
.note-bar a{ font-weight:var(--fw-bold); }
/* v6 banner: one large line, coral icon, text link; tucks under a band on the same ground */
.note-banner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,56px); border-radius:28px; background:var(--xdl-white); color:var(--xdl-ink); box-shadow:0 1px 2px rgba(8,18,58,.05),0 16px 40px -24px rgba(8,18,58,.2); }
.note-banner p{ display:flex; align-items:center; gap:16px; font-weight:var(--fw-extrabold); font-size:clamp(22px,2.2vw,30px); line-height:1.2; letter-spacing:-0.02em; text-wrap:balance; }
.note-banner-icon{ flex:none; display:inline-flex; color:var(--xdl-coral); }
.note-banner-icon svg{ width:28px; height:28px; stroke-width:2.25; }
.note-banner .tlink{ flex:none; white-space:nowrap; }
.banner-sec--tuck{ z-index:2; margin-top:calc(24px - var(--pad-lg)); padding-top:0; }
/* v6 link panel: ink card with white link chips */
.link-panel{ display:flex; flex-direction:column; align-items:center; gap:clamp(28px,3vw,40px); padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px); border-radius:28px; background:var(--xdl-ink); color:var(--xdl-white); text-align:center; }
.link-panel-title{ font-weight:var(--fw-extrabold); font-size:clamp(32px,3.6vw,52px); line-height:1.05; letter-spacing:-0.04em; text-wrap:balance; }
.link-chips{ list-style:none; width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:16px; }
.link-chips a{ height:100%; display:flex; align-items:center; gap:12px; min-height:88px; padding:16px 28px; border-radius:20px; background:var(--xdl-white); color:var(--xdl-ink); font-weight:var(--fw-bold); font-size:16px; line-height:1.3; text-align:left; text-decoration:none; transition:transform 450ms var(--ease-soft),background 200ms ease; }
.link-chips a:hover{ transform:translateY(-3px); background:var(--xdl-white); color:var(--xdl-coral-type); }
.lc-icon{ flex:none; display:inline-flex; color:var(--xdl-coral-type); }
.lc-icon svg{ width:20px; height:20px; stroke-width:2.25; }
.sec-after{ margin-top:clamp(32px,4vw,48px); }

/* Steps: coral band, stacked (title left, dotted list right) or columns */
.steps-band{ position:relative; overflow:hidden; background:var(--xdl-coral-ground); color:var(--xdl-ink); }
.steps-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:56px 80px; align-items:start; }
.steps-lead{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(36px,4vw,56px); }
.steps-lead .h-section{ max-width:8em; color:var(--xdl-white); }
.steps-list{ list-style:none; display:flex; flex-direction:column; border-bottom:2px dotted var(--xdl-ink); }
.steps-list > li{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:4px 20px; padding:32px 0; border-top:2px dotted var(--xdl-ink); }
.step-n{ grid-row:span 3; font-weight:var(--fw-extrabold); font-size:clamp(32px,3vw,44px); line-height:1; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.step-title{ font-weight:var(--fw-bold); font-size:clamp(24px,2.2vw,30px); line-height:1.15; letter-spacing:-0.02em; }
.step-desc{ max-width:26em; margin-top:8px; font-size:18px; line-height:1.6; }
.step-meta{ display:flex; align-items:center; gap:8px; margin-top:12px; font-weight:var(--fw-bold); font-size:16px; line-height:1.4; }
.step-meta svg{ width:18px; height:18px; flex:none; }
.steps-cols-wrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:clamp(48px,6vw,88px); }
.steps-cols-wrap .h-section-sm{ color:var(--xdl-white); text-align:center; font-size:clamp(36px,4.8vw,72px); }
.steps-cols{ width:100%; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:40px 0; }
.steps-cols > li{ display:flex; flex-direction:column; gap:16px; padding:8px 24px; border-left:2px dotted var(--xdl-ink); }
.steps-cols > li:first-child{ padding-left:0; border-left:0; }
.steps-cols .step-n{ font-size:clamp(40px,4vw,56px); }
.steps-cols .step-title{ font-size:clamp(20px,1.7vw,24px); line-height:1.25; letter-spacing:-0.015em; text-wrap:balance; }
.steps-cols .step-desc,.steps-cols .step-meta{ margin-top:0; }
/* Card variant: a coral card on paper, three columns (Get Started) */
.steps-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(40px,5vw,64px); padding:clamp(56px,7vw,104px) clamp(24px,4vw,64px); border-radius:28px; background:var(--xdl-coral-ground); color:var(--xdl-ink); box-shadow:0 1px 2px rgba(8,18,58,.06),0 32px 72px -36px rgba(8,18,58,.35); }
.steps-card[hidden]{ display:none; }
.steps-card .h-section{ max-width:14em; color:var(--xdl-white); text-align:center; }
.steps-card .steps-cols{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.steps-card .steps-cols > li,.steps-card .steps-cols > li:first-child{ padding:0 clamp(20px,2.4vw,36px); }
.steps-card .step-title{ margin-top:8px; font-weight:var(--fw-extrabold); font-size:clamp(24px,2.2vw,30px); }
.steps-card--lilac{ background:var(--xdl-lilac); box-shadow:none; }
.steps-card--lilac .h-section{ color:var(--xdl-violet); }
.qcards{ width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:24px; }
.qcard{ display:flex; flex-direction:column; gap:16px; padding:clamp(28px,3vw,40px); border-radius:28px; background:var(--xdl-white); box-shadow:0 1px 2px rgba(8,18,58,.05),0 24px 56px -32px rgba(8,18,58,.28); }
.qcard > svg{ width:32px; height:32px; margin-bottom:4px; color:var(--xdl-violet); }
.qcard h3{ font-weight:var(--fw-extrabold); font-size:clamp(22px,2vw,26px); line-height:1.2; letter-spacing:-0.02em; }
.qcard p{ font-size:18px; line-height:1.6; }
.seg-tabs{ align-self:center; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:6px; border-radius:var(--radius-pill); background:var(--xdl-lilac); }
.seg-tab{ display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--xdl-ink); font:var(--fw-bold) 16px/1 var(--font-sans); cursor:pointer; transition:background 200ms ease,color 200ms ease; }
.seg-tab[aria-selected="true"]{ background:var(--xdl-ink); color:var(--xdl-white); }
.tabbed{ display:flex; flex-direction:column; gap:clamp(40px,5vw,64px); }

/* Printed and milled: heading, text + actions beside the isometric cubes */
.fit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:64px 80px; align-items:center; margin-top:clamp(56px,6vw,96px); }
.fit-copy{ display:flex; flex-direction:column; gap:clamp(32px,4vw,48px); }
.fit-text{ display:flex; flex-direction:column; gap:20px; max-width:34em; font-size:18px; line-height:1.7; }
.fit-text p{ font-size:18px; line-height:1.7; }
.fit-lead{ margin-bottom:8px; font-weight:var(--fw-bold); font-size:clamp(24px,2.4vw,32px); line-height:1.25; letter-spacing:-0.02em; text-wrap:pretty; }
.fit-art{ display:flex; justify-content:center; }
.fit-art svg{ width:100%; max-width:440px; height:auto; overflow:visible; }
.play-btn{ display:inline-flex; align-items:center; gap:14px; height:var(--control-h-lg); padding:0; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--xdl-ink); font:var(--fw-bold) var(--fs-body)/1 var(--font-sans); cursor:pointer; }
.play-dot{ flex:none; width:var(--control-h-lg); height:var(--control-h-lg); border-radius:var(--radius-pill); background:var(--xdl-ink); display:inline-flex; align-items:center; justify-content:center; transition:background 200ms ease; }
.play-btn:hover .play-dot,.play-btn:focus-visible .play-dot{ background:var(--xdl-coral); }
.play-dot svg{ width:16px; height:16px; margin-left:2px; }
/* A section that lifts the next section's card over its lower edge */
.has-overlap{ padding-bottom:calc(var(--pad-xl) + 150px); }

/* Ink card with icon items, overlapping the band above (remake) */
.icard-wrap{ position:relative; z-index:2; margin-top:-150px; padding:0 24px; }
.icard{ max-width:calc(var(--page-max) + 48px); margin:0 auto; padding:clamp(48px,7vw,104px) clamp(24px,6vw,88px); border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:clamp(40px,5vw,64px); }
.icard .h-section{ max-width:18em; }
.icard-intro{ max-width:34em; margin-top:24px; font-size:18px; line-height:1.7; }
.icon-items{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:40px 32px; }
.icon-items li{ display:flex; flex-direction:column; gap:14px; }
.icon-items svg{ width:28px; height:28px; color:var(--xdl-coral); }
.ii-title{ font-weight:var(--fw-bold); font-size:20px; line-height:1.25; letter-spacing:-0.015em; }
.ii-body{ font-size:18px; line-height:1.6; }
.icard-line{ font-weight:var(--fw-medium); font-size:clamp(24px,2.4vw,34px); line-height:1.2; letter-spacing:-0.025em; text-wrap:balance; }
/* Values: three columns with dotted dividers (About) */
.values{ list-style:none; width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:40px 0; }
.values li{ display:flex; flex-direction:column; gap:16px; padding:0 clamp(20px,2.4vw,36px); border-left:2px dotted var(--xdl-ink-a16); }
.values li:first-child{ border-left:0; }
.values svg{ width:32px; height:32px; color:var(--xdl-coral); }
.values h3{ margin-top:8px; font-weight:var(--fw-extrabold); font-size:clamp(24px,2.2vw,30px); line-height:1.15; letter-spacing:-0.02em; }
.values p{ font-size:18px; line-height:1.6; }

/* Founder: heading, portrait over streaming chevrons, text, phone */
.founder{ display:flex; flex-direction:column; align-items:center; gap:clamp(40px,5vw,64px); text-align:center; }
.founder .h-section{ max-width:18em; }
.founder-media{ position:relative; align-self:stretch; display:flex; justify-content:center; }
.portrait{ position:relative; z-index:1; width:min(100%,400px); aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; background:var(--xdl-ink); }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.founder-body{ max-width:30em; font-size:18px; line-height:1.7; }
.founder .phone-pill{ margin-top:calc(-1 * clamp(28px,3.8vw,48px)); }
.clip-x{ overflow:hidden; }

/* Team (About): founder feature, a dotted rule, then the grid */
.team-feature{ display:flex; flex-direction:column; align-items:center; gap:clamp(28px,3.4vw,40px); text-align:center; }
.team-meta{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.team-role{ font-weight:var(--fw-bold); font-size:16px; line-height:1.3; color:var(--xdl-coral-type); }
.team-name-lg{ font-weight:var(--fw-extrabold); font-size:clamp(34px,3.6vw,52px); line-height:1; letter-spacing:-0.035em; }
.team-feature .team-bio{ max-width:30em; margin-top:8px; font-size:18px; line-height:1.7; }
.team-rule{ height:0; margin:clamp(24px,3vw,40px) 0 clamp(32px,4vw,56px); border-top:2px dotted var(--xdl-ink-a16); }
.team-grid{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:56px clamp(32px,4vw,56px); }
.tm{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.tm-photo{ position:relative; width:100%; aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:var(--xdl-ink); }
.tm-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tm-text{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.tm-name{ font-weight:var(--fw-extrabold); font-size:20px; line-height:1.15; letter-spacing:-0.02em; }
.tm-role{ font-weight:var(--fw-bold); font-size:14px; line-height:1.4; color:var(--xdl-coral-type); }
.tm-bio{ margin-top:2px; font-size:14px; line-height:1.55; }
/* The design drew four people in the grid; it now holds eighteen, so two across on a phone rather than one. */
@media (max-width:559px){ .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 16px; } .tm{ gap:14px; } .tm-photo{ border-radius:16px; } .tm-name{ font-size:17px; } }

/* Feature split: photo beside text (lilac, or ink) */
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:48px clamp(40px,6vw,80px); align-items:center; }
.split-media{ position:relative; min-width:0; aspect-ratio:1/1; border-radius:28px; overflow:hidden; background:var(--xdl-mist); box-shadow:0 1px 2px rgba(8,18,58,.05),0 24px 56px -28px rgba(8,18,58,.28); }
.ground-ink .split-media,.ground-violet .split-media{ background:var(--xdl-violet); box-shadow:0 32px 72px -32px rgba(0,0,0,.5); }
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; min-width:0; }
.split-copy .h-section{ max-width:9em; }
.split-copy .prose p{ font-size:20px; }
.split--media-last .split-media{ order:2; }
.split-line{ font-weight:var(--fw-bold); font-size:22px; line-height:1.5; }
.split-note{ margin-top:8px; padding-top:24px; border-top:2px dotted var(--xdl-ink-a16); max-width:30em; font-size:16px; line-height:1.6; }
.ground-ink .split-note,.ground-violet .split-note{ border-top-color:var(--xdl-white-a24); }

/* Dotted list: heading left, coral-square items right; ink with a photo */
.dlist-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px 80px; align-items:start; }
.dlist-grid .h-section{ max-width:9em; }
.dlist-head{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.dlist-groups{ display:flex; flex-direction:column; gap:48px; min-width:0; }
.dlist{ list-style:none; display:flex; flex-direction:column; border-bottom:2px dotted var(--xdl-ink-a16); }
.dlist li{ display:flex; align-items:baseline; gap:18px; padding:22px 0; border-top:2px dotted var(--xdl-ink-a16); font-size:clamp(20px,1.8vw,24px); line-height:1.4; letter-spacing:-0.01em; }
.dlist li::before,.mlist li::before{ content:""; flex:none; width:.42em; height:.42em; background:var(--xdl-coral); transform:translateY(-.06em); }
.mlist{ list-style:none; display:flex; flex-direction:column; gap:20px; }
.mlist li{ display:flex; align-items:baseline; gap:18px; font-size:clamp(20px,1.8vw,24px); line-height:1.4; letter-spacing:-0.01em; }
.list-title{ margin-top:8px; font-weight:var(--fw-extrabold); font-size:22px; line-height:1.3; }
.mlist li strong,.dlist li strong{ font-weight:var(--fw-bold); }
.ground-ink .mlist li strong{ color:var(--xdl-white); }
.split-top{ max-width:14em; margin-bottom:clamp(40px,5vw,64px); }
.list-after{ max-width:28em; font-weight:var(--fw-semibold); font-size:22px; line-height:1.55; }
.inline-list{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:18px; }
.inline-list li{ display:flex; align-items:center; gap:10px; }
.inline-list li::before{ content:""; flex:none; width:8px; height:8px; background:var(--xdl-coral); }
.num-list{ list-style:none; counter-reset:n; display:flex; flex-direction:column; gap:20px; }
.num-list li{ counter-increment:n; display:flex; align-items:baseline; gap:16px; font-size:18px; line-height:1.6; }
.num-list li::before{ content:counter(n); flex:none; min-width:1.2em; font-weight:var(--fw-extrabold); color:var(--xdl-violet); }

/* Dotted table */
.dtable{ display:flex; flex-direction:column; border-bottom:2px dotted var(--xdl-ink-a16); }
.dtable-row{ display:grid; grid-template-columns:var(--cols); gap:24px; align-items:baseline; padding:26px 0; border-top:2px dotted var(--xdl-ink-a16); }
.dtable-head{ padding:0 0 20px; border-top:0; }
.dtable-head [role="columnheader"]{ display:inline-flex; align-items:center; gap:10px; font-weight:var(--fw-extrabold); font-size:clamp(18px,1.6vw,22px); line-height:1.3; letter-spacing:-0.01em; color:var(--xdl-coral-type-lg); }
.th-icon{ flex:none; display:inline-flex; }
.th-icon svg{ width:22px; height:22px; stroke-width:2.25; }
.dtable-row [role="rowheader"]{ font-weight:var(--fw-bold); font-size:clamp(20px,1.8vw,24px); line-height:1.35; letter-spacing:-0.01em; }
.dtable-row [role="cell"]{ font-size:clamp(18px,1.6vw,22px); line-height:1.5; }
@media (max-width:767px){ .dtable-row{ grid-template-columns:1fr; gap:6px; } .dtable-head{ display:none; } }
.table-line{ margin-top:clamp(32px,4vw,48px); max-width:34em; font-weight:var(--fw-semibold); font-size:22px; line-height:1.55; }

/* Turnaround list + ship-date estimator (Get Started) */
.ta-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:40px clamp(40px,5vw,80px); align-items:start; margin-bottom:clamp(40px,5vw,72px); }
.ta-list{ list-style:none; display:flex; flex-direction:column; border-bottom:2px dotted var(--xdl-ink-a16); }
.ta-list li{ border-top:2px dotted var(--xdl-ink-a16); }
.ta-pick{ width:100%; display:flex; align-items:center; gap:16px; padding:18px 4px; border:0; background:none; cursor:pointer; font-family:var(--font-sans); text-align:left; color:var(--xdl-ink); transition:color 200ms ease; }
.ta-pick:hover,.ta-pick[aria-pressed="true"]{ color:var(--xdl-coral-type); }
.ta-dot{ flex:none; width:10px; height:10px; background:var(--xdl-ink-a16); transition:background 200ms ease; }
.ta-pick[aria-pressed="true"] .ta-dot{ background:var(--xdl-coral); }
.ta-name{ flex:1; min-width:0; font-weight:var(--fw-semibold); font-size:18px; line-height:1.4; }
.ta-days{ flex:none; max-width:55%; font-weight:var(--fw-extrabold); font-size:18px; line-height:1.4; font-variant-numeric:tabular-nums; text-align:right; }
.ta-days .ctc{ font-size:.75em; }
.estimator{ position:sticky; top:112px; min-width:0; border-radius:28px; background:var(--xdl-white); box-shadow:var(--shadow-float); overflow:hidden; }
.estimator-form{ padding:clamp(28px,3.4vw,44px); display:flex; flex-direction:column; gap:22px; }
.estimator h3{ font-weight:var(--fw-extrabold); font-size:clamp(26px,2.4vw,32px); line-height:1.1; letter-spacing:-0.03em; }
.estimator-out{ container-type:inline-size; padding:clamp(28px,3.4vw,44px); background:var(--xdl-violet); color:var(--xdl-white); display:flex; flex-direction:column; gap:10px; }
.eo-label{ font-weight:var(--fw-bold); font-size:15px; line-height:1.4; color:var(--xdl-coral-on-dark); }
.eo-date{ font-weight:var(--fw-extrabold); font-size:min(40px,7cqi); line-height:1.05; letter-spacing:-0.035em; }
.eo-note{ font-size:16px; line-height:1.55; }
.eo-arrive{ margin-top:12px; padding-top:16px; border-top:2px dotted var(--xdl-white-a24); font-size:18px; line-height:1.5; }
.eo-arrive strong{ font-weight:var(--fw-extrabold); color:var(--xdl-coral-on-dark); }
.eo-arrive[hidden]{ display:none; }

/* FAQ: dotted rules, round plus/minus (native details) */
.faq{ display:flex; flex-direction:column; min-width:0; border-bottom:2px dotted var(--xdl-ink-a16); }
.faq-row,.faq-pending{ border-top:2px dotted var(--xdl-ink-a16); }
.faq-row summary,.faq-pending summary{ list-style:none; width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0; cursor:pointer; color:var(--xdl-ink); transition:color 200ms ease; }
.faq-row summary::-webkit-details-marker,.faq-pending summary::-webkit-details-marker{ display:none; }
.faq-q{ margin:0; font:var(--fw-bold) clamp(20px,1.8vw,24px)/1.35 var(--font-sans); letter-spacing:-0.01em; }
.faq-icon{ flex:none; width:40px; height:40px; border-radius:var(--radius-pill); background:var(--xdl-lilac); color:var(--xdl-ink); display:inline-flex; align-items:center; justify-content:center; transition:background 200ms ease,color 200ms ease; }
.faq-icon svg{ width:18px; height:18px; }
.faq-icon .icon-minus{ display:none; }
.faq details[open] > summary{ color:var(--xdl-coral-type-lg); }
.faq details[open] > summary .faq-icon{ background:var(--xdl-coral); color:var(--xdl-white); }
.faq details[open] > summary .icon-plus{ display:none; }
.faq details[open] > summary .icon-minus{ display:block; }
.faq-answer{ max-width:52em; padding:0 64px 32px 0; font-size:18px; line-height:1.7; }
.faq-answer > * + *{ margin-top:12px; }
@media (max-width:767px){ .faq-answer{ padding-right:0; } }

/* Video card: muted loop or poster, a play button that opens the full video */
.vcard{ display:flex; flex-direction:column; gap:16px; }
.vcard-frame{ position:relative; aspect-ratio:16/9; border-radius:28px; overflow:hidden; background:var(--xdl-ink); box-shadow:0 1px 2px rgba(8,18,58,.05),0 32px 72px -36px rgba(8,18,58,.4); }
.vcard-frame img,.vcard-frame video{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.vcard-frame video:not([src]){ display:none; }
.vcard-play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; cursor:pointer; }
.vcard-play span{ width:clamp(72px,8vw,104px); height:clamp(72px,8vw,104px); border-radius:var(--radius-pill); background:var(--xdl-coral); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 20px 48px -16px rgba(0,0,0,.5); transition:background 200ms ease; }
.vcard-play:hover span,.vcard-play:focus-visible span{ background:var(--xdl-violet); }

/* Reels in a phone (About, Pastel #212): a white phone tilted in 3D with its
   edge showing and a shadow on the ground under it; the copy beside it stays
   put while the arrows change the reel on screen. */
.reels{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,6vw,104px); align-items:center; }
.reels-stage{ position:relative; display:flex; justify-content:center; padding:24px 0 56px; perspective:1800px; }
.reels-stage::after{ content:""; position:absolute; left:50%; bottom:14px; width:58%; height:44px; transform:translateX(-46%); border-radius:50%; background:radial-gradient(closest-side,rgba(8,18,58,.32),rgba(8,18,58,0)); filter:blur(8px); pointer-events:none; }
.phone{ position:relative; z-index:1; width:min(300px,68vw); aspect-ratio:9/19; padding:11px; border-radius:48px; background:var(--xdl-white); transform:rotateX(16deg) rotateY(-26deg) rotateZ(5deg); transform-style:preserve-3d; box-shadow:inset 0 0 0 1px rgba(8,18,58,.06),0 40px 60px -30px rgba(8,18,58,.45); }
.phone::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--xdl-mist); transform:translateZ(-12px); }
.phone-screen{ position:relative; width:100%; height:100%; border-radius:38px; overflow:hidden; background:var(--xdl-ink); }
.reel{ position:absolute; inset:0; }
.reel[hidden]{ display:none; }
.reel img,.reel video{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.reel video:not([src]){ display:none; }
.reels-copy{ min-width:0; }
.reels-ctrl{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:36px; }
.reels-toggle{ margin-left:8px; }
.reels-toggle .i-play,.reels-toggle[aria-pressed="true"] .i-pause{ display:none; }
.reels-toggle[aria-pressed="true"] .i-play{ display:block; }
.reels-links{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:28px; }
.vcard-play svg{ width:34%; height:34%; margin-left:6%; }
.vmodal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,64px); background:rgba(8,18,58,.88); }
.vmodal[hidden]{ display:none; }
.vmodal-box{ width:min(100%,1120px,calc((100dvh - 120px) * 16 / 9)); display:flex; flex-direction:column; gap:12px; }
.vmodal-close{ align-self:flex-end; }
.vmodal video{ display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:var(--radius-lg); background:var(--xdl-ink); }

/* Testimonials (violet): one quote at a time, credentials, Google reviews */
.reviews{ overflow:hidden; padding-block:var(--pad-xl) clamp(72px,8vw,112px); }
.reviews-inner{ display:flex; flex-direction:column; gap:clamp(48px,6vw,88px); }
.reviews-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; }
.reviews-bar h2{ white-space:nowrap; font-weight:var(--fw-semibold); font-size:18px; line-height:1.3; }
.reviews-ctrl{ display:flex; align-items:center; gap:12px; }
.reviews-count{ margin-right:8px; white-space:nowrap; font-weight:var(--fw-bold); font-size:14px; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.quote-slide{ min-height:clamp(300px,30vw,440px); display:flex; flex-direction:column; justify-content:space-between; gap:56px; }
.quote-slide[hidden]{ display:none; }
.quote{ max-width:17em; font-weight:var(--fw-medium); font-size:clamp(32px,4.8vw,68px); line-height:1.16; letter-spacing:-0.03em; text-wrap:pretty; }
.quote--mid{ max-width:24em; font-size:clamp(26px,3.3vw,46px); line-height:1.2; }
.quote--long{ max-width:36em; font-size:clamp(19px,2vw,28px); line-height:1.4; letter-spacing:-0.015em; }
.quote .hl{ transition:background 90ms linear; }
.quote .hl.on{ background:var(--xdl-violet-line); }
.quote-cite{ display:flex; flex-direction:column; gap:4px; font-size:16px; line-height:1.4; }
.quote-cite strong{ font-weight:var(--fw-bold); }
.creds{ border-top:1px solid var(--xdl-violet-line); padding-top:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 40px; }
.creds ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:16px; line-height:1.5; }
.creds li{ display:flex; align-items:center; gap:10px; }
.creds li::before{ content:""; flex:none; width:8px; height:8px; background:var(--xdl-coral); }
.creds-note{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-weight:var(--fw-medium); font-size:14px; }
.greviews{ margin-top:clamp(64px,7vw,104px); display:flex; flex-direction:column; gap:32px; }
.greviews-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 32px; }
.greviews-head h3{ font-weight:var(--fw-extrabold); font-size:clamp(28px,3vw,40px); line-height:1.1; letter-spacing:-0.03em; }
.marquee{ margin:0 calc(50% - 50vw); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee ul{ list-style:none; display:flex; gap:16px; width:max-content; animation:xdlMarquee 70s linear infinite; }
.marquee:hover ul{ animation-play-state:paused; }
.marquee li{ flex:none; width:320px; display:flex; flex-direction:column; gap:18px; padding:24px; border-radius:var(--radius-lg); background:var(--xdl-white-a12); }
.marquee li p{ font-size:16px; line-height:1.55; }
.marquee li span{ margin-top:auto; font-weight:var(--fw-semibold); font-size:14px; }
.gicon{ flex:none; width:36px; height:36px; border-radius:var(--radius-pill); background:var(--xdl-white); display:inline-flex; align-items:center; justify-content:center; }
.gicon svg{ width:18px; height:18px; }
.greviews-pending{ font-size:16px; line-height:1.6; }
.greviews-attr{ font-size:13px; line-height:1.4; }
.marquee li p{ display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
.marquee li a{ color:var(--xdl-white); }
@keyframes xdlMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Final CTA (ink, centred) */
.cta-final-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-block:clamp(110px,13vw,190px); }
.cta-title{ max-width:13em; font-weight:var(--fw-extrabold); font-size:clamp(44px,6.6vw,104px); line-height:.96; letter-spacing:-0.045em; }
.cta-title--lead{ max-width:none; font-size:clamp(48px,8.6vw,132px); line-height:.92; }
.cta-title .line{ display:block; }
.cta-body{ margin-top:clamp(32px,3.6vw,48px); max-width:30em; font-size:22px; line-height:1.7; }
.cta-final .actions{ margin-top:40px; justify-content:center; }
.cta-final .phone-line{ margin-top:28px; }
.cta-micro{ margin-top:16px; font-size:16px; line-height:1.5; }

/* Insights: featured post, topic pills, post grid, newsletter */
.feat-post{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); align-items:center; border-radius:28px; overflow:hidden; background:var(--xdl-white); color:var(--xdl-ink); text-decoration:none; box-shadow:var(--shadow-float); transition:transform 200ms var(--ease-express); }
.feat-post:hover{ transform:translateY(-3px); color:var(--xdl-ink); }
.feat-media{ position:relative; height:100%; min-height:320px; }
.feat-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feat-body{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:clamp(32px,4.4vw,64px); }
.post-topic{ display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:var(--radius-pill); background:var(--xdl-lilac); font-weight:var(--fw-bold); font-size:14px; line-height:1.3; color:var(--xdl-ink); }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.post-more{ align-self:flex-start; margin-top:6px; }
.post-card:hover .post-more{ background-size:100% 2px,100% 2px; }
.feat-body .post-topic{ font-size:15px; }
.feat-title{ font-weight:var(--fw-extrabold); font-size:clamp(32px,3.8vw,56px); line-height:1.02; letter-spacing:-0.04em; }
.feat-body p{ max-width:28em; font-size:18px; line-height:1.6; }
.feat-more{ margin-top:12px; display:inline-flex; align-items:center; gap:4px; padding-bottom:6px; border-bottom:2px solid var(--xdl-coral); font-weight:var(--fw-bold); font-size:16px; line-height:1.2; }
.feat-more svg{ width:16px; height:16px; }
.topic-pills{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.topic-pills a{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--radius-pill); background:var(--xdl-lilac); color:var(--xdl-ink); font-weight:var(--fw-bold); font-size:15px; text-decoration:none; white-space:nowrap; transition:background 200ms ease,color 200ms ease; }
.topic-pills a:hover{ background:var(--xdl-ink); color:var(--xdl-white); }
.topic-pills a[aria-current="page"]{ background:var(--xdl-ink); color:var(--xdl-white); }
.post-grid{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:56px 32px; }
.post-card{ position:relative; display:flex; flex-direction:column; gap:20px; color:var(--xdl-ink); text-decoration:none; transition:transform 200ms var(--ease-express); }
/* The title is the card's one link (stretched); the topic pill sits above it and links to its archive. */
.card-link{ color:inherit; text-decoration:none; }
.card-link::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; }
.card-link:hover{ color:inherit; }
.post-card .post-topic,.feat-post .post-topic,.mcard .post-topic{ position:relative; z-index:1; text-decoration:none; transition:background 200ms ease,color 200ms ease; }
.post-card .post-topic:hover,.feat-post .post-topic:hover,.mcard .post-topic:hover{ background:var(--xdl-ink); color:var(--xdl-white); }
.feat-post{ position:relative; }
.feat-post:hover .feat-more{ border-bottom-color:var(--xdl-coral); }
.post-card:hover{ transform:translateY(-3px); color:var(--xdl-ink); }
.post-media{ position:relative; aspect-ratio:3/2; border-radius:20px; overflow:hidden; }
.post-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post-text{ display:flex; flex-direction:column; gap:10px; }
.post-title{ font-weight:var(--fw-extrabold); font-size:24px; line-height:1.15; letter-spacing:-0.02em; }
.post-text p{ font-size:16px; line-height:1.6; }
.post-read{ font-weight:var(--fw-medium); font-size:14px; line-height:1.3; color:var(--xdl-slate); }
.tone-lilac{ background:var(--xdl-lilac); }
.news-card{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); align-items:center; gap:32px clamp(40px,5vw,80px); padding:clamp(40px,5vw,72px); border-radius:28px; background:var(--xdl-white); box-shadow:0 1px 2px rgba(8,18,58,.05),0 32px 72px -36px rgba(8,18,58,.35); }
.news-card h2{ max-width:12em; font-weight:var(--fw-extrabold); font-size:clamp(30px,3.4vw,48px); line-height:1.05; letter-spacing:-0.035em; }
.pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:clamp(40px,5vw,64px); }
.pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 14px; border-radius:var(--radius-pill); background:var(--xdl-lilac); color:var(--xdl-ink); text-decoration:none; font-weight:var(--fw-bold); }
.pagination .page-numbers.current{ background:var(--xdl-ink); color:var(--xdl-white); }

/* Article */
.article-head{ width:100%; max-width:860px; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.article-title{ font-weight:var(--fw-extrabold); font-size:clamp(40px,5.6vw,80px); line-height:1; letter-spacing:-0.04em; }
.article-dek{ max-width:32em; font-size:22px; line-height:1.6; }
.article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding-top:20px; width:100%; border-top:2px dotted var(--xdl-ink-a16); font-size:15px; line-height:1.4; }
.article-meta > span{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-bold); }
.article-meta svg{ width:16px; height:16px; }
.byline-mark{ width:28px; height:28px; border-radius:var(--radius-pill); background:var(--xdl-violet); display:inline-flex; align-items:center; justify-content:center; }
.byline-mark svg{ width:16px; height:auto; }
.article-figure{ width:100%; margin-top:clamp(40px,5vw,64px); position:relative; aspect-ratio:16/9; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-float); }
.article-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.article-body{ width:100%; max-width:760px; margin:clamp(48px,6vw,80px) auto 0; font-size:19px; line-height:1.75; }
.article-body > * + *{ margin-top:28px; }
.article-body h2{ margin-top:48px; font-weight:var(--fw-extrabold); font-size:clamp(28px,2.8vw,38px); line-height:1.1; letter-spacing:-0.03em; }
.article-body h3{ margin-top:36px; font-weight:var(--fw-extrabold); font-size:24px; line-height:1.2; }
.article-body ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.article-body ul li{ display:flex; align-items:baseline; gap:16px; }
.article-body ul li::before{ content:""; flex:none; width:.42em; height:.42em; background:var(--xdl-coral); transform:translateY(-.06em); }
.article-body ol{ padding-left:1.3em; }
.article-body blockquote{ margin:44px 0; padding:8px 0 8px clamp(20px,3vw,32px); border-left:4px solid var(--xdl-coral); font-weight:var(--fw-extrabold); font-size:clamp(26px,2.8vw,36px); line-height:1.2; letter-spacing:-0.03em; color:var(--xdl-violet); text-wrap:balance; }
.article-body img{ border-radius:20px; }
.article-body table{ width:100%; border-collapse:collapse; font-size:17px; }
.article-body th,.article-body td{ text-align:left; padding:14px 12px; border-bottom:2px dotted var(--xdl-ink-a16); }
.rel-card{ margin-top:52px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,40px); border-radius:20px; background:var(--xdl-white); color:var(--xdl-ink); text-decoration:none; box-shadow:0 1px 2px rgba(8,18,58,.05),0 24px 56px -32px rgba(8,18,58,.28); transition:transform 200ms var(--ease-express); }
.rel-card:hover{ transform:translateY(-3px); color:var(--xdl-ink); }
.rel-card .round{ background:var(--xdl-ink); color:var(--xdl-white); transition:background 200ms ease; }
.rel-card:hover .round{ background:var(--xdl-coral); }
.rel-text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.rel-kicker{ font-weight:var(--fw-bold); font-size:15px; line-height:1.3; color:var(--xdl-coral-type); }
.rel-title{ font-weight:var(--fw-extrabold); font-size:clamp(24px,2.4vw,30px); line-height:1.15; letter-spacing:-0.02em; }
.more-posts{ border-top:2px dotted var(--xdl-ink-a16); }
.legal-body{ max-width:760px; margin:0 auto; font-size:18px; line-height:1.75; }
/* v6 Legal: a light article, the H1 over a dotted rule, then the policy */
.legal{ max-width:calc(var(--page-max) + 48px); margin:0 auto; padding:calc(var(--nav-h) + clamp(56px,6vw,96px)) 24px var(--pad-lg); display:flex; flex-direction:column; align-items:center; }
.legal-head{ width:100%; max-width:760px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding-bottom:28px; border-bottom:2px dotted var(--xdl-ink-a16); }
.legal-title{ font-weight:var(--fw-extrabold); font-size:clamp(40px,5.6vw,80px); line-height:1; letter-spacing:-0.04em; text-wrap:balance; }
.legal-date{ font-weight:var(--fw-medium); font-size:15px; line-height:1.4; color:var(--xdl-slate); }
.legal .legal-body{ width:100%; margin-top:clamp(40px,5vw,56px); font-size:19px; }
.legal .legal-body h2{ margin-top:1.6em; font-size:clamp(28px,2.8vw,36px); }
/* v6 404 and Thank You: a full-height violet band straight into the footer */
.hero--full{ min-height:100svh; display:flex; flex-direction:column; }
.hero--full .hero-inner{ width:100%; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-top:calc(var(--nav-h) + clamp(64px,7vw,112px)); padding-bottom:clamp(72px,8vw,120px); }
.hero-404{ display:block; font-weight:var(--fw-extrabold); font-size:clamp(96px,16vw,240px); line-height:.85; letter-spacing:-0.06em; color:var(--xdl-coral); }
.hero--full .hero-title{ max-width:11em; }
.hero--full.hero--light{ background:var(--xdl-paper); color:var(--xdl-ink); }
.hero--full.hero--light .hero-inner{ padding-top:calc(var(--nav-h) + clamp(64px,7vw,112px)); padding-bottom:clamp(72px,8vw,120px); }
.hero--full.hero--light .hero-title{ font-size:clamp(48px,7vw,108px); line-height:.93; letter-spacing:-0.045em; }
.hero--full.hero--center .hero-inner{ align-items:center; text-align:center; }
.hero--full.hero--center .hero-sub{ max-width:max(60%,min(100%,560px)); }
.hero--full .hero-title .accent{ color:var(--xdl-coral-type-lg); }
.ty-check{ width:clamp(56px,5.6vw,76px); height:auto; margin-bottom:clamp(28px,3vw,40px); overflow:visible; animation:tyPop 700ms cubic-bezier(.16,1,.3,1) 150ms backwards; }
.ty-check-bg{ fill:var(--xdl-coral); opacity:.14; }
.ty-check-ring{ fill:none; stroke:var(--xdl-coral); stroke-width:6; stroke-linecap:round; stroke-dasharray:352; animation:tyDraw 800ms cubic-bezier(.65,0,.35,1) 250ms backwards; --len:352; }
.ty-check-tick{ fill:none; stroke:var(--xdl-coral); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:70; animation:tyDraw 500ms cubic-bezier(.65,0,.35,1) 900ms backwards; --len:70; }
@keyframes tyPop{ 0%{ opacity:0; transform:scale(.6); } 60%{ opacity:1; transform:scale(1.06); } 100%{ opacity:1; transform:scale(1); } }
@keyframes tyDraw{ from{ stroke-dashoffset:var(--len); } }
@media (prefers-reduced-motion:reduce){ .ty-check,.ty-check-ring,.ty-check-tick{ animation:none; } }
.hero-404 + .hero-title{ margin-top:28px; }
.legal-body > * + *{ margin-top:20px; }
.legal-body h2{ margin-top:40px; font-weight:var(--fw-extrabold); font-size:clamp(26px,2.6vw,34px); line-height:1.15; letter-spacing:-0.03em; }
.legal-body h3{ margin-top:28px; font-weight:var(--fw-extrabold); font-size:22px; }
.legal-body ul,.legal-body ol{ padding-left:1.3em; }

/* Floating section nav (About, Get Started): appears after the hero */
.subnav{ position:fixed; left:50%; bottom:clamp(12px,2.4vw,24px); z-index:40; max-width:calc(100vw - 24px); transform:translate(-50%,140%); opacity:0; pointer-events:none; transition:transform 500ms var(--ease-soft),opacity 300ms ease; }
.subnav.is-on{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.subnav-list{ list-style:none; display:flex; align-items:center; gap:4px; padding:6px; border-radius:var(--radius-pill); background:var(--xdl-ink); border:1px solid var(--xdl-white-a12); box-shadow:0 20px 48px -16px rgba(8,18,58,.55); overflow-x:auto; scrollbar-width:none; }
.subnav-list::-webkit-scrollbar{ display:none; }
.subnav-list a{ flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--radius-pill); color:var(--xdl-white); font-weight:var(--fw-bold); font-size:15px; line-height:1; text-decoration:none; white-space:nowrap; transition:background 200ms ease; }
.subnav-list a:hover,.subnav-list a.is-active{ background:var(--xdl-white-a12); color:var(--xdl-white); }
[data-anchor-section]{ scroll-margin-top:96px; }

/* Downloads (Rx pads and lab forms) */
/* Downloads (v6 Rx Pads): white cards with the file icon and a Download PDF link */
.dl-grid{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:24px; }
.dl-card{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:clamp(28px,3vw,40px); border-radius:24px; background:var(--xdl-white); color:var(--xdl-ink); box-shadow:var(--shadow-card); }
.dl-icon{ display:inline-flex; margin-bottom:10px; color:var(--xdl-coral); }
.dl-icon svg{ width:32px; height:32px; stroke-width:1.75; }
.dl-name{ font-weight:var(--fw-extrabold); font-size:clamp(20px,1.8vw,24px); line-height:1.2; letter-spacing:-0.02em; }
.dl-desc{ font-size:15px; line-height:1.5; }
.dl-link{ margin-top:auto; padding-top:16px; font-size:15px; background-position:0 100%,0 100%; }
.dl-link svg:first-child{ width:16px; height:16px; margin-right:4px; }
.dl-link svg:last-child{ display:none; }
.dl-feature{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,72px); align-items:center; }
.dl-cover{ display:flex; justify-content:center; padding:clamp(28px,4vw,56px); border-radius:28px; background:var(--xdl-lilac); }
.dl-cover img{ width:100%; max-width:360px; height:auto; border-radius:6px; box-shadow:0 24px 56px -24px rgba(8,18,58,.45); transform:rotate(-2deg); }
.dl-feature-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; }
.dl-feature-copy .btn{ margin-top:12px; }
@media (max-width:719px){ .dl-feature{ grid-template-columns:1fr; } }

/* Logos / scanner tiles */
.logo-grid{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; }
.logo-grid li{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:112px; padding:20px; border-radius:20px; background:var(--xdl-white); box-shadow:var(--shadow-card); text-align:center; }
.logo-grid img{ max-height:44px; width:auto; }
.logo-grid li:has(.logo-name){ min-height:136px; border-radius:24px; }
.logo-name{ font-weight:var(--fw-extrabold); font-size:22px; line-height:1.15; letter-spacing:-0.02em; text-wrap:balance; }
.logo-note{ font-size:14px; line-height:1.4; }
.logos-line{ margin-top:clamp(32px,4vw,48px); max-width:40em; font-size:18px; line-height:1.6; }
.logos-line a{ font-weight:var(--fw-bold); }

/* Contact details + map */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:40px clamp(40px,5vw,80px); align-items:start; }
.contact-list{ list-style:none; display:flex; flex-direction:column; border-top:2px dotted var(--xdl-ink-a16); }
.contact-list li{ display:flex; align-items:flex-start; gap:16px; padding:22px 0; border-bottom:2px dotted var(--xdl-ink-a16); font-size:18px; line-height:1.6; }
.contact-list svg{ flex:none; width:22px; height:22px; margin-top:3px; color:var(--xdl-coral); }
.contact-list a{ font-weight:var(--fw-bold); }
.contact-kicker{ display:block; font-weight:var(--fw-bold); font-size:14px; color:var(--xdl-violet); }
.contact-map{ border-radius:28px; overflow:hidden; min-height:420px; background:var(--xdl-mist); box-shadow:var(--shadow-card); }
.contact-map iframe{ display:block; width:100%; height:100%; min-height:420px; border:0; }

/* Photo placeholder (photography still to come) */
.photo-tbc{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; background:var(--xdl-ink); color:var(--xdl-violet-100); font-size:15px; }
.photo-tbc svg{ width:24px; height:24px; }
.photo-tbc--light{ background:var(--xdl-mist); color:var(--xdl-slate); }

/* ============================================================
   11. FORMS — Contact Form 7, styled to Field/TextField/Select/Checkbox
   ============================================================ */
.form-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:40px clamp(40px,5vw,80px); align-items:start; }
.form-wrap--solo{ grid-template-columns:minmax(0,760px); justify-content:center; }
.form-wrap .form-card{ box-shadow:var(--shadow-float); }
.form-aside{ position:sticky; top:112px; aspect-ratio:1/1; border-radius:28px; overflow:hidden; background:var(--xdl-ink); }
.form-aside img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wpcf7 form{ display:flex; flex-direction:column; gap:20px; }
.wpcf7 form > p{ margin:0; }
.edl-field{ display:flex; flex-direction:column; gap:6px; }
.edl-field > label,.edl-fieldset > legend{ font:var(--fw-medium) 15px/1.3 var(--font-sans); color:var(--xdl-ink); }
.edl-field .edl-optional{ font-weight:var(--fw-regular); }
.edl-hint{ font-size:15px; line-height:1.4; color:var(--xdl-ink); }
.edl-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:20px; }
.wpcf7-form-control-wrap{ display:block; position:relative; }
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 input[type="url"],.wpcf7 input[type="number"],.wpcf7 input[type="date"],.wpcf7 select,.wpcf7 textarea,.field-input{
  width:100%; min-height:var(--control-h); padding:0 16px; box-sizing:border-box;
  border-radius:var(--radius-sm); border:1.5px solid var(--border-field); background:var(--xdl-white); color:var(--xdl-ink);
  font:var(--fw-regular) var(--fs-body)/1.4 var(--font-sans); outline:none;
  transition:border-color 120ms var(--ease-out),box-shadow 120ms var(--ease-out);
}
.wpcf7 textarea{ padding:12px 16px; min-height:140px; resize:vertical; }
.wpcf7 input:hover,.wpcf7 select:hover,.wpcf7 textarea:hover,.field-input:hover{ border-color:var(--border-field-hover); }
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus,.field-input:focus{ border-color:var(--border-focus); box-shadow:var(--focus-ring); }
.wpcf7 select,select.field-input{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23432E7D' 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 14px center; }
.wpcf7 .wpcf7-not-valid{ border-color:var(--xdl-red)!important; }
.wpcf7 .wpcf7-not-valid:focus{ box-shadow:0 0 0 3px rgba(214,48,74,.18)!important; }
.wpcf7-not-valid-tip{ display:block; margin-top:6px; font-size:15px; line-height:1.4; color:var(--text-error); }
.edl-fieldset{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.wpcf7-checkbox,.wpcf7-radio{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:12px 20px; }
.wpcf7-list-item{ margin:0; }
.wpcf7-list-item label,.check{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:var(--fs-body); line-height:1.4; }
.wpcf7-list-item input[type="checkbox"],.wpcf7-list-item input[type="radio"],.check input{
  appearance:none; -webkit-appearance:none; flex:none; width:22px; height:22px; margin:1px 0 0;
  border:1.5px solid var(--xdl-field-strong); background:var(--xdl-white); cursor:pointer;
  transition:background 120ms var(--ease-out),border-color 120ms var(--ease-out);
}
.wpcf7-list-item input[type="checkbox"],.check input{ border-radius:var(--radius-xs); }
.wpcf7-list-item input[type="radio"]{ border-radius:50%; }
.wpcf7-list-item input[type="checkbox"]:checked,.check input:checked{ background:var(--xdl-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center no-repeat; border-color:var(--xdl-violet); }
.wpcf7-list-item input[type="radio"]:checked{ border:7px solid var(--xdl-violet); }
.wpcf7-list-item input:focus-visible,.check input:focus-visible{ box-shadow:var(--focus-ring); outline:none; }
.check-desc{ display:block; margin-top:2px; font-size:15px; line-height:1.4; }
.kit-box{ padding:20px 22px; border-radius:16px; background:var(--xdl-lilac); }
.wpcf7 input[type="submit"],.wpcf7 button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  height:var(--control-h-lg); padding:0 32px; border:0; border-radius:var(--radius-pill);
  background-color:var(--xdl-coral-btn); background-image:linear-gradient(var(--xdl-coral-type),var(--xdl-coral-type)); background-size:0% 100%; background-position:left center; background-repeat:no-repeat;
  color:var(--xdl-white); cursor:pointer; font:var(--fw-bold) var(--fs-body)/1 var(--font-sans);
  transition:background-size 650ms var(--ease-soft);
}
.wpcf7 input[type="submit"]:hover,.wpcf7 button[type="submit"]:hover{ background-size:100% 100%; }
.wpcf7-spinner{ margin:0 0 0 12px; }
.wpcf7 ::placeholder{ color:var(--xdl-slate); opacity:1; }
.wpcf7 form .wpcf7-response-output{ margin:0; padding:16px 20px; border-radius:var(--radius-sm); border:0; font-size:var(--fs-body); line-height:1.5; }
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{ background:var(--xdl-red-tint); color:#8E1428; }
.wpcf7 form.sent .wpcf7-response-output{ background:var(--xdl-green-tint); color:#0B5A40; }
/* P4: honeypot wrapper hidden with display:none (CF7 drops tabindex from its
   tag syntax, so display:none is what keeps it out of the tab order). */
.edl-hp{ display:none!important; }
.form-micro{ margin-top:14px; font-size:15px; line-height:1.55; text-align:center; text-wrap:pretty; }
.form-confirm{ display:flex; flex-direction:column; gap:28px; outline:none; }
.form-confirm[hidden]{ display:none; }
.form-confirm-mark{ width:56px; height:56px; border-radius:var(--radius-pill); background:var(--xdl-coral); color:var(--xdl-white); display:inline-flex; align-items:center; justify-content:center; }
.form-confirm-mark svg{ width:28px; height:28px; }
.form-confirm h2{ font-weight:var(--fw-extrabold); font-size:clamp(32px,3.4vw,48px); line-height:1.02; letter-spacing:-0.04em; }
.form-confirm p,.form-confirm li{ font-size:18px; line-height:1.6; }
.news-card .wpcf7 form{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.news-card .edl-field{ flex:1 1 240px; min-width:0; }
.news-card .wpcf7 input[type="submit"],.news-card .wpcf7 button[type="submit"]{ width:auto; height:var(--control-h); padding:0 28px; font-size:15px; color:var(--xdl-white); background-color:var(--xdl-coral-btn); background-image:linear-gradient(var(--xdl-coral-type),var(--xdl-coral-type)); }
[data-scanner-other][hidden]{ display:none; }

/* ============================================================
   12. FOOTER — ink
   ============================================================ */
.site-footer{ overflow:clip; background:var(--xdl-ink); color:var(--xdl-white); border-top:1px solid var(--xdl-white-a12); }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; padding-block:80px 40px; }
.footer-brand{ display:flex; flex-direction:column; gap:20px; padding-right:clamp(0px,4vw,56px); }
.footer-logo{ display:inline-flex; align-self:flex-start; }
.footer-logo svg{ height:30px; width:auto; }
.footer-blurb{ max-width:24em; font-size:15px; line-height:1.6; }
.footer-nap ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.5; }
.footer-nap li{ display:flex; align-items:baseline; gap:12px; }
.footer-nap li::before{ content:""; flex:none; width:7px; height:7px; background:var(--xdl-coral); transform:translateY(-3px); }
.footer-nap a{ color:var(--xdl-white); text-decoration:none; }
.footer-nap a:hover{ color:var(--xdl-coral); }
.footer-nap .footer-phone:hover{ color:var(--xdl-white); text-decoration:underline; text-decoration-color:var(--xdl-coral); }
.footer-phone{ display:inline-block; padding:6px 0; font-weight:var(--fw-bold); font-size:18px; line-height:1.3; }
.footer-social{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-pill); background:var(--xdl-white-a12); color:var(--xdl-white); text-decoration:none; transition:background 200ms ease,color 200ms ease; }
.footer-social a:hover{ background:var(--xdl-coral); color:var(--xdl-ink); }
.footer-social svg{ width:20px; height:20px; }
.footer-col{ display:flex; flex-direction:column; }
.footer-col h2{ margin-bottom:0; padding-bottom:28px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; }
.footer-col a{ display:flex; align-items:center; min-height:40px; color:var(--xdl-white); font-size:15px; text-decoration:none; }
.footer-col a:hover{ color:var(--xdl-coral); }
.footer-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; border-top:1px solid var(--xdl-white-a12); padding:24px 0 32px; font-size:14px; }
.footer-legal{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 20px; }
.footer-legal a{ color:var(--xdl-white); text-decoration:none; }
.footer-legal a:hover{ color:var(--xdl-coral); }
/* Pastel #81: the Hueston wordmark, sitting on the text line. */
.footer-credit{ display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; transition:opacity 200ms ease; }
.footer-credit:hover{ opacity:.65; }
.footer-credit img{ height:16px; width:auto; }

/* ============================================================
   12b. TEMPLATE PIECES (quote sweep, article page, Insights)
   ============================================================ */
/* The export draws every chevron and arrow at stroke 2.5 */
.btn svg,.tlink svg,.round svg,.nav-link svg,.mega-cat svg,.hero-crumb svg,.feat-more svg,.mm-toggle svg,.mm-link svg,.icon-btn svg{ stroke-width:2.5; }

/* Quote sweep carets: a coral bar with a dot, at the start and after the last lit word */
.hl-mark{ position:relative; display:inline-block; width:0; height:1.06em; vertical-align:-0.2em; }
.hl-mark[hidden]{ display:none; }
.hl-mark::before{ content:""; position:absolute; left:-1.5px; top:0; bottom:0; width:3px; border-radius:2px; background:var(--xdl-coral); }
.hl-mark::after{ content:""; position:absolute; left:-6.5px; top:-11px; width:13px; height:13px; border-radius:50%; background:var(--xdl-coral); }
.hl-mark--end::after{ top:auto; bottom:-11px; }

/* Insights */
.feat-wrap{ padding-bottom:0; }
.post-card-item{ min-width:0; }
.article-page{ padding-top:calc(var(--nav-h) + clamp(56px,6vw,96px)); padding-bottom:clamp(72px,8vw,120px); }
.article-head .hero-crumb{ margin-bottom:0; }
.article-head .hero-crumb a{ color:var(--xdl-ink); }
.article-head .hero-crumb a:hover{ color:var(--xdl-coral-type); }
.article-meta time{ color:var(--xdl-slate); }
.article-head .hero-crumb .crumb-topic{ color:var(--xdl-coral-type); }

/* Play buttons draw a solid white triangle */
.play-dot,.vcard-play span{ color:var(--xdl-white); }
.play-dot svg,.vcard-play svg{ fill:currentColor; }

/* A marker-only paragraph stays small inside running text */
.prose p.ctc-para{ font-size:15px; line-height:1.5; }

/* A photo grid lifting into the lilac paths band above it (Service Category) */
.section.lift{ z-index:2; margin-top:-150px; padding-top:0; background:transparent; }

/* An empty photo slot on an ink band reads violet, as in the export */
.ground-ink .photo-tbc{ background:var(--xdl-violet); }

/* The form button carries the chevron like every other pill */
.wpcf7 button[type="submit"] svg{ flex:none; width:18px; height:18px; stroke-width:2.5; }

/* ============================================================
   13. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:0s!important; animation-duration:0s!important; }
  .marquee ul{ animation:none; }
}

/* v6 Programs & Events */
.pe-head .hero-crumb{ margin-bottom:0; color:var(--xdl-ink); }
.pe-head .hero-crumb a{ color:var(--xdl-ink); }
.pe-head .hero-crumb a:hover{ color:var(--xdl-coral-type); }
.pe-head .hero-crumb .crumb-topic{ color:var(--xdl-coral-type); }
.hero-pills ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hero-pills a{ display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:var(--radius-pill); background:var(--xdl-white-a12); color:var(--xdl-white); font-weight:var(--fw-semibold); font-size:15px; text-decoration:none; backdrop-filter:blur(6px); transition:background 200ms ease; }
.hero-pills a:hover{ background:var(--xdl-white-a24); color:var(--xdl-white); }
.ev-list{ list-style:none; display:flex; flex-direction:column; gap:24px; }
.ev-card{ display:grid; grid-template-columns:minmax(200px,.6fr) 1fr; border-radius:28px; overflow:hidden; background:var(--xdl-white); box-shadow:var(--shadow-card); }
.ev-date{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:40px 24px; background:var(--xdl-violet); color:var(--xdl-white); text-align:center; }
.ev-mon{ font-weight:var(--fw-bold); font-size:20px; }
.ev-day{ font-weight:var(--fw-extrabold); font-size:clamp(64px,7vw,96px); line-height:.9; letter-spacing:-0.04em; }
.ev-wd{ font-weight:var(--fw-semibold); font-size:15px; color:var(--xdl-coral-on-dark); }
.ev-body{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:clamp(28px,4vw,56px); }
.ev-loc,.ev-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:15px; line-height:1.4; }
.ev-loc{ gap:8px; font-weight:var(--fw-bold); }
.ev-loc svg,.ev-time svg{ width:16px; height:16px; color:var(--xdl-coral-type); }
.ev-time{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-bold); }
.ev-title{ font-weight:var(--fw-extrabold); font-size:clamp(28px,3vw,44px); line-height:1.05; letter-spacing:-0.03em; max-width:14em; }
.ev-sub{ font-size:18px; line-height:1.5; }
.ev-body .actions{ margin-top:12px; }
@media (max-width:719px){ .ev-card{ grid-template-columns:1fr; } .ev-date{ flex-direction:row; gap:12px; padding:20px 24px; } .ev-day{ font-size:48px; } }
.track-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(32px,4vw,48px); }
.track-nav{ display:flex; align-items:center; gap:10px; }
.track-count{ margin-right:8px; font-weight:var(--fw-bold); font-size:15px; font-variant-numeric:tabular-nums; }
.round--ink{ background:var(--xdl-ink); color:var(--xdl-white); border:0; cursor:pointer; }
.round--ink:hover:not(:disabled){ background:var(--xdl-coral); }
.round--ink:disabled{ opacity:.35; cursor:default; }
.track{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 max(24px,calc((100vw - var(--page-max)) / 2)) 48px; scroll-padding-inline:max(24px,calc((100vw - var(--page-max)) / 2)); }
.track::-webkit-scrollbar{ display:none; }
.track-list{ list-style:none; display:flex; gap:24px; width:max-content; }
.og-card{ scroll-snap-align:start; width:min(86vw,880px); display:grid; grid-template-columns:1fr 1fr; border-radius:28px; overflow:hidden; background:var(--xdl-white); box-shadow:var(--shadow-card); }
.og-media{ position:relative; min-height:300px; background:var(--xdl-ink); }
.og-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.og-body{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; padding:clamp(28px,4vw,56px); }
.og-title{ font-weight:var(--fw-extrabold); font-size:clamp(28px,2.8vw,40px); line-height:1.05; letter-spacing:-0.03em; }
.og-sub{ font-weight:var(--fw-bold); }
.og-body p{ font-size:17px; line-height:1.6; }
.og-body .tlink{ margin-top:14px; }
@media (max-width:719px){ .og-card{ grid-template-columns:1fr; } .og-media{ min-height:220px; } }
.pr-grid{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:24px; }
.pr-card{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:clamp(28px,4vw,56px); border-radius:28px; background:var(--xdl-white); box-shadow:var(--shadow-card); }
.pr-title{ font-weight:var(--fw-extrabold); font-size:clamp(28px,2.8vw,40px); line-height:1.05; letter-spacing:-0.03em; max-width:12em; }
.pr-card p{ font-size:17px; line-height:1.6; }
.pr-card .actions{ margin-top:auto; padding-top:12px; }
.pr-card .dl-link{ padding-top:0; margin-top:0; } /* #93: the download cards' auto margin pushed it below the pill */
.pr-card .dl-link svg{ display:inline-block; width:16px; height:16px; }
.pe-article{ max-width:calc(var(--page-max) + 48px); margin:0 auto; padding:calc(var(--nav-h) + clamp(56px,6vw,96px)) 24px var(--pad-lg); display:flex; flex-direction:column; align-items:center; }
.pe-head,.pe-main{ width:100%; max-width:860px; }
.pe-head{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.pe-title{ font-weight:var(--fw-extrabold); font-size:clamp(40px,5.6vw,80px); line-height:1; letter-spacing:-0.04em; text-wrap:balance; }
.pe-sub{ font-weight:var(--fw-semibold); font-size:22px; line-height:1.4; color:var(--xdl-coral-type); }
.pe-meta{ list-style:none; width:100%; display:flex; flex-wrap:wrap; gap:12px 28px; padding-top:20px; border-top:2px dotted var(--xdl-ink-a16); font-size:16px; }
.pe-meta li{ display:inline-flex; align-items:center; gap:8px; }
.pe-meta svg{ width:18px; height:18px; color:var(--xdl-coral-type); }
.pe-main{ display:flex; flex-direction:column; gap:28px; margin-top:clamp(40px,5vw,56px); }
.pe-figure{ width:100%; max-width:860px; margin:clamp(32px,4vw,48px) 0 0; border-radius:24px; overflow:hidden; background:var(--xdl-mist); }
.pe-figure img{ display:block; width:100%; height:auto; }
.pe-body{ display:flex; flex-direction:column; gap:16px; font-size:18px; line-height:1.7; }
.pe-body h2{ margin-top:20px; font-weight:var(--fw-extrabold); font-size:clamp(26px,2.6vw,36px); line-height:1.1; letter-spacing:-0.03em; }
.pe-body ul{ list-style:none; display:flex; flex-direction:column; gap:12px; padding:0; }
.pe-body li{ position:relative; padding-left:calc(.42em + 14px); }
.pe-body li::before{ content:""; position:absolute; left:0; top:.66em; width:.42em; height:.42em; background:var(--xdl-coral); }
.pe-extra{ align-self:flex-start; }
.pe-file{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; padding:clamp(24px,3vw,36px); border-radius:28px; background:var(--xdl-ink); color:var(--xdl-white); }
.pe-file-icon{ display:inline-flex; color:var(--xdl-coral); }
.pe-file-icon svg{ width:32px; height:32px; stroke-width:1.75; }
.pe-file-name{ flex:1; display:flex; flex-direction:column; gap:2px; font-size:14px; }
.pe-file-name strong{ font-weight:var(--fw-extrabold); font-size:clamp(20px,1.8vw,24px); line-height:1.2; letter-spacing:-0.02em; }
.pe-file .tlink{ color:var(--xdl-white); --tl-base:var(--xdl-white-a24); }
.pe-file .tlink:hover{ color:var(--xdl-white); }
.pe-file .tlink svg{ width:16px; height:16px; }
.pe-action{ display:flex; flex-direction:column; align-items:center; gap:24px; padding:clamp(32px,4vw,56px); border-radius:28px; background:var(--xdl-white); box-shadow:var(--shadow-card); text-align:center; }
.pe-action--form{ align-items:stretch; text-align:left; }
.pe-action-title{ font-weight:var(--fw-extrabold); font-size:clamp(26px,2.6vw,36px); line-height:1.1; letter-spacing:-0.03em; text-wrap:balance; }
.pe-back{ align-self:center; margin-top:12px; }
.tlink--back svg{ width:16px; height:16px; }

/* v6 Order Supplies: summary card, item picker with steppers, the violet shipping block */
.form-open{ padding-bottom:0; }
.form-open .wpcf7 form{ gap:0; }
.sup-top{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
@media (min-width:960px){ .sup-top{ grid-template-columns:240px minmax(0,1fr); gap:clamp(32px,4vw,56px); align-items:start; } }
.sup-aside{ position:sticky; top:calc(var(--nav-h) + 24px); }
@media (max-width:959px){ .sup-aside{ position:static; order:2; } }
.sup-summary{ display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:24px; background:var(--xdl-white); box-shadow:var(--shadow-card); }
.sup-summary-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:2px dotted var(--xdl-ink-a16); }
.sup-summary-head strong{ font-weight:var(--fw-extrabold); font-size:22px; letter-spacing:-0.02em; }
.sup-count{ flex:none; padding:4px 10px; border-radius:var(--radius-pill); background:var(--xdl-lilac); font-weight:var(--fw-bold); font-size:13px; }
.sup-empty{ font-size:15px; line-height:1.5; }
.sup-list ul{ list-style:none; display:flex; flex-direction:column; gap:8px; font-size:15px; }
.sup-list li{ display:flex; justify-content:space-between; gap:12px; }
.sup-list li span:last-child{ font-weight:var(--fw-bold); }
.sup-title{ margin-bottom:clamp(28px,3vw,40px); font-weight:var(--fw-extrabold); font-size:clamp(40px,5.6vw,80px); line-height:1; letter-spacing:-0.04em; text-wrap:balance; }
.sup-group-title{ margin:0 0 16px; font-weight:var(--fw-extrabold); font-size:26px; line-height:1.2; letter-spacing:-0.02em; }
.sup-items + .sup-group-title{ margin-top:40px; }
.sup-items{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.sup-item{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:18px 24px; border-radius:20px; background:var(--xdl-white); box-shadow:var(--shadow-card); }
.sup-item-text{ flex:1 1 280px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.sup-item-name{ font-weight:var(--fw-extrabold); font-size:19px; line-height:1.3; }
.sup-item-fits{ font-size:15px; line-height:1.4; }
.sup-item-extra{ margin-top:12px; max-width:360px; }
.sup-qty{ flex:none; display:flex; align-items:center; gap:6px; }
.sup-qty .wpcf7-form-control-wrap{ width:88px; }
.sup-qty.is-stepper .wpcf7-form-control-wrap{ width:44px; }
.wpcf7 .sup-qty.is-stepper input[type="number"]{ height:44px; padding:0; border:0; background:transparent; box-shadow:none; text-align:center; font-weight:var(--fw-bold); font-size:18px; -moz-appearance:textfield; }
.sup-qty.is-stepper input::-webkit-outer-spin-button,.sup-qty.is-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sup-step{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:50%; background:var(--xdl-lilac); color:var(--xdl-ink); cursor:pointer; transition:background 150ms ease; }
.sup-step:hover{ background:var(--xdl-coral); }
.sup-step svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; }
.sup-banner{ margin-top:clamp(40px,5vw,64px); }
.sup-ship{ margin-top:var(--pad-lg); margin-inline:calc(50% - 50vw); background:var(--xdl-violet); color:var(--xdl-white); }
.sup-ship .pixel-edge{ margin-top:-1px; }
.sup-ship-inner{ max-width:calc(var(--page-max) + 48px); margin:0 auto; padding:clamp(48px,6vw,80px) 24px var(--pad-lg); display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.sup-ship-title{ max-width:10em; font-weight:var(--fw-extrabold); font-size:clamp(40px,5.6vw,80px); line-height:1; letter-spacing:-0.04em; text-wrap:balance; }
.sup-ship-phone{ max-width:28em; font-size:18px; line-height:1.6; }
.sup-ship-phone a{ color:var(--xdl-white); font-weight:var(--fw-bold); text-decoration-color:var(--xdl-coral); }
.sup-ship-phone a:hover{ color:var(--xdl-coral-on-dark); }
.sup-ship-card{ width:100%; max-width:860px; margin-top:20px; display:flex; flex-direction:column; gap:20px; padding:clamp(24px,4vw,48px); border-radius:28px; background:var(--xdl-white); color:var(--xdl-ink); text-align:left; box-shadow:0 32px 72px -32px rgba(0,0,0,.45); }
.sup-ship-card button[type="submit"]{ width:100%; }
.sup-ship + .wpcf7-response-output{ margin-top:20px !important; }

/* Subservice pages (final export): overview, What we make, What to send, related */
.ss-overview .container{ display:flex; flex-direction:column; align-items:flex-start; gap:32px; }
.ss-overview .h-section{ max-width:max(90%,min(100%,560px)); text-wrap:pretty; }
.ss-lede p{ max-width:max(55%,min(100%,560px)); font-size:22px; line-height:1.6; text-wrap:pretty; }
.ss-make .container{ display:flex; flex-direction:column; gap:clamp(40px,5vw,64px); }
.ss-make-title{ text-align:center; }
.ss-cards{ list-style:none; display:flex; flex-direction:column; gap:16px; }
.ss-card{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:baseline; gap:10px clamp(32px,5vw,80px); padding:clamp(24px,2.8vw,36px) clamp(28px,3.4vw,48px); border-radius:24px; background:var(--xdl-white); box-shadow:0 1px 2px rgba(8,18,58,.05),0 24px 56px -32px rgba(8,18,58,.28); }
.ss-card-title{ display:flex; align-items:baseline; gap:16px; font-weight:var(--fw-extrabold); font-size:clamp(24px,2.2vw,28px); line-height:1.15; letter-spacing:-0.02em; text-wrap:balance; }
.ss-square{ flex:none; width:.42em; height:.42em; background:var(--xdl-coral); transform:translateY(-.04em); }
.ss-card p{ font-size:18px; line-height:1.6; text-wrap:pretty; }
.ss-make-cta{ display:flex; justify-content:center; }
.ss-systems{ display:flex; flex-direction:column; gap:16px; padding-top:clamp(32px,4vw,48px); border-top:1px solid var(--xdl-ink-a16); }
.ss-systems-title{ font-weight:var(--fw-extrabold); font-size:clamp(22px,2vw,26px); line-height:1.2; letter-spacing:-0.02em; }
.ss-pills{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.ss-pills li{ display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:var(--radius-pill); background:var(--xdl-white); font-weight:var(--fw-bold); font-size:15px; }
.ss-send-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:40px clamp(48px,6vw,96px); align-items:start; }
.ss-send-head{ display:flex; flex-direction:column; align-items:flex-start; gap:32px; }
.ss-send .tlink{ gap:8px; --tl-base:var(--xdl-white-a24); }
.ss-send .tlink svg{ width:16px; height:16px; }
.ss-send .mlist{ gap:22px; }
.ss-send .mlist li{ font-weight:var(--fw-semibold); line-height:1.45; }
.ss-related .container{ display:flex; flex-direction:column; gap:clamp(32px,4vw,48px); }
.ss-related-grid{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.ss-related-grid > li{ flex:0 1 calc(33.333% - 16px); min-width:min(100%,280px); }
.ss-related-grid .mcard{ padding:clamp(28px,3vw,36px); border-radius:24px; }
.ss-related-grid .mcard-body{ align-items:flex-start; }
.ss-related-grid .mcard-title{ font-size:24px; line-height:1.15; letter-spacing:-0.02em; }
.ss-related-grid .mcard-desc{ font-size:16px; line-height:1.6; }
.ss-all{ align-self:center; }
.hero-badge-line{ margin-top:24px; display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:var(--radius-pill); background:var(--xdl-white-a12); font-weight:var(--fw-bold); font-size:15px; }
.hero-badge-line svg{ width:18px; height:18px; color:var(--xdl-coral); }
.hero--light .hero-404{ color:var(--xdl-coral-type-lg); }

/* ── Phones (Pastel, Sebastian, 2026-10-23) ──────────────────────────────
   Below 768px a page reads straight down: copy left-aligned, a pill full width
   with any text link or play button centred under it, a button after the copy
   it acts on, the photo above its text, and the pixel edges at twice the size. */
@media (max-width:767px){
  /* #38, #46, #50, #52–#55, #63, #64, #67: left-aligned */
  .hero--center .hero-inner,.cta-final-inner,.sup-ship-inner{ align-items:flex-start; text-align:left; }
  .sec-head--center{ align-items:flex-start; text-align:left; }
  .cta-final .actions{ justify-content:flex-start; }
  .steps-cols-wrap{ align-items:flex-start; }
  .steps-cols-wrap .h-section-sm{ text-align:left; }
  /* #38, #49: a larger Home title; a kicker H1 stays small under a display line */
  .hero--home .hero-title,.hero--home .hero-display{ font-size:54px; }
  .hero-kicker{ font-size:17px; }
  /* #39, #45 */
  main .btn{ width:100%; }
  .actions:has(> .btn){ flex-direction:column; align-items:stretch; align-self:stretch; width:100%; gap:20px; }
  .actions:has(> .btn) > :not(.btn){ align-self:center; }
  /* #41: the band's button follows its paragraph */
  .band-grid > .actions{ order:2; }
  /* #51: the photo leads */
  .split--media-last .split-media{ order:0; }
  /* #52: steps stack */
  .steps-band .steps-cols{ grid-template-columns:1fr; gap:0; }
  .steps-band .steps-cols > li{ padding:24px 0; border-left:0; border-top:2px dotted var(--xdl-ink); }
  .steps-band .steps-cols > li:first-child{ padding-top:0; border-top:0; }
  /* #40, #44: the left half of the edge at twice the size */
  .pixel-edge{ overflow:hidden; }
  .pixel-edge svg{ width:200%; }
  /* #58 */
  .news-card .wpcf7 input[type="submit"],.news-card .wpcf7 button[type="submit"]{ width:100%; }
  /* #62: a narrower portrait so the moving chevrons show either side */
  .founder-media .portrait{ width:min(64%,400px); }
  .chev-row{ -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%); }
  /* #66: Get Started reads heading, intro, form, then the contact list */
  .hero--form .hero-inner{ row-gap:0; }
  .hero--form .hero-copy{ display:contents; }
  .hero--form [data-form-block]{ order:1; margin-top:40px; }
  .hero--form .hero-contacts{ order:2; }
  /* #68: the turnaround days sit under the case type */
  .ta-pick{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; row-gap:4px; }
  .ta-days{ grid-column:2; max-width:none; text-align:left; }
  /* #212: the phone leads, the copy and arrows follow */
  .reels{ grid-template-columns:1fr; gap:24px; }
  /* #181: a photo hero's copy needs a darker veil on a phone, where the text covers the photo */
  .hero-overlay{ opacity:.6; }
}
/* #41: a button that sits beside or above its content on wide screens is
   rendered again after it, for phones; only one of the pair is ever displayed. */
@media (max-width:767px){ .wide-only{ display:none!important; } }
@media (min-width:768px){ .narrow-only{ display:none!important; } }
.greviews-more{ margin-top:8px; }
/* #42: on phones "View All Services" follows the cards */
.fcard-after{ padding-top:16px; }
@media (max-width:959px){ .svc-head-link{ display:none; } }
@media (min-width:960px){ .fcard-after{ display:none; } }