/* ═══════════════════════════════════════════════════════════
   ai.busqueneil.com - Skip The Hire
   Theme: locked LIGHT. DesignJoy DNA, measured off the live site:
     canvas #ECE6E8 (their exact bg) · white cards · 19px radius ·
     pill buttons · Figtree · display weight 500, not 900.
   All saturated color lives INSIDE image cards, never in the chrome.
   Muted grey is #66615C, NOT DesignJoy's #99948F, which fails
   contrast at 2.44:1 on their own background.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#ECE6E8;
  --bg-2:#F4F0F1;
  --card:#FFFFFF;
  --ink:#0A0A0A;
  --ink-2:#3A3734;
  --muted:#66615C;
  --line:#C9C0C2;
  --line-soft:#DDD6D8;
  --accent:#FCC212;

  --r-card:19px;
  --r-sm:10px;
  --r-pill:999px;

  --wrap:1240px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --sec-y:clamp(4.5rem,9vw,7.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* No scroll-behavior:smooth. It fights ScrollTrigger and stutters the scroll.
   scroll-margin-top on the anchor targets still lands them clear of the nav. */
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:100;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip-link:focus{left:0}
:where(a,button,summary,details):focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:840px}
:where(#math,#jd,#honest,#build,#work,#how,#guarantee,#me,#pricing,#faq,#start){scroll-margin-top:96px}

/* ── NAV ─────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(236,230,232,.88);backdrop-filter:blur(14px)}
.nav__inner{max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad);height:72px;display:flex;align-items:center;gap:2rem}
.nav__brand{font-weight:700;letter-spacing:-.03em;text-decoration:none;font-size:1.12rem;white-space:nowrap}
.nav__links{display:flex;gap:1.6rem;margin-left:auto;white-space:nowrap}
.nav__links a{text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:500;transition:color .2s var(--ease)}
.nav__links a:hover{color:var(--ink)}
@media(max-width:900px){.nav__links{display:none}.nav__inner{gap:1rem}}

/* ── BUTTONS (black pill primary, white pill secondary) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;font-weight:600;font-size:.98rem;letter-spacing:-.01em;
  padding:.92rem 1.7rem;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;
  border:1px solid var(--ink);
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.btn:hover{opacity:.86}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{opacity:1;border-color:var(--ink)}
.btn--sm{padding:.6rem 1.15rem;font-size:.9rem;margin-left:1.4rem}
@media(max-width:900px){.btn--sm{margin-left:auto}}
.btn--lg{padding:1.15rem 2.4rem;font-size:1.08rem}
.btn--block{display:flex;width:100%}
.btn--onDark{background:#fff;color:var(--ink);border-color:#fff}

/* ── TYPE (Figtree, display weight 500) ──────────── */
.h2{
  font-size:clamp(2.05rem,4.6vw,3.5rem);line-height:1.02;
  letter-spacing:-.042em;font-weight:500;margin:0 0 1.1rem;max-width:20ch;
}
.sec__lede{color:var(--muted);font-size:1.1rem;max-width:56ch;margin:0 0 3rem}
.eyebrow{font-size:.82rem;letter-spacing:0;color:var(--muted);margin:0 0 .8rem;font-weight:600}
.lede{font-size:1.22rem;color:var(--ink);font-weight:500}
.kicker{font-size:clamp(1.2rem,2.3vw,1.75rem);font-weight:500;letter-spacing:-.032em;line-height:1.22;margin-top:2.5rem;max-width:34ch}
.kicker--wide{max-width:56ch;margin-top:3.5rem;font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--muted);font-weight:400;line-height:1.5;letter-spacing:-.01em}
.note{color:var(--muted);font-size:.95rem;margin-top:2.5rem;max-width:62ch}

/* ── SECTIONS ────────────────────────────────────── */
.sec{padding-block:var(--sec-y)}
.sec--alt{background:var(--bg-2)}

