/* Dani Borisover — one navy, one gold, white and grey for the words, and the
   photographs doing the talking. Nothing decorative that is not a picture of
   the show. */
:root{
  color-scheme:dark;
  --paper:#0B1424; --paper-2:#101C30; --paper-3:#162540;
  --ink:#F1F5FA; --ink-soft:#B9C4D6; --ink-dim:#8E9BB0;
  --brass:#C9A86A; --brass-text:#C9A86A; --brass-soft:rgba(201,168,106,.18);
  --paper-rgb:11,20,36;
  --btn-bg:#fff; --btn-ink:#0B1424;
  --line:rgba(241,245,250,.14); --line-strong:rgba(241,245,250,.26);
  --gutter:clamp(1.15rem,4vw,3rem);
  --measure:38rem;
}
*{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:400 1.125rem/1.65 Assistant,system-ui,sans-serif;overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(255,255,255,.14)}
a,button{touch-action:manipulation}
a{color:inherit}
img,video{max-width:100%}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:var(--gutter);inset-block-start:.7rem;z-index:20;background:#fff;color:#000;padding:.6rem 1rem}
.wrap{width:100%;max-width:76rem;margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-right)) max(var(--gutter),env(safe-area-inset-left))}
.mono,.label{font-weight:600;font-size:.92rem;color:var(--brass-text)}

/* ---------- type ---------- */
h1,h2,h3{font-family:Secular,sans-serif;font-weight:400;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.5rem,7.2vw,5.4rem);line-height:1.02;letter-spacing:-.02em;max-width:15ch}
h1 i{font-style:normal;color:var(--brass-text)}
h2{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.1;letter-spacing:-.015em}
h3{font-size:1.35rem;line-height:1.3}
p{margin:0 0 1.1rem}
.sec p,.prose p{color:var(--ink-soft);max-width:var(--measure)}
.lead{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.55;color:var(--ink);max-width:var(--measure);margin-block:1rem 0}
.lede{font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.6;max-width:32rem;margin:1.2rem 0 0;color:#EEF2F7;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.kicker{margin:0 0 .8rem;font-weight:600;color:var(--brass-text);font-size:1rem}
.eyebrow{margin:0 0 .9rem;color:#E7CE9C;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.7)}
strong{color:var(--ink);font-weight:600}

/* ---------- buttons ---------- */
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-block-start:1.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.8rem;text-decoration:none;font-weight:600;font-size:1.05rem;
  border-radius:999px;transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn svg{width:1.1rem;height:1.1rem;flex:none}
.b1{background:var(--btn-bg);color:var(--btn-ink)}.b1 svg{fill:var(--btn-ink)}
.b1:hover{background:var(--brass)}
.b2{border:1px solid rgba(255,255,255,.4);color:#fff;background:rgba(var(--paper-rgb),.35)}.b2 svg{fill:var(--brass)}
.b2:hover{border-color:#fff;background:rgba(var(--paper-rgb),.6)}

/* ---------- header ---------- */
header{padding-block:1.1rem;position:relative;z-index:5}
header .wrap{display:flex;align-items:center;justify-content:flex-end;gap:1rem;
  padding-inline-start:clamp(6rem,10vw,8.5rem)}
.nav{display:flex;align-items:center;gap:1.5rem;font-size:1rem;color:rgba(255,255,255,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.nav a{text-decoration:none}
.nav a:hover{color:#fff}
.nav .tel{color:#fff;font-weight:600;white-space:nowrap}
.nav .has-sub{position:relative}
.nav .has-sub>a::after{content:"";display:inline-block;width:.42em;height:.42em;margin-inline-start:.4em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.25em) rotate(45deg)}
.nav .sub{position:absolute;inset-inline-start:0;inset-block-start:100%;min-width:14rem;
  margin:0;padding:.5rem 0;list-style:none;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);display:none;text-shadow:none}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:block}
.nav .sub a{display:block;padding:.6rem 1.1rem;white-space:nowrap}
.nav .sub a:hover{background:var(--paper-3)}
.tag{display:block;position:absolute;inset-block-start:0;inset-inline-start:var(--gutter);z-index:6;
  width:clamp(5.2rem,8.5vw,7rem);transform:rotate(-3deg);transform-origin:top center;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));transition:transform .18s ease}
.tag svg{display:block;width:100%;height:auto}
.tag:hover{transform:rotate(-3deg) translateY(3px)}
.tag:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* ---------- hero: a photograph with the promise set on it ---------- */
.hero{position:relative;min-height:92svh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;
  background:var(--paper);color:var(--ink)}
.hero>video,.hero>.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 32%;z-index:-2;
  filter:saturate(1.02) brightness(.92)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(118% 76% at 100% 70%,rgba(7,14,26,.82) 0%,rgba(7,14,26,.5) 38%,rgba(7,14,26,0) 74%),
    linear-gradient(to top,var(--paper) 0%,rgba(var(--paper-rgb),.93) 7%,rgba(var(--paper-rgb),.62) 18%,rgba(var(--paper-rgb),.22) 38%,rgba(var(--paper-rgb),.1) 60%,rgba(var(--paper-rgb),.44) 100%)}
.hero header::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:7rem;z-index:-1;
  pointer-events:none;background:linear-gradient(to bottom,rgba(10,12,16,.5),rgba(10,12,16,0))}
.deal{flex:1;display:flex;align-items:center;padding-block:clamp(1rem,3vw,3rem) clamp(1.5rem,4vw,3.5rem)}
.deal>div{position:relative;z-index:2}
.deal h1{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.6);font-size:clamp(2.3rem,5.2vw,4.6rem)}
.hero.short{min-height:66svh}
.hero.short h1{font-size:clamp(2.1rem,5.2vw,4rem)}
.hero.short .deal{padding-block-start:clamp(4.5rem,10vw,8rem)}
.hero.plain{min-height:auto}
.hero.plain::after{display:none}
.hero.plain .deal{padding-block:clamp(5rem,11vw,8rem) clamp(2.5rem,5vw,4rem)}
.hero.plain h1{font-size:clamp(2.1rem,5vw,3.8rem);text-shadow:none}
.hero.plain .lede{max-width:46rem;text-shadow:none;color:var(--ink-soft)}
.hero.plain .nav{color:var(--ink-soft);text-shadow:none}

