/* Layout: full-width red masthead band, then centred sections on white and grey, black footer.
   Everything is sized in rem, and the root size grows with the screen (16px on phones, up to 22px on
   wide monitors), so the whole page scales as one. Sections go two-column from 900px wide. */
:root{
  --red:#AE2537;          /* masthead + accent */
  --red-deep:#8E1C2B;     /* hover / pressed */
  --on-red:#FFFFFF;
  --red-text:#AE2537;     /* red used as text; lighter in dark theme for contrast */
  --ribbon:#AE2537;       /* hero line animation */
  --panel:#141414;        /* dark brands panel */
  --on-panel:#F2F2F3;
  --bg:#FFFFFF;
  --surface:#F5F5F6;      /* grey section ground */
  --ink:#141414;          /* near-black text */
  --muted:#5E5E63;        /* grey secondary text */
  --rule:#DCDCDF;
  --foot:#141414;
  --on-foot:#E6E6E8;
  --display:"Rubik", "Helvetica Neue", Arial, sans-serif;
  --body:"Lato", "Helvetica Neue", Arial, sans-serif;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --red:#B3283B; --red-deep:#C93A4D; --on-red:#FFFFFF; --red-text:#EE7280; --ribbon:#E5505F; --panel:#0A0A0B; --on-panel:#F2F2F3;
    --bg:#121213; --surface:#1B1B1D; --ink:#F2F2F3; --muted:#A3A3A8; --rule:#2E2E31;
    --foot:#0A0A0B; --on-foot:#D6D6D9; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --red:#B3283B; --red-deep:#C93A4D; --on-red:#FFFFFF; --red-text:#EE7280; --ribbon:#E5505F; --panel:#0A0A0B; --on-panel:#F2F2F3;
  --bg:#121213; --surface:#1B1B1D; --ink:#F2F2F3; --muted:#A3A3A8; --rule:#2E2E31;
  --foot:#0A0A0B; --on-foot:#D6D6D9; color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:clamp(16px,0.45vw + 11px,22px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;margin:0}
.wrap{max-width:100rem;margin:0 auto;padding-inline:clamp(16px,5vw,6rem)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.masthead :focus-visible{outline-color:var(--on-red)}

/* Masthead: links split either side of a centred wordmark */
.masthead{background:var(--red);color:var(--on-red);position:sticky;top:0;z-index:40;transition:box-shadow .3s}
.masthead .wrap{padding-block:1.6rem}
.masthead.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.18)}
.masthead-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem clamp(1.5rem,4vw,4rem)}
.wordmark{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.01em;line-height:1;text-decoration:none;display:flex;align-items:center;gap:.55rem}
.wordmark img{display:block;height:1.15em;width:auto;align-self:center}
.wordmark small{font-weight:500;font-size:.5em;letter-spacing:.22em;text-transform:uppercase;opacity:.9}
.brand{justify-self:center}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.75rem}
.nav-left{justify-content:flex-end}
.nav-right{justify-content:flex-start}
nav a{font-family:var(--display);font-weight:500;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding-block:.35rem;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--on-red)}
/* Phones: wordmark on top, the four links in one centred row beneath */
@media (max-width:640px){
  .masthead-nav{grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "left right";gap:.9rem 1.2rem}
  .brand{grid-area:brand}
  .nav-left{grid-area:left}
  .nav-right{grid-area:right}
}

/* Hero */
.hero{padding-block:clamp(4rem,10vw,7.5rem) clamp(3rem,7vw,5rem);border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--display);font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--red-text);margin:0 0 1.25rem}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.06;letter-spacing:-.02em;margin:0;max-width:17ch;text-wrap:balance}
.hero p{font-weight:300;font-size:clamp(1.15rem,2vw,1.4rem);color:var(--muted);max-width:40rem;margin:1.75rem 0 0}
.hero .eyebrow{font-weight:500;font-size:.8rem;color:var(--red-text);margin:0 0 1.25rem}

/* Sections */
section{padding-block:clamp(3.5rem,6vw,7rem)}
section.first{padding-top:clamp(4rem,8vw,9rem)}

/* Two columns on wide screens, stacked on narrow ones */
.split{display:grid;gap:2.5rem clamp(3rem,7vw,9rem);align-items:start}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .split .contact-form{margin-top:0}
}
.section-head{display:flex;align-items:center;gap:1.25rem;margin-bottom:2.25rem}
.section-head h2{font-family:var(--display);font-weight:500;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;margin:0;white-space:nowrap}
.section-head::after{content:"";flex:1;height:1px;background:var(--ink);opacity:.85}
.prose{max-width:40rem}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}
.lead{font-weight:300;font-size:1.3rem;line-height:1.55}

.grey{background:var(--surface)}