/* ── HERO ────────────────────────────────────────── */
.hero{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(3.5rem,6vw,5.5rem)}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero__h1{font-size:clamp(3.4rem,9.6vw,7.4rem);line-height:.9;letter-spacing:-.055em;font-weight:500;margin:0 0 1.5rem}
.hero__sub{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted);max-width:34ch;margin:0 0 2.1rem;line-height:1.5}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr;gap:2.5rem}.hero__sub{max-width:100%}}

/* Vivid image card, the DesignJoy hero move. Color lives here. */
.compare{
  margin:0;padding:clamp(1.6rem,2.6vw,2.1rem);border-radius:var(--r-card);position:relative;
  overflow:hidden;isolation:isolate;color:#fff;min-height:400px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.compare__bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Scrim strength is measured, not guessed: sampled against the brightest
   pixel under every text run so white copy clears WCAG AA on the artwork. */
.compare::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,6,16,.58) 0%,rgba(8,6,16,.62) 42%,rgba(6,4,12,.90) 100%);
}
.compare__cap{font-size:.8rem;color:rgba(255,255,255,.82);margin-bottom:1.4rem;font-weight:600}
.compare__row+.compare__row{margin-top:1.35rem;padding-top:1.35rem;border-top:1px solid rgba(255,255,255,.22)}
.compare__label{font-size:.9rem;color:rgba(255,255,255,.85);margin-bottom:.25rem;font-weight:500}
.compare__fig{font-size:clamp(2.2rem,4.8vw,3.1rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.78)}
.compare__fig--accent{color:var(--accent)}
.compare__bar{height:7px;background:rgba(255,255,255,.25);border-radius:var(--r-pill);margin:.85rem 0 .5rem;overflow:hidden}
/* GSAP animates width here, so the resting state must be the full width and the
   motion gate (.js-anim) is what holds it at 0. No transform, no .is-in. */
.compare__bar span{display:block;height:100%;width:var(--w,100%);background:rgba(255,255,255,.72);border-radius:var(--r-pill)}
.compare__bar--accent span{background:var(--accent)}
.compare__note{font-size:.83rem;color:rgba(255,255,255,.8)}

/* ── LEDGER ──────────────────────────────────────── */
.ledger{width:100%;border-collapse:collapse;margin:0 0 3rem;font-variant-numeric:tabular-nums;background:var(--card);border-radius:var(--r-card);overflow:hidden}
.ledger th,.ledger td{text-align:left;padding:1.15rem 1.6rem;font-weight:400;font-size:1.02rem}
.ledger td{text-align:right;color:var(--muted);white-space:nowrap}
.ledger tbody tr+tr th,.ledger tbody tr+tr td{border-top:1px solid var(--line-soft)}
.ledger tfoot th,.ledger tfoot td{border-top:2px solid var(--ink);font-weight:600;font-size:clamp(1.15rem,2.3vw,1.6rem);letter-spacing:-.03em;padding-block:1.3rem}
.ledger tfoot td{color:var(--ink)}
.ledger__after{max-width:60ch}
.ledger__after p{margin:0 0 1rem;color:var(--muted)}
.ledger__after strong{color:var(--ink);font-weight:600}
@media(max-width:600px){.ledger th,.ledger td{font-size:.95rem;padding:.9rem 1.1rem}}

/* ── JOB DESCRIPTION ─────────────────────────────── */
.jd{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.jd__item{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.25rem,3vw,3rem);
  padding:clamp(1.4rem,2.4vw,1.9rem);background:var(--card);border-radius:var(--r-card);
}
.jd__quote{margin:0;font-size:clamp(1.05rem,1.8vw,1.28rem);font-weight:500;letter-spacing:-.028em;color:var(--muted);line-height:1.3}
.jd__answer{margin:0;color:var(--ink);line-height:1.55}
@media(max-width:768px){.jd__item{grid-template-columns:1fr;gap:.7rem}}

