/* Word of Mouth Websites: the design system.

   GENERATED by build/generate.py (build/css_port.py). Do not edit this file: it is
     build/css/head.css      this header and the self-hosted fonts
   + build/css/adapter.css   Elementor and Hello adapter, and the base the comp assumed
   + the approved comp's CSS, ported mechanically from design/wordofmouthwebsites.html
   + build/css/after.css     pages and states the comp never drew (every one listed in the README)

   The comp is the porting contract (from_design): it carries Rob's logo guide of 13 Oct 2026 (marker, biro,
   light biro, paper, stone; Archivo; the Permanent Marker wordmark). The mechanical port only
   - prefixes classes and tokens (.hero -> .wom-hero, --blue -> --wom-blue; gotchas register: Elementor sets
     --display/--gap/--width on every container, so unprefixed tokens are unsafe);
   - scopes element selectors to the theme (body.wom-site, form -> .wom-form) so wp-admin and plugins are left alone;
   - adds `.wom-site .elementor .e-con.wom-<cls>` to rules whose element is an Elementor container, which beats
     Elementor's flex-column defaults (gotchas register), and `.wom-site .elementor .e-con > .elementor-widget.wom-<cls>`
     to rules on a widget's class, which beats Elementor's four-class `max-width: 100%` on widgets;
   - raises any font size under 16px to 1rem (the logo guide's minimum), except the wordmark's WEBSITES line.
   build/css_port_check.py proves nothing was dropped and lists every value that changed. */

/* fonts: self-hosted, the exact files fonts.googleapis.com serves for the comp's URL (SIL Open Font Licence).
   Archivo is the only text face. Permanent Marker is the interim wordmark lettering and is used for nothing else. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/archivo-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: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/archivo-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: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/permanent-marker-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; }

/* ---------------------------------------------------------------- adapter (before the comp, so the comp wins ties)
   Hello's reset and theme CSS are switched off in inc/elementor.php; what is left here is what the comp assumed
   from a bare browser page, and what Elementor changes. */
body.wom-site { margin: 0; }                       /* the comp assumed the artifact host's full-bleed page */
.wom-site h1, .wom-site h2, .wom-site h3 { font-weight: 700; }   /* the browser default the comp relied on */
.wom-site .wom-shot img { height: 100%; }          /* Elementor's `.elementor img { height: auto }` ties with the comp */

/* Containers are flex columns that pad 10px and gap 20px by default: undo it by Elementor's own class names,
   then say which kind of box each container is. Grids say display:grid in their own (ported) rule. */
.wom-site .elementor .e-con {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px; --widgets-spacing: 0px;
  --margin-top: 0px; --margin-bottom: 0px;
  --content-width: 100%; --width: 100%;
  padding: 0; gap: 0;
}
.wom-site .elementor .e-con.e-flex { flex-direction: column; flex-wrap: nowrap; }
.wom-site .elementor .e-con:is(.wom-sec, .wom-hero, .wom-wrap, .wom-how-head, .wom-data-slot) { display: block; }
.wom-site .elementor .e-con > .elementor-widget { min-width: 0; }
:where(.wom-site .elementor-widget) { margin: 0; }   /* zero specificity: the comp's widget margins (.story-close, .not-inc) must win */
.wom-site .elementor .elementor-widget:not(:last-child) { margin-block-end: 0; }
/* Heading widgets: no kit colour or font; line-height from the comp's rule rather than Elementor's 1. */
.wom-site .elementor .elementor-widget-heading .elementor-heading-title { color: inherit; font-family: var(--wom-f-head); }
:is(h1, h2, h3, p).elementor-heading-title { line-height: inherit; }
:where(.wom-site) .elementor-widget-text-editor { color: inherit; font-family: inherit; }
/* Elementor strips underlines from every link in its content; the comp's plain links keep the browser default. */
.wom-site .elementor a:where(:not([class])) { text-decoration: underline; }
/* A heading widget is the grid item, so the comp's `.hero-grid h1 { grid-column }` has to reach its wrapper. */
.wom-site .elementor .e-con.wom-hero-grid > .elementor-widget-heading { grid-column: 1 / -1; }
/* Elementor/Hello table styling must not show through the docket (gotchas register). Reset before the comp's borders. */
.wom-dk-lines, .wom-dk-lines tr, .wom-dk-lines td { border: 0; background: transparent; }
.wom-dk-lines { margin: 0; }

