/* ==========================================================================
home-alt-v2.css — the ONLY stylesheet for page 7456 ("Home (alt)", /home-alt/).
A self-contained copy of home-alt.css plus the restructure rules, so editing
it can never regress the live front page (7314, "Home"), which still loads
home-alt.css. Class names are intentionally UNCHANGED: when home-alt is
promoted onto Home this file becomes the homepage stylesheet as-is.
Enqueued with a 'deka-academy' dependency so it always prints AFTER pages.css.
Rules for the now-removed .ha-circle / .ha-training sections are retained
(dead but harmless) so nothing is lost in the promotion.
========================================================================== */
/* Contain full-bleed sections horizontally at the wrapper (overflow-y visible →
not a scroll container, so it won't break any sticky descendants). */
.home-alt { overflow-x: clip; }
/* Shared buttons ---------------------------------------------------------- */
/* ==========================================================================
BUTTONS — one class, a handful of variants.
The page had grown TWO unrelated button systems: the hero/steps pair (sans,
600, sentence case, 15px) and the laser-card pair (mono, 11px, uppercase,
0.18em tracking). That is the "scattered fonts" — they shared no type at all.
Everything is consolidated onto the hero style, which is the approved one.
Compose: .ha-btn + one fill/outline variant + optional size/shape modifier.
fills .ha-btn--brass .ha-btn--ink
outlines .ha-btn--ghost (light grounds) .ha-btn--ghost-light (dark grounds)
size .ha-btn--sm
shape .ha-btn--disc (trailing icon disc; pairs with .ha-btn-ico)
========================================================================== */
.home-alt .ha-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
padding: 17px 34px; border-radius: 999px;
font-family: var(--deka-sans);
font-weight: 600; font-size: 15px; line-height: 1;
letter-spacing: 0; text-transform: none;
/* NOT nowrap. A nowrap button cannot shrink, so on a narrow card it forces
its whole flex container wider than the card and everything beside it
overflows too — that is what blew out the Academy bar on mobile. Let the
label wrap; it only ever does when it genuinely does not fit. */
white-space: normal; text-align: center; max-width: 100%;
border: 1px solid transparent; cursor: pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease,
transform .25s ease, filter .25s ease;
}
.home-alt .ha-btn:hover { transform: translateY(-1px); }
.home-alt .ha-btn svg { flex: none; }
/* fills */
.home-alt .ha-btn--brass { background: var(--deka-brass); color: var(--deka-ink); border-color: var(--deka-brass); }
.home-alt .ha-btn--brass:hover { filter: brightness(1.06); }
.home-alt .ha-btn--ink { background: var(--deka-ink); color: var(--deka-ivory); border-color: var(--deka-ink); }
.home-alt .ha-btn--ink:hover { filter: brightness(1.45); }
/* outlines — the ground decides which one. --ghost reads on ivory/white,
--ghost-light on ink/video. Using the wrong one makes the button vanish. */
.home-alt .ha-btn--ghost { background: transparent; color: var(--deka-ink); border-color: var(--deka-rule); }
.home-alt .ha-btn--ghost:hover { background: var(--deka-ink); color: var(--deka-ivory); border-color: var(--deka-ink); }
.home-alt .ha-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.38); }
.home-alt .ha-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.10); }
/* size */
.home-alt .ha-btn--sm { padding: 12px 22px; font-size: 13.5px; gap: 9px; }
/* trailing icon disc */
.home-alt .ha-btn--disc { padding-right: 12px; gap: 14px; }
.home-alt .ha-btn-ico {
width: 34px; height: 34px; border-radius: 999px; flex: none;
background: var(--deka-ink); color: var(--deka-ivory);
display: inline-flex; align-items: center; justify-content: center;
}
/* ==========================================================================
A — DEKA CIRCLE INTRO (immediately after hero)
Form sits on a full-width dark-purple band that catches the hero fade;
the DEKA-builds row sits on ivory below with generous top spacing.
========================================================================== */
.home-alt .ha-circle { background: var(--deka-ivory); padding: 0; }
/* dark-purple band behind the lead form — blends into the hero bottom-fade */
.home-alt .ha-leadbar-band {
background: var(--deka-ink);
padding: 0 0 clamp(44px,6vh,72px);
}
/* ivory area with the circle intro — extra top spacing off the purple band */
.home-alt .ha-circle-lower {
padding-top: clamp(72px,9vh,120px);
padding-bottom: clamp(80px,10vh,120px);
}
.home-alt .ha-circle-row {
display: grid; grid-template-columns: auto minmax(0, 600px); justify-content: center;
align-items: center; gap: clamp(32px, 5vw, 72px);
}
.home-alt .ha-circle-copy .ha-btn { margin-top: 28px; }
.home-alt .ha-circle-img {
width: 280px; height: 280px; border-radius: 50%; display: block; flex: none;
box-shadow: 0 20px 44px -22px rgba(4, 5, 65, 0.40);
}
.home-alt .ha-circle-copy { max-width: none; }
.home-alt .ha-circle-title {
margin: 0; font-family: var(--deka-serif); font-weight: 300;
font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em;
color: var(--deka-ink); text-wrap: balance;
}
.home-alt .ha-circle-sub {
margin: 14px 0 0; font-family: var(--deka-serif); font-style: italic; font-weight: 300;
font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; color: var(--deka-sapphire);
}
.home-alt .ha-circle-body {
margin: 18px 0 0; max-width: 60ch;
font-size: 16.5px; line-height: 1.7; color: var(--hm-muted);
}
.home-alt .ha-circle-copy p em { font-style: italic; color: var(--deka-sapphire); }
@media (max-width: 900px) {
.home-alt .ha-circle-row { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 30px; }
.home-alt .ha-circle-img { width: 200px; height: 200px; }
}
/* ==========================================================================
B — THREE LASER PLATFORMS (no card chrome; line pattern on blank ivory)
========================================================================== */
.home-alt .ha-lasers { background: var(--deka-ivory); padding: 44px 0 130px; }
.home-alt .ha-laser-grid {
display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 36px; row-gap: 0; margin-top: 60px;
/* rows: 1 media · 2 tag · 3 title · 4 lede · 5 desc · 6 readmore · 7 best · 8 cta.
Each row is equalized across the four columns via subgrid, so every block
(eyebrow, title, subtitle, paragraph, Best-for, buttons) starts/ends in line. */
grid-template-rows: repeat(8, auto);
}
.home-alt .ha-laser {
display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0;
}
.home-alt .ha-laser-media { grid-row: 1; }
.home-alt .ha-laser-tag { grid-row: 2; }
.home-alt .ha-laser h3 { grid-row: 3; }
.home-alt .ha-laser-lede { grid-row: 4; }
.home-alt .ha-laser-desc { grid-row: 5; }
.home-alt .ha-readmore { grid-row: 6; }
.home-alt .ha-laser-best { grid-row: 7; }
.home-alt .ha-laser-cta { grid-row: 8; }
.home-alt .ha-laser-media {
position: relative; height: 380px; display: grid; place-items: end center; margin-bottom: 30px;
}
/* The line pattern, lifted from .svc-img::after — masked 32px grid, no card. */
.home-alt .ha-laser-media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(4, 5, 65, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(4, 5, 65, 0.045) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 42%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 80% 60% at 50% 42%, #000 30%, transparent 80%);
}
.home-alt .ha-laser-media img {
position: relative; z-index: 1; width: auto; max-width: 100%;
height: 340px; min-height: 340px; max-height: 340px; /* identical render height for all four */
object-fit: contain; filter: drop-shadow(0 16px 26px rgba(4, 5, 65, 0.22));
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.home-alt .ha-laser:hover .ha-laser-media img { transform: translateY(-6px) scale(1.02); }
/* Third product (SmartPerio benchtop) is wide — render it ~80% height so it
doesn't dominate next to the two tall floor-standing units. */
.home-alt .ha-laser:nth-child(3) .ha-laser-media img {
height: 272px; min-height: 272px; max-height: 272px;
}
.home-alt .ha-laser-tag {
font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--deka-sapphire); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
}
.home-alt .ha-laser-tag::before { content: ''; width: 18px; height: 1px; background: var(--deka-sapphire); }
.home-alt .ha-laser h3 {
font-family: var(--deka-serif); font-weight: 400; font-size: 27px; line-height: 1.1;
letter-spacing: -0.01em; color: var(--deka-ink); margin-bottom: 6px;
}
.home-alt .ha-laser-lede {
font-family: var(--deka-serif); font-style: italic; font-size: 17px; line-height: 1.4;
color: var(--deka-sapphire); margin-bottom: 14px;
}
.home-alt .ha-laser-desc { font-size: 14.5px; line-height: 1.65; color: var(--hm-muted); }
.home-alt .ha-laser-best { margin-top: 18px; }
.home-alt .ha-laser-best h4 {
font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--deka-ink); opacity: 0.55; margin-bottom: 11px;
}
.home-alt .ha-laser-best ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.home-alt .ha-laser-best li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--deka-ink); }
.home-alt .ha-laser-best li::before {
content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px;
border: 1px solid var(--deka-sapphire); border-radius: 50%;
}
.home-alt .ha-readmore {
display: none; align-items: center; gap: 8px; margin-top: 16px;
background: none; border: none; padding: 0; cursor: pointer;
font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--deka-sapphire);
}
.home-alt .ha-readmore::after { content: ''; width: 14px; height: 1px; background: currentColor; }
.home-alt .ha-laser-cta {
margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--deka-rule);
display: flex; flex-wrap: wrap; gap: 10px;
}
/* size now comes from .ha-btn--sm in the markup, not a per-section override */
@media (max-width: 1100px) {
/* single column → drop the subgrid and stack with flex */
.home-alt .ha-laser-grid { display: block; max-width: 520px; margin-inline: auto; }
.home-alt .ha-laser { display: flex; flex-direction: column; }
.home-alt .ha-laser + .ha-laser { margin-top: 64px; }
.home-alt .ha-laser-best { display: none; }
.home-alt .ha-laser.is-open .ha-laser-best { display: block; }
.home-alt .ha-readmore { display: inline-flex; }
.home-alt .ha-laser.is-open .ha-rm-more { display: none; }
.home-alt .ha-laser:not(.is-open) .ha-rm-less { display: none; }
}
/* ==========================================================================
C — ROI
========================================================================== */
.home-alt .ha-roi { background: var(--deka-bone); padding: 120px 0; }
.home-alt .ha-roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.home-alt .ha-roi-case, .home-alt .ha-roi-plan {
background: var(--deka-ivory); border: 1px solid var(--deka-rule); border-radius: 16px;
padding: 34px 30px; display: flex; flex-direction: column;
}
.home-alt .ha-roi-tag {
font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--deka-sapphire); margin-bottom: 20px;
}
.home-alt .ha-roi-stat {
font-family: var(--deka-serif); font-weight: 300; font-size: clamp(40px, 4.4vw, 56px);
line-height: 1; letter-spacing: -0.02em; color: var(--deka-ink);
}
.home-alt .ha-roi-stat span { font-family: var(--deka-mono); font-size: 0.3em; color: var(--deka-brass); margin-left: 4px; vertical-align: middle; }
.home-alt .ha-roi-label {
font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--hm-muted); margin-top: 12px;
}
.home-alt .ha-roi-case p { font-size: 14px; line-height: 1.6; color: var(--hm-muted); margin-top: 16px; }
.home-alt .ha-roi-mini { list-style: none; padding: 16px 0 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 7px; }
.home-alt .ha-roi-mini li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--deka-ink); }
.home-alt .ha-roi-mini li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--deka-sapphire); border-radius: 50%; }
.home-alt .ha-roi-readcase {
margin-top: auto; /* pin to card bottom so all three line up */
display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 20px; border: 1px solid var(--deka-rule); border-radius: 999px; background: transparent;
color: var(--deka-ink); font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500; transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.home-alt .ha-roi-case p, .home-alt .ha-roi-mini { margin-bottom: 24px; }
.home-alt .ha-roi-readcase:hover { background: var(--deka-ink); color: var(--deka-ivory); border-color: var(--deka-ink); }
.home-alt .ha-roi-readcase svg { flex: none; }
.home-alt .ha-roi-plan { background: var(--deka-ink); color: var(--deka-ivory); }
.home-alt .ha-roi-plan .ha-roi-tag { color: var(--deka-brass); }
.home-alt .ha-roi-plan .ha-roi-label { color: var(--deka-ivory); }
.home-alt .ha-roi-plan p { font-size: 14px; line-height: 1.6; color: rgba(245, 244, 239, 0.72); margin-top: 16px; }
.home-alt .ha-roi-plan .ha-btn { margin-top: auto; background: var(--deka-ivory); color: var(--deka-ink); border-color: var(--deka-ivory); }
.home-alt .ha-roi-plan .ha-btn:hover { background: var(--deka-brass); border-color: var(--deka-brass); }
.home-alt .ha-roi-disclaimer { margin: 36px auto 0; font-size: 12px; line-height: 1.6; font-weight: 600; color: rgba(4, 5, 65, 0.82); max-width: 96ch; text-align: center; }
@media (max-width: 900px) { .home-alt .ha-roi-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
D — CLINICAL APPLICATIONS
========================================================================== */
.home-alt .ha-apps { background: var(--deka-ivory); padding: 120px 0; }
.home-alt .ha-apps-grid {
display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 56px;
border-top: 1px solid var(--deka-rule); border-left: 1px solid var(--deka-rule);
}
.home-alt .ha-app { padding: 38px 36px; border-right: 1px solid var(--deka-rule); border-bottom: 1px solid var(--deka-rule); }
.home-alt .ha-app h3 { font-family: var(--deka-serif); font-weight: 400; font-size: 25px; color: var(--deka-ink); margin-bottom: 10px; letter-spacing: -0.01em; }
.home-alt .ha-app > p { font-size: 14.5px; line-height: 1.6; color: var(--hm-muted); margin-bottom: 20px; max-width: 48ch; }
.home-alt .ha-app h4 { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deka-ink); opacity: 0.5; margin-bottom: 14px; }
.home-alt .ha-app ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-alt .ha-app li {
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--deka-sapphire);
background: var(--hm-sky); padding: 6px 12px; border-radius: 999px;
}
@media (max-width: 760px) { .home-alt .ha-apps-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
E — TECHNOLOGY
========================================================================== */
.home-alt .ha-tech { background: var(--deka-bone); padding: 120px 0; }
.home-alt .ha-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.home-alt .ha-tech-item { padding: 32px 28px; background: var(--deka-ivory); border: 1px solid var(--deka-rule); border-radius: 14px; }
.home-alt .ha-tech-wave { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-sapphire); margin-bottom: 14px; }
.home-alt .ha-tech-item h3 { font-family: var(--deka-serif); font-weight: 400; font-size: 23px; color: var(--deka-ink); margin-bottom: 10px; letter-spacing: -0.01em; }
.home-alt .ha-tech-item p { font-size: 14px; line-height: 1.62; color: var(--hm-muted); }
@media (max-width: 900px) { .home-alt .ha-tech-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .home-alt .ha-tech-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
F — WHY DEKA (dark ink band)
========================================================================== */
.home-alt .ha-why {
background: var(--deka-ink); color: var(--deka-ivory);
/* extra headroom: the rotator's dimmed words ride ABOVE the active line and
would otherwise crowd the reel above this section */
padding: clamp(96px, 10vw, 140px) 0 120px;
}
.home-alt .ha-why .center-head h2 { color: var(--deka-ivory); }
.home-alt .ha-why .center-head p { color: rgba(245, 244, 239, 0.7); }
/* Ghosted laser lineup, lifted from .care-program-mark on the DEKA Care page.
.ha-why-markwrap is a zero-height in-flow block, so its box IS the container's
CONTENT box — that is what makes right:0 / width:44% resolve against the inner
content rather than the padding box, at every breakpoint.
The two masks are composited: one fades the image out downward, the other
fades it out leftward, so it dissolves into the section instead of ending on a
hard edge. That matters here because this AVIF has NO alpha channel — it is an
opaque rectangle, and the mask is the only thing hiding its edges. */
.home-alt .ha-why { position: relative; }
.home-alt .ha-why > .container { position: relative; z-index: 1; }
.home-alt .ha-why-markwrap { position: relative; height: 0; z-index: 0; }
.home-alt .ha-why-mark {
position: absolute; top: -6%; right: 0;
width: 48%; height: auto; display: block;
opacity: 0.55;
/* The fade has to die out just above the divider. Cut it too high and dead
space opens under the image; too low and it bleeds into the copy. 90% lands
it on the rule now that the section carries extra headroom for the wheel. */
-webkit-mask-image:
linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 48%, transparent 90%),
linear-gradient(to left, #000 40%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 48%, transparent 90%),
linear-gradient(to left, #000 40%, transparent 100%);
mask-composite: intersect;
pointer-events: none; user-select: none;
}
/* keep the real content above the artwork */
.home-alt .ha-why-rotator,
.home-alt .ha-why-rule,
.home-alt .ha-why-copy { position: relative; z-index: 1; }
/* The three static pillars are now ONE auto-rotating statement: the headline
word and the body beneath it cross-fade together. The intro copy moved below
the divider (see .ha-why-copy). */
.home-alt .ha-why-title {
font-family: var(--deka-serif); font-weight: 300;
font-size: var(--deka-h2); line-height: 1.08;
letter-spacing: -0.02em; color: var(--deka-ivory);
margin: 0;
}
/* A wheel, clipped.
.ha-why-slot is a one-line inline box, so it sits on the same line as
"Built for" — that is what anchors the active option to the headline.
.ha-why-view is a THREE-line window centred on that line (top: -1 line), with
overflow hidden and a soft top/bottom mask, so exactly one option shows above
and one below, dissolving at the edges. Without the clip, five options would
dump four words on the page at once.
The stack inside is the five options rendered TWICE. JS scrolls forward
through all ten; when it reaches the start of the duplicate set — which is
pixel-identical to the top of the first — it kills the transition and snaps
back to index 0. That is what makes the loop infinite: it never scrolls
backwards to rewind. */
.home-alt .ha-why-slot {
position: relative;
display: inline-block;
vertical-align: top;
height: 1.08em; /* one line of .ha-why-title */
}
.home-alt .ha-why-view {
position: absolute; left: 0; top: -1.08em;
height: 3.24em; /* the active line, plus one above and one below */
width: max-content; /* load-bearing: see below */
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 34%, #000 66%, transparent 98%);
mask-image: linear-gradient(to bottom, transparent 2%, #000 34%, #000 66%, transparent 98%);
}
/* IN FLOW, not absolute. An absolutely-positioned child would leave .ha-why-view
with zero width, and overflow:hidden would then clip every word to nothing —
the wheel rendered completely blank. In flow, the view shrink-wraps the list. */
.home-alt .ha-why-words {
position: relative;
display: block; white-space: nowrap;
transition: transform .62s cubic-bezier(.22, .61, .36, 1);
will-change: transform;
}
.home-alt .ha-why-words.is-snapping { transition: none; } /* the seam jump */
.home-alt .ha-why-word {
display: block;
line-height: 1.08;
font-style: italic;
color: var(--deka-ivory);
opacity: 0.18;
cursor: pointer;
transition: opacity .62s ease, color .62s ease;
}
.home-alt .ha-why-word.is-active { color: var(--deka-brass); opacity: 1; }
/* The view is clipped to three lines, so exactly ONE word shows above the
headline and ONE below — never two. Each side therefore needs a single line of
clearance. (An earlier version reserved two lines below and left a dead gap.) */
.home-alt .ha-why-rotator { padding-top: clamp(72px, 7.5vw, 118px); }
/* Every panel occupies the SAME grid cell, so the block is as tall as the
tallest copy and nothing jumps when the text swaps. */
.home-alt .ha-why-panels {
display: grid;
margin-top: clamp(72px, 7vw, 106px); /* one wheel line + breathing room */
max-width: 60ch;
}
.home-alt .ha-why-panel {
grid-area: 1 / 1;
font-size: clamp(18px, 1.5vw, 21px); line-height: 1.65;
color: rgba(245, 244, 239, 0.75);
margin: 0; opacity: 0; transform: translateY(14px);
transition: opacity .55s ease, transform .55s ease;
}
.home-alt .ha-why-panel.is-active { opacity: 1; transform: none; }
.home-alt .ha-why-rule {
border: 0; border-top: 1px solid var(--deka-rule-light);
margin: clamp(48px, 6vw, 76px) 0 clamp(34px, 4vw, 52px);
}
/* Full-width intro copy, below the divider. Two columns rather than one
1400px-wide line — full-bleed body text would run past 150 characters a line
and become unreadable; the block still spans the container. */
.home-alt .ha-why-copy {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
}
.home-alt .ha-why-copy p {
margin: 0; font-size: 17.5px; line-height: 1.75;
color: rgba(245, 244, 239, 0.72);
}
@media (max-width: 860px) {
.home-alt .ha-why-copy { grid-template-columns: 1fr; gap: 18px; }
}
/* Below 900px the copy runs full-width and would sit on top of the artwork. */
@media (max-width: 900px) {
.home-alt .ha-why-mark { display: none; }
}
/* The swap still happens, it just does not animate. */
@media (prefers-reduced-motion: reduce) {
.home-alt .ha-why-word,
.home-alt .ha-why-panel { transition: none; transform: none; }
}
/* ==========================================================================
G — TRAINING & SUPPORT (split; full-bleed image on the right)
========================================================================== */
.home-alt .ha-training { background: var(--deka-ivory); }
/* The grid is the full-width row: two 50/50 columns of the viewport. The image
is a normal grid item that STRETCHES to the row height (= copy height) and
fills its column out to the right screen edge. The copy's left padding is
computed to land exactly on the container content edge (max-width 1440, 56px
gutter), so it aligns with every other section. */
.home-alt .ha-training-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 560px; }
.home-alt .ha-training-copy {
align-self: center;
padding: 96px clamp(32px, 4vw, 72px) 96px max(56px, calc((100vw - 1440px) / 2 + 56px));
}
/* Mosaic: a collage of tiles (1 big training + 5 people), each an object-fit
cover box. Clicking any tile opens the lightbox gallery (JS). Fills the grid
cell, which stretches to the copy height and bleeds to the right screen edge. */
.home-alt .ha-training-media {
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
gap: 0; background: var(--deka-ivory);
}
.home-alt .ha-tile {
position: relative; overflow: hidden; border: 0; padding: 0; margin: 0; cursor: pointer;
background: var(--deka-bone);
}
.home-alt .ha-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.home-alt .ha-tile:hover img { transform: scale(1.05); }
.home-alt .ha-tile::after { content: ''; position: absolute; inset: 0; background: rgba(4, 5, 65, 0); transition: background .25s ease; }
.home-alt .ha-tile:hover::after { background: rgba(4, 5, 65, .14); }
.home-alt .ha-tile-ico {
position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center; color: #fff; background: rgba(4, 5, 65, .45);
opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .25s ease;
}
.home-alt .ha-tile:hover .ha-tile-ico { opacity: 1; transform: scale(1); }
.home-alt .ha-tile-cta {
position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--deka-ink);
font-family: var(--deka-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.home-alt .ha-tile--main:hover .ha-tile-cta { opacity: 1; transform: none; }
/* collage placement — mirrors the reference: top row of 3, left column of 2, big training bottom-right */
.home-alt .ha-tile--p1 { grid-area: 1 / 1 / 2 / 2; }
.home-alt .ha-tile--p2 { grid-area: 1 / 2 / 2 / 3; }
.home-alt .ha-tile--p3 { grid-area: 1 / 3 / 2 / 4; }
.home-alt .ha-tile--p4 { grid-area: 2 / 1 / 3 / 2; }
.home-alt .ha-tile--p5 { grid-area: 3 / 1 / 4 / 2; }
.home-alt .ha-tile--main { grid-area: 2 / 2 / 4 / 4; }
/* Lightbox */
.home-alt .ha-lightbox {
position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center;
background: rgba(4, 5, 65, .92); padding: 40px;
}
.home-alt .ha-lightbox.is-open { display: flex; }
.home-alt .ha-lb-frame { margin: 0; max-width: 90vw; max-height: 86vh; }
.home-alt .ha-lb-img { display: block; max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.home-alt .ha-lb-arrow, .home-alt .ha-lb-close {
position: absolute; background: rgba(255, 255, 255, .92); color: var(--deka-ink); border: none; border-radius: 50%;
cursor: pointer; display: grid; place-items: center; transition: background .2s ease;
}
.home-alt .ha-lb-arrow:hover, .home-alt .ha-lb-close:hover { background: #fff; }
.home-alt .ha-lb-arrow { width: 56px; height: 56px; top: 50%; transform: translateY(-50%); }
.home-alt .ha-lb-prev { left: 28px; }
.home-alt .ha-lb-next { right: 28px; }
.home-alt .ha-lb-close { width: 48px; height: 48px; top: 28px; right: 28px; }
.home-alt .ha-lb-counter { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-family: var(--deka-mono); font-size: 12px; letter-spacing: .14em; color: #fff; }
@media (max-width: 560px) {
.home-alt .ha-lb-arrow { width: 44px; height: 44px; }
.home-alt .ha-lb-prev { left: 12px; }
.home-alt .ha-lb-next { right: 12px; }
}
.home-alt .ha-training-copy .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500; }
.home-alt .ha-training-copy .kicker::after { content: ''; width: 24px; height: 1px; background: var(--deka-sapphire); }
.home-alt .ha-training-copy h2 { font-family: var(--deka-serif); font-weight: 300; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--deka-ink); margin-top: 16px; }
.home-alt .ha-training-copy h2 em { font-style: italic; color: var(--deka-sapphire); }
.home-alt .ha-training-copy > p { font-size: 15.5px; line-height: 1.7; color: var(--hm-muted); margin-top: 18px; max-width: 52ch; }
.home-alt .ha-support h4 { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deka-ink); opacity: 0.5; margin: 26px 0 14px; }
.home-alt .ha-support ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.home-alt .ha-support li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.4; color: var(--deka-ink); }
.home-alt .ha-support li::before {
content: ''; position: absolute; left: 0; top: 4px; width: 11px; height: 11px;
background: var(--hm-sky); border-radius: 3px;
-webkit-mask: url("data:image/svg+xml;utf8,") center / 80% no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 80% no-repeat;
background: var(--deka-sapphire);
}
.home-alt .ha-training-copy .ha-btn { margin-top: 32px; }
.home-alt .ha-training-media { position: relative; min-height: 360px; }
.home-alt .ha-training-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
.home-alt .ha-training-grid { grid-template-columns: 1fr; min-height: 0; }
.home-alt .ha-training-media { aspect-ratio: 4 / 3; order: -1; }
.home-alt .ha-training-copy { padding: 56px 56px 72px; }
.home-alt .ha-support ul { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.home-alt .ha-training-copy { padding: 48px 24px 64px; }
}
/* ==========================================================================
H — FINAL CTA + FORM (dark ink; ivory form card)
========================================================================== */
.home-alt .ha-final { background: var(--deka-ink); color: var(--deka-ivory); padding: 120px 0; }
.home-alt .ha-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.home-alt .ha-final .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-sapphire-soft); font-weight: 500; }
.home-alt .ha-final .kicker::after { content: ''; width: 24px; height: 1px; background: var(--deka-sapphire-soft); }
.home-alt .ha-final h2 { font-family: var(--deka-serif); font-weight: 300; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; color: var(--deka-ivory); margin-top: 16px; }
.home-alt .ha-final h2 em { font-style: italic; color: var(--deka-brass); }
/* :not(.ha-form) — this rule is for the dark column only. The ivory form card is
also a direct div child of the grid, so without the guard its near-white colour
out-specificities .ha-form .ha-form-sub and paints ivory text on an ivory card. */
.home-alt .ha-final > .container > .ha-final-grid > div:not(.ha-form) > p { font-size: 16px; line-height: 1.7; color: rgba(245, 244, 239, 0.72); margin-top: 18px; }
/* contact block (phone · email · address · hours) on the dark final section */
.home-alt .ha-final-contact { list-style: none; padding: 0; margin: 32px 0 0; display: grid; }
.home-alt .ha-final-contact li {
display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: baseline;
padding: 16px 0; border-top: 1px solid rgba(245, 244, 239, 0.14);
}
.home-alt .ha-final-contact li:last-child { border-bottom: 1px solid rgba(245, 244, 239, 0.14); }
.home-alt .ha-final-contact__label {
font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--deka-sapphire-soft); font-weight: 500;
}
.home-alt .ha-final-contact li a,
.home-alt .ha-final-contact li span:not(.ha-final-contact__label):not(.ha-final-contact__sub) {
font-size: 16px; line-height: 1.5; color: var(--deka-ivory);
}
.home-alt .ha-final-contact__group { display: grid; gap: 14px; }
.home-alt .ha-final-contact__entry { display: flex; flex-direction: column; gap: 3px; }
.home-alt .ha-final-contact__sub {
font-family: var(--deka-mono); font-size: 9.5px; letter-spacing: 0.16em;
text-transform: uppercase; color: rgba(245, 244, 239, 0.5); font-weight: 500;
}
.home-alt .ha-final-contact li a { transition: color .25s ease; }
.home-alt .ha-final-contact li a:hover { color: var(--deka-sapphire-soft); }
@media (max-width: 480px) {
.home-alt .ha-final-contact li { grid-template-columns: 1fr; gap: 4px; }
}
.home-alt .ha-form { background: var(--deka-ivory); color: var(--deka-ink); border-radius: 18px; padding: 38px 34px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
/* 38px/34px is a desktop card. On a phone it eats most of the column and
squeezes the fields; 20px all round gives the inputs the width back. */
@media (max-width: 760px) { .home-alt .ha-form { padding: 20px; } }
.home-alt .ha-form h3 { font-family: var(--deka-serif); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--deka-ink); margin-bottom: 8px; }
.home-alt .ha-form .ha-form-sub { font-size: 14px; line-height: 1.55; color: var(--hm-muted); margin-bottom: 24px; }
@media (max-width: 900px) { .home-alt .ha-final-grid { grid-template-columns: 1fr; gap: 40px; } }
/* ==========================================================================
LEAD BANNER FORM (elevated card above the lasers intro)
========================================================================== */
/* Ivory section, flush against the hero and continuous with the logo reel below
it. The negative margin goes on the CARD, not the section: if the section
moved, its ivory background would ride up with it and simply paint over the
hero foot. Lifting only the card leaves the ivory edge at the hero boundary,
so the card sits half on the video and half on the ivory. */
.home-alt .ha-leadbar {
position: relative; z-index: 5;
/* flow-root establishes a block formatting context. Without it the card's
-75px margin-top COLLAPSES THROUGH this section (no padding-top, no
border) and drags the ivory background up over the hero foot - which is
the whole thing we are avoiding. overflow:hidden would also stop the
collapse, but it would clip the card box-shadow. */
display: flow-root;
margin-top: 0;
padding: 0 0 clamp(28px, 4vw, 44px);
background: var(--deka-ivory);
}
/* .trust carries a border-top; against the leadbar it would draw a hairline
through what should read as one continuous ivory block. */
.home-alt .trust { border-top: 0; }
.home-alt .ha-leadbar-form {
position: relative;
margin: -75px 0 0;
background: #fff; border: 1px solid var(--deka-rule); border-radius: 18px;
box-shadow: 0 40px 80px -50px rgba(4,5,65,0.45);
padding: clamp(22px,3vw,30px) clamp(24px,3vw,36px);
display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: clamp(24px,3vw,48px); align-items: center;
}
/* Load-bearing. A grid item defaults to min-width: auto, so it cannot shrink
below its min-content width. The CTM banner row's min-content is
3 x --ctm-minw (180px) + submit + gaps = ~665px, which pinned this column at
665px however narrow the card got. The row therefore never became narrow, and
the embed's own script - which stacks the fields by adding .ctm-stacked once
the row drops under its threshold - never fired. The form looked like it had
lost its wrapping; in fact it was never allowed to get small enough to wrap.
min-width: 0 lets the column shrink so the script can do its job. */
.home-alt .ha-leadbar-embed { min-width: 0; }
.home-alt .ha-leadbar-kicker { font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500; }
.home-alt .ha-leadbar-title { font-family: var(--deka-serif); font-weight: 300; font-size: clamp(24px,2.4vw,32px); line-height: 1.05; letter-spacing: -0.01em; color: var(--deka-ink); margin-top: 8px; }
.home-alt .ha-leadbar-title em { font-style: italic; color: var(--deka-sapphire); }
@media (max-width: 980px) {
.home-alt .ha-leadbar-form { grid-template-columns: 1fr; gap: 22px; }
}
/* Stacked hero (copy above, lasers below) and a 1-column card that is much
taller. A full 75px overhang would swallow the foot of the laser image. */
@media (max-width: 1000px) {
.home-alt .ha-leadbar-form { margin-top: -40px; }
}
/* ==========================================================================
07 — VOICES — light band (Jul 2026): the dark Ken Burns photo treatment was
retired. Base home.css already styles .voices for the bone ground (bone bg,
ink rules/dots/counter/arrows), so this block only carries the head sizing
and what the front page adds on top of it.
========================================================================== */
.home-alt .voices .voices-head { margin-bottom: clamp(34px,5vh,52px); }
/* The per-slide "— 04" numbers were removed (Jul 2026). home.css still lays the
slide out as 1fr 7fr (number | content), which would drop the content div
into the skinny number column — collapse to a single column instead. */
.home-alt .voices .voice-slide { grid-template-columns: 1fr; }
.home-alt .voices .voices-head .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-ink); font-weight: 500; }
.home-alt .voices .voices-head .kicker::after { content: ''; width: 24px; height: 1px; background: var(--deka-ink); }
.home-alt .voices .voices-head h2 { font-family: var(--deka-serif); font-weight: 300; font-size: clamp(30px,4vw,50px); line-height: 1.05; letter-spacing: -0.02em; color: var(--deka-ink); margin-top: 14px; }
/* Light ground: emphasis is serif italic, never colour — brass is barred here. */
.home-alt .voices .voices-head h2 em { font-style: italic; }
/* lead beneath the voices headline — every other section carries one; without it
this head read thin. */
.home-alt .voices .voices-head .voices-lead {
margin-top: 16px; max-width: 62ch;
font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65;
color: rgba(4, 5, 65, 0.72);
}
/* Voices — DESKTOP ONLY: portrait + name + title get their own left column so
the portrait can be far larger (48px -> 150px); the quote takes the rest.
Done purely with grid placement — the markup order (quote, then .who) is
untouched, so below 900px it falls back to the stacked default with no
override to undo.
150px is the ceiling on purpose: the source portraits are 150x150 (no larger
square crops exist for Heller / Bilski / Horowitz), so anything bigger
upscales and goes soft. */
@media (min-width: 900px) {
.home-alt .voices .voice-slide > div:not(.voice-no) {
display: grid;
grid-template-columns: 210px 1fr;
column-gap: clamp(36px, 4vw, 64px);
align-items: center; /* was start — portrait now centres against the quote card */
}
.home-alt .voices .voice-slide .q { grid-column: 2; grid-row: 1; }
.home-alt .voices .voice-slide .who {
grid-column: 1; grid-row: 1;
margin-top: 0;
flex-direction: column; align-items: flex-start; gap: 18px;
}
.home-alt .voices .voice-slide .avatar { width: 150px; height: 150px; flex: none; }
.home-alt .voices .voice-slide .avatar img {
width: 100%; height: 100%; border-radius: 50%;
object-fit: cover; display: block;
}
.home-alt .voices .voice-slide .meta .n { font-size: 20px; }
/* Speech-bubble tail on the quote card, pointing at the portrait column.
Desktop only — below 900px the portrait sits under the quote, so a
left-pointing tail would aim at nothing. A rotated square whose exposed
left/bottom edges continue the card's own border; its fill matches the
card gradient at mid-height. */
.home-alt .voices .voice-slide .q { position: relative; }
.home-alt .voices .voice-slide .q::before {
content: ""; position: absolute; top: 50%; left: -9px;
width: 16px; height: 16px;
transform: translateY(-50%) rotate(45deg);
background: #fdfcfa;
border-left: 1px solid rgba(4, 5, 65, 0.10);
border-bottom: 1px solid rgba(4, 5, 65, 0.10);
}
}
/* Below the desktop grid the portrait + name sit UNDER the quote card, so the
speech-bubble tail hangs off the card's bottom-left, aimed at them. Down
arrow = right+bottom borders exposed on the rotated square; fill matches the
card gradient's END stop since this tail sits on the bottom edge. */
@media (max-width: 899.98px) {
.home-alt .voices .voice-slide .q { position: relative; }
.home-alt .voices .voice-slide .q::before {
content: ""; position: absolute; bottom: -9px; left: 28px;
width: 16px; height: 16px;
transform: rotate(45deg);
background: #faf9f5;
border-right: 1px solid rgba(4, 5, 65, 0.10);
border-bottom: 1px solid rgba(4, 5, 65, 0.10);
}
}
/* Mobile controls: the single space-between row squashes — the "03 / 05"
counter breaks vertically. Dots take their own full-width row on top;
beneath, the counter sits directly beside the arrows. */
@media (max-width: 720px) {
.home-alt .voices .voices-controls { flex-wrap: wrap; row-gap: 20px; }
.home-alt .voices .voices-dots { flex-basis: 100%; justify-content: flex-end; }
.home-alt .voices .voices-counter { white-space: nowrap; margin-left: auto; margin-right: 18px; }
}
/* The quote keeps the lp-card treatment — a white card, now on the bone band.
On a light face the house rule applies: emphasis is serif italic, NOT colour,
so the em stays ink rather than picking up brass. */
.home-alt .voices .voice-slide .q {
/* home.css caps .q at a ~62ch measure. That was right for bare text, but on a
card it left the card floating ~200px short of its column, reading as a
mistake. The card fills the column; its padding keeps the measure sane. */
max-width: none;
padding: clamp(26px, 3vw, 38px);
background: linear-gradient(180deg, #ffffff 0%, #faf9f5 100%);
border: 1px solid rgba(4, 5, 65, 0.10);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 12px 26px -20px rgba(4, 5, 65, 0.30);
color: var(--deka-ink);
}
.home-alt .voices .voice-slide .q em { color: var(--deka-ink); }
/* ==========================================================================
01 — HERO (home-alt override)
Full-viewport video. Est. label + stats pinned top; headline + CTA pinned
bottom (headline left, button right). Bottom fades into dark purple so it
blends into the lead-form band that follows.
========================================================================== */
.home-alt .hero { min-height: 640px; height: 100vh; height: 100dvh; background: var(--deka-ink); }
/* Pull the video (and poster) up 100px so the bottom 100px of the hero is a
solid dark-purple band (the hero's own --deka-ink background). */
.home-alt .hero-video-frame,
.home-alt .hero-poster { bottom: 100px; }
/* General purple overlay — restored, slightly lighter than the base
(base was .80/.58/.86); matches the video area (bottom: 100px). */
.home-alt .hero-video-overlay {
bottom: 100px;
background:
radial-gradient(ellipse 60% 45% at 78% 40%, rgba(43,82,159,0.38), transparent 60%),
linear-gradient(180deg, rgba(4,5,65,0.66) 0%, rgba(4,5,65,0.46) 38%, rgba(4,5,65,0.72) 100%);
}
/* bottom fade → dark purple (was ivory); resolves to full --deka-ink exactly
at the 100px line, where it meets the solid band below. */
.home-alt .hero-bottom-fade {
bottom: 100px;
height: 42%;
background: linear-gradient(180deg,
rgba(4,5,65,0) 0%,
rgba(4,5,65,0.28) 46%,
rgba(4,5,65,0.80) 80%,
var(--deka-ink) 100%);
}
/* top bar — stats + supporting copy, pinned upper-right */
.home-alt .hero-top {
position: absolute; left: 0; right: 0; top: 0; z-index: 4;
padding-top: clamp(112px,15vh,168px);
display: flex; justify-content: flex-end;
}
.home-alt .hero-top-right {
display: flex; flex-direction: column; align-items: flex-end;
gap: 22px; max-width: 480px;
}
.home-alt .hero-top .hero-stats {
display: flex; gap: clamp(28px,4vw,56px); text-align: right;
}
.home-alt .hero-top .hero-stat .num { font-size: clamp(26px,2.6vw,38px); }
.home-alt .hero-top .hero-stat .cap { margin-top: 6px; }
/* bottom bar — headline (left) · CTA (right) */
.home-alt .hero-bottom {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
padding-bottom: clamp(40px,6vh,72px);
display: flex; justify-content: space-between; align-items: flex-end;
gap: clamp(32px,5vw,72px);
}
.home-alt .hero-bottom-text {
max-width: none;
position: relative;
padding-left: clamp(22px,2.2vw,36px);
}
/* slim muted-white accent rule down the left edge of the headline block */
.home-alt .hero-bottom-text::before {
content: '';
position: absolute; left: 0; top: 6px; bottom: 8px;
width: 2px; border-radius: 2px;
background: rgba(245,244,239,0.6);
}
.home-alt .hero-bottom .hero-headline { max-width: none; margin: 0; font-size: clamp(34px,4.4vw,72px); }
.home-alt .hero-tagline {
margin-top: .35em;
margin-bottom: 0;
font-family: var(--deka-serif); font-weight: 300; font-style: italic;
font-size: clamp(18px,1.8vw,24px); line-height: 1.4;
color: rgba(245,244,239,0.85);
}
.home-alt .hero-bottom-cta { flex: none; padding-bottom: 6px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
/* secondary "call" button — outline pill so it reads distinct from the solid CTA */
.home-alt .hero-cta-call {
background: transparent; color: var(--deka-ivory);
border: 1px solid rgba(245,244,239,0.5);
box-shadow: none; justify-content: center;
}
.home-alt .hero-cta-call:hover { background: rgba(245,244,239,0.10); border-color: var(--deka-ivory); box-shadow: none; }
.home-alt .hero-cta-call .phone { width: 15px; height: 15px; }
@media (max-width: 900px) {
/* mobile: headline + copy, then the button underneath — all pinned bottom */
.home-alt .hero-top { padding-top: 96px; }
.home-alt .hero-top .hero-stat .num { font-size: 22px; }
.home-alt .hero-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
.home-alt .hero-bottom-cta { justify-content: flex-start; }
.home-alt .hero-bottom-text { max-width: 100%; }
.home-alt .hero-bottom .hero-sub { max-width: 46ch; }
}
@media (max-width: 600px) {
.home-alt .hero-bottom-cta { flex-direction: column; align-items: stretch; }
}
/* ==========================================================================
B2 — BEYOND TRADITIONAL DENTISTRY (nested inside the lasers section)
Ivory ground → ink only, NEVER brass. Emphasis is serif italic.
ha-bt-* names are deliberate: .ha-beyond lives in the global pages.css and is
shared with page 7225 "Our Lasers".
========================================================================== */
/* The block sits on its own rounded panel. --deka-sapphire-soft (#8b8eb2) is the
existing token for this lavender — no new colour is introduced. Text on the
panel goes ivory; brass is NOT used here (it is reserved for dark surfaces).
The panel is shaped rather than flat: a soft light sheen off the top-left and
ink (--deka-ink, #040541) pooling into the bottom-right, over a lavender→deep
diagonal. Every layer is the ink token at low alpha, so it reads as depth in
the DEKA purple rather than as a new hue. */
.home-alt .ha-bt {
margin-top: clamp(72px, 9vw, 120px);
/* Dark purple panel. Same shaped-gradient idea as before, inverted: a soft
lift of --deka-sapphire-soft through the middle, with --deka-ink pooling
into the top-left and bottom-right so the corners stay the deepest points
and it reads as depth, not a flat block. All in the DEKA purple ramp —
no new hue. */
background:
radial-gradient(72% 62% at 50% 44%, rgba(139, 142, 178, 0.16) 0%, rgba(139, 142, 178, 0) 70%),
radial-gradient(75% 70% at 0% 0%, rgba(4, 5, 65, 0.72) 0%, rgba(4, 5, 65, 0) 62%),
radial-gradient(85% 80% at 100% 100%, rgba(4, 5, 65, 0.82) 0%, rgba(4, 5, 65, 0) 64%),
linear-gradient(135deg, #191c66 0%, #10125a 48%, #070849 100%);
border-radius: 20px;
padding: 40px;
}
@media (max-width: 760px) { .home-alt .ha-bt { padding: 20px; } }
/* The kicker owns row 1 alone, so the nav column starts in ROW 2 — its top edge
is therefore the h2's top edge exactly, with no magic padding to guess at. */
.home-alt .ha-bt-head {
display: grid; grid-template-columns: 1fr auto;
column-gap: 48px; row-gap: 14px;
align-items: start; margin-bottom: clamp(28px, 4vw, 44px);
}
.home-alt .ha-bt-head > .kicker {
grid-column: 1; grid-row: 1;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--deka-ivory); font-weight: 500;
}
.home-alt .ha-bt-head > .kicker::after { content: ''; width: 24px; height: 1px; background: var(--deka-ivory); }
.home-alt .ha-bt-head-copy { grid-column: 1; grid-row: 2; max-width: 62ch; }
.home-alt .ha-bt-head-copy h2 {
font-family: var(--deka-serif); font-weight: 300;
font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
color: var(--deka-ivory); margin-top: 0;
}
/* Dark panel, so brass is the sanctioned accent (it is barred on ivory only). */
.home-alt .ha-bt-head-copy h2 em { font-style: italic; color: var(--deka-brass); }
.home-alt .ha-bt-head-copy > p {
/* 24px top margin clears the italic serif descenders of the h2 above. */
font-size: 15.5px; line-height: 1.7; color: rgba(245, 244, 239, 0.88); margin-top: 24px;
}
/* right column: the prompt sits level with the h2, arrows beneath it */
.home-alt .ha-bt-nav {
grid-column: 2; grid-row: 2;
display: flex; flex-direction: column; align-items: flex-end;
gap: 22px; text-align: right;
}
.home-alt .ha-bt-prompt {
font-family: var(--deka-serif); font-weight: 300;
font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35;
color: var(--deka-ivory); max-width: 30ch; margin: 0;
}
.home-alt .ha-bt-prompt em { font-style: italic; }
.home-alt .ha-bt-arrows { display: flex; gap: 10px; }
.home-alt .ha-bt-arrow {
width: 46px; height: 46px; border-radius: 999px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: #fff;
border: 1px solid rgba(255, 255, 255, 0.45); cursor: pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.home-alt .ha-bt-arrow:hover:not(:disabled) { background: #fff; color: var(--deka-ink); border-color: #fff; }
.home-alt .ha-bt-arrow:disabled { opacity: .35; cursor: default; }
.home-alt .ha-bt-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* track — 2.5 cards per view so the 4th hangs over the edge */
/* The clip is load-bearing — it makes the 2.5-up peek and stops the off-screen
cards spilling across the page — so overflow:visible is not an option. Instead
make room for the card shadow + hover lift INSIDE the clip, then pull the box
back with an equal negative margin so the cards stay aligned to the container
and the layout below is unchanged.
Only vertical room is needed: with box-shadow 0 12px 26px -20px (and
0 26px 50px -30px on hover) the -20/-30px spread cancels the blur horizontally,
so the shadow only ever spills downward — plus 3px upward for the hover lift. */
.home-alt .ha-bt-viewport {
overflow: hidden;
padding: 8px 0 30px;
margin: -8px 0 -30px;
}
.home-alt .ha-bt-track {
--ha-bt-gap: 24px;
display: flex; gap: var(--ha-bt-gap);
transition: transform .5s cubic-bezier(.22,.61,.36,1);
will-change: transform;
/* pan-y: horizontal gestures belong to the slider, vertical ones still
scroll the page. Without this, touch devices never deliver the swipe. */
touch-action: pan-y;
}
/* No grab-hand: on desktop the affordance is a trackpad swipe (wheel deltaX) or
the arrows. Pointer-drag still works — it's there for touch. */
/* a drag must not select text or ghost-drag the product images */
.home-alt .ha-bt-track.is-dragging .ha-bt-card { user-select: none; }
.home-alt .ha-bt-media img { -webkit-user-drag: none; user-drag: none; }
/* Cards adopt the .lp-practice .lp-card design from the laser pages: gradient
face, hairline border, inset highlight, soft lift on hover. The icon tile is
replaced by the product cutout on its own transparent background (no panel),
so the card runs vertically: image → tag → title → copy → link. */
.home-alt .ha-bt-card {
--ha-bt-per: 2.5;
flex: 0 0 calc((100% - (var(--ha-bt-gap) * 1.5)) / var(--ha-bt-per));
display: flex; flex-direction: column;
padding: 30px 26px;
background: linear-gradient(180deg, #ffffff 0%, #faf9f5 100%);
border: 1px solid rgba(4, 5, 65, 0.10);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px -20px rgba(4, 5, 65, 0.30);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-alt .ha-bt-card:hover {
transform: translateY(-3px);
border-color: rgba(4, 5, 65, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 26px 50px -30px rgba(4, 5, 65, 0.40);
}
/* Product cutout in place of the icon tile. The four images have incompatible
ratios (254x607, 319x405, 500x500) — a fixed height + contain keeps them all
optically sized without cropping the tall QuietNite handpiece. */
.home-alt .ha-bt-media {
height: 140px; margin-bottom: 22px;
display: flex; align-items: center; justify-content: flex-start;
}
.home-alt .ha-bt-media img {
max-height: 100%; width: auto; max-width: 72%;
object-fit: contain; display: block;
transition: transform .25s ease;
}
.home-alt .ha-bt-card:hover .ha-bt-media img { transform: scale(1.06); }
.home-alt .ha-bt-tag {
font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--deka-ink); margin-bottom: 10px;
}
.home-alt .ha-bt-card h3 {
font-family: var(--deka-serif); font-weight: 400; font-size: 20px;
line-height: 1.25; color: var(--deka-ink); margin-bottom: 8px; letter-spacing: -0.01em;
}
.home-alt .ha-bt-card p { font-size: 14px; line-height: 1.6; color: var(--hm-muted); }
.home-alt .ha-bt-link {
display: inline-flex; align-items: center; gap: 8px;
margin-top: auto; padding-top: 20px; align-self: flex-start;
font-family: var(--deka-mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--deka-ink); font-weight: 500;
transition: gap .25s ease;
}
.home-alt .ha-bt-link:hover { gap: 12px; }
.home-alt .ha-bt-link svg { flex: none; }
@media (prefers-reduced-motion: reduce) {
.home-alt .ha-bt-card,
.home-alt .ha-bt-media img { transition: none; }
.home-alt .ha-bt-card:hover { transform: none; }
.home-alt .ha-bt-card:hover .ha-bt-media img { transform: none; }
}
@media (max-width: 1100px) { .home-alt .ha-bt-card { --ha-bt-per: 1.6; } }
@media (max-width: 760px) {
/* single column: kicker, copy, then the prompt + arrows stacked beneath */
.home-alt .ha-bt-head { grid-template-columns: 1fr; row-gap: 18px; }
.home-alt .ha-bt-nav { grid-column: 1; grid-row: 3; align-items: flex-start; text-align: left; }
.home-alt .ha-bt-prompt { max-width: none; }
/* Panel breaks out of the container to 95vw, so the cards get real width to
hold copy. Percentage margins resolve against the CONTAINER's content
width, so calc(50% - 47.5vw) on each side lands the panel at exactly 95vw,
centred, whatever padding the container carries. */
.home-alt .ha-bt {
width: auto;
margin-inline: calc(50% - 47.5vw);
padding: 16px;
}
.home-alt .ha-bt-track { --ha-bt-gap: 12px; }
/* flex-basis set directly instead of via --ha-bt-per. The per-view divisor
assumes 1.5 visible gaps, which is tuned for the 2.5-up desktop deck and
fights you at roughly one-card-per-view. This leaves a ~22px sliver of the
next card — enough to say "swipe" without stealing copy width. */
.home-alt .ha-bt-card {
flex: 0 0 calc(100% - 34px);
padding: 22px 20px;
}
.home-alt .ha-bt-media { height: 118px; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .home-alt .ha-bt-track { transition: none; } }
/* ==========================================================================
G — TRAINING & SUPPORT · 4 STEPS (dark ink band; replaces .ha-training)
Dark surface → brass IS permitted here. Emphasis is serif italic.
========================================================================== */
/* bottom padding is trimmed: this section now butts straight onto the practice
reel, and 130px + the reel's own padding + .ha-why's 120px stacked into a
~200px void around a 200px-tall strip. */
.home-alt .ha-steps {
background: var(--deka-ink); color: var(--deka-ivory);
padding: clamp(90px, 10vw, 130px) 0 clamp(64px, 7vw, 92px);
}
/* Decorative DEKA wordmark, top-right of the section's INNER content.
.ha-steps-markwrap is a zero-height in-flow block, so its box IS the
container's content box — the mark's right:0 / width:50% therefore resolve
against the inner content, not the container's padding box, and stay correct
at every breakpoint without hardcoding the container padding.
50% opacity at the top, faded to 0 at the bottom (opacity + gradient mask). */
.home-alt .ha-steps > .container { position: relative; }
.home-alt .ha-steps-markwrap { position: relative; height: 0; z-index: 0; }
.home-alt .ha-steps-mark {
position: absolute; top: 0; right: 0;
width: 50%; height: auto; display: block;
opacity: 0.5;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
pointer-events: none; user-select: none;
}
/* keep the real content above the mark */
.home-alt .ha-steps-head,
.home-alt .ha-steps-grid,
.home-alt .ha-steps-foot { position: relative; z-index: 1; }
/* Mobile: the markwrap is the container's first child, so top:0 drops the
wordmark exactly where the kicker sits — on a narrow column they collide.
Push it clear. Still absolutely positioned; only the offset changes. */
@media (max-width: 760px) {
.home-alt .ha-steps-mark { top: 3rem; }
}
.home-alt .ha-steps-head { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.home-alt .ha-steps-head .kicker {
grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px;
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: rgba(245, 244, 239, 0.72); font-weight: 500;
}
.home-alt .ha-steps-head .kicker::before {
content: ''; width: 7px; height: 7px; border-radius: 999px;
background: var(--deka-brass); flex: none;
}
.home-alt .ha-steps-head h2 {
font-family: var(--deka-serif); font-weight: 300;
font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.02em;
color: var(--deka-ivory); margin-top: 18px;
}
.home-alt .ha-steps-head h2 em { font-style: italic; }
/* the rule that runs off to the right of the headline */
.home-alt .ha-steps-head::after { content: ''; height: 1px; background: var(--deka-rule-light); align-self: end; margin-bottom: 16px; }
.home-alt .ha-steps-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(40px, 5vw, 64px);
}
/* Same lp-card treatment as .ha-bt-card (from .lp-practice .lp-card on the laser
pages): gradient face, hairline border, inset top highlight, soft lift that
deepens on hover. Keeps the two card sets on this page identical. */
.home-alt .ha-step {
/* 240px: sized for the one-line step titles (Jul 2026); 300px dated from
the two-line titles and left a void above the foot-pinned copy. */
display: flex; flex-direction: column; min-height: 240px;
padding: 30px 26px;
background: linear-gradient(180deg, #ffffff 0%, #faf9f5 100%);
border: 1px solid rgba(4, 5, 65, 0.10);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 12px 26px -20px rgba(4, 5, 65, 0.30);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-alt .ha-step:hover {
transform: translateY(-3px);
border-color: rgba(4, 5, 65, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 22px 40px -24px rgba(4, 5, 65, 0.42);
}
.home-alt .ha-step-no {
font-family: var(--deka-serif); font-weight: 300; font-size: 30px;
color: var(--deka-ink); letter-spacing: 0.02em;
}
/* the span wraps only the period */
.home-alt .ha-step-no span { color: var(--deka-sapphire-soft); }
.home-alt .ha-step h3 {
font-family: var(--deka-serif); font-weight: 300;
font-size: clamp(26px, 2.1vw, 32px); /* was 22px */
line-height: 1.15; letter-spacing: -0.01em;
color: var(--deka-ink); margin-top: 12px;
}
/* description pinned to the card foot, as in the reference */
.home-alt .ha-step p {
margin-top: auto; padding-top: 28px; font-size: 14.5px;
line-height: 1.6; color: rgba(4, 5, 65, 0.68);
}
.home-alt .ha-steps-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 28px; flex-wrap: wrap; margin-top: clamp(18px, 2vw, 26px);
padding: 16px 16px 16px 26px; border: 1px solid var(--deka-rule);
border-radius: 999px; background: #fff;
}
/* min-width:0 — a flex item defaults to min-width:auto and will not shrink
below its content, so the copy pushed the bar wide instead of wrapping. */
.home-alt .ha-steps-foot-lead { display: flex; align-items: center; gap: 18px; min-width: 0; }
.home-alt .ha-steps-foot-lead p { min-width: 0; }
.home-alt .ha-avatars { display: flex; flex: none; }
/* portraits are square 150x150 → cover is safe here.
The ring must match the bar it sits on, or the overlapping stack reads as one
blob — it was ink for the dark bar, so it follows the bar to white. */
.home-alt .ha-avatars img {
width: 44px; height: 44px; border-radius: 999px; object-fit: cover;
border: 2px solid #fff; display: block;
}
.home-alt .ha-avatars img + img { margin-left: -20px; }
/* margin:0 — the inherited paragraph bottom-margin was offsetting the flex
centering, so the copy sat low against the avatar stack. */
.home-alt .ha-steps-foot p { font-size: 15px; line-height: 1.5; color: var(--deka-ink); margin: 0; }
.home-alt .ha-steps-foot p em { font-family: var(--deka-serif); font-style: italic; }
/* the Academy CTA is now .ha-btn .ha-btn--brass .ha-btn--disc */
@media (max-width: 1000px) { .home-alt .ha-steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
.home-alt .ha-steps-head { grid-template-columns: 1fr; }
.home-alt .ha-steps-head::after { display: none; }
.home-alt .ha-steps-foot { border-radius: 20px; flex-direction: column; align-items: flex-start; padding: 20px; }
}
@media (max-width: 600px) {
.home-alt .ha-steps-grid { grid-template-columns: 1fr; }
.home-alt .ha-step { min-height: 0; }
.home-alt .ha-step p { padding-top: 16px; }
.home-alt .ha-steps-foot-lead { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* ==========================================================================
TRUST REEL — scoped overrides.
.trust / .trust-wrap / .trust-label live in the GLOBAL home.css, which is
shared with Home (7314) — so they are overridden here, never edited there.
Tighter band (80px → 32px) and a wider label column so the line reads
left-to-right instead of stacking into a narrow ribbon.
========================================================================== */
.home-alt .trust { padding: 32px 0; }
/* The reel's min-content is ~2660px — the logo list is duplicated to loop the
marquee. A bare `3fr` means minmax(AUTO, 3fr), so that 2660px became the
column's MINIMUM: it ate the whole grid (computed "0px 2660px"), starved the
label to 0 width — hence one word per line — and overflowed the page.
minmax(0, …) on the track AND min-width:0 on the item let it shrink; the
overflow clip then keeps the marquee inside the container, so the gallery's
own edge mask fades it out at the right instead of running off-page. */
.home-alt .trust-wrap {
grid-template-columns: minmax(260px, 0.85fr) minmax(0, 3fr);
gap: 56px;
align-items: center;
}
.home-alt .trust-label { max-width: none; letter-spacing: 0.16em; line-height: 1.7; }
.home-alt .trust-reel { min-width: 0; overflow: hidden; }
@media (max-width: 900px) {
.home-alt .trust-wrap { grid-template-columns: 1fr; gap: 18px; }
}
/* Breathing room under the reel — .ha-lasers ships with only 44px of top
padding, which crowded the section against the logo band. */
.home-alt .ha-lasers { padding-top: clamp(72px, 8vw, 110px); }
/* ==========================================================================
01 — HERO v2 (copy left · laser lineup right, bleeding past the bottom edge)
Overrides the base .hero/.hero-* rules from the global home.css. Those are
shared with Home (7314), so they are overridden here — never edited there.
The #top / #hero-video / .hero-poster / .video-ready hooks are preserved so
home.js still fades the poster out once the video plays.
========================================================================== */
.home-alt .ha-hero {
/* height:auto is load-bearing: the inherited `.home-alt .hero` rule above
sets a FIXED height:100dvh, which a min-height can never beat. Clearing it
lets min-height govern, and lets the hero grow if the copy ever needs it. */
height: auto;
min-height: 85svh;
/* clips the image where it breaks out of its column past the viewport edge
and out the foot of the section */
overflow: hidden;
/* how far the lasers overflow their own grid column (100% = no overflow;
the image simply fills its column) */
--ha-hero-bleed: 100%;
}
/* No wash. The gradient is baked into the video itself now, so the CSS overlay
would double it up and muddy the footage. The element stays (home.css owns it
and it sits in the z-stack) — it is just transparent. */
.home-alt .ha-hero .hero-video-overlay { background: none; }
/* Brass on the italic. The house rule (emphasis is italic, never colour) is
about IVORY grounds, where the accent and the text colour are the same ink
value so colour cannot carry emphasis. The hero is a dark ground — and brass
is the sanctioned warm accent on dark. Scoped to the hero headline. */
.home-alt .ha-hero-headline em { color: var(--deka-brass); }
/* The inherited `.home-alt .hero-video-frame { bottom: 100px }` pulls the video
up to leave a solid ink band at the foot. That worked when a CSS overlay + fade
blended into it — with the gradient baked into the footage and no overlay, it
just reads as a hard horizontal seam. Let the video fill the hero. */
.home-alt .ha-hero .hero-video-frame,
.home-alt .ha-hero .hero-poster { bottom: 0; }
/* the old fade-to-ivory foot would wash out the lasers poking through */
.home-alt .ha-hero .hero-bottom-fade { display: none; }
.home-alt .ha-hero-grid {
position: relative; z-index: 4; /* above the lasers, which sit at z-index 3 */
min-height: 85svh;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(24px, 3.5vw, 56px);
align-items: end;
padding-top: clamp(130px, 16vh, 190px);
}
/* The +40px buys clearance for the lead-banner card, which overhangs the hero
foot by 75px. This column is bottom-aligned, so without it the card lands on
the CTA buttons. The laser lineup still bleeds out the foot. */
.home-alt .ha-hero-copy { min-width: 0; padding-bottom: calc(clamp(52px, 7vh, 90px) + 40px); }
.home-alt .ha-hero-eyebrow {
display: block; font-family: var(--deka-mono); font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(245, 244, 239, 0.62); font-weight: 500;
}
.home-alt .ha-hero-headline {
margin: 22px 0 0;
font-family: var(--deka-serif); font-weight: 300;
font-size: clamp(38px, 4.9vw, 72px); line-height: 1.05; letter-spacing: -0.02em;
color: var(--deka-ivory);
}
.home-alt .ha-hero-headline em { font-style: italic; } /* emphasis is italic, never colour */
.home-alt .ha-hero-sub {
margin: 26px 0 0; max-width: 46ch;
font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6;
color: rgba(245, 244, 239, 0.82);
}
/* CTAs — dark surface, so brass is permitted here */
.home-alt .ha-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 4vh, 44px); }
/* the hero pair is now .ha-btn--brass and .ha-btn--ghost-light */
/* stats strip */
.home-alt .ha-hero-stats {
display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
gap: clamp(28px, 5vw, 72px);
margin: clamp(38px, 6vh, 62px) 0 0; padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.home-alt .ha-hero-stat .num {
font-family: var(--deka-serif); font-weight: 300;
font-size: clamp(26px, 2.6vw, 38px); line-height: 1; color: var(--deka-ivory);
}
.home-alt .ha-hero-stat .cap {
margin: 8px 0 0; font-family: var(--deka-mono); font-size: 10.5px;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245, 244, 239, 0.6);
}
/* Laser lineup — bottom-anchored and pushed past the hero's bottom edge, which
.ha-hero's overflow:hidden then clips, so the units read as rising out of the
foot of the section. */
/* In the flow, aligned to the grid's right column — so the copy and the lasers
still share the content grid. The IMAGE then overflows that column by
--ha-hero-bleed, breaking past the container's gutter toward the viewport
edge, and past the hero's foot. .ha-hero's overflow:hidden clips both.
Nothing is absolutely positioned, so the column still governs where it sits. */
.home-alt .ha-hero-media {
align-self: end; min-width: 0;
pointer-events: none;
}
.home-alt .ha-hero-lasers {
display: block;
height: auto;
width: var(--ha-hero-bleed); /* > 100% → breaks out of the column */
max-width: none;
margin-bottom: 0%; /* sits flush on the hero's foot, no bleed */
filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.5));
}
/* Below 1000px the lasers return to the flow, stacked under the copy, so they
never sit behind the text. */
@media (max-width: 1000px) {
.home-alt .ha-hero { min-height: 0; }
.home-alt .ha-hero-grid {
min-height: 0; display: block;
padding-top: clamp(110px, 14vh, 150px);
}
.home-alt .ha-hero-copy { max-width: none; padding-bottom: 28px; }
.home-alt .ha-hero-media { width: 100%; max-width: 620px; margin: 0 auto; }
.home-alt .ha-hero-lasers { width: 100%; margin-bottom: -4%; } /* no bleed when stacked */
}
@media (max-width: 560px) {
.home-alt .ha-hero-stats { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.home-alt .ha-hero-btn { padding: 15px 26px; font-size: 14px; }
}
/* ==========================================================================
G2 — PRACTICE REEL (managed gallery: anchor_gallery 7491, logo_carousel)
The plugin owns the marquee itself (track, loop, edge mask). All this does is
give it the ink band it sits in, between .ha-steps and .ha-why, and size the
tiles. The photos are square (800x800 / 1170x1170), so cover crops nothing.
========================================================================== */
.home-alt .ha-reel {
background: var(--deka-ink);
padding: 0; /* the strip sits flush; the neighbours own the spacing */
}
/* Do NOT set a border-radius here — the gallery's own avg_border_radius setting
owns that, and a hardcoded radius silently overrides whatever is chosen in
WP admin.
The plugin's dark theme puts filter: invert(0.3) on .avg-marquee — a logo-reel
treatment that flips dark logos so they read on a dark ground. On PHOTOGRAPHS
it just washes them out. It sits on the .avg-marquee PARENT, so a filter:none
on the ![]()
does nothing; it has to be cleared on the element that carries it. */
.home-alt .ha-reel .avg-marquee,
.home-alt .ha-reel .avg-marquee-row,
.home-alt .ha-reel .avg-marquee-item,
.home-alt .ha-reel img {
filter: none;
opacity: 1;
}
/* ==========================================================================
SECTION HEADINGS — one desktop scale
Every section h2 was sizing itself independently (46 / 50 / 52 / 58px at
1440), so no two bands matched. They all take the .ha-why-title scale now.
Gated at min-width:1000px on purpose. Widening each clamp instead would have
changed the tablet range too — this way phones and tablets keep exactly the
sizes they had.
.ha-leadbar-title is deliberately NOT in this list: it is a card heading
inside the banner form, not a section heading, and 68px would blow the card
apart.
========================================================================== */
@media (min-width: 1000px) {
.home-alt .center-head h2,
.home-alt .ha-bt-head-copy h2,
.home-alt .ha-steps-head h2,
.home-alt .voices .voices-head h2,
.home-alt .ha-final h2 {
font-size: var(--deka-h2);
line-height: 1.08;
}
}
/* ==========================================================================
BUILT FOR — mobile: no wheel.
The wheel needs horizontal room beside "Built for" and vertical room for the
neighbours above/below. A phone has neither, so the whole apparatus collapses:
the slot becomes a block (so the word takes its own line), the clipped view
is dismantled (static, unmasked, no fixed height), and the options stack in a
SINGLE grid cell — one line box, nothing above or below, and they still
cross-fade as they rotate.
The clearance the wheel needed goes away with it; leaving it in was the
"extra spacing".
JS skips the translate below this breakpoint — its inline transform would
shove the stacked word out of view. See the isWheel() check.
========================================================================== */
@media (max-width: 760px) {
.home-alt .ha-why-slot { display: block; height: auto; }
.home-alt .ha-why-view {
position: static; height: auto; width: auto; overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.home-alt .ha-why-words {
position: static;
display: grid; /* every option in one cell */
white-space: normal; /* long options may wrap on a phone */
transition: none;
}
.home-alt .ha-why-word {
grid-area: 1 / 1;
opacity: 0;
transition: opacity .5s ease;
}
.home-alt .ha-why-word.is-active { opacity: 1; }
.home-alt .ha-why-rotator { padding-top: 0; }
.home-alt .ha-why-panels { margin-top: 28px; }
}
/* ==========================================================================
LASER CARDS — mobile
The bottom quarter of each unit is CROPPED, not scaled away. The frame is 75%
of the image height with overflow:hidden and the image top-aligned, so the
crop comes off the bottom — which is just wheels and castors. The image itself
renders at FULL size, so the head of the laser (the part worth seeing) is
bigger than it was, not smaller.
The fade lives on the FRAME, not the ![]()
. That was the bug in the first
attempt: the image carries a drop-shadow, which paints OUTSIDE its box, and a
mask on the image clipped and tiled at that boundary — the hard edge on the
left, right and top. mask-repeat/size are pinned for the same reason: the
default `repeat` is what tiles a gradient past its box.
The crop comes off the BOTTOM only. overflow:hidden would do it, but it clips
all four edges — including the top, where the drop-shadow spills and got cut.
So instead: overflow:visible lets the shadow spill top/sides, and a clip-path
with a 0 bottom inset re-crops only the bottom edge (the mask has already
faded to transparent there, so that hard clip line is never visible).
========================================================================== */
@media (max-width: 760px) {
.home-alt .ha-laser-media {
height: 255px; /* 75% of the 340px image */
place-items: start center; /* top-aligned → the crop takes from the BOTTOM */
overflow: visible; /* let the drop-shadow spill past the top/sides… */
clip-path: inset(-30px -30px 0 -30px); /* …but keep the crop coming off the BOTTOM only */
margin-bottom: 14px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
/* full size — the frame does the cropping, so no mask here */
.home-alt .ha-laser-media img {
-webkit-mask-image: none;
mask-image: none;
}
/* SmartPerio is the short wide benchtop unit (272px), so its frame is 75% of
THAT — otherwise it would barely crop at all next to the tall floor units. */
.home-alt .ha-laser:nth-child(3) .ha-laser-media { height: 204px; }
/* 28px was too tight once the crop removed the dead frame space that used to
separate the cards — the buttons read as belonging to the laser below them.
This is the whole gap now, so it has to do the work on its own. */
.home-alt .ha-laser + .ha-laser { margin-top: 60px; }
}