first for AT/SEO — the flex column + order:-1 does the swap. */
.brand-intro-text{
max-width:560px;
display:flex;
flex-direction:column;
align-items:flex-start;
}
.brand-name{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:clamp(42px,6vw,64px);
line-height:1.02;
letter-spacing:-0.03em;
color:var(--ink);
margin-bottom:18px;
}
/* Rendered above the name (order:-1) as the page's eyebrow — same accent
small-caps + 24px dash convention as .section-head .eyebrow. */
.brand-tagline{
order:-1;
display:inline-flex;
align-items:center;
gap:10px;
font-family:'Inter',sans-serif;
font-size:12px;font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:16px;
}
.brand-tagline::before{content:'';width:24px;height:1px;background:var(--accent);flex:none}
/* Scoped to a class, not `.brand-intro p` — an element selector there would
out-specify .brand-tagline (0,1,1 vs 0,1,0) and silently override its
accent colour with --ink-2. Keep body copy on its own class. */
.brand-desc{
font-size:17px;
line-height:1.75;
color:var(--ink-2);
max-width:54ch;
}
/* Plain logo image — no container chrome at all (no border, border-radius,
background fill, shadow, or padding). The wrapper exists only to carry the
.reveal animation hook; it must stay padding/margin-free so the logo sits
flush against the right edge of the header's content column.
Sizing is height-pinned with width:auto, so each brand's logo keeps its own
aspect ratio (sources run 0.89:1 for FunQB up to 3.68:1 for TEQ).
object-fit:contain + max-width:100% stop the reset's img{max-width:100%}
from squashing a wide wordmark if the row ever gets tight. */
.brand-logo{
flex:0 0 auto;
margin:0;
padding:0;
line-height:0;
}
.brand-logo img{
height:110px;
width:auto;
max-width:100%;
object-fit:contain;
object-position:right center;
display:block;
}
/* At 110px a 3.68:1 wordmark is ~405px wide, which starves the text column
before the stacking breakpoint — step the height down in between. */
@media (max-width:1000px){
.brand-logo img{height:92px}
}
@media (max-width:760px){
/* column-reverse puts the logo above the text visually while leaving DOM
order text-first, so reading/AT order stays name → category → body. */
.brand-intro{
flex-direction:column-reverse;
align-items:center;
text-align:center;
gap:26px;
}
.brand-intro-text{max-width:none;align-items:center}
/* Symmetric dashes once the eyebrow is centered */
.brand-tagline::after{content:'';width:24px;height:1px;background:var(--accent);flex:none}
.brand-logo img{height:80px;object-position:center}
.breadcrumb{justify-content:center}
}
/* Feature strip — a thin band bridging the intro and the range, giving the
middle of the page something to say. Plain
, not , so it
doesn't inherit the tall default section padding. */
.brand-strip{
border-block:1px solid var(--line);
background:var(--surface);
padding-block:17px;
}
.brand-strip .strip-inner{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px 22px;
font-family:'Inter',sans-serif;
font-size:11px;
font-weight:600;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--muted);
text-align:center;
}
.brand-strip .strip-dot{color:var(--accent)}
/* Matching pull-in on the range side of the strip */
.brand-range{padding-top:clamp(34px,4.5vw,52px)}
/* Product range — deliberately asymmetric (one tall card beside two stacked)
rather than a uniform e-commerce grid. */
.range-grid{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:20px;
counter-reset:range;
}
.range-card.r-lg{grid-column:1;grid-row:1/3}
.range-card.r-a{grid-column:2;grid-row:1}
.range-card.r-b{grid-column:2;grid-row:2}
@media (max-width:760px){
.range-grid{grid-template-columns:1fr}
.range-card.r-lg,.range-card.r-a,.range-card.r-b{grid-column:auto;grid-row:auto}
}
.range-card{
display:flex;
flex-direction:column;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius-md);
padding:18px;
transition:transform 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), border-color 0.28s var(--ease-smooth);
}
.range-card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-lg);
border-color:var(--accent);
}
/* Editorial index — 01 / 02 / 03 in the site's italic-numeral voice
(.section-num), counted in DOM order (large card first). Warms to accent
on hover so the whole card acknowledges the pointer, not just the border. */
.range-card::before{
counter-increment:range;
content:"0" counter(range);
font-family:'Space Grotesk',sans-serif;
font-style:italic;
font-size:13px;
letter-spacing:0.1em;
color:var(--muted);
margin-bottom:12px;
transition:color 0.28s var(--ease-smooth);
}
.range-card:hover::before{color:var(--accent)}
/* Pending-slot area — a static "Coming Soon" card, not the site's old
dashed-hatch-shimmer "awaiting content" treatment (retired; see git history
if that texture is ever needed elsewhere). Deliberately calm: solid
--bg-alt fill, a thin solid border for definition against the page
background, no animation at all — reads as intentional rather than
"under construction." Distinct from a filled slot (.has-photo, which drops
the border entirely) so it can never be mistaken for a real product. Scale
stays small enough to grow within the card's 18px padding on hover, so it
never spills past the card edge. */
.range-media{
position:relative;
overflow:hidden;
flex:1 1 auto;
min-height:190px;
margin-bottom:16px;
display:grid;place-items:center;text-align:center;
padding:16px;
background-color:var(--bg-alt);
border:1px solid var(--line);
border-radius:var(--radius-sm);
transition:transform 0.32s var(--ease-smooth), border-color 0.32s var(--ease-smooth);
}
.range-media .rm-inner{display:block}
.range-media .rm-icon{
display:block;
width:26px;height:26px;
margin:0 auto 10px;
color:var(--ink);
}
.range-media .rm-title{
display:block;
font-family:'Space Grotesk',sans-serif;
font-weight:600;
font-size:15px;
letter-spacing:-0.005em;
color:var(--ink);
margin-bottom:4px;
}
.range-media .rm-sub{
display:block;
font-family:'Inter',sans-serif;
font-weight:500;
font-size:12px;
color:var(--secondary);
}
.range-card.r-lg .range-media{min-height:392px}
.range-card:hover .range-media{transform:scale(1.025);border-color:var(--accent)}
/* Real product photo — replaces the pending hatch/shimmer entirely for this
slot. Shares .range-media's box (min-height, radius, flex, hover scale)
so a photo tile sizes identically to a still-pending one; only the fill
treatment changes. object-fit:contain (not cover) because these are
clean white-background product shots — cropping into the product would
be wrong here, unlike a lifestyle photo. The neutral --bg-alt fill behind
the contained image is what gives it edge definition against the card's
white background, since the shot's own background is also white. */
.range-media.has-photo{
background-color:var(--bg-alt);
background-image:none;
border:none;
}
.range-media.has-photo::after{content:none}
.range-media.has-photo img{
width:100%;
height:100%;
object-fit:contain;
display:block;
transition:transform 0.6s var(--ease-smooth);
}
/* Photo tiles swap the box-scale hover for an inner image zoom — the frame
stays put, the product breathes inside it (overflow:hidden clips). */
.range-card:hover .range-media.has-photo{transform:none}
.range-card:hover .range-media.has-photo img{transform:scale(1.045)}
.range-name{
font-family:'Space Grotesk',sans-serif;
font-weight:600;font-size:17px;
letter-spacing:-0.01em;
line-height:1.25;
color:var(--ink);
margin-bottom:6px;
transition:color 0.28s var(--ease-smooth);
}
.range-card:hover .range-name{color:var(--accent)}
.range-desc{font-size:14px;color:var(--ink-2);line-height:1.55}
/* Closing CTA — last section on a brand page, nothing after it but the
footer. An ink panel echoing index's Trust section (same corner radial-red
glow device, see .trust::before), so brand pages close on the same "dark
chapter" note the main page already has — a family resemblance, not a
separate dark theme. */
.brand-cta{text-align:center}
.brand-cta .container{
width:calc(100% - 2*var(--gutter));
max-width:calc(var(--maxw) - 2*var(--gutter));
background:var(--ink);
border-radius:var(--radius-lg);
padding:clamp(52px,7vw,88px) clamp(24px,5vw,64px);
overflow:hidden;
}
.brand-cta .container::before{
content:'';
position:absolute;
top:-190px;right:-190px;
width:480px;height:480px;
border-radius:50%;
background:radial-gradient(circle,rgba(193,39,45,0.20),transparent 70%);
pointer-events:none;
}
/* Superseded by the panel treatment above. The span is still present in all
twelve generated pages' markup — retire it here rather than re-templating
every file for a decorative change. */
.brand-cta-deco{display:none}
.brand-cta h2{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:clamp(26px,3.4vw,40px);
letter-spacing:-0.02em;
line-height:1.1;
color:#fff;
margin-bottom:28px;
}
/* ---------- "Coming soon" state (pending brand pages) --------------------
Shared treatment for brands with no confirmed products or description.
It REPLACES the .brand-range section wholesale rather than dressing up the
dashed [PHOTO PENDING] cards — three empty placeholders read as a broken
page, one deliberate panel reads as a brand that simply hasn't launched.
Nothing here fabricates a category, a product, or a date.
To convert another pending page it's three markup swaps, no new CSS:
1. .brand-tagline → .brand-status (the category is genuinely unknown)
2. .brand-desc → delete outright (no invented body copy)
3. the .brand-range → the .brand-soon
Everything below is brand-agnostic. The ONLY per-page value in the whole
block is the single letter inside .soon-monogram. */
/* Status pill — occupies the slot the category eyebrow would, using the same
order:-1 hoist above the , so the intro keeps its shape with nothing
invented in it. */
.brand-status{
order:-1;
display:inline-flex;
align-items:center;
gap:9px;
margin-bottom:16px;
padding:7px 15px 7px 12px;
background:var(--surface);
border:1px solid var(--line-strong);
border-radius:999px;
font-family:'Inter',sans-serif;
font-size:11px;font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--secondary);
white-space:nowrap;
}
.brand-status .st-dot{
width:7px;height:7px;flex:none;
border-radius:50%;
background:var(--accent);
animation:status-pulse 2.8s var(--ease-smooth) infinite;
}
@keyframes status-pulse{
0%{box-shadow:0 0 0 0 rgba(193,39,45,0.34)}
70%{box-shadow:0 0 0 8px rgba(193,39,45,0)}
100%{box-shadow:0 0 0 0 rgba(193,39,45,0)}
}
/* Same tightened top rhythm as .brand-range, so intro → panel still reads as
one continuous flow rather than two separately-padded blocks. */
.brand-soon{padding-top:clamp(34px,4.5vw,52px)}
.soon-panel{
position:relative;
overflow:hidden;
padding:clamp(46px,7vw,88px) clamp(24px,5vw,64px);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
text-align:center;
}
/* Dot matrix, masked to fall away under the copy — texture around the edges,
clean surface where the text sits. Where mask-image isn't supported the
grid just covers the panel evenly, which still reads as deliberate rather
than broken, so no @supports fallback is needed. */
.soon-panel::before{
content:'';
position:absolute;inset:0;
pointer-events:none;
background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);
background-size:24px 24px;
opacity:0.55;
-webkit-mask-image:radial-gradient(ellipse 60% 56% at 50% 50%,transparent 40%,#000 100%);
mask-image:radial-gradient(ellipse 60% 56% at 50% 50%,transparent 40%,#000 100%);
}
/* Oversized brand initial, ghosted back into the panel. Purely typographic —
no image asset, so a brand with no photography still gets a graphic. */
.soon-monogram{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-53%);
z-index:0;
pointer-events:none;
user-select:none;-webkit-user-select:none;
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:clamp(190px,30vw,330px);
line-height:1;
letter-spacing:-0.05em;
color:var(--ink);
opacity:0.035;
}
.soon-inner{position:relative;z-index:1}
/* Centered variant of the site's eyebrow convention — symmetric dashes,
since this one is never left-aligned. */
.soon-eyebrow{
display:inline-flex;
align-items:center;
gap:12px;
margin-bottom:20px;
font-size:12px;font-weight:700;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--accent);
}
.soon-eyebrow::before,.soon-eyebrow::after{
content:'';width:26px;height:1px;flex:none;
background:var(--accent);opacity:0.5;
}
.soon-title{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:clamp(28px,3.8vw,44px);
line-height:1.12;
letter-spacing:-0.02em;
color:var(--ink);
margin-bottom:18px;
}
.soon-title em{font-style:italic;font-weight:400;color:var(--accent)}
.soon-note{
max-width:54ch;
margin:0 auto 32px;
font-size:16px;
line-height:1.75;
color:var(--ink-2);
}
.soon-actions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px;
}
/* Confirmed-facts line — signals an owned, live page rather than an
abandoned one. Only facts already asserted site-wide. */
.soon-meta{
margin-top:36px;
padding-top:22px;
border-top:1px solid var(--line);
font-size:12px;font-weight:500;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--muted);
}
@media (max-width:560px){
.soon-eyebrow::before,.soon-eyebrow::after{width:16px}
.soon-actions .btn{width:100%;justify-content:center}
}
/* ---------- theme-flight (flyzo.html only: ) ----
Flight-telemetry decoration layer for FlyZo. Every other brand page keeps
the neutral template; scope any drone/flight-specific visual under this
class (or inside the .flight-path SVG, which only flyzo.html carries). */
/* Hero flight path — a dotted trajectory arcing up-right to a small quad
glyph. The dashes march along the path (dashoffset loop) so the route
reads as live telemetry, not a static squiggle. Sits at z-index:1 —
above the ring deco (0), below .container content (2), so the dotted
line passes behind the brand logo for a bit of depth. */
.flight-path{
position:absolute;
top:30px;
right:-50px;
width:min(74%,900px);
height:auto;
z-index:1;
pointer-events:none;
}
.flight-path .fp-line{
fill:none;
stroke:rgba(0,4,31,0.20);
stroke-width:1.6;
stroke-linecap:round;
stroke-dasharray:1 11;
animation:fp-march 26s linear infinite;
}
/* -240 is a multiple of the 12px dash period, so the loop is seamless */
@keyframes fp-march{to{stroke-dashoffset:-240}}
.flight-path .fp-way{fill:none;stroke:rgba(0,4,31,0.16);stroke-width:1.4;stroke-linecap:round}
.flight-path .fp-way .accent{stroke:rgba(193,39,45,0.4)}
.flight-path .fp-drone{
stroke:rgba(0,4,31,0.45);
stroke-width:1.6;
stroke-linecap:round;
transform:translate(1060px,82px);
animation:fp-bob 5.5s var(--ease-smooth) infinite;
}
.flight-path .fp-drone .rotor{fill:rgba(193,39,45,0.5);stroke:none}
.flight-path .fp-drone .hub{fill:rgba(0,4,31,0.5);stroke:none}
@keyframes fp-bob{
0%,100%{transform:translate(1060px,86px)}
50%{transform:translate(1060px,78px)}
}
@media (max-width:760px){.flight-path{display:none}}
/* Hero deco → radar rings. The generic rotated square becomes two thin
concentric circles with a red dot riding the outer ring. The dot is a
fixed ::after at the ring's top edge; because circles are rotation-
invariant, spinning the whole stack orbits the dot while the rings
appear perfectly still. */
.theme-flight .brand-hero-deco{
top:-130px;
right:-110px;
width:min(430px,46vw);
background:transparent;
border:1px solid rgba(0,4,31,0.10);
border-radius:50%;
opacity:1;
transform:none;
animation:orbit-spin 22s linear infinite;
}
.theme-flight .brand-hero-deco::before{
content:'';
position:absolute;
inset:17%;
border:1px solid rgba(0,4,31,0.07);
border-radius:50%;
}
.theme-flight .brand-hero-deco::after{
content:'';
position:absolute;
top:-4px;left:50%;
width:8px;height:8px;margin-left:-4px;
border-radius:50%;
background:var(--accent);
opacity:0.5;
}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
/* The radar-scope pending-box HUD (grid texture + conic sweep) that used to
live here has been retired: FlyZo's one remaining pending slot now takes
the same neutral "Coming Soon" card every other partial brand page uses,
rather than a FlyZo-exclusive variant. flight-path, the hero-deco radar
rings, and the drone bob above are unaffected — only the pending-*product*
styling was theme-flight-scoped, and that scoping is gone. */
/* ===================== Contact / Footer ===================== */
.contact{
background:var(--surface);
border-top:1px solid var(--line);
}
.contact-grid{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:clamp(40px,6vw,80px);
align-items:start;
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-left h2{
font-family:'Space Grotesk',sans-serif;
font-weight:500;
font-size:clamp(36px,5vw,64px);
line-height:1.02;
letter-spacing:-0.03em;
margin-bottom:24px;
}
.contact-left h2 em{font-style:italic;color:var(--accent);font-weight:400}
.contact-left .lede{
font-size:17px;color:var(--ink-2);line-height:1.6;
max-width:480px;margin-bottom:36px;
}
.contact-info{display:grid;gap:18px}
.contact-item{
display:flex;gap:16px;align-items:flex-start;
padding:18px 0;
border-bottom:1px solid var(--line);
}
.contact-item:last-child{border-bottom:none}
.contact-item .ico{
width:42px;height:42px;flex-shrink:0;
background:var(--accent-soft);color:var(--accent);
border-radius:12px;
display:grid;place-items:center;
}
.contact-item .ico svg{width:18px;height:18px}
.contact-item .text{font-size:14px;color:var(--ink-2)}
.contact-item .text strong{
display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;
font-size:15px;color:var(--ink);margin-bottom:2px;
}
.contact-form{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:clamp(24px,3vw,36px);
}
.form-row{display:grid;gap:16px;margin-bottom:16px}
.form-row.two{grid-template-columns:1fr 1fr}
@media (max-width:520px){.form-row.two{grid-template-columns:1fr}}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{
font-size:11px;font-weight:600;letter-spacing:0.12em;
text-transform:uppercase;color:var(--ink-2);
}
.form-field input,
.form-field textarea,
.form-field select{
font:inherit;
padding:13px 14px;
border:1px solid var(--line-strong);
border-radius:10px;
background:var(--surface);
color:var(--ink);
transition:border-color 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
font-size:14.5px;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(193,39,45,0.15);
}
.form-field textarea{min-height:120px;resize:vertical;font-family:inherit}
.form-submit{
width:100%;
margin-top:8px;
justify-content:center;
}
.form-note{
margin-top:14px;
font-size:12px;color:var(--muted);text-align:center;
}
/* Footer bottom */
.footer-bottom{
background:var(--ink);
color:rgba(255,255,255,0.7);
padding:32px 0;
font-size:13px;
}
.footer-bottom .container{
display:flex;justify-content:space-between;align-items:center;gap:24px;
flex-wrap:wrap;
}
.footer-bottom a{color:rgba(255,255,255,0.7);transition:color 0.25s var(--ease-smooth)}
.footer-bottom a:hover{color:var(--accent-3)}
.footer-bottom .links{display:flex;gap:24px;flex-wrap:wrap}
.footer-logo img{height:48px;width:auto;display:block}
/* ===================== Reveal ===================== */
.reveal{
opacity:0;
transform:translateY(28px);
transition:opacity 0.7s var(--ease-out), transform 0.85s var(--ease-snap);
will-change:opacity,transform;
}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal[data-delay="1"]{transition-delay:80ms}
.reveal[data-delay="2"]{transition-delay:160ms}
.reveal[data-delay="3"]{transition-delay:240ms}
.reveal[data-delay="4"]{transition-delay:320ms}
/* Staggered children — cascade in one after another when the group enters view */
.stagger-item{
opacity:0;
transform:translateY(30px);
transition:opacity 0.6s var(--ease-out), transform 0.8s var(--ease-snap);
will-change:opacity,transform;
}
.stagger-item.revealed{opacity:1;transform:translateY(0)}
/* Toast */
.toast{
position:fixed;
bottom:24px;left:50%;
transform:translateX(-50%) translateY(120%);
background:var(--ink);
color:#fff;
padding:14px 22px;
border-radius:999px;
font-size:14px;
font-weight:500;
box-shadow:var(--shadow-lg);
z-index:1000;
transition:transform 0.5s var(--ease-smooth);
display:flex;align-items:center;gap:10px;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-3)}
/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:0.001ms !important;
transition-duration:0.001ms !important;
animation-iteration-count:1 !important;
}
.hero-badge,.hero-title .word,.hero-tagline,.hero-desc,.hero-cta,.hero-stats{
opacity:1 !important;transform:none !important;
}
.hero-icon{opacity:0.08 !important;transform:none !important}
.reveal,.stagger-item{opacity:1 !important;transform:none !important}
.hero-strip-track,.marquee-track{animation:none}
.hero-bg{transform:none !important}
/* Leadership rows: the panel still appears and disappears, it just stops
travelling to get there. The global duration override above already
collapses the slide and fade, so the end-state transforms are left
intact on purpose — zeroing them instead would drop the panel back on
top of the portrait it is supposed to sit beside. */
.leader-row{opacity:1 !important;transform:none !important}
.leader-portrait,.leader-panel{transition:none !important}
.leader-panel{animation:none !important}
/* Coming-soon status pill: drop the pulse ring entirely and let the solid
accent dot carry the "live status" signal on its own. */
.brand-status .st-dot{animation:none !important;box-shadow:none !important}
/* Brand callouts: opacity-only fade, no scale/slide */
.brand-pop,
.brand-card:hover .brand-pop,
.brand-card.pop-open .brand-pop{
transform:translateX(-50%) !important;
transition:opacity 0.18s ease !important;
}
/* About mosaic: no hover zoom on the tiles */
.collage-tile:hover img{transform:none !important}
/* Brand page range cards: no lift or placeholder scale-up. The pending
"Coming Soon" card has no animation to begin with — nothing else needed
here for it. */
.range-card:hover{transform:none !important}
.range-card:hover .range-media{transform:none !important}
/* FlyZo flight theme: still the marching dashes, drone bob, and ring orbit */
.flight-path .fp-line,
.flight-path .fp-drone,
.theme-flight .brand-hero-deco{animation:none !important}
/* Photo-tile inner zoom */
.range-card:hover .range-media.has-photo img{transform:none !important}
}