/* the rating pill, where people decide */
.rating{margin:1.2rem 0 0;font-size:1rem}
.rating a{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;
  padding:.55rem .95rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  background:rgba(var(--paper-rgb),.55);backdrop-filter:blur(3px);transition:border-color .16s ease}
.rating a:hover{border-color:var(--brass)}
.rating b{font-weight:600}
.stars{color:var(--brass-text);letter-spacing:.1em;font-size:.95em}

/* the facts that decide whether to even enquire — a plain row, no bullets */
.facts-row{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:1.2rem 0 0;padding:0;
  font-size:1rem;color:#DCE3EE;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.facts-row li{white-space:nowrap}
.strip{position:relative;z-index:2;background:var(--paper);color:var(--ink-soft);border-block-start:1px solid var(--brass)}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem clamp(1.1rem,3.2vw,2.75rem);padding-block:1rem;font-size:1rem}
.strip b{color:#fff;font-weight:600;unicode-bidi:isolate;padding-inline-end:.4rem}

/* ---------- sections ---------- */
.page{position:relative;background:var(--paper);color:var(--ink)}
section{position:relative}
.sec{padding-block:clamp(3.25rem,7vw,6rem)}
.alt{background:var(--paper-2)}
.sec+.sec:not(.alt):not(.photoband){border-block-start:1px solid var(--line)}

/* the logo wall: proof, laid out as a quiet row */
.clients{padding-block:clamp(2rem,4vw,3rem);border-block-end:1px solid var(--line)}
.clients h2{font-family:Assistant,sans-serif;font-size:1rem;font-weight:600;color:var(--ink-dim);margin:0 0 1.25rem;letter-spacing:0}
.clients ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem 1.5rem}
.clients li{display:flex;align-items:center;justify-content:center;min-height:5rem;padding:.6rem .4rem}
.clients li img{display:block;max-height:2.9rem;max-width:100%;width:auto;height:auto;opacity:.85;transition:opacity .18s ease}
.clients li img:hover{opacity:1}
.clients li.rest{display:none;color:var(--ink-dim);font-size:.95rem}
@media(max-width:560px){
  .clients ul{grid-template-columns:repeat(3,1fr);gap:.25rem .75rem}
  .clients li{min-height:4.2rem;padding:.5rem .3rem}
  .clients li img{max-height:2.3rem}
  .clients li:nth-child(n+10){display:none}
  .clients li.rest{display:flex}
}

/* a photograph beside its words — the recurring shape of this site */
.feature{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(min-width:860px){
  .feature{grid-template-columns:1fr 1fr}
  .feature.flip>.feature-img{order:2}
}
.feature-img{margin:0}
.feature-img img{display:block;width:100%;height:auto;border-radius:16px;aspect-ratio:4/3;object-fit:cover}
.feature-img.tall img{aspect-ratio:3/4}
.feature-img figcaption{margin-block-start:.7rem;color:var(--ink-dim);font-size:.95rem}
.feature h2,.feature h3{margin-block-end:.9rem}
.feature+.feature{margin-block-start:clamp(3rem,7vw,5.5rem)}

/* the three formats on the home page */
.formats{display:grid;gap:clamp(1.25rem,3vw,2rem);margin-block-start:clamp(1.75rem,4vw,2.75rem)}
@media(min-width:760px){.formats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:759px){.formats img{aspect-ratio:3/2}}
.formats figure{margin:0}
.formats img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
.formats figcaption{padding-block-start:1rem}
.formats h3{margin-block-end:.35rem}
.formats p{margin:0;font-size:1.05rem}

/* event types: a compact register of links, not a wall of paragraphs */
.types{list-style:none;margin:clamp(1.5rem,4vw,2.5rem) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:0 clamp(1.5rem,4vw,3rem);border-block-start:1px solid var(--line)}
.types li{border-block-end:1px solid var(--line)}
.types a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-block:1rem;text-decoration:none;color:var(--ink)}
.types a b{font-weight:600;font-size:1.1rem}
.types a span{color:var(--ink-dim);font-size:.98rem;text-align:end;flex:1}
.types a:hover b{color:var(--brass-text)}
@media(max-width:560px){.types a{flex-direction:column;gap:.15rem;padding-block:.85rem}.types a span{text-align:start}}

/* steps: a real sequence, so it is numbered — in the body face, not a data font */
.steps{margin:clamp(1.75rem,4vw,2.5rem) 0 0;padding:0;list-style:none;counter-reset:s;border-block-start:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;padding-block:1.4rem;border-block-end:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s);font-family:Secular,sans-serif;color:var(--brass-text);font-size:1.5rem;line-height:1.2}
.steps h3{margin-block-end:.3rem}
.steps p{margin:0}

/* one quote that carries the section, then the smaller ones */
.quote-big{margin:clamp(1.75rem,4vw,2.75rem) 0 0;max-width:46rem}
.quote-big blockquote{margin:0;font-family:Secular,sans-serif;font-size:clamp(1.45rem,3vw,2.2rem);line-height:1.35;color:var(--ink);text-wrap:balance}
.quote-big figcaption{margin-block-start:1rem;color:var(--ink-dim)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-block-start:clamp(1.75rem,4vw,2.5rem)}
.quotes figure{margin:0;padding-inline-start:1.1rem;border-inline-start:2px solid var(--brass)}
.quotes blockquote{margin:0;color:var(--ink);font-size:1.05rem;line-height:1.6}
.quotes figcaption{margin-block-start:.75rem;color:var(--ink-dim);font-size:.98rem}

/* the WhatsApp screenshots are the realest proof on the site */
.notes{columns:3 19rem;column-gap:clamp(1rem,2.4vw,1.75rem);margin-block-start:clamp(1.75rem,4vw,2.5rem)}
.notes .note{break-inside:avoid;margin:0 0 clamp(1.25rem,2.8vw,2rem)}
.notes .note figcaption{margin-block-start:.6rem;font-size:.98rem;line-height:1.5;color:var(--ink)}
.notes .note figcaption span{color:var(--ink-dim);white-space:nowrap}
.notes img{display:block;width:100%;height:auto;
  border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.4)}
@media(max-width:620px){.notes{columns:1}}

