/* Home of Digital — site layer on top of proemi.css (design-system tokens + components).
   Values follow the "StoryBrand Site" design in Claude Design. */

/* Brand colours chosen in the design: Orange main, Sky blue secondary.
   [data-theme] is included because proemi.css re-declares the accent inside light/dark scopes. */
html:root,
html [data-theme] {
	--prm-02: #f2994a;
	--accent: #f2994a;
	--accent-hover: color-mix(in oklab, #f2994a 86%, black);
	--shadow-cta-hover: 0 16px 32px color-mix(in srgb, #f2994a 35%, transparent);
	--accent-2: #5bc4f5;
}

/* Content column: at most 1440px wide, centred. Panels and dark cards keep their full-width background. */
:root {
	--hod-maxw: 1440px;
	--hod-px-panel: max(clamp(24px, 4vw, 76px), calc((100% - var(--hod-maxw)) / 2));
	--hod-px-sec: max(clamp(20px, 3.5vw, 54px), calc((100% - var(--hod-maxw)) / 2));
}

html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--page); }
.hod-site { background: var(--page); min-height: 100vh; }
main:focus { outline: none; }

a { color: var(--ink); }
a:hover { color: var(--accent-ink); }
[data-theme="dark"] a:hover { color: var(--white); }
.pm-btn:hover { color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
button { font: inherit; }
.pm-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pm-btn[disabled]:hover { background: var(--accent); }

/* Colour and weight helpers */
.hod-c-label { color: var(--label); }
.hod-c-muted { color: var(--muted); }
.hod-c-inksoft { color: var(--ink-soft); }
.hod-c-accent2 { color: var(--accent-2, var(--label)); }
.hod-c-accentink { color: var(--accent-ink); }
.hod-w400 { font-weight: 400; }
.hod-minh { min-height: 44px; display: flex; align-items: center; }
.hod-col { display: flex; flex-direction: column; }
.hod-stack { display: grid; }
.hod-stack > * { grid-area: 1 / 1; }
.hod-printonly { display: none; }

/* Skip link */
.hod-skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--white); color: var(--ink); padding: 12px 18px; border-radius: var(--radius-pill); }
.hod-skip:focus { left: 12px; }

/* Frame and dark top panel */
.hod-frame { padding: var(--space-frame); }
.hod-top { background: var(--surface); color: var(--ink); border-radius: var(--radius-panel); display: flex; flex-direction: column; }
.hod-top--full { min-height: calc(100vh - 12px); }
.hod-pagehead { display: flex; flex-direction: column; gap: 32px; padding: clamp(56px, 7vw, 110px) var(--hod-px-panel) clamp(40px, 5vw, 64px); }
.hod-pagehead > * { max-width: var(--head-w, none); }
.hod-h1 { margin: 0; font-size: clamp(38px, 4.8vw, 72px); color: var(--ink); text-wrap: balance; }
.hod-h2 { margin: 0; color: var(--ink); font-size: clamp(44px, 5vw, 72px); line-height: 1.05; }