/* ---------------------------------------------------------------- the approved comp (ported) */
/* Layout: marker-black bookends (hero, footer) around paper and stone sections on a 1200px measure.
   Brand from Rob's logo guide (13 Oct 2026): Marker #1B1B1B lettering, Biro #1F4FBF underline/buttons/links,
   Light biro #7FA2FF on dark only, Paper #FFFEFA, Stone #ECEAE4. Archivo for all type; Permanent Marker for the
   wordmark only (reference face until the hand-drawn vector exists). Light only, as the brief asks for launch.
   Radius: controls 6px, cards 10px, the quote docket 2px. Dials: variance 5, motion 3, density 4. */
:root {
  --wom-blue: #1f4fbf;
  --wom-blue-deep: #193f99;
  --wom-light: #7fa2ff;
  --wom-ink: #1b1b1b;
  --wom-white: #fffefa;
  --wom-mist: #eceae4;
  --wom-grey: #55534e;
  --wom-rule: #d9d6ce;
  --wom-field: #8a877f;
  --wom-paleblue: #c9c6be;
  --wom-docket: #fffefa;
  --wom-docket-rule: rgba(27, 27, 27, .2);
  --wom-error: #b3261e;
  --wom-shadow: 0 1px 0 rgba(27, 27, 27, .05), 0 24px 48px -24px rgba(27, 27, 27, .35);

  --wom-f-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wom-f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wom-f-mark: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;

  --wom-r-ui: 6px;
  --wom-r-card: 10px;
  --wom-r-paper: 2px;
  --wom-measure: 1200px;
  --wom-gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

.wom-site * { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.wom-site { background: var(--wom-white); color: var(--wom-ink); font-family: var(--wom-f-body); font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.wom-site h1, .wom-site h2, .wom-site h3 { font-family: var(--wom-f-head); margin: 0; text-wrap: balance; }
.wom-site p { margin: 0; }
:where(.wom-site) a { color: inherit; }
.wom-site :focus-visible { outline: 3px solid var(--wom-blue); outline-offset: 3px; border-radius: 2px; }
.wom-on-ink :focus-visible { outline-color: var(--wom-light); }

.wom-wrap, .wom-site .elementor .e-con.wom-wrap { max-width: var(--wom-measure); margin-inline: auto; padding-inline: var(--wom-gutter); }
.wom-skip { position: absolute; left: -999px; top: 8px; z-index: 40; background: var(--wom-ink); color: var(--wom-white); padding: .5rem 1rem; border-radius: var(--wom-r-ui); }
.wom-skip:focus { left: 8px; }
.wom-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Facts we don't have yet. Visible on purpose; they block sign-off of the final page. */
.wom-ph { font-weight: 700; font-size: max(1rem, .88em); color: var(--wom-blue); border: 1px dashed currentColor; border-radius: 3px; padding: 0 .3em; white-space: nowrap; }
.wom-on-ink .wom-ph { color: var(--wom-white); }

/* Wordmark */
.wom-wm { display: inline-grid; justify-items: center; text-decoration: none; color: var(--wom-ink); line-height: 1; }
.wom-wm-name { font-family: var(--wom-f-mark); font-size: 1.5rem; letter-spacing: .01em; white-space: nowrap; }
.wom-wm-line { display: block; width: 92%; height: .5rem; margin: -.05rem 0 0 8%; color: var(--wom-blue); overflow: visible; }
.wom-wm-sub { font-family: var(--wom-f-head); font-weight: 700; font-size: .56rem; letter-spacing: .38em; padding-left: .38em; margin-top: .22rem; }
.wom-on-ink .wom-wm { color: var(--wom-white); }
.wom-on-ink .wom-wm-line { color: var(--wom-light); }

/* Buttons */
.wom-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.35rem; border-radius: var(--wom-r-ui); font-family: var(--wom-f-head); font-weight: 700; font-size: 1.05rem; text-decoration: none; white-space: nowrap; border: 2px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .1s; }
.wom-btn:active { transform: translateY(1px); }
.wom-btn-pri { background: var(--wom-blue); color: #fff; border-color: var(--wom-blue); }
.wom-btn-pri:hover { background: var(--wom-blue-deep); border-color: var(--wom-blue-deep); }
.wom-btn-sec { background: transparent; color: var(--wom-blue); border-color: var(--wom-blue); }
.wom-btn-sec:hover { background: var(--wom-blue); color: var(--wom-white); }
.wom-on-ink .wom-btn-sec { color: var(--wom-white); border-color: var(--wom-white); }
.wom-on-ink .wom-btn-sec:hover { background: var(--wom-white); color: var(--wom-ink); }

/* Header */
.wom-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--wom-white); border-bottom: 1px solid var(--wom-rule); }
.wom-nav .wom-wrap { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.wom-nav .wom-btn { min-height: 44px; padding: 0 1rem; font-size: 1rem; margin-left: auto; }
@media (max-width: 860px) {
  .wom-nav-phone { display: none; }
  .wom-nav .wom-btn { margin-left: auto; }
}
@media (max-width: 420px) {
  .wom-nav .wom-wrap { gap: .6rem; height: 64px; }
  .wom-nav .wom-btn { padding: 0 .8rem; font-size: 1rem; }
}

/* Hero */
.wom-hero, .wom-site .elementor .e-con.wom-hero { background: var(--wom-ink); color: var(--wom-white); padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.wom-hero-grid, .wom-site .elementor .e-con.wom-hero-grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: clamp(1.75rem, 3vw, 2.5rem); align-items: start; }
.wom-hero-grid h1 { grid-column: 1 / -1; max-width: 19em; }
.wom-hero-copy, .wom-site .elementor .e-con.wom-hero-copy { display: grid; gap: 1.6rem; min-width: 0; padding-top: .25rem; }
.wom-hero h1 { color: var(--wom-white); font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.75rem); font-weight: 800; letter-spacing: -.032em; line-height: 1.1; padding-bottom: .06em; }
.wom-hero h1 em { font-style: normal; text-decoration: underline; text-decoration-color: var(--wom-light); text-decoration-thickness: .085em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
.wom-lede, .wom-site .elementor .e-con > .elementor-widget.wom-lede { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); line-height: 1.5; color: var(--wom-paleblue); max-width: 34ch; }
.wom-lede strong { color: var(--wom-white); font-family: var(--wom-f-head); font-weight: 700; }
.wom-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 900px) { .wom-hero-grid, .wom-site .elementor .e-con.wom-hero-grid { grid-template-columns: 1fr; } }