/* a full-width photograph with one line on it */
.photoband{position:relative;isolation:isolate;min-height:min(70svh,36rem);display:flex;align-items:flex-end;overflow:hidden}
.photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:-2}
.photoband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(var(--paper-rgb),.95) 0%,rgba(var(--paper-rgb),.55) 45%,rgba(var(--paper-rgb),.1) 100%)}
.photoband .wrap{padding-block:clamp(2.5rem,6vw,4.5rem)}
.photoband h2{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6);max-width:18ch}
.photoband p{color:#E6ECF4;text-shadow:0 1px 12px rgba(0,0,0,.7)}

/* about */
.about{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(min-width:820px){.about{grid-template-columns:1.15fr .85fr}}
.shot.portrait{margin:0}
.shot.portrait img{border-radius:16px;max-height:34rem;width:auto;max-width:100%;margin-inline:auto}

/* faq */
.faq{margin-block-start:clamp(1.5rem,4vw,2.25rem);border-block-start:1px solid var(--line);max-width:46rem}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{cursor:pointer;padding-block:1.1rem;font-weight:600;font-size:1.1rem;color:var(--ink);
  display:flex;justify-content:space-between;gap:1rem;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass-text);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 1.2rem;max-width:var(--measure)}

/* the way out: a contact section, and on a phone the floating button */
.close{text-align:center}
.close .actions{justify-content:center}
.close p{margin-inline:auto}
.close .b2{border:1px solid rgba(255,255,255,.3);background:transparent}
.close .b2:hover{border-color:var(--brass);color:var(--brass)}
.mid-cta{margin-block-start:clamp(2rem,5vw,3rem);padding:clamp(1.5rem,4vw,2.25rem);border:1px solid var(--line);border-radius:18px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:var(--paper-2)}
.mid-cta p{margin:0;max-width:30rem;color:var(--ink)}
.mid-cta .actions{margin:0}
.alt .mid-cta{background:var(--paper)}
footer{border-block-start:1px solid var(--line);padding-block:1.75rem 2.5rem;color:var(--ink-dim);font-size:.98rem;background:var(--paper-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center}
footer a{text-decoration:none;display:inline-block;padding-block:.55rem;min-height:1.6rem}
footer a:hover{color:var(--ink)}

/* ---------- photographs in running pages ---------- */
.shot{margin:clamp(2.25rem,5vw,3.5rem) 0 0;position:relative}
.shot img,.shot video{display:block;width:100%;height:auto;border-radius:16px}
.shot video{aspect-ratio:16/9;object-fit:cover;background:var(--paper-2)}
.shot figcaption{margin-block-start:.8rem;color:var(--ink-dim);font-size:.98rem;max-width:44rem}
.shot figcaption b{color:var(--ink);font-weight:600;display:block;margin-block-end:.1rem}
.shot.tall{max-width:24rem}
.shot.tall figcaption{max-width:100%}
@media(min-width:900px){.shot.tall{float:inline-start;margin-inline-end:clamp(1.5rem,4vw,3rem);margin-block-start:0}}
.shot.reel{max-width:56rem}
.shot.reel video{aspect-ratio:16/9;background:#000;cursor:pointer}
.article-shot{max-width:48rem;margin-block-start:0}
.pair{display:grid;gap:clamp(1.25rem,3vw,2.25rem);align-items:start}
@media(min-width:820px){.pair{grid-template-columns:1fr 1fr}}
.pair .shot img{aspect-ratio:3/2;object-fit:cover}
.more-link{margin-block-start:1.4rem}
.more-link a{color:var(--brass-text);text-decoration:none;border-block-end:1px solid rgba(201,168,106,.4);padding-block-end:.15rem}
.more-link a:hover{border-block-end-color:var(--brass)}

/* the YouTube facade */
.yt{position:relative;cursor:pointer;margin-block-start:clamp(1.75rem,4vw,2.5rem);border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#000}
.yt img,.yt iframe{display:block;width:100%;height:100%;border:0}
.yt img{object-fit:cover;filter:brightness(.85);transition:filter .2s ease}
.yt:hover img{filter:brightness(.95)}
.yt button{position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(50%,-50%);width:clamp(4rem,8vw,5.5rem);background:none;border:0;padding:0;cursor:pointer}
.yt button svg{display:block;width:100%;height:auto}
.yt button .bg{fill:#000;opacity:.72;transition:opacity .18s ease,fill .18s ease}
.yt button .tri{fill:#fff}
.yt:hover button .bg{fill:#C9A86A;opacity:1}
.yt:hover button .tri{fill:#0B1424}
.yt button:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.yt-note{margin-block-start:.9rem;font-size:.98rem;color:var(--ink-dim)}

/* venues: a plain register */
.venues{list-style:none;margin:clamp(2rem,4vw,2.75rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:0 clamp(1.5rem,4vw,3.25rem)}
.venues li{display:flex;align-items:baseline;gap:.9rem;padding-block:.95rem;border-block-end:1px solid var(--line)}
.venues li b{font-weight:600;flex:0 1 auto;max-width:68%}
.venues li span{color:var(--ink-dim);font-size:.95rem;line-height:1.45;margin-inline-start:auto;text-align:end}
@media(max-width:560px){.venues li{flex-direction:column;gap:.2rem;padding-block:.8rem}.venues li b{max-width:100%}.venues li span{margin-inline-start:0;text-align:start}}

/* the ring of links between pages */
.more{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem}
.more a{display:inline-block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.15rem;font-size:1rem;transition:border-color .16s ease,background .16s ease}
.more a:hover{border-color:var(--brass);background:var(--brass-soft)}

/* text pages, articles, forms */
.prose{margin-block-end:clamp(2.25rem,5vw,3.25rem);max-width:46rem}
.prose h2{margin:0 0 .9rem}
.prose a:not(.btn){color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);margin-block-start:2rem}
.two h3{color:var(--brass-text);margin-block-end:.5rem}
.two p{margin:0}
@media(max-width:760px){.two{grid-template-columns:1fr}}
.cf{max-width:30rem}
.cf-row{margin-block-end:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.cf label{font-size:1rem;color:var(--ink-soft);font-weight:600}
.cf-row .hint{font-weight:400;color:var(--ink-dim);font-size:.9rem}
.cf input,.cf textarea{font:inherit;color:var(--ink);background:var(--paper-2);border:1px solid var(--line-strong);border-radius:10px;padding:.8rem .9rem;width:100%}
.cf input:focus-visible,.cf textarea:focus-visible{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.cf textarea{resize:vertical;min-height:6rem}
.cf button{margin-block-start:.4rem;border:0;cursor:pointer}
.cf-note{font-size:.95rem;color:var(--ink-dim);margin-block-start:.9rem}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.no-fab .wa{display:none}
.posts{border-block-start:1px solid var(--line)}
.posts article{padding-block:clamp(1.75rem,4vw,2.75rem);border-block-end:1px solid var(--line);max-width:48rem}
.posts h2{font-size:clamp(1.45rem,3.2vw,2.1rem);margin:.4rem 0 .65rem}
.posts h2 a{color:inherit;text-decoration:none;border-block-end:1px solid transparent;transition:border-color .16s ease}
.posts h2 a:hover{border-block-end-color:var(--brass)}
.posts p{color:var(--ink-soft);margin:0}
.crumb{font-size:.95rem;color:var(--ink-dim);margin:0 0 1.1rem}
.crumb a{color:var(--ink-dim)}
.crumb a:hover{color:var(--brass-text)}
.byline{font-size:.95rem;color:var(--ink-dim);margin-block-start:1.25rem}
.byline a{color:var(--ink-dim)}
.byline time{unicode-bidi:isolate}
.article{max-width:40rem}
.article h2{font-size:clamp(1.35rem,2.8vw,1.8rem);margin-block:clamp(2.4rem,5vw,3.2rem) .85rem}
.article h2:first-child{margin-block-start:0}
.article p{margin-block:0 1.1rem;line-height:1.7}
.article ul,.article ol{margin-block:0 1.5rem;padding-inline-start:1.35rem;color:var(--ink-soft);line-height:1.7}
.article li{margin-block-end:.7rem}
.article li::marker{color:var(--brass)}
.article a{color:var(--ink)}
.aside{margin-block:1.75rem 2rem;padding:1.15rem 1.35rem;border-inline-start:2px solid var(--brass);background:var(--brass-soft);border-radius:0 12px 12px 0}
.aside p{margin:0;color:var(--ink)}
.article .faq{margin-block-start:1rem}
.rel{margin-block-start:clamp(2.5rem,6vw,4rem);padding-block-start:clamp(1.75rem,4vw,2.5rem);border-block-start:1px solid var(--line)}

/* ---------- the floating WhatsApp button ----------
   it stays out of the way while the hero (which has its own button) is on
   screen, and appears once the reader has scrolled past it */
.wa{position:fixed;z-index:40;inset-block-end:max(1.1rem,env(safe-area-inset-bottom));
  inset-inline-start:max(1rem,env(safe-area-inset-right));display:inline-flex;align-items:center;gap:.6rem;
  background:#1FA855;color:#fff;text-decoration:none;border-radius:999px;padding:.85rem;
  box-shadow:0 6px 22px rgba(0,0,0,.42);transition:transform .18s ease,background .18s ease}
.wa svg{width:1.65rem;height:1.65rem;fill:#fff;flex:none;display:block}
.wa span{font-weight:600;font-size:1rem;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width .26s ease,opacity .2s ease,margin .26s ease}
.wa:hover,.wa:focus-visible{background:#18924A;transform:translateY(-2px)}
.wa.off{opacity:0;pointer-events:none;transform:translateY(1rem)}
.wa{transition:transform .22s ease,opacity .22s ease,background .18s ease}
.wa:hover span,.wa:focus-visible span{max-width:11rem;opacity:1;margin-inline-end:.35rem}
@media(max-width:900px){.wa:hover span,.wa:focus-visible span{max-width:0;opacity:0;margin-inline-end:0}
  .page>section:last-of-type .wrap{padding-block-end:5rem}}
@media print{.wa{display:none}}

/* ---------- the phone menu ---------- */
.menu{display:none;align-items:center;gap:.5rem;background:rgba(var(--paper-rgb),.4);border:1px solid rgba(255,255,255,.35);border-radius:999px;
  color:#fff;font:inherit;font-size:.98rem;padding:.5rem .95rem;cursor:pointer;text-decoration:none}
.menu svg{width:1rem;height:1rem;fill:currentColor}
.sheet{position:fixed;inset:0;z-index:60;display:none;background:rgba(7,13,24,.85);backdrop-filter:blur(4px)}
.sheet:target{display:block}
.sheet-panel{position:absolute;inset-block-start:0;inset-inline:0;background:var(--paper-2);border-block-end:1px solid var(--line);
  padding:1.1rem max(1.15rem,env(safe-area-inset-right)) 1.5rem;max-height:100svh;overflow:auto}
.sheet-panel ul{list-style:none;margin:0;padding:0}
.sheet-panel li+li{border-block-start:1px solid var(--line)}
.sheet-panel a{display:block;padding:.95rem .25rem;color:var(--ink);text-decoration:none;font-size:1.1rem}
.sheet-panel .group{padding:.95rem .25rem .25rem;color:var(--ink-dim);font-size:.95rem}
.sheet-panel .group+ul{padding-inline-start:1rem}
.sheet-panel .group+ul li{border:0}
.sheet-panel .group+ul a{padding-block:.6rem}
.sheet-close{display:block;margin-block-end:.4rem;text-align:start;color:var(--ink-dim);text-decoration:none;font-size:.95rem;padding:.4rem .25rem}
@media(min-width:901px){.sheet{display:none !important}}

/* ---------- phones ---------- */
@media(max-width:900px){
  .nav .lk,.nav .has-sub{display:none}
  .menu{display:inline-flex}
  .hero>video,.hero>.poster{object-position:54% 26%}
  .hero::after{background:
    radial-gradient(165% 58% at 50% 90%,rgba(var(--paper-rgb),.9) 0%,rgba(var(--paper-rgb),.6) 42%,rgba(var(--paper-rgb),0) 80%),
    linear-gradient(to top,var(--paper) 0%,rgba(var(--paper-rgb),.95) 8%,rgba(var(--paper-rgb),.74) 34%,rgba(var(--paper-rgb),.22) 64%,rgba(var(--paper-rgb),.46) 100%)}
  .deal{padding-block:.5rem 1.25rem;align-items:flex-end}
  .deal .lede{margin-block-start:.85rem;font-size:1.05rem;line-height:1.7}
  .deal .actions{margin-block-start:1.1rem;gap:.55rem}
  .deal .actions .btn{flex:1 1 calc(50% - .3rem);padding:.9rem .6rem;font-size:1rem}
  .btn{flex:1 1 100%}
  .tag{width:4.6rem}
  header .wrap{padding-inline-start:5.6rem}
  .hero.short{min-height:auto}
  .about{grid-template-columns:1fr}
  .steps li{grid-template-columns:2.2rem 1fr;gap:.8rem}
  .facts-row{font-size:.95rem;gap:.3rem 1.1rem}
  footer .wrap{gap:.35rem 1.25rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* the contact section: the words on one side, the form on the other */
.contact-grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media(min-width:860px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-grid .cf{max-width:none}

/* ---------- the light version ----------
   same bones, paper instead of navy. the hero and the photo band keep their
   photographs and white type, because the type sits on the picture. */
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#FBF9F5; --paper-2:#F1EDE5; --paper-3:#E7E1D5;
  --ink:#141A24; --ink-soft:#3F4859; --ink-dim:#5B6373;
  --brass:#B8934E; --brass-text:#7A5C1E; --brass-soft:rgba(184,147,78,.16);
  --line:rgba(20,26,36,.14); --line-strong:rgba(20,26,36,.28);
  --paper-rgb:251,249,245;
  --btn-bg:#141A24; --btn-ink:#fff;
}
:root[data-theme="light"] .hero.plain .nav{color:var(--ink-soft)}
:root[data-theme="light"] .hero.plain h1,:root[data-theme="light"] .hero.plain .deal h1{color:var(--ink);text-shadow:none}
:root[data-theme="light"] .hero.plain .menu{color:var(--ink);border-color:var(--line-strong);background:transparent}
:root[data-theme="light"] .hero.plain .rating a{color:var(--ink);background:transparent;border-color:var(--line-strong)}
:root[data-theme="light"] .hero.plain .facts-row{color:var(--ink-soft);text-shadow:none}
:root[data-theme="light"] .hero:not(.plain)::after{background:
  radial-gradient(118% 76% at 100% 70%,rgba(7,14,26,.8) 0%,rgba(7,14,26,.5) 38%,rgba(7,14,26,0) 74%),
  linear-gradient(to top,var(--paper) 0%,rgba(7,14,26,.55) 10%,rgba(7,14,26,.55) 40%,rgba(7,14,26,.2) 65%,rgba(7,14,26,.45) 100%)}
:root[data-theme="light"] .hero:not(.plain) .b1{background:#fff;color:#141A24}
:root[data-theme="light"] .hero:not(.plain) .b1 svg{fill:#141A24}
:root[data-theme="light"] .close .b2,:root[data-theme="light"] .b2{border-color:var(--line-strong);color:var(--ink);background:transparent}
:root[data-theme="light"] .b2 svg{fill:var(--brass-text)}
:root[data-theme="light"] .photoband::after{background:linear-gradient(to top,rgba(7,14,26,.85) 0%,rgba(7,14,26,.45) 45%,rgba(7,14,26,.05) 100%)}
:root[data-theme="light"] .tag{filter:drop-shadow(0 8px 18px rgba(20,26,36,.35))}
:root[data-theme="light"] .menu{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(7,14,26,.35)}
:root[data-theme="light"] .notes img{box-shadow:0 10px 28px rgba(20,26,36,.18)}
:root[data-theme="light"] .nav .sub{box-shadow:0 14px 34px rgba(20,26,36,.18)}
:root[data-theme="light"] .cf input,:root[data-theme="light"] .cf textarea{background:#fff}
:root[data-theme="light"] .hero.plain .deal .b1{background:var(--btn-bg);color:var(--btn-ink)}
:root[data-theme="light"] .hero:not(.plain) .b2{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(7,14,26,.35)}
:root[data-theme="light"] .hero:not(.plain) .b2 svg{fill:var(--brass)}
:root[data-theme="light"] .hero:not(.plain) .rating a{color:#fff;background:rgba(7,14,26,.5);border-color:rgba(255,255,255,.35)}

/* ========== the sales-page structure (home) ========== */
/* hero as a collage: words on one side, three standing photographs on the other */
.hero.collage{min-height:auto;background:var(--paper)}
.hero.collage .deal{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(5rem,10vw,7.5rem) clamp(2.5rem,5vw,4rem)}
@media(min-width:900px){.hero.collage .deal{grid-template-columns:.9fr 1.1fr}}
.hero.collage h1{color:var(--ink);text-shadow:none;font-size:clamp(2.4rem,5.6vw,4.4rem)}
.hero.collage .sub{font-family:Secular,sans-serif;color:var(--brass-text);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.3;margin:.7rem 0 0;max-width:22ch;text-wrap:balance}
.hero.collage .lede{color:var(--ink-soft);text-shadow:none;max-width:36rem}
.hero.collage .rating a{color:var(--ink);background:transparent;border-color:var(--line-strong);backdrop-filter:none}
.hero.collage .b1{background:var(--btn-bg);color:var(--btn-ink)}.hero.collage .b1 svg{fill:var(--btn-ink)}
.hero.collage .b2{border-color:var(--line-strong);color:var(--ink);background:transparent}.hero.collage .b2 svg{fill:var(--brass-text)}
.hero.collage .nav{color:var(--ink-soft);text-shadow:none}
.hero.collage .nav a:hover{color:var(--ink)}
.hero.collage header::before{display:none}
.hero.collage .menu{color:var(--ink);border-color:var(--line-strong);background:transparent}
.collage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.6vw,1.1rem);align-items:end}
.collage-grid img{display:block;width:100%;height:auto;aspect-ratio:3/4.4;object-fit:cover;border-radius:22px}
.collage-grid img:nth-child(1){aspect-ratio:3/5;object-position:50% 20%}
.collage-grid img:nth-child(2){aspect-ratio:3/4;transform:translateY(-1.5rem)}
.collage-grid img:nth-child(3){aspect-ratio:3/5;object-position:50% 25%}
@media(max-width:899px){.collage-grid img:nth-child(2){transform:none}}

/* the phone call-out in the header */
.nav .call{display:inline-flex;align-items:center;gap:.5rem;background:var(--brass);color:#141A24;
  border-radius:999px;padding:.5rem 1rem;font-weight:600;text-shadow:none;line-height:1.1}
.nav .call svg{width:1rem;height:1rem;fill:currentColor}
.nav .call span{font-size:.82rem;font-weight:500}
.nav .call bdi{font-size:1rem}
.nav .call:hover{background:#d8b878;color:#141A24}
@media(max-width:560px){.nav .call span{display:none}}

/* an accent line inside a heading */
h2 .accent{color:var(--brass-text)}

/* what you get: a checklist with line icons beside a four-photo gallery */
.gets-grid{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;margin-block-start:clamp(1.75rem,4vw,2.75rem)}
@media(min-width:900px){.gets-grid{grid-template-columns:1fr 1fr}}
.gets{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.gets li{display:grid;grid-template-columns:2.6rem 1fr;gap:.9rem;align-items:start}
.gets svg{width:2.6rem;height:2.6rem;fill:none;stroke:var(--brass-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  background:var(--brass-soft);border-radius:12px;padding:.5rem}
.gets b{display:block;font-weight:600;color:var(--ink);margin-block-end:.1rem}
.gets span{color:var(--ink-soft);font-size:1.02rem;line-height:1.5}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.6vw,1rem)}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px}
.gallery img:nth-child(1){aspect-ratio:4/5}
.gallery img:nth-child(4){aspect-ratio:4/5}
.gallery img:nth-child(2),.gallery img:nth-child(3){align-self:end}
.actions.center{justify-content:center;margin-block-start:clamp(1.75rem,4vw,2.5rem)}

/* a colour block: the objection, answered */
.block{background:#141A24;color:#F1F5FA;padding-block:clamp(3rem,7vw,5.5rem)}
.block-grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.block-grid{grid-template-columns:1.1fr .9fr}}
.block h2{color:#fff;max-width:20ch}
.block p{color:#C9D3E2;max-width:var(--measure)}
.block .quote-big blockquote{color:#fff;font-size:clamp(1.2rem,2.2vw,1.55rem)}
.block .quote-big figcaption{color:#9FB0C6}
.block-img{margin:0}
.block-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
:root[data-theme="light"] .block{background:#141A24}

/* three quotes side by side */
.quotes.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}

/* the form as a band: heading, one row of fields, one button */
.form-band .cf{max-width:none;display:grid;gap:.9rem;align-items:end;margin-block-start:clamp(1.25rem,3vw,2rem)}
@media(min-width:760px){.form-band .cf{grid-template-columns:1fr 1fr 1.4fr auto}}
.form-band .cf-row{margin:0}
.form-band .cf .btn{white-space:nowrap}
.form-band .cf .hp{display:none}
.form-band .cf-note{margin-block-start:1rem}
.form-band h2{max-width:none}

/* ========== the nerd layer ==========
   Graph paper under the whole site, and line drawings — a parabola, a sine
   wave, a probability tree, a set of equations — sitting faintly behind the
   sections. Pure CSS backgrounds: no markup, nothing to fetch, nothing a
   screen reader meets. */
:root{--grid-ink:rgba(20,26,36,.055);--grid-ink-2:rgba(20,26,36,.11)}
.page{position:relative;isolation:isolate}
.page::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to left,var(--grid-ink) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-ink) 1px,transparent 1px),
    linear-gradient(to left,var(--grid-ink-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-ink-2) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px}
.hero.collage,.hero.plain{background-image:
    linear-gradient(to left,var(--grid-ink) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-ink) 1px,transparent 1px);
  background-size:28px 28px}
.sec,.block,.photoband{position:relative}
.sec>.wrap,.block>.wrap{position:relative;z-index:1}
.sec::after{content:'';position:absolute;z-index:0;pointer-events:none;opacity:.65;
  background-repeat:no-repeat;background-size:contain}
/* each section gets its own drawing, placed in the corner the text leaves empty */
.sec:nth-of-type(6n+1)::after{inset-block-start:1.5rem;inset-inline-start:2%;width:min(26rem,34vw);height:min(16rem,21vw);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 260' fill='none' stroke='rgba%2820%2C26%2C36%2C.55%29' stroke-width='1.2'%3E%3Cpath d='M20 230h380M60 250V20'/%3E%3Cpath d='M60 230C120 230 150 60 210 60s90 170 150 170' stroke-width='1.6'/%3E%3Cpath d='M150 230V125M270 230V125' stroke-dasharray='3 5'/%3E%3Ccircle cx='150' cy='125' r='3' fill='rgba%2820%2C26%2C36%2C.55%29' stroke='none'/%3E%3Ccircle cx='270' cy='125' r='3' fill='rgba%2820%2C26%2C36%2C.55%29' stroke='none'/%3E%3Ctext x='300' y='48' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='14' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3Ef%28x%29 = x%C2%B2%3C/text%3E%3Ctext x='70' y='252' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='11' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3E%CE%BC = 0  %CF%83 = 1%3C/text%3E%3C/svg%3E")}
.sec:nth-of-type(6n+2)::after{inset-block-end:1.5rem;inset-inline-start:3%;width:min(24rem,32vw);height:min(11rem,14vw);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 180' fill='none' stroke='rgba%2820%2C26%2C36%2C.55%29' stroke-width='1.2'%3E%3Cpath d='M10 90h380M20 160V20'/%3E%3Cpath d='M20 90c40-70 80-70 120 0s80 70 120 0 80-70 120 0' stroke-width='1.6'/%3E%3Ctext x='150' y='36' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='14' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3Ef%28x%29 = sin x%3C/text%3E%3Ctext x='286' y='128' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='12' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3ET = 2%CF%80%3C/text%3E%3C/svg%3E")}
.sec:nth-of-type(6n+3)::after{inset-block-start:2rem;inset-inline-start:2%;width:min(28rem,36vw);height:min(9.5rem,12vw);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 150' fill='none'%3E%3Ctext x='8' y='28' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='15' fill='rgba%28122%2C92%2C30%2C.75%29'%3Ee%5E%28i%CF%80%29 %2B 1 = 0%3C/text%3E%3Ctext x='8' y='60' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='15' fill='rgba%28122%2C92%2C30%2C.75%29'%3EP%28A%7CB%29 = P%28B%7CA%29%C2%B7P%28A%29 / P%28B%29%3C/text%3E%3Ctext x='8' y='92' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='15' fill='rgba%28122%2C92%2C30%2C.75%29'%3E52%21 %E2%89%88 8.07 %C3%97 10%5E67%3C/text%3E%3Ctext x='8' y='124' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='15' fill='rgba%28122%2C92%2C30%2C.75%29'%3E%CF%86 = 1.618%E2%80%A6   %CF%80 = 3.14159%E2%80%A6%3C/text%3E%3C/svg%3E")}
.sec:nth-of-type(6n+4)::after{inset-block-end:2rem;inset-inline-start:-3rem;width:min(22rem,30vw);height:min(22rem,30vw);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none' stroke='rgba%2820%2C26%2C36%2C.55%29' stroke-width='1.2'%3E%3Ccircle cx='160' cy='160' r='148'/%3E%3Ccircle cx='160' cy='160' r='110' stroke-dasharray='4 6'/%3E%3Ccircle cx='160' cy='160' r='68'/%3E%3Cpath d='M160 12v296M12 160h296' stroke-width='.8'/%3E%3Cpath d='M160 160 268 95M160 160 96 266'/%3E%3Ctext x='176' y='146' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='13' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3E%CF%86 = 1.618%3C/text%3E%3C/svg%3E")}
.sec:nth-of-type(6n+5)::after{inset-block-start:1.5rem;inset-inline-start:3%;width:min(22rem,30vw);height:min(15rem,20vw);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220' fill='none' stroke='rgba%2820%2C26%2C36%2C.55%29' stroke-width='1.2'%3E%3Cpath d='M30 110h50M80 110 150 60M80 110 150 160M150 60 230 35M150 60 230 85M150 160 230 135M150 160 230 185'/%3E%3Ccircle cx='80' cy='110' r='4' fill='rgba%2820%2C26%2C36%2C.55%29' stroke='none'/%3E%3Ccircle cx='150' cy='60' r='3.5' fill='rgba%2820%2C26%2C36%2C.55%29' stroke='none'/%3E%3Ccircle cx='150' cy='160' r='3.5' fill='rgba%2820%2C26%2C36%2C.55%29' stroke='none'/%3E%3Ctext x='236' y='39' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='11' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3E1/4%3C/text%3E%3Ctext x='236' y='89' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='11' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3E1/4%3C/text%3E%3Ctext x='236' y='139' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='11' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3E1/4%3C/text%3E%3Ctext x='236' y='189' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='11' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3E1/4%3C/text%3E%3Ctext x='22' y='92' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='12' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3EP%3C/text%3E%3C/svg%3E")}
.sec:nth-of-type(6n)::after{inset-block-end:1.5rem;inset-inline-start:2%;width:min(26rem,34vw);height:min(16rem,21vw);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 260' fill='none' stroke='rgba%2820%2C26%2C36%2C.55%29' stroke-width='1.2'%3E%3Cpath d='M20 230h380M60 250V20'/%3E%3Cpath d='M60 230C120 230 150 60 210 60s90 170 150 170' stroke-width='1.6'/%3E%3Cpath d='M150 230V125M270 230V125' stroke-dasharray='3 5'/%3E%3Ccircle cx='150' cy='125' r='3' fill='rgba%2820%2C26%2C36%2C.55%29' stroke='none'/%3E%3Ccircle cx='270' cy='125' r='3' fill='rgba%2820%2C26%2C36%2C.55%29' stroke='none'/%3E%3Ctext x='300' y='48' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='14' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3Ef%28x%29 = x%C2%B2%3C/text%3E%3Ctext x='70' y='252' font-family='IBM Plex Mono%2CMenlo%2CConsolas%2Cmonospace' font-size='11' fill='rgba%28122%2C92%2C30%2C.75%29' stroke='none'%3E%CE%BC = 0  %CF%83 = 1%3C/text%3E%3C/svg%3E")}
/* the ruler down the edge */
.page::after{content:'';position:absolute;inset-block:0;inset-inline-end:0;width:2rem;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,rgba(20,26,36,.22) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(to bottom,rgba(122,92,30,.5) 0 1.5px,transparent 1.5px 70px);
  background-size:.7rem 100%,1.3rem 100%;background-position:right top,right top;background-repeat:repeat-y}
@media(max-width:900px){
  .sec::after{opacity:.35;width:min(16rem,52vw);height:min(10rem,32vw);inset-inline-start:1rem}
  .page::after{width:1.1rem}
  .page::before{background-size:22px 22px,22px 22px,110px 110px,110px 110px}
}
@media print{.page::before,.page::after,.sec::after{display:none}}

/* ========== the logo wall as one moving row ==========
   The list is written twice (the copy is aria-hidden), so moving the track by
   exactly half its width brings the copy into the place of the original and
   the loop has no seam. Padding, not gap, keeps the two halves equal. */
.clients{padding-block:clamp(1.25rem,3vw,2rem)}
.clients .wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem)}
.clients h2{margin:0;flex:none;white-space:nowrap}
.marquee{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent)}
.clients .marquee ul{display:flex;width:max-content;gap:0;grid-template-columns:none;
  animation:logos 70s linear infinite}
.clients .marquee li,.clients .marquee li:nth-child(n){display:flex;min-height:0;padding:.4rem clamp(1rem,2.4vw,1.75rem)}
.clients .marquee li img{max-height:2.4rem;width:auto}
.marquee:hover ul,.marquee:focus-within ul{animation-play-state:paused}
@keyframes logos{to{transform:translateX(50%)}}
@media(max-width:560px){
  .clients .wrap{flex-direction:column;align-items:flex-start;gap:.6rem}
  .marquee{width:100%}
  .clients .marquee li img{max-height:2rem}
}
@media(prefers-reduced-motion:reduce){
  .clients .marquee ul{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .clients .marquee li[aria-hidden]{display:none}
}

/* ========== less scrolling ========== */
.sec{padding-block:clamp(2.5rem,5.5vw,4.5rem)}
.block{padding-block:clamp(2.5rem,5.5vw,4.5rem)}
.gets-grid{margin-block-start:clamp(1.25rem,3vw,2rem)}
.gets{gap:.85rem}
@media(max-width:760px){
  /* two photographs carry the point on a phone; four was a second scroll */
  .gallery img:nth-child(n+3){display:none}
  .gallery img,.gallery img:nth-child(1){aspect-ratio:1}
  .block-img img{aspect-ratio:16/10}
  .feature-img.tall img{aspect-ratio:4/3;object-position:50% 22%}
  /* one WhatsApp note on a phone, the rest are a tap away on /reviews/ */
  .notes-home .note:nth-child(n+2){display:none}
  /* the event register becomes chips: the names are what people scan for */
  .types{grid-template-columns:1fr 1fr;gap:0 1rem}
  .types a{padding-block:.7rem}
  .types a span{display:none}
  .quotes.three{gap:1.1rem}
  .quotes.three figure:nth-child(3){display:none}
  .form-band .cf{gap:.6rem}
  .collage-grid img,.collage-grid img:nth-child(1),.collage-grid img:nth-child(3){aspect-ratio:3/4}
}

/* on a phone the photographs come first, in the space under the header,
   and the words follow — the person is seen before the pitch is read */
@media(max-width:899px){
  .hero.collage .deal{padding-block-start:1.75rem}
  .hero.collage .collage-grid{order:-1;margin-block-end:.5rem}
  .hero.collage .collage-grid img,
  .hero.collage .collage-grid img:nth-child(1),
  .hero.collage .collage-grid img:nth-child(3){aspect-ratio:3/4.2}
  .hero.collage .collage-grid img:nth-child(2){transform:translateY(.9rem)}
}

/* on a phone the buttons have to be on the first screen, Safari's bars
   included: the two buttons move up under the headline, the rating and the
   longer description follow them */
@media(max-width:899px){
  .hero.collage main{display:flex;flex-direction:column}
  .hero.collage main h1{order:1}
  .hero.collage main .sub{order:2;font-size:1.25rem;margin-block-start:.5rem}
  .hero.collage main .actions{order:3;margin-block-start:1rem}
  .hero.collage main .rating{order:4;margin-block-start:.9rem}
  .hero.collage main .lede{order:5;margin-block-start:.9rem}
  .hero.collage h1{font-size:clamp(2rem,9vw,2.6rem)}
  .hero.collage .collage-grid img,
  .hero.collage .collage-grid img:nth-child(1),
  .hero.collage .collage-grid img:nth-child(3){aspect-ratio:3/3.8}
  .hero.collage .collage-grid img:nth-child(2){transform:translateY(.6rem)}
}

/* the hero now ends at the rating: the longer description opens the next section */
@media(max-width:899px){
  .hero.collage .deal{padding-block-end:2.25rem}
  .hero.collage main .rating{margin-block-start:1rem}
}

/* room to breathe in the phone hero, measured so the buttons stay on the first screen */
@media(max-width:899px){
  .hero.collage .deal{padding-block-start:2rem;gap:0}
  .hero.collage .collage-grid{margin-block-end:1.75rem;gap:.75rem}
  .hero.collage main .sub{margin-block-start:.85rem;line-height:1.45}
  .hero.collage main .actions{margin-block-start:1.6rem;gap:.75rem}
  /* one button per line: the primary one first, full width, easy to hit */
  .hero.collage main .actions .btn{flex:1 1 100%;padding-block:.95rem}
  .hero.collage main .rating{margin-block-start:1.4rem}
}
@media(max-width:380px){
  .hero.collage .collage-grid img,
  .hero.collage .collage-grid img:nth-child(1),
  .hero.collage .collage-grid img:nth-child(3){aspect-ratio:3/3.4}
  .hero.collage .collage-grid{margin-block-end:1.4rem}
}

/* bigger logos, quicker drift */
.clients .marquee ul{animation-duration:42s}
.clients .marquee li img{max-height:3.1rem}
.clients .marquee li,.clients .marquee li:nth-child(n){padding-inline:clamp(1.25rem,2.8vw,2.25rem)}
@media(max-width:560px){.clients .marquee li img{max-height:2.55rem}}

/* the showreel, right under the logo row: nothing loads until it is played */
.reel-top{padding-block:clamp(1.75rem,4vw,3rem)}
.reel-top .wrap{display:grid;gap:clamp(1rem,3vw,2.5rem);align-items:center}
@media(min-width:900px){.reel-top .wrap{grid-template-columns:.8fr 1.2fr}}
.reel-top h2{margin-block-end:.5rem}
.reel-top p{margin:0}
.reel-top video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;background:#000;cursor:pointer}

/* the line drawings always sit on the left, the side Hebrew text leaves empty */
.sec::after{right:auto !important;left:1.5% !important}
/* the form bands keep their left side for the send button */
.form-band::after{display:none}

/* ========== the footer: a site map in four columns ========== */
footer{padding-block:clamp(2.5rem,5vw,3.75rem) 1.5rem;font-size:1rem}
footer .foot{display:grid;gap:2rem 2.5rem;align-items:start;justify-content:stretch}
@media(min-width:900px){footer .foot{grid-template-columns:1.4fr 1fr .8fr .8fr}}
@media(min-width:560px) and (max-width:899px){footer .foot{grid-template-columns:1fr 1fr}footer .foot-brand{grid-column:1/-1}}
footer .foot-name{font-family:Secular,sans-serif;font-size:1.5rem;color:var(--ink);margin:0 0 .4rem}
footer .foot-brand p{margin:0 0 .8rem;max-width:26rem;color:var(--ink-soft)}
footer .foot-rating a{color:var(--ink);padding:0;min-height:0}
footer .foot-brand .btn{display:inline-flex;padding:.8rem 1.4rem;margin-block-start:.3rem;color:var(--btn-ink)}
footer .foot-h{font-weight:600;color:var(--ink);margin:0 0 .4rem}
footer ul{list-style:none;margin:0;padding:0}
footer .foot-col a{padding-block:.35rem;color:var(--ink-soft)}
footer .foot-col a:hover{color:var(--brass-text)}
footer .foot-base{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-block-start:2rem;padding-block-start:1rem;border-block-start:1px solid var(--line);font-size:.95rem}
@media(max-width:559px){footer .foot{grid-template-columns:1fr 1fr}footer .foot-brand{grid-column:1/-1}
  footer .foot-col:last-child{grid-column:auto}}

/* the videos page: a grid of clips, posters only until played */
.clips{display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));
  margin-block:clamp(1rem,3vw,2rem) clamp(2rem,5vw,3rem)}
.clip{margin:0}
.clip video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#000}
.clip.tall video{aspect-ratio:9/16;max-height:34rem;width:auto;margin-inline:auto}
.clip figcaption{margin-block-start:.6rem;color:var(--ink-soft)}
.clip figcaption b{display:block;color:var(--ink);font-weight:600}
.clip .dur{color:var(--ink-dim);font-size:.92rem;white-space:nowrap}