/* Contact */
.contact-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.25rem 1.5rem;margin-top:2rem;min-width:0}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field-wide{grid-column:1/-1}
.field label{font-family:var(--display);font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.optional{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400}
.field input,.field textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:2px;padding:.7rem .8rem;width:100%}
.field textarea{resize:vertical;min-height:9rem}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.field [aria-invalid="true"]{border-color:var(--red-text);border-width:2px}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.form-actions .note{margin:0}
.btn{font-family:var(--display);font-weight:500;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:var(--on-red);border:0;border-radius:999px;padding:.8rem 1.4rem;cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--red)}
.btn:disabled{opacity:.6;cursor:progress}
.note{color:var(--muted);font-size:.95rem;margin-top:1rem}
.note.error{color:var(--red-text);font-weight:700}

/* Privacy */
.privacy h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:1.75rem 0 .4rem}
.privacy p{color:var(--muted)}
.updated{font-size:.9rem;color:var(--muted);margin:0 0 .5rem}
.privacy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:0 clamp(2rem,4vw,4.5rem)}
.privacy-grid > div{min-width:0}

/* Footer */
footer{background:var(--foot);color:var(--on-foot);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding-block:2.25rem}
footer .wordmark{font-size:1.25rem}
footer p{margin:0;opacity:.85}

@media (max-width:640px){
  .masthead .wrap{padding-block:1.2rem}
  nav ul{gap:.25rem 1.2rem}
  nav a{font-size:.8rem}
  footer .wrap{flex-direction:column;align-items:flex-start}
}

/* Footer links and current-page marker */
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.75rem}
.foot-links a{font-family:var(--display);font-weight:500;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid transparent;padding-block:.35rem}
.foot-links a:hover{border-bottom-color:var(--on-foot)}
footer .wrap{align-items:center}
footer :focus-visible{outline-color:var(--on-foot)}
nav a[aria-current="page"]{border-bottom-color:var(--on-red)}
.privacy a{color:var(--ink)}

/* ---------- Home page ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--on-red);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}

/* Scroll reveals: only hidden when JavaScript is running to bring them back */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.15s}
.js .reveal.d2{transition-delay:.3s}

