/* ---------------------------------------------------------------------------
   Accuwright Clean template
   Scoped to .awm-clean so nothing here can regress an ALB page during migration.

   Design language deliberately matches the TOOLroom, which Jay named as the
   standard ("We love the ROOM. UX", 2026-08-01). Tokens taken from the live
   room.accuwrightmechanical.com bundle, not invented:
     - font stack   "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial
     - Tailwind v4 scale for spacing, radii and neutrals
   ⚠ The Toolroom is Next.js + Tailwind. This is hand CSS matching its language —
   close, not identical. The component system is what makes the room feel tight.

   Brand values from the LOGO (#C4161C / #A3A5A8), not BCSS — see defect #24.
   --------------------------------------------------------------------------- */

.awm-clean{
	--red:#C4161C; --red-bright:#ED1C24; --red-deep:#7D1012;
	--gray:#A3A5A8; --charcoal:#3B3B3C; --ink:#0a0a0a;
	--n50:#fafafa; --n100:#f5f5f5; --n200:#e5e5e5; --n400:#a1a1a1; --n600:#525252;
	--r:.5rem;

	/* Fonts INHERIT from Enfold deliberately — no font-family here. The original
	   Helvetica/Segoe stack matched the Toolroom but clashed with the site (Open
	   Sans body, Enfold heading font). Jay 2026-08-02: "fonts are wonky". One page,
	   one type system: the site's. */
	font-size:1.0625rem; line-height:1.65; color:var(--ink);
	-webkit-font-smoothing:antialiased;

	/* Narrow-container hardening. The page is rendered in panels far narrower
	   than the viewport (in-app preview, sidebars), where a grid min-track wider
	   than its container refuses to shrink and pushes content out. */
	min-width:0; overflow-wrap:break-word;
}
.awm-clean *{box-sizing:border-box; min-width:0}
.awm-clean img{max-width:100%; height:auto}
.awm-clean h2,.awm-clean h3{line-height:1.15; letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance}
/* Weight and family inherit from Enfold's heading styles — size only. */
.awm-clean h2{font-size:clamp(1.625rem,1.2rem + 1.9vw,2.5rem)}
.awm-clean h3{font-size:.9375rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.awm-clean p{margin:0 0 1rem}
.awm-clean section{padding:clamp(2.5rem,1.8rem + 3.2vw,4.5rem) 0; border-bottom:1px solid var(--n200)}
.awm-clean section:last-child{border-bottom:0}

.awm-lede{font-size:1.1875rem; line-height:1.6; color:var(--n600)}
.awm-note{font-size:.875rem; line-height:1.55; color:var(--n600); border-left:2px solid var(--n200); padding-left:1rem}
.awm-eyebrow{
	font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	color:var(--red); margin:0 0 .75rem
}

/* Hero -------------------------------------------------------------------- */
.awm-clean-hero h2{font-size:clamp(2rem,1.35rem + 2.9vw,3.25rem); letter-spacing:-.03em}
.awm-cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.75rem 0 1.25rem}
.awm-btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:.8125rem 1.5rem; border-radius:var(--r);
	font-size:.9375rem; font-weight:600; letter-spacing:.01em;
	text-decoration:none; border:1px solid transparent;
	transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Specificity note: Enfold colours links via `.main_color a` (0,2,1), which beats a
   single class. Measured on staging 2026-08-02 — the primary button computed
   colour was rgb(197,33,39) on rgb(196,22,28), i.e. brand red text on brand red
   background. These rules are scoped `.awm-clean a.awm-*` (0,3,1) to win outright.
   Do not flatten them back to a single class. */