/* ── HONEST PANELS ───────────────────────────────── */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.panel{background:var(--card);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.3rem)}
.panel--no{background:var(--ink);color:#fff}
.panel__h{font-size:1.18rem;font-weight:600;letter-spacing:-.03em;margin:0 0 1.5rem}
.panel__list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.panel__list li{font-size:.97rem;color:var(--muted);line-height:1.5;padding-left:1.2rem;position:relative}
.panel__list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.panel__list strong{color:var(--ink);font-weight:600}
.panel--no .panel__list li{color:rgba(255,255,255,.72)}
.panel--no .panel__list li::before{background:var(--accent)}
.panel--no .panel__list strong{color:#fff}
@media(max-width:820px){.panels{grid-template-columns:1fr}}

.bigline{margin:3.2rem 0 0;font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:500;letter-spacing:-.04em;line-height:1.1;max-width:22ch}
.bigline__accent{color:var(--muted)}

/* ── BENTO ───────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.tile{
  background:var(--card);border-radius:var(--r-card);padding:clamp(1.4rem,2.3vw,1.9rem);
  grid-column:span 2;transition:transform .25s var(--ease);overflow:hidden;position:relative;
}
.tile:hover{transform:translateY(-3px)}
.tile__h{font-size:1.14rem;font-weight:600;letter-spacing:-.03em;margin:0 0 .6rem}
.tile p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.tile--wide{grid-column:span 4}
.tile--tall{grid-row:span 2;display:flex;flex-direction:column}
.tile--dark{background:var(--ink);color:#fff}
.tile--dark p{color:rgba(255,255,255,.7)}
.tile--accent{background:var(--accent);color:var(--ink)}
.tile--accent p{color:rgba(10,10,10,.72)}
.tile__shot{margin-top:1.4rem;border-radius:var(--r-sm);overflow:hidden;flex:1;min-height:150px;background:var(--bg-2)}
.tile__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
@media(max-width:900px){.bento{grid-template-columns:1fr}.tile,.tile--wide,.tile--tall{grid-column:span 1;grid-row:span 1}}

/* ── CASES ───────────────────────────────────────── */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.case{background:var(--card);border-radius:var(--r-card);padding:clamp(1.5rem,2.5vw,1.9rem);display:flex;flex-direction:column}
.case__h{font-size:1.08rem;font-weight:600;letter-spacing:-.03em;margin:0 0 .25rem}
.case__meta{margin:0 0 1.2rem;font-size:.83rem;color:var(--muted)}
.case__body{margin:0 0 1.4rem;color:var(--muted);font-size:.95rem;line-height:1.5;flex:1}
.case__proof{margin:0;padding-top:1.1rem;border-top:1px solid var(--line-soft);font-size:.85rem;color:var(--ink);font-weight:600;line-height:1.4}
@media(max-width:900px){.cases{grid-template-columns:1fr}}

/* ── STEPS ───────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.step{background:var(--card);border-radius:var(--r-card);padding:clamp(1.4rem,2.3vw,1.8rem)}
.step__day{font-size:.8rem;color:var(--muted);margin:0 0 .9rem;font-weight:600}
.step__h{font-size:1.08rem;font-weight:600;letter-spacing:-.03em;margin:0 0 .5rem}
.step p:last-child{margin:0;color:var(--muted);font-size:.93rem;line-height:1.5}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ── GUARANTEE (black block) ─────────────────────── */
.guaranteeWrap{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:clamp(2rem,5vw,4rem)}
.guaranteeWrap .h2{color:#fff;max-width:24ch}
.guarantee{display:grid;gap:1.05rem;max-width:62ch;margin-top:1.8rem}
.guarantee p{margin:0;color:rgba(255,255,255,.72);font-size:1rem;line-height:1.55}
.guarantee strong{color:#fff;font-weight:600}

/* ── ME ──────────────────────────────────────────── */
.me{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;background:var(--card);border-radius:var(--r-card);padding:clamp(1.6rem,3.5vw,3rem)}
.me__photo img{border-radius:var(--r-sm)}
.me__ph{
  aspect-ratio:9/11;border-radius:var(--r-sm);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line);
}
.me__ph span{font-size:.85rem;color:var(--muted);font-weight:500;letter-spacing:.02em}
.me__copy p{margin:0 0 1.1rem;color:var(--muted);line-height:1.6}
.me__copy strong{color:var(--ink);font-weight:600}
@media(max-width:820px){.me{grid-template-columns:1fr}.me__photo{max-width:320px}}

/* ── PLANS ───────────────────────────────────────── */
.plans{display:grid;grid-template-columns:1.15fr .85fr;gap:.9rem;align-items:start}
.plan{background:var(--card);border-radius:var(--r-card);padding:clamp(1.6rem,3vw,2.3rem)}
.plan--primary{background:var(--ink);color:#fff}
.plan__name{font-size:1rem;font-weight:500;margin:0 0 .7rem;color:var(--muted)}
.plan--primary .plan__name{color:rgba(255,255,255,.62)}
.plan__price{font-size:clamp(2.5rem,5.2vw,3.6rem);font-weight:500;letter-spacing:-.055em;line-height:1;margin:0 0 1rem;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.plan__price span{font-size:.85rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.plan--primary .plan__price span{color:rgba(255,255,255,.6)}
.plan__sub{margin:0 0 1.6rem;color:var(--muted);font-size:.98rem}
.plan--primary .plan__sub{color:rgba(255,255,255,.72)}
.plan__list{list-style:none;margin:0 0 1.7rem;padding:0;display:grid;gap:.65rem}
.plan__list li{position:relative;padding-left:1.5rem;font-size:.95rem;color:var(--muted)}
.plan--primary .plan__list li{color:rgba(255,255,255,.78)}
.plan__list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--ink)}
.plan--primary .plan__list li::before{background:var(--accent)}
.plan__bonus{border-top:1px solid var(--line-soft);padding-top:1.4rem;margin-bottom:1.5rem}
.plan--primary .plan__bonus{border-top-color:rgba(255,255,255,.18)}
.plan__bonusH{margin:0 0 .95rem;font-size:.88rem;color:var(--muted)}
.plan--primary .plan__bonusH{color:rgba(255,255,255,.6)}
.plan__bonus ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.plan__bonus li{display:flex;justify-content:space-between;gap:1.2rem;font-size:.92rem;color:var(--muted);align-items:baseline}
.plan--primary .plan__bonus li{color:rgba(255,255,255,.78)}
.plan__bonus b{color:var(--ink);font-size:.88rem;white-space:nowrap;font-weight:600}
.plan--primary .plan__bonus b{color:var(--accent)}
.plan__value{margin:0 0 1.5rem;font-weight:600;letter-spacing:-.025em;font-size:1.05rem}
.plan__terms{margin:.85rem 0 0;text-align:center;font-size:.85rem;color:rgba(255,255,255,.6)}
.plan__fine{margin:0;font-size:.88rem;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:1.25rem}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* ── FAQ ─────────────────────────────────────────── */
.faq{background:var(--card);border-radius:var(--r-card);padding:0 clamp(1.3rem,2.6vw,2rem)}
.faq__i+.faq__i{border-top:1px solid var(--line-soft)}
.faq__i summary{cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative;font-weight:500;font-size:1.04rem;letter-spacing:-.022em}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"";position:absolute;right:.4rem;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease)}
.faq__i[open] summary::after{transform:translateY(-25%) rotate(-135deg);border-color:var(--ink)}
.faq__i p{margin:0 0 1.45rem;color:var(--muted);max-width:64ch;font-size:.97rem}
@media (prefers-reduced-motion:reduce){.faq__i summary::after{transition:none}}

/* ── CLOSE ───────────────────────────────────────── */
.close{padding-block:clamp(4.5rem,9vw,8rem);text-align:center}
.close__h{font-size:clamp(2.4rem,6.4vw,4.6rem);font-weight:500;letter-spacing:-.055em;line-height:.98;margin:0 0 1.2rem}
.close__sub{color:var(--muted);max-width:50ch;margin:0 auto 2.3rem;font-size:1.06rem}
.close__fine{color:var(--muted);font-size:.88rem;max-width:52ch;margin:2.3rem auto 0}

/* ── FOOT ────────────────────────────────────────── */
.foot{padding-block:2.5rem;border-top:1px solid var(--line-soft)}
.foot__inner{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.foot p{margin:0;color:var(--muted);font-size:.88rem}
.foot__links{display:flex;gap:1.5rem}
.foot__links a{color:var(--muted);text-decoration:none;font-size:.88rem;transition:color .2s var(--ease)}
.foot__links a:hover{color:var(--ink)}

/* ── MOTION GATE ─────────────────────────────────────
   Pre-hidden only while html.js-anim is set. Head script sets it,
   js/main.js or a 2.5s timeout removes it. Never a permanent hide. */
.js-anim [data-anim],
.js-anim [data-batch],
.js-anim .hero__h1 .line{opacity:0}
.js-anim .compare__bar span{width:0}
@media (prefers-reduced-motion:reduce){
  .js-anim [data-anim],.js-anim [data-batch],.js-anim .hero__h1 .line{opacity:1}
  .tile:hover,.shot:hover img{transform:none}
}

/* ── HERO HEADLINE LINES ─────────────────────────── */
.hero__h1 .line{display:block}

/* ── COST GRID ───────────────────────────────────── */
.costGrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.costGrid .ledger{margin-bottom:0}
@media(max-width:860px){.costGrid{grid-template-columns:1fr;gap:2rem}}

/* ── CAPABILITY MENU ─────────────────────────────── */
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.menuCol{background:var(--card);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.menuCol__art{position:relative;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:flex-end}
.menuCol__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.menuCol__art::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,6,16,.10) 0%,rgba(8,6,16,.55) 55%,rgba(6,4,12,.88) 100%)}
.menuCol__h{position:relative;z-index:2;margin:0;padding:1.3rem;color:#fff;
  font-size:1.3rem;font-weight:600;letter-spacing:-.032em}
.menuCol__sub{margin:1.3rem 1.4rem .9rem;color:var(--muted);font-size:.93rem}
.menuCol__list{list-style:none;margin:0;padding:0 1.4rem 1.6rem;display:grid;gap:.52rem;flex:1}
.menuCol__list li{position:relative;padding-left:1.15rem;font-size:.95rem;color:var(--ink);line-height:1.45}
.menuCol__list li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
@media(max-width:900px){.menu{grid-template-columns:1fr}}

/* ── BENEFITS ────────────────────────────────────── */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.benefit{background:var(--card);border-radius:var(--r-card);padding:clamp(1.3rem,2.2vw,1.7rem)}
.benefit h3{margin:0 0 .55rem;font-size:1.02rem;font-weight:600;letter-spacing:-.028em}
.benefit p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
@media(max-width:1080px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.benefits{grid-template-columns:1fr}}

/* ── GALLERY ─────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1.5rem}
.shot{margin:0;background:var(--card);border-radius:var(--r-card);overflow:hidden}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.shot figcaption{padding:.85rem 1.1rem;font-size:.83rem;color:var(--muted)}
.gallery .shot:first-child{grid-column:span 2}
.gallery .shot:nth-child(2){grid-column:span 2}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .shot:first-child,.gallery .shot:nth-child(2){grid-column:span 2}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}
  .gallery .shot:first-child,.gallery .shot:nth-child(2){grid-column:span 1}}

/* ── GUARANTEE, art behind ───────────────────────── */
.guaranteeWrap{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.guaranteeWrap__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.9}
.guaranteeWrap::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(6,5,10,.90) 0%,rgba(6,5,10,.78) 52%,rgba(6,5,10,.62) 100%)}
.guarantee__fine{font-size:.88rem;color:rgba(255,255,255,.55) !important;padding-top:.4rem}

/* ── CLOSE, art behind ───────────────────────────── */
.close{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.close__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.close::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,10,10,.86) 0%,rgba(5,10,10,.78) 100%)}
.close__inner{position:relative;z-index:1}
.close .close__h{color:#fff}
.close .close__sub{color:rgba(255,255,255,.82)}
.close .close__fine{color:rgba(255,255,255,.62)}
.close .btn{background:#fff;color:var(--ink);border-color:#fff}