/* The example: a live preview built from slots */
.wom-pv { margin: 0; min-width: 0; scroll-margin-top: 90px; }
.wom-pv-card { background: var(--wom-white); color: var(--wom-ink); border-radius: var(--wom-r-card); box-shadow: var(--wom-shadow); overflow: hidden; }
.wom-pv-bar { padding: .55rem .9rem; border-bottom: 1px solid var(--wom-rule); background: var(--wom-mist); }
.wom-pv-url { display: inline-block; font-size: 1rem; color: var(--wom-grey); background: var(--wom-white); border-radius: 4px; padding: .1rem .6rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.wom-pv-body { padding: clamp(1.1rem, 2.4vw, 1.5rem); display: grid; gap: .95rem; }
.wom-pv-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding-bottom: .85rem; border-bottom: 1px solid var(--wom-rule); }
.wom-pv-name { font-family: var(--wom-f-head); font-weight: 800; font-size: 1.05rem; }
.wom-pv-call { font-family: var(--wom-f-head); font-weight: 700; font-size: 1rem; border: 2px solid var(--wom-ink); border-radius: var(--wom-r-ui); padding: .25rem .6rem; white-space: nowrap; }
.wom-pv-h { font-family: var(--wom-f-head); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1vw, 1.65rem); line-height: 1.12; letter-spacing: -.02em; }
.wom-pv-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.wom-pv-tags span { font-size: 1rem; border: 1px dashed var(--wom-field); border-radius: var(--wom-r-ui); padding: .1rem .5rem; color: var(--wom-grey); }
.wom-pv-q { margin: 0; padding: .85rem 1rem; background: var(--wom-mist); border-radius: var(--wom-r-ui); font-size: 1rem; }
.wom-pv-q .wom-qm { color: var(--wom-blue); font-family: var(--wom-f-head); font-weight: 800; }
.wom-pv-q cite { display: block; margin-top: .3rem; font-style: normal; font-size: 1rem; color: var(--wom-grey); }
.wom-slot { color: var(--wom-blue); background: rgba(31, 79, 191, .08); border-bottom: 2px dashed var(--wom-blue); padding: 0 .15em; border-radius: 2px; transition: background-color .3s, color .3s, border-color .3s; }
.wom-slot.wom-filled { color: inherit; background: transparent; border-bottom-color: transparent; }
.wom-pv-try { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.wom-pv-try .wom-note { grid-column: 1 / -1; font-size: 1rem; color: var(--wom-paleblue); }
.wom-pv-try label { color: var(--wom-white); }
@media (max-width: 420px) { .wom-pv-try { grid-template-columns: 1fr; } }

/* Fields */
.wom-field { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.wom-field label { font-size: 1rem; font-weight: 700; }
.wom-field .wom-help { font-size: 1rem; color: var(--wom-grey); }
.wom-site input[type="text"], .wom-site input[type="tel"], .wom-site input[type="url"] {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--wom-ink); background: var(--wom-white);
  border: 2px solid var(--wom-field); border-radius: var(--wom-r-ui); padding: .55rem .8rem; min-height: 50px;
}
.wom-site input::placeholder { color: var(--wom-grey); opacity: 1; }
.wom-site input:focus-visible { outline: 3px solid var(--wom-blue); outline-offset: 1px; border-color: var(--wom-blue); }
.wom-on-ink input { border-color: var(--wom-white); }
.wom-on-ink input:focus-visible { outline-color: var(--wom-light); border-color: var(--wom-white); }

/* Shared section heads */
.wom-sec, .wom-site .elementor .e-con.wom-sec { padding-block: clamp(4rem, 9vw, 7rem); }
.wom-sec.wom-mist, .wom-site .elementor .e-con.wom-sec.wom-mist { background: var(--wom-mist); }
.wom-sec h2 { font-size: clamp(1.9rem, 1.15rem + 2.3vw, 2.85rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--wom-ink); }
.wom-sec .wom-intro, .wom-site .elementor .wom-sec .e-con > .elementor-widget.wom-intro { color: var(--wom-grey); max-width: 52ch; margin-top: 1rem; }

/* The problem */
.wom-beats { list-style: none; margin: clamp(2rem, 5vw, 3.25rem) 0 0; padding: 0; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.wom-beat { display: grid; gap: .45rem; }
.wom-beat:nth-child(2) { padding-left: clamp(1.25rem, 9vw, 9rem); }
.wom-beat:nth-child(3) { padding-left: clamp(2.5rem, 18vw, 18rem); }
.wom-beat-line { font-family: var(--wom-f-head); font-weight: 800; font-size: clamp(1.7rem, 1rem + 2.8vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.wom-beat-line .wom-qm { color: var(--wom-blue); }
.wom-beat-note { color: var(--wom-grey); max-width: 44ch; }
.wom-story-close, .wom-site .elementor .e-con > .elementor-widget.wom-story-close { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 40ch; font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); line-height: 1.5; padding-left: clamp(2.5rem, 18vw, 18rem); }
.wom-story-close strong { font-family: var(--wom-f-head); color: var(--wom-blue); }
@media (max-width: 640px) { .wom-story-close, .wom-site .elementor .e-con > .elementor-widget.wom-story-close { padding-left: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .wom-js .wom-beat { opacity: .3; transform: translateY(10px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .wom-js .wom-beat.wom-lit { opacity: 1; transform: none; }
}

/* How it works */
.wom-how-grid, .wom-site .elementor .e-con.wom-how-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.wom-how-head, .wom-site .elementor .e-con.wom-how-head { position: sticky; top: 104px; }
.wom-steps { list-style: none; margin: 0; padding: 0; }
.wom-step { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--wom-rule); }
.wom-step:last-child { border-bottom: 1px solid var(--wom-rule); }
.wom-step .wom-n { font-family: var(--wom-f-head); font-weight: 800; color: var(--wom-blue); font-size: 2rem; line-height: 1; }
.wom-step h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .35rem; }
.wom-step p { color: var(--wom-grey); max-width: 50ch; }
@media (max-width: 860px) { .wom-how-grid, .wom-site .elementor .e-con.wom-how-grid { grid-template-columns: 1fr; } .wom-how-head, .wom-site .elementor .e-con.wom-how-head { position: static; } }

/* What's included */
.wom-inc-grid, .wom-site .elementor .e-con.wom-inc-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.wom-inc-col, .wom-site .elementor .e-con.wom-inc-col { display: grid; gap: 2.25rem; }
.wom-inc h3 { font-size: 1.3rem; font-weight: 700; padding-bottom: .6rem; border-bottom: 2px solid var(--wom-ink); margin-bottom: .4rem; }
.wom-inc ul { list-style: none; margin: 0; padding: 0; }
.wom-inc li { padding: .6rem 0 .6rem 1.9rem; position: relative; }
.wom-inc li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: 1.15rem; height: .26rem; border-radius: 99px; background: var(--wom-blue); transform: rotate(-5deg); }
.wom-inc li span { color: var(--wom-grey); }
.wom-not-inc, .wom-site .elementor .e-con > .elementor-widget.wom-not-inc { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.25rem 1.4rem; border: 1px solid var(--wom-rule); border-radius: var(--wom-r-card); background: var(--wom-white); max-width: 70ch; }
.wom-not-inc strong { font-family: var(--wom-f-head); }
@media (max-width: 860px) { .wom-inc-grid, .wom-site .elementor .e-con.wom-inc-grid { grid-template-columns: 1fr; } }

/* Price */
.wom-price-grid, .wom-site .elementor .e-con.wom-price-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.wom-docket { background: var(--wom-docket); color: var(--wom-ink); border-radius: var(--wom-r-paper); padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 1px 0 rgba(20,26,43,.06), 0 18px 36px -24px rgba(20,26,43,.35); border-top: 6px solid var(--wom-blue); }
.wom-dk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: .85rem; border-bottom: 2px solid var(--wom-ink); }
.wom-dk-title { font-family: var(--wom-f-head); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.wom-dk-copy { font-size: 1rem; font-weight: 700; color: var(--wom-grey); }
.wom-dk-lines { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.wom-dk-lines td { padding: .65rem 0; border-bottom: 1px dashed var(--wom-docket-rule); vertical-align: top; }
.wom-dk-lines td:last-child { text-align: right; padding-left: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.wom-dk-lines tfoot td { border-bottom: 0; padding: .3rem 0; }
.wom-dk-lines tfoot tr:first-child td { padding-top: .9rem; }
.wom-dk-lines tfoot td:first-child { text-align: right; color: var(--wom-grey); }
.wom-dk-lines tfoot .wom-total td { padding-top: .6rem; font-family: var(--wom-f-head); font-weight: 800; color: var(--wom-ink); }
.wom-dk-lines tfoot .wom-total td:last-child { font-size: 1.5rem; border-top: 2px solid var(--wom-ink); }
.wom-dk-note { margin-top: 1rem; font-family: var(--wom-f-head); font-weight: 700; font-size: 1.08rem; }
.wom-price-copy, .wom-site .elementor .e-con.wom-price-copy { display: grid; gap: 1.25rem; }
.wom-price-copy p { color: var(--wom-grey); max-width: 42ch; }
.wom-care { background: var(--wom-mist); border-radius: var(--wom-r-card); padding: 1rem 1.15rem; }
.wom-care strong { color: var(--wom-ink); font-family: var(--wom-f-head); }
@media (max-width: 860px) { .wom-price-grid, .wom-site .elementor .e-con.wom-price-grid { grid-template-columns: 1fr; } .wom-price-copy, .wom-site .elementor .e-con.wom-price-copy { order: -1; } }

/* FAQ */
.wom-faq-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); }
.wom-faq-col { display: grid; align-content: start; }
.wom-site details { border-top: 1px solid var(--wom-rule); }
.wom-faq-col details:last-child { border-bottom: 1px solid var(--wom-rule); }
.wom-site summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.15rem; font-family: var(--wom-f-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; min-height: 44px; }
.wom-site summary::-webkit-details-marker { display: none; }
.wom-site summary::after { content: "+"; font-weight: 800; color: var(--wom-blue); font-size: 1.5rem; line-height: 1; transition: transform .25s cubic-bezier(.16,1,.3,1); flex: none; }
.wom-site details[open] summary::after { transform: rotate(45deg); }
.wom-site details p { color: var(--wom-grey); padding-bottom: 1.3rem; max-width: 58ch; }
@media (max-width: 860px) { .wom-faq-grid { grid-template-columns: 1fr; } .wom-faq-col + .wom-faq-col details:first-child { border-top: 0; } .wom-faq-col:first-child details:last-child { border-bottom: 0; } }

/* Examples: one featured site (screenshot with its caption beside it), then the rest as a gallery, three across.
   Screenshots simply cropped from the top of the live homepage, captions below. */
.wom-ex-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem 2rem; }
.wom-ex { margin: 0; display: grid; grid-template-rows: auto auto; gap: .8rem; align-content: start; min-width: 0; }
.wom-ex:nth-child(1) { grid-column: 1 / -1; grid-template-columns: 2fr 1fr; grid-template-rows: auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-bottom: clamp(.5rem, 2vw, 1.25rem); }
.wom-shot { aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--wom-r-card); border: 1px solid var(--wom-rule); background: var(--wom-mist); overflow: hidden; }
.wom-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wom-ex figcaption { display: grid; gap: .1rem; font-size: 1rem; color: var(--wom-grey); }
.wom-ex figcaption strong { font-family: var(--wom-f-head); font-size: 1.15rem; color: var(--wom-ink); }
.wom-ex:nth-child(1) figcaption { gap: .35rem; font-size: 1.1rem; }
.wom-ex:nth-child(1) figcaption strong { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.02em; }
.wom-ex figcaption a { color: var(--wom-blue); font-family: var(--wom-f-head); font-weight: 700; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
@media (max-width: 860px) {
  .wom-ex-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .wom-ex:nth-child(1) { grid-template-columns: 1fr; gap: .8rem; }
}
@media (max-width: 480px) { .wom-ex-grid { grid-template-columns: 1fr; } }

/* Request a preview */
.wom-req-grid, .wom-site .elementor .e-con.wom-req-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.wom-req-head, .wom-site .elementor .e-con.wom-req-head { display: grid; gap: 1rem; }
.wom-req-head p { color: var(--wom-grey); max-width: 38ch; }
.wom-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.wom-form .wom-full { grid-column: 1 / -1; }
.wom-req { color: var(--wom-blue); }
.wom-err { font-size: 1rem; color: var(--wom-error); font-weight: 700; }
.wom-field.wom-bad input { border-color: var(--wom-error); }
.wom-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: .3rem; }
.wom-form-foot p { font-size: 1rem; color: var(--wom-grey); max-width: 36ch; }
.wom-done, .wom-site .elementor .e-con.wom-done { border: 2px solid var(--wom-blue); border-radius: var(--wom-r-card); padding: 1.5rem; display: grid; gap: .5rem; background: var(--wom-mist); }
.wom-done h3 { font-size: 1.4rem; }
@media (max-width: 860px) { .wom-req-grid, .wom-site .elementor .e-con.wom-req-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .wom-form { grid-template-columns: 1fr; } }

/* Footer */
.wom-foot { background: var(--wom-ink); color: var(--wom-paleblue); padding-block: 3rem 2.5rem; font-size: 1rem; }
.wom-foot-grid { display: grid; grid-template-columns: 4fr 6fr 2fr; gap: 2rem; align-items: start; }
.wom-foot-grid > div { display: grid; gap: .7rem; }
.wom-foot .wom-wm-name { font-size: 1.9rem; }
.wom-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.wom-foot ul a { color: var(--wom-white); text-underline-offset: 3px; min-height: 36px; display: inline-flex; align-items: center; }
.wom-foot .wom-contact { font-family: var(--wom-f-head); font-weight: 700; color: var(--wom-white); font-size: 1.15rem; }
@media (max-width: 860px) { .wom-foot-grid { grid-template-columns: 1fr; } }

/* Load-in */
@media (prefers-reduced-motion: no-preference) {
  .wom-hero h1, .wom-hero-copy, .wom-site .elementor .e-con.wom-hero-copy, .wom-pv { animation: wom-rise .8s cubic-bezier(.16,1,.3,1) both; }
  .wom-hero-copy, .wom-site .elementor .e-con.wom-hero-copy { animation-delay: .06s; }
  .wom-pv { animation-delay: .12s; }
  @keyframes wom-rise { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------- pages the comp did not cover
   Thank you, legal pages and 404, built from the comp's own pieces: the section h2 scale for each page's h1,
   the request form's success panel (.wom-done) for the thank-you message, the FAQ answer measure for prose. */
.wom-sec h1 { font-size: clamp(1.9rem, 1.15rem + 2.3vw, 2.85rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--wom-ink); }
.wom-page-head, .wom-site .elementor .e-con.wom-page-head { display: grid; gap: clamp(1.5rem, 3vw, 2rem); justify-items: start; }
.wom-done, .wom-site .elementor .e-con.wom-done { max-width: 40rem; }
.wom-done p a { color: var(--wom-blue); font-weight: 700; text-underline-offset: 3px; }
.wom-prose, .wom-site .elementor .e-con > .elementor-widget.wom-prose { max-width: 66ch; }
.wom-site .wom-prose :where(p, ul, ol, table, h2, h3) + :where(p, ul, ol, table, h2, h3) { margin-top: 1rem; }
.wom-site .wom-prose h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin-top: 2.25rem; }
.wom-site .wom-prose h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin-top: 1.5rem; }
.wom-prose ul, .wom-prose ol { padding-left: 1.3rem; margin-bottom: 0; }
.wom-prose li + li { margin-top: .4rem; }
.wom-prose a { color: var(--wom-blue); text-underline-offset: 3px; }
.wom-prose .wom-updated { color: var(--wom-grey); font-size: 1rem; }
.wom-prose table, .wom-prose tr, .wom-prose td, .wom-prose th { border: 0; background: transparent; }
.wom-prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.wom-prose th, .wom-prose td { text-align: left; vertical-align: top; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--wom-rule); }
.wom-prose th { font-family: var(--wom-f-head); font-weight: 700; }