.awm-clean a.awm-btn-primary{background:var(--red); color:#fff; border-color:var(--red)}
.awm-clean a.awm-btn-primary:hover{background:var(--red-deep); border-color:var(--red-deep); color:#fff}
.awm-clean a.awm-btn-ghost{background:#fff; color:var(--ink); border-color:var(--n200)}
.awm-clean a.awm-btn-ghost:hover{border-color:var(--ink); color:var(--ink)}

/* Numbered steps ---------------------------------------------------------- */
.awm-steps{
	list-style:none; counter-reset:s; margin:1.75rem 0 1.25rem; padding:0;
	display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))
}
.awm-steps li{counter-increment:s; position:relative; padding-top:2.25rem}
.awm-steps li::before{
	content:counter(s,decimal-leading-zero); position:absolute; top:0; left:0;
	font-size:.8125rem; font-weight:700; letter-spacing:.08em; color:var(--red)
}

/* Figures ----------------------------------------------------------------- */
.awm-clean .awm-figure{margin:2rem 0 0}
.awm-clean .awm-figure img{
	display:block; width:100%; height:auto;
	border-radius:var(--r); background:var(--n100)
}
.awm-clean .awm-figure figcaption{
	margin-top:.75rem; font-size:.875rem; line-height:1.55; color:var(--n600);
	max-width:64ch
}

/* Full-bleed hero — A06 behind the copy, matching the homepage treatment
   (photo background, dark overlay, white uppercase headline, CTAs on the image).
   Jay 2026-08-02, comparing the two: the text-on-white hero "looks bad" next to
   the homepage. A06 is the LCP element: fetchpriority=high, never lazy.

   Breakout: the clean template renders inside Enfold's fixed-width .container,
   so the hero escapes it with margin-inline:calc(50% - 50vw). On Windows, 100vw
   includes the scrollbar, which would add ~17px of horizontal scroll — clipped
   by the #main rule below, scoped to clean-template pages only. */
.page-template-template-clean #main{overflow-x:clip}
.awm-clean .awm-hero-full{
	position:relative; width:100vw; margin-inline:calc(50% - 50vw);
	background:#111; overflow:hidden
}
.awm-clean .awm-hero-full > img{
	position:absolute; inset:0; width:100%; height:100%;
	object-fit:cover; object-position:center; z-index:0
}
/* Text sits left, machine stays visible right — same weighting as the homepage. */
.awm-clean .awm-hero-full::after{
	content:""; position:absolute; inset:0; z-index:1;
	background:linear-gradient(90deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.62) 45%, rgba(17,17,17,.22) 100%)
}
.awm-clean .awm-hero-inner{
	position:relative; z-index:2; max-width:1210px; margin-inline:auto;
	padding:clamp(3.5rem,7vw,6.5rem) clamp(1.25rem,4vw,3rem)
}
.awm-clean .awm-hero-inner .awm-eyebrow{color:rgba(255,255,255,.85)}
.awm-clean .awm-hero-inner h1{
	margin:.75rem 0 0; color:#fff; text-transform:uppercase;
	font-size:clamp(2rem,1.2rem + 3vw,3.4rem); line-height:1.08;
	letter-spacing:-.01em; max-width:20ch
}
.awm-clean .awm-hero-inner .awm-lede{color:rgba(255,255,255,.9); max-width:52ch}
/* Solid white button — the Lift Selector, Accuwright's OWN equipment (Jay
   2026-08-02: "that's our equipment"). Filled like the primary, so the two tools
   read as equals and only "Send us the job" stays an outline. */
.awm-clean .awm-hero-inner a.awm-btn-white{background:#fff; color:var(--ink); border-color:#fff}
.awm-clean .awm-hero-inner a.awm-btn-white:hover{background:var(--n100); border-color:var(--n100); color:var(--ink)}

/* Ghost button on the dark hero: outline white, like the homepage's second CTA.
   Scoped one level deeper than `.awm-clean a.awm-btn-ghost` so it wins. */
.awm-clean .awm-hero-inner a.awm-btn-ghost{
	background:transparent; color:#fff; border-color:rgba(255,255,255,.55)
}
.awm-clean .awm-hero-inner a.awm-btn-ghost:hover{border-color:#fff; color:#fff}
.awm-clean .awm-hero-note{
	margin-top:1.25rem; font-size:.875rem; line-height:1.55;
	color:rgba(255,255,255,.62); max-width:64ch
}
.awm-clean .awm-hero-credit{
	margin-top:2rem; font-size:.8125rem; color:rgba(255,255,255,.5)
}

/* 50/50 split — copy one side, image the other. Jay 2026-08-02: "split the 1/2
   page" — a portrait image centred under full-width text left dead space both
   sides. The image column caps its height and crops with object-fit instead. */
.awm-clean .awm-split{
	display:grid; gap:clamp(1.5rem,3vw,3rem); align-items:center;
	grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))
}
.awm-clean .awm-split-media{margin:0}
.awm-clean .awm-split-media img{
	display:block; width:100%; height:clamp(320px,42vw,520px);
	object-fit:cover; border-radius:var(--r); background:var(--n100)
}
.awm-clean .awm-split-media figcaption{
	margin-top:.75rem; font-size:.875rem; line-height:1.55; color:var(--n600)
}

/* Proof grid — inside the dark authority section. Every figure is confirmed in
   reference/authority-claims.md; this block exists to close, not to decorate. */