/* Header */
.hod-header { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 18px var(--hod-px-panel) 0; }
.hod-logo { color: var(--ink); text-decoration: none; font-family: var(--font-sans); font-size: 21px; font-weight: 500; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; min-height: 44px; padding-top: 10px; box-sizing: border-box; }
.hod-logo__of { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 25px; }
.hod-logo__mark { width: 27px; height: 27px; flex-shrink: 0; align-self: center; margin-right: 5px; }
.hod-logo--compact .hod-logo__mark { width: 23px; height: 23px; margin-right: 4px; }
.hod-logo--compact { font-size: 19px; gap: 5px; min-height: 0; padding-top: 0; }
.hod-logo--compact .hod-logo__of { font-size: 22px; }
.hod-nav { display: flex; gap: clamp(16px, 2.2vw, 28px); align-items: center; white-space: nowrap; }
.hod-nav__link { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.hod-nav__link span { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.hod-nav__link[aria-current] span, .hod-nav__link:hover span { border-bottom-color: currentColor; }
.hod-nav__status { display: flex; align-items: center; min-height: 44px; }
/* The header's contact button: accent pill with the pulsing availability dot.
   A green halo is lost on orange, so the dot stays solid green and a light ring pulses out of it. */
.hod-btn-contact { gap: 12px; padding: 12px 24px 12px 18px; }
.hod-btn-contact .pm-status__dot { width: 10px; height: 10px; animation: hod-dot-ring 2s ease-out infinite; }
.hod-btn-contact .pm-status__dot::before { display: none; }
@keyframes hod-dot-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .95); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
.hod-header--compact { padding: 6px max(6px, calc((100% - var(--hod-maxw)) / 2)) 6px max(24px, calc((100% - var(--hod-maxw)) / 2)); }
.hod-header__right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hod-header--compact .hod-nav { gap: clamp(16px, 2vw, 24px); }
.hod-header__end { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 28px); white-space: nowrap; }
/* Phones: logo and Contact share the first row, the page links sit on the second. */
@media (max-width: 560px) {
	.hod-header__end { display: contents; }
	.hod-header .hod-nav__status { order: 1; }
	/* Logo and the contact button share the first row. */
	.hod-header:not(.hod-header--compact) { column-gap: 12px; }
	.hod-header .hod-btn-contact { padding: 9px 14px 9px 12px; font-size: 14px; gap: 8px; }
	.hod-header .hod-nav { order: 2; flex-basis: 100%; flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
}
@media (max-width: 900px) {
	.hod-header--compact .hod-nav { display: none; }
}
/* Phones: the compact bar keeps logo and button on one row. */
@media (max-width: 560px) {
	.hod-header--compact { flex-wrap: nowrap; gap: 12px; padding-left: 18px; }
	.hod-header--compact .hod-logo { font-size: 17px; }
	.hod-header--compact .hod-logo__of { font-size: 20px; }
	.hod-sticky .pm-btn { padding: 10px 16px; font-size: 15px; gap: 8px; }
}

/* Header that returns when the visitor scrolls up */
.hod-sticky { position: fixed; top: 6px; left: 6px; right: 6px; z-index: 60; background: var(--surface); color: var(--ink); border-radius: var(--radius-panel); box-shadow: var(--shadow-lift); transform: translateY(calc(-100% - 12px)); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s; }
.hod-sticky.is-visible { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.hod-sticky .pm-btn { padding: 12px 22px; }
/* Logged-in editors see the WordPress toolbar on top (32px, 46px on tablets; it scrolls away on phones). */
.admin-bar .hod-sticky { top: 38px; }
.admin-bar .hod-summary { top: 120px; }
html:has(body.admin-bar) { scroll-padding-top: 120px; }
@media (max-width: 782px) { .admin-bar .hod-sticky { top: 52px; } }
@media (max-width: 600px) { .admin-bar .hod-sticky { top: 6px; } }

/* Mobile action bar */
.hod-mbar { position: fixed; left: 6px; right: 6px; bottom: 6px; z-index: 60; background: var(--surface); color: var(--ink); border-radius: var(--radius-panel); padding: 8px 8px 8px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; box-shadow: var(--shadow-lift); transform: translateY(calc(100% + 12px)); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s; }
.hod-mbar.is-visible { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.hod-mbar .pm-btn { padding: 12px 20px; }
.hod-mbar a:not(.pm-btn) { color: var(--ink); }

/* Home hero (industry rotator) */
.hod-hero { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 4vw, 56px); padding: clamp(32px, 4.5vw, 72px) var(--hod-px-panel) clamp(24px, 3vw, 36px); }
.hod-hero__main { display: flex; flex-wrap: wrap; align-items: center; gap: 40px clamp(32px, 4vw, 80px); }
.hod-hero__copy { flex: 1.8 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hod-hero__title { position: relative; margin: 0; font-size: calc(clamp(40px, 4vw, 70px) * var(--hod-fit, 1)); line-height: 1.12; color: var(--ink); height: 2.24em; white-space: nowrap; }
.hod-hero__line { display: block; white-space: nowrap; }
.hod-hero__box { --pad-l: .14em; --pad-r: .14em; position: relative; display: inline-block; vertical-align: top; height: 1.12em; background: var(--accent); color: var(--on-accent); border-radius: .14em; overflow: hidden; transition: width 620ms cubic-bezier(.2, .8, .2, 1), background .3s; }
.hod-hero__box--serif { --pad-r: .24em; font-family: var(--font-serif); font-style: italic; letter-spacing: -0.01em; }
.hod-hero__word { position: absolute; left: var(--pad-l); top: 0; display: block; line-height: 1.12em; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform 620ms cubic-bezier(.2, .8, .2, 1), opacity 372ms; }
.hod-hero__box--serif .hod-hero__word { transition-delay: 70ms, 0ms; }
.hod-hero__word.is-on { opacity: 1; transform: none; }
.hod-hero__word.is-prev { transform: translateY(-100%); }
/* Before the script measures the words, the active word sizes its box. */
.hod-hero__box:not(.is-measured) .hod-hero__word.is-on { position: relative; left: 0; padding: 0 var(--pad-r) 0 var(--pad-l); }
.hod-hero__measure { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
.hod-hero__measure--serif { font-family: var(--font-serif); font-style: italic; letter-spacing: -0.01em; }
.hod-hero__sub { margin: 0; color: var(--muted); font-weight: 400; max-width: 46ch; opacity: 0; transform: translateY(8px); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); }
.hod-hero__sub.is-on { opacity: 1; transform: none; transition-delay: 160ms, 0ms; }
.hod-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hod-hero__card { flex: 1 1 340px; min-width: 0; max-width: 620px; box-sizing: border-box; background: var(--prm-c-01); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.hod-hero__card-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 4px; }
.hod-hero__card-head > span:last-child { white-space: nowrap; }
.hod-hero__fixes { display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1), visibility .5s; }
.hod-hero__fixes.is-on { opacity: 1; visibility: visible; transform: none; }
.hod-hero__fix { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hod-hero__fix-text { font-weight: 400; font-size: clamp(16px, 1.3vw, 19px); }
.hod-hero__fix-tag { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hod-hero__fix svg { transition: transform .3s ease; }
.hod-hero__fix:hover svg { transform: translateX(3px); }
.hod-hero__else { color: var(--ink); border-top: 1px solid var(--line); padding-top: 14px; min-height: 32px; }
.hod-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 18px; }
.hod-hero__chips-label { padding-right: 8px; }
.hod-hero__toggle { cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 12px; background: none; border: 0; color: var(--ink-soft); }
.hod-hero__unlisted { margin-left: auto; color: var(--ink); min-height: 44px; display: flex; align-items: center; }

.hod-chip { position: relative; overflow: hidden; cursor: pointer; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(240, 240, 240, .22); background: transparent; color: var(--ink); white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.hod-chip:hover { border-color: var(--on-dark); }
.hod-chip[aria-pressed="true"] { border-color: var(--on-dark); background: var(--on-dark); color: var(--hero-dark); }
.hod-chip__bar { display: none; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(1, 4, 12, .15); overflow: hidden; }
.hod-chip__bar > span { display: block; height: 100%; width: 0; background: var(--hero-dark); }
.hod-hero.is-playing .hod-chip[aria-pressed="true"] .hod-chip__bar { display: block; }
.hod-hero.is-playing .hod-chip[aria-pressed="true"] .hod-chip__bar > span { animation: hod-progress 7800ms linear forwards; }
@keyframes hod-progress { from { width: 0; } to { width: 100%; } }

/* Sections */
.hod-sec { padding: clamp(56px, 6vw, 96px) var(--hod-px-sec) 0; }
.hod-sec-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.hod-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 5vw, 80px); align-items: center; }
.hod-split--top { align-items: start; gap: var(--space-column); }
.hod-split--380 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.hod-split--420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.hod-split--460 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.hod-rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.hod-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.hod-row--flex { display: flex; gap: 20px; }
.hod-row--next { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 16px 0; align-items: baseline; }
.hod-ruled { border-top: 1px solid var(--prm-c-05); padding-top: 24px; }
.hod-cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; }
.hod-cols3--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.hod-cols4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 32px; }
.hod-listline { padding: 14px 0; border-top: 1px solid var(--line); }
.hod-pill-outline { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap; }
.hod-pill-outline--sm { padding: 2px 10px; }
.hod-crumbs .hod-pill-outline { color: var(--ink); padding: 4px 12px; }