/* Intro: headline with the services floating around it (wide screens), then the product shelf */
.intro{position:relative;z-index:5;padding-top:clamp(2.5rem,4vw,3.5rem);padding-bottom:clamp(2rem,4vw,3.5rem);background:#FFFFFF;color:#141414}
.ribbons{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-stage{position:relative;text-align:center}
.intro-title{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.5vw,2.6rem);line-height:1.22;letter-spacing:-.015em;max-width:30ch;margin:0 auto;text-wrap:balance}
.intro-sub{font-weight:300;font-size:clamp(1.05rem,1.3vw,1.2rem);color:#5E5E63;max-width:44rem;margin:1.1rem auto 0;text-wrap:balance}
.tags{list-style:none;margin:2rem auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.tag{font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding:.6rem 1rem;border:1px solid #DCDCDF;border-radius:999px;background:#FFFFFF;box-shadow:0 6px 18px -10px rgba(20,20,20,.25);transition:border-color .25s,color .25s}
.tag:hover{border-color:#AE2537;color:#AE2537}
.intro :focus-visible{outline-color:#AE2537}
#services{scroll-margin-top:7rem}
/* Wide screens: tags scattered around the headline, drifting gently */
@media (min-width:1100px){
  .intro-stage{max-width:86rem;margin:0 auto;padding-block:3rem 3.5rem}
  .intro-title{max-width:27ch}
  .tags{position:absolute;inset:0;margin:0;display:block;pointer-events:none}
  .intro .tag{position:absolute;pointer-events:auto;animation:bob 6s ease-in-out infinite}
  .t1{top:17%;left:10%;animation-duration:6.5s}
  .t2{top:1%;right:16%;animation-delay:-1.5s;animation-duration:7.2s}
  .t3{top:55%;left:1%;animation-delay:-3s;animation-duration:5.8s}
  .t4{top:29%;right:3%;animation-delay:-4.5s;animation-duration:6.9s}
  .t5{bottom:0;left:19%;animation-delay:-2.2s;animation-duration:7.6s}
  .t6{bottom:21%;right:11%;animation-delay:-3.7s;animation-duration:6.2s}
  .t7{top:-4%;left:29%;animation-delay:-.8s;animation-duration:7s}
}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* Product shelf: items stand on one floor, leaning and overlapping; sized so the row fills the width */
.products{--u:calc((100vw - 3rem) / 134);padding-block:0;background:#FFFFFF}
.shelf{--floor:3.2em;position:relative;overflow:hidden;font-size:var(--u)}
.shelf-row{display:flex;align-items:flex-end;justify-content:center;list-style:none;margin:0;padding:2em 1.5rem calc(var(--floor) - .9em)}
.item{position:relative;flex:none;margin-left:var(--ml,0);z-index:var(--z,1);transform:rotate(var(--r,0deg));transform-origin:50% 100%;outline:none}
.item img{display:block;height:var(--h);width:auto;filter:drop-shadow(0 .7em .55em rgba(0,0,0,.16)) drop-shadow(0 .12em .18em rgba(0,0,0,.18));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.item::after{content:"";position:absolute;left:10%;right:10%;bottom:-.45em;height:1em;background:radial-gradient(closest-side,rgba(0,0,0,.30),transparent);z-index:-1}
.item:hover,.item:focus-visible{z-index:5}
.item:hover img,.item:focus-visible img{transform:translateY(-.9em) scale(1.04)}
.i1{--h:20em}
.i2{--h:13em;--ml:-5em;--r:-10deg;--z:3}
.i3{--h:12.5em;--ml:-1.5em}
.i4{--h:16em;--ml:-2em}
.i5{--h:9em;--ml:-6em;--r:-6deg;--z:3}
.i6{--h:11.5em;--ml:-1em}
.i7{--h:13.5em;--ml:-2.5em}
.i8{--h:13em;--ml:-4em;--r:7deg;--z:3}
.i9{--h:13.5em;--ml:-3.5em;--r:-3deg;--z:2}
.i10{--h:19em;--ml:-2em}
.i11{--h:10em;--ml:-6em;--r:5deg;--z:3}
.i12{--h:15em;--ml:-1.5em}
.i13{--h:11em;--ml:-5em;--r:8deg;--z:3}
.i14{--h:20em;--ml:-1.5em}
/* Front row: smaller items lying on the floor in front of the shelf, for depth */
.front{position:relative;z-index:2;font-size:var(--u);padding:0 1.5rem .8em}
.front-row{list-style:none;margin:-2.2em 0 0;padding:0;display:flex;align-items:flex-end;justify-content:center}
.front .item{--ml:.7em}
.front .item:first-child{--ml:0}
.front .item img{filter:drop-shadow(0 .5em .45em rgba(0,0,0,.2)) drop-shadow(0 .1em .15em rgba(0,0,0,.22))}
.front .item::after{left:22%;right:22%;opacity:.6}
.f1{--h:8.5em;--r:-14deg}
.f2{--h:7.5em;--r:22deg;--ml:-1.5em!important;--z:2}
.f3{--h:5.5em;--r:8deg}
.f4{--h:6em;--r:-5deg}
.f5{--h:7em;--r:-9deg}
.f6{--h:4.5em;--r:6deg}
.f7{--h:6.5em;--r:-6deg}
.f8{--h:4em;--r:12deg;--ml:-.6em!important;--z:2}
.f9{--h:8em;--r:-4deg}
.f10{--h:6.5em;--r:10deg}
.f11{--h:7.5em;--r:9deg}
.f12{--h:7.5em;--r:-18deg;--ml:-1em!important;--z:2}
.f13{--h:6.5em;--r:5deg}
.f14{--h:7em;--r:-10deg}
/* Scroll-in: items rise onto the shelf one after another */
.js .item{opacity:0;translate:0 1.5em;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1)}
.js .shelf.in .item,.js .front.in .item{opacity:1;translate:0 0}
/* Phones and small tablets: fixed size, swipe sideways */
@media (max-width:760px){
  .shelf{font-size:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .shelf-row{justify-content:flex-start;width:max-content;padding-inline:16px 24px}
  .front{font-size:7px;grid-template-columns:1fr;row-gap:1.25rem;padding-top:1.5rem}
  .front-row{margin:0;justify-content:center;flex-wrap:wrap;row-gap:1em}
    }

/* Statement: words light up with scroll */
.statement{padding-block:clamp(4rem,7vw,6.5rem);text-align:center;background:#FFFFFF;color:#141414}
.statement-text{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.2vw,2.1rem);line-height:1.35;letter-spacing:-.01em;max-width:44ch;margin:0 auto;text-wrap:balance}
.js .statement-text .w{color:#C4C4C9;transition:color .18s}
.js .statement-text .w.lit{color:#141414}

/* Brands panel with endless logo strip */
.partners{background:#FFFFFF;color:#141414;padding-block:clamp(2rem,4vw,3.5rem);overflow:hidden;position:relative}
.partners-title{text-align:center;font-family:var(--display);font-weight:500;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 clamp(1.25rem,2.5vw,2rem);color:#5E5E63}
.marquee{overflow:hidden;padding-block:1.25rem 2.25rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.marquee-list{display:flex;align-items:center;gap:clamp(3rem,6vw,7rem);padding:0 clamp(3rem,6vw,7rem) 0 0;margin:0;list-style:none}
.logo{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2vw,1.9rem);letter-spacing:-.01em;white-space:nowrap;color:#141414;position:relative;transition:transform .3s}
/* Faint ground shadow under each logo, as wide as the logo itself */
.logo::after{content:"";position:absolute;left:4%;right:4%;bottom:-.75em;height:.5em;background:radial-gradient(closest-side,rgba(0,0,0,.13),transparent);pointer-events:none;transition:opacity .3s,transform .3s}
.logo:hover::after{opacity:.6;transform:scaleX(.92)}
.logo:hover{transform:translateY(-3px)}
.logo img{display:block;height:clamp(26px,2.6vw,44px);width:auto;max-width:12rem;object-fit:contain;filter:brightness(0)}
@keyframes marquee{to{transform:translateX(-50%)}}
.cta :focus-visible{outline-color:#AE2537}


@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:auto;justify-content:center}
  .marquee-list{flex-wrap:wrap;justify-content:center;padding:0 1rem;row-gap:2rem}
  .marquee-list[aria-hidden="true"]{display:none}
  .tag{animation:none}
  .btn-cta::after{animation:none;opacity:0}
  .js .item,.js .shot{opacity:1;translate:none;transition:none}
  .item img{transition:none}
  .btn:hover{transform:none}
}

.nowrap{white-space:nowrap}
.statement-text .w{white-space:nowrap}
/* Optical sizing: compact or detailed logos read smaller at equal height */
.logo img.lg-l{height:clamp(32px,3.2vw,54px)}
.logo img.lg-xl{height:clamp(40px,4vw,68px)}

/* Product name label: one element above everything, so it is never clipped or covered */
.product-tip{position:fixed;left:0;top:0;z-index:100;pointer-events:none;max-width:min(80vw,26rem);font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.3;text-align:center;background:#141414;color:#FFFFFF;padding:.55rem .85rem;border-radius:999px;box-shadow:0 10px 26px -10px rgba(0,0,0,.45);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.product-tip.on{opacity:1;transform:none}

/* Service tags: on wide screens they float around the headline, then glide into this row under the
   statement as you scroll (home.js adds .tags-fly). Elsewhere the row simply shows here. */
.tag-slots{list-style:none;margin:clamp(1.75rem,3vw,2.5rem) auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.statement .tag{color:#141414}
@media (min-width:1100px){
  .tag-slots{display:none}
  .tags-fly .tag-slots{display:flex}
  .tags-fly .tag-slots .tag{visibility:hidden}
  .tags-fly .intro .tag{will-change:transform;transition:opacity .9s ease,border-color .25s,color .25s}
  .intro .tag.docked,.tags-moving .intro .tag{animation:none}
}
@media (max-width:1099.98px){
  .intro .tags{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Home sections are all white; a white base stops hairline seams of the dark page showing between them */
.home main{background:#FFFFFF}

/* Brand links: whole logo is the link; icon + name lockups for brands without a single logo file */
.logo a{display:block;color:inherit;text-decoration:none;border-radius:4px}
.logo a:focus-visible{outline:2px solid #AE2537;outline-offset:6px}
.lockup{display:flex;align-items:center;gap:.35em;font-size:.82em}
.logo img.mark{height:1.25em;max-width:none}
.logo img.mark[src*="care-dynamics"]{height:1.6em;margin-right:-.1em}

/* What sets us apart: tiles in the header red, each a step lighter. On wide screens the section
   pins under the header and the row slides sideways with the scroll (home.js adds .pin-on). */
.unique{background:#FFFFFF;color:#141414;padding-block:clamp(4rem,7vw,6.5rem) clamp(2rem,4vw,3rem)}
.unique-head{text-align:center;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.unique-head .kicker{margin-bottom:.6rem}
/* Section headings: editorial serif with an italic red accent word */
.display-h{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144;font-size:clamp(2.4rem,4.6vw,4.6rem);line-height:1.04;letter-spacing:-.015em;margin:0;color:#141414}
.display-h em{font-style:italic;color:#AE2537;font-weight:400}
.unique-head .kicker,.recap .kicker{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1rem}
.unique-head .kicker::before,.unique-head .kicker::after,.recap .kicker::before,.recap .kicker::after{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.55}
.unique-track{display:flex;gap:clamp(1.5rem,3.5vw,3.5rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 16px 3rem;scrollbar-width:none}
.unique-track::-webkit-scrollbar{display:none}
.tile{position:relative;flex:none;width:min(84vw,56rem);scroll-snap-align:center;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.25rem,2.5vw,2.5rem);padding:clamp(.7rem,1vw,.9rem);border-radius:clamp(20px,2.2vw,30px);color:#FFFFFF;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),var(--tile);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 22px 44px -30px rgba(0,0,0,.35);transform-origin:50% 50%;will-change:transform}
/* soft ground shadow under each tile, the same treatment as the brand logos */
.tile::after{content:"";position:absolute;left:8%;right:8%;bottom:-2.2rem;height:1.4rem;background:radial-gradient(closest-side,rgba(0,0,0,.16),transparent);pointer-events:none}
.tile-1{--tile:#AE2537}
.tile-2{--tile:#AE2537}
.tile-3{--tile:#AE2537}
.tile-4{--tile:#AE2537}
.tile-5{--tile:#AE2537}
/* Frosted-glass panel for the symbol */
.tile-art{position:relative;border-radius:clamp(14px,1.6vw,22px);display:grid;place-items:center;aspect-ratio:1/1;color:#FFFFFF;
  background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.05) 55%,rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.32);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -30px 50px -30px rgba(0,0,0,.25),0 20px 34px -22px rgba(0,0,0,.45);overflow:hidden}
.tile-art::before{content:"";position:absolute;inset:-40% -40% auto auto;width:80%;height:80%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
.tile-art svg{position:relative;width:42%;height:auto;filter:drop-shadow(0 0 .9rem rgba(255,255,255,.35)) drop-shadow(0 .5rem .6rem rgba(0,0,0,.18))}
.tile-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(.75rem,2vw,2rem) clamp(1rem,2.4vw,2.5rem) clamp(.75rem,2vw,2rem) 0}
.tile h3{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 96;font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1.15;letter-spacing:-.005em;margin:0 0 1.1rem}
/* Lead phrase in the header red, set on a white highlight so it reads on every shade */
/* Lead phrase: white serif with a soft glow */
.tile mark{background:none;color:#FFFFFF;text-shadow:0 0 1.4rem rgba(255,255,255,.22)}
.tile p{margin:0;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.6;color:rgba(255,255,255,.84)}
@media (max-width:640px){
  .tile{grid-template-columns:1fr}
  .tile-art{aspect-ratio:auto;padding-block:1.5rem}
  .tile-art svg{width:28%}
  .tile-copy{padding:0 .5rem .75rem}
}
.pin-on.unique{padding-block:0;margin-top:clamp(2rem,4vw,3.5rem)}
.pin-on .unique-pin{position:sticky;top:var(--head,0px);height:calc(100vh - var(--head,0px));overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pin-on .unique-track{overflow:visible;scroll-snap-type:none;padding-inline:0;will-change:transform}

/* 2026 portfolio recap: small grey intro above the product display */
.recap{background:#FFFFFF;text-align:center;padding-block:clamp(4rem,7vw,6.5rem) clamp(2rem,4vw,3.5rem)}
.recap-text{font-weight:300;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;color:#5E5E63;max-width:40rem;margin:1.25rem auto 0;text-wrap:balance}

/* Closing collage: three full-width rows of products, edge to edge */
.cta{background:#FFFFFF;padding-block:0}
.cta :focus-visible{outline-color:#AE2537}
.cta-grid{--u:calc((100vw - 3rem) / 152);font-size:var(--u);display:flex;flex-direction:column;gap:.4em;padding:0 3.5em}
.cta-row{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;justify-content:space-between;min-width:0}
.cta-mid{align-items:center}
.cta-bottom{align-items:flex-start;font-size:.86em}
.k48{--h:8.5em;--r:-8deg;--ml:.6em;--z:1}
.k49{--h:7.5em;--r:-7deg;--ml:.6em;--z:1}
.k50{--h:8.5em;--r:5deg;--ml:.6em;--z:1}
.k51{--h:8.5em;--r:-6deg;--ml:.6em;--z:1}

/* Get in touch: its own band under the collage */
.cta-final{background:#FFFFFF;text-align:center;padding-block:clamp(3.5rem,6vw,5.5rem) clamp(4.5rem,8vw,7rem)}
.btn-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:1.6rem;padding:.7rem .7rem .7rem 3rem;border-radius:999px;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.3vw,1.25rem);letter-spacing:.16em;text-transform:uppercase;color:#FFFFFF;
  background:linear-gradient(135deg,#C7384C 0%,#AE2537 45%,#8E1C2B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.16),0 28px 44px -22px rgba(174,37,55,.8),0 3px 8px rgba(174,37,55,.25);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
/* soft halo that breathes behind the button */
.btn-cta::after{content:"";position:absolute;inset:-10px;border-radius:inherit;border:1.5px solid rgba(174,37,55,.35);z-index:-1;animation:halo 2.8s ease-out infinite}
@keyframes halo{0%{opacity:.9;transform:scale(.96)}80%,100%{opacity:0;transform:scale(1.12)}}
/* sheen sweep on hover */
.btn-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s ease;pointer-events:none}
.btn-cta-label{position:relative}
.btn-cta-icon{position:relative;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:#FFFFFF;color:#AE2537;box-shadow:0 8px 18px -8px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn-cta-icon svg{width:1.4rem;height:1.4rem;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn-cta:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.16),0 34px 52px -22px rgba(174,37,55,.9),0 3px 8px rgba(174,37,55,.28)}
.btn-cta:hover::before{background-position:-20% 0}
.btn-cta:hover .btn-cta-icon{transform:rotate(-45deg)}
.btn-cta:focus-visible{outline:2px solid #AE2537;outline-offset:6px}
.k38{--h:7.5em;--r:-5deg;--ml:.6em;--z:1}
.k39{--h:9.5em;--r:6deg;--ml:.6em;--z:1}
.k40{--h:10em;--r:-4deg;--ml:0;--z:1}
.k41{--h:7em;--r:6deg;--ml:.6em;--z:1}
.k42{--h:8.5em;--r:-3deg;--ml:.6em;--z:1}
.k43{--h:7em;--r:8deg;--ml:.6em;--z:1}
.k44{--h:7em;--r:-6deg;--ml:.6em;--z:1}
.k45{--h:9.5em;--r:4deg;--ml:.6em;--z:1}
.k46{--h:9.5em;--r:-3deg;--ml:.6em;--z:1}
.k47{--h:7em;--r:7deg;--ml:.6em;--z:1}
.k1{--h:12em;--r:-3deg;--ml:0em;--z:1}
.k2{--h:5.5em;--r:-9deg;--ml:-4.5em;--z:3}
.k3{--h:11em;--r:7deg;--ml:-2.5em;--z:2}
.k4{--h:8em;--r:-6deg;--ml:0.6em;--z:1}
.k5{--h:10em;--r:5deg;--ml:-0.8em;--z:1}
.k6{--h:10em;--r:-4deg;--ml:0.2em;--z:1}
.k7{--h:8em;--r:-6deg;--ml:0.4em;--z:1}
.k8{--h:9em;--r:5deg;--ml:0.4em;--z:1}
.k9{--h:11em;--r:-4deg;--ml:0.4em;--z:1}
.k10{--h:7em;--r:9deg;--ml:-1.5em;--z:3}
.k11{--h:11em;--r:4deg;--ml:-1.2em;--z:1}
.k12{--h:9em;--r:-6deg;--ml:0.2em;--z:1}
.k13{--h:8.5em;--r:7deg;--ml:0.2em;--z:1}
.k14{--h:10em;--r:4deg;--ml:0.4em;--z:1}
.k15{--h:10em;--r:-5deg;--ml:0.2em;--z:1}
.k16{--h:8em;--r:6deg;--ml:-0.6em;--z:2}
.k17{--h:11em;--r:-7deg;--ml:0.2em;--z:2}
.k18{--h:6em;--r:8deg;--ml:-1.5em;--z:3}
.k19{--h:12em;--r:3deg;--ml:-3em;--z:1}
.k20{--h:10.5em;--r:-3deg;--ml:0em;--z:1}
.k21{--h:9em;--r:-10deg;--ml:0.2em;--z:1}
.k22{--h:9em;--r:3deg;--ml:0.2em;--z:1}
.k23{--h:8.5em;--r:-8deg;--ml:0.2em;--z:1}
.k24{--h:7.5em;--r:6deg;--ml:0.2em;--z:1}
.k25{--h:4.5em;--r:-8deg;--ml:.6em;--z:2}
.k26{--h:9.5em;--r:-5deg;--ml:0em;--z:1}
.k27{--h:7.5em;--r:5deg;--ml:0.2em;--z:1}
.k28{--h:8.5em;--r:-7deg;--ml:0.2em;--z:1}
.k29{--h:11.5em;--r:5deg;--ml:0.2em;--z:1}
.k30{--h:8.5em;--r:9deg;--ml:0.2em;--z:1}
.k31{--h:10em;--r:-4deg;--ml:-1.5em;--z:1}
.k32{--h:9em;--r:-6deg;--ml:.6em;--z:1}
.k33{--h:10em;--r:-3deg;--ml:0.6em;--z:1}
.k34{--h:7.5em;--r:7deg;--ml:0.6em;--z:1}
.k35{--h:10em;--r:-3deg;--ml:0.6em;--z:1}
.k36{--h:9.5em;--r:4deg;--ml:0.6em;--z:1}
.k37{--h:8.5em;--r:6deg;--ml:0.6em;--z:1}
.js .cta-grid.in .item{opacity:1;translate:0 0}
@media (max-width:760px){
  .cta-grid{font-size:7px;padding:0 16px;gap:1.5rem}
  .cta-top,.cta-bottom{display:none}
  .cta-mid{justify-content:center;flex-wrap:wrap;row-gap:1em}
}

.kicker{font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:#AE2537}

/* ---------- Selected work (delivered with Q-LIVE Group) ---------- */
.work{background:#FFFFFF;color:#141414;padding-block:clamp(4rem,7vw,6.5rem) clamp(2rem,4vw,3.5rem)}
.work-head{text-align:center}
.work-head .kicker{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1rem}
.work-head .kicker::before,.work-head .kicker::after{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.55}
.work-sub{font-weight:300;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;color:#5E5E63;max-width:42rem;margin:1.25rem auto 0;text-wrap:balance}

/* Photo gallery: six rounded frames in a staggered row, lifted on soft ground shadows */
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.5rem);padding:clamp(2.5rem,4vw,3.5rem) clamp(16px,3vw,3.5rem) clamp(3rem,5vw,4.5rem)}
.shot{position:relative;margin:0;border-radius:clamp(14px,1.6vw,24px);overflow:hidden;aspect-ratio:3/4;background:#F0F0F2;
  box-shadow:0 24px 40px -26px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.06);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.shot:nth-child(even){transform:translateY(clamp(1rem,2.5vw,2.75rem))}
.shot:hover{box-shadow:0 34px 50px -26px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.08)}
.shot:hover img{transform:scale(1.05)}
.js .shot{opacity:0;translate:0 2rem;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.js .gallery.in .shot{opacity:1;translate:0 0}

/* Record + pillars, side by side on wide screens */
.work-grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:start}
@media (min-width:1000px){.work-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.work-h{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 96;font-size:clamp(1.5rem,2.2vw,2.1rem);letter-spacing:-.01em;margin:0 0 1.25rem}
.record{list-style:none;margin:0;padding:0;border-top:1px solid #E4E4E7}
.rec{display:grid;grid-template-columns:4.5rem minmax(0,1fr);column-gap:1.25rem;row-gap:.2rem;padding:1.1rem .5rem;border-bottom:1px solid #E4E4E7;transition:background .3s}
.rec:hover{background:#FBF4F5}
.rec-year{grid-row:span 3;font-family:var(--serif);font-style:italic;font-size:1.35rem;color:#AE2537;line-height:1.2}
.rec-name{font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.35}
.rec-role{color:#141414;font-size:.98rem}
.rec-where{color:#5E5E63;font-size:.9rem}
.pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.pillar{position:relative;padding:1.25rem 1.25rem 1.35rem;border-radius:18px;background:linear-gradient(160deg,#FFFFFF,#F7F7F8);border:1px solid #ECECEF;box-shadow:0 18px 30px -24px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.pillar:hover{transform:translateY(-3px);border-color:rgba(174,37,55,.35);box-shadow:0 24px 36px -24px rgba(174,37,55,.4)}
.pillar-n{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:#AE2537}
.pillar h4{font-family:var(--display);font-weight:600;font-size:1.08rem;margin:.35rem 0 .4rem}
.pillar p{margin:0;font-size:.95rem;line-height:1.55;color:#5E5E63}
@media (max-width:760px){
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2.5rem}
  .gallery::-webkit-scrollbar{display:none}
  .shot{flex:none;width:62vw;scroll-snap-align:center}
  .shot:nth-child(even){transform:none}
  .pillars{grid-template-columns:1fr}
}
/* Partner retailers shown as wordmarks in the brands strip */
.logo-word{font-family:var(--display);font-weight:700;letter-spacing:-.01em}

/* ---------- Contact page ---------- */
.contact-page main{background:#FFFFFF;color:#141414}
.contact{padding-block:clamp(3.5rem,7vw,6.5rem) clamp(4rem,8vw,7rem)}
.contact-grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:start}
@media (min-width:1000px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.contact-intro .kicker{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1rem}
.contact-intro .kicker::after{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.55}
.contact-intro .display-h{text-align:left}
.contact-lead{font-weight:300;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.65;color:#5E5E63;max-width:32rem;margin:1.5rem 0 0}
.contact-points{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid #E4E4E7}
.contact-points li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding:1.1rem 0;border-bottom:1px solid #E4E4E7}
.cp-n{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:#AE2537;line-height:1.3}
.contact-points strong{font-family:var(--display);font-weight:600;font-size:1.02rem}
.contact-points p{margin:.25rem 0 0;color:#5E5E63;font-size:.95rem;line-height:1.55}

/* Form card: soft white panel lifted on a ground shadow, like the business-area cards */
.contact-card{position:relative;padding:clamp(1.5rem,3vw,2.75rem);border-radius:28px;background:linear-gradient(160deg,#FFFFFF,#F8F8F9);border:1px solid #ECECEF;
  box-shadow:0 40px 70px -45px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.04)}
.contact-card::before{content:"";position:absolute;left:2rem;right:2rem;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#C7384C,#AE2537,#8E1C2B)}
.topics{border:0;margin:0 0 1.75rem;padding:0}
.topics legend{font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#5E5E63;margin-bottom:.9rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;font-family:var(--display);font-weight:500;font-size:.85rem;padding:.55rem 1rem;border-radius:999px;border:1px solid #DCDCDF;background:#FFFFFF;color:#141414;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.chip:hover span{border-color:#AE2537}
.chip input:checked+span{background:#AE2537;border-color:#AE2537;color:#FFFFFF;box-shadow:0 10px 18px -10px rgba(174,37,55,.7)}
.chip input:focus-visible+span{outline:2px solid #AE2537;outline-offset:3px}

/* Floating-label fields */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.fl{position:relative}
.fl-wide{grid-column:1/-1}
.fl input,.fl textarea{width:100%;font:inherit;font-size:1rem;color:#141414;background:#FFFFFF;border:1px solid #DCDCDF;border-radius:14px;padding:1.55rem 1rem .6rem;transition:border-color .2s,box-shadow .2s}
.fl textarea{resize:vertical;min-height:10rem;line-height:1.55}
.fl label{position:absolute;left:1rem;top:1.1rem;font-size:1rem;color:#7A7A80;pointer-events:none;transform-origin:0 0;transition:transform .2s,color .2s}
.fl input:focus,.fl textarea:focus{outline:none;border-color:#AE2537;box-shadow:0 0 0 4px rgba(174,37,55,.12)}
.fl input:focus+label,.fl textarea:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:not(:placeholder-shown)+label{transform:translateY(-.65rem) scale(.76);color:#AE2537}
.fl [aria-invalid="true"]{border-color:#AE2537;box-shadow:0 0 0 4px rgba(174,37,55,.12)}
.fl .optional{color:#9A9AA0}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.75rem}
.form-foot .note{margin:0}
.contact-card .btn-cta{border:0;cursor:pointer}
.contact-card .btn-cta:disabled{opacity:.7;cursor:progress}
.form-fine{margin:1.25rem 0 0;font-size:.85rem;color:#7A7A80}
.form-fine a{color:#AE2537}

/* ---------- Privacy page ---------- */
.privacy-page main{background:#FFFFFF;color:#141414}
.pv{padding-block:clamp(3.5rem,7vw,6.5rem) clamp(4rem,8vw,7rem)}
.pv-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.pv-head .kicker{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1rem}
.pv-head .kicker::before,.pv-head .kicker::after{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.55}
.pv-sub{font-weight:300;font-size:clamp(1.05rem,1.3vw,1.2rem);color:#5E5E63;max-width:38rem;margin:1.25rem auto 0;text-wrap:balance}
.pv-date{display:inline-block;margin:1.25rem 0 0;font-family:var(--display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#5E5E63;padding:.45rem .9rem;border:1px solid #E4E4E7;border-radius:999px}
.pv-grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
@media (min-width:1000px){.pv-grid{grid-template-columns:16rem minmax(0,46rem);justify-content:center}}
.pv-toc{position:sticky;top:8rem;padding:1.25rem 1.25rem 1.4rem;border-radius:20px;background:linear-gradient(160deg,#FFFFFF,#F7F7F8);border:1px solid #ECECEF;box-shadow:0 18px 30px -24px rgba(0,0,0,.35)}
.pv-toc p{margin:0 0 .75rem;font-family:var(--display);font-weight:500;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#5E5E63}
.pv-toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.pv-toc li{counter-increment:t}
.pv-toc a{display:flex;gap:.6rem;padding:.35rem 0;color:#141414;text-decoration:none;font-family:var(--body);font-weight:400;font-size:.95rem;letter-spacing:0;text-transform:none;border:0;transition:color .2s}
.pv-toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:#AE2537;min-width:1.4rem}
.pv-toc a:hover{color:#AE2537}
@media (max-width:999.98px){.pv-toc{position:static}}
.pv-sec{padding-block:1.75rem;border-top:1px solid #E4E4E7;scroll-margin-top:8rem}
.pv-sec:first-child{border-top:0;padding-top:0}
.pv-sec h2{display:flex;align-items:baseline;gap:.9rem;font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 96;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.01em;margin:0 0 1rem}
.pv-n{font-style:italic;font-size:.75em;color:#AE2537}
.pv-sec p,.pv-sec li{color:#3F3F45;line-height:1.7}
.pv-sec p{margin:0 0 1rem}
.pv-sec ul{margin:0 0 1rem;padding-left:1.2rem}
.pv-sec li{margin:.3rem 0}
.pv-sec li::marker{color:#AE2537}
.pv-sec strong{color:#141414}
.pv-sec a{color:#AE2537}
.pv-keys{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:.75rem}
.pv-keys li{margin:0;padding:1rem 1.1rem;border-radius:16px;background:#FBF4F5;border:1px solid rgba(174,37,55,.15);line-height:1.55}
.pv-keys strong{display:block;color:#AE2537;font-family:var(--display);margin-bottom:.2rem}