/* Rutuja Maind — freelance design pitch. Shared styles. */
:root{
  --ink:#141821; --ink-2:#3C4354; --ink-3:#5E6676;
  --paper:#FFFFFF; --field:#EFF1F5; --rule:#D8DCE4;
  --c:#0094C6; --m:#E2256B; --y:#FFC400; --link:#C81B5C;
  /* One typeface: Archivo throughout, headings carried by weight alone.
     Martel stands in where the text is Devanagari. */
  --display:'Archivo','Martel',system-ui,sans-serif;
  --body:'Archivo','Martel',system-ui,sans-serif;
  --mono:'Archivo','Martel',system-ui,sans-serif;
  --gut:22px; --max:1180px;
}
/* dark mode: follows the browser unless the visitor picks a mode */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#ECEFF4; --ink-2:#B6BDCB; --ink-3:#8A93A4;
    --paper:#11141B; --field:#171B24; --rule:#2A313E;
    --c:#35B5E0; --m:#FF4D86; --y:#FFC94D; --link:#FF4D86;
  }
}
:root[data-theme="dark"]{
  --ink:#ECEFF4; --ink-2:#B6BDCB; --ink-3:#8A93A4;
  --paper:#11141B; --field:#171B24; --rule:#2A313E;
  --c:#35B5E0; --m:#FF4D86; --y:#FFC94D; --link:#FF4D86;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.strip{display:flex; height:9px; width:100%}
.strip i{flex:1}
.strip i:nth-child(1){background:var(--c)}
.strip i:nth-child(2){background:var(--m)}
.strip i:nth-child(3){background:var(--y)}
.strip i:nth-child(4){background:var(--ink)}
.spec{font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}

/* header + nav */
header.site{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
.bar{display:flex; align-items:center; gap:14px; padding-block:12px}
.wordmark{font-family:var(--display); font-weight:800; font-size:1.125rem; letter-spacing:-.02em; text-decoration:none; white-space:nowrap}
.wordmark .dot{display:inline-block; width:9px; height:9px; background:var(--m); margin-left:5px; vertical-align:middle}
nav.main{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
nav.main a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; padding:9px 12px; color:var(--ink-2); border-bottom:2px solid transparent;
}
nav.main a:hover{color:var(--ink); border-bottom-color:var(--rule)}
nav.main a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--m)}
.wa{display:inline-flex; align-items:center; gap:.5em; background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 16px; text-decoration:none; white-space:nowrap}
.wa:hover{background:var(--m)}
a:focus-visible,button:focus-visible{outline:3px solid var(--c); outline-offset:3px}

/* hero + sections */
.hero{padding:56px 0 42px}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,6vw,4.5rem);
  line-height:1.03; letter-spacing:-.022em; margin:0}