/* "The problem" illustration */
.hod-chaos { position: relative; height: clamp(380px, 38vw, 520px); background: var(--white); border-radius: var(--radius-panel); overflow: hidden; }
.hod-chaos__label { position: absolute; left: 20px; top: 18px; }
.hod-chaos__note { position: absolute; background: var(--prm-c-01); color: var(--on-dark); border-radius: 12px; padding: 12px 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 3px; }
.hod-chaos__note .pm-text-mono-badge { color: #afafaf; }
.hod-chaos__note--sticky { background: #ffe9a8; color: #050507; border-radius: 4px; padding: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.hod-chaos__note--sticky .pm-text-mono-badge { color: #6d6d6d; }
.hod-chaos__layer { position: absolute; inset: 0; }
/* Small screens: lay the notes out on a larger board and scale it down, so they keep the desktop composition. */
@media (max-width: 600px) {
	.hod-chaos__layer { inset: auto; left: 0; top: 0; width: 145%; height: 145%; transform: scale(.69); transform-origin: 0 0; }
}

/* What changes */
.hod-change { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: clamp(22px, 2.6vw, 32px) 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hod-change__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 32px; align-items: baseline; }
.hod-change > svg, .hod-svc-row > svg, .hod-askcard > svg, .hod-elsecard > svg { transition: transform .3s ease; flex-shrink: 0; }
.hod-change:hover > svg, .hod-svc-row:hover > svg, .hod-askcard:hover > svg, .hod-elsecard:hover > svg { transform: translateX(3px); }

/* Dark cards lower on the page */
.hod-inset { margin: clamp(56px, 6vw, 96px) var(--space-inset) 0; }
.hod-darkcard { background: var(--surface); color: var(--ink); border-radius: var(--radius-panel); padding: clamp(40px, 5vw, 80px) var(--hod-px-panel); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 4vw, 72px); }
.hod-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.hod-count { background: var(--prm-c-01); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.hod-measure { margin: clamp(56px, 6vw, 96px) var(--space-inset) 0; background: var(--surface); color: var(--ink); border-radius: var(--radius-panel); padding: clamp(48px, 6vw, 96px) max(clamp(24px, 4vw, 76px), calc((100% - var(--hod-maxw)) / 2 - var(--space-inset))); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-column); }

/* Written scope card */
.hod-scope { background: var(--white); border-radius: var(--radius-panel); box-shadow: var(--shadow-media); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.hod-scope--sheet { gap: 6px; padding: clamp(24px, 3vw, 44px); }
.hod-scope__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.hod-scope__title { color: var(--ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; padding-bottom: 8px; }
.hod-scope__row { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.hod-scope__row--blank { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); padding: 14px 0; }
.hod-scope__row--blank > .pm-text-mono-label { color: var(--ink); }
.hod-scope__foot { border-top: 1px solid var(--prm-c-05); padding-top: 16px; }
.hod-blankline { height: 1px; background: var(--prm-c-05); }

/* Why Home of Digital: "Marketing you can check" */
.hod-check { display: flex; flex-wrap: wrap; gap: 24px clamp(40px, 5vw, 96px); align-items: flex-start; }
.hod-check__intro { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hod-check__rows { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.hod-check__row { display: flex; flex-wrap: wrap; gap: 10px 40px; align-items: baseline; padding: clamp(22px, 2.6vw, 32px) 0; border-top: 1px solid var(--line); }
.hod-check__key { flex: 0 0 150px; }
.hod-check__body { flex: 1 1 300px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hod-check__text { color: var(--ink); font-size: clamp(22px, 2.3vw, 34px); font-weight: 400; line-height: 1.3; text-wrap: pretty; }
.hod-check__belief { color: var(--ink); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.15; }
.hod-mark { box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--accent) 45%, transparent); padding: 0 .06em; }
.hod-check__dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.hod-check__do { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border-radius: var(--radius-thumb); padding: 16px 18px; }
.hod-check__tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.hod-check__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hod-check__steps li { display: flex; align-items: center; gap: 14px; }
.hod-check__steps svg { color: var(--label); flex-shrink: 0; }
.hod-check__step { color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 16px; }

/* Questions */
.hod-askcard { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--white); border-radius: var(--radius-panel); padding: 24px 28px; text-decoration: none; color: var(--ink); max-width: 520px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.hod-askcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); color: var(--ink); }
.hod-faqcard { background: var(--white); border-radius: var(--radius-card); padding: 0 clamp(20px, 2.4vw, 32px); }
.pm-faq { gap: 0; }
.pm-faq__item:last-child { border-bottom: 0; }
.pm-faq__q, .pm-faq__item:first-child .pm-faq__q { padding-top: 24px; padding-bottom: 24px; }
.pm-faq__q:hover .pm-faq__text { color: var(--accent-ink); }
html:not(.js) .pm-faq__panel { max-height: none; }

/* Services */
.hod-svc-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: start; padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hod-buildcta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; background: var(--surface); color: var(--ink); border-radius: var(--radius-panel); padding: clamp(32px, 4vw, 56px); text-decoration: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.hod-buildcta:hover { transform: translateY(-4px); }
.hod-btn-light { display: inline-flex; align-items: center; gap: 12px; background: var(--on-dark); color: var(--hero-dark); border: 0; border-radius: var(--radius-pill); padding: 16px 28px; min-height: 52px; box-sizing: border-box; white-space: nowrap; cursor: pointer; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.hod-btn-light:hover { transform: translateY(-3px); }
.hod-ctastrip { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; background: var(--white); border-radius: var(--radius-panel); padding: clamp(28px, 4vw, 48px); }
.hod-ctastrip--slim { padding: 24px clamp(24px, 3vw, 40px); }

/* One service */
.hod-crumbs { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hod-crumbs a { text-decoration: none; }
.hod-lead { margin: 0; color: var(--ink); font-size: clamp(22px, 2.2vw, 32px); font-weight: 400; line-height: 1.35; }
.hod-keyline { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 16px 40px; align-items: baseline; border-top: 1px solid var(--prm-c-05); border-bottom: 1px solid var(--prm-c-05); padding: 28px 0; }
@media (max-width: 600px) { .hod-keyline { grid-template-columns: 1fr; } }
.hod-pilotbox { border: 1px solid var(--prm-c-05); border-radius: var(--radius-panel); padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px; }
.hod-whitecard { background: var(--white); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 6px; }
.hod-others { display: flex; flex-wrap: wrap; gap: 12px 32px; }
/* AI search: AEO, GEO and the other terms. Term | what it means | how we cover it; two rows of text below 900px, one column on phones. */
.hod-vocab { margin: 0; border-bottom: 1px solid var(--line); }
.hod-vocab__row { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(24px, 3vw, 48px); padding: clamp(22px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.hod-vocab__row dd { margin: 0; }
.hod-vocab__name { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.hod-vocab__ours { display: flex; flex-direction: column; gap: 6px; }
.hod-vocab__row:target { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
@media (max-width: 900px) {
	.hod-vocab__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.hod-vocab__name { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .hod-vocab__row { grid-template-columns: minmax(0, 1fr); } }

/* Contact */
.hod-contact { flex: 1; display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: clamp(40px, 5vw, 96px); align-items: flex-start; padding: clamp(40px, 6vw, 100px) var(--hod-px-panel) clamp(32px, 4vw, 64px); }
.hod-contact__card { flex: 1 1 440px; min-width: 0; background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.hod-contact__side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.hod-contact__card [hidden] { display: none; }
.hod-setupbox { display: flex; flex-direction: column; gap: 10px; background: var(--page); border-radius: var(--radius-thumb); padding: 16px 18px; }
.hod-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hod-tag { color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px 12px; }
.hod-form { gap: 8px; }
.pm-field select:has(option[value=""]:checked) { color: var(--placeholder); }
.pm-field select option { color: var(--ink); }
.hod-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hod-err { color: var(--accent-ink); }
.hod-here { color: var(--on-accent); background: var(--accent); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.hod-form.is-sending [data-contact-submit] { opacity: .6; pointer-events: none; }

/* Legal */
.hod-legal-row { max-width: 852px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 40px; padding: 28px 0; border-top: 1px solid var(--line); }

/* Fallback page content */
.hod-prose { max-width: 760px; font-size: 18px; line-height: 1.6; }

/* Build your setup */
.hod-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 20px; }
.hod-linkbtn { cursor: pointer; min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--ink-soft); white-space: nowrap; }
.hod-linkbtn:hover { color: var(--ink); }
.hod-build { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 56px); align-items: flex-start; padding: clamp(48px, 5vw, 80px) var(--hod-px-sec) 0; }
.hod-build__parts { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); }
.hod-build__cathead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--prm-c-05); padding-bottom: 16px; }
.hod-build__parts { container-type: inline-size; }
/* Two equal-height cards per row; a selected card takes the whole row so its options never stretch its neighbours. */
.hod-build__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
@container (max-width: 600px) { .hod-build__grid { grid-template-columns: minmax(0, 1fr); } }
.hod-part { background: var(--white); border-radius: var(--radius-card); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s; }
.hod-part.is-open { grid-column: 1 / -1; border-color: var(--prm-c-05); }
.hod-part__toggle { flex: 1 0 auto; }
.hod-part__toggle { cursor: pointer; width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; align-items: start; text-align: left; background: none; border: 0; padding: 20px; color: var(--ink); font: inherit; transition: background .2s; }
.hod-part__toggle[aria-pressed="false"]:hover { background: var(--page); }
.hod-part__check { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--prm-c-05); box-sizing: border-box; margin-top: 2px; display: flex; align-items: center; justify-content: center; color: var(--on-dark); }
.hod-part__check svg { visibility: hidden; }
.hod-part__toggle[aria-pressed="true"] .hod-part__check { background: var(--prm-01); border-color: var(--prm-01); }
.hod-part__toggle[aria-pressed="true"] .hod-part__check svg { visibility: visible; }
.hod-part__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.hod-part__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; gap: 16px 32px; padding: 16px 20px 20px 60px; border-top: 1px solid var(--line); }
.hod-part__opts[hidden] { display: none; }
.hod-opt { cursor: pointer; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--prm-c-06); background: var(--page); color: var(--ink-soft); white-space: nowrap; transition: border-color .2s; }
.hod-opt:hover { border-color: var(--prm-01); }
.hod-opt[aria-pressed="true"] { border-color: var(--prm-01); background: var(--prm-01); color: var(--on-dark); }
.hod-elsecard { display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px dashed var(--prm-c-05); border-radius: var(--radius-card); padding: 24px 28px; text-decoration: none; color: var(--ink); }
.hod-summary { flex: 0 1 380px; min-width: min(100%, 300px); position: sticky; top: 88px; align-self: flex-start; background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-media); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
.hod-summary [hidden] { display: none; }
.hod-sumrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.hod-sumrow__detail { color: var(--muted); line-height: 1.5; }
.hod-sumrow__remove { cursor: pointer; min-width: 32px; min-height: 32px; background: none; border: 0; color: var(--label); }
.hod-sumrow__remove:hover { color: var(--ink); }
.hod-size { gap: 8px; border-top: 1px solid var(--prm-c-05); padding-top: 16px; }
.hod-size__segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.hod-size__segs span { height: 4px; border-radius: 2px; background: var(--prm-c-06); }
.hod-size__segs span.is-on { background: var(--prm-01); }
.hod-clearbtn { cursor: pointer; align-self: flex-start; background: none; border: 0; padding: 0; min-height: 32px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.hod-mbar--build .pm-btn { padding: 12px 22px; }
@media (max-width: 1109px) { .hod-summary { position: static; flex-basis: 100%; } }

/* Footer */
.hod-footer-wrap { padding: clamp(56px, 6vw, 96px) var(--space-inset) var(--space-inset); }
.hod-footer { background: var(--surface); color: var(--ink); border-radius: var(--radius-panel); padding: clamp(48px, 6vw, 96px) var(--hod-px-panel) 0; overflow: hidden; display: flex; flex-direction: column; gap: 56px; }
.hod-footer__ask { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.hod-footer__ask-text { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.hod-footer__statement { margin: 0; color: var(--ink); font-size: clamp(28px, 3.6vw, 55px); line-height: 1.2; }
.hod-footer__tagline { color: var(--accent-2, var(--muted)); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; }
.hod-footer__ask-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hod-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; border-top: 1px solid var(--line); padding-top: 40px; }
.hod-footer__col { display: flex; flex-direction: column; gap: 4px; }
.hod-footer__col a { color: var(--ink-soft); text-decoration: none; min-height: 36px; display: flex; align-items: center; }
.hod-footer__head { color: var(--label); padding-bottom: 8px; }
.hod-addr { font-style: normal; }
.hod-footer__addr { color: var(--muted); font-weight: 400; padding-top: 8px; }
.hod-footer__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
.hod-footer__about { color: var(--ink-soft); font-weight: 400; }
.hod-footer__copy { color: var(--label); }
.hod-footer__mark { font-family: var(--font-sans); font-weight: 500; font-size: min(13.4vw, calc(var(--hod-maxw) * .134)); line-height: .78; letter-spacing: -0.06em; color: var(--prm-c-01); white-space: nowrap; margin: 0 -0.04em -0.06em; user-select: none; }

@media (prefers-reduced-motion: reduce) {
	.hod-hero__box, .hod-hero__word, .hod-hero__sub, .hod-hero__fixes, .hod-sticky, .hod-mbar, .hod-askcard, .hod-buildcta, .hod-btn-light { transition: none; }
	.hod-btn-contact .pm-status__dot { animation: none; }
}

/* Print: the Written Scope Checklist prints as a clean sheet */
@media print {
	.hod-sticky, .hod-mbar, .hod-skip, .hod-footer-wrap, .hod-noprint, .hod-frame { display: none !important; }
	body, .hod-site { background: #fff; }
	.hod-printonly { display: block; margin: 0 0 16px; color: #454545; }
	.hod-sec { padding: 0; display: block; }
	.hod-scope { box-shadow: none; border: 1px solid #b0b0b0; break-inside: avoid; margin-bottom: 32px; }
	.hod-split { display: block; }
	.pm-section-head__title { font-size: 40px; }
}

/* Contact: the form panel and the footer join into one dark panel (no grey gap, no second ask). */
.hod-page-contact .hod-frame { padding-bottom: 0; }
.hod-page-contact .hod-top--full { min-height: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hod-page-contact .hod-footer-wrap { padding: 0 var(--space-frame) var(--space-frame); }
.hod-page-contact .hod-footer { padding-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }