/* aqsashahzad.com — v3 sections. Generated from _redesign/v3/styles.css by live/build-live.js; edit the prototype, not this file.
   Everything is inside @scope (.aso-v3): nothing here reaches the header, footer or the untouched sections. */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes lift { from { transform: translateY(2.5rem); } to { transform: none; } }
@keyframes lift-2 { from { transform: translateY(4.5rem); } to { transform: none; } }
@keyframes lift-3 { from { transform: translateY(6.5rem); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes track { to { transform: translateX(calc(-100% - 3.5rem)); } }
@keyframes drift { from { translate: 0 3rem; } to { translate: 0 -3rem; } }
@scope (.aso-v3) {
/* aqsashahzad.com — redesign v3 (localhost prototype, 2026-09-19)
   The site's own language, executed properly: black ground, #FF7700 for action, the cream #FFE0C8 phrase once in the H1,
   the floating pill header, pill buttons with the ↗, glass cards. What changed is discipline: one glow, one card recipe,
   one accent phrase, no chip decoration, no buttons inside cards, real spacing, real hierarchy, motion in three places. */

:scope {
  --black: #000000;
  --white: #ffffff;
  --or: #ff7700;              /* action: 7.9:1 as black-on-orange, 5.4:1 as orange text on black */
  --or-soft: #ff8f2e;
  --peach: #ffe0c8;           /* the one accent phrase */
  --grey: #a1a1a1;            /* secondary on black — 7.3:1 */
  --grey-2: #8a8a85;          /* meta on black — 5.1:1 */
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.06);
  --edge: rgba(255, 255, 255, 0.09);
  --edge-2: rgba(255, 255, 255, 0.16);
  --ink: #000000;
  --ink-2: #5c5c57;
  --line: #dad9d4;
  --paper: #ffffff;

  --font-display: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem);
  --text-display: clamp(2.625rem, 1.4rem + 5vw, 5.25rem);
  --text-figure: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);

  --wrap: 78rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.25rem);
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --pill: 999px;
  --card: 20px;
  --dur: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }


::selection { background: var(--or); color: var(--black); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: var(--text-display); font-weight: 500; }
h2 { font-size: var(--text-3xl); font-weight: 500; }
h3 { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 100; background: var(--or); color: var(--black); padding: 0.5rem 0.75rem; border-radius: 6px; }
.skip:focus { top: 1rem; }
.peach { color: var(--peach); font-style: normal; }
.i { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kicker { font-size: var(--text-sm); color: var(--grey); font-weight: 500; }
.sub { color: var(--grey); font-size: var(--text-lg); max-width: 56ch; }
.sub a { color: var(--white); border-bottom: 1px solid var(--edge-2); }

/* ---------- pill buttons (the site's own) ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.5rem; border-radius: var(--pill); font: 500 var(--text-base) / 1 var(--font-body); border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pill .i { width: 0.9em; height: 0.9em; transition: transform var(--dur) var(--ease); }
.pill:hover .i { transform: translate(2px, -2px); }
.pill-white { background: var(--white); color: var(--black); }
.pill-white:hover { background: #f1f1ef; }
.pill-or { background: var(--or); color: var(--black); }
.pill-or:hover { background: var(--or-soft); }
.pill-ghost { background: transparent; color: var(--white); border-color: var(--edge-2); }
.pill-ghost:hover { border-color: var(--white); background: var(--glass); }
.pill-black { background: var(--black); color: var(--white); }
.pill-black:hover { background: #222; }
.pill-sm { min-height: 2.75rem; padding-inline: 1.2rem; font-size: var(--text-sm); }
.textlink { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; color: var(--white); padding-block: 0.4rem; border-bottom: 1px solid var(--edge-2); transition: border-color var(--dur) var(--ease); }
.textlink:hover { border-color: var(--white); }
.textlink .i { width: 0.9em; height: 0.9em; }

/* ---------- hero (centred, one glow) ---------- */
.hero { position: relative; padding-block: clamp(5.5rem, 4rem + 6vw, 9rem) 0; text-align: center; overflow: clip; margin-top: -5.2rem; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(ellipse 60% 55% at 50% 30%, rgba(255, 119, 0, 0.16), transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; }
.hero h1 { max-width: 20ch; margin: 1rem auto 0; }
.hero .sub { margin: 1.5rem auto 0; }
.hero .kicker { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.6rem; max-width: 40rem; }
.hero .kicker img { height: 1.5rem; width: auto; }

/* the machine, as the site's chooser bar */
.machine { max-width: 60rem; margin: 2.5rem auto 0; text-align: left; }
.m-form { display: grid; gap: 0.6rem; }
.m-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; padding: 0.4rem; border-radius: var(--pill); background: var(--glass-2); border: 1px solid var(--edge); transition: border-color var(--dur) var(--ease); }
.m-row:focus-within { border-color: var(--edge-2); }
.m-url { display: flex; align-items: center; min-height: 3.25rem; padding-left: 1.1rem; }
.m-scheme { color: var(--grey-2); font-size: var(--text-sm); padding-right: 0.3rem; }
.m-url input { flex: 1; min-width: 0; min-height: 3.25rem; border: 0; background: transparent; font: 500 var(--text-lg) var(--font-body); color: var(--white); }
.m-url input:focus { outline: none; }
.m-url input::placeholder { color: #6f6f6a; font-weight: 400; }
.m-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; background: var(--glass); }
.m-tab { position: relative; cursor: pointer; }
.m-tab input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m-tab span { display: grid; gap: 0.15rem; padding: 0.9rem 1rem; min-height: 100%; border-left: 1px solid var(--edge); text-align: center; transition: background-color var(--dur) var(--ease); }
.m-tab:first-child span { border-left: 0; }
.m-tab strong { font-weight: 600; font-size: var(--text-sm); }
.m-tab small { font-size: var(--text-xs); color: var(--grey); line-height: 1.35; }
.m-tab:hover span { background: var(--glass); }
.m-tab input:checked + span { background: var(--glass-2); box-shadow: inset 0 -2px 0 var(--or); }
.m-tab input:focus-visible + span { outline: 2px solid var(--or); outline-offset: -2px; }
.m-form .hp { position: absolute; left: -9999px; }
.m-fine { text-align: center; color: var(--grey-2); font-size: var(--text-xs); }
.m-error { text-align: center; color: #ff8a8a; font-weight: 500; font-size: var(--text-sm); }
.m-run[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
/* result panel */
.m-result { margin-top: 1rem; padding: 1.25rem 1.5rem 1.5rem; border-radius: var(--card); background: var(--glass); border: 1px solid var(--edge); }
.m-score { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.m-num { font-family: var(--font-display); font-size: var(--text-figure); font-weight: 700; font-stretch: 80%; letter-spacing: -0.03em; line-height: 1; }
.m-of { color: var(--grey); font-size: var(--text-lg); }
.m-band { margin-left: auto; padding: 0.35rem 0.8rem; border-radius: var(--pill); font-weight: 600; font-size: var(--text-sm); border: 1px solid currentColor; }
.band-light { color: #7ddc9a; } .band-mid { color: var(--or); } .band-heavy { color: #ff8a8a; }
.m-host { margin-top: 0.5rem; color: var(--grey); font-size: var(--text-sm); }
.m-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--edge); }
.m-counts dd { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1; }
.m-counts dt { color: var(--grey); font-size: var(--text-xs); margin-top: 0.25rem; }
.m-apps { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
.m-apps li { padding: 0.25rem 0.6rem; border: 1px solid var(--edge); border-radius: var(--pill); font-size: var(--text-xs); color: var(--grey); }
.m-fixes { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--edge); display: grid; gap: 0.4rem; counter-reset: fix; font-size: var(--text-sm); }
.m-fixes li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.4rem; counter-increment: fix; }
.m-fixes li::before { content: counter(fix); color: var(--or); font-weight: 600; }
.m-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--edge); }
.m-cta .btn { display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0 1.3rem; border-radius: var(--pill); background: var(--or); color: var(--black); font-weight: 600; }
.m-cta .more { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; border-bottom: 1px solid var(--edge-2); padding-block: 0.3rem; }
.m-cta .more .i { width: 0.9em; height: 0.9em; }
.m-again { background: none; border: 0; color: var(--grey); font: 500 var(--text-sm) var(--font-body); cursor: pointer; padding: 0.5rem 0; margin-left: auto; text-decoration: underline; text-underline-offset: 0.18em; }
.m-wait { display: grid; gap: 0.6rem; color: var(--grey); font-size: var(--text-sm); }
.m-wait .bar { height: 3px; background: var(--edge); overflow: hidden; border-radius: 2px; }
.m-wait .bar i { display: block; height: 100%; width: 40%; background: var(--or); animation: slide 1.1s var(--ease) infinite; }

.see { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 2rem; color: var(--grey); font-size: var(--text-sm); font-weight: 500; }
.see .i { width: 0.9em; height: 0.9em; }

/* gallery: five storefronts under the hero, lifting as you scroll */
.gallery { margin-top: 3rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: end; }
.gallery li { border-radius: var(--card); overflow: clip; aspect-ratio: 4 / 5; background: #111; border: 1px solid var(--edge); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery li:nth-child(2), .gallery li:nth-child(4) { margin-bottom: 2.5rem; }
.gallery li:nth-child(3) { margin-bottom: 4.5rem; }
@supports (animation-timeline: view()) {
  :scope.anim .gallery li { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  :scope.anim .gallery li:nth-child(2), :scope.anim .gallery li:nth-child(4) { animation-name: lift-2; }
  :scope.anim .gallery li:nth-child(3) { animation-name: lift-3; }
}




/* ---------- the white section (rounded top, like a sheet laid on the black) ---------- */
.about { margin-top: -1.5rem; background: var(--paper); color: var(--ink); border-radius: 28px 28px 0 0; padding-block: var(--section); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem 5rem; align-items: start; }
.about h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); max-width: 16ch; }
.about .kicker { color: var(--ink-2); }
.about .about-copy { color: var(--ink-2); font-size: var(--text-lg); display: grid; gap: 1.25rem; justify-items: start; padding-top: 0.5rem; }
.about .about-copy strong { color: var(--ink); font-weight: 600; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.figures dd { font-family: var(--font-display); font-size: var(--text-figure); font-weight: 600; font-stretch: 85%; letter-spacing: -0.03em; line-height: 1; }
.figures dt { margin-top: 0.5rem; color: var(--ink-2); font-size: var(--text-sm); }

/* ---------- logos ---------- */
.logos { padding-block: 3rem 0; }
.logos p { color: var(--grey-2); font-size: var(--text-xs); letter-spacing: 0.02em; }
.logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 3rem; margin-top: 1.25rem; padding-bottom: 3rem; border-bottom: 1px solid var(--edge); }
.logos img { height: 1.7rem; width: auto; max-width: 8rem; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.75; }

/* ---------- section head ---------- */
.sec { padding-block: var(--section); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: 2.5rem; }
.sec-head h2 { max-width: 18ch; }
.sec-aside { display: grid; gap: 1rem; justify-items: start; color: var(--grey); font-size: var(--text-lg); max-width: 44ch; }
.sec-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.sec-head.center h2 { max-width: 22ch; }

/* ---------- services bento (one card recipe, no buttons) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.card { position: relative; display: grid; align-content: start; gap: 0.6rem; padding: 1.6rem 1.6rem 1.75rem; border-radius: var(--card); background: var(--glass); border: 1px solid var(--edge); color: var(--white); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 500ms var(--ease-expo), opacity 500ms var(--ease); }
a.card:hover { border-color: var(--edge-2); background: var(--glass-2); }
.card .grp { font-size: var(--text-xs); color: var(--grey-2); font-weight: 500; }
.card h3 { font-size: var(--text-xl); margin-top: 0.15rem; }
.card p { color: var(--grey); font-size: var(--text-sm); max-width: 38ch; }
.card .arrow { position: absolute; top: 1.25rem; right: 1.25rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge); color: var(--grey); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card .arrow .i { width: 0.9rem; height: 0.9rem; }
a.card:hover .arrow { color: var(--white); border-color: var(--edge-2); transform: translate(2px, -2px); }
.card .mini { margin-top: 0.75rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--edge); }
.span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; } .span-3 { grid-column: span 3; } .span-8 { grid-column: span 8; }
.card.feat { padding: 2rem; gap: 0.75rem; }
.card.feat h3 { font-size: var(--text-2xl); }
.card.feat p { font-size: var(--text-base); max-width: 46ch; }
.card.feat .textlink { margin-top: 0.75rem; justify-self: start; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { padding: 0.3rem 0.7rem; border-radius: var(--pill); background: var(--glass-2); border: 1px solid var(--edge); font-size: var(--text-xs); color: #d6d6d2; }
.chips li.on { background: var(--or); color: var(--black); border-color: var(--or); font-weight: 600; }
.ring { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.9rem; align-items: center; }
.ring svg { width: 3.25rem; height: 3.25rem; }
.ring b { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; display: block; }
.ring span { font-size: var(--text-xs); color: var(--grey); }
.code { font: 0.8rem / 1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #d6d6d2; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.code i { font-style: normal; color: var(--or); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: var(--text-xs); }
.flow li { padding: 0.25rem 0.6rem; border-radius: var(--pill); background: var(--glass-2); color: #d6d6d2; }
.flow li.on { background: var(--peach); color: var(--black); font-weight: 600; }
.flow .i { color: var(--grey-2); width: 0.8rem; height: 0.8rem; }
.slot { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); }
.slot span { color: var(--grey); }
.slot b { color: var(--or); font-weight: 600; }

/* ---------- work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.proj { display: grid; gap: 1rem; color: var(--white); }
.proj .img { border-radius: var(--card); overflow: clip; aspect-ratio: 4 / 5; background: #111; border: 1px solid var(--edge); }
.proj img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-expo); }
.proj:hover img { transform: scale(1.03); }
.proj-meta { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.9rem; align-items: center; }
.proj-meta .logo { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--edge); }
.proj-meta .logo img { max-width: 2.4rem; max-height: 1.6rem; width: auto; height: auto; filter: grayscale(1) brightness(0) invert(1); }
.proj-meta strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.01em; }
.proj-meta span { color: var(--grey); font-size: var(--text-sm); }
.work-cta { text-align: center; margin-top: 3rem; }
.quote-wide { margin-top: 4rem; padding: 2rem 2.25rem; border-radius: var(--card); background: var(--glass); border: 1px solid var(--edge); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
.quote-wide p { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; max-width: 56ch; line-height: 1.35; }
.quote-wide cite { display: block; margin-top: 0.75rem; font-style: normal; color: var(--grey); font-size: var(--text-sm); }
.quote-wide cite strong { color: var(--white); font-weight: 600; }
.rating { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; color: var(--grey); font-size: var(--text-sm); font-weight: 500; }
.rating img { height: 1.4rem; width: auto; }

/* ---------- process ---------- */
.proc { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; padding-top: 2.25rem; }
.proc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--edge); }
.proc .line { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--or); transform-origin: left; transform: scaleX(0); transition: transform 1400ms var(--ease-expo); }
.proc.in .line, html:not(.anim) .proc .line { transform: none; }
.proc li { position: relative; display: grid; gap: 0.5rem; }
.proc li::before { content: ""; position: absolute; top: -2.25rem; left: 0; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px rgba(255, 119, 0, 0.18); }
.proc .n { font-family: var(--font-display); font-size: var(--text-sm); color: var(--grey-2); font-weight: 500; }
.proc h3 { font-size: var(--text-lg); }
.proc p { color: var(--grey); font-size: var(--text-sm); }
.proc .wk { color: var(--white); font-size: var(--text-xs); font-weight: 500; }

/* ---------- why: reasons + one quote ---------- */
.why-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem 5rem; align-items: start; }
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 2rem; }
.reasons li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; }
.reasons .tick { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--or); color: var(--or); margin-top: 0.1rem; }
.reasons .tick .i { width: 0.8rem; height: 0.8rem; }
.reasons strong { display: block; font-weight: 600; }
.reasons p { color: var(--grey); font-size: var(--text-sm); margin-top: 0.15rem; }
.why-card { padding: 2rem; border-radius: var(--card); background: var(--glass); border: 1px solid var(--edge); display: grid; gap: 1.25rem; }
.why-card blockquote p { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
.why-card cite { display: block; margin-top: 0.75rem; font-style: normal; color: var(--grey); font-size: var(--text-sm); }
.why-card cite strong { color: var(--white); }
.why-card hr { border: 0; border-top: 1px solid var(--edge); margin: 0; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--edge); max-width: 54rem; margin-inline: auto; }
.faq-list details { border-bottom: 1px solid var(--edge); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.2rem 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 0.9rem; height: 0.9rem; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--dur) var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 1.4rem; max-width: 64ch; color: var(--grey); }

/* ---------- book ---------- */
.book { position: relative; overflow: clip; }
.book::before { content: ""; position: absolute; inset: auto -10% -30%; height: 70%; background: radial-gradient(ellipse 55% 50% at 50% 100%, rgba(255, 119, 0, 0.14), transparent 70%); pointer-events: none; }
.book .wrap { position: relative; }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 5rem; align-items: start; }
.book-copy .sub { margin-top: 1.25rem; }
.book-copy .contact { display: grid; gap: 0.25rem; margin-top: 2rem; }
.book-copy .contact a { color: var(--white); font-weight: 500; padding-block: 0.3rem; }
.book-copy .contact a:hover { color: var(--or); }
.promise { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--edge); }
.promise dd { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.promise dt { margin-top: 0.35rem; color: var(--grey); font-size: var(--text-sm); }
.book-form { display: grid; gap: 1rem; padding: 1.75rem; border-radius: var(--card); background: var(--glass); border: 1px solid var(--edge); }
.book-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.book-form label { display: grid; gap: 0.4rem; font-weight: 500; font-size: var(--text-sm); }
.book-form input, .book-form select, .book-form textarea { width: 100%; min-height: 3.1rem; padding: 0.7rem 1rem; font: 400 var(--text-base) / 1.4 var(--font-body); color: var(--white); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--edge-2); border-radius: 12px; transition: border-color var(--dur) var(--ease); }
.book-form textarea { min-height: 6rem; resize: vertical; }
.book-form input::placeholder, .book-form textarea::placeholder { color: #6f6f6a; }
.book-form select { appearance: none; background: rgba(0, 0, 0, 0.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.85rem center / 1.1rem no-repeat; }
.book-form select option { color: var(--ink); }
.book-form input:hover, .book-form select:hover, .book-form textarea:hover { border-color: #8a8a85; }
.book-form input:focus-visible, .book-form select:focus-visible, .book-form textarea:focus-visible { border-color: var(--or); outline: none; }
.book-form input[aria-invalid="true"] { border-color: #ff5a5a; }
.book-form .pill { justify-self: stretch; }
.fine { color: var(--grey-2); font-size: var(--text-xs); }
.form-error { color: #ff8a8a; font-size: var(--text-sm); }
.form-done { color: var(--white); font-weight: 500; }
.book-form.is-done label, .book-form.is-done .two, .book-form.is-done .pill, .book-form.is-done .fine { display: none; }

/* ---------- reveal: only cards and project tiles, once, staggered; visible without JS ---------- */
:scope.anim .rv { opacity: 0; transform: translateY(14px); }
:scope.anim .rv.in { opacity: 1; transform: none; }
:scope.anim .rv { transition: opacity 600ms var(--ease), transform 700ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 70ms); }
/* hero entrance, once, CSS only */
:scope.anim .rise { animation: rise 800ms var(--ease-expo) both; animation-delay: calc(var(--r, 0) * 90ms); }


/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav { gap: 1.2rem; }
  .bento .span-3 { grid-column: span 6; }
  .bento .span-4 { grid-column: span 6; }
  .figures dd { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); }
}
@media (max-width: 960px) {
  .about-grid, .why-grid, .book-grid, .sec-head { grid-template-columns: 1fr; }
  .sec-head { align-items: start; }
  .reasons { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; padding-top: 0; }
  .proc::before, .proc .line { display: none; }
  .proc li { padding-left: 1.5rem; }
  .proc li::before { top: 0.35rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery li:nth-child(n+4) { display: none; }
  .quote-wide { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .nav, .head-cta { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .brand .badge { display: none; }
  .m-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-tab:nth-child(3) span { border-left: 0; }
  .m-tab:nth-child(n+3) span { border-top: 1px solid var(--edge); }
  .m-tab span { text-align: left; }
  .bento .span-6, .bento .span-3, .bento .span-4, .bento .span-8 { grid-column: span 12; }
  .m-counts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: 1fr; }
  .proc { grid-template-columns: 1fr; }
  .hero h1 { max-width: 14ch; }
  .m-row { grid-template-columns: 1fr; padding: 0.5rem; }
  .m-row .m-run { justify-self: stretch; }
  .book-form .two { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom .social { margin-left: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .gallery li:nth-child(n+3) { display: none; }
  .gallery li:nth-child(2) { margin-bottom: 1.5rem; }
  .about { border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- round 2 (2026-09-19): no gallery in the hero; logo track; the stack; closing talk + newsletter ---------- */
.hero { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.hero .see { display: none; }
.about { margin-top: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* logo track: the site's brands, scrolling slowly; static and wrapped under reduced motion */
.track-wrap { margin-bottom: clamp(3rem, 2rem + 4vw, 5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); border-bottom: 1px solid var(--edge); }
.track { margin-top: 1.25rem; overflow: hidden; display: flex; gap: 3.5rem; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.track ul { display: flex; flex: none; align-items: center; gap: 3.5rem; animation: track 42s linear infinite; }
.track:hover ul { animation-play-state: paused; }
.track img { height: 1.7rem; width: auto; max-width: 8rem; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .track { mask-image: none; -webkit-mask-image: none; flex-wrap: wrap; }
  .track ul { animation: none; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
  .track ul[aria-hidden] { display: none; }
}

/* the stack */
.stack-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 5rem; align-items: start; margin-top: 1rem; }
.stack h2 { max-width: 16ch; }
.stack-badges { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; }
.stack-badges img { height: 2.25rem; width: auto; }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.tools li { display: grid; gap: 0.15rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--glass); border: 1px solid var(--edge); }
.tools b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; }
.tools span { font-size: var(--text-xs); color: var(--grey); }

/* closing: four storefronts at the edges, the invitation in the middle */
.talk { position: relative; overflow: clip; padding-block: clamp(8rem, 6rem + 8vw, 14rem); text-align: center; border-top: 1px solid var(--edge); }
.talk-inner { position: relative; display: grid; justify-items: center; gap: 1.25rem; max-width: 52rem; }
.talk h2 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); max-width: 18ch; }
.talk .sub { text-align: center; }
.talk .pill { margin-top: 0.5rem; }
.talk-media { position: absolute; width: clamp(9rem, 16vw, 15rem); aspect-ratio: 4 / 5; border-radius: 16px; overflow: clip; border: 1px solid var(--edge); opacity: 0.55; pointer-events: none; }
.talk-media img { width: 100%; height: 100%; object-fit: cover; }
.talk-media.m1 { left: 4%; top: 8%; transform: rotate(-4deg); }
.talk-media.m2 { right: 6%; top: 4%; transform: rotate(3deg); }
.talk-media.m3 { left: 10%; bottom: 6%; transform: rotate(2deg); }
.talk-media.m4 { right: 3%; bottom: 10%; transform: rotate(-3deg); }
@supports (animation-timeline: view()) {
  :scope.anim .talk-media { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}


/* newsletter, Observatory style */
.news { position: relative; overflow: clip; padding-block: clamp(4rem, 3rem + 4vw, 7rem); border-top: 1px solid var(--edge); }
.news::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 70% at 85% 50%, rgba(255, 119, 0, 0.12), transparent 70%); pointer-events: none; }
.news-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.5rem 5rem; align-items: center; }
.news-kicker { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--or); }
.news h2 { margin-top: 0.9rem; max-width: 14ch; }
.news .sub { margin-top: 1rem; }
.news-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--edge); }
.news-stats dd { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.news-stats dt { margin-top: 0.35rem; color: var(--grey-2); font-size: var(--text-xs); }
.news-card { display: grid; gap: 0.9rem; padding: 1.75rem; border-radius: var(--card); background: var(--glass); border: 1px solid var(--edge); }
.news-label { font-size: var(--text-xs); color: var(--grey); font-weight: 500; }
.news-card input { width: 100%; min-height: 3.25rem; padding: 0 1.1rem; font: 400 var(--text-base) var(--font-body); color: var(--white); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--edge-2); border-radius: 12px; }
.news-card input::placeholder { color: #6f6f6a; }
.news-card input:focus-visible { border-color: var(--or); outline: none; }
.news-card input[aria-invalid="true"] { border-color: #ff5a5a; }
.news-card .pill { justify-self: stretch; }
.news-card .fine a { color: var(--grey); text-decoration: underline; text-underline-offset: 0.18em; }
.news-card.is-done input, .news-card.is-done .pill, .news-card.is-done .fine, .news-card.is-done .news-label { display: none; }
.site-foot { border-top: 1px solid var(--edge); }

@media (max-width: 960px) {
  .stack-grid, .news-inner { grid-template-columns: 1fr; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talk-media { opacity: 0.35; width: 8rem; }
}
@media (max-width: 640px) {
  .talk-media { display: none; }
  .talk { padding-block: var(--section); }
  .news-stats { gap: 1.5rem; }
}

/* ---------- the live review carousel (container fe8b2e0 / widget 2aac465), verbatim apart from the fluid h2 ---------- */
/* ============ 2 · TESTIMONIALS — Charle pattern ============ */
    .s-quotes {
        text-align: center;
    }

    .s-quotes h2 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); margin-bottom: 26px; letter-spacing: -0.03em; }
    .s-quotes h2 span { color: var(--or); }
    @media (max-width: 768px){
        .s-quotes h2{
            font-size: 32px !important;
        }
    }
    .hear {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        background: #17181B;
        border-radius: 999px;
        padding: 10px 22px 10px 10px;
        color: #fff;
        margin-bottom: 18px;
        transition: background .3s
    }

    .hear:hover {
        background: #202226;
    }

    .hear .av {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(140deg, #ff8f2e, var(--or));
        flex-shrink: 0;
        display: grid;
        place-items: center;
        font-family: var(--disp);
        font-weight: 600;
        font-size: 16px;
        color: #000
    }

    .hear .tx {
        text-align: left;
        font-size: 14px;
        line-height: 1.25;
        font-weight: 500
    }

    .hear .ar {
        font-size: 14px;
        color: rgba(255, 255, 255, .7);
        transition: transform .3s
    }

    .hear:hover .ar {
        transform: translate(3px, -3px)
    }

    .s-quotes .sub {
        font-size: 14.5px;
        color: var(--grey);
        margin-bottom: 40px
    }

    .qrow {
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: center
    }

    .qmark {
        font-family: var(--disp);
        font-size: clamp(56px, 9vw, 120px);
        font-weight: 600;
        line-height: .7;
        color: #fff;
        opacity: .9;
        flex-shrink: 0;
        align-self: flex-start
    }

    .qmark.close {
        align-self: flex-end;
        opacity: .9
    }

    @media(max-width:860px) {
        .qmark {
            display: none
        }
    }

    .qtrack {
        flex: 1;
        max-width: 1000px;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 20px
    }

    .qtrack::-webkit-scrollbar {
        display: none
    }

    .qcard {
        scroll-snap-align: center;
        flex: 0 0 100%;
        background: #17181B;
        border-radius: 20px;
        padding: 52px 48px 40px
    }

    @media(max-width:640px) {
        .qcard {
            padding: 34px 24px 28px
        }
    }

    .qcard blockquote {
        font-family: var(--disp);
        font-weight: 400;
        font-size: clamp(20px, 2.6vw, 34px);
        line-height: 1.32;
        letter-spacing: -.015em;
        margin-bottom: 26px
    }

    .qcard .who {
        font-family: var(--disp);
        font-size: 15px;
        font-weight: 500
    }

    .qcard .role {
        font-size: 13px;
        color: var(--grey);
        margin-top: 2px
    }

    .qnav {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 34px
    }

    .qnav button {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: #000;
        font-size: 17px;
        cursor: pointer;
        transition: all .3s;
        display: grid;
        place-items: center
    }

    .qnav button:hover {
        background: var(--or);
        color: #000
    }

    .qdots {
        display: flex;
        gap: 7px;
        justify-content: center;
        margin-top: 20px
    }

    .qdots i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .25);
        transition: all .3s
    }

    .qdots i.on {
        background: var(--or);
        width: 22px;
        border-radius: 99px
    }



    

.reviews .wrap { position: relative; }
.reasons.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .reasons.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reasons.cols-3 { grid-template-columns: 1fr; } }

/* ---------- round 3 (2026-09-19): more air, calmer figures ---------- */
:scope { --section: clamp(6rem, 4rem + 8vw, 11rem); --text-3xl: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem); --text-display: clamp(2.75rem, 1.4rem + 5.6vw, 5.75rem); }
.hero { padding-top: clamp(6.5rem, 5rem + 7vw, 11rem); }
.hero .sub { margin-top: 2rem; font-size: var(--text-xl); max-width: 58ch; }
.machine { margin-top: 3.25rem; }
.sec-head { margin-bottom: 3.5rem; gap: 2rem 5rem; }
.sec-aside { font-size: var(--text-xl); }
.about { padding-block: clamp(6rem, 4rem + 8vw, 11rem); }
.about h2 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem); }
.about .about-copy { font-size: var(--text-xl); gap: 1.75rem; }
.figures { margin-top: 4.5rem; padding-top: 2.5rem; gap: 2rem 3rem; }
.figures dd { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4.2vw, 5.5rem); font-weight: 400; font-stretch: 100%; letter-spacing: -0.045em; line-height: 0.95; }
.figures dt { margin-top: 1rem; font-size: var(--text-base); color: var(--ink-2); max-width: 18ch; line-height: 1.45; }
.bento { gap: 1.25rem; }
.card { padding: 2rem 2rem 2.25rem; gap: 0.75rem; }
.card.feat { padding: 2.5rem; }
.card h3 { font-size: var(--text-2xl); }
.card p { font-size: var(--text-base); max-width: 40ch; }
.work-grid { gap: 2rem 1.75rem; }
.proj { gap: 1.25rem; }
.proc { margin-top: 4.5rem; gap: 2.5rem; }
.proc h3 { font-size: var(--text-xl); }
.proc p { font-size: var(--text-base); }
.reasons { gap: 2.25rem 3rem; margin-top: 0; }
.reasons strong { font-size: var(--text-lg); }
.reasons p { font-size: var(--text-base); }
.faq-list summary { padding: 1.5rem 0; font-size: var(--text-xl); }
.faq-list details p { padding-bottom: 1.75rem; font-size: var(--text-lg); }
.tools li { padding: 1.4rem 1.5rem; }
.tools b { font-size: var(--text-xl); }
.book-form { padding: 2.25rem; gap: 1.25rem; }
.news-card { padding: 2.25rem; }
.s-quotes { padding-block: 1rem; }
@media (max-width: 640px) {
  .figures { gap: 2rem 1.5rem; }
  .figures dd { font-size: clamp(2.5rem, 2rem + 3vw, 3.25rem); }
  .card, .card.feat { padding: 1.5rem; }
}