.hero h1 .tint{color:var(--ink-3)}
.hero .sub{font-size:clamp(1.0625rem,1.6vw,1.28rem); color:var(--ink-2); max-width:56ch; margin:24px 0 0}
.docket{display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--rule); margin-top:32px; max-width:660px}
@media(min-width:720px){.docket{grid-template-columns:repeat(4,1fr)}}
.docket div{padding:13px 15px; border-right:1px solid var(--rule)}
.docket div:last-child{border-right:0}
@media(max-width:719px){.docket div:nth-child(2n){border-right:0}.docket div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
.docket b{display:block; font-family:var(--display); font-weight:700; font-size:1.0625rem; letter-spacing:-.018em}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  padding:15px 24px; text-decoration:none; border:1px solid var(--ink); background:var(--ink); color:#fff;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.btn:hover{background:var(--m); border-color:var(--m); transform:translateY(-1px)}
.btn.alt{background:transparent; color:var(--ink)}
.btn.alt:hover{background:var(--ink); color:#fff}
section{padding:48px 0}
section.tint{background:var(--field)}
.head{margin-bottom:30px}
.head .spec{display:block}
.head h1,.head h2{max-width:34ch}   /* headings run as wide as they need */
.head p{max-width:66ch}    /* body copy stays at a readable measure */
.head h1,.head h2{font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.05; margin:.35em 0 0}
.head p{color:var(--ink-2); margin:.8em 0 0}

/* category cards (home) */
.cats{display:grid; gap:18px}
@media(min-width:620px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.cats{grid-template-columns:repeat(4,1fr)}}
.cat{display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--rule); background:#fff}
.cat .pic{aspect-ratio:4/3; background:#F6F7FA; overflow:hidden; padding:10px}
.cat .pic img{width:100%; height:100%; object-fit:contain; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cat:hover .pic img{transform:scale(1.04)}
.cat .meta{padding:16px 18px 18px; border-top:1px solid var(--rule)}
.cat h3{font-family:var(--display); font-weight:700; font-size:1.2rem; margin:6px 0 4px; letter-spacing:-.015em}
.cat p{margin:0; color:var(--ink-2); font-size:.95rem}
.cat .go{display:inline-block; margin-top:12px; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--link)}

/* tabs */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; border-bottom:1px solid var(--rule); padding-bottom:14px}
.tabs button{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; border:1px solid var(--rule); color:var(--ink-2);
  padding:9px 14px; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease}
.tabs button:hover{border-color:var(--ink-3); color:var(--ink)}
.tabs button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.tabs button .n{opacity:.6; margin-left:.45em}

/* gallery */
.gal{display:grid; gap:18px; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gal{grid-template-columns:repeat(6,1fr)}}
figure.item{margin:0; background:#fff; border:1px solid var(--rule); display:flex; flex-direction:column; grid-column:span 2}
@media(min-width:760px){
  figure.item.wide{grid-column:span 4}
  figure.item.tall{grid-column:span 3}
  figure.item.wide .frame{aspect-ratio:2.1/1}
  figure.item.tall .frame{aspect-ratio:16/10}
}
.item .frame{background:#F6F7FA; overflow:hidden; cursor:zoom-in; border:0; padding:10px; width:100%; display:block; aspect-ratio:4/3; position:relative}
.item.doc .frame{cursor:pointer}
.pagecount{
  position:absolute; right:10px; bottom:10px; background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 9px; pointer-events:none;
}
.item.vid .frame{cursor:pointer}
.item.vid .frame::after{
  content:'▶'; position:absolute; inset:0; margin:auto; width:58px; height:58px;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  background:rgba(20,24,33,.82); color:#fff; border-radius:50%; padding-left:4px;
  transition:background .18s ease, transform .18s ease;
}
.item.vid .frame:hover::after{background:var(--m); transform:scale(1.07)}
.lb iframe{width:min(1100px,92vw); height:min(620px,72vh); border:0; background:#000}
.lb iframe[hidden]{display:none}
.item.doc .frame::after{
  content:'Read'; position:absolute; left:10px; bottom:10px; background:var(--link); color:#fff;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; padding:5px 9px;
}
.item .frame img{width:100%; height:100%; object-fit:contain; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.item .frame:hover img{transform:scale(1.035)}
.item figcaption{padding:13px 15px 15px; border-top:1px solid var(--rule)}
.item h3{font-family:var(--display); font-weight:700; font-size:1rem; margin:0 0 4px; letter-spacing:-.012em}
.item .spec{display:block}
.item .yt{display:inline-block; margin-top:9px; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--link); text-decoration:none; font-weight:500}
.item .yt:hover{text-decoration:underline}
.setlabel{grid-column:1/-1; margin:14px 0 -4px}
.setlabel b{font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:-.015em}
.setlabel span{display:block}
.catlabel{grid-column:1/-1; margin:30px 0 2px; padding-top:20px; border-top:2px solid var(--ink)}
.catlabel.first{margin-top:0; padding-top:0; border-top:0}
.catlabel b{display:block; font-family:var(--display); font-weight:800; font-size:1.45rem; letter-spacing:-.025em}
.catlabel span{display:block}

/* case studies */
.case{display:grid; gap:10px 34px; padding:30px 0; border-top:1px solid var(--rule)}
.case:first-of-type{border-top:0; padding-top:0}
@media(min-width:860px){.case{grid-template-columns:minmax(0,26ch) minmax(0,1fr)}}
.casemeta h3{font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.025em; margin:8px 0 0; line-height:1.1}
.casemeta .metric{
  display:inline-block; margin:12px 0 0; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.07em; text-transform:uppercase; background:var(--ink); color:#fff; padding:6px 10px}
.casebody > p{margin:0 0 16px; color:var(--ink-2); max-width:62ch}
.caseshots{display:grid; gap:14px}
@media(min-width:620px){.caseshots{grid-template-columns:repeat(2,1fr)}}
.caseshots .frame{
  background:#F6F7FA; border:1px solid var(--rule); padding:8px; cursor:zoom-in; width:100%;
  display:block; aspect-ratio:16/10; overflow:hidden}
.caseshots .frame img{width:100%; height:100%; object-fit:contain}
.morelink{margin:28px 0 0}
.morelink a{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; color:var(--link); border-bottom:1px solid currentColor; padding-bottom:2px}
.morelink a:hover{color:var(--ink)}

/* live & shipped */
.shipped{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media(min-width:720px){.shipped{grid-template-columns:repeat(3,1fr)}}
.shipped a{background:#fff; padding:22px; text-decoration:none; display:block; transition:background .15s ease}
.shipped a:hover{background:var(--field)}
.shipped b{display:block; font-family:var(--display); font-weight:700; font-size:1.15rem; margin:8px 0 4px; letter-spacing:-.015em}
.shipped em{font-style:normal; color:var(--ink-2); font-size:.93rem}
.shipped a::after{content:' →'; color:var(--m); font-weight:700}

/* editorial rows */
.presence{border-top:1px solid var(--rule); display:grid}
.pr{display:grid; gap:6px 26px; padding:20px 0; border-bottom:1px solid var(--rule); align-items:start}
@media(min-width:760px){.pr{grid-template-columns:minmax(0,22ch) minmax(0,1fr)}}
/* two columns on a wide screen, so the page stays short */
@media(min-width:900px){
  .presence{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px}
  .pr{grid-template-columns:1fr; align-content:start}
}
.pr h3{font-family:var(--display); font-weight:700; font-size:1.18rem; margin:0; letter-spacing:-.015em}
.pr p{margin:0; color:var(--ink-2)}
.pr .tag{display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; padding:3px 8px; margin-bottom:7px; color:#fff; background:var(--ink)}
.pr:nth-child(1) .tag{background:var(--c)}
.pr:nth-child(2) .tag{background:var(--m)}
.pr:nth-child(3) .tag{background:var(--y); color:var(--ink)}
.pr:nth-child(5) .tag{background:var(--c)}

/* services + events */
.svc{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media(min-width:720px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc > div{background:#fff; padding:24px}
.svc h3{font-family:var(--display); font-weight:700; font-size:1.0625rem; margin:10px 0 6px; letter-spacing:-.012em}
.svc p{margin:0; color:var(--ink-2); font-size:.97rem}
.events{border:2px solid var(--ink); padding:26px; margin-top:28px; background:#fff;
  position:relative; overflow:hidden}
.events::after{content:''; position:absolute; right:-30px; top:-30px; width:210px; height:210px;
  background:repeating-linear-gradient(45deg,var(--rule) 0 1px,transparent 1px 12px);
  opacity:.55; pointer-events:none; z-index:0}
.events > *{position:relative; z-index:1}
.events.strat{border-color:var(--c)}
.events h3{font-family:var(--display); font-weight:800; font-size:1.3rem; margin:10px 0 10px; letter-spacing:-.02em}
.events ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.events li{font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--rule); padding:7px 11px}

/* cta + footer */
.cta{background:var(--ink); color:#fff; padding:52px 0; position:relative; overflow:hidden}
.cta::before{content:''; position:absolute; inset:0 0 0 auto; width:12px;
  background:linear-gradient(180deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,#fff 75% 100%)}
.cta .wrap{position:relative; z-index:1}
.cta h2{font-family:var(--display); font-weight:800; font-size:clamp(1.85rem,4.1vw,3rem);
  letter-spacing:-.03em; margin:0; line-height:1.05; max-width:26ch}
.cta p{color:#AEB5C4; max-width:52ch; margin:18px 0 0}
.cta .btn{background:#fff; color:var(--ink); border-color:#fff}
.cta .btn:hover{background:var(--y); border-color:var(--y); color:var(--ink)}
.cta .btn.alt{background:transparent; color:#fff; border-color:#4A5265}
.cta .btn.alt:hover{background:#fff; color:var(--ink)}
footer.site{padding:26px 0 44px; font-family:var(--mono); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.foot{display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between}
footer.site a{color:var(--ink-2); text-decoration:none}
footer.site a:hover{color:var(--m)}

/* lightbox */
.lb{position:fixed; inset:0; background:rgba(20,24,33,.95); z-index:90; display:none; align-items:center; justify-content:center; padding:28px}
.lb[open-state="1"]{display:flex}
.lb img{max-width:min(1200px,94vw); max-height:82vh; object-fit:contain; background:#fff}
.lb .cap{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#C9CFDA;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; padding:0 20px}
.lb .x{position:absolute; top:16px; right:18px; background:transparent; border:1px solid #5A6174; color:#fff;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; padding:9px 14px; cursor:pointer}
.lb .x:hover{background:#fff; color:var(--ink)}
.lb .nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
  border:1px solid #5A6174; color:#fff; font-size:1.5rem; line-height:1; width:52px; height:68px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lb .nav:hover:not(:disabled){background:#fff; color:var(--ink)}
.lb .nav:disabled{opacity:.25; cursor:default}
.lb .nav[hidden]{display:none}
#lbprev{left:14px}
#lbnext{right:14px}
@media(max-width:620px){
  .lb .nav{width:44px; height:56px; font-size:1.25rem}
  #lbprev{left:4px} #lbnext{right:4px}
  .lb img{max-width:86vw}
}

.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1; transform:none; transition:none}
  .item .frame img,.cat .pic img{transition:none}
}
@media(max-width:620px){
  .bar{flex-wrap:wrap}
  nav.main{order:3; width:100%; margin-left:0; border-top:1px solid var(--rule); padding-top:6px}
  nav.main a{padding:8px 10px}
  .wa{margin-left:auto}
  .actions .btn{width:100%}
  section{padding:46px 0}
  .hero{padding:44px 0 36px}
}

/* ---- dark-mode surfaces: the design is built on white cards, so repaint them ---- */
:root[data-theme="dark"] header.site{background:rgba(17,20,27,.94)}
:root[data-theme="dark"] .cat,
:root[data-theme="dark"] figure.item,
:root[data-theme="dark"] .svc > div,
:root[data-theme="dark"] .events,
:root[data-theme="dark"] .shipped a,
:root[data-theme="dark"] section.tint figure.item,
:root[data-theme="dark"] section.tint .svc > div,
:root[data-theme="dark"] section.tint .events{background:#161A22}
:root[data-theme="dark"] .item .frame,
:root[data-theme="dark"] .cat .pic,
:root[data-theme="dark"] .caseshots .frame{background:#0D1015}
:root[data-theme="dark"] .cta{background:#080A0E}
:root[data-theme="dark"] .cta .btn{background:var(--ink); color:#11141B; border-color:var(--ink)}
:root[data-theme="dark"] .btn{background:var(--ink); color:#11141B; border-color:var(--ink)}
:root[data-theme="dark"] .btn.alt{background:transparent; color:var(--ink)}
:root[data-theme="dark"] .btn.alt:hover{background:var(--ink); color:#11141B}
:root[data-theme="dark"] .wa{background:var(--ink); color:#11141B}
:root[data-theme="dark"] .wa:hover{background:var(--m); color:#fff}
:root[data-theme="dark"] .tabs button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#11141B}
:root[data-theme="dark"] .pr .tag,
:root[data-theme="dark"] .casemeta .metric,
:root[data-theme="dark"] .pagecount{background:var(--ink); color:#11141B}
:root[data-theme="dark"] .strip i:nth-child(4){background:var(--ink)}
:root[data-theme="dark"] .catlabel{border-top-color:var(--ink)}

/* ---- preference strip above the navbar ---- */
.topbar{background:var(--field); border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex; justify-content:flex-end; align-items:center; gap:12px; padding-block:5px}
.homelink{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; white-space:nowrap;
}
.homelink:hover{color:var(--ink)}
.prefs{display:flex; align-items:center; gap:4px}
.prefs button{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em;
  background:transparent; border:1px solid transparent; color:var(--ink-3);
  padding:5px 8px; cursor:pointer; line-height:1.1;
}
.prefs button:hover{color:var(--ink)}
.prefs button[aria-pressed="true"]{color:var(--ink); border-color:var(--rule); background:var(--paper)}
.prefs [data-theme-btn]{border-color:var(--rule)}
.prefs .sep{width:1px; height:16px; background:var(--rule); margin:0 6px}
:root[data-theme="dark"] .topbar{background:#0D1015}

/* who the work was for */
.clients{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:baseline}
.clients li{font-family:var(--display); font-weight:700; letter-spacing:-.015em; color:var(--ink-2);
  font-size:clamp(1.02rem,1.9vw,1.3rem); padding:7px 0}
.clients li:not(:last-child)::after{content:'·'; color:var(--m); margin:0 .6em; font-weight:700}

/* budget + free look */
.offer{display:grid; gap:30px}
@media(min-width:880px){.offer{grid-template-columns:1fr 1fr; gap:52px}}
.offer h2{font-family:var(--display); font-weight:800; letter-spacing:-.028em; line-height:1.1;
  font-size:clamp(1.42rem,2.5vw,1.95rem); margin:.35em 0 .55em}
.offer p{margin:0; color:var(--ink-2)}
.offer > div:last-child{border-left:3px solid var(--m); padding-left:24px}
@media(max-width:879px){.offer > div:last-child{border-left:0; border-top:3px solid var(--m); padding:22px 0 0}}
.offer .actions{margin-top:20px}

/* UI chrome sits in Archivo: a touch more weight at small uppercase sizes */
nav.main a,.wa,.btn,.tabs button,.pr .tag,.events li,footer.site,.cat .go,.item .yt,
.topbar,.prefs button,.shipped a,.medium{font-weight:600}

/* ── strategy band: full-bleed separator between the work and the money ── */
.band{position:relative; overflow:hidden; padding:64px 0 58px; background:#101826; color:#fff}
.band::before{content:''; position:absolute; inset:0 0 0 auto; width:12px; z-index:2;
  background:linear-gradient(180deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,#fff 75% 100%)}
.band-art{position:absolute; top:0; right:0; bottom:0; width:min(54%,660px); height:100%;
  pointer-events:none; opacity:.9}
.band .wrap{position:relative; z-index:1}
.band .spec{display:block; color:#8EA0B8}
.band h2{font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(1.9rem,4.2vw,3rem); margin:.3em 0 0; max-width:21ch}
.band .lead{color:#B8C2D2; max-width:60ch; margin:18px 0 26px}
.chips{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.chips li{font-family:var(--mono); font-weight:600; font-size:.78rem; letter-spacing:.05em;
  text-transform:uppercase; border:1px solid #39445A; color:#D6DDE8; padding:7px 11px}
@media(max-width:860px){.band-art{width:100%; opacity:.35}}

/* budget + free look: icon breakdown */
.lead-in{display:block; margin:30px 0 0; padding-top:18px; border-top:1px solid var(--rule); color:var(--ink-3)}
.facets{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:1px;
  background:var(--rule); border:1px solid var(--rule)}
.facets li{background:var(--paper); display:flex; gap:14px; align-items:flex-start; padding:15px 18px}
.facets svg{flex:none; width:26px; height:26px; margin-top:1px;
  fill:none; stroke:var(--c); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.facets b{display:block; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.012em}
.facets span{display:block; color:var(--ink-2); font-size:.95rem}
.offer .mark{width:42px; height:42px; margin-bottom:16px;
  fill:none; stroke:var(--m); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
:root[data-theme="dark"] .band{background:#0A0F18}
:root[data-theme="dark"] .facets li{background:#161A22}

/* skip link + screen-reader-only text */
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:#141821; color:#fff;
  font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; padding:12px 18px; text-decoration:none}
.skip:focus{left:8px; top:8px}
.vh{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}