/* Debut Design case study pages. Base and nav styles are copied from index.html
   by build_cases.py, so they match the homepage. */

/* Debut Design playground. A light-only brand site: every surface is
   painted explicitly so nothing inherits a system theme. */
:root{
  color-scheme:light;
  --violet:#361BCB;
  --violet-d:#2A14A8;
  --ink:#0E0A2E;
  --ink-2:#3B3B45;
  --paper:#FBF9F4;
  --white:#FFFFFF;
  --lav:#D4C7FF;
  --lav-1:#F8E6FF;
  --pink:#FDCFE9;
  --yellow:#FDEAA3;
  --green:#AFF8B2;
  --coral:#FF7A59;
  --rule:rgba(14,10,46,.12);

  --display:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --body:"Poppins","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,4.5vw,64px);
  --ease:cubic-bezier(.22,.9,.3,1);
  --spring:cubic-bezier(.3,1.6,.5,1);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display); margin:0; font-weight:800; letter-spacing:-.045em; line-height:.9}
p{margin:0}
::selection{background:var(--yellow); color:var(--ink)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── nav: transparent bar, white over dark sections, ink over light ── */
.nav{
  position:fixed; z-index:50; top:0; left:0; right:0;
  display:flex; align-items:center; gap:clamp(18px,3vw,44px);
  padding:clamp(14px,2.4vh,24px) var(--gut);
  color:var(--white); pointer-events:none;
  transition:color .35s, transform .5s var(--ease);
}
.nav > *{pointer-events:auto}
.nav.is-light{color:var(--ink)}
.nav.is-tucked{transform:translateY(-110%)}
.nav-logo{display:block; width:84px; flex-shrink:0}
.nav-logo img{width:100%; height:auto; filter:brightness(0) invert(1); transition:filter .35s, transform .5s var(--spring)}
.nav.is-light .nav-logo img{filter:none}
.nav-logo:hover img{transform:rotate(-6deg) scale(1.06)}
.nav-links{display:flex; align-items:center; gap:clamp(4px,1.4vw,22px); margin:0; padding:0; list-style:none}

/* hover: the word rolls up into a yellow copy while a little shape
   spins in beside it, a different shape for each link */
.nl{
  position:relative; display:inline-flex; align-items:center; gap:9px; padding:10px 4px;
  font:600 13px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
}
.nl .pip{
  width:10px; height:10px; flex-shrink:0; background:var(--yellow);
  transform:scale(0) rotate(-180deg); transition:transform .5s var(--spring);
}
.nl[data-pip="circle"] .pip{border-radius:50%}
.nl[data-pip="tri"] .pip{clip-path:polygon(50% 0,100% 100%,0 100%); background:var(--coral)}
.nl[data-pip="semi"] .pip{width:13px; height:7px; border-radius:13px 13px 0 0; background:var(--lav)}
.nl[data-pip="sq"] .pip{border-radius:3px; background:var(--green)}
.nl[data-pip="star"] .pip{clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); background:var(--pink); width:13px; height:13px}
.nav.is-light .nl .pip{background:var(--violet)}
.nl .roll{display:block; overflow:hidden; height:1em}
.nl .roll span{display:block; transition:transform .5s var(--ease)}
.nl .roll span + span{color:var(--yellow)}
.nav.is-light .nl .roll span + span{color:var(--violet)}
.nl:hover .roll span, .nl:focus-visible .roll span{transform:translateY(-100%)}
.nl:hover .pip, .nl:focus-visible .pip{transform:scale(1) rotate(0)}
.nl.is-here .pip{transform:scale(1) rotate(0)}

.nav-cta{
  margin-left:auto; position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 8px 8px 22px; border-radius:999px; text-decoration:none;
  font:800 14px/1 var(--display); letter-spacing:.08em; text-transform:uppercase;
  background:var(--yellow); color:var(--ink); box-shadow:0 0 0 2px var(--ink);
  transition:transform .45s var(--spring), color .3s;
}
.nav-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--coral);
  border-radius:inherit; transform:translateX(-101%); transition:transform .5s var(--ease);
}
.nav-cta .arw{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--yellow); transition:transform .5s var(--spring);
}
.nav-cta .arw svg{width:15px; height:15px}
.nav-cta:hover{transform:rotate(-3deg) scale(1.04)}
.nav-cta:hover::before{transform:none}
.nav-cta:hover .arw{transform:rotate(-45deg)}
.nl, .nav-cta{white-space:nowrap}
@media (max-width:1080px){ .nl{letter-spacing:.1em; font-size:12px} .nav-links{gap:2px} }
@media (max-width:920px){
  .nav-links{display:none}
  .nav-cta{font-size:12px; padding:6px 6px 6px 16px}
  .nav-cta .arw{width:32px; height:32px}
}

.btn{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font:600 14px/1 var(--body); padding:13px 20px; border-radius:999px;
  background:var(--violet); color:var(--white); border:0;
  transition:transform .35s var(--spring), background .2s;
}
.btn:hover{transform:translateY(-2px) rotate(-2deg); background:var(--ink)}
.btn svg{width:14px; height:14px}


.nav{position:absolute}
.cs-head{background:var(--violet); color:var(--white); padding:clamp(104px,14vh,130px) var(--gut) clamp(34px,5vh,52px); position:relative; overflow:hidden}
.cs-head-in{max-width:1440px; margin-inline:auto; position:relative; z-index:1}
.cs-feel-wrap{margin-top:clamp(22px,3vh,32px)}
.cs-k{display:inline-flex; align-items:center; gap:10px; font:500 12px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--lav-1)}
.cs-k i{width:9px; height:9px; border-radius:50%; background:var(--green); animation:livePulse 2s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 9px rgba(175,248,178,0)} 0%{box-shadow:0 0 0 0 rgba(175,248,178,.6)}}
.cs-head h1{font-size:clamp(46px,6.4vw,104px); margin-top:14px}
.cs-sum{margin-top:14px; max-width:620px; color:var(--lav-1); font-size:clamp(15px,1.2vw,18px)}
.cs-feel{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; justify-content:flex-start}
.cs-feel li{font:600 13px/1 var(--body); padding:10px 15px; border-radius:999px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.22)}
.cs-feel li:first-child{background:var(--yellow); color:var(--ink); border-color:var(--yellow)}
.cs-feel-k{font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lav); margin-bottom:12px}
.cs-shape{position:absolute; pointer-events:none}

/* the live preview takes almost the whole screen */
.cs-live{padding:22px clamp(16px,2.6vw,40px) clamp(36px,5vh,56px); background:#F4F0FD}
.cs-bar{max-width:1440px; margin:0 auto 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.cs-bar p{font:500 13px/1.4 var(--body); color:var(--ink-2)}
.cs-tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cs-seg{display:inline-flex; padding:4px; border-radius:999px; background:var(--white); border:1.5px solid var(--ink)}
.cs-seg button{display:inline-flex; align-items:center; gap:8px; border:0; background:none; font:600 13px/1 var(--body); color:var(--ink); padding:10px 16px; border-radius:999px; cursor:pointer; transition:background .25s, color .25s}
.cs-seg button svg{width:16px; height:16px}
.cs-seg button[aria-pressed="true"]{background:var(--ink); color:var(--white)}
.cs-seg button:not([aria-pressed="true"]):hover{background:var(--lav-1)}
.cs-go{background:var(--yellow); color:var(--ink); font-weight:700; box-shadow:0 0 0 1.5px var(--ink)}
.cs-go:hover{background:var(--ink); color:var(--white)}
.cs-stage{position:relative; transition:height .5s var(--ease)}
.cs-win{position:absolute; left:50%; top:0; translate:-50% 0; border:0; border-radius:16px; background:var(--white); box-shadow:0 1px 2px rgba(48,30,120,.06), 0 14px 34px -10px rgba(48,30,120,.16), 0 44px 90px -36px rgba(48,30,120,.26); overflow:hidden; transition:width .5s var(--ease), height .5s var(--ease), border-radius .5s var(--ease)}
.cs-chrome{height:40px; display:flex; align-items:center; gap:7px; padding:0 14px; border-bottom:1px solid rgba(48,30,120,.08); background:#EBE4FB}
.cs-chrome i{width:11px; height:11px; border-radius:50%; background:var(--coral)}
.cs-chrome i:nth-child(2){background:var(--yellow)} .cs-chrome i:nth-child(3){background:var(--green)}
.cs-url{margin-left:12px; flex:1; max-width:520px; font:500 12px/1 var(--body); color:var(--ink-2); background:rgba(255,255,255,.75); border:0; border-radius:999px; padding:7px 14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.cs-view{position:relative; overflow:hidden; background:var(--white)}
.cs-view iframe{position:absolute; left:0; top:0; border:0; transform-origin:0 0; background:var(--white)}
.cs-shot{position:absolute; inset:0; overflow-y:auto; scrollbar-width:thin; background:var(--white)}
.cs-shot img{display:block; width:100%; height:auto}
.cs-load{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:20px; font:600 14px/1.5 var(--body); color:var(--ink-2); background:var(--paper); transition:opacity .4s}
.cs-load.gone{opacity:0; pointer-events:none}
.cs-load .btn{margin-top:12px}
.cs-win.phone{border-radius:44px; border:10px solid var(--ink)}
.cs-win.phone .cs-chrome{display:none}
.cs-win.phone::before{content:""; position:absolute; z-index:2; left:50%; top:8px; width:96px; height:24px; margin-left:-48px; border-radius:20px; background:var(--ink)}

/* what the website is */
.cs-about{max-width:1240px; margin-inline:auto; padding:clamp(80px,12vh,130px) var(--gut) clamp(60px,9vh,100px)}
.cs-about-top{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,80px); margin-bottom:clamp(40px,6vh,64px)}
.cs-about h2{font-size:clamp(40px,5vw,72px)}
.cs-brief{font-size:clamp(16px,1.3vw,19px); color:var(--ink-2)}
.cs-meta{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 24px; margin:26px 0 0; padding:0}
.cs-meta dt{font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--violet)}
.cs-meta dd{margin:6px 0 0; font:600 15px/1.35 var(--body)}
.cs-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cs-card{border:1.5px solid var(--ink); border-radius:28px; padding:clamp(22px,2.4vw,32px); background:var(--white)}
.cs-card:nth-child(2){background:var(--lav-1)}
.cs-card:nth-child(3){background:var(--yellow)}
.cs-card h3{font-size:clamp(22px,2vw,28px); margin-bottom:6px}
.cs-card > p{font-size:13px; color:var(--ink-2); margin-bottom:16px}
.cs-list{margin:0; padding:0; list-style:none; display:grid; gap:10px; counter-reset:n}
.cs-list li{display:flex; gap:10px; font-size:15px; line-height:1.45; counter-increment:n}
.cs-list.num li::before{content:counter(n,decimal-leading-zero); flex-shrink:0; font:600 12px/1.8 var(--body); color:var(--violet)}
.cs-list.dot li::before{content:""; width:9px; height:9px; margin-top:7px; flex-shrink:0; border-radius:3px; background:var(--violet); rotate:45deg}
.cs-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.cs-tags li{display:inline-flex; align-items:center; gap:8px; font:500 13px/1 var(--body); padding:10px 14px; border-radius:999px; background:var(--white); border:1.5px solid var(--ink)}
.cs-tags li::before{content:"✓"; width:16px; height:16px; border-radius:50%; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font:800 9px/1 var(--display)}
.cs-card .btn{margin-top:20px; background:var(--ink); color:var(--white)}
.cs-card .btn:hover{background:var(--violet)}

/* previous / next case study */
.cs-more{max-width:1240px; margin-inline:auto; padding:0 var(--gut) clamp(80px,12vh,120px); display:grid; grid-template-columns:1fr 1fr; gap:18px}
.cs-more a{position:relative; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; padding:16px; border-radius:28px; background:var(--white); text-decoration:none; box-shadow:0 1px 2px rgba(20,20,40,.05), 0 18px 40px -22px rgba(20,20,40,.32); transition:transform .45s var(--spring), background .25s, box-shadow .3s}
.cs-more a:hover{transform:translateY(-4px); box-shadow:0 1px 2px rgba(20,20,40,.05), 0 26px 50px -22px rgba(20,20,40,.4)}
.cs-more img{width:96px; height:96px; border-radius:20px; object-fit:cover}
.cs-more small{display:block; font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--violet); margin-bottom:8px}
.cs-more b{font:800 clamp(22px,2.2vw,30px)/1.05 var(--display); letter-spacing:-.03em}
.cs-more .nx{grid-template-columns:1fr auto; text-align:right}
.cs-more .nx img{order:2}

.cs-end{background:var(--violet); color:var(--white); text-align:center; padding:clamp(80px,12vh,120px) var(--gut)}
.cs-end h2{font-size:clamp(44px,7vw,100px)}
.cs-end h2 em{font-style:normal; color:var(--yellow)}
.cs-end p{margin:18px auto 0; max-width:440px; color:var(--lav)}
.cs-end .acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.cs-end .btn-y{background:var(--yellow); color:var(--ink); font-weight:700; padding:17px 26px; font-size:15px}
.cs-end .btn-y:hover{background:var(--white)}
.cs-end .btn-o{background:transparent; color:var(--white); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); padding:17px 26px; font-size:15px}
.cs-end .btn-o:hover{background:rgba(255,255,255,.1)}
.cs-foot{background:var(--violet); color:var(--lav); padding:22px var(--gut); font-size:13px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14)}
.cs-foot a{text-underline-offset:4px}
:focus-visible{outline:3px solid var(--coral); outline-offset:3px}
@media (max-width:960px){
  .cs-head-in, .cs-about-top{grid-template-columns:1fr}
  .cs-cards, .cs-more{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ *, *::before, *::after{animation:none !important; transition-duration:.01ms !important} }

/* ── branding case studies: the brand itself fills the page instead of a live site ── */
.br{--bg:#F4F0FD; --bink:var(--ink); --acc:var(--violet); --soft:#E9E2FB; background:var(--bg); color:var(--bink); padding:clamp(22px,3vw,40px) clamp(16px,2.6vw,40px) clamp(70px,10vh,120px)}
.br-hero{position:relative; margin:0 auto; max-width:1440px; border-radius:28px; overflow:hidden; background:var(--soft); box-shadow:0 1px 2px rgba(20,20,40,.06), 0 30px 70px -40px rgba(20,20,40,.35)}
.br-hero img{display:block; width:100%; height:min(82vh,860px); object-fit:cover}
.br-hero.contain img{object-fit:contain; padding:clamp(20px,4vw,60px)}
.br-hero figcaption{position:absolute; left:18px; bottom:18px; font:600 12px/1 var(--body); letter-spacing:.06em; background:rgba(255,255,255,.85); backdrop-filter:blur(8px); padding:10px 14px; border-radius:999px; color:var(--ink)}
.br-ch{max-width:1240px; margin:clamp(70px,11vh,130px) auto 0; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(24px,4vw,64px); align-items:start}
.br-ch.stack{grid-template-columns:1fr}
.br-txt{position:sticky; top:110px}
.br-ch.stack .br-txt{position:static; max-width:760px}
.br-n{display:inline-flex; align-items:center; gap:10px; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--bink); opacity:.7; margin-bottom:16px}
.br-n::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--acc)}
.br-txt h3{font-size:clamp(30px,3.4vw,50px); line-height:1.02; margin-bottom:18px; text-wrap:balance}
.br-txt p{font-size:clamp(15px,1.15vw,17px); line-height:1.65; opacity:.85}
.br-quote{margin:26px 0 0; padding:26px 28px; border-radius:22px; background:var(--bink); color:var(--bg); font:700 clamp(20px,1.9vw,27px)/1.25 var(--display); letter-spacing:-.02em}
.br-quote cite{display:block; margin-top:14px; font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; font-style:normal; opacity:.7}
.br-pairs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; list-style:none}
.br-pairs li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; border-radius:18px; background:rgba(255,255,255,.7)}
.br-pairs b{font:800 clamp(18px,1.6vw,22px)/1 var(--display); letter-spacing:-.02em}
.br-pairs s{font-size:14px; opacity:.55}
.br-pairs-k{display:flex; justify-content:space-between; font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin:0 4px 10px}
.br-media{display:grid; gap:clamp(10px,1.4vw,18px)}
.br-media.two{grid-template-columns:1fr 1fr}
.br-media.grid3{grid-template-columns:repeat(3,1fr)}
.br-media.grid3 figure.wide{grid-column:span 3}
.br-media.grid3 figure.half{grid-column:span 3}
@media (min-width:700px){ .br-media.grid3 figure.half{grid-column:span 3} }
.br-media.feature{grid-template-columns:1fr 1fr}
.br-media.feature figure:first-child{grid-column:1/-1}
.br-media.logo{grid-template-columns:1fr 1fr}
.br-media.logo figure:first-child{grid-column:1/-1}
.br-media.logo figure:first-child img{padding:clamp(30px,6vw,90px)}
.br-media figure{margin:0; border-radius:20px; overflow:hidden; background:rgba(255,255,255,.75); position:relative}
.br-media img{display:block; width:100%; height:auto; transition:transform .8s var(--spring)}
.br-media figure:hover img{transform:scale(1.03)}
.br-media.plain figure{background:#fff}
.br-media.plain img{padding:clamp(10px,2vw,28px)}
.br-media.logo img, .br-media.grid3 figure:not(.wide):not(.half) img{background:#fff; padding:clamp(8px,1.2vw,16px); object-fit:contain}
.br-media figcaption{padding:12px 16px 14px; font-size:13px; line-height:1.4; opacity:.8; background:rgba(255,255,255,.75)}
.br-pal{max-width:1240px; margin:clamp(70px,11vh,130px) auto 0}
.br-pal h3, .br-cast h3, .br-type h3{font-size:clamp(30px,3.4vw,50px); margin-bottom:22px}
.br-sw{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(10px,1.2vw,16px); margin:0; padding:0; list-style:none}
.br-sw li{border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 14px 30px -24px rgba(0,0,0,.4); transition:transform .5s var(--spring)}
.br-sw li:hover{transform:translateY(-6px)}
.br-sw i{display:block; height:clamp(110px,14vw,170px); background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.br-sw div{padding:14px 16px 16px}
.br-sw b{display:block; font:800 17px/1.1 var(--display); letter-spacing:-.02em}
.br-sw code{display:block; margin-top:4px; font:600 12px/1 ui-monospace,Menlo,monospace; opacity:.6}
.br-sw small{display:block; margin-top:8px; font-size:12.5px; line-height:1.4; opacity:.75}
.br-cast, .br-type{max-width:1240px; margin:clamp(70px,11vh,130px) auto 0}
.br-cast p{max-width:560px; opacity:.85; margin-top:-8px; margin-bottom:22px}
.br-cast ul{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1vw,14px); margin:0; padding:0; list-style:none}
.br-cast li{background:#fff; border-radius:22px; padding:8%; transition:transform .5s var(--spring)}
.br-cast li:nth-child(odd){rotate:-2deg} .br-cast li:nth-child(even){rotate:2deg}
.br-cast li:hover{transform:translateY(-8px) scale(1.04); rotate:0deg}
.br-cast img{display:block; width:100%; height:auto}
.br-type-box{background:#fff; border-radius:28px; padding:clamp(26px,4vw,56px); display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(20px,4vw,60px); align-items:end}
.br-type-big{font-size:clamp(70px,11vw,170px); line-height:.85; color:var(--acc)}
.br-type-sample{font-size:clamp(22px,2.4vw,34px); line-height:1.15; margin-top:22px}
.br-type ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.br-type li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:10px; border-bottom:1px solid rgba(0,0,0,.08); font-size:clamp(20px,2vw,28px)}
.br-type li small{font:600 12px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; opacity:.55}
.br-type-note{margin-top:16px; font-size:14px; opacity:.75}
.br [data-rv]{opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-out,ease), transform .9s var(--spring)}
.br [data-rv].in{opacity:1; transform:none}
@media (max-width:900px){
  .br-ch{grid-template-columns:1fr} .br-txt{position:static}
  .br-type-box{grid-template-columns:1fr}
  .br-cast ul{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .br-media.two, .br-media.feature, .br-media.logo, .br-pairs{grid-template-columns:1fr}
  .br-media.grid3{grid-template-columns:1fr 1fr} .br-media.grid3 figure.wide, .br-media.grid3 figure.half{grid-column:1/-1}
  .br-hero img{height:auto; max-height:70vh}
}
@media (prefers-reduced-motion:reduce){ .br [data-rv]{opacity:1; transform:none} }

/* wordmark hero */
.br-mark{display:grid; place-items:center; min-height:0; padding:clamp(10px,2vw,30px) clamp(20px,6vw,90px) clamp(80px,9vw,120px); isolation:isolate}
.br-hero.br-mark{box-shadow:none; overflow:visible}
.br-hero.br-mark .br-word{filter:drop-shadow(0 3px 0 rgba(13,48,41,.18)) drop-shadow(0 18px 30px rgba(13,48,41,.14))}
.br-hero.br-mark img{object-fit:initial; padding:0; max-height:none}
.br-hero.br-mark .br-word{display:block; width:min(100%,980px); height:auto; animation:br-wobble 7s ease-in-out infinite}
@keyframes br-wobble{0%,100%{transform:rotate(-1.2deg) scale(1)}50%{transform:rotate(1.2deg) scale(1.02)}}
.br-hero.br-mark .br-float{position:absolute; width:clamp(90px,11vw,170px); height:auto; animation:br-bob 6s ease-in-out infinite; filter:drop-shadow(0 14px 16px rgba(13,48,41,.2))}
.br-float.f0{left:6%; bottom:9%; rotate:-10deg}
.br-float.f1{right:7%; top:10%; rotate:12deg; animation-delay:-2s}
.br-hero.br-mark .br-float.f2{right:12%; bottom:8%; rotate:-4deg; animation-delay:-4s; width:clamp(80px,9vw,140px)}
@keyframes br-bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
.br-mark figcaption{left:50%; translate:-50% 0; white-space:nowrap; background:rgba(255,255,255,.7)}
@media (max-width:700px){ .br-mark figcaption{white-space:normal; width:max-content; max-width:88%; text-align:center} }
@media (max-width:700px){ .br-hero.br-mark .br-float{width:64px} .br-hero.br-mark .br-float.f2{display:none} .br-hero.br-mark .br-float.f0{bottom:auto; top:-4%; left:3%} .br-hero.br-mark .br-float.f1{top:-6%; right:3%} .br-mark{padding-top:44px} }
/* about sits inside the brand section on brand pages */
.br .cs-about{padding-inline:0; padding-top:clamp(70px,11vh,120px); padding-bottom:0}
.br .cs-card{border-color:var(--bink)}
.br .cs-card:nth-child(2){background:var(--soft)}
/* full-width positioning quote */
.br-ch.stack{gap:clamp(18px,2.4vw,30px)}
.br-quote.wide{margin:0; padding:clamp(34px,5vw,70px) clamp(26px,5vw,72px); border-radius:28px; font-size:clamp(30px,4.4vw,68px); line-height:1.04; letter-spacing:-.03em; position:relative; overflow:hidden}
.br-quote.wide span{display:block; max-width:34ch; color:var(--acc); position:relative; z-index:1}
.br-quote.wide::after{content:"“"; position:absolute; right:clamp(10px,3vw,50px); top:-.2em; font-size:clamp(200px,24vw,380px); line-height:1; color:var(--acc); opacity:.12}
/* personality: we are / we aren't */
.br-pers{display:grid; gap:14px}
.br-pers-k{font:600 12px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; opacity:.7; margin-top:8px}
.br-are, .br-not{display:flex; flex-wrap:wrap; gap:clamp(8px,1vw,14px); margin:0; padding:0; list-style:none}
.br-are li, .br-not li{position:relative; cursor:default; font:800 clamp(24px,3vw,44px)/1 var(--display); letter-spacing:-.03em; padding:.42em .7em .48em; border-radius:999px; transition:transform .45s var(--spring), background .3s, color .3s, box-shadow .3s}
.br-are li{background:var(--bink); color:var(--acc)}
.br-are li:hover, .br-are li:focus-visible{background:var(--acc); color:var(--bink); transform:translateY(-6px) rotate(-3deg); box-shadow:0 18px 30px -16px rgba(13,48,41,.6)}
.br-are li:nth-child(even):hover, .br-are li:nth-child(even):focus-visible{transform:translateY(-6px) rotate(3deg)}
.br-not li{color:var(--bink); opacity:.45; box-shadow:inset 0 0 0 2px rgba(13,48,41,.25)}
.br-not li::after{content:""; position:absolute; left:.6em; right:.6em; top:52%; height:.09em; border-radius:9px; background:#EF4730; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out,ease)}
.br-not li:hover, .br-not li:focus-visible{opacity:1; transform:scale(.96)}
.br-not li:hover::after, .br-not li:focus-visible::after{transform:scaleX(1)}
/* design principles */
.br-rules{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.2vw,16px); margin:0; padding:0; list-style:none; counter-reset:r}
.br-rules li{counter-increment:r; background:rgba(255,255,255,.65); border-radius:24px; padding:clamp(20px,2vw,28px); display:grid; align-content:start; gap:10px; transition:transform .5s var(--spring), background .3s}
.br-rules li::before{content:counter(r,decimal-leading-zero); font:800 clamp(34px,3.4vw,52px)/1 var(--display); color:var(--acc); -webkit-text-stroke:1.5px var(--bink); letter-spacing:-.04em}
.br-rules li:hover{transform:translateY(-8px); background:#fff}
.br-rules b{font:800 clamp(19px,1.6vw,23px)/1.1 var(--display); letter-spacing:-.02em}
.br-rules span{font-size:14px; line-height:1.5; opacity:.8}
@media (max-width:1000px){ .br-rules{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .br-rules{grid-template-columns:1fr} }
/* illustrations sit straight on the brand colour */
.br-cast li{background:transparent; padding:4%}
.br-cast img{filter:drop-shadow(0 16px 18px rgba(13,48,41,.18))}