/* ---------- round 4 (2026-09-19): white sheets for Work, Why and FAQ so the page breathes black / white / black ---------- */
.light {
  --white: #000000; --grey: #5c5c57; --grey-2: #6b6b66; --edge: #e6e5e1; --edge-2: #cfcec9; --glass: #f6f6f4; --glass-2: #ededea; --or-ink: #b54f00;
  background: #ffffff; color: #000; border-radius: 28px;
}
.light .pill-white { background: #000; color: #fff; }
.light .pill-white:hover { background: #222; }
.light .proj-meta .logo img { filter: grayscale(1) brightness(0); }
.light .proj .img, .light .proj-meta .logo { background: #f6f6f4; }
.light .reasons .tick { border-color: var(--or-ink); color: var(--or-ink); }
.light .faq-list { border-top-color: #000; }
.light .faq-list details { border-bottom-color: var(--edge); }
.light .faq-list summary::after { color: #000; }
.light .sec-aside .textlink { color: #000; border-bottom-color: #cfcec9; }
.light .sec-aside .textlink:hover { border-bottom-color: #000; }
.about { border-radius: 28px; }
@media (max-width: 640px) { .light, .about { border-radius: 20px; } }

/* ---------- services cards, second pass (2026-09-19): one illustration system, no widgets, lighter titles ---------- */
.card { display: grid; grid-template-rows: auto 1fr; gap: 1.5rem; padding: 2rem 2rem 1.75rem; background: rgba(255, 255, 255, 0.028); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; color: var(--white); }
.card .card-body { display: grid; gap: 0.6rem; align-content: start; }
.card .grp { font-size: var(--text-xs); color: var(--grey-2); font-weight: 500; letter-spacing: 0.01em; }
.card h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
.card p { font-size: var(--text-sm); color: var(--grey); max-width: 34ch; line-height: 1.55; }
.card .arrow, .card .mini { display: none; }
.card .viz { width: 100%; height: auto; align-self: end; color: #d6d6d2; opacity: 0.9; border-radius: 10px; transition: transform 700ms var(--ease-expo), opacity var(--dur) var(--ease); }
a.card:hover { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.16); }
a.card:hover .viz { transform: translateY(-3px); opacity: 1; }
.card.feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: none; align-items: center; gap: 2rem 2.5rem; padding: 2.5rem; }
.card.feat h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); }
.card.feat p { font-size: var(--text-base); max-width: 40ch; }
.card.feat .viz { align-self: center; }
@media (max-width: 820px) { .card.feat { grid-template-columns: 1fr; } .card, .card.feat { padding: 1.5rem; gap: 1.25rem; } }
.card.feat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }
.card.feat .viz { align-self: end; max-width: 34rem; }
.card.feat .card-body { max-width: 44ch; }
.card.feat .viz { max-width: 27rem; }
.card .incl { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.5rem; font-size: var(--text-sm); color: var(--grey); }
.card .incl li { position: relative; padding-left: 0.9rem; }
.card .incl li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--or); }


/* ===== round 5 (2026-09-19): codieshub's structure on the owner's brand — numbered rows, hairlines, tabbed process, two-column reasons ===== */
.eyebrow { display: flex; align-items: center; gap: 0.6rem; margin: 0; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2); }
.eyebrow::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; background: var(--or); }
.ch-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.5rem 4rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid var(--edge); margin: 0; }
.ch-head-l { display: grid; gap: 1.1rem; }
.ch-head h2 { font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.375rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 17ch; margin: 0; }
.ch-aside { display: grid; gap: 1.25rem; justify-items: end; justify-self: end; text-align: right; color: var(--grey); font-size: var(--text-lg); max-width: 40ch; }
.ch-aside p { margin: 0; }
.num { font: 300 2.75rem / 1 var(--font-display); letter-spacing: -0.04em; color: var(--or-ink, var(--or)); }
.ch-rows { margin: 0; padding: 0; list-style: none; }
.ch-rows > li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start; padding: 2.25rem 0; border-bottom: 1px solid var(--edge); }
.ch-body h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin: 0; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0.65rem 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--grey-2); }
.ch-tags li { position: relative; }
.ch-tags li + li::before { content: ""; position: absolute; left: -0.95rem; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--edge-2); }
.ch-body p { margin: 0.85rem 0 0; color: var(--grey); max-width: 60ch; }
.rowlink { display: inline-flex; align-items: center; gap: 0.45rem; padding-top: 0.85rem; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); white-space: nowrap; min-height: 44px; }
.rowlink .i { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.rowlink:hover .i { transform: translateX(3px); }
.ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5rem; margin: 0; padding: 0; list-style: none; }
.ch-grid > li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--edge); }
.ch-grid h3 { font-weight: 400; font-size: var(--text-xl); letter-spacing: -0.02em; margin: 0; }
.ch-grid p { margin: 0.5rem 0 0; color: var(--grey); }
/* tabbed process: every panel is visible until JS proves it can switch them */
.tablist { display: flex; overflow-x: auto; border-bottom: 1px solid var(--edge); margin-top: 2.5rem; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin: 0 1.5rem -1px 0; padding: 1.1rem 0; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); cursor: pointer; white-space: nowrap; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tablist button i { font-style: normal; font-weight: 500; color: var(--or-ink, var(--or)); }
.tablist button:hover { color: var(--white); }
.tablist button[aria-selected="true"] { color: var(--white); border-bottom-color: var(--white); }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem 5rem; padding-top: 3rem; }
.panel[hidden] { display: none; }
.tabs:not(.tabs-on) .panel + .panel { margin-top: 2rem; border-top: 1px solid var(--edge); }
.panel-copy h3 { font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -0.03em; margin: 1rem 0 0; }
.panel-copy .lede { margin: 1rem 0 0; color: var(--white); font-size: var(--text-lg); }
.panel-copy .lede + p { margin: 1rem 0 0; color: var(--grey); }
.panel-points { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--edge); }
.panel-points li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.4rem 0; border-bottom: 1px solid var(--edge); }
.panel-points .num { font-size: 1.75rem; }
.panel-points p { margin: 0; font-size: var(--text-lg); }
/* sheets that touch: the joined edge is square, the tint tells the two apart */
.light.tint { background: #f6f6f3; --glass: #ececea; --glass-2: #e3e3df; --edge: #dcdcd6; }
.light.join-next { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.light.join-prev { border-top-left-radius: 0; border-top-right-radius: 0; }
.live-keep { display: none; }
/* the client logo track lives under the hero machine now */
.track-wrap.in-hero { margin: clamp(3rem, 2rem + 4vw, 5rem) 0 0; padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; border-bottom: 0; border-top: 1px solid var(--edge); }
.track-wrap.in-hero .kicker { text-align: center; }
/* partner logos, one filter so every mark reads as one family */
.tools.logos { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.tools.logos li { display: grid; place-items: center; gap: 0.7rem; min-height: 6.75rem; padding: 1.4rem 1rem; }
.tools.logos img { height: 1.75rem; width: auto; max-width: 8.5rem; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.85; }
.tools.logos span { color: var(--grey-2); }
/* talk: the media sit on a stage so the same markup works inside an Elementor HTML widget */
.talk { padding-block: 0; }
.talk-stage { position: relative; padding-block: clamp(8rem, 6rem + 8vw, 14rem); }
.talk-stage .talk-inner { margin-inline: auto; }
@media (max-width: 960px) {
  .ch-head { grid-template-columns: 1fr; }
  .ch-aside { justify-items: start; justify-self: start; text-align: left; }
  .ch-rows > li { grid-template-columns: 4rem minmax(0, 1fr); }
  .rowlink { grid-column: 2; padding-top: 0; }
  .ch-grid { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .num { font-size: 2rem; }
  .ch-rows > li { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.75rem 1rem; padding: 1.75rem 0; }
  .ch-grid > li { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; }
  .panel-points li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .panel-points .num { font-size: 1.5rem; }
  .tools.logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talk-stage { padding-block: clamp(5rem, 4rem + 6vw, 8rem); }
}

.about.join-next { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 960px) { .tablist { mask-image: linear-gradient(to right, #000 82%, transparent); -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 3rem; } }
.news-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.news-card { position: relative; }


/* ===== round 6 (2026-09-19): figures as codieshub stat cells, and the recognition list ===== */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.stat { display: block; padding: 2.5rem 1.5rem; border-left: 1px solid var(--line); color: inherit; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat-n { display: block; margin: 0 0 1rem; font: 300 clamp(2.5rem, 1rem + 3.5vw, 4rem) / 0.95 var(--font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat-l { display: block; margin: 0 0 0.35rem; font-weight: 700; font-size: var(--text-sm); letter-spacing: -0.005em; }
.stat-s { display: block; font-size: 0.85rem; color: var(--ink-2); line-height: 1.4; }
.stat-s .i { width: 0.85em; height: 0.85em; vertical-align: -0.1em; margin-left: 0.3rem; transition: transform var(--dur) var(--ease); }
a.stat:hover .stat-s .i { transform: translateX(3px); }
.recog-wrap { margin-top: 4.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.recog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2.5rem; }
.recog-head .eyebrow { color: var(--ink-2); }
.recog-head .count { margin: 0; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; color: var(--or-ink, #b54f00); font-variant-numeric: tabular-nums; }
.recog { columns: 2; column-gap: 3.5rem; column-rule: 1px solid var(--line); margin: 0; }
.recog > div { break-inside: avoid; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 1.25rem; margin-bottom: 2.25rem; }
.recog .tile { width: 2.25rem; height: 2.25rem; margin-top: 0.15rem; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; padding: 3px; }
.recog .tile img { width: 100%; height: 100%; object-fit: contain; }
.recog dt { margin: 0 0 0.6rem; font: 400 var(--text-lg) / 1.1 var(--font-display); letter-spacing: -0.02em; }
.recog dt a { color: inherit; border-bottom: 1px solid var(--line); transition: border-color var(--dur) var(--ease); }
.recog dt a:hover { border-bottom-color: currentColor; }
.recog dd { margin: 0; }
.recog ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.recog li { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 2rem 1.5rem; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(even) { padding-right: 0; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(odd) { border-left: 0; border-bottom: 1px solid var(--line); padding: 1.75rem 0; }
  .stat:last-child { border-bottom: 0; }
  .recog { columns: 1; }
}
.ch-tags a { color: inherit; border-bottom: 1px solid var(--edge-2); }
.ch-tags a:hover { border-bottom-color: currentColor; }
.ch-body p a { color: var(--white); border-bottom: 1px solid var(--edge-2); }
.ch-body p a:hover { border-bottom-color: currentColor; }


/* ===== services page (2026-09-19): the page opener (reused on sub-service and location pages), the owner’s timeline on the white sheet, proof rows ===== */
.opener { position: relative; overflow: clip; padding-block: clamp(7rem, 5rem + 6vw, 11rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.opener::before { content: ""; position: absolute; inset: -30% -10% auto; height: 60%; background: radial-gradient(ellipse 45% 50% at 18% 35%, rgba(255, 119, 0, 0.14), transparent 70%); pointer-events: none; }
.opener-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem 5rem; align-items: end; }
.opener-l { display: grid; gap: 1.25rem; }
.opener h1 { font-weight: 400; font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.75rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 15ch; margin: 0; }
.opener-r { display: grid; gap: 1.5rem; justify-items: start; padding-bottom: 0.4rem; }
.opener-r .sub { margin: 0; }
.opener-ctas { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin: 0; }
.opener-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; margin: 0; font-size: var(--text-sm); color: var(--grey); }
.opener-proof img { height: 2rem; width: auto; display: block; }
.opener-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--edge); }
.opener-index .lbl { flex: none; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2); }
.opener-index .ch-tags { margin: 0; }
.opener-index .ch-tags a { color: var(--white); border-bottom-color: transparent; padding-block: 0.4rem; }
.opener-index .ch-tags a:hover { border-bottom-color: var(--white); }
.stats-dark { --line: var(--edge); }
.stats-dark .stat-s { color: var(--grey); }
.ch-rows.cases { margin-top: 3.5rem; }
/* the owner’s timeline, re-tokened for the white sheet; cards are always visible, only the line and nodes animate */
.aso-timeline { position: relative; margin-top: 3.5rem; padding: 1.25rem 0 0.5rem; }
.aso-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); border-radius: 2px; }
.aso-tlfill { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; height: 0; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 119, 0, 0.35), #ff7700); transition: height 0.18s linear; z-index: 1; }
.aso-tlfill::after { content: ""; position: absolute; bottom: -5px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #ff7700; }
.aso-fitem { position: relative; display: grid; grid-template-columns: 1fr 76px 1fr; align-items: center; margin-bottom: 2rem; }
.aso-fitem:last-child { margin-bottom: 0; }
.aso-fnode { grid-column: 2; justify-self: center; position: relative; z-index: 3; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; font: 600 1.05rem var(--font-display); color: var(--ink-2); transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease); }
.aso-fitem.aso-in .aso-fnode { border-color: #ff7700; background: #ff7700; color: #000; }
.aso-fcard { position: relative; background: #f6f6f3; border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem 1.75rem; text-align: left; }
.aso-fitem.aso-left .aso-fcard { grid-column: 1; text-align: right; }
.aso-fitem.aso-right .aso-fcard { grid-column: 3; }
.aso-fcard::after { content: ""; position: absolute; top: 50%; width: 0; height: 1px; background: var(--or-ink, #b54f00); transition: width 0.55s var(--ease) 0.12s; }
.aso-fitem.aso-left .aso-fcard::after { right: -26px; }
.aso-fitem.aso-right .aso-fcard::after { left: -26px; }
.aso-fitem.aso-in .aso-fcard::after { width: 26px; }
.aso-fcard .aso-fn { display: block; margin: 0 0 0.5rem; font: 600 0.7rem / 1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-ink, #b54f00); }
.aso-fcard h3 { margin: 0 0 0.4rem; font-weight: 400; font-size: var(--text-xl); letter-spacing: -0.02em; }
.aso-fcard p { margin: 0; font-size: var(--text-base); color: var(--ink-2); line-height: 1.55; }
.aso-fcard .aso-fwhen { display: inline-block; margin-top: 0.85rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.75rem; }
@media (max-width: 960px) {
  .opener-grid { grid-template-columns: 1fr; align-items: start; }
  .opener-r { padding-bottom: 0; }
  .opener-index { flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; padding-right: 3rem; mask-image: linear-gradient(to right, #000 85%, transparent); -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); }
  .opener-index::-webkit-scrollbar { display: none; }
  .opener-index .ch-tags { flex-wrap: nowrap; }
  .opener-index .ch-tags a { white-space: nowrap; }
}
@media (max-width: 820px) {
  .aso-timeline::before, .aso-tlfill { left: 15px; }
  .aso-fitem { grid-template-columns: 44px 1fr; }
  .aso-fnode { grid-column: 1; justify-self: start; width: 32px; height: 32px; font-size: 0.8rem; }
  .aso-fitem.aso-left .aso-fcard, .aso-fitem.aso-right .aso-fcard { grid-column: 2; text-align: left; margin-left: 0.9rem; }
  .aso-fcard::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .aso-tlfill { transition: none; } .aso-fcard::after { width: 26px; } }

.ch-tags a, .opener-index .ch-tags a { display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }
.ch-head + .stats { margin-top: 0; border-top: 0; }

/* ===== bulk pass 2 (2026-09-19): feature rows with platform logos, numbered lists for card grids ===== */
.feat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem 5rem; align-items: center; }
.feat.flip .feat-copy { order: 2; }
.feat-copy { display: grid; gap: 1.25rem; justify-items: start; }
.feat-copy h2 { font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; margin: 0; }
.feat-copy .ch-tags, .feat-copy p { margin: 0; }
.feat-copy .feat-p { color: var(--grey); font-size: var(--text-lg); max-width: 52ch; }
.feat-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2rem; margin: 0.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--edge); }
.feat-stats div { display: grid; }
.feat-stats dd { margin: 0; font: 500 1.75rem / 1 var(--font-display); letter-spacing: -0.03em; }
.feat-stats dt { margin-top: 0.35rem; font-size: var(--text-xs); color: var(--grey-2); }
.logo-panel { padding: 1.5rem; border-radius: var(--card); background: var(--glass); border: 1px solid var(--edge); }
.logo-panel .tools.logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.light .logo-panel .tools.logos li { background: #fff; border-color: var(--edge); }
.light .tools.logos img { filter: brightness(0); opacity: 0.78; }
.ch-grid .eyebrow { margin-bottom: 0.5rem; }
.ch-grid .rowlink { margin-top: 0.75rem; }
@media (max-width: 960px) { .feat { grid-template-columns: 1fr; gap: 2rem; } .feat.flip .feat-copy { order: 0; } .logo-panel .tools.logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feat-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .logo-panel .tools.logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tools.logos li.glyph img { height: 2rem; width: 2rem; }


/* ---------- live-only: the Elementor container is the section ---------- */
:scope { font: 400 var(--text-base) / 1.6 var(--font-body); color: var(--white); background: var(--black) !important; -webkit-font-smoothing: antialiased; padding-block: var(--section) !important; padding-inline: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; --gap: 0; --row-gap: 0; --column-gap: 0; }
/* inside @scope, plain class selectors do not match the scoping root itself, so the root variants are spelled out */
:scope.light { --white: #000000; --grey: #5c5c57; --grey-2: #6b6b66; --edge: #e6e5e1; --edge-2: #cfcec9; --glass: #f6f6f4; --glass-2: #ededea; --or-ink: #b54f00; background: #fff !important; color: #000; border-radius: 28px; }
@media (max-width: 640px) { :scope.light { border-radius: 20px; } }
:scope b, :scope strong { font-family: inherit; }
@media (max-width: 960px) { .aso-sechead.e-con { grid-template-columns: 1fr !important; align-items: start; gap: 1.25rem !important; } }
:scope > .e-con-inner { max-width: none !important; padding: 0 !important; }
.aso-sechead.e-con { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem 5rem !important; align-items: end; width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto 3.5rem !important; padding: 0 !important; }
.aso-sechead.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.aso-sechead .elementor-widget { margin: 0 !important; width: auto !important; max-width: none !important; }
.aso-sechead h2.elementor-heading-title { font: 500 var(--text-3xl) / 1.06 var(--font-display); letter-spacing: -0.03em; color: inherit; max-width: 18ch; text-wrap: balance; margin: 0; }
.aso-sechead.center h2.elementor-heading-title { max-width: 22ch; }
.aso-sechead .elementor-widget-text-editor, .aso-sechead .elementor-widget-text-editor .elementor-widget-container { display: grid; gap: 1rem; justify-items: start; color: var(--grey); font-size: var(--text-xl); line-height: 1.5; max-width: 44ch; }
.aso-sechead .elementor-widget-text-editor p { margin: 0; color: inherit; font: inherit; }
.aso-sechead .elementor-widget-text-editor a { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: var(--text-base); color: var(--white); text-decoration: none; padding-block: 0.4rem; border-bottom: 1px solid var(--edge-2); }
.elementor-widget-html, .elementor-widget-html .elementor-widget-container { font: inherit; color: inherit; }
:scope a, :scope a * { text-transform: none !important; }
:scope .elementor-widget-text-editor { color: inherit; }
:where(.elementor-widget-html) :where(h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; padding: 0; }
:where(.elementor-widget-html) :where(ul, ol) { list-style: none; }
.elementor-widget-html a { text-decoration: none; }
:scope h1, :scope h2, :scope h3, :scope h4 { text-transform: none !important; }
.elementor-widget-html h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.06; color: inherit; }
.elementor-widget-html h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; color: inherit; font-size: var(--text-3xl); }

:scope.hero { position: relative; overflow: clip; text-align: center; padding-block: clamp(8rem, 6rem + 6vw, 12rem) clamp(4rem, 3rem + 4vw, 7rem) !important; }
:scope.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(ellipse 60% 55% at 50% 30%, rgba(255, 119, 0, 0.16), transparent 70%); pointer-events: none; }
.aso-hero-head.e-con { position: relative; display: grid !important; justify-items: center; gap: 0 !important; width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; text-align: center; }
.aso-hero-head .elementor-widget { margin: 0 !important; width: auto !important; max-width: none !important; }
.aso-hero-kicker p { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.6rem; margin: 0; font: 500 var(--text-sm) / 1.4 var(--font-body); color: var(--grey); }
.aso-hero-kicker img { height: 1.5rem; width: auto; display: inline-block; }
.aso-hero-head h1.elementor-heading-title { font: 500 var(--text-display) / 1.06 var(--font-display); letter-spacing: -0.035em; color: var(--white); max-width: 20ch; margin: 1rem auto 0; text-wrap: balance; }
.aso-hero-head h1 .peach { color: var(--peach); font-style: normal; }
.aso-hero-sub p { margin: 2rem auto 0; color: var(--grey); font: 400 var(--text-xl) / 1.5 var(--font-body); max-width: 58ch; }
.aso-hero-machine { position: relative; }
.aso-hero-machine .machine { margin-top: 3.25rem; }
@media (prefers-reduced-motion: no-preference) {
  .aso-hero-head > .elementor-widget { animation: rise 800ms var(--ease-expo) both; }
  .aso-hero-head > .elementor-widget:nth-child(2) { animation-delay: 90ms; }
  .aso-hero-head > .elementor-widget:nth-child(3) { animation-delay: 180ms; }
  .aso-hero-machine { animation: rise 800ms var(--ease-expo) both; animation-delay: 270ms; }
}
@media (max-width: 640px) { .aso-hero-head h1.elementor-heading-title { max-width: 14ch; } }
.aso-about-grid.e-con { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem 5rem !important; align-items: start; width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; }
.aso-about-left.e-con { display: grid !important; gap: 1rem !important; padding: 0 !important; margin: 0 !important; width: auto !important; }
.aso-about-grid .elementor-widget { margin: 0 !important; width: auto !important; max-width: none !important; }
.aso-about-left .elementor-widget-text-editor p { margin: 0; font: 500 var(--text-sm) / 1.5 var(--font-body); color: var(--ink-2); }
.aso-about-left h2.elementor-heading-title { font: 500 clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem) / 1.06 var(--font-display); letter-spacing: -0.03em; color: inherit; max-width: 16ch; text-wrap: balance; margin: 0; }
.aso-about-copy, .aso-about-copy .elementor-widget-container { display: grid; gap: 1.75rem; justify-items: start; color: var(--ink-2); font-size: var(--text-xl); line-height: 1.5; padding-top: 0.5rem; }
.aso-about-copy p { margin: 0; color: inherit; font: inherit; }
.aso-about-copy strong { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) { .aso-about-grid.e-con { grid-template-columns: 1fr !important; gap: 1.5rem !important; } }

/* round 5: codieshub structure — head row, tabs, rows, sheets that touch, root variants for talk / news / stack */
:scope.light.tint { background: #f6f6f3 !important; --glass: #ececea; --glass-2: #e3e3df; --edge: #dcdcd6; }
:scope.light.join-next { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
:scope.light.join-prev { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
:scope.light .pill-white, :scope.light a.pill-white { background: #000; color: #fff; }
:scope.light .pill-white:hover { background: #222; }
:scope a.pill-white { color: #000; }
:scope a.pill-or { color: #000; }
:scope a.pill-ghost { color: var(--white); }
:scope a.rowlink { color: var(--white); text-transform: uppercase !important; }
:scope a.rowlink * { text-transform: uppercase !important; }
:scope.light .reasons .tick { border-color: var(--or-ink); color: var(--or-ink); }
:scope.light .faq-list { border-top-color: #000; }
:scope.light .faq-list summary::after { color: #000; }
.ch-head.e-con { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.5rem 4rem !important; align-items: end; width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 0 2.5rem !important; border-bottom: 1px solid var(--edge); }
.ch-head-l.e-con { display: grid !important; gap: 1.1rem !important; padding: 0 !important; margin: 0 !important; width: auto !important; }
.ch-aside.e-con { display: grid !important; gap: 1.25rem !important; justify-items: end; justify-self: end; text-align: right; max-width: 40ch; padding: 0 !important; margin: 0 !important; width: auto !important; color: var(--grey); font-size: var(--text-lg); line-height: 1.5; }
.ch-head .elementor-widget { margin: 0 !important; width: auto !important; max-width: none !important; }
.ch-head h2.elementor-heading-title { font: 400 clamp(2rem, 1.3rem + 2.8vw, 3.375rem) / 1.02 var(--font-display); letter-spacing: -0.035em; color: inherit; max-width: 17ch; margin: 0; text-wrap: balance; }
.ch-head .elementor-widget-text-editor p { margin: 0; color: inherit; font: inherit; }
.ch-head .elementor-widget-text-editor p.eyebrow { font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; color: var(--grey-2); }
.ch-aside .elementor-widget-text-editor, .ch-aside .elementor-widget-text-editor .elementor-widget-container { display: grid; gap: 1.25rem; justify-items: end; }
.elementor-widget-html .ch-body h3, .elementor-widget-html .ch-grid h3 { font-weight: 400; }
.elementor-widget-html .panel-copy h3 { font-weight: 400; }
@media (max-width: 960px) { .ch-head.e-con { grid-template-columns: 1fr !important; align-items: start; } .ch-aside.e-con { justify-items: start; justify-self: start; text-align: left; } .ch-aside .elementor-widget-text-editor, .ch-aside .elementor-widget-text-editor .elementor-widget-container { justify-items: start; } }
.aso-faq-h.elementor-widget { width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto 3.5rem !important; }
.aso-faq-h h2.elementor-heading-title { font: 500 var(--text-3xl) / 1.06 var(--font-display); letter-spacing: -0.03em; color: inherit; text-align: center; max-width: 22ch; margin: 0 auto; text-wrap: balance; }
.aso-stack-grid.e-con { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 5rem !important; align-items: start; width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; }
.aso-stack-l.e-con { display: grid !important; gap: 1.25rem !important; justify-items: start; padding: 0 !important; margin: 0 !important; width: auto !important; }
.aso-stack-grid .elementor-widget { margin: 0 !important; width: auto !important; max-width: none !important; }
.aso-stack-l h2.elementor-heading-title { font: 500 var(--text-3xl) / 1.06 var(--font-display); letter-spacing: -0.03em; color: inherit; max-width: 16ch; margin: 0; text-wrap: balance; }
.aso-stack-l .elementor-widget-text-editor p { margin: 0; }
.aso-stack-l p.kicker { font-size: var(--text-sm); color: var(--grey); font-weight: 500; }
.aso-stack-l p.sub { color: var(--grey); font-size: var(--text-lg); max-width: 56ch; }
.aso-stack-l p.stack-badges { display: flex; gap: 1rem; align-items: center; margin-top: 0.75rem; }
.aso-stack-l p.stack-badges img { height: 2.25rem; width: auto; display: inline-block; }
@media (max-width: 960px) { .aso-stack-grid.e-con { grid-template-columns: 1fr !important; } }
:scope.talk { padding-block: 0 !important; overflow: clip; text-align: center; border-top: 1px solid var(--edge); }
.talk-stage h2 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); max-width: 18ch; }
.talk-stage .sub { text-align: center; }
.talk-stage .pill { margin-top: 0.5rem; }
.talk-stage .talk-media img { width: 100%; height: 100%; object-fit: cover; }
:scope.news { position: relative; overflow: clip; padding-block: clamp(4rem, 3rem + 4vw, 7rem) !important; border-top: 1px solid var(--edge); }
:scope.news::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 70% at 85% 50%, rgba(255, 119, 0, 0.12), transparent 70%); pointer-events: none; }
.news-inner h2 { margin-top: 0.9rem; max-width: 14ch; }
.news-inner .sub { margin-top: 1rem; }
.news-card input { margin: 0; }
.aso-hero-track .track-wrap.in-hero { text-align: center; }
/* insights: stats card, featured block, posts widget as a hairline list */
.blog-stats { margin: 0; border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; }
.blog-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.95rem 1.25rem; border-top: 1px solid var(--edge); }
.blog-stats div:first-child { border-top: 0; }
.blog-stats dt { font: 600 0.7rem / 1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2); }
.blog-stats dd { margin: 0; font: 500 var(--text-lg) / 1 var(--font-display); letter-spacing: -0.02em; }
.opener-r .elementor-widget-shortcode { width: 100% !important; }
.ins-feat.e-con { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem !important; align-items: center; width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0 !important; padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0 !important; border-top: 1px solid var(--edge); }
.ins-feat-copy.e-con { display: grid !important; gap: 1.1rem !important; justify-items: start; padding: 0 !important; margin: 0 !important; width: auto !important; }
.ins-feat .elementor-widget { margin: 0 !important; width: auto !important; max-width: none !important; }
.ins-feat .elementor-widget-image img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 18px; border: 1px solid var(--edge); }
.ins-feat h2.elementor-heading-title { font: 400 clamp(1.6rem, 1.1rem + 2vw, 2.5rem) / 1.08 var(--font-display); letter-spacing: -0.03em; color: var(--white); margin: 0; text-wrap: balance; }
.ins-feat h2 span { color: var(--peach); }
.ins-feat .elementor-widget-text-editor p { margin: 0; color: var(--grey) !important; font-size: var(--text-lg); max-width: 50ch; }
.ins-feat .elementor-widget-text-editor p.eyebrow { font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; color: var(--grey-2); }
.ins-feat .elementor-widget-button a.elementor-button { background: var(--white); color: var(--black); border-radius: 999px; padding: 0.95rem 1.5rem; font: 500 var(--text-base) / 1 var(--font-body); }
@media (max-width: 960px) { .ins-feat.e-con { grid-template-columns: 1fr !important; } }
:scope.aso-postlist .elementor-widget-posts { width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto !important; }
:scope.aso-postlist .elementor-posts-container { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; border-top: 1px solid var(--edge); }
:scope.aso-postlist .elementor-post { display: grid !important; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: baseline; padding: 1.5rem 0 !important; margin: 0 !important; border-bottom: 1px solid var(--edge); background: none !important; box-shadow: none !important; border-radius: 0 !important; }
:scope.aso-postlist .elementor-post__thumbnail__link, :scope.aso-postlist .elementor-post__excerpt, :scope.aso-postlist .elementor-post__read-more, :scope.aso-postlist .elementor-post__badge, :scope.aso-postlist .elementor-post__avatar { display: none !important; }
:scope.aso-postlist .elementor-post__card, :scope.aso-postlist .elementor-post__text { display: contents; }
:scope.aso-postlist .elementor-post__meta-data { order: -1; margin: 0 !important; font: 600 var(--text-sm) / 1.4 var(--font-body) !important; color: var(--grey-2) !important; }
:scope.aso-postlist .elementor-post__meta-data span { color: inherit; }
:scope.aso-postlist .elementor-post__title { margin: 0 !important; font: 400 var(--text-xl) / 1.3 var(--font-display) !important; letter-spacing: -0.02em; }
:scope.aso-postlist .elementor-post__title a { color: var(--white) !important; text-transform: none !important; }
:scope.aso-postlist .elementor-post::after { content: "\2192"; color: var(--grey-2); font-size: var(--text-lg); justify-self: end; }
:scope.aso-postlist .elementor-pagination, :scope.aso-postlist .e-load-more-anchor + .elementor-button-wrapper { margin-top: 2.5rem; }
:scope.aso-postlist .elementor-widget-posts .elementor-button, :scope.aso-postlist .elementor-pagination a { background: var(--white) !important; color: var(--black) !important; border-radius: 999px !important; padding: 0.9rem 1.5rem !important; font: 500 var(--text-base) / 1 var(--font-body) !important; text-transform: none !important; }
:scope.light .aso-postlist-btnfix .elementor-button, :scope.light .elementor-widget-posts .elementor-button { background: #000 !important; color: #fff !important; }
@media (max-width: 640px) { :scope.aso-postlist .elementor-post { grid-template-columns: 1fr; gap: 0.3rem; } :scope.aso-postlist .elementor-post::after { display: none; } }
/* single post: the theme-builder template keeps its structure, this is the skin */
:scope.aso-post-head > .e-con-inner, :scope.aso-post-body > .e-con-inner, :scope.aso-post-more > .e-con-inner { width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; }
:scope.aso-post-body { --gap: 3rem !important; --row-gap: 2rem !important; --column-gap: 3.5rem !important; }
:scope.aso-post-head { --gap: 1.5rem !important; --row-gap: 1.5rem !important; --column-gap: 1.5rem !important; }
:scope.aso-post-head .elementor-widget, :scope.aso-post-body .elementor-widget { max-width: 100%; }
:scope.aso-post-head { padding-top: clamp(3rem, 2rem + 4vw, 6rem) !important; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; }
:scope.aso-post-head .elementor-widget-heading, :scope.aso-post-head h1.elementor-heading-title { text-align: left !important; }
:scope.aso-post-head .crumb span.last { text-transform: none; letter-spacing: 0; }
:scope.aso-post-body .elementor-widget-table-of-contents .elementor-widget-container { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
:scope.aso-post-body .elementor-toc__body { max-height: none !important; }
:scope.aso-post-body .content ul { list-style: disc; }
:scope.aso-post-body .content ol { list-style: decimal; }
:scope.aso-post-body .content li::marker { color: var(--or-ink, #b54f00); }
:scope.aso-post-head .crumb p, :scope.aso-post-head .crumb span, :scope.aso-post-head .crumb a { font: 600 0.75rem / 1.4 var(--font-body) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-2) !important; margin: 0 !important; }
:scope.aso-post-head .crumb span.last { color: var(--white) !important; }
:scope.aso-post-head h1.elementor-heading-title { font: 400 clamp(2.25rem, 1.4rem + 3.2vw, 4rem) / 1.05 var(--font-display) !important; letter-spacing: -0.035em; color: var(--white) !important; max-width: 22ch; text-wrap: balance; }
:scope.aso-post-head .elementor-widget-post-info .elementor-icon-list-item, :scope.aso-post-head .elementor-widget-post-info .elementor-icon-list-text { font: 500 var(--text-sm) / 1.4 var(--font-body) !important; color: var(--grey-2) !important; }
:scope.aso-post-head .elementor-widget-author-box .elementor-author-box__name { font: 500 var(--text-sm) / 1.4 var(--font-body) !important; color: var(--white) !important; }
:scope.aso-post-head .elementor-widget-author-box .elementor-author-box__bio { color: var(--grey-2) !important; font-size: var(--text-xs) !important; }
:scope.aso-post-head .elementor-widget-theme-post-featured-image img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--edge); }
:scope.aso-post-body .content { font-size: 1.125rem; line-height: 1.75; color: #2b2b28; }
:scope.aso-post-body .content p, :scope.aso-post-body .content li { color: #2b2b28; }
:scope.aso-post-body .content h2 { font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem) / 1.12 var(--font-display) !important; letter-spacing: -0.03em; color: #000 !important; margin: 2.75rem 0 1rem !important; }
:scope.aso-post-body .content h3 { font: 500 clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem) / 1.2 var(--font-display) !important; letter-spacing: -0.02em; color: #000 !important; margin: 2rem 0 0.75rem !important; }
:scope.aso-post-body .content h4 { font: 600 var(--text-lg) / 1.3 var(--font-body) !important; color: #000 !important; margin: 1.75rem 0 0.5rem !important; }
:scope.aso-post-body .content a { color: #000; border-bottom: 1px solid var(--edge-2); text-decoration: none; }
:scope.aso-post-body .content a:hover { border-bottom-color: #000; }
:scope.aso-post-body .content img { border-radius: 14px; border: 1px solid var(--edge); }
:scope.aso-post-body .content blockquote { margin: 2rem 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--or-ink, #b54f00); font-size: var(--text-xl); color: #000; }
:scope.aso-post-body .content table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
:scope.aso-post-body .content th, :scope.aso-post-body .content td { padding: 0.75rem 0.9rem; border: 1px solid var(--edge); text-align: left; vertical-align: top; }
:scope.aso-post-body .content th { background: var(--glass); font-weight: 600; }
:scope.aso-post-body .content ul, :scope.aso-post-body .content ol { padding-left: 1.4rem; }
:scope.aso-post-body .content li + li { margin-top: 0.4rem; }
:scope.aso-post-body .aso-card { background: var(--glass) !important; border: 1px solid var(--edge) !important; border-radius: 18px !important; }
:scope.aso-post-body .aso-card .elementor-heading-title { color: #000 !important; font: 500 var(--text-2xl) / 1.1 var(--font-display) !important; letter-spacing: -0.025em; }
:scope.aso-post-body .aso-card p { color: var(--ink-2) !important; }
:scope.aso-post-body .elementor-widget-button a.elementor-button { background: #000 !important; color: #fff !important; border-radius: 999px !important; padding: 0.95rem 1.5rem !important; font: 500 var(--text-base) / 1 var(--font-body) !important; text-transform: none !important; }
:scope.aso-post-body .elementor-widget-table-of-contents { position: sticky; top: 6.5rem; }
:scope.aso-post-body .elementor-toc__header { border: 0 !important; padding: 0 0 0.75rem !important; }
:scope.aso-post-body .elementor-toc__header-title { font: 600 0.7rem / 1 var(--font-body) !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2) !important; }
:scope.aso-post-body .elementor-toc__body { padding: 0 !important; border-left: 1px solid var(--edge); }
:scope.aso-post-body .elementor-toc__list-item-text { font: 400 var(--text-sm) / 1.45 var(--font-body) !important; color: var(--grey) !important; padding: 0.35rem 0 0.35rem 0.9rem !important; display: block; border-left: 2px solid transparent; margin-left: -1px; }
:scope.aso-post-body .elementor-toc__list-item-text.elementor-item-active { color: #000 !important; border-left-color: #000; }
:scope.aso-post-body .elementor-toc__list-item-text:hover { color: #000 !important; }
:scope.aso-post-body .elementor-toc__list-items { list-style: none !important; padding: 0 !important; margin: 0 !important; }
:scope.aso-post-body .elementor-toc__list-item { margin: 0 !important; }
:scope.aso-post-body .elementor-toc__list-item .elementor-toc__list-item-text::before { display: none !important; }
:scope.aso-post-body .elementor-toc__list-item-text-wrapper { display: block !important; }
:scope.aso-post-more .elementor-widget-heading h2, :scope.aso-post-more .elementor-widget-heading h3, :scope.aso-post-more .elementor-widget-heading .elementor-heading-title { font: 400 var(--text-3xl) / 1.06 var(--font-display) !important; letter-spacing: -0.03em; color: #000 !important; margin: 0 0 1.5rem !important; }
/* services page: the page opener (reused on sub-service and location pages) */
:scope.opener { position: relative; overflow: clip; padding-block: clamp(7rem, 5rem + 6vw, 11rem) clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; }
:scope.opener::before { content: ""; position: absolute; inset: -30% -10% auto; height: 60%; background: radial-gradient(ellipse 45% 50% at 18% 35%, rgba(255, 119, 0, 0.14), transparent 70%); pointer-events: none; }
.opener-grid.e-con { position: relative; display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem 5rem !important; align-items: end; width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; }
.opener-l.e-con { display: grid !important; gap: 1.25rem !important; padding: 0 !important; margin: 0 !important; width: auto !important; }
.opener-r.e-con { display: grid !important; gap: 1.5rem !important; justify-items: start; padding: 0 0 0.4rem !important; margin: 0 !important; width: auto !important; }
.opener-grid .elementor-widget { margin: 0 !important; width: auto !important; max-width: none !important; }
.opener-l h1.elementor-heading-title { font: 400 clamp(2.5rem, 1.3rem + 4.4vw, 4.75rem) / 1.02 var(--font-display); letter-spacing: -0.035em; color: var(--white); max-width: 15ch; margin: 0; text-wrap: balance; }
.opener-l h1 .peach { color: var(--peach); font-style: normal; }
.opener-l .elementor-widget-text-editor p.eyebrow, .opener-r .elementor-widget-text-editor p { margin: 0; }
.opener-r .elementor-widget-text-editor p.sub { color: var(--grey); font-size: var(--text-lg); max-width: 56ch; }
.opener-r .elementor-widget-text-editor p.opener-ctas { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.opener-r .elementor-widget-text-editor p.opener-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; font-size: var(--text-sm); color: var(--grey); }
.opener-r .elementor-widget-text-editor p.opener-proof img { height: 2rem; width: auto; display: block; }
:scope a.textlink { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; color: var(--white); padding-block: 0.4rem; border-bottom: 1px solid var(--edge-2); }
.aso-opener-index { width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 0 auto !important; }
:scope .opener-index .ch-tags a { color: var(--white); }
@media (max-width: 960px) { .opener-grid.e-con { grid-template-columns: 1fr !important; align-items: start; } .opener-r.e-con { padding-bottom: 0 !important; } }
:scope a.stat, :scope a.stat:hover { color: inherit; }
.elementor-widget-html .feat-copy h2 { font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; }
:scope.light .tools.logos img { filter: brightness(0); opacity: 0.78; }
:scope.light .logo-panel .tools.logos li { background: #fff; border-color: var(--edge); }
:scope .ch-grid a.rowlink { color: var(--white); }
:scope .ch-tags a, :scope .ch-tags a:hover { color: inherit; }
:scope .ch-body p a { color: var(--white); }
:scope .recog dt a { color: inherit; }
:scope.light .stat-s, :scope.light .recog li, :scope.light .recog-head .eyebrow { color: var(--ink-2); }

/* components for the pages rebuilt from single-widget HTML (platform migration, custom CRM, internal tools) — live/blob.js.
   Inside @scope (.aso-v3); tokens remap on .light sheets, so --white is the ink and --or-ink the accent there. */
.aso-kv { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); margin: 0; }
.aso-kv dt, .aso-kv dd { margin: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--edge); }
.aso-kv dt { font: 600 0.75rem / 1.7 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); padding-right: 2rem; }
.aso-kv dd { color: var(--grey); font-size: var(--text-lg); padding-right: clamp(0px, 8vw, 9rem); }
.aso-kv dd b, .aso-slist b, .aso-callout p b, .aso-table td b, .panel-points .pt b { color: var(--white); font-weight: 500; }
.aso-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5rem; }
.aso-lanes .lane h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin: 2.75rem 0 0; }
.aso-lanes .lsub { margin: 0.5rem 0 0; color: var(--grey); }
.aso-slist { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.aso-slist li { position: relative; padding: 1rem 0 1rem 1.5rem; border-bottom: 1px solid var(--edge); color: var(--grey); }
.aso-slist li::before { content: ""; position: absolute; left: 0; top: 1.7rem; width: 6px; height: 6px; background: var(--edge-2); }
.lane.bad .aso-slist li::before { background: var(--or-ink, var(--or)); }
.aso-lanes .note { margin: 1.25rem 0 0; font-size: var(--text-sm); color: var(--grey-2); }
.aso-callout { margin: 2.75rem 0 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--or-ink, var(--or)); max-width: 64ch; }
.aso-callout .eyebrow { margin: 0; }
.aso-callout p { margin: 0.85rem 0 0; color: var(--grey); }
.aso-table { margin-top: 2.75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aso-table table { width: 100%; min-width: 44rem; border-collapse: collapse; border: 0; background: none; }
.aso-table thead, .aso-table tbody, .aso-table tr, .aso-table th, .aso-table td { border: 0; background: none !important; }
.aso-table th { text-align: left; font: 600 0.75rem / 1.7 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); padding: 0 2rem 1rem 0; border-bottom: 1px solid var(--edge-2); }
.aso-table td { vertical-align: top; padding: 1.1rem 2rem 1.1rem 0; border-bottom: 1px solid var(--edge); color: var(--grey); }
.aso-table td.hi, .aso-table td:first-child { color: var(--white); font-weight: 500; }
.aso-table code, .aso-slist code, .panel-points code { font: 500 0.88em / 1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.aso-assump { margin: 2rem 0 0; font-size: var(--text-sm); color: var(--grey-2); max-width: 64ch; }
.aso-price { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 2rem 5rem; align-items: end; padding-top: 2.75rem; }
.aso-price h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin: 0; }
.aso-price p { margin: 0.75rem 0 0; color: var(--grey); max-width: 52ch; }
.aso-price-r { display: grid; justify-items: start; gap: 0.5rem; }
.aso-price-r p.num { margin: 0; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); color: var(--or-ink, var(--or)); }
.aso-price-r .term { margin: 0; font-size: var(--text-sm); color: var(--grey-2); }
.aso-price-r .pill { margin-top: 1rem; }
.aso-blob .ch-grid, .aso-blob .ch-rows { margin-top: 0; }
.aso-ptabs .tablist { margin-top: 2.75rem; }
.aso-ptabs .tablist button i { font-style: normal; }
.panel-points .pt b { display: block; font-size: var(--text-lg); }
.panel-points .pt p { margin: 0.25rem 0 0; font-size: var(--text-base); color: var(--grey); }
.elementor-widget-html .aso-lanes h3, .elementor-widget-html .aso-price h3, .elementor-widget-html .ch-rows h3 { font-weight: 400; }
@media (max-width: 960px) { .aso-lanes { grid-template-columns: 1fr; } .aso-price { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .aso-kv { grid-template-columns: 1fr; } .aso-kv dt { padding-bottom: 0; border-bottom: 0; } .aso-kv dd { padding-top: 0.5rem; } }
:scope .faq-list p a, :scope .aso-kv a, :scope .aso-slist a, :scope .ch-grid a:not(.rowlink), :scope .aso-callout a, :scope .aso-table a, :scope .panel-points a, :scope .aso-assump a, :scope .aso-lanes .note a, :scope .aso-price p a { color: var(--white); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--edge-2); }
/* retainer / custom-build pages */
.aso-kv-head { margin: 3rem 0 0; }
.aso-kv-head h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin: 0; }
.aso-kv-head p { margin: 0.35rem 0 1rem; color: var(--grey); }
.aso-vitals .num { font-size: 2rem; }
.aso-vitals .eyebrow { margin-bottom: 0.5rem; }
.aso-cause { font-size: var(--text-sm); color: var(--grey-2); }
.aso-cause b { display: block; color: var(--white); font-weight: 500; }
.aso-tiers .eyebrow.is-blank { visibility: hidden; }
.aso-seg .lane .lsub { margin-top: 2.75rem; font-size: var(--text-lg); color: var(--white); }
.aso-seg .lane .lsub + .lsub { margin-top: 1rem; color: var(--grey); font-size: var(--text-base); }
.aso-seg .lane .aso-slist { margin-top: 2.75rem; }
.aso-seg .ch-grid { margin-top: 1.5rem; }
.aso-cta { margin: 2rem 0 0; }
.aso-proofbox { margin-top: 2.75rem; max-width: 64ch; }
.aso-proofbox .eyebrow { margin-bottom: 1rem; }
.aso-proofbox h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin: 0; }
.aso-proofbox p { margin: 1rem 0 0; color: var(--grey); }
.ch-rows h3 a { color: inherit; text-decoration: none; }
.aso-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; margin-top: 0; }
.aso-tiers .tier { padding: 2.75rem 0 0; display: grid; align-content: start; gap: 0; }
.aso-tiers .tier + .tier { border-left: 1px solid var(--edge); padding-left: 3rem; margin-left: -1.5rem; }
.aso-tiers .tier h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin: 0.75rem 0 0; }
.aso-tiers .who { margin: 0.5rem 0 0; color: var(--grey); min-height: 3.2em; }
.aso-tiers p.num { margin: 1.5rem 0 0; font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); color: var(--white); }
.aso-tiers .term { margin: 0.25rem 0 0; font-size: var(--text-sm); color: var(--grey-2); }
.aso-tiers .aso-slist { margin-top: 1.5rem; }
.aso-tiers .aso-slist li { font-size: var(--text-sm); padding: 0.8rem 0 0.8rem 1.4rem; }
.aso-tiers .aso-slist li::before { top: 1.35rem; }
.aso-tiers .tier.feature .eyebrow { color: var(--or-ink, var(--or)); }
@media (max-width: 960px) { .aso-tiers { grid-template-columns: 1fr; } .aso-tiers .tier + .tier { border-left: 0; border-top: 1px solid var(--edge); padding-left: 0; margin-left: 0; padding-top: 2.5rem; margin-top: 2.5rem; } .aso-tiers .who { min-height: 0; } }
/* pass 3: the owner's Elementor form inside a light section */
.aso-form-row.e-con { width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin: 2.5rem auto 0 !important; padding: 0 !important; }
.aso-form-row .elementor-widget-form { width: 100% !important; max-width: 56rem; }
.aso-table.aso-compare td.yes .mark { color: var(--or-ink, var(--or)); font-weight: 600; }
.aso-table.aso-compare td.no .mark { color: var(--grey-2); }
.aso-table.aso-compare td.yes { color: var(--white); }
.aso-stats.stats { margin-top: 0; }
.aso-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aso-sub-h { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin: 2.75rem 0 0; }
.aso-prose { margin-top: 1.5rem; max-width: 64ch; color: var(--grey); }
.aso-prose p + p { margin-top: 1rem; }
.aso-prose b, .aso-prose strong { color: var(--white); font-weight: 500; }
/* case studies */
.case-proof + .case-proof { margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-top: clamp(3rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--edge); }
.case-proof.flip .proof-img { order: 2; }
.case-proof .proof-copy h3 { margin: 0.75rem 0 0; font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.1; }
:scope .case-proof .proof-copy h3 a { color: inherit; text-decoration: none; }
.case-proof .proof-copy .ch-tags { margin-top: 1rem; }
.case-proof .proof-copy .body { margin-top: 1.25rem; }
.case-proof .proof-img img { max-width: 100%; }
.aso-work { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.aso-work li > a, .aso-work li > div { display: block; color: inherit; text-decoration: none; }
.aso-work figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; border: 1px solid var(--edge); background: var(--glass); }
.aso-work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.aso-work a:hover img { transform: scale(1.03); }
.aso-work .w-meta { display: grid; gap: 0.25rem; padding: 1rem 0 0; }
.aso-work .w-name { font: 400 var(--text-xl) / 1.2 var(--font-display); letter-spacing: -0.02em; color: var(--white); }
.aso-work .w-tag { font-size: var(--text-sm); color: var(--grey-2); }
.aso-work .w-stat { font: 500 var(--text-sm) / 1.4 var(--font-body); color: var(--or-ink, var(--or)); }
.aso-work .rowlink { padding-top: 0.5rem; }
.aso-results .num small { display: block; font: 600 0.62rem / 1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-2); margin-top: 0.35rem; }
.aso-results .num { font-size: 2.25rem; }
:scope.aso-case .aso-ph .meta a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; border-bottom: 1px solid var(--edge-2); }
:scope.aso-quote-sec { text-align: center; }
.aso-bigquote { margin: 0 auto; max-width: 52rem; }
.aso-bigquote p { margin: 0; font: 300 clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem) / 1.25 var(--font-display); letter-spacing: -0.03em; color: var(--white); text-wrap: balance; }
.aso-bigquote p::before { content: "\201C"; color: var(--or); margin-right: 0.15em; }
.aso-bigquote cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: var(--text-sm); color: var(--grey-2); }
.aso-prose-lg { font-size: var(--text-lg); color: var(--white); }
.aso-prose-lg p + p { margin-top: 1rem; }
.aso-blob .ins-list { margin-top: 0; }
@media (max-width: 960px) { .aso-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-proof.flip .proof-img { order: 0; } }
@media (max-width: 640px) { .aso-work { grid-template-columns: 1fr; } }
/* contact page */
.contact-stats.stats { margin-top: 2.5rem; border-top: 1px solid var(--edge); }
.aso-quotes .q { margin: 0 0 1rem; font: 400 var(--text-lg) / 1.5 var(--font-display); letter-spacing: -0.01em; color: var(--white); }
.aso-quotes .q::before { content: "\201C"; color: var(--or-ink, var(--or)); margin-right: 0.1em; }
.aso-quotes h3 { font-size: var(--text-base) !important; font-weight: 500 !important; }
.aso-quotes .eyebrow { margin-top: 0.35rem; }
:scope .ch-aside a, :scope .aso-form-sec .ch-aside a { color: var(--white); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--edge-2); }
/* recognition list: one column under 720 px — two 30 px tiles plus their lines do not fit side by side in a phone-width sheet (owner, 2026-09-20) */
@media (max-width: 720px) { .recog { columns: 1; padding-top: 1.25rem; } .recog > div { margin-bottom: 1.75rem; } }
/* section dividers (owner, 2026-09-20: "all the white part looks dull, you can't tell what is doing what"): every light sheet
   that joins the one above gets a wrap-width hairline at the join, and the tint steps are two shades apart instead of one */
:scope.light.join-prev::before, .light.join-prev::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2 * var(--gutter), var(--wrap)); border-top: 1px solid #cfcec8; pointer-events: none; }
:scope.light.tint, .light.tint { background: #f2f1ed !important; --glass: #e8e7e2; --glass-2: #dfdeD8; --edge: #d6d5cf; }

/* insights (2026-09-19): /blog/ listing + single-post template, rendered by the [aso_post_list] / [aso_post_head] / [aso_post_related]
   shortcodes in aso-v3.php. Inside @scope (.aso-v3): root variants are spelled :scope.…, links restated so the kit's a-colour loses. */
/* the listing page is white from the top: the opener sheet runs up under the header, no corner radius */
:scope.aso-ins { border-radius: 0 !important; margin-top: -5.2rem !important; padding-top: clamp(9rem, 7rem + 6vw, 13rem) !important; padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem) !important; }
:scope.aso-ins::before { display: none; }
:scope.aso-ins .opener-l h1.elementor-heading-title { font-weight: 300; max-width: 18ch; }
:scope.aso-ins .opener-l h1 .peach { color: var(--or-ink); }
:scope.aso-ins .opener-r .elementor-widget-shortcode { width: 100% !important; max-width: 22rem; }
:scope.aso-ins .blog-stats { border-radius: 0; }
:scope.aso-ins .blog-stats dd { font-weight: 300; }
:scope.aso-ins .opener-grid.e-con { align-items: end; }
/* featured: black type card left, copy right */
.ins-list { display: block; }
:scope .ins-featured, :scope .ins-featured:hover { color: inherit; text-decoration: none; }
.ins-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: center; margin: 0 0 clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.ins-featured .card { aspect-ratio: 5 / 4; background: #000; color: #fff; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: flex; flex-direction: column; justify-content: space-between; border-radius: 22px; overflow: hidden; }
.ins-featured .card .row { display: flex; justify-content: space-between; gap: 1rem; font: 600 0.68rem / 1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.ins-featured .card .row span:first-child::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 0.6rem 0.15em 0; background: var(--or); }
.ins-featured .card .big { margin: 0; font: 300 clamp(2.5rem, 1.25rem + 5vw, 5.5rem) / 0.95 var(--font-display); letter-spacing: -0.04em; color: #fff; overflow-wrap: anywhere; transition: transform 0.5s var(--ease); }
.ins-featured .card .big i { font-style: normal; color: var(--or); }
.ins-featured:hover .card .big { transform: translateY(-4px); }
.ins-featured .card .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; font: 500 var(--text-sm) / 1 var(--font-body); color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; }
.ins-featured .card .go { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 10px; font-size: 1.1rem; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ins-featured:hover .card .go { background: var(--or); color: #000; transform: translateX(3px); }
.ins-featured .copy .eyebrow { color: var(--or-ink, var(--or)); margin: 0 0 1.25rem; }
:scope .ins-featured .copy h2 { margin: 0 0 1.25rem; font: 400 clamp(1.65rem, 1.2rem + 2vw, 2.5rem) / 1.08 var(--font-display); letter-spacing: -0.025em; color: var(--white); text-wrap: balance; transition: color var(--dur) var(--ease); }
.ins-featured .copy p { margin: 0; color: var(--grey); font-size: var(--text-lg); max-width: 52ch; }
.ins-featured .copy .more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; font: 700 0.78rem / 1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); }
.ins-featured .copy .more span { transition: transform var(--dur) var(--ease); }
.ins-featured:hover .copy .more span { transform: translateX(3px); }
/* topic groups: small uppercase heading with the square, hairline rows date | title | arrow */
.ins-group + .ins-group { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
:scope .ins-group h2 { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem; font: 700 0.78rem / 1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); }
.ins-group h2::before { content: ""; width: 6px; height: 6px; background: var(--or-ink, var(--or)); flex: none; }
.ins-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--edge-2); }
:scope .ins-rows a { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 0 2.5rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--edge); color: var(--white); text-decoration: none; transition: background-color var(--dur) var(--ease); }
:scope .ins-rows a:hover, :scope .ins-rows a:focus-visible { background: var(--glass); box-shadow: -1rem 0 0 var(--glass), 1rem 0 0 var(--glass); outline: none; }
.ins-rows .when { display: grid; gap: 0.1rem; }
.ins-rows time { font: 500 var(--text-sm) / 1.3 var(--font-body); color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ins-rows small { font-size: var(--text-xs); color: var(--grey-2); font-variant-numeric: tabular-nums; }
.ins-rows .t { margin: 0; font: 400 clamp(1rem, 0.9rem + 0.5vw, 1.2rem) / 1.3 var(--font-display); letter-spacing: -0.01em; color: var(--white); padding-right: 1rem; }
.ins-rows .arr { color: var(--grey-2); font-size: 1.1rem; line-height: 1; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
:scope .ins-rows a:hover .arr { transform: translateX(3px); color: var(--or-ink, var(--or)); }
.ins-all { margin: 2rem 0 0; }
/* single post: head */
:scope.aso-post-head { border-radius: 0 !important; margin-top: -5.2rem !important; padding-top: clamp(8.5rem, 6.5rem + 6vw, 12.5rem) !important; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; }
.aso-ph { max-width: none; }
.aso-ph .crumb { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.5rem; font: 600 0.72rem / 1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-2); }
.aso-ph .crumb::before { content: ""; width: 6px; height: 6px; background: var(--or-ink, var(--or)); flex: none; }
:scope .aso-ph .crumb a { color: var(--grey-2); text-decoration: none; }
:scope .aso-ph .crumb a:hover { color: var(--white); }
.aso-ph .crumb .sep { opacity: 0.5; }
.aso-ph .crumb .cur { color: var(--white); }
:scope .aso-ph h1 { margin: 0; font: 300 clamp(2rem, 1.2rem + 4vw, 4rem) / 1.04 var(--font-display); letter-spacing: -0.035em; color: var(--white); max-width: 24ch; text-wrap: balance; }
.aso-ph .lede { margin: 1.5rem 0 0; font-size: var(--text-lg); line-height: 1.55; color: #2b2b28; max-width: 60ch; }
.aso-ph .meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 2rem 0 0; font: 500 var(--text-sm) / 1.4 var(--font-body); color: var(--grey); font-variant-numeric: tabular-nums; }
.aso-ph .cover { margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--edge); border-radius: 18px; background: var(--glass); }
.aso-ph .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* single post: body = prose + 240px sticky "On this page" */
:scope.aso-post-body > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) 240px; gap: 3rem 4rem !important; align-items: start; }
:scope.aso-post-body > .e-con-inner > .e-con { width: auto !important; max-width: none !important; }
:scope.aso-post-body .content { max-width: 70ch; }
:scope.aso-post-body .elementor-widget-table-of-contents { position: sticky; top: 6.5rem; }
:scope.aso-post-body .elementor-toc__header-title { font-size: 0.62rem !important; letter-spacing: 0.2em; }
/* single post: continue reading */
:scope.aso-post-more { padding-top: clamp(4rem, 3rem + 3vw, 6rem) !important; padding-bottom: clamp(4rem, 3rem + 3vw, 6rem) !important; }
:scope.aso-post-more .elementor-widget-shortcode { width: 100% !important; max-width: none !important; }
@media (max-width: 960px) {
  .ins-featured { grid-template-columns: 1fr; }
  :scope.aso-post-body > .e-con-inner { grid-template-columns: 1fr; }
  :scope.aso-post-body .elementor-widget-table-of-contents { display: none; }
}
@media (max-width: 640px) {
  :scope .ins-rows a { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.1rem 0; }
  .ins-rows .arr { display: none; }
  .ins-rows .when { display: flex; gap: 0.5rem; align-items: baseline; }
  .ins-rows small::before { content: "· "; }
  .ins-featured .card { aspect-ratio: auto; gap: 2.5rem; }
}
:scope.aso-ins .opener-l h1 .peach { color: inherit; }
:scope.aso-ins-list { padding-top: 0.5rem !important; }
:scope.aso-post-body { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem) !important; }
:scope.aso-post-body .elementor-widget-table-of-contents { border: 0 !important; --box-border-width: 0; }
:scope.aso-post-body .elementor-toc__header-title { font-size: 0.7rem !important; }

/* header v3 is a fixed band: the openers no longer pull up under an in-flow header */
:scope.opener, :scope.hero, :scope.aso-ins, :scope.aso-post-head { margin-top: 0 !important; }

/* zenoti page (2990) components — live/blob.js translators race / calc / meters / proof / bound / aofilt / aogrid + the opener form.
   Inside @scope (.aso-v3). The page's own script drives #race, #cl…, #meters and #aogrid; ids and the .hit / .hide / .on states are kept. */
:scope.aso-opener .opener-grid.e-con:has(.aso-form) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
.aso-form-w.elementor-widget { width: 100% !important; max-width: none !important; }
.aso-form .form-card { display: grid; gap: 1rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: var(--glass); border: 1px solid var(--edge); border-radius: 22px; position: relative; }
.aso-form h3 { margin: 0; font: 500 var(--text-2xl) / 1.1 var(--font-display); letter-spacing: -0.025em; }
.aso-form .sub { margin: -0.25rem 0 0.25rem; color: var(--grey); font-size: var(--text-sm); }
.aso-form .fg { display: grid; gap: 0.4rem; }
.aso-form .r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.aso-form label { font: 600 0.7rem / 1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-2); }
.aso-form input, .aso-form select { width: 100%; min-height: 48px; padding: 0.75rem 1rem; border: 1px solid var(--edge-2); border-radius: 12px; background: var(--black); color: var(--white); font: 400 var(--text-base) / 1.3 var(--font-body); appearance: none; -webkit-appearance: none; }
.aso-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a39c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1rem; background-position: right 1rem center; padding-right: 2.5rem; }
.aso-form input::placeholder { color: var(--grey-2); }
.aso-form input:focus-visible, .aso-form select:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-color: var(--or); }
.aso-form .pill { width: 100%; justify-content: center; margin-top: 0.25rem; }
.aso-form .fine { margin: 0; font-size: var(--text-xs); color: var(--grey-2); text-align: center; }
.aso-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* booking journey race (dark break) */
.aso-race .race-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 2.75rem 0 1.5rem; }
.aso-race .race-bar .lsub { margin: 0; font-size: var(--text-sm); color: var(--grey-2); }
.race-lanes { gap: 1.5rem; }
.race-lanes .jlane { border: 1px solid var(--edge); border-radius: 18px; padding: 1.5rem 1.75rem; background: var(--glass); }
.race-lanes .jhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.race-lanes .jhead h3 { margin: 0; font-size: var(--text-xl); }
.race-lanes .jtime { font-size: 2rem; font-variant-numeric: tabular-nums; }
.race-lanes .jsteps { margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: j; }
.race-lanes .jsteps li { counter-increment: j; position: relative; padding: 0.7rem 0 0.7rem 2.2rem; border-bottom: 1px solid var(--edge); color: var(--grey-2); transition: color var(--dur) var(--ease); }
.race-lanes .jsteps li::before { content: counter(j, decimal-leading-zero); position: absolute; left: 0; top: 0.75rem; font: 600 0.7rem / 1.6 var(--font-body); letter-spacing: 0.1em; color: var(--grey-2); }
.race-lanes .jsteps li.hit { color: var(--white); }
.race-lanes .jsteps li.hit::before { color: var(--or-ink, var(--or)); }
.race-lanes .jfoot { margin: 1.25rem 0 0; font-size: var(--text-sm); color: var(--grey-2); }
.race-lanes .jfoot b { color: var(--white); font-weight: 500; margin-right: 0.5rem; }
/* attach-rate calculator */
.aso-calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem 4rem; margin-top: 2.75rem; align-items: start; }
.calc-panel { display: grid; gap: 1.5rem; }
.slider-row { display: grid; gap: 0.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--edge); }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.slider-top label { color: var(--grey); }
.slider-top output { font: 500 var(--text-xl) / 1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--white); }
.calc-panel input[type="range"] { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--or-ink, var(--or)); }
.calc-out { background: #000; color: #fff; border-radius: 22px; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); --white: #fff; --grey: #a3a39c; --grey-2: #8a8a83; --edge: rgba(255, 255, 255, 0.12); }
.calc-out .eyebrow { color: var(--or); }
.calc-out .co-big { margin: 1rem 0 0; font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); color: #fff; }
.calc-out .co-sub { margin: 0.35rem 0 0; color: var(--grey); }
.calc-rows { margin: 1.75rem 0 0; }
.calc-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--edge); }
.calc-rows dt { color: var(--grey); font-size: var(--text-sm); }
.calc-rows dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
/* tracking meters */
.aso-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; margin-top: 2.75rem; }
.meter .mtop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.meter .mname { font-weight: 500; }
.meter .mval { font: 300 1.75rem / 1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.meter .mval s { color: var(--grey-2); font-size: 1rem; }
.meter .mval em { font-style: normal; color: var(--white); }
.meter .mval .of { font-size: 0.9rem; color: var(--grey-2); }
.meter .track { position: relative; height: 6px; margin: 1rem 0 0; background: var(--glass-2); border-radius: 3px; overflow: hidden; }
.meter .track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; transition: width 1.1s var(--ease); }
.meter .track .was { background: var(--edge-2); z-index: 1; }
.meter .track .high { background: var(--or-ink, var(--or)); }
.meter .mfoot { margin: 0.75rem 0 0; font-size: var(--text-sm); color: var(--grey-2); }
/* proof */
.aso-proof { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: center; margin-top: 2.75rem; }
.proof-img { margin: 0; }
.proof-img img { width: 100%; max-width: 26rem; height: auto; display: block; border-radius: 20px; border: 1px solid var(--edge); }
.proof-copy .lsub { margin: 0; font-size: var(--text-lg); color: var(--white); }
.proof-copy .body { margin: 1rem 0 0; color: var(--grey); }
.proof-copy blockquote { margin: 1.75rem 0 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--or-ink, var(--or)); }
.proof-copy blockquote p { margin: 0; font: 400 var(--text-xl) / 1.4 var(--font-display); letter-spacing: -0.01em; color: var(--white); }
.proof-copy cite { display: block; margin-top: 0.75rem; font-style: normal; font-size: var(--text-sm); color: var(--grey-2); }
.proof-copy > p:last-child { margin-top: 1.5rem; }
/* boundary + add-on grid (dark break) */
.aso-bound { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; margin-top: 2.75rem; }
.aso-bound h3 { margin: 0; font-weight: 400; font-size: var(--text-xl); letter-spacing: -0.02em; }
.aso-bound p { margin: 0.5rem 0 0; color: var(--grey); font-size: var(--text-sm); }
.aso-bound .ch-tags { margin-top: 1rem; }
.aso-aofilt { margin-top: 3rem; }
.aso-aofilt button.on { color: var(--white); border-bottom-color: var(--white); }
.aso-aogrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5rem; }
.aso-aogrid .ao { padding: 2rem 0; border-bottom: 1px solid var(--edge); }
.aso-aogrid .ao.hide { display: none; }
.aso-aogrid .aotop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.aso-aogrid .aotop .num { font-size: 2rem; }
.aso-aogrid h3 { margin: 0.75rem 0 0; font-weight: 400; font-size: var(--text-xl); letter-spacing: -0.02em; }
.aso-aogrid p { margin: 0.5rem 0 0; color: var(--grey); }
.aoswap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0 0; }
.aoswap div { padding: 0.9rem 1rem; border: 1px solid var(--edge); border-radius: 12px; background: var(--glass); }
.aoswap div.us { border-color: rgba(255, 119, 0, 0.45); }
.aoswap dt { font: 600 0.65rem / 1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-2); }
.aoswap .us dt { color: var(--or-ink, var(--or)); }
.aoswap dd { margin: 0.4rem 0 0; font-size: var(--text-sm); color: var(--white); }
.aso-aonote { margin-top: 2.5rem; max-width: 60ch; color: var(--grey); }
.elementor-widget-html .aso-bound h3, .elementor-widget-html .aso-aogrid h3, .elementor-widget-html .race-lanes h3 { font-weight: 400; }
@media (max-width: 960px) { .aso-calc, .aso-proof, .aso-bound, .aso-aogrid { grid-template-columns: 1fr; } .aoswap { grid-template-columns: 1fr; } :scope.aso-opener .opener-grid.e-con:has(.aso-form) { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .aso-form .r2 { grid-template-columns: 1fr; } .aso-meters { grid-template-columns: 1fr; } }

/* landing pages 3034 / 3295 (blob.js translators ivstats / stage / toggle / inv / mailcmp / flows / csmeta / phases / pipe / cs / pkgs). Inside @scope. */
.aso-ivstats.stats { margin-top: 2.75rem; }
.aso-ivstats .stat-n { font-variant-numeric: tabular-nums; }
.aso-inv-list { margin-top: 2.5rem; }
.aso-stage .stage-top .pill { margin: 0; }
.aso-stage .jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.aso-stage .jt h3 { font: 600 0.95rem / 1.3 var(--font-display) !important; margin: 0.6rem 0 0.3rem; letter-spacing: 0; }
.aso-toggle { margin-top: 2.75rem; }
.aso-toggle button.on { color: var(--white); border-bottom-color: var(--white); }
.aso-mailcmp .eyebrow { margin: 0 0 0.9rem; }
.aso-mailcmp .eyebrow.good { color: var(--or-ink, var(--or)); }
.aso-mailcmp { margin-top: 2.75rem; }
.aso-flows { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; }
.aso-flows li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--edge); color: var(--white); }
.aso-flows .num { font-size: 1.5rem; }
.aso-kv-tight dt, .aso-kv-tight dd { padding: 1rem 0; }
.aso-kv-tight { margin-top: 2rem; }
.aso-nda { margin: 0 0 1rem; color: var(--or-ink, var(--or)); }
.aso-sub-p { margin: 0.75rem 0 0; color: var(--grey); max-width: 64ch; }
.aso-phases { margin-top: 1.5rem; }
.aso-pipe .num { font-size: 1.6rem; }
.aso-tiers .tier-tag { color: var(--grey-2); margin-top: 0.25rem; }
.aso-tiers p.num s { font-size: 0.5em; color: var(--grey-2); margin-left: 0.4rem; font-weight: 400; }
@media (max-width: 960px) { .aso-stage .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aso-flows { grid-template-columns: 1fr; } .aso-mailcmp { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .aso-stage .jgrid { grid-template-columns: 1fr; } .aso-stage { padding: 1.5rem 1.25rem; } }
.aso-stage { margin-top: 40px; border: 1px solid var(--edge); border-radius: 22px; padding: 34px 30px; background: var(--glass) }
.aso-stage .stage-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px }
.aso-stage .cons { display: flex; gap: 30px; flex-wrap: wrap }
.aso-stage .cons>div { display: flex; flex-direction: column }
.aso-stage .cons .cn { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.2vw, 34px); line-height: 1; color: var(--or-ink, var(--or)); font-variant-numeric: tabular-nums; white-space: nowrap }
.aso-stage .cons .cl { display: block; font: 500 10.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .15em; text-transform: uppercase; color: var(--grey-2); margin-top: 8px; line-height: 1.3 }
.aso-stage .jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.aso-stage .jt { border: 1px solid var(--edge); border-radius: 14px; padding: 16px 18px; background: var(--glass); opacity: .26; transform: translateY(10px); transition: opacity .5s, transform .5s, border-color .5s, background .5s }
.aso-stage .jt.hit { opacity: 1; transform: none }
.aso-stage .jt .jmeta { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.aso-stage .jt .jday { font: 500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; color: var(--grey-2) }
.aso-stage .jt .jdev { font: 500 9.5px var(--font-body); letter-spacing: .11em; text-transform: uppercase; color: var(--grey-2); border: 1px solid var(--edge); border-radius: 999px; padding: 3px 9px; white-space: nowrap }
.aso-stage .jt h4 { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; margin: 9px 0 5px }
.aso-stage .jt p { font-size: 12.8px; color: var(--grey-2); line-height: 1.5 }
.aso-stage .jt.hit .jday { color: var(--grey) }
.aso-stage .jt.win { border-color: rgba(255,119,0,.55); background: rgba(255,119,0,.07) }
.aso-stage .jt.win h4, .aso-stage .jt.win .jday { color: var(--or-ink, var(--or)) }
.aso-stage .jt.win .jdev { border-color: rgba(255,119,0,.5); color: var(--or-ink, var(--or)) }
.aso-mailcmp { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; align-items: start }
.aso-mailcmp .mlabel { display: inline-flex; align-items: center; gap: 8px; font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--grey-2); border: 1px solid var(--edge); border-radius: 999px; padding: 6px 14px; margin-bottom: 14px }
.aso-mailcmp .mlabel.good { color: var(--or-ink, var(--or)); border-color: rgba(255,119,0,.5); background: rgba(255,119,0,.08) }
.aso-mailcmp .email { border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .95) }
.aso-mailcmp .ebar { display: flex; flex-direction: column; gap: 3px; padding: 11px 15px; background: var(--glass-2); border-bottom: 1px solid var(--edge); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--grey-2) }
.aso-mailcmp .ebar b { color: var(--white); font-weight: 500 }
.aso-mailcmp .ebody { padding: 26px 24px 22px }
.aso-mailcmp .email.generic .ebody { background: #fff; color: #333; font-family: Arial, Helvetica, sans-serif; text-align: center }
.aso-mailcmp .email.generic .elogo { font: bold 17px Arial, sans-serif; color: #222; letter-spacing: 1px; margin-bottom: 16px }
.aso-mailcmp .email.generic .ehero { height: 96px; background: #E3E3E6; border-radius: 2px; margin-bottom: 18px; display: grid; place-items: center; font: 11px Arial; color: #66666D }
.aso-mailcmp .email.generic .eh { font: bold 19px Arial, sans-serif; color: #222; margin-bottom: 9px }
.aso-mailcmp .email.generic .ep { font-size: 13px; line-height: 1.55; color: #555; margin-bottom: 18px }
.aso-mailcmp .email.generic .ebtn { display: inline-block; background: #2C6ECB; color: #fff; font: bold 12px Arial; letter-spacing: .5px; padding: 12px 30px; border-radius: 3px; margin-bottom: 20px }
.aso-mailcmp .email.generic .egrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px }
.aso-mailcmp .email.generic .egrid i { display: block; height: 58px; background: #EDEDF0; border-radius: 2px }
.aso-mailcmp .email.generic .efoot { font-size: 10px; color: #6B6B72; border-top: 1px solid #E5E5E8; padding-top: 12px }
.aso-mailcmp .email.brand { border-color: rgba(255,119,0,.42) }
.aso-mailcmp .email.brand .ebody { background: #F7F2EA; color: #2A2622; font-family: Georgia, 'Times New Roman', serif; padding: 30px 26px 24px }
.aso-mailcmp .email.brand .elogo { font: 400 15px Georgia, serif; letter-spacing: .34em; text-transform: uppercase; color: #2A2622; text-align: center; padding-bottom: 14px; border-bottom: 1px solid rgba(42, 38, 34, .16); margin-bottom: 6px }
.aso-mailcmp .email.brand .ekick { font: 400 9.5px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #6E655A; text-align: center; margin-bottom: 20px }
.aso-mailcmp .email.brand .ehero { height: 118px; background: linear-gradient(150deg, #E8DFD2, #D8CCBA); border-radius: 1px; margin-bottom: 20px; display: grid; place-items: center; font: 10px Arial; letter-spacing: .16em; text-transform: uppercase; color: #5E5648 }
.aso-mailcmp .email.brand .eh { font: 400 21px Georgia, serif; line-height: 1.3; color: #2A2622; margin-bottom: 11px }
.aso-mailcmp .email.brand .ep { font: 400 13.5px Georgia, serif; line-height: 1.68; color: #5A524A; margin-bottom: 22px }
.aso-mailcmp .email.brand .ebtn { display: inline-block; background: #2A2622; color: #F7F2EA; font: 400 11px Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; padding: 14px 32px; margin-bottom: 22px }
.aso-mailcmp .email.brand .efine { font: 400 10px Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #8C8378; padding-top: 16px; border-top: 1px solid rgba(42, 38, 34, .16) }
.aso-mailcmp .email.brand .efoot { font: 400 10px Arial, sans-serif; color: #6E655A; margin-top: 12px }/* calculators kept as authored (their script owns the ids): same look as the zenoti one */
.aso-calc-kept .calc-out .co-label { font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--or); margin: 0; }
.aso-calc-kept .calc-out .co-big { font: 300 clamp(2.75rem, 2rem + 3vw, 4.5rem) / 1 var(--font-display); letter-spacing: -0.04em; color: #fff; margin: 1rem 0 0; font-variant-numeric: tabular-nums; }
.aso-calc-kept .calc-out .co-sub b { color: #fff; font-weight: 500; }
.aso-calc-kept .calc-rows div span { color: var(--grey); font-size: var(--text-sm); }
.aso-calc-kept .calc-rows div b { font-weight: 500; font-variant-numeric: tabular-nums; }
.aso-calc-kept .calc-rows div.off { display: none; }
.aso-calc-kept .calc-rows div.tot { border-top-color: rgba(255, 255, 255, 0.35); }
.aso-calc-kept .calc-rows div.tot b { color: var(--or); }
.aso-calc-kept .calc-out .co-tie, .aso-calc-kept .calc-out .assump { margin: 1.5rem 0 0; font-size: var(--text-sm); color: var(--grey-2); }
.aso-calc-kept .slider-top label { color: var(--grey); }

/* BFCM 2026 page in the system (push 13) — inside the scope. Only what the standard components do not cover: the countdown
   under the opener copy, the "Ready when" lists inside the check rows, the month nodes on the calendar timeline, the
   two-column audit block (deliverables | request form) and a textarea in the form card. */
.aso-cd-w.elementor-widget { width: 100% !important; max-width: none !important; margin-top: 0.5rem; }
.aso-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.aso-cd > div { padding: 1rem 1rem 0.9rem 0; border-left: 1px solid var(--edge); padding-left: 1rem; }
.aso-cd > div:first-child { border-left: 0; padding-left: 0; }
.aso-cd b { display: block; font: 300 clamp(1.9rem, 1.2rem + 1.8vw, 2.75rem) / 1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--white); }
.aso-cd span { display: block; margin-top: 0.45rem; font: 600 0.68rem / 1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.aso-cd-note { margin: 0.6rem 0 0; font-size: var(--text-xs); color: var(--grey-2); }
:scope.aso-bfcm-opener .opener-l .opener-proof { margin-top: 1.25rem; }
/* checks: the check copy, then what "ready" means as a tag list */
.aso-checks .aso-ready-lbl { margin: 0.9rem 0 0.4rem; font: 600 0.68rem / 1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.aso-checks .ch-tags { margin-top: 0; }
.aso-rowlink-after { margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
/* calendar: month codes in the nodes instead of step numbers */
.aso-cal .aso-fnode { font-size: 0.66rem; letter-spacing: 0.04em; }
.aso-cal .aso-fcard .ch-tags { margin-top: 0.75rem; }
/* the audit: deliverables on the left, the request card on the right — same split as the form-card opener */
.aso-audit { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.aso-audit-l .ch-rows .ch-body p { margin: 0; }
.aso-audit-l .fine { margin-top: 1rem; font-size: var(--text-xs); color: var(--grey-2); }
.aso-audit-r .aso-form { position: sticky; top: 6rem; }
.aso-form textarea { width: 100%; min-height: 120px; padding: 0.75rem 1rem; border: 1px solid var(--edge-2); border-radius: 12px; background: var(--black); color: var(--white); font: inherit; font-size: var(--text-sm); resize: vertical; }
.aso-form textarea::placeholder { color: var(--grey-2); }
.aso-form textarea:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-color: var(--or); }
.aso-form .aso-flash { text-align: left; font-size: var(--text-sm); }
.aso-form-done { display: grid; gap: 1rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: var(--glass); border: 1px solid var(--edge); border-radius: 22px; }
.aso-form-done h3 { margin: 0; font: 500 var(--text-2xl) / 1.1 var(--font-display); letter-spacing: -0.025em; }
.aso-form-done .sub { margin: 0; color: var(--grey); font-size: var(--text-sm); }
.aso-form-done .pill { justify-self: start; }
@media (max-width: 960px) { .aso-audit { grid-template-columns: 1fr; } .aso-audit-r .aso-form { position: static; } }
@media (max-width: 640px) { .aso-cd { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aso-cd > div:nth-child(3) { border-left: 0; padding-left: 0; } .aso-cd > div:nth-child(n + 3) { border-top: 1px solid var(--edge); } }

.aso-form-done[hidden], .aso-form .form-card[hidden] { display: none; }

/* Footer v3 (2026-09-20) — inside the scope; the root is the footer container (.aso-v3.aso-footer). Black sheet with a
   hairline top, the brand column and six link columns on one grid, a quiet recognition strip, the AI row (injected by
   aso-pages.php before .aso-bottom), then the bottom bar. Type: 13.5 px links at 62 % white, 11 px tracked headings. */
:scope.aso-footer { padding: clamp(3rem, 5vw, 4.5rem) 0 1.75rem !important; border-top: 1px solid var(--edge); }
:scope.aso-footer > .elementor-widget, :scope.aso-footer > .aso-ai { width: min(100% - 2 * var(--gutter), var(--wrap)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } /* .aso-ai is injected by aso-pages.php as a direct child, not a widget */
.ftr-main { display: grid; grid-template-columns: minmax(240px, 1.3fr) repeat(6, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 2.2vw, 2.5rem); align-items: start; }
.ftr-brand { padding-right: clamp(0.5rem, 2vw, 2rem); }
.ftr-logo { display: inline-block; }
.ftr-logo img { display: block; height: 38px; width: auto; }
.ftr-tag { margin: 1.25rem 0 0; max-width: 34ch; font-size: var(--text-sm); line-height: 1.6; color: var(--grey); }
.ftr-offices { display: grid; gap: 0.9rem; margin: 1.5rem 0 0; }
.ftr-offices dt { font: 600 0.68rem / 1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 0.3rem; }
.ftr-offices dd { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--grey); }
.ftr-contact { display: grid; gap: 0.35rem; margin: 1.5rem 0 0; }
.ftr-contact a { font-size: var(--text-sm); color: var(--white); text-decoration: none; width: max-content; border-bottom: 1px solid var(--edge-2); transition: border-color 0.2s ease; }
.ftr-contact a:hover { border-bottom-color: var(--white); }
.ftr-social { display: flex; gap: 0.6rem; margin: 1.5rem 0 0; }
.ftr-social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--edge-2); color: rgba(255, 255, 255, 0.8); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.ftr-social a svg { width: 16px; height: 16px; }
.ftr-social a:hover { background: var(--white); color: #000; border-color: var(--white); }
.ftr-cols { display: contents; }
.ftr-col h3 { margin: 0.35rem 0 0.9rem; font: 600 0.68rem / 1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.ftr-col a { display: inline-block; padding: 0.28rem 0; font-size: 0.845rem; line-height: 1.35; color: rgba(255, 255, 255, 0.64); text-decoration: none; transition: color 0.15s ease; }
.ftr-col a:hover { color: var(--white); }
.ftr-recog { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--edge); }
.ftr-recog img { height: 26px; width: auto; max-width: 120px; object-fit: contain; opacity: 0.85; transition: opacity 0.2s ease; }
.ftr-recog img:hover { opacity: 1; }
.ftr-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--edge); }
.ftr-copy { margin: 0; font-size: 0.78rem; color: var(--grey-2); }
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; list-style: none; margin: 0; padding: 0; }
.ftr-legal li { display: flex; align-items: center; }
.ftr-legal li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--edge-2); margin: 0 0.7rem; }
.ftr-legal a { font-size: 0.78rem; color: var(--grey-2); text-decoration: none; padding: 0.35rem 0; transition: color 0.15s ease; }
.ftr-legal a:hover { color: var(--white); }
:scope.aso-footer a:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 1200px) { .ftr-main { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftr-brand { grid-column: 1 / -1; max-width: 42ch; } }
@media (max-width: 640px) { .ftr-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; } .ftr-col a { font-size: 0.9rem; padding: 0.4rem 0; } .ftr-bottom { flex-direction: column; align-items: flex-start; } .ftr-recog img { height: 22px; } }
/* the collapsed Locations block: a hairline row that opens into service → state link lists; closed by default */
.ftr-w-local.elementor-widget { margin-top: clamp(2rem, 3.5vw, 3rem) !important; }
.ftr-local { border-top: 1px solid var(--edge); }
.ftr-local summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; }
.ftr-local summary::-webkit-details-marker { display: none; }
.ftr-local summary span { font: 600 0.68rem / 1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.ftr-local summary em { font-style: normal; font-size: 0.78rem; color: var(--grey-2); display: inline-flex; align-items: center; gap: 0.6rem; }
.ftr-local summary em::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -4px; }
.ftr-local[open] summary em::after { transform: rotate(-135deg); margin-top: 4px; }
.ftr-local summary:hover span, .ftr-local summary:hover em { color: var(--white); }
.ftr-local summary:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.ftr-local-in { display: grid; gap: 0.75rem; padding: 0 0 1.5rem; }
.ftr-local-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0.5rem 1.5rem; align-items: baseline; }
.ftr-local-row h4 { margin: 0; font: 500 0.8rem / 1.4 var(--font-body); color: rgba(255, 255, 255, 0.64); }
.ftr-local-row p { margin: 0; display: flex; flex-wrap: wrap; gap: 0; }
.ftr-local-row a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.78rem; line-height: 1.4; color: var(--grey-2); text-decoration: none; padding: 0; transition: color 0.15s ease; }
.ftr-local-row a + a::before { content: "\00b7"; margin: 0 0.5rem; color: var(--edge-2); }
.ftr-local-row a:hover { color: var(--white); }
@media (max-width: 640px) { .ftr-local-row { grid-template-columns: 1fr; gap: 0.25rem; } }
/* three-level Locations block (push 20): service rows expand into state links with their city links underneath */
.ftr-local-svc { border-top: 1px solid var(--edge); }
.ftr-local-svc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 0.35rem 0; cursor: pointer; list-style: none; }
.ftr-local-svc summary::-webkit-details-marker { display: none; }
.ftr-local-svc summary span { font: 500 0.9rem / 1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.8); }
.ftr-local-svc summary em { font-style: normal; font-size: 0.72rem; color: var(--grey-2); display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.ftr-local-svc summary em::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -3px; }
.ftr-local-svc[open] summary em::after { transform: rotate(-135deg); margin-top: 3px; }
.ftr-local-svc summary:hover span, .ftr-local-svc summary:hover em { color: var(--white); }
.ftr-local-svc summary:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.ftr-local-svc-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem 2rem; padding: 0.25rem 0 1.25rem; }
.ftr-local-state { display: grid; gap: 0.15rem; align-content: start; }
.ftr-local-state a { font-size: 0.78rem; line-height: 1.4; color: var(--grey-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0; transition: color 0.15s ease; }
.ftr-local-state a.st { color: rgba(255, 255, 255, 0.72); font-weight: 500; }
.ftr-local-state a:hover { color: var(--white); }
.ftr-local-state .cities { margin: 0; display: grid; gap: 0; padding-left: 0.85rem; border-left: 1px solid var(--edge); }
.ftr-local-state .cities a { min-height: 40px; }
@media (max-width: 640px) { .ftr-local-svc-in { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ftr-local-row p { display: grid; gap: 0; } .ftr-local-row a + a::before { display: none; } }

/* Founder's note (push 18, 2026-09-20) — inside the scope, on a light sheet. A letter, not a landing page: a sticky
   fact column on the left (from · written · offices · four promises), a 64ch reading measure on the right with quiet
   h3 sub-heads, one pull-quote on a hairline, and a typeset signature (no portrait exists anywhere for this brand). */
.aso-letter { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.aso-letter-aside { position: sticky; top: calc(var(--aso-bar, 72px) + 1.5rem); display: grid; gap: 1.5rem; }
.aso-letter-aside dl { margin: 0; display: grid; gap: 1.1rem; }
.aso-letter-aside dt { font: 600 0.72rem / 1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.aso-letter-aside dd { margin: 0.2rem 0 0; font-size: var(--text-base); line-height: 1.5; color: var(--white); overflow-wrap: anywhere; }
.aso-letter-aside dd a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--edge-2); }
.aso-letter-aside dd a:hover { text-decoration-color: currentColor; }
.aso-letter-aside .aso-slist { margin-top: 0.5rem; }
.aso-letter-aside .aso-slist li { font-size: var(--text-sm); }
.aso-letter-body { max-width: 64ch; font-size: var(--text-lg); line-height: 1.6; color: var(--grey); }
.aso-letter-body > p:first-child { font-size: var(--text-xl); line-height: 1.5; color: var(--white); }
.aso-letter-body p { margin: 0; }
.aso-letter-body p + p { margin-top: 1.1rem; }
.aso-letter-body h3 { margin: 2.75rem 0 0.85rem; font: 500 var(--text-2xl) / 1.15 var(--font-display); letter-spacing: -0.025em; color: var(--white); text-wrap: balance; }
.aso-letter-body b, .aso-letter-body strong { color: var(--white); font-weight: 500; }
.aso-letter-body ol { margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: promise; display: grid; gap: 0.85rem; }
.aso-letter-body ol li { position: relative; padding-left: 3rem; counter-increment: promise; }
.aso-letter-body ol li::before { content: counter(promise, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; font: 500 0.8rem / 1 var(--font-display); letter-spacing: 0.02em; color: var(--or-ink, var(--or)); font-variant-numeric: tabular-nums; }
.aso-letter-quote { margin: 2.5rem 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 2px solid var(--or-ink, var(--or)); }
.aso-letter-quote p { margin: 0; font: 400 clamp(1.35rem, 1rem + 1.2vw, 1.85rem) / 1.3 var(--font-display); letter-spacing: -0.02em; color: var(--white); text-wrap: balance; }
.aso-letter-sign { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--edge); display: grid; gap: 0.35rem; }
.aso-letter-sign .sig { font: 500 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) / 1.1 var(--font-display); letter-spacing: -0.03em; color: var(--white); }
.aso-letter-sign .role { font-size: var(--text-sm); color: var(--grey-2); }
.aso-letter-sign .pill { margin-top: 1.25rem; justify-self: start; }
@media (max-width: 960px) {
  /* one column: the four facts as a compact letter-head, then the letter, then the promises — not 700 px of aside first */
  .aso-letter { grid-template-columns: 1fr; gap: 2rem; }
  .aso-letter-aside { display: contents; }
  .aso-letter-aside dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--edge); }
  .aso-letter-body { order: 1; }
  .aso-letter-aside .promises { order: 2; padding-top: 1.75rem; border-top: 1px solid var(--edge); }
}
@media (max-width: 640px) {
  .aso-letter-body { font-size: var(--text-base); }
  .aso-letter-body > p:first-child { font-size: var(--text-lg); }
}

/* Contact split (push 19, 2026-09-20) — inside the scope; the root is the section (.aso-v3.aso-contact). The get-in-touch
   proportion the owner asked for: a dark left column (eyebrow · H1 · lede · what happens next · email · a quote · the four
   figures) and a white right panel with the form card, sticky while the left scrolls. The root keeps a black band the
   height of the fixed header so the transparent header always sits on black. Under 1024 px: intro → form → the rest. */
:scope.aso-contact { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro form" "more form"; align-items: start; padding: var(--aso-bar, 72px) 0 0 !important; background: #000; }
.aso-contact-l.e-con, .aso-contact-more.e-con { display: grid !important; align-content: start; gap: 1.5rem !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 clamp(2rem, 5vw, 6rem) 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2)) !important; }
.aso-contact-l.e-con { grid-area: intro; padding-top: clamp(3rem, 6vw, 5.5rem) !important; }
.aso-contact-more.e-con { grid-area: more; padding-top: 2.5rem !important; padding-bottom: clamp(3rem, 6vw, 5.5rem) !important; }
.aso-contact-r.e-con { grid-area: form; align-self: stretch; display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; background: #fff; color: #000; padding: clamp(3rem, 6vw, 5.5rem) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 6rem) !important; }
:scope.aso-contact .elementor-widget { margin: 0 !important; width: auto !important; max-width: none !important; }
.aso-contact-l h1.elementor-heading-title { font: 400 clamp(2.5rem, 1.4rem + 4vw, 4.75rem) / 1.02 var(--font-display); letter-spacing: -0.035em; color: var(--white); max-width: 14ch; margin: 0; text-wrap: balance; }
.aso-contact-l .elementor-widget-text-editor p.eyebrow { margin: 0; }
.aso-contact-l .elementor-widget-text-editor p.sub { margin: 0; max-width: 46ch; font-size: var(--text-lg); line-height: 1.55; color: var(--grey); }
/* what happens next */
.aso-contact-steps { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; }
.aso-contact-steps li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 1rem; padding: 1.35rem 0; border-top: 1px solid var(--edge); }
.aso-contact-steps li:last-child { border-bottom: 1px solid var(--edge); }
.aso-contact-steps .num { font: 400 var(--text-2xl) / 1 var(--font-display); letter-spacing: -0.03em; color: var(--or); }
.aso-contact-steps h3 { margin: 0 0 0.35rem; font: 500 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.01em; color: var(--white); }
.aso-contact-steps p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--grey); }
.aso-contact-mail { margin: 0; display: grid; gap: 0.35rem; }
.aso-contact-mail .lbl { font: 600 0.72rem / 1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.aso-contact-mail a { width: max-content; font: 400 var(--text-xl) / 1.3 var(--font-display); letter-spacing: -0.01em; color: var(--white); text-decoration: none; border-bottom: 1px solid var(--edge-2); transition: border-color var(--dur) var(--ease); }
.aso-contact-mail a:hover { border-bottom-color: var(--white); }
.aso-contact-mail .tel { font-size: var(--text-sm); color: var(--grey); }
.aso-contact-mail .tel a { font: inherit; color: var(--white); border: 0; }
.aso-contact-quote { margin: 0.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--edge); }
.aso-contact-quote p { margin: 0; font: 400 var(--text-xl) / 1.4 var(--font-display); letter-spacing: -0.015em; color: var(--white); text-wrap: pretty; }
.aso-contact-quote p::before { content: "\201C"; color: var(--or); margin-right: 0.1em; }
.aso-contact-quote cite { display: block; margin-top: 0.75rem; font-style: normal; font-size: var(--text-sm); color: var(--grey-2); }
.aso-contact-quote cite b { color: var(--white); font-weight: 500; }
:scope.aso-contact .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.75rem; }
:scope.aso-contact .stats .stat { padding: 1.25rem 1.25rem 1.25rem 0; }
:scope.aso-contact .stats .stat-n { font-size: clamp(2rem, 1rem + 2.4vw, 3rem); margin-bottom: 0.5rem; }
.aso-contact-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; margin: 0.5rem 0 0; font-size: var(--text-sm); color: var(--grey); }
.aso-contact-badges img { height: 2rem; width: auto; display: block; }
/* the card */
.aso-contact-card, .aso-contact-card.e-con { position: sticky; top: calc(var(--aso-bar, 72px) + 1.5rem); width: 100% !important; max-width: 600px !important; margin: 0 0 0 auto !important; background: #fff; border: 1px solid #e6e5e1; border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 2rem) !important; display: grid !important; gap: 1.25rem !important; }
.aso-contact-card .aso-contact-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e6e5e1; }
.aso-contact-card .aso-contact-card-head .eyebrow { margin: 0; color: #000; }
.aso-contact-card .aso-contact-card-head .eyebrow::before { background: #ff7700; }
.aso-contact-card .aso-contact-card-head .when { margin: 0; font: 600 0.72rem / 1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b66; }
.aso-contact-card .fine { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #6b6b66; }
.aso-contact-card form.elementor-form .elementor-field-group { margin-bottom: 16px !important; }
.aso-contact-card form.elementor-form .elementor-field-type-submit .elementor-button { width: 100%; }
@media (max-width: 1023px) {
  :scope.aso-contact { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "more"; }
  .aso-contact-l.e-con, .aso-contact-more.e-con { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  .aso-contact-l.e-con { padding-bottom: 2.5rem !important; }
  .aso-contact-r.e-con { padding: 2rem var(--gutter) !important; }
  .aso-contact-card, .aso-contact-card.e-con { position: static; max-width: 640px !important; margin: 0 auto !important; }
  .aso-contact-more.e-con { padding-top: 3rem !important; }
}
@media (max-width: 640px) {
  :scope.aso-contact .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aso-contact-card .aso-contact-card-head { flex-direction: column; gap: 0.35rem; }
}
/* step 2: the cal.com calendar, shown only after the brief is submitted (owner, 2026-09-20); the card stops being sticky
   because the calendar is taller than a viewport */
.aso-contact-card.is-booking, .aso-contact-card.is-booking.e-con { position: static; max-width: 640px !important; }
.aso-book { display: grid; gap: 1rem; }
.aso-book .aso-book-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e6e5e1; }
.aso-book .aso-book-head .eyebrow { margin: 0; color: #000; }
.aso-book .aso-book-head .eyebrow::before { background: #ff7700; }
.aso-book .aso-book-head .when { margin: 0; font: 600 0.72rem / 1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b66; }
.aso-book .aso-book-head .when::before { content: ""; display: inline-block; width: 0.5rem; height: 0.28rem; margin: 0 0.45rem 0.15rem 0; border-left: 2px solid #ff7700; border-bottom: 2px solid #ff7700; transform: rotate(-45deg); }
.aso-book h3 { margin: 0; font: 500 clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem) / 1.2 var(--font-display); letter-spacing: -0.025em; color: #000; text-wrap: balance; outline: none; }
.aso-book h3:focus-visible { outline: 2px solid #ff7700; outline-offset: 4px; border-radius: 2px; }
.aso-book .sub { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: #5c5c57; }
.aso-book .aso-cal { min-height: 560px; margin: 0 -0.5rem; }
.aso-book .aso-cal iframe { width: 100% !important; }
.aso-book .fine a { color: #000; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: #cfcec9; }
.aso-book .fine a:hover { text-decoration-color: #000; }
@media (max-width: 640px) { .aso-book .aso-book-head { flex-direction: column; gap: 0.35rem; } .aso-book .aso-cal { margin: 0; } }
/* alignment pass (owner vs codieshub, 2026-09-20): the card's "Send a note" row sits on the same line as the left eyebrow
   (right-panel top padding = left top padding minus the card padding); the H1 one step smaller so it holds three lines in
   its 550 px column; fields single-column like the reference, with only the two natural pairs side by side */
@media (min-width: 1024px) {
  .aso-contact-r.e-con { padding-top: calc(clamp(3rem, 6vw, 5.5rem) - clamp(1.25rem, 2.5vw, 2rem)) !important; }
  .aso-contact-card, .aso-contact-card.e-con { top: calc(var(--aso-bar, 72px) + 1rem); }
}
.aso-contact-l h1.elementor-heading-title { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); max-width: 13ch; }
.aso-contact-card form.elementor-form .elementor-field-group { width: 100% !important; }
.aso-contact-card form.elementor-form .elementor-field-group.elementor-field-group-field_9c9ad1f,
.aso-contact-card form.elementor-form .elementor-field-group.elementor-field-group-field_dd7b644,
.aso-contact-card form.elementor-form .elementor-field-group.elementor-field-group-field_a3bb44e,
.aso-contact-card form.elementor-form .elementor-field-group.elementor-field-group-field_3095bc8 { width: 50% !important; }
@media (max-width: 480px) { .aso-contact-card form.elementor-form .elementor-field-group { width: 100% !important; } }

/* The audit wizard card (push 19, 2026-09-20) — inside the scope, lives in the white panel of the contact split
   (.aso-contact-r). Same field, label and pill values as forms.css so it reads as the site's one form; chips are pill
   toggles (aria-pressed) that go black when chosen. One screen at a time; the progress bar and counter sit in the head. */
.aso-wiz { display: grid; gap: 1.25rem; color: #000; }
.aso-wiz-head { display: grid; gap: 0.75rem; padding-bottom: 1rem; border-bottom: 1px solid #e6e5e1; }
.aso-wiz-head .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.aso-wiz-head .eyebrow { margin: 0; color: #000; }
.aso-wiz-head .eyebrow::before { background: #ff7700; }
.aso-wiz-count { margin: 0; font: 600 0.72rem / 1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b66; font-variant-numeric: tabular-nums; }
.aso-wiz-bar { height: 3px; background: #ededea; border-radius: 2px; overflow: hidden; }
.aso-wiz-bar span { display: block; height: 100%; width: 0; background: #ff7700; transition: width 0.35s var(--ease); }
.aso-wiz-screen { display: none; }
.aso-wiz-screen.on { display: grid; gap: 1.1rem; }
.aso-wiz-screen h3 { margin: 0; font: 500 clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem) / 1.2 var(--font-display); letter-spacing: -0.025em; color: #000; text-wrap: balance; outline: none; }
.aso-wiz-screen h3:focus-visible { outline: 2px solid #ff7700; outline-offset: 4px; border-radius: 2px; }
.aso-wiz-screen .help { margin: -0.4rem 0 0; font-size: var(--text-sm); line-height: 1.5; color: #5c5c57; }
/* chips */
.aso-wiz-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.aso-wiz-chips button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.6rem 1rem; font: 500 0.92rem / 1.2 var(--font-body); color: #000; background: #fff; border: 1px solid #cfcec9; border-radius: 999px; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.aso-wiz-chips button:hover { border-color: #000; }
.aso-wiz-chips button:focus-visible { outline: 2px solid #ff7700; outline-offset: 2px; }
.aso-wiz-chips button[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
.aso-wiz-chips button[aria-pressed="true"]::before { content: ""; width: 0.55rem; height: 0.3rem; border-left: 2px solid #ff7700; border-bottom: 2px solid #ff7700; transform: translateY(-1px) rotate(-45deg); }
/* fields */
.aso-wiz-fields { display: grid; gap: 1rem; }
.aso-wiz-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aso-wiz-fields.two > .span { grid-column: 1 / -1; }
.aso-wiz-field { display: grid; gap: 0.5rem; }
.aso-wiz-field label { font: 600 0.72rem / 1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #000; }
.aso-wiz-field label i { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6b6b66; }
.aso-wiz-field input { display: block; width: 100%; min-height: 52px; padding: 0.85rem 1rem; font: 400 1rem / 1.4 var(--font-body); color: #000; background: #fff; border: 1px solid #cfcec9; border-radius: 6px; transition: border-color 0.18s ease, box-shadow 0.18s ease; -webkit-appearance: none; appearance: none; }
.aso-wiz-field input::placeholder { color: #8a8a83; }
.aso-wiz-field input:hover { border-color: #9c9b95; }
.aso-wiz-field input:focus { outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(255, 119, 0, 0.28); }
.aso-wiz-field input:focus-visible { outline: 2px solid #ff7700; outline-offset: 2px; box-shadow: none; }
.aso-wiz-field input[aria-invalid="true"] { border-color: #b3261e; }
/* footer row */
.aso-wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.25rem; }
.aso-wiz-nav .back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; font: 500 0.92rem / 1 var(--font-body); color: #5c5c57; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: #cfcec9; }
.aso-wiz-nav .back:hover { color: #000; text-decoration-color: #000; }
.aso-wiz-nav .back:focus-visible, .aso-wiz-nav .next:focus-visible { outline: 2px solid #ff7700; outline-offset: 3px; }
.aso-wiz-nav .next { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.95rem 1.6rem; font: 500 1rem / 1 var(--font-body); color: #fff; background: #000; border: 0; border-radius: 999px; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; }
.aso-wiz-nav .next .i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aso-wiz-nav .next:hover:not([disabled]) { background: #ffe0c8; color: #000; transform: translateY(-1px); }
.aso-wiz-nav .next[disabled] { background: #ededea; color: #8a8a83; cursor: not-allowed; }
.aso-wiz-nav .next:only-child { margin-left: auto; }
.aso-wiz .fine { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #6b6b66; }
.aso-wiz .err { margin: 0; font-size: 0.9rem; color: #b3261e; min-height: 1.2em; }
.aso-wiz .err:empty { display: none; }
/* sending + done */
.aso-wiz-wait { display: grid; justify-items: start; gap: 0.75rem; padding: 1rem 0; }
.aso-wiz-wait .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff7700; animation: aso-wiz-pulse 1s ease-in-out infinite; }
@keyframes aso-wiz-pulse { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aso-wiz-wait .dot { animation: none; } .aso-wiz-bar span { transition: none; } }
.aso-wiz-done .tick { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #000; color: #ffe0c8; }
.aso-wiz-done .tick svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.aso-wiz-done p { margin: 0; font-size: var(--text-base); line-height: 1.55; color: #5c5c57; }
.aso-wiz-done p b { color: #000; font-weight: 500; }
.aso-wiz-done .pill { justify-self: start; margin-top: 0.5rem; }
@media (max-width: 480px) { .aso-wiz-fields.two { grid-template-columns: 1fr; } .aso-wiz-nav { flex-direction: column-reverse; align-items: stretch; } .aso-wiz-nav .back { justify-content: center; } }
[hidden] { display: none !important; }
.aso-wiz-done a, .aso-wiz .fine a { color: #000; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: #cfcec9; }
.aso-wiz-done a:hover, .aso-wiz .fine a:hover { text-decoration-color: #000; }

}
/* The site header is a 15% white glass bar with white links; over a white v3 section it would vanish.
   While one sits under it, the bar goes dark. This is the only rule that touches the header (template 151, bar 0ae5165). */
html.aso-over-light .elementor-location-header .elementor-element-0ae5165 { background-color: rgba(12, 12, 12, 0.86) !important; }

/* round 5: the two kept case-study sections lose their radial glows (their inline .aso-sec rule paints gradients) */
.elementor-element-6ae7f995.aso-sec, .elementor-element-b392888 { background-image: none !important; background-color: #000 !important; }

/* round 7: the kit paints a fixed radial glow through body::before; every v3 section is flat black, so on the homepage the glow only showed through the review carousel and the footer */
body::before { display: none !important; } /* this stylesheet only loads on v3 pages */

/* services page: the proposal-form section keeps its markup; its inline .aso-sec glow goes flat like the case-study sections */
.elementor-element-20c03c2.aso-sec { background-image: none !important; background-color: #000 !important; }

/* bulk pass: any container flagged .aso-flat loses the inline .aso-sec radial glow */
.aso-flat.aso-sec { background-image: none !important; background-color: #000 !important; }
/* Elementor form fields site-wide: the cloned pages paint a two-layer gradient into every input (page custom CSS); one flat glass field instead */
form.elementor-form .elementor-field-group .elementor-field-textual, form.elementor-form .elementor-field-group .elementor-select-wrapper select { background: rgba(255, 255, 255, 0.04) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; color: #fff !important; }
form.elementor-form .elementor-field-group .elementor-field-textual:focus, form.elementor-form .elementor-field-group .elementor-select-wrapper select:focus { border-color: #ff7700 !important; box-shadow: 0 0 0 3px rgba(255, 119, 0, 0.18) !important; outline: none; }
form.elementor-form .elementor-field-group .elementor-field-textual::placeholder { color: #6f6f6a; }

/* anchor jumps ("On this page", #faq …) land below the fixed header; the prototype had this on html but html/body rules are dropped by the build */
html { scroll-padding-top: 6.5rem; }

@keyframes aoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Elementor forms inside v3 sections (light and dark) are styled in forms.css since push 13 */


/* ============================================================================
   Site header, v3.1 (2026-09-20) — outside @scope on purpose; the only file that touches template 151 and the mega menu
   (ElementsKit content post 3089). Nothing in either template changed except the CTA label and two copy fixes.
   Why v3.1: the owner called v3 "odd, not professional, mega menu glitches". What it was: 12 px tracked-caps nav next to
   two competing pills (an outlined BFCM pill and the white CTA), the partner badge reading as a second logo, and a mega
   menu that floated 11 px under the bar as a rounded card inside a black sheet — the gap closed it when the pointer
   crossed, ElementsKit slid it in over 0.4 s, and the case-study card carried a brown glow and a lowercase heading.
   Now: 72 px bar, wordmark + a quiet partner mark, normal-case 15 px nav, one white pill, BFCM as a dotted text link;
   the panel is a flat sheet attached to the bar (no gap, an invisible bridge under the trigger), fades in over 180 ms,
   four flat columns at 1400, the card a hairline panel.
   States: top of a dark opener → transparent + hairline · html.aso-scrolled / html.aso-over-light → near-black, blurred.
   ============================================================================ */
:root { --aso-bar: 72px; }
@media (max-width: 1024px) { :root { --aso-bar: 64px; } }
.elementor-location-header { position: relative; z-index: 1000; height: 0; }
.elementor-location-header .elementor-sticky__spacer { display: none !important; }
.elementor-location-header > .e-con:first-child { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 1000; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0); transition: background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease; }
html.aso-scrolled .elementor-location-header > .e-con:first-child, html.aso-over-light .elementor-location-header > .e-con:first-child { background: rgba(8, 8, 8, 0.86) !important; border-bottom-color: rgba(255, 255, 255, 0.09); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.elementor-location-header > .e-con:first-child > .e-con-inner { width: min(100% - 2 * clamp(1rem, 3vw, 2.5rem), 1400px) !important; max-width: none !important; padding: 0 !important; margin: 0 auto !important; }
/* the pill container Elementor makes sticky on its own: a plain full-width row, no glass, no radius */
.elementor-location-header .elementor-element-0ae5165 { position: relative !important; top: auto !important; left: auto !important; inset-inline-start: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; min-height: var(--aso-bar) !important; align-items: center !important; border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.aso-over-light .elementor-location-header .elementor-element-0ae5165 { background-color: transparent !important; }
/* logo group: the wordmark, then the Select-partner mark as a quiet secondary element behind a hairline */
.elementor-location-header .elementor-element-7097645 { gap: 0 !important; align-items: center !important; flex-wrap: nowrap !important; }
.elementor-location-header .elementor-element-7097645 .elementor-widget { width: auto !important; max-width: none !important; }
.elementor-location-header .elementor-element-7097645 img { display: block; height: auto; }
.elementor-location-header .elementor-element-7cd662a img { height: 40px; width: auto; max-width: none; }
.elementor-location-header .elementor-element-d804807 { display: none !important; }
/* right group: the nav, then the one white pill */
.elementor-location-header .elementor-element-3c22a7f { gap: 1.75rem !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; }
.elementor-location-header .elementskit-navbar-nav { gap: 0 !important; align-items: center; }
.elementor-location-header .elementskit-navbar-nav > li { position: relative; margin: 0 !important; }
.elementor-location-header .elementskit-navbar-nav > li > a { display: inline-flex !important; align-items: center; gap: 0.35rem; font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.94rem !important; font-weight: 500 !important; letter-spacing: -0.005em; text-transform: none !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.84) !important; padding: 0.7rem 0.95rem !important; position: relative; transition: color 0.18s ease; }
.elementor-location-header .elementskit-navbar-nav > li > a::after { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.35rem; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1); }
.elementor-location-header .elementskit-navbar-nav > li > a:hover, .elementor-location-header .elementskit-navbar-nav > li > a:focus-visible, .elementor-location-header .elementskit-navbar-nav > li:hover > a, .elementor-location-header .elementskit-navbar-nav > li.current-menu-item > a, .elementor-location-header .elementskit-navbar-nav > li.current-menu-ancestor > a { color: #fff !important; }
.elementor-location-header .elementskit-navbar-nav > li > a:hover::after, .elementor-location-header .elementskit-navbar-nav > li > a:focus-visible::after, .elementor-location-header .elementskit-navbar-nav > li:hover > a::after, .elementor-location-header .elementskit-navbar-nav > li.current-menu-item > a::after { transform: scaleX(1); }
.elementor-location-header .elementskit-navbar-nav > li > a:focus-visible { outline: 2px solid #ff7700; outline-offset: 2px; }
@media (min-width: 1025px) {
  .elementor-location-header .elementskit-navbar-nav > li > a .elementskit-submenu-indicator { width: 0.65rem; height: 0.65rem; margin: 0 0 0 0.1rem; opacity: 0.7; fill: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
  .elementor-location-header .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator { transform: rotate(180deg); opacity: 1; }
}
/* ElementsKit capitalises every word in the page lists ("Figma To Shopify", "Next.Js") on every width; the source casing is right */
.elementor-location-header .elementor-widget-elementskit-page-list *, .elementskit-menu-container .elementor-widget-elementskit-page-list * { text-transform: none !important; }
/* the seasonal item: a normal nav link with an orange dot, not a second pill */
.elementor-location-header .aso-navbfcm > a { color: rgba(255, 255, 255, 0.84) !important; gap: 0.5rem !important; }
.elementor-location-header .aso-navbfcm > a .aso-navdot { width: 6px; height: 6px; border-radius: 50%; background: #ff7700; }
.elementor-location-header .elementor-element-51187ed { margin-left: 0.25rem; }
.elementor-location-header .elementor-element-51187ed .elementor-button { display: inline-flex !important; align-items: center; gap: 0.5rem; height: 44px; padding: 0 1.3rem !important; background: #fff !important; color: #000 !important; border: 0 !important; border-radius: 999px !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.94rem !important; font-weight: 500 !important; letter-spacing: -0.005em; line-height: 1 !important; text-transform: none !important; box-shadow: none !important; transition: background-color 0.2s ease, transform 0.2s ease; }
.elementor-location-header .elementor-element-51187ed .elementor-button .elementor-button-icon svg { width: 0.85em; height: 0.85em; }
.elementor-location-header .elementor-element-51187ed .elementor-button:hover { background: #ffe0c8 !important; color: #000 !important; }
.elementor-location-header .elementor-element-51187ed .elementor-button:focus-visible { outline: 2px solid #ff7700; outline-offset: 3px; }
/* pages without a v3 opener (legal pages, tools) start below the bar; v3 openers and the landing-page heroes run under it */
body.aso-plain main.site-main:not(.aso-p) { padding-top: calc(var(--aso-bar) + 0.5rem); }
.aso-p .hero { padding-top: calc(clamp(58px, 7vw, 104px) + var(--aso-bar)) !important; }
main.site-main.aso-lg { padding-top: calc(var(--aso-bar) + 0.5rem); }
/* ---------------------------------------------------------------- mega menu (≥ 1025) */
@media (min-width: 1025px) {
  /* an invisible bridge from the trigger down to the sheet, so the pointer never crosses a dead zone */
  .elementor-location-header .elementskit-navbar-nav > li.elementskit-dropdown-has::before { content: ""; position: absolute; left: -1rem; right: -1rem; top: 100%; height: 1.5rem; }
  .elementor-location-header .elementskit-megamenu-panel { position: fixed !important; top: var(--aso-bar) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; border-radius: 0 !important; background: #0a0a0a !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.09) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45) !important; transition: opacity 0.18s ease, visibility 0s linear 0.18s !important; }
  .elementor-location-header .elementskit-navbar-nav > li.elementskit-dropdown-has:hover > .elementskit-megamenu-panel, .elementor-location-header .elementskit-navbar-nav > li.elementskit-dropdown-has:focus-within > .elementskit-megamenu-panel { transition: opacity 0.18s ease !important; }
  .elementor-location-header .elementskit-megamenu-panel > .elementor { width: min(100% - 2 * clamp(1rem, 3vw, 2.5rem), 1400px) !important; margin: 0 auto !important; }
  /* post 3089 wraps its columns in two boxed containers with their own black card, 30 px radius and padding — flattened */
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-26fabe4e, .elementor-location-header .elementskit-megamenu-panel .elementor-element-6f3c5319 { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-26fabe4e > .e-con-inner, .elementor-location-header .elementskit-megamenu-panel .elementor-element-6f3c5319 > .e-con-inner { width: 100% !important; max-width: none !important; padding: 0 !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-6f3c5319 > .e-con-inner { padding: 2.25rem 0 2.5rem !important; gap: clamp(1.5rem, 3vw, 3.5rem) !important; align-items: flex-start !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-6f3c5319 > .e-con-inner > .e-con { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  /* column labels */
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-heading { margin-bottom: 0.5rem !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-heading * { font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.5) !important; margin: 0 !important; line-height: 1.2 !important; }
  /* the lists */
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list .elementor-icon-list-item a { display: block !important; padding: 0.55rem 0 !important; text-decoration: none !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list .ekit_page_list_content, .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list .elementor-icon-list-text { display: block !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list .ekit_page_list_title_title { display: block !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.95rem !important; font-weight: 500 !important; letter-spacing: -0.005em !important; line-height: 1.3 !important; text-transform: none !important; color: #fff !important; transition: color 0.15s ease; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list .ekit_menu_subtitle { display: block !important; margin-top: 0.15rem !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.8rem !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.4 !important; text-transform: none !important; color: rgba(255, 255, 255, 0.52) !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a:hover .ekit_page_list_title_title, .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a:focus-visible .ekit_page_list_title_title { color: #ffe0c8 !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a:focus-visible { outline: 2px solid #ff7700; outline-offset: 2px; }
  /* the case-study panel: a hairline card, no glow */
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-9a798f3 { background: rgba(255, 255, 255, 0.04) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; padding: 1.5rem !important; gap: 0.6rem !important; margin-top: 1.75rem !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-5e91977, .elementor-location-header .elementskit-megamenu-panel .elementor-element-5e91977 p { font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #ff7700 !important; margin: 0 !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-4447edc .elementor-heading-title { font-family: 'Instrument Sans', 'Inter', system-ui, sans-serif !important; font-size: 1.2rem !important; font-weight: 500 !important; letter-spacing: -0.015em !important; line-height: 1.25 !important; text-transform: none !important; color: #fff !important; margin: 0 !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-d5a8a3f { font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.86rem !important; line-height: 1.55 !important; color: rgba(255, 255, 255, 0.68) !important; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-764adfd .elementor-button { display: inline-flex !important; align-items: center; gap: 0.45rem; height: 40px; padding: 0 1.1rem !important; background: #fff !important; color: #000 !important; border-radius: 999px !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.86rem !important; font-weight: 500 !important; line-height: 1 !important; text-transform: none !important; transition: background-color 0.2s ease; }
  .elementor-location-header .elementskit-megamenu-panel .elementor-element-764adfd .elementor-button:hover { background: #ffe0c8 !important; color: #000 !important; }
}
/* ---------------------------------------------------------------- phone / tablet bar */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-element-7cd662a img { height: 34px; }
  .elementor-location-header .elementskit-menu-hamburger { width: 44px !important; height: 44px !important; border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; background: transparent !important; }
  .elementor-location-header .elementskit-menu-container .aso-navbfcm { padding: 0 !important; margin: 0 !important; }
  .elementor-location-header .elementskit-menu-container .aso-navbfcm > a { display: flex !important; align-items: center; gap: 0.6rem; width: 100%; padding: 0 22px !important; min-height: 54px; }
}

/* ============================================================================
   Elementor Pro forms inside v3 sections (2026-09-19) — outside @scope; specificity beats Elementor's per-widget CSS
   (.elementor-<page> .elementor-element.elementor-element-<id> …) without !important except where Elementor itself uses it.
   The forms stay Elementor forms (their email actions, reCAPTCHA and the owner's field list are untouched); only the
   look changes: the same field, label, pill and file control as the hand-built .aso-form cards on the landing pages.
   Light sheet = default here (every "Start a project" / contact section is a light sheet); dark variants follow.
   ============================================================================ */
.aso-v3 form.elementor-form { font-family: 'Inter', system-ui, sans-serif; }
.aso-v3 form.elementor-form .elementor-form-fields-wrapper { margin-left: -12px; margin-right: -12px; row-gap: 0; }
.aso-v3 form.elementor-form .elementor-field-group { padding-left: 12px !important; padding-right: 12px !important; margin-bottom: 22px !important; }
/* the message and the attachment take the full row; two short fields share one */
.aso-v3 form.elementor-form .elementor-field-group.elementor-field-type-textarea,
.aso-v3 form.elementor-form .elementor-field-group.elementor-field-type-upload,
.aso-v3 form.elementor-form .elementor-field-group.elementor-field-type-recaptcha,
.aso-v3 form.elementor-form .elementor-field-group.elementor-field-type-submit,
.aso-v3 form.elementor-form .elementor-field-group.elementor-field-type-acceptance,
.aso-v3 form.elementor-form .elementor-field-group.elementor-field-type-checkbox,
.aso-v3 form.elementor-form .elementor-field-group.elementor-field-type-radio { width: 100%; }
@media (max-width: 767px) { .aso-v3 form.elementor-form .elementor-field-group { width: 100%; } }
/* labels: the small tracked caption used across the system; the required mark in the brand orange, not browser red */
.aso-v3 form.elementor-form .elementor-field-group > label.elementor-field-label,
.aso-v3 form.elementor-form .elementor-field-subgroup label { display: block; margin: 0 0 0.55rem !important; font: 600 0.72rem / 1.2 'Inter', system-ui, sans-serif !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #000 !important; }
.aso-v3 form.elementor-form .elementor-mark-required .elementor-field-label::after { content: "*"; color: #ff7700; padding-left: 0.3em; }
/* fields */
.aso-v3 form.elementor-form .elementor-field-group .elementor-field-textual,
.aso-v3 form.elementor-form .elementor-field-group .elementor-select-wrapper select { display: block; width: 100%; min-height: 52px !important; padding: 0.85rem 1rem !important; font: 400 1rem / 1.4 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; color: #000 !important; background: #fff !important; background-image: none !important; border: 1px solid #cfcec9 !important; border-radius: 6px !important; box-shadow: none !important; transition: border-color 0.18s ease, box-shadow 0.18s ease; -webkit-appearance: none; appearance: none; }
.aso-v3 form.elementor-form .elementor-field-group .elementor-field-textual::placeholder { color: #8a8a83; opacity: 1; }
.aso-v3 form.elementor-form .elementor-field-group .elementor-field-textual:hover,
.aso-v3 form.elementor-form .elementor-field-group .elementor-select-wrapper select:hover { border-color: #9c9b95 !important; }
.aso-v3 form.elementor-form .elementor-field-group .elementor-field-textual:focus,
.aso-v3 form.elementor-form .elementor-field-group .elementor-select-wrapper select:focus { outline: none; border-color: #000 !important; box-shadow: 0 0 0 3px rgba(255, 119, 0, 0.28) !important; }
.aso-v3 form.elementor-form .elementor-field-group .elementor-field-textual:focus-visible { outline: 2px solid #ff7700; outline-offset: 2px; box-shadow: none !important; }
.aso-v3 form.elementor-form .elementor-field-group textarea.elementor-field-textual { min-height: 150px !important; resize: vertical; line-height: 1.55 !important; }
.aso-v3 form.elementor-form .elementor-field-group .elementor-select-wrapper { position: relative; }
.aso-v3 form.elementor-form .elementor-field-group .elementor-select-wrapper::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.aso-v3 form.elementor-form .elementor-field-group .elementor-select-wrapper select { padding-right: 2.5rem; }
/* attachments: a quiet dashed drop area with a pill-shaped chooser instead of the browser's grey button */
.aso-v3 form.elementor-form .elementor-field-group input[type="file"] { display: block; width: 100%; padding: 0.9rem 1rem !important; font: 400 0.95rem / 1.4 'Inter', system-ui, sans-serif !important; color: #4a4a46 !important; background: #fafaf7 !important; border: 1px dashed #b8b7b1 !important; border-radius: 6px !important; cursor: pointer; }
.aso-v3 form.elementor-form .elementor-field-group input[type="file"]:hover { border-color: #000 !important; }
.aso-v3 form.elementor-form .elementor-field-group input[type="file"]:focus-visible { outline: 2px solid #ff7700; outline-offset: 2px; }
.aso-v3 form.elementor-form .elementor-field-group input[type="file"]::file-selector-button { margin: 0 0.9rem 0 0; padding: 0.55rem 1rem; font: 500 0.85rem / 1 'Inter', system-ui, sans-serif; color: #000; background: #fff; border: 1px solid #000; border-radius: 999px; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; }
.aso-v3 form.elementor-form .elementor-field-group input[type="file"]:hover::file-selector-button { background: #000; color: #fff; }
/* checkboxes / acceptance */
.aso-v3 form.elementor-form .elementor-field-subgroup .elementor-field-option { display: flex; align-items: flex-start; gap: 0.6rem; }
.aso-v3 form.elementor-form .elementor-field-subgroup label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.95rem; color: #2a2a28; }
.aso-v3 form.elementor-form input[type="checkbox"], .aso-v3 form.elementor-form input[type="radio"] { width: 18px; height: 18px; margin: 0.15rem 0 0; accent-color: #ff7700; }
/* reCAPTCHA cannot be restyled (iframe); give it the same rhythm as a field */
.aso-v3 form.elementor-form .elementor-field-type-recaptcha { margin-bottom: 26px; }
.aso-v3 form.elementor-form .elementor-field-type-recaptcha .elementor-g-recaptcha > div { border-radius: 6px; overflow: hidden; }
/* submit: the black pill from the light sheets, peach on hover like the header CTA; a full-width block on phones */
.aso-v3 form.elementor-form .elementor-field-type-submit { margin-bottom: 0; }
.aso-v3 form.elementor-form .elementor-field-type-submit .elementor-button,
.aso-v3 form.elementor-form button.elementor-button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.95rem 1.6rem !important; font: 500 1rem / 1 'Inter', system-ui, sans-serif !important; letter-spacing: 0; text-transform: none !important; color: #fff !important; background: #000 !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.aso-v3 form.elementor-form .elementor-field-type-submit .elementor-button:hover,
.aso-v3 form.elementor-form button.elementor-button[type="submit"]:hover { background: #ffe0c8 !important; color: #000 !important; transform: translateY(-1px); }
.aso-v3 form.elementor-form .elementor-field-type-submit .elementor-button:focus-visible { outline: 2px solid #ff7700; outline-offset: 3px; }
.aso-v3 form.elementor-form .elementor-field-type-submit .elementor-button .elementor-button-text { font: inherit; }
@media (max-width: 767px) { .aso-v3 form.elementor-form .elementor-field-type-submit .elementor-button { width: 100%; } }
/* the line under the button that Elementor prints on submit */
.aso-v3 form.elementor-form .elementor-message { margin-top: 1rem; font: 400 0.95rem / 1.5 'Inter', system-ui, sans-serif; color: #000; }
.aso-v3 form.elementor-form .elementor-message.elementor-message-success { color: #0a6b38; }
.aso-v3 form.elementor-form .elementor-message.elementor-message-danger, .aso-v3 form.elementor-form .elementor-error { color: #b3261e; }
.aso-v3 form.elementor-form .elementor-field-group.elementor-error .elementor-field-textual { border-color: #b3261e !important; }
.aso-v3 form.elementor-form .elementor-field-group .elementor-field-textual:disabled { opacity: 0.55; cursor: not-allowed; }
/* the same form on a dark section (an owner section that was left black): inverted field colours, white pill */
.aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-group > label.elementor-field-label, .aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-subgroup label { color: rgba(255, 255, 255, 0.82); }
.aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-group .elementor-field-textual, .aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-group .elementor-select-wrapper select { color: #fff !important; background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
.aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-group .elementor-field-textual::placeholder { color: rgba(255, 255, 255, 0.45); }
.aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-group .elementor-field-textual:focus, .aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-group .elementor-select-wrapper select:focus { border-color: #fff !important; }
.aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-group input[type="file"] { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.25); }
.aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-group input[type="file"]::file-selector-button { color: #fff; background: transparent; border-color: #fff; }
.aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-field-type-submit .elementor-button, .aso-v3:not(.light):not(.aso-contact) form.elementor-form button.elementor-button[type="submit"] { color: #000 !important; background: #fff !important; }
.aso-v3:not(.light):not(.aso-contact) form.elementor-form .elementor-message { color: #fff; }
/* the section around it: the form row sits under the head with the same measure as the rows on other sheets */
.aso-v3.aso-form-sec .aso-form-row { max-width: 1040px; }

/* ============================================================================
   The form sheet as one component (2026-09-20, push 19). Before: the head row across the top and the Elementor form
   stretched across the whole 1248 px wrap underneath — every field 600 px wide, the message 1230 px, a 1,300 px section.
   Now, codieshub's get-in-touch proportion: the head (eyebrow · h2 · aside) stacked on the left and sticky, the form in a
   bounded white card (max 640 px) on the right; one column under 1024 px with the same card. Pure CSS, so every
   "Start a project" / contact section on the site changes at once without touching page content.
   ============================================================================ */
.aso-v3.aso-form-sec .aso-form-row.e-con { background: #fff; border: 1px solid #e6e5e1; border-radius: 16px; padding: clamp(1.25rem, 3vw, 2.25rem) !important; max-width: 640px; }
.aso-v3.aso-form-sec.tint .aso-form-row.e-con, .aso-v3.aso-form-sec.light .aso-form-row.e-con { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.aso-v3.aso-form-sec .aso-form-row .elementor-widget-form { max-width: none; }
.aso-v3.aso-form-sec form.elementor-form .elementor-field-group { margin-bottom: 18px !important; }
.aso-v3.aso-form-sec form.elementor-form .elementor-field-type-submit .elementor-button { width: 100%; }
@media (max-width: 1023px) {
  .aso-v3.aso-form-sec .aso-form-row.e-con { margin: 2rem auto 0 !important; }
}
@media (min-width: 1024px) {
  .aso-v3.aso-form-sec.e-con { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)) !important; padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2)) !important; }
  .aso-v3.aso-form-sec > .ch-head.e-con { grid-template-columns: 1fr !important; align-items: start; gap: 1.25rem !important; width: auto !important; margin: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; position: sticky; top: calc(var(--aso-bar, 72px) + 2.5rem); }
  .aso-v3.aso-form-sec > .ch-head .ch-aside.e-con, .aso-v3.aso-form-sec > .ch-head .ch-aside { justify-items: start; justify-self: start; text-align: left; max-width: 38ch; }
  .aso-v3.aso-form-sec > .aso-form-row.e-con { width: 100% !important; margin: 0 !important; justify-self: end; }
}