.awm-clean .awm-proof-grid{
	list-style:none; margin:2rem 0 0; padding:0;
	display:grid; gap:1.25rem 2rem;
	grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))
}
.awm-clean .awm-proof-grid li{display:flex; flex-direction:column; gap:.25rem}
.awm-clean .awm-proof-grid strong{color:#fff; font-size:1.125rem; letter-spacing:-.01em}
.awm-clean .awm-proof-grid span{color:#a3a5a8; font-size:.875rem; line-height:1.5}
.awm-clean .awm-customers{
	margin:2rem 0 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);
	color:#d4d4d4; font-size:.9375rem
}
.awm-clean .awm-customers strong{color:#fff}

/* Photo strip — horizontal scroll with snap. Jay 2026-08-02: "make a scroll
   through, pic quality isn't great." Fixed card height renders every source well
   inside its resolution, and mixed aspect ratios (16:9, 3:4, 1024x473) crop to
   one consistent card instead of fighting the column. */
.awm-clean .awm-gallery{
	display:flex; gap:1rem; margin-top:1.5rem;
	overflow-x:auto; scroll-snap-type:x mandatory;
	padding-bottom:.75rem; -webkit-overflow-scrolling:touch
}
.awm-clean .awm-gallery figure{
	flex:0 0 min(420px,82%); scroll-snap-align:start; margin:0
}
.awm-clean .awm-gallery img{
	display:block; width:100%; height:280px; object-fit:cover;
	border-radius:var(--r); background:var(--n100)
}
.awm-clean .awm-gallery figcaption{
	margin-top:.6rem; font-size:.8125rem; line-height:1.5; color:var(--n600)
}

/* Phone alternative under the form — the other half of "sell them, close them". */
.awm-clean .awm-capture-alt{margin:1.5rem 0 0; font-size:1rem}
.awm-clean .awm-capture-alt a{font-weight:700; color:var(--red); text-decoration:none; white-space:nowrap}
.awm-clean .awm-capture-alt a:hover{color:var(--red-deep)}

/* Comparison -------------------------------------------------------------- */
.awm-compare-grid{
	display:grid; gap:1rem; margin-top:2rem;
	grid-template-columns:repeat(auto-fit,minmax(min(265px,100%),1fr))
}
.awm-compare-col{
	background:#fff; border:1px solid var(--n200); border-radius:var(--r);
	padding:1.75rem 1.5rem; transition:border-color .15s ease
}
.awm-compare-col:hover{border-color:var(--n400)}
.awm-compare-lead{
	font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	color:var(--red); margin:0 0 .5rem
}
.awm-compare-col h3{color:var(--ink); text-transform:none; font-size:1.125rem; letter-spacing:-.01em; margin-bottom:.75rem}
.awm-compare-col ul{margin:1rem 0 0; padding:0; list-style:none}
.awm-compare-col li{
	position:relative; padding-left:1.25rem; margin-bottom:.5rem;
	font-size:.9375rem; color:var(--n600)
}
.awm-compare-col li::before{content:""; position:absolute; left:0; top:.6em; width:.375rem; height:.375rem; border-radius:50%; background:var(--gray)}

/* Capacity table ---------------------------------------------------------- */
.awm-table-scroll{
	overflow-x:auto; margin:2rem 0 1rem; -webkit-overflow-scrolling:touch;
	border:1px solid var(--n200); border-radius:var(--r);
	max-width:100%   /* the table inside is min-width:36rem and must scroll, not push */
}
.awm-capacity-table{width:100%; border-collapse:collapse; min-width:36rem; font-size:.9375rem}
.awm-capacity-table caption{caption-side:bottom; text-align:left; font-size:.8125rem; color:var(--n600); padding:.875rem 1rem}
.awm-capacity-table th,.awm-capacity-table td{padding:.8125rem 1rem; text-align:left; border-bottom:1px solid var(--n200)}
/* ⚠ !important is deliberate on colour/background/weight below. Enfold styles
   tables from #top-scoped selectors that outrank anything class-based: it
   zebra-stripes tbody rows and greys their text (measured 2026-08-02 — the 200T
   and 400T rows rendered light grey, Jay flagged it). Pin every row to the same
   dark ink and kill the striping. */
.awm-clean .awm-capacity-table thead th{
	background:var(--n50) !important; font-size:.75rem; font-weight:700 !important;
	letter-spacing:.06em; text-transform:uppercase; color:var(--ink) !important
}
.awm-clean .awm-capacity-table tbody tr,
.awm-clean .awm-capacity-table tbody tr:nth-child(even),
.awm-clean .awm-capacity-table tbody tr:nth-child(odd){background:transparent !important}
.awm-clean .awm-capacity-table td{color:var(--ink) !important}
.awm-clean .awm-capacity-table tbody th{font-weight:700 !important; color:var(--red) !important; background:transparent !important}
.awm-capacity-table tbody tr:last-child td,.awm-capacity-table tbody tr:last-child th{border-bottom:0}

/* Authority --------------------------------------------------------------- */
/* ⚠ Scoped with .awm-clean deliberately. `.awm-clean section` is specificity
   0-1-1; a bare `.awm-authority` is 0-1-0, so the generic section rule won the
   `padding` shorthand and both boxed sections rendered with ZERO horizontal
   padding — text flush to the black edges on mobile. Keep the parent scope. */
.awm-clean .awm-authority{
	background:var(--ink); color:#fff; border-radius:var(--r); border-bottom:0;
	padding:clamp(2.25rem,1.6rem + 3vw,3.5rem) clamp(1.5rem,1rem + 2vw,3rem)
}
.awm-clean .awm-authority h2{color:#fff; max-width:24ch}
.awm-clean .awm-authority p{color:#d4d4d4}

/* Six inputs -------------------------------------------------------------- */
.awm-inputs-grid{
	display:grid; gap:1.75rem 2rem; margin-top:2rem;
	grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr))
}
.awm-inputs-grid h3{color:var(--ink); margin-bottom:.4rem; text-transform:none; font-size:1rem; letter-spacing:-.01em}
.awm-inputs-grid p{font-size:.9375rem; color:var(--n600); margin:0}

/* Lead capture ------------------------------------------------------------ */
.awm-clean .awm-capture{   /* .awm-clean scope required — see Authority note */
	background:var(--n50); border:1px solid var(--n200); border-radius:var(--r);
	padding:clamp(2rem,1.5rem + 2.5vw,3rem) clamp(1.5rem,1rem + 2vw,2.5rem)
}
.awm-clean .awm-capture h2{max-width:22ch}

/* Service-cluster link lists (services index) — chip-style links, wrap in rows. */
.awm-clean .awm-svc-links{
	list-style:none; margin:1.5rem 0 0; padding:0;
	display:flex; flex-wrap:wrap; gap:.5rem
}
.awm-clean .awm-svc-links a,
.awm-clean .awm-svc-links span{
	display:inline-block; padding:.5rem .875rem;
	border:1px solid var(--n200); border-radius:var(--r);
	font-size:.9375rem; font-weight:600; text-decoration:none; color:var(--ink);
	transition:border-color .15s ease, color .15s ease
}
.awm-clean .awm-svc-links a:hover{border-color:var(--red); color:var(--red)}

/* Machine PDF cover mosaic — every tile is page 1 of the actual spec sheet,
   rendered to webp, linking to its machine-pdf post. Jay 2026-08-03: "Can this
   be made of a mosaic of all PDF cover pages?" Uniform portrait tiles; the two
   landscape covers crop top-anchored so their title blocks stay visible. */
.awm-clean .awm-pdf-hub h1{
	font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem); letter-spacing:-.02em;
	line-height:1.1; margin:0 0 .75rem; text-wrap:balance
}
.awm-clean .awm-pdf-mosaic{
	display:grid; gap:1.25rem 1rem; margin-top:2rem;
	grid-template-columns:repeat(auto-fill,minmax(min(170px,45%),1fr))
}
.awm-clean .awm-pdf-mosaic a{display:block; text-decoration:none; color:var(--ink)}
.awm-clean .awm-pdf-mosaic figure{margin:0}
.awm-clean .awm-pdf-mosaic img{
	display:block; width:100%; aspect-ratio:480/622; object-fit:cover; object-position:top;
	border:1px solid var(--n200); border-radius:var(--r); background:#fff;
	transition:border-color .15s ease, transform .15s ease
}
.awm-clean .awm-pdf-mosaic a:hover img{border-color:var(--red); transform:translateY(-2px)}
.awm-clean .awm-pdf-mosaic figcaption{
	margin-top:.5rem; font-size:.875rem; font-weight:600; line-height:1.4; color:var(--ink)
}

/* FAQ --------------------------------------------------------------------- */
.awm-faq details{border-bottom:1px solid var(--n200); padding:1.125rem 0}
.awm-faq details:last-of-type{border-bottom:0}
.awm-faq summary{
	cursor:pointer; font-weight:600; font-size:1.0625rem; list-style:none;
	display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem
}
.awm-faq summary::-webkit-details-marker{display:none}
.awm-faq summary::after{
	content:"+"; flex:0 0 auto; color:var(--red); font-weight:400;
	font-size:1.5rem; line-height:1; transition:transform .15s ease
}
.awm-faq details[open] summary::after{content:"−"}
.awm-faq details p{margin:.875rem 0 0; color:var(--n600); max-width:68ch}

@media (max-width:640px){
	.awm-clean{font-size:1rem}
	.awm-cta-row .awm-btn{width:100%}

	/* Boxed sections carry their own padding on top of the page gutter, which
	   doubles up on a phone and squeezes the text column. */
	.awm-clean .awm-authority,.awm-clean .awm-capture{padding-left:1.25rem; padding-right:1.25rem}
	.awm-compare-col{padding:1.375rem 1.25rem}
	.awm-steps{gap:1.25rem}
	.awm-inputs-grid{gap:1.5rem}
	.awm-faq summary{gap:1rem; font-size:1rem}
}