/* ==========================================================================
DOG BASEL — site stylesheet
Built for Gravity XL. Vanilla multi-page static site.
Tokens derive from the supplied 01_BRAND/design-tokens.css.
========================================================================== */
/* ---------- Fonts (self-hosted, no third-party request) ---------- */
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* ---------- Tokens ---------- */
:root{
--db-pink:#F40796;
--db-hot-pink:#EA008C;
--db-orange:#FF8117;
--db-purple:#6A20D9;
--db-deep-purple:#351073;
--db-navy:#11182A;
--db-black:#101010;
--db-white:#FFFFFF;
--db-off-white:#FAF9FA;
--db-muted:#64646B;
--db-border:#E7E5EA;
--db-gradient:linear-gradient(100deg,#F40796 0%,#FC345A 55%,#FF8117 100%);
--db-container:1340px;
--db-gutter:28px;
--db-radius:4px; /* buttons/inputs only; imagery stays square */
--db-header-h:88px;
--db-display:'Barlow Condensed',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
--db-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--db-section-y:70px;
--db-ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1024px){:root{--db-section-y:56px}}
@media (max-width:768px){:root{--db-section-y:46px;--db-gutter:20px;--db-header-h:64px}}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Must come first: several components set display:flex, which would otherwise
beat the UA stylesheet's [hidden]{display:none} and leak unverified
contact links, the sponsor deck CTA and the form setup notice onto the page. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--db-header-h) + 16px)}
body{
margin:0;background:var(--db-white);color:var(--db-black);
font-family:var(--db-body);font-size:18px;line-height:1.62;font-weight:400;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-family:var(--db-display);font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.005em}
p{margin:0}
ul,ol{margin:0;padding:0}
figure{margin:0}
/* ---------- Utilities ---------- */
.container{width:100%;max-width:var(--db-container);margin-inline:auto;padding-inline:var(--db-gutter)}
.section{padding-block:var(--db-section-y)}
.section--tight{padding-block:calc(var(--db-section-y) * .66)}
.section--grey{background:var(--db-off-white)}
.stack>*+*{margin-top:var(--db-stack,18px)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--db-black);color:#fff;padding:12px 18px;font-weight:600;border-radius:var(--db-radius);transition:top .18s var(--db-ease)}
.skip-link:focus{top:12px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:3px solid var(--db-purple);outline-offset:3px;border-radius:2px;
}
/* Eyebrow: small pink label with rule, as per mockups */
.eyebrow{
display:flex;align-items:center;gap:14px;
font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:22px;letter-spacing:.14em;color:var(--db-pink);margin-bottom:16px;
}
.eyebrow::after{content:"";height:2px;width:54px;background:var(--db-pink);flex:0 0 auto}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:#fff}
.eyebrow--light::after{background:#fff}
/* Display headings */
.h-xxl{font-size:clamp(4rem,11vw,9.4rem)}
.h-xl{font-size:clamp(3.3rem,8.4vw,7rem)}
.h-lg{font-size:clamp(2.7rem,6.4vw,5.3rem)}
.h-md{font-size:clamp(2.2rem,4.2vw,3.5rem)}
.h-sm{font-size:clamp(1.55rem,2.5vw,2.05rem)}
.text-grad{background:var(--db-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1.18rem,1.95vw,1.46rem);color:#3A3A42;line-height:1.6}
.muted{color:var(--db-muted)}
.measure{max-width:60ch}
/* ---------- Buttons ---------- */
.btn{
--btn-bg:var(--db-black);--btn-fg:#fff;--btn-bd:var(--db-black);
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:58px;padding:17px 32px;
background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bd);
border-radius:var(--db-radius);
font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:1.34rem;letter-spacing:.055em;line-height:1;
text-decoration:none;cursor:pointer;
transition:transform .18s var(--db-ease),box-shadow .18s var(--db-ease),background-color .18s var(--db-ease),color .18s var(--db-ease);
}
.btn svg{width:22px;height:22px;flex:0 0 auto;transition:transform .18s var(--db-ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,16,16,.18)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn--grad{background:var(--db-gradient);border-color:transparent;color:#fff}
.btn--grad:hover{box-shadow:0 10px 26px rgba(244,7,150,.38)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--db-black);--btn-bd:var(--db-black)}
.btn--outline:hover{background:var(--db-black);color:#fff}
.btn--light{--btn-bg:#fff;--btn-fg:var(--db-black);--btn-bd:#fff}
.btn--ghost-light{--btn-bg:rgba(8,4,12,.46);--btn-fg:#fff;--btn-bd:#fff;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.btn--ghost-light:hover{background:#fff;color:var(--db-black)}
.btn--sm{min-height:48px;padding:12px 22px;font-size:1.14rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn[aria-disabled="true"]{opacity:.62;cursor:not-allowed;filter:saturate(.35)}
.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
/* text link with arrow */
.arrow-link{
display:inline-flex;align-items:center;gap:9px;text-decoration:none;
font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:1.05rem;letter-spacing:.05em;color:var(--db-black);
}
.arrow-link svg{width:22px;height:22px;color:var(--db-orange);transition:transform .18s var(--db-ease)}
.arrow-link:hover svg{transform:translateX(5px)}
/* ==========================================================================
HEADER
========================================================================== */
.site-header{
position:sticky;top:0;z-index:1000;background:#fff;
border-bottom:1px solid var(--db-border);
}
.site-header__inner{
display:flex;align-items:center;gap:28px;
min-height:var(--db-header-h);
}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{width:212px;height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav__list{display:flex;align-items:center;gap:28px;list-style:none}
.nav__link{
text-decoration:none;font-size:1.06rem;font-weight:500;color:#23232A;
padding:6px 0;position:relative;white-space:nowrap;
}
.nav__link::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--db-pink);transform:scaleX(0);transform-origin:left;
transition:transform .18s var(--db-ease);
}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{font-weight:600;color:var(--db-black)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav-toggle{
display:none;margin-left:auto;align-items:center;justify-content:center;
width:46px;height:46px;background:none;border:2px solid var(--db-border);
border-radius:var(--db-radius);cursor:pointer;
}
.nav-toggle__bars{display:block;position:relative;width:20px;height:2px;background:var(--db-black);transition:background .12s linear}
.nav-toggle__bars::before,.nav-toggle__bars::after{
content:"";position:absolute;left:0;width:20px;height:2px;background:var(--db-black);
transition:transform .2s var(--db-ease),top .2s var(--db-ease);
}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}
@media (max-width:1024px){
.brand img{width:158px}
.nav__list{gap:20px}
.nav__link{font-size:.9rem}
.nav{gap:18px}
}
@media (max-width:900px){
.nav-toggle{display:inline-flex}
.nav{
position:fixed;inset:var(--db-header-h) 0 auto 0;margin:0;
flex-direction:column;align-items:stretch;gap:0;
background:#fff;border-bottom:1px solid var(--db-border);
padding:8px var(--db-gutter) 26px;
max-height:calc(100dvh - var(--db-header-h));overflow-y:auto;
transform:translateY(-12px);opacity:0;visibility:hidden;
transition:transform .22s var(--db-ease),opacity .22s var(--db-ease),visibility .22s;
box-shadow:0 20px 40px rgba(16,16,16,.1);
}
.nav.is-open{transform:translateY(0);opacity:1;visibility:visible}
.nav__list{flex-direction:column;align-items:stretch;gap:0}
.nav__list li{border-bottom:1px solid var(--db-border)}
.nav__link{
display:block;padding:16px 2px;font-family:var(--db-display);font-weight:700;
text-transform:uppercase;font-size:1.32rem;letter-spacing:.03em;
}
.nav__link::after{display:none}
.nav__link[aria-current="page"]{color:var(--db-pink)}
.nav .btn{margin-top:20px;width:100%}
}
/* ==========================================================================
HOME HERO
========================================================================== */
.hero{
position:relative;isolation:isolate;overflow:hidden;
background:#1A1024;
min-height:clamp(630px,90vh,910px);
display:flex;align-items:center;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 34%}
/* Slow push-in on hover. Scale lives on the wrapper because the ![]()
's own
transform is already spoken for by the parallax (translate3d via --py);
the scrim is a sibling, so it stays put while the photo drifts in. */
@media (hover:hover) and (pointer:fine){
.hero__media{transform:scale(1);transition:transform 2.4s cubic-bezier(.22,.61,.36,1)}
.hero:hover .hero__media{transform:scale(1.07)}
}
@media (prefers-reduced-motion:reduce){
.hero:hover .hero__media{transform:none}
}
/* Vignette: dark on the left so white display type stays legible (WCAG AA) */
.hero::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(95deg,rgba(38,10,94,.91) 0%,rgba(70,10,112,.88) 20%,rgba(110,8,122,.83) 38%,rgba(156,6,130,.66) 54%,rgba(202,2,138,.30) 70%,rgba(234,0,140,.07) 84%,rgba(234,0,140,0) 95%);
}
.hero__inner{position:relative;padding-block:clamp(56px,8vw,96px);width:100%}
.hero__content{max-width:780px}
.hero__title{color:#fff;font-size:clamp(4.4rem,12vw,10.4rem);line-height:.82;letter-spacing:-.02em}
.hero__title sup{font-size:.26em;vertical-align:super;font-weight:700;margin-left:.06em}
/* "Welcome to" rides above the brand line at a smaller size, so DOG BASEL
stays the dominant element rather than competing with the greeting */
.hero__welcome{
display:block;font-size:.34em;line-height:1;letter-spacing:.035em;
margin-bottom:.14em;color:rgba(255,255,255,.92);
}
.hero__text{color:#fff;font-size:clamp(1.26rem,2.4vw,1.72rem);max-width:26ch;margin-top:30px;line-height:1.45}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__brush{position:absolute;top:-10px;left:-40px;width:min(42vw,420px);opacity:.92;z-index:-1;pointer-events:none}
@media (max-width:768px){
.hero{min-height:clamp(520px,86vh,640px);align-items:flex-end}
.hero__media img{object-position:47% 30%} /* keep the dog centred in the portrait crop */
.hero::before{background:linear-gradient(180deg,rgba(234,0,140,.26) 0%,rgba(188,6,132,.80) 11%,rgba(128,10,124,.90) 28%,rgba(72,12,112,.94) 50%,rgba(44,10,96,.96) 74%,rgba(36,8,86,.97) 100%)}
.hero__content{max-width:none}
.hero__text{max-width:38ch}
.hero__actions .btn{flex:1 1 100%}
.hero__brush{display:none}
}
/* ==========================================================================
PAGE HERO (inner pages)
========================================================================== */
.page-hero{
position:relative;isolation:isolate;overflow:hidden;
background:var(--db-navy);color:#fff;
padding-block:clamp(56px,7vw,92px);
}
.page-hero::before{
content:"";position:absolute;inset:0;z-index:-3;
background:linear-gradient(103deg,var(--db-deep-purple) 0%,#7A1480 48%,#C5157F 78%,var(--db-orange) 130%);
}
.page-hero__blob{position:absolute;z-index:-2;pointer-events:none;opacity:.22}
.page-hero__blob--a{top:-180px;right:-140px;width:520px;height:520px;border-radius:50%;background:var(--db-orange);filter:blur(90px)}
.page-hero__blob--b{bottom:-260px;left:-180px;width:560px;height:560px;border-radius:50%;background:var(--db-pink);filter:blur(90px)}
.page-hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
@media (max-width:768px){
.page-hero__media::after{content:"";position:absolute;inset:0;background:rgba(18,6,38,.22)}
}
.page-hero__media img{
width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
opacity:.15;mix-blend-mode:soft-light;filter:saturate(.7) contrast(1.02) brightness(.78);
}
.page-hero__title{font-size:clamp(3.6rem,9.4vw,7.6rem);color:#fff}
.page-hero__text{margin-top:24px;max-width:52ch;color:#fff;font-size:clamp(1.18rem,2vw,1.5rem)}
.breadcrumb{display:flex;gap:8px;align-items:center;list-style:none;font-size:.85rem;color:rgba(255,255,255,.78);margin-bottom:18px;flex-wrap:wrap}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb li+li::before{content:"/";margin-right:8px;opacity:.6}
/* ==========================================================================
4-UP HIGHLIGHT STRIP
========================================================================== */
.highlight-strip{border-bottom:1px solid var(--db-border);padding-block:62px}
.highlight-strip__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.highlight-strip__item{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
padding:6px 18px;position:relative;
}
.highlight-strip__item+.highlight-strip__item::before{
content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--db-border);
}
.highlight-strip__icon{width:66px;height:66px;stroke-width:1.65}
.highlight-strip__item:nth-child(1){--accent:var(--db-pink)}
.highlight-strip__item:nth-child(2){--accent:var(--db-orange)}
.highlight-strip__item:nth-child(3){--accent:var(--db-purple)}
.highlight-strip__item:nth-child(4){--accent:var(--db-hot-pink)}
.highlight-strip__icon{color:var(--accent)}
.highlight-strip__icon,.highlight-strip__label{position:relative;z-index:1}
/* soft accent glow that blooms behind the icon on hover */
.highlight-strip__item::after{
content:"";position:absolute;top:-16px;left:50%;width:112px;height:112px;margin-left:-56px;
border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 68%);
opacity:0;transform:scale(.45);pointer-events:none;z-index:0;
transition:opacity .36s var(--db-ease),transform .36s var(--db-ease);
}
.highlight-strip__label{
font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:1.62rem;letter-spacing:.035em;line-height:1.06;
}
.highlight-strip__note{
margin-top:26px;text-align:center;font-size:.86rem;color:var(--db-muted);
}
@media (max-width:768px){
.highlight-strip__grid{grid-template-columns:repeat(2,1fr);gap:30px 0}
/* grid items default to min-width:auto, so a long label can push the track
wider than the column — let them shrink, and ease the type down a step */
.highlight-strip__item{min-width:0;padding:6px 10px}
.highlight-strip__label{font-size:1.3rem;overflow-wrap:break-word}
.highlight-strip__icon{width:56px;height:56px}
.highlight-strip__item+.highlight-strip__item::before{display:none}
.highlight-strip__item:nth-child(even)::before{content:"";display:block;position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--db-border)}
}
@media (max-width:360px){
.highlight-strip__grid{grid-template-columns:1fr}
.highlight-strip__item:nth-child(even)::before{display:none}
}
/* ==========================================================================
ABOUT / COLLAGE SPLIT
========================================================================== */
.about{position:relative;overflow:hidden}
.about__grid{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px}
.collage__item{overflow:hidden;background:var(--db-off-white)}
.collage__item--wide{grid-column:1 / -1;grid-row:1;aspect-ratio:16/9.5}
.collage__item:not(.collage__item--wide){aspect-ratio:4/3}
.collage__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--db-ease)}
.collage__item:hover img{transform:scale(1.04)}
.about__brush{position:absolute;right:-60px;bottom:118px;width:min(32vw,330px);opacity:.95;pointer-events:none;z-index:0}
.about__body{position:relative;z-index:1}
.about__body .lead{margin-top:22px}
.about__body .btn{margin-top:30px}
@media (max-width:900px){
.about__grid{grid-template-columns:1fr;gap:34px}
.about__brush{display:none}
}
/* ==========================================================================
EVENT FACT BAND
========================================================================== */
.fact-band{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding-block:74px}
.fact-band__media{position:absolute;inset:0;z-index:-2}
.fact-band__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.fact-band::before{
content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(180deg,rgba(12,6,20,.30) 0%,rgba(12,6,20,.52) 58%,rgba(12,6,20,.62) 100%),
linear-gradient(100deg,rgba(53,16,115,.42) 0%,rgba(142,18,148,.30) 40%,rgba(234,0,140,.26) 70%,rgba(255,129,23,.30) 110%);
}
.fact-band__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.fact-band__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:8px 20px;position:relative}
.fact-band__item+.fact-band__item::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.34)}
.fact-band__icon{width:46px;height:46px;stroke-width:1.75;color:#fff;opacity:.97}
.fact-band__label{
font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:1.46rem;letter-spacing:.08em;line-height:1.08;text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.fact-band__value{font-size:1.36rem;color:#fff;line-height:1.28;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.fact-band__value[data-tbd]{font-weight:600;letter-spacing:.02em}
.fact-band__disclaimer{
margin-top:26px;text-align:center;font-size:.82rem;color:rgba(255,255,255,.86);
max-width:72ch;margin-inline:auto;
}
@media (max-width:768px){
.fact-band__grid{grid-template-columns:1fr;gap:26px}
.fact-band__item+.fact-band__item::before{left:18%;right:18%;top:-13px;bottom:auto;width:auto;height:1px}
}
/* ==========================================================================
THREE-CARD HIGHLIGHTS (client-approved reference section)
========================================================================== */
.highlights{position:relative;overflow:hidden}
.highlights__head{max-width:62ch}
.highlights__head .lead{margin-top:14px}
.highlights__brush{position:absolute;top:-24px;right:-50px;width:min(32vw,330px);pointer-events:none}
.highlights__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,34px);margin-top:46px}
.hcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.hcard__media{overflow:hidden;aspect-ratio:4/3;background:var(--db-off-white)}
.hcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--db-ease)}
.hcard:hover .hcard__media img{transform:scale(1.05)}
.hcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:20px}
.hcard__title{font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:.94;min-height:1.88em}
.hcard__arrow{width:32px;height:32px;color:var(--db-orange);flex:0 0 auto;margin-top:4px;transition:transform .2s var(--db-ease)}
.hcard:hover .hcard__arrow{transform:translateX(6px)}
.hcard__text{margin-top:16px;color:#3A3A42;font-size:1.2rem;line-height:1.52}
@media (max-width:900px){.highlights__grid{grid-template-columns:1fr;gap:38px}.highlights__brush{display:none}}
/* ==========================================================================
SPLIT CTA PANELS
========================================================================== */
.split-cta{display:grid;grid-template-columns:1fr 1fr}
.split-cta__panel{
position:relative;isolation:isolate;overflow:hidden;color:#fff;
min-height:460px;display:flex;align-items:center;
padding:clamp(44px,5.6vw,84px);
}
.split-cta__panel::before{content:"";position:absolute;inset:0;z-index:-1}
.split-cta__panel--guest::before{background:
linear-gradient(100deg,rgba(96,4,70,.90) 0%,rgba(140,4,92,.86) 30%,rgba(190,4,120,.76) 52%,rgba(226,0,136,.38) 70%,rgba(234,0,140,.09) 86%,rgba(234,0,140,0) 100%)}
.split-cta__panel--sponsor::before{background:
linear-gradient(100deg,rgba(34,8,80,.90) 0%,rgba(55,12,108,.86) 30%,rgba(88,20,164,.66) 52%,rgba(122,36,214,.30) 70%,rgba(122,36,214,.09) 86%,rgba(122,36,214,0) 100%)}
.split-cta__bg{position:absolute;inset:0;z-index:-2}
.split-cta__bg img{width:100%;height:100%;object-fit:cover}
/* Slow push-in on hover. The scale sits on the wrapper, not the ![]()
: the
image's transform is already the parallax translate (driven by --py). */
@media (hover:hover) and (pointer:fine){
.split-cta__bg{transform:scale(1);transition:transform 1.9s cubic-bezier(.22,.61,.36,1)}
.split-cta__panel:hover .split-cta__bg,
.split-cta__panel:focus-within .split-cta__bg{transform:scale(1.09)}
}
@media (prefers-reduced-motion:reduce){
.split-cta__panel:hover .split-cta__bg,
.split-cta__panel:focus-within .split-cta__bg{transform:none}
}
.split-cta__title{font-size:clamp(3.1rem,6.4vw,5.6rem);line-height:.88;color:#fff}
.split-cta__text{margin-top:20px;max-width:24ch;color:#fff;font-size:1.34rem;line-height:1.42}
.split-cta__panel .btn{margin-top:32px}
.split-cta__mascot{position:absolute;right:-24px;bottom:0;width:min(40%,320px);z-index:-1;opacity:.95;pointer-events:none}
@media (max-width:1000px){
.split-cta{grid-template-columns:1fr}
.split-cta__panel{min-height:380px;align-items:flex-end}
.split-cta__panel--guest::before{background:linear-gradient(180deg,rgba(234,0,140,.24) 0%,rgba(192,4,120,.74) 11%,rgba(146,4,94,.88) 30%,rgba(100,4,72,.94) 58%,rgba(78,4,58,.96) 100%)}
.split-cta__panel--sponsor::before{background:linear-gradient(180deg,rgba(122,36,214,.24) 0%,rgba(92,22,172,.74) 11%,rgba(58,14,114,.88) 30%,rgba(34,8,82,.94) 58%,rgba(26,6,66,.96) 100%)}
.split-cta__text{max-width:32ch}
}
/* Between 901 and 1200 the two panels are narrow, so the copy column occupies a
much larger share of each panel and runs past where the wash has faded. */
@media (min-width:1001px) and (max-width:1439px){
.split-cta__panel--guest::before{background:linear-gradient(100deg,rgba(96,4,70,.93) 0%,rgba(138,4,90,.91) 36%,rgba(180,4,114,.90) 60%,rgba(222,0,132,.58) 80%,rgba(234,0,140,.12) 94%,rgba(234,0,140,0) 100%)}
.split-cta__panel--sponsor::before{background:linear-gradient(100deg,rgba(34,8,80,.93) 0%,rgba(54,12,106,.91) 36%,rgba(84,20,156,.85) 60%,rgba(120,34,210,.52) 80%,rgba(122,36,214,.12) 94%,rgba(122,36,214,0) 100%)}
}
/* ==========================================================================
PARTNER INVITE (replaces unverified sponsor logo row)
========================================================================== */
.partner-invite{border-top:1px solid var(--db-border);padding-block:52px}
.partner-invite__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.partner-invite__title{font-size:clamp(2.2rem,4vw,3.4rem)}
.partner-invite__text{margin-top:12px;color:var(--db-muted);max-width:50ch;font-size:1.12rem}
/* ==========================================================================
GENERIC CARDS / GRIDS
========================================================================== */
.grid{display:grid;gap:clamp(20px,2.6vw,30px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
.card{
display:flex;flex-direction:column;
border:1px solid var(--db-border);background:#fff;
padding:clamp(22px,2.6vw,30px);height:100%;
}
.card__icon{width:42px;height:42px;stroke-width:1.9;color:var(--db-pink);margin-bottom:16px}
.card__title{font-size:1.95rem;margin-bottom:14px}
.card__text{color:#3A3A42;font-size:1.15rem;line-height:1.56}
.card__text+.card__text{margin-top:10px}
.card--media{padding:0}
.card--media .card__media{aspect-ratio:4/3;overflow:hidden;background:var(--db-off-white)}
.card--media .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--db-ease)}
.card--media:hover .card__media img{transform:scale(1.04)}
.card--media .card__body{padding:22px clamp(20px,2.2vw,26px) clamp(22px,2.4vw,28px)}
/* status pills: separates CONFIRMED from PLANNED programming */
.pill{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:.86rem;letter-spacing:.09em;line-height:1;
padding:7px 11px;border:1.5px solid currentColor;border-radius:var(--db-radius);
margin-bottom:14px;align-self:flex-start;
}
.pill--planned{color:#8A5A00;background:#FFF6E6;border-color:#F0C27A}
.pill--confirmed{color:#0A6B3D;background:#E8F7EF;border-color:#8ED3AE}
.pill--tbd{color:#5B3FA8;background:#F2EDFC;border-color:#BCA4EC}
/* ==========================================================================
FORMS
========================================================================== */
.form-layout{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(30px,4vw,56px);align-items:start}
@media (max-width:900px){.form-layout{grid-template-columns:1fr}}
.form{display:block}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.form__grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1 / -1}
.field__label{font-size:.9rem;font-weight:600;color:#23232A}
.field__req{color:var(--db-pink);margin-left:2px}
.field__hint{font-size:.82rem;color:var(--db-muted)}
.field__control{
width:100%;min-height:50px;padding:13px 15px;
background:#fff;color:var(--db-black);
border:1.5px solid var(--db-border);border-radius:var(--db-radius);
font-family:var(--db-body);font-size:1rem;line-height:1.45;
transition:border-color .16s var(--db-ease),box-shadow .16s var(--db-ease);
}
.field__control:hover{border-color:#CFCBD6}
.field__control:focus{outline:none;border-color:var(--db-purple);box-shadow:0 0 0 3px rgba(106,32,217,.16)}
textarea.field__control{min-height:132px;resize:vertical}
select.field__control{
appearance:none;cursor:pointer;padding-right:44px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364646B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;
}
.field__control[aria-invalid="true"]{border-color:#C8102E;box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.field__error{font-size:.84rem;font-weight:500;color:#C8102E;display:none}
.field__error.is-visible{display:block}
/* checkbox / toggle rows */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:2px 0}
.check input[type="checkbox"]{
flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--db-pink);cursor:pointer;
}
.check__text{font-size:.93rem;line-height:1.55;color:#3A3A42}
.check__text strong{color:var(--db-black);font-weight:600}
.switch-row{
display:flex;align-items:center;justify-content:space-between;gap:18px;
border:1.5px solid var(--db-border);border-radius:var(--db-radius);padding:14px 16px;
}
.switch-row__label{font-size:.95rem;font-weight:600}
.switch{position:relative;display:inline-flex;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch__track{
width:58px;height:32px;border-radius:999px;background:#D8D4DE;
display:block;position:relative;transition:background .2s var(--db-ease);pointer-events:none;
}
.switch__track::after{
content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.26);transition:transform .2s var(--db-ease);
}
.switch input:checked+.switch__track{background:var(--db-pink)}
.switch input:checked+.switch__track::after{transform:translateX(26px)}
.switch input:focus-visible+.switch__track{outline:3px solid var(--db-purple);outline-offset:3px}
.conditional{display:none}
.conditional.is-open{display:block}
.form__actions{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.form__footnote{font-size:.84rem;color:var(--db-muted);line-height:1.6}
/* form status messaging — never shown unless a real response came back */
.form-status{
display:none;gap:13px;align-items:flex-start;
padding:16px 18px;border:1.5px solid;border-radius:var(--db-radius);margin-bottom:24px;
font-size:.95rem;line-height:1.55;
}
.form-status.is-visible{display:flex}
.form-status svg{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.form-status--success{background:#E8F7EF;border-color:#8ED3AE;color:#0A5B34}
.form-status--error{background:#FDECEF;border-color:#F0A8B4;color:#9B0B23}
.form-status--info{background:#F2EDFC;border-color:#BCA4EC;color:#43257F}
.form-status strong{display:block;font-weight:700;margin-bottom:2px}
/* "backend not configured" banner */
.setup-notice{
display:flex;gap:14px;align-items:flex-start;
background:#FFF6E6;border:1.5px solid #F0C27A;color:#6B4400;
padding:16px 18px;border-radius:var(--db-radius);margin-bottom:26px;
font-size:.93rem;line-height:1.6;
}
.setup-notice svg{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.setup-notice strong{display:block;font-weight:700;margin-bottom:3px;color:#5A3900}
.setup-notice code{
background:rgba(0,0,0,.07);padding:1px 6px;border-radius:3px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
}
/* recap panel beside the RSVP form */
.recap{border:1px solid var(--db-border);background:var(--db-off-white);padding:clamp(24px,3vw,32px);position:sticky;top:calc(var(--db-header-h) + 24px)}
@media (max-width:900px){.recap{position:static}}
.recap__title{font-size:2.2rem;margin-bottom:10px}
.recap__list{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:16px}
.recap__row{display:flex;gap:13px;align-items:flex-start}
.recap__icon{width:21px;height:21px;stroke-width:1.9;color:var(--db-pink);flex:0 0 auto;margin-top:2px}
.recap__label{font-family:var(--db-display);font-weight:800;text-transform:uppercase;font-size:.95rem;letter-spacing:.07em;line-height:1.2}
.recap__value{font-size:.95rem;color:#3A3A42;line-height:1.45}
.recap__divider{height:1px;background:var(--db-border);margin:24px 0}
/* ==========================================================================
ACCORDION (FAQ)
========================================================================== */
.accordion{border-top:1px solid var(--db-border)}
.accordion__item{border-bottom:1px solid var(--db-border)}
.accordion__trigger{
width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
background:none;border:0;cursor:pointer;text-align:left;
padding:22px 2px;font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:.012em;line-height:1.18;color:var(--db-black);
}
.accordion__trigger:hover{color:var(--db-pink)}
.accordion__icon{
width:24px;height:24px;flex:0 0 auto;margin-top:1px;color:var(--db-pink);
transition:transform .22s var(--db-ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon{transform:rotate(45deg)}
.accordion__panel{display:none;padding:0 2px 24px;max-width:72ch}
.accordion__panel.is-open{display:block}
.accordion__panel p+p{margin-top:12px}
.accordion__panel .pill{margin-bottom:12px}
/* ==========================================================================
MISC BLOCKS
========================================================================== */
.anchor-offset{scroll-margin-top:calc(var(--db-header-h) + 24px)}
.cta-banner{
position:relative;isolation:isolate;overflow:hidden;color:#fff;text-align:center;
padding-block:clamp(46px,6vw,74px);
}
.cta-banner::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg,var(--db-hot-pink) 0%,#AA149F 55%,var(--db-deep-purple) 100%);
}
.cta-banner__title{font-size:clamp(2.9rem,6.4vw,5.2rem);color:#fff}
.cta-banner__text{margin:18px auto 0;max-width:54ch;color:#fff;font-size:1.2rem;line-height:1.5}
.cta-banner__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.info-tile{border:1px solid var(--db-border);padding:clamp(20px,2.4vw,26px);height:100%}
.info-tile__label{font-family:var(--db-display);font-weight:800;text-transform:uppercase;font-size:1.02rem;letter-spacing:.07em;color:var(--db-muted);margin-bottom:8px}
.info-tile__value{font-size:1.5rem;font-weight:600;line-height:1.32}
.info-tile__note{margin-top:8px;font-size:.88rem;color:var(--db-muted);line-height:1.55}
.map-placeholder{
position:relative;aspect-ratio:16/9;border:1px solid var(--db-border);
background:
repeating-linear-gradient(45deg,#FAF9FA 0 14px,#F3F1F6 14px 28px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;gap:10px;padding:28px;
}
.map-placeholder svg{width:40px;height:40px;color:var(--db-pink);stroke-width:1.6}
.map-placeholder__title{font-family:var(--db-display);font-weight:800;text-transform:uppercase;font-size:1.3rem;letter-spacing:.04em}
.map-placeholder__text{font-size:.93rem;color:var(--db-muted);max-width:44ch}
.contact-strip{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.contact-strip a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:500}
.contact-strip a:hover{color:var(--db-pink)}
.contact-strip svg{width:19px;height:19px;color:var(--db-pink);stroke-width:1.9}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer{background:var(--db-navy);color:rgba(255,255,255,.76);padding-block:56px 0;margin-top:0}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(26px,3.4vw,44px)}
@media (max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer__grid{grid-template-columns:1fr;gap:30px}}
.site-footer__logo{width:176px;margin-bottom:18px}
.site-footer__about{font-size:.93rem;line-height:1.65;max-width:38ch}
.site-footer__heading{
font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:1.24rem;letter-spacing:.09em;color:#fff;margin-bottom:18px;
}
.site-footer__list{list-style:none;display:flex;flex-direction:column;gap:11px}
.site-footer__list a{text-decoration:none;font-size:.94rem}
.site-footer__list a:hover{color:#fff;text-decoration:underline}
.site-footer__note{font-size:.88rem;line-height:1.6}
.site-footer__bottom{
margin-top:46px;border-top:1px solid rgba(255,255,255,.16);
padding-block:22px;display:flex;flex-wrap:wrap;gap:10px 24px;
align-items:center;justify-content:space-between;font-size:.84rem;
}
.site-footer__bottom a{text-decoration:none}
.site-footer__bottom a:hover{text-decoration:underline;color:#fff}
.site-footer__legal{display:flex;gap:20px;flex-wrap:wrap}
.site-footer__disclaimer{
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
padding:14px 16px;font-size:.85rem;line-height:1.6;margin-top:22px;
}
/* ==========================================================================
MOTION PREFERENCES
========================================================================== */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
.btn:hover,.hcard:hover .hcard__media img,.collage__item:hover img,
.card--media:hover .card__media img{transform:none!important}
}
/* ==========================================================================
PRINT
========================================================================== */
@media print{
.site-header,.site-footer,.nav-toggle,.cta-banner,.split-cta,.skip-link{display:none!important}
body{font-size:12pt;color:#000}
.hero,.page-hero{background:none;color:#000;padding-block:0}
.hero::before,.page-hero::before,.hero__media{display:none}
.hero__title,.page-hero__title,.hero__text,.page-hero__text{color:#000}
.accordion__panel{display:block!important}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}
/* ==========================================================================
LOADER / SPLASH
Shown once per browser session (not on every internal page click).
Markup is inert by default — an inline bootstrap script opts it in, so with
JavaScript disabled it never appears and never traps the page.
========================================================================== */
.loader{display:none}
html.db-loading{overflow:hidden}
html.db-loading .loader{
display:flex;position:fixed;inset:0;z-index:5000;
align-items:center;justify-content:center;flex-direction:column;
background:#0B0710;overflow:hidden;
transition:opacity .5s ease,visibility .5s;
}
/* --- graffiti wall: brand brush strokes + spray speckle --- */
.loader__wall{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loader__wall::after{ /* fine spray speckle over everything */
content:"";position:absolute;inset:-20%;opacity:.26;mix-blend-mode:screen;
background-image:url("data:image/svg+xml;utf8,");
}
.loader__stroke{
position:absolute;width:150%;left:-25%;opacity:0;
transform:translateX(-30%) rotate(-8deg);
animation:db-swipe .72s cubic-bezier(.2,.75,.3,1) forwards;
}
.loader__stroke--1{top:12%;animation-delay:.04s}
.loader__stroke--2{bottom:16%;transform:translateX(30%) rotate(6deg);animation-delay:.16s}
@keyframes db-swipe{to{opacity:.85;transform:translateX(0) rotate(-5deg)}}
.loader__stroke--2{animation-name:db-swipe-b}
@keyframes db-swipe-b{to{opacity:.7;transform:translateX(0) rotate(5deg)}}
/* --- splatter --- */
.loader__dot{
position:absolute;border-radius:50%;opacity:0;
animation:db-pop .5s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes db-pop{from{transform:scale(0)}to{opacity:.9;transform:scale(1)}}
/* --- centrepiece --- */
.loader__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px}
.loader__mascot{
width:min(210px,40vw);height:auto;opacity:0;
filter:drop-shadow(0 18px 44px rgba(244,7,150,.42));
animation:db-drop .66s cubic-bezier(.2,1.4,.35,1) .1s forwards;
}
@keyframes db-drop{
from{opacity:0;transform:translateY(-26px) scale(.82) rotate(-7deg)}
to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
/* wordmark sprayed on: a radial mask grows outward from the centre */
.loader__mark{
width:min(320px,66vw);height:auto;
-webkit-mask-image:radial-gradient(circle,#000 40%,rgba(0,0,0,.5) 62%,transparent 76%);
mask-image:radial-gradient(circle,#000 40%,rgba(0,0,0,.5) 62%,transparent 76%);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:0% 0%;mask-size:0% 0%;
opacity:0;
animation:db-spray .95s cubic-bezier(.25,.8,.3,1) .42s forwards;
}
@keyframes db-spray{
from{-webkit-mask-size:0% 0%;mask-size:0% 0%;opacity:0}
35%{opacity:1}
to{-webkit-mask-size:340% 340%;mask-size:340% 340%;opacity:1}
}
.loader__bar{
width:168px;height:4px;background:rgba(255,255,255,.17);overflow:hidden;border-radius:2px;
}
.loader__bar span{
display:block;height:100%;width:40%;border-radius:2px;
background:var(--db-gradient);
animation:db-run 1.15s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes db-run{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
/* --- exit: a paint stroke sweeps across and takes the splash with it --- */
html.db-loading.db-loaded .loader{opacity:0;visibility:hidden}
html.db-loading.db-loaded .loader::after{
content:"";position:absolute;inset:-30% -60%;
background:var(--db-gradient);transform:skewX(-14deg) translateX(-130%);
animation:db-wipe .62s cubic-bezier(.6,0,.3,1) forwards;
}
@keyframes db-wipe{to{transform:skewX(-14deg) translateX(130%)}}
@media (prefers-reduced-motion:reduce){
html.db-loading .loader *{animation:none!important}
.loader__mascot,.loader__mark{opacity:1!important;-webkit-mask-size:340% 340%!important;mask-size:340% 340%!important}
.loader__stroke{opacity:.8!important;transform:none!important}
.loader__dot{opacity:.9!important;transform:none!important}
html.db-loading.db-loaded .loader::after{display:none}
}
/* ==========================================================================
CRISS-CROSS MARQUEES
Two diagonal bands crossing each other, drifting in opposite directions.
Three nested layers on purpose: the band holds the rotation, the shift
layer takes the scroll-linked transform from JS, and the track runs the
continuous CSS drift — so none of the three transforms fight each other.
========================================================================== */
.xmarquee{
position:relative;overflow:hidden;isolation:isolate;background:transparent;
height:clamp(300px,calc(13vw + 290px),500px);
/* sits above the fact band and bleeds over its top edge */
z-index:6;margin-bottom:-96px;
}
.xband{
position:absolute;left:-8%;width:116%;
display:flex;align-items:center;overflow:hidden;
box-shadow:0 18px 44px rgba(16,16,16,.22);
}
.xband--dark{
top:50%;height:clamp(100px,10vw,140px);
transform:translateY(-50%) translateY(-78px) rotate(-6deg);
background:#121016;
border-top:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
z-index:1;
}
.xband--purple{
top:50%;height:clamp(96px,9.4vw,132px);
transform:translateY(-50%) translateY(78px) rotate(6deg);
background:linear-gradient(90deg,#44129F 0%,var(--db-purple) 48%,#8130F0 100%);
z-index:2;
}
.xband__shift{display:flex;width:max-content;will-change:transform}
.xband__track{
display:flex;align-items:center;
gap:clamp(30px,4vw,66px);padding-inline:clamp(15px,2vw,33px);
}
.xband--dark .xband__track{animation:db-drift 38s linear infinite}
.xband--purple .xband__track{animation:db-drift 31s linear infinite reverse}
.xband__logo{height:clamp(26px,3.2vw,46px);width:auto;flex:0 0 auto}
.xband__logo--ghost{opacity:.32;filter:grayscale(1) brightness(2.3)}
.xband__pup{height:clamp(40px,4.8vw,74px);width:auto;flex:0 0 auto}
.xband__word{
font-family:var(--db-display);font-weight:900;text-transform:uppercase;
font-size:clamp(1.55rem,2.7vw,2.5rem);letter-spacing:.03em;
color:#fff;line-height:1.24;white-space:nowrap;
}
.xband__dot{
width:.46em;height:.46em;border-radius:50%;flex:0 0 auto;
background:rgba(255,255,255,.6);font-size:clamp(1.65rem,2.9vw,2.7rem);
}
/* a paw stands in for the bullet between words — falls back to the dot
anywhere CSS masks aren't supported */
@supports (mask-image:url("")) or (-webkit-mask-image:url("")){
.xband__dot{
width:.74em;height:.78em;border-radius:0;background:rgba(255,255,255,.72);
--db-paw-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20106%20112%22%20fill%3D%22%23000%22%3E%3Cellipse%20cx%3D%2220%22%20cy%3D%2236%22%20rx%3D%2212%22%20ry%3D%2216.5%22%20transform%3D%22rotate%28-20%2020%2036%29%22%2F%3E%3Cellipse%20cx%3D%2242%22%20cy%3D%2219%22%20rx%3D%2211.5%22%20ry%3D%2217%22%20transform%3D%22rotate%28-7%2042%2019%29%22%2F%3E%3Cellipse%20cx%3D%2265%22%20cy%3D%2221%22%20rx%3D%2211.5%22%20ry%3D%2217%22%20transform%3D%22rotate%289%2065%2021%29%22%2F%3E%3Cellipse%20cx%3D%2286%22%20cy%3D%2239%22%20rx%3D%2211%22%20ry%3D%2216%22%20transform%3D%22rotate%2823%2086%2039%29%22%2F%3E%3Cpath%20d%3D%22M53%2050C74%2050%2089%2065%2089%2082C89%2099%2074%20108%2053%20108C32%20108%2017%2099%2017%2082C17%2065%2032%2050%2053%2050Z%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask:var(--db-paw-mask) center/contain no-repeat;
mask:var(--db-paw-mask) center/contain no-repeat;
}
}
@media (max-width:700px){
.xmarquee{height:clamp(300px,calc(22vw + 215px),360px);margin-bottom:-44px}
.xband--dark{transform:translateY(-50%) translateY(-56px) rotate(-8deg)}
.xband--purple{transform:translateY(-50%) translateY(56px) rotate(8deg)}
}
@media (prefers-reduced-motion:reduce){
.xband__track{animation:none!important}
.xband__shift{transform:none!important}
}
/* ==========================================================================
PARALLAX
JS writes --py; everything here is transform-only and switches off for
anyone who has asked for reduced motion.
========================================================================== */
[data-par]{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
/* fill layers get extra height so the shift never exposes an edge */
.hero__media img[data-par],
.fact-band__media img[data-par],
.split-cta__bg img[data-par]{height:126%;top:-13%;position:absolute;left:0;width:100%}
.collage__item img[data-par],
.hcard__media img[data-par],
.card--media .card__media img[data-par]{height:118%;position:relative;top:-9%}
/* a parallaxed image already moves — don't fight it with a hover zoom */
.collage__item:hover img[data-par],
.hcard:hover .hcard__media img[data-par],
.card--media:hover .card__media img[data-par]{transform:translate3d(0,var(--py,0px),0)}
.about__brush[data-par],.hero__brush[data-par]{will-change:transform}
@media (prefers-reduced-motion:reduce){
[data-par]{transform:none!important}
.hero__media img[data-par],.fact-band__media img[data-par],.split-cta__bg img[data-par]{height:100%;top:0}
.collage__item img[data-par],.hcard__media img[data-par],
.card--media .card__media img[data-par]{height:100%;top:0}
.tagwall__track{animation:none!important}
.tagwall__row{transform:none!important}
}
/* ==========================================================================
MOBILE: centred layout
The hero and the marketing blocks centre up on small screens. Long-form
and functional content (forms, FAQ answers, detail tiles, footer) stays
left-aligned, where ragged-right is easier to read.
========================================================================== */
@media (max-width:768px){
.hero__inner{text-align:center}
.hero__content{margin-inline:auto}
.hero__text{margin-inline:auto}
.hero__actions{justify-content:center}
.eyebrow{justify-content:center}
/* section intros */
.about__body,.highlights__head,.partner-invite__inner{text-align:center}
.about__body .measure,.highlights__head .lead,.partner-invite__text{margin-inline:auto}
.about__body .btn,.partner-invite__inner .btn{margin-inline:auto}
.partner-invite__inner{justify-content:center}
/* three-card highlights */
.hcard__head{justify-content:center;gap:12px}
.hcard__title{text-align:center}
.hcard__text{text-align:center}
/* split CTA panels */
.split-cta__panel{text-align:center;justify-content:center}
.split-cta__text{margin-inline:auto}
.split-cta__panel .btn{margin-inline:auto}
/* page heroes */
.page-hero{text-align:center}
.page-hero__text{margin-inline:auto}
.breadcrumb{justify-content:center}
/* section headings that lead a block of cards */
.section > .container > .eyebrow + .h-xl,
.section > .container > .eyebrow + .h-xl + .lead{text-align:center}
.section > .container > .lead.measure{margin-inline:auto}
}
/* ==========================================================================
PHOTO HOVER "POP"
The lift sits on the CONTAINER, not the ![]()
— the image itself already
carries the parallax transform, so animating it here would fight that.
Pointer devices only, and off under reduced motion.
========================================================================== */
@media (hover:hover) and (pointer:fine){
.collage__item,
.hcard__media,
.card--media .card__media{
position:relative;z-index:1;
transition:transform .34s var(--db-ease),box-shadow .34s var(--db-ease);
}
.collage__item:hover,
.hcard:hover .hcard__media,
.card--media:hover .card__media{
transform:translateY(-10px) scale(1.022);
box-shadow:0 26px 56px rgba(16,16,16,.30);
z-index:3;
}
.collage__item:focus-within,
.hcard:focus-within .hcard__media{
transform:translateY(-10px) scale(1.022);
box-shadow:0 26px 56px rgba(16,16,16,.30);
}
/* the arrow on a highlight card leans in with the lift */
.hcard:hover .hcard__arrow{transform:translateX(8px)}
}
@media (prefers-reduced-motion:reduce){
.collage__item,.hcard__media,.card--media .card__media{transition:none!important}
.collage__item:hover,.hcard:hover .hcard__media,
.card--media:hover .card__media{transform:none!important;box-shadow:none!important}
}
/* ==========================================================================
HIGHLIGHT STRIP — icon hover
========================================================================== */
@media (hover:hover) and (pointer:fine){
.highlight-strip__icon{transition:transform .36s var(--db-ease),filter .36s var(--db-ease)}
.highlight-strip__label{transition:color .3s var(--db-ease)}
.highlight-strip__item:hover .highlight-strip__icon{
transform:translateY(-9px) scale(1.14) rotate(-5deg);
filter:drop-shadow(0 12px 18px rgba(16,16,16,.22));
}
.highlight-strip__item:hover .highlight-strip__label{color:var(--accent)}
.highlight-strip__item:hover::after{opacity:.17;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
.highlight-strip__item:hover .highlight-strip__icon{transform:none!important;filter:none!important}
.highlight-strip__item::after{display:none}
}
/* ==========================================================================
FOOTER — centred on mobile
========================================================================== */
@media (max-width:768px){
.site-footer{text-align:center}
.site-footer__logo{display:block;margin-inline:auto}
.site-footer__about{margin-inline:auto}
.site-footer__list{align-items:center}
.site-footer__note,.site-footer__disclaimer{text-align:center}
.site-footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:14px}
.site-footer__legal{justify-content:center}
.contact-strip{justify-content:center}
}
/* ==========================================================================
SPINNING BADGE — circular lockup over the About collage
Text rides an SVG ; only the ring spins, the mascot stays put.
========================================================================== */
.collage{position:relative}
.spin-badge{
/* grid item in the wide photo's row; half-size negative margins put the
circle's CENTRE exactly on that photo's top-left corner */
--badge:clamp(156px,19.5vw,252px);
grid-row:1;grid-column:1 / -1;justify-self:start;align-self:start;
position:relative;z-index:0;
margin:calc(var(--badge) / -2) 0 0 calc(var(--badge) / -2);
width:var(--badge);aspect-ratio:1;
display:grid;place-items:center;pointer-events:none;
}
/* photos sit above the badge so it tucks underneath */
.collage__item{position:relative;z-index:1}
.spin-badge svg{
grid-area:1/1;width:100%;height:100%;
animation:db-spin 20s linear infinite;transform-origin:50% 50%;
}
.spin-badge__text{
font-family:var(--db-display);font-weight:800;text-transform:uppercase;
font-size:22px;letter-spacing:.10em;fill:url(#db-badge-grad);
stroke:none;
}
.spin-badge__pup{
grid-area:1/1;width:46%;height:auto;position:relative;z-index:1;
}
@keyframes db-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width:900px){
.spin-badge{--badge:clamp(138px,33vw,192px)}
}
@media (prefers-reduced-motion:reduce){
.spin-badge svg{animation:none}
}
/* The marquee bleeds over the top of the fact band, so that band needs extra
head-room or the bands sit on top of its icons. */
.xmarquee + .fact-band{padding-top:clamp(120px,13vw,170px)}
@media (max-width:700px){ .xmarquee + .fact-band{padding-top:96px} }
/* wrappers around the mascot must not disturb flex/grid placement */
.xband__track picture{display:flex;flex:0 0 auto;align-items:center}
.loader__inner picture{display:contents}
.spin-badge picture{grid-area:1/1;display:grid;place-items:center;z-index:1}
/* tablet/laptop: the fact band needs a touch more head-room under the bleed */
@media (min-width:701px) and (max-width:1100px){
.xmarquee + .fact-band{padding-top:170px}
}
/* ==========================================================================
FAQ — questions on the left, photo holding the right-hand column
========================================================================== */
.faq-grid{
display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:clamp(36px,4.6vw,76px);align-items:start;
}
.faq-grid__copy{min-width:0}
.faq-grid .accordion{max-width:none}
.faq-grid__media{
margin:0;position:sticky;top:calc(var(--db-header-h) + 34px);
border-radius:var(--db-radius);overflow:hidden;background:var(--db-navy);
}
.faq-grid__media img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (max-width:900px){
.faq-grid{grid-template-columns:1fr;gap:32px}
.faq-grid__media{position:static;top:auto}
.faq-grid__media img{aspect-ratio:16/10}
}
/* ==========================================================================
HIGHLIGHTS — paw-print trail behind the cards
========================================================================== */
.highlights__paws{
/* a trail walking down the right-of-centre, behind the cards */
position:absolute;right:2%;top:-7%;height:116%;width:auto;max-width:none;
z-index:0;pointer-events:none;user-select:none;
}
.highlights > .container{position:relative;z-index:1}
@media (max-width:700px){
.highlights__paws{right:-10%;top:0;height:100%;opacity:.8}
}
/* Each paw presses in as the section scrolls past — JS flips .is-on in sequence.
Positioning lives on the transform attribute; the CSS transform sits on the
inner