/* ---------------------------------------------------------------- states the comp did not draw */
/* WordPress admin bar (logged-in only): keep the sticky header below it. */
.admin-bar .wom-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .wom-nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .wom-nav { top: 0; } }

/* Form: honeypot off-screen (not display:none, which some bots skip); Turnstile and messages full width. */
.wom-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wom-turnstile { min-width: 0; }
.wom-form-msg { grid-column: 1 / -1; }

/* Cookie choice: only rendered when a GA4 id is set. Equal-weight choices; not a modal, nothing is blocked. */
.wom-consent { position: fixed; left: var(--wom-gutter); bottom: var(--wom-gutter); z-index: 30; max-width: 34rem; background: var(--wom-white); color: var(--wom-ink); border: 2px solid var(--wom-ink); border-radius: var(--wom-r-card); box-shadow: var(--wom-shadow); padding: 1.25rem 1.4rem; display: grid; gap: .85rem; font-size: 1rem; }
.wom-consent[hidden] { display: none; }
.wom-consent-title { font-family: var(--wom-f-head); font-weight: 700; font-size: 1.15rem; }
.wom-consent p { color: var(--wom-grey); }
.wom-consent p a { color: var(--wom-blue); text-underline-offset: 3px; }
.wom-consent-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.wom-consent .wom-btn { min-height: 48px; }
@media (max-width: 860px) { .wom-consent { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-width: none; } }
.wom-cookie-state { font-weight: 700; }

/* Brand credit row (off on this site; the hook stays styled for client themes built under the brand). */
.wom-credit-row { margin-top: 2rem; }