/* ===== REBWAND, ON HACKETT STUDIO'S SYSTEM (27 Oct 2026). Source: rebwand-studio/tools/rebwand-hackett/site.css.
   His brief: "can we clone hackett studio ... as a baseline to work away from ... clone it completely away from the brand
   itself, but everything else other then that should be cloned". So: Hackett's page system (near-black, one accent,
   Inter Display at 600 with tight tracking, bracketed section labels, a giant wordmark filled with moving chrome, the
   founder card, the crowd that gathers, the greyscale work grid, the bento, the opening process columns, the footer on
   dark satin with the wordmark set huge) carrying Rebwand's own name, wordmark, words, prices and blue.
   Hover, one system for the whole page:
     press   - a filled button inverts (blue to white, white to blue); an outlined one fills white with dark type
     choose  - a process column or a question row lifts to full white and its mark turns
     read on - a line draws under the words and the arrow steps up and right
   ===== */
:root{
  --bg:#050505;            /* the page */
  --bg2:#0b0b0b;           /* cards */
  --bg3:#121212;           /* a raised cell */
  --fg:#fff;
  --mute:rgba(255,255,255,.46);   /* the grey half of every two-tone line */
  --mute2:rgba(255,255,255,.62);  /* small print */
  --line:rgba(255,255,255,.1);    /* hairlines */
  --accent:#38B6FF;        /* Rebwand blue: the one colour (Hackett's lime in the same jobs) */
  --accent-ink:#04131f;    /* type on the blue */
  --gut:2rem;              /* the page gutter */
  --e:cubic-bezier(.22,1,.36,1);   /* Hackett's reveal curve */
  --disp:"Inter",system-ui,sans-serif;
  --mark:"Bricolage Grotesque",sans-serif;
}
html{font-size:clamp(15px,calc(.5vw + 8.8px),22px);background:var(--bg);-webkit-text-size-adjust:100%}
*{margin:0;padding:0;box-sizing:border-box}
body{background:transparent;color:var(--fg);font-family:var(--disp);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;font-weight:600;font-variation-settings:"opsz" 32;letter-spacing:-.035em}
b,strong,em{font-weight:600}
/* em spacing is passed down as a fixed length, so each element takes its own: -.035em of its own size, as the statement */
/* THE STATEMENT'S SPACING, BY SIZE (his note: the [01] statement is "perfect", the questions and Why Us "look off").
   The statement is display-size type at -.035em with lines at 1.22 and its first line indented. Small type at the same
   -.035em comes out cramped (Hackett loosens to about -.02em at 14px), so the tracking follows the size: display lines
   (about 20px and up) take the statement's -.035em and its leading; reading-size text takes -.02em. */
body *{letter-spacing:-.02em}
h1,h2,h3,h1 *,h2 *,h3 *,.stmt,.stmt *,.why p.say,.why p.say *,.sl-q p *,.sl-q p,.pc-b b,.bx .n,.svc-n b,.ft-mail,.ft-nav ul a,.ft-q,.mn-l a,.mn-b .big,
.crowd-ratio p,.crowd-ratio p *,.pr-facts b,.tile-c b,.hero-c,.hero-c *,.faq-h h2,.svc-t,.card-b b{letter-spacing:-.035em}
.ft-nav ul a span,.mn-l a span,.crowd-ratio small{letter-spacing:-.02em}
.hd-brand *,.wm-t *,.ft-wm *,.bx.ph .tag *{letter-spacing:inherit}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3,.d{font-family:var(--disp);font-weight:600;font-variation-settings:"opsz" 32;line-height:1.2}
/* ONE FACE EVERYWHERE (his words, on the [01] statement: "whatever font this is, PERFECT ... apply this everywhere besdies
   rebwand assets logo"): Inter at its display optical size, semibold, tracked tight, for every word on the page; the
   greys carry the hierarchy, not lighter weights. The rebwand wordmarks keep the brand setting (Bricolage 770, its own
   optical size), so they are taken out of the page setting here. */
.hd-brand,.wm-t,.ft-wm,.bx.ph .tag{font-variation-settings:normal}
.g{color:var(--mute)}
.w{color:var(--fg)}

/* the two hairlines that run the length of the page on the gutters (Hackett's frame) */
body::before{content:"";position:fixed;inset:0 calc(var(--gut) - 1px);border-inline:1px solid rgba(255,255,255,.06);pointer-events:none;z-index:1}

/* ---------- reveal (Hackett: 35px, 800ms on --e) ---------- */
.js .rv{opacity:0;transform:translateY(35px);transition:opacity .8s var(--e),transform .8s var(--e)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- the opening (armed in the head) ---------- */
.intro{display:none}
html.intro-on .intro{display:grid;position:fixed;inset:0;z-index:100;background:#000;place-items:center;transition:opacity .7s ease}
html.intro-on{overflow:hidden}
/* the opening: the Rebwand mark, off-white on black, settling in from a touch smaller with a short blur (the brand mark
   from rebwand-assets, "Logo Mark Snow") */
.intro-m{width:clamp(4.5rem,9vw,7rem);height:auto;opacity:0;transform:scale(.9);filter:blur(6px);animation:markIn .9s cubic-bezier(.22,1,.36,1) .15s forwards}
@keyframes markIn{to{opacity:1;transform:none;filter:none}}
html.intro-out .intro{opacity:0;pointer-events:none}

/* ---------- header: name | city and clock | work | menu, clear over the page ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;height:4rem;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;font-size:.8125rem;font-weight:600;white-space:nowrap}
.hd::before{content:"";position:absolute;inset:0 0 -2.5rem;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:linear-gradient(180deg,rgba(5,5,5,.92) 0%,rgba(5,5,5,.7) 55%,rgba(5,5,5,0) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
html.scrolled .hd::before{opacity:1}
.hd-brand{display:inline-flex;align-items:baseline;font-family:var(--mark);font-weight:770;letter-spacing:-.04em;font-size:1.0625rem;justify-self:start;padding-block:.5rem}
.hd-brand i{font-style:normal;font-weight:400;opacity:.88}
.hd-brand sup{font-family:var(--disp);font-size:.5em;font-weight:600;margin-left:.15em;opacity:.7;align-self:flex-start}
.hd-city b,.hd-work b{font-weight:600}
.hd-city span,.hd-work span{color:var(--mute2);font-weight:600}
.hd-work{justify-self:start;padding-block:.5rem}
.hd-burger{justify-self:end;width:2.75rem;height:2.75rem;display:grid;place-items:center;margin-right:-.6rem}
.hd-burger i{display:block;width:1.25rem;height:1.5px;background:currentColor;position:relative;transition:transform .4s var(--e)}
.hd-burger i::after{content:"";position:absolute;right:0;top:.375rem;width:.8rem;height:1.5px;background:currentColor;transition:width .4s var(--e)}
@media(hover:hover){.hd-burger:hover i::after{width:1.25rem}}
@media(max-width:760px){
  .hd{grid-template-columns:auto 1fr auto;gap:1rem}
  .hd-city,.hd-work{display:none}
  .hd-mail{display:inline-block!important;color:var(--mute2);font-weight:600;justify-self:start;padding-block:.5rem}
}
.hd-mail{display:none}

/* ---------- the menu: a panel from the right ---------- */
.mn{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.mn-sh{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .5s var(--e)}
.mn-p{position:absolute;top:0;right:0;bottom:0;width:min(30rem,100%);background:#0c0c0c;border-left:1px solid var(--line);padding:1.25rem var(--gut) 2rem;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .7s var(--e);overflow-y:auto}
html.menu-open .mn{visibility:visible;pointer-events:auto}
html.menu-open .mn-sh{opacity:1}
html.menu-open .mn-p{transform:none}
.mn-top{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;color:var(--mute2);font-weight:600}
.mn-x{width:2.75rem;height:2.75rem;display:grid;place-items:center;margin-right:-.6rem;font-size:1.5rem;color:var(--fg)}
.mn-l{margin-top:2.5rem;display:grid;gap:.25rem}
.mn-l a{font-size:2.5rem;font-weight:600;line-height:1.15;display:inline-flex;align-items:baseline;gap:.4rem}
.mn-l a span{font-size:.9rem;color:var(--mute);font-weight:600}
@media(hover:hover){.mn-l a{transition:color .3s ease}.mn-l:hover a{color:var(--mute)}.mn-l a:hover{color:var(--fg)}}
.mn-b{margin-top:auto;padding-top:2.5rem;display:grid;gap:1.5rem;font-size:.875rem}
.mn-b small{display:block;font-size:.75rem;color:var(--mute);margin-bottom:.35rem;font-weight:600}
.mn-b .big{font-size:1.25rem;font-weight:600}

/* ---------- shared pieces ---------- */
.lab{font-size:.75rem;font-weight:600;color:var(--mute2);white-space:nowrap}
.lab b{color:var(--fg);font-weight:600;margin-right:.35rem}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);column-gap:2rem;padding-inline:var(--gut)}
.row > .lab{padding-top:.5rem}
.sec{padding-block:9rem;position:relative}
.sec + .sec{border-top:1px solid var(--line)}
.go{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;padding-block:.5rem;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .35rem)/0 1px no-repeat;transition:background-size .45s var(--e)}
.go::after{content:"\2197";display:inline-block;transition:transform .35s var(--e)}
@media(hover:hover){.go:hover{background-size:100% 1px}.go:hover::after{transform:translate(.15rem,-.15rem)}}
.go:focus-visible{background-size:100% 1px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:.8125rem;padding:.75rem 1rem;border-radius:.25rem;transition:background .3s ease,color .3s ease;white-space:nowrap}
@media(hover:hover){.btn:hover{background:#fff;color:#050505}}
.btn:focus-visible{background:#fff;color:#050505}
.btn svg{width:1rem;height:1rem;flex:none}
h2.big{font-size:clamp(2.2rem,3.6vw,3.6rem)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;padding:5rem var(--gut) 2rem;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.wm{position:relative;isolation:isolate;user-select:none;margin-left:-.04em}
.wm canvas,.wm .wm-fb{position:absolute;inset:0;width:100%;height:100%;z-index:0;visibility:hidden;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* the chrome shows only through the letters: a mask drawn from the words themselves (site.js maskWm), so the textured
   page runs behind the name with no box. Until the mask is ready the words show as plain light grey. */
.wm.masked canvas,.wm.masked .wm-fb{visibility:visible}
.wm-fb{background:linear-gradient(115deg,#1a1a1a 0%,#8d8f93 18%,#e9eaec 26%,#4a4b4e 38%,#cfd1d4 52%,#2b2c2e 63%,#b9bbbf 77%,#f4f5f6 84%,#3d3e40 100%);background-size:220% 100%;animation:chrome 14s ease-in-out infinite alternate}
@keyframes chrome{to{background-position:100% 0}}
.wm canvas{display:none}
.wm.gl canvas{display:block}
.wm.gl .wm-fb{display:none}
.wm-t{position:relative;z-index:1;color:#9a9ca0;font-family:var(--mark);font-weight:770;letter-spacing:-.045em;line-height:.8;font-size:var(--wmS,18vw);padding-bottom:.06em}
/* one line (his words: "on land we dont need rebwand.io across 2 lines"): the name and ".io" sit side by side */
.wm-t{white-space:nowrap}
.wm-t span{display:inline-block;white-space:nowrap}
.wm-t .l2{font-weight:400;letter-spacing:-.04em}
.hero-mid{margin-top:calc(var(--midUp,0px) * -1);display:grid;grid-template-columns:minmax(0,1fr) 13.5rem minmax(0,1fr);column-gap:2rem;align-items:stretch;position:relative;z-index:2}
.hero-a{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding-top:1rem}
.hero h1{font-size:clamp(1.15rem,1.55vw,1.6rem);font-weight:600;line-height:1.22;letter-spacing:-.035em;max-width:24rem}   /* v2: the line "Website & Socials, Rebuilt." at a headline size, in the services line's place */
.hero h1 span{color:var(--mute2);font-weight:600}
.proofrow{display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:var(--mute2)}
.coins{display:flex}
.coins img,.coins span{width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid var(--bg);background:#1b1b1b;object-fit:cover;margin-left:-.45rem;filter:grayscale(1)}
.coins img:first-child{margin-left:0}
.coins span{display:grid;place-items:center;font-size:.75rem;font-weight:600;color:var(--fg);width:auto;padding:0 .55rem;border-radius:1rem;filter:none}
.proofrow b{display:block;color:var(--fg);font-weight:600;font-size:.8125rem}
.card{align-self:start;margin-top:calc(var(--cardUp,6rem) * -1);background:#0d0d0d;border:1px solid var(--line);border-radius:.375rem;overflow:hidden;box-shadow:0 1.5rem 3rem rgba(0,0,0,.5)}
.card-ph{position:relative;aspect-ratio:1/.92;overflow:hidden;background:#151515}
.card-ph img{width:100%;height:100%;object-fit:cover;object-position:left top;filter:grayscale(1) contrast(1.05)}
.card-ph .pill{position:absolute;left:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.4rem;background:rgba(5,5,5,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1rem;padding:.3rem .6rem;font-size:.6875rem;font-weight:600}
.pill i{width:.4rem;height:.4rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(56,182,255,.6);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 .45rem rgba(56,182,255,0)}100%{box-shadow:0 0 0 0 rgba(56,182,255,0)}}
.pill span{color:var(--mute2);font-weight:600}
.card-b{padding:.85rem .85rem 0}
.card-b b{display:block;font-size:.9375rem;font-weight:600}
.card-b small{font-size:.75rem;color:var(--mute2)}
.card-m{display:flex;justify-content:space-between;align-items:center;margin:.75rem .85rem 0;padding:.6rem 0;border-top:1px solid var(--line);font-size:.75rem;color:var(--mute2)}
.card-m b{color:var(--fg);font-weight:600}
.card-m svg{width:.9rem;height:.9rem}
@media(hover:hover){.card-m:hover b{color:var(--accent)}}
.card .btn{display:flex;margin:.25rem .6rem .6rem}
.hero-c{align-self:end;font-size:1.0625rem;font-weight:600;line-height:1.25;max-width:22rem;justify-self:end;padding-bottom:.25rem}
.hero-c .g{font-weight:600}

/* ---------- the promise ticker (Hackett's tools strip) ---------- */
.tk{border-block:1px solid var(--line);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tk-r{display:flex;width:max-content;animation:tk 48s linear infinite}
.tk-g{display:flex;flex:none}
.tk-g span{display:inline-flex;align-items:center;gap:.6rem;padding:1.6rem 3.25rem;font-size:.875rem;font-weight:600;white-space:nowrap;color:var(--mute2)}
.tk-g svg{width:1rem;height:1rem;color:var(--fg)}
@keyframes tk{to{transform:translateX(-50%)}}
.tk.off .tk-r{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.tk-r{animation:none}}

/* ---------- [01] the statement lit word by word ---------- */
.stmt{font-size:clamp(1.6rem,2.35vw,2.4rem);font-weight:600;line-height:1.22;text-indent:2.6em}
.wd{color:#fff;opacity:.18;transition:opacity .25s linear}

/* ---------- the crowd ---------- */
.crowd{height:260vh;position:relative;padding:0!important}
.crowd-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr;padding:5.5rem var(--gut) 3rem;overflow:hidden}
.crowd-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.crowd-top .lab i{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);margin-right:.5rem}
.crowd-st{position:relative;margin-top:1.5rem}
.crowd-st canvas{position:absolute;inset:0;width:100%;height:100%}
.crowd-ratio{position:absolute;left:0;bottom:0;z-index:2}
.crowd-ratio p{font-size:1.25rem;font-weight:600;line-height:1}
.crowd-ratio p b{font-size:clamp(3rem,5vw,5rem);color:var(--accent);font-weight:600;margin-left:.3rem;font-variant-numeric:tabular-nums}
.crowd-ratio small{display:block;font-size:.9375rem;color:var(--fg);margin-top:.4rem;font-weight:600}
.crowd-lab{position:absolute;z-index:2;transform:translate(-50%,calc(var(--rr,4rem) + .6rem));text-align:center;opacity:var(--lo,0);transition:opacity .4s ease}
.crowd-lab em{display:inline-block;font-style:normal;background:var(--accent);color:var(--accent-ink);font-size:.75rem;font-weight:600;;padding:.2rem .5rem;border-radius:1rem}
.crowd-lab small{display:block;margin-top:.35rem;font-size:.6875rem;color:var(--mute2);white-space:nowrap}
.crowd-lab small b{color:var(--fg);font-variant-numeric:tabular-nums}
.crowd-note{font-size:.6875rem;color:var(--mute);max-width:16rem;text-align:right}

/* ---------- [02] why us ---------- */
.why p.say{font-size:clamp(1.25rem,1.6vw,1.7rem);font-weight:600;line-height:1.22;text-indent:2.6em;max-width:40rem;margin-left:auto;margin-right:12%}

/* ---------- [03] recent work ---------- */
.work-h{margin-bottom:5rem}
.work-h p{margin-top:1rem;font-size:.8125rem;color:var(--mute2);font-weight:600}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 1rem;padding-inline:var(--gut)}
.tile{display:block;perspective:900px}
.tile-ph{position:relative;aspect-ratio:1/.93;overflow:hidden;background:#141414;transform-style:preserve-3d;transition:transform 1s cubic-bezier(0,.33,.07,1.03)}
.tile-ph img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.08) brightness(.9);transform:scale(1.02);transition:filter .7s var(--e),transform 1s var(--e)}
.tile-ph::after{content:"+";position:absolute;right:.6rem;bottom:.45rem;font-size:1rem;color:#fff;font-weight:400;transition:transform .4s var(--e)}
@media(hover:hover){
  .tile:hover .tile-ph img{filter:none;transform:scale(1.06)}
  .tile:hover .tile-ph::after{transform:rotate(90deg)}
}
.tile:focus-visible .tile-ph img{filter:none}
.tile-c{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;padding-top:1rem}
.tile-c b{font-size:1.0625rem;font-weight:600}
.tile-c span{font-size:.75rem;color:var(--mute2);font-weight:600;padding-top:.2rem}
.tile-c small{grid-column:1/-1;font-size:.75rem;color:var(--mute2);margin-top:.2rem}
.work-f{display:flex;justify-content:flex-end;padding:3rem var(--gut) 0}

/* ---------- [04] why it works: the bento ---------- */
/* the lead line only: ".mo-h p" also caught the [05] label and pushed it 28px below the heading (his note, 30 Oct:
   "the [0x] is not in line properly") */
.mo-h .rv > p{margin-top:1.75rem;max-width:30rem;font-size:.9375rem;color:var(--mute2);line-height:1.6}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(13rem,auto));gap:.75rem;margin:5rem var(--gut) 0}
.bx{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:.375rem;padding:1.5rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;min-height:13rem}
.bx.tall{grid-row:span 2}
.bx .n{font-size:clamp(2rem,2.6vw,2.75rem);font-weight:600;line-height:1;position:relative;z-index:1}
.bx p{font-size:.8125rem;color:var(--mute2);margin-top:.6rem;max-width:17rem;position:relative;z-index:1;line-height:1.45}
.bx svg.art{position:absolute;pointer-events:none}
.bars{position:absolute;left:1.5rem;right:1.5rem;top:2.5rem;bottom:9.5rem;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem;align-items:end}
.bars i{display:block;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08));border-radius:.15rem .15rem 0 0;height:calc(var(--h) * 1%);transform-origin:bottom;transform:scaleY(.05);transition:transform 1.2s var(--e)}
.bars i:last-child{background:linear-gradient(180deg,var(--accent),rgba(56,182,255,.15))}
.bx.in .bars i{transform:none}
.bars-x{position:absolute;left:1.5rem;right:1.5rem;bottom:8rem;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem;font-size:.625rem;color:var(--mute);text-align:center}
.bx.ph{padding:0}
.bx.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.75)}
.bx.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.1),rgba(5,5,5,.85));z-index:0}
.bx.ph .in-c{position:relative;z-index:1;padding:1.5rem}
.bx.ph .tag{position:absolute;top:1.25rem;left:1.5rem;z-index:1;font-family:var(--mark);font-weight:770;letter-spacing:-.04em;font-size:.9375rem}
.bx.ph .tag i{font-style:normal;font-weight:400;opacity:.88}
.bx .ic{position:absolute;top:1.25rem;right:1.25rem;width:2rem;height:2rem;border:1px solid var(--line);border-radius:.25rem;display:grid;place-items:center;color:var(--fg)}
.bx .ic svg{width:.9rem;height:.9rem}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding:5.5rem var(--gut) 0}
.feat h3{font-size:clamp(1.4rem,1.9vw,1.9rem)}
.feat h4{font-size:.9375rem;font-weight:600;margin-top:.9rem}
.feat p{font-size:.8125rem;color:var(--mute2);margin-top:.5rem;max-width:19rem;line-height:1.55}
.feat svg{width:1.1rem;height:1.1rem}

/* ---------- [05] process: the columns that open ---------- */
.pr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);column-gap:2rem;padding-inline:var(--gut);margin-top:6rem}
.pr-facts{display:flex;flex-direction:column;justify-content:flex-end;gap:2.5rem}
.pr-facts svg{width:1rem;height:1rem}
.pr-facts b{display:block;font-size:1.25rem;font-weight:600;margin-top:.6rem}
.pr-facts p{font-size:.8125rem;color:var(--mute2);margin-top:.35rem;max-width:16rem;line-height:1.5}
.cols{display:flex;gap:.6rem;height:clamp(26rem,34vw,32rem)}
.pc{position:relative;flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:.375rem;background:var(--bg2);overflow:hidden;transition:flex-grow .8s var(--e),background .4s ease,border-color .4s ease;text-align:left;display:block}
.pc.on{flex-grow:4.2;background:#0e0e0e;border-color:rgba(255,255,255,.22)}
.pc-n{position:absolute;top:1.1rem;left:1.1rem;font-size:1.75rem;font-weight:600;color:var(--mute);writing-mode:vertical-rl;transform:rotate(180deg);transition:color .4s ease}
.pc.on .pc-n{color:var(--fg)}
@media(hover:hover){.pc:hover .pc-n{color:var(--fg)}}
.pc-b{position:absolute;left:1.5rem;bottom:1.5rem;width:min(21rem,calc(100% - 3rem));min-width:17rem;opacity:0;transform:translateY(.75rem);transition:opacity .45s ease,transform .6s var(--e)}
.pc.on .pc-b{opacity:1;transform:none;transition-delay:.25s}
.pc-b b{display:block;font-size:1.375rem;font-weight:600;line-height:1.22}
.pc-b p{font-size:.8125rem;color:var(--mute2);margin-top:.75rem;line-height:1.55}
.pc-b small{display:flex;justify-content:space-between;margin-top:1.1rem;padding-top:.75rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--mute2)}
.pc-b small em{font-style:normal;color:var(--accent);font-weight:600}

/* ---------- [06] built for business: the slider, then the three services ---------- */
.sl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);column-gap:2rem;padding-inline:var(--gut);margin-top:6rem}
.sl-ph{display:grid;width:min(18rem,100%)}
.sl-ph figure{grid-area:1/1;opacity:0;transition:opacity .7s ease;visibility:hidden}
.sl-ph figure.on{opacity:1;visibility:visible}
.sl-ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.sl-ph figcaption{font-size:.75rem;font-weight:600;margin-top:.75rem}
.sl-ph figcaption span{display:block;color:var(--mute2);font-weight:600}
.sl-q{display:grid;align-items:start}
.sl-q blockquote{grid-area:1/1;opacity:0;transform:translateY(.75rem);transition:opacity .6s ease,transform .7s var(--e);visibility:hidden}
.sl-q blockquote.on{opacity:1;transform:none;visibility:visible}
.sl-q blockquote::before{content:"\201C";display:block;font-size:2rem;line-height:1;color:var(--mute);margin-bottom:.75rem}
.sl-q p{font-size:clamp(1.4rem,2vw,2rem);font-weight:600;line-height:1.22;max-width:34rem}
.sl-nav{display:flex;gap:.35rem;margin-top:1.25rem}
.sl-nav button{width:1.9rem;height:1.9rem;border:1px solid var(--line);border-radius:.25rem;display:grid;place-items:center;font-size:.8rem;transition:background .3s ease,color .3s ease,border-color .3s ease}
@media(hover:hover){.sl-nav button:hover{background:#fff;color:#050505;border-color:#fff}}
.sv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:6rem var(--gut) 0;align-items:stretch}
.svc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:.375rem;background:var(--bg2)}
.svc-t{padding:1.5rem 1.5rem 0;text-align:center;font-size:1.0625rem;font-weight:600;}
.svc-b{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.svc-b p{font-size:.875rem;line-height:1.55;color:var(--fg)}

.svc-b .go{align-self:flex-end;margin-top:auto;padding-top:1.25rem}
.svc-n{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.svc-n div{padding:1.1rem 1.5rem}
.svc-n div + div{border-left:1px solid var(--line)}
.svc-n b{display:block;font-size:1.5rem;font-weight:600}
.svc-n small{font-size:.6875rem;color:var(--mute2)}
.svc-f{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.5rem;border-top:1px solid var(--line);font-size:.75rem;font-weight:600}
.svc-f span{color:var(--mute2);font-weight:600}
.svc-f img{width:1.6rem;height:1.6rem;border-radius:.2rem;object-fit:cover;filter:grayscale(1)}
.svc.best{border-color:rgba(56,182,255,.45)}
.svc.best .svc-t{color:var(--accent)}

/* ---------- [07] questions ---------- */
.faq-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);column-gap:2rem;padding-inline:var(--gut)}
.faq-l{display:flex;flex-direction:column;justify-content:space-between;gap:3rem}
.faq-h h2{font-size:clamp(3rem,5vw,5rem)}
.faq-h p{margin-top:1rem;font-size:.875rem;color:var(--mute2)}
.ask b{display:block;font-size:1rem;font-weight:600}
.ask p{font-size:.8125rem;color:var(--mute2);margin-top:.35rem;max-width:16rem}
.who{display:flex;align-items:center;gap:.6rem;margin-top:1.25rem;font-size:.75rem;font-weight:600}
.who img{width:2rem;height:2rem;border-radius:.25rem;background:#0d0d0d;padding:.3rem;border:1px solid var(--line)}
.who span{display:block;color:var(--mute2);font-weight:600}
.ask .go{margin-top:.4rem}
.qs{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;padding:1.15rem 0;font-size:.9375rem;font-weight:600;color:var(--mute2);transition:color .3s ease}
.q button i{font-style:normal;font-size:1.1rem;font-weight:400;transition:transform .4s var(--e)}
.q.on button{color:var(--fg)}
.q.on button i{transform:rotate(45deg)}
@media(hover:hover){.q button:hover{color:var(--fg)}}
.q-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.q.on .q-a{grid-template-rows:1fr}
.q-a > div{overflow:hidden}
.q-a p{font-size:.9375rem;color:var(--mute2);line-height:1.5;max-width:40rem;padding-bottom:1.25rem}

/* ---------- footer on dark satin ---------- */
.ft{position:relative;overflow:hidden;background:#030303;border-top:1px solid var(--line);padding:3rem var(--gut) 0;min-height:100svh;display:flex;flex-direction:column}
.ft canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.ft > *:not(canvas){position:relative;z-index:1}
.ft-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;align-items:start;font-size:.8125rem;font-weight:600}
.ft-top .hd-brand{padding:0}
.ft-top .muted{color:var(--mute2);font-weight:600}
.cb{grid-column:3/5;justify-self:end;width:min(24rem,100%)}
.cb label.t{display:block;font-size:.75rem;color:var(--mute2);font-weight:600;margin-bottom:.6rem}
.cb-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 2.6rem;gap:.35rem}
.cb input[type=text],.cb input[type=email]{width:100%;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:.25rem;padding:.7rem .75rem;font:inherit;font-size:.8125rem;color:var(--fg)}
.cb input::placeholder{color:var(--mute)}
.cb input:focus{outline:none;border-color:var(--accent)}
.cb button{background:#fff;color:#050505;border-radius:.25rem;font-size:1.1rem;display:grid;place-items:center;transition:background .3s ease,color .3s ease}
@media(hover:hover){.cb button:hover{background:var(--accent);color:var(--accent-ink)}}
.cb-ok{display:none;font-size:.875rem;color:var(--fg);margin-top:.25rem}
.cb.sent .cb-r{display:none}
.cb.sent .cb-ok{display:block}
.ft-mid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;margin-top:5rem}
.ft-mail{font-size:clamp(1.4rem,2vw,2rem);font-weight:600;display:inline-block;padding-block:.25rem}
.ft-mail::after{content:" +";color:var(--mute)}
@media(hover:hover){.ft-mail:hover{color:var(--accent)}}
.ft-q{margin-top:2.5rem;font-size:1.25rem;font-weight:600;line-height:1.22;max-width:30rem;text-indent:1.5em;position:relative}
.ft-q::before{content:"\201C";position:absolute;left:-1.5em;top:-.1em;text-indent:0;font-size:1.6rem;line-height:1}
.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.ft-nav ul a{display:inline-flex;align-items:baseline;gap:.35rem;font-size:1.375rem;font-weight:600;line-height:1.35}
.ft-nav ul a span{font-size:.75rem;color:var(--mute);font-weight:600}
@media(hover:hover){.ft-nav ul{transition:color .3s}.ft-nav ul:hover a{color:var(--mute)}.ft-nav ul a:hover{color:var(--fg)}}
.ft-nav small{display:block;font-size:.75rem;color:var(--mute);font-weight:600;margin-bottom:.6rem}
.ft-nav .sm a{font-size:.9375rem}
.ft-low{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;padding-top:5rem;font-size:.75rem;color:var(--mute2);font-weight:600;flex-wrap:wrap}
.ft-low a{display:inline-flex;align-items:center;gap:.35rem;min-height:2rem}
@media(hover:hover){.ft-low a:hover{color:var(--fg)}}
.ft-low svg{width:1rem;height:1rem}
.ft-wm{font-family:var(--mark);font-weight:770;letter-spacing:-.05em;line-height:.78;font-size:var(--fwS,22vw);margin-top:1.5rem;padding-bottom:.02em;user-select:none}
.ft-wm span{display:block;width:max-content;white-space:nowrap}
.ft-wm .l2{padding-left:var(--fl2x,52%);color:#b8b8b8;font-weight:400;letter-spacing:-.04em}

/* THE LOWER SCREEN BLUR (his words: "implement a lower screen blur it ads alot of character"), Hackett's own: 18% of the
   screen tall (12% on a phone, min 110px / 80px), three layers that blur harder towards the edge (1.5, 4, 9px). It comes in
   over the first 170px of scroll and goes over the last 180px, so the first screen and the footer's wordmark stay sharp. */
/* no opacity, filter or will-change on this wrapper: any of them makes it a "backdrop root", and the layers inside would
   blur nothing (that is why the blur did not show). The fade is on each layer instead (--eo, from site.js). */
.eb{position:fixed;left:0;right:0;bottom:0;height:18vh;min-height:110px;pointer-events:none;z-index:40;--eo:0}
@media(max-width:767px){.eb{height:12vh;min-height:80px}}
.eb i{position:absolute;left:0;right:0;bottom:0;display:block;opacity:var(--eo)}
.eb i:nth-child(1){height:100%;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%);mask-image:linear-gradient(to bottom,transparent,#000 55%)}
.eb i:nth-child(2){height:70%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 60%);mask-image:linear-gradient(to bottom,transparent,#000 60%)}
.eb i:nth-child(3){height:42%;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 70%);mask-image:linear-gradient(to bottom,transparent,#000 70%)}

/* ---------- tablet and phone ---------- */
@media(max-width:1000px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .bx.tall{grid-row:auto;min-height:20rem}
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb{grid-column:1/-1;justify-self:start}
}
@media(max-width:760px){
  :root{--gut:1rem}
  .sec{padding-block:5.5rem}
  .row,.pr-grid,.sl,.faq-g,.ft-mid{grid-template-columns:minmax(0,1fr);row-gap:1.75rem}
  .hero{padding-top:4.5rem}
  .hero-mid{grid-template-columns:minmax(0,1fr);row-gap:1.75rem}
  .hero-a{display:contents}
  .hero h1{order:1;padding-top:.75rem}
  .card{order:2;margin-top:0;width:min(17rem,100%)}
  .proofrow{order:3}
  .hero-c{order:4;justify-self:start;font-size:1.125rem}
  .stmt{text-indent:0}
  .why p{margin:0}
  .crowd{height:220vh}
  .crowd-pin{padding-top:4.5rem}
  .crowd-note{display:none}
  .grid3{grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
  .work-h{margin-bottom:2.5rem}
  .bento{grid-template-columns:minmax(0,1fr);margin-top:3rem}
  .feat{grid-template-columns:minmax(0,1fr);padding-top:3.5rem}
  .pr-grid{margin-top:3rem}
  .pr-facts{order:2;flex-direction:row;gap:1.5rem}
  .pr-facts > div{flex:1 1 0;min-width:0}
  .cols{flex-direction:column;height:auto;gap:.5rem}
  .pc{flex:none!important}
  .pc-n{position:static;display:block;writing-mode:horizontal-tb;transform:none;font-size:1rem;padding:1.1rem 1.1rem 0}
  .pc-b{position:static;display:block;width:auto;min-width:0;opacity:1;transform:none;padding:.35rem 1.1rem 1.1rem}
  .pc-b p,.pc-b small{display:none}
  .pc.on .pc-b p{display:block}
  .pc.on .pc-b small{display:flex}
  .pc-b b{font-size:1.125rem}
  .sl{margin-top:3rem}
  .sv{grid-template-columns:minmax(0,1fr);margin-top:3.5rem}
  .faq-l{display:contents}.faq-l > div:first-child{order:1}.faq-g > div:last-child{order:2}.ask{order:3;margin-top:1rem}
  .ft-top{grid-template-columns:minmax(0,1fr)}
  .cb-r{grid-template-columns:minmax(0,1fr) 2.6rem}
  .cb-r input[type=email]{grid-column:1;grid-row:2}
  .cb-r button{grid-row:1/3;grid-column:2}
  .ft-mid{margin-top:3rem}
  .ft-nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mn-l a{font-size:2rem}
}
@media(max-width:360px){.pr-facts{flex-direction:column}}

/* ---------- short screens (after every width rule, rule 11) ---------- */
/* a phone held upright but short: the card loses its picture and the closing line steps out, so the first screen
   holds the name, the line, the card and its button */
@media(max-width:760px) and (min-height:501px) and (max-height:700px){
  .card-ph{display:none}
  .hero-c{display:none}
  .hero-mid{row-gap:1.25rem}
}
/* a phone on its side, or any very short screen: the laptop row comes back, smaller, and the card is the words and
   the button only */
@media(max-height:500px){
  .hero{padding-top:3.5rem;padding-bottom:1rem}
  .card-ph{display:none}
  .hero-c{font-size:.9375rem}
}
@media(max-height:500px) and (max-width:760px){
  .hero-mid{grid-template-columns:minmax(0,1fr) 12rem minmax(0,1fr);column-gap:1rem}
  .hero-a{display:flex;padding-top:.5rem}
  .card{width:auto;margin-top:calc(var(--cardUp,0px) * -1)}
  .hero-c{justify-self:end;display:block}
  .proofrow p{display:none}
}
/* a short laptop (1280x720, 1024x600): the card's picture is shorter, so its button stays in the first screen */
@media(min-width:761px) and (min-height:501px) and (max-height:800px){.card-ph{aspect-ratio:1/.7}}
.wm.masked .wm-t{color:transparent}

/* ---------- THE BACKGROUND (his words: "zoom in on his background, it is not just black, its a textured black almost
   glitchy tv static, something like this for rebwand, but more spacy architecture glitchy and on brand for us, but
   something that still almost looks black"). Hackett's is a still pixel static at 2 to 4% over #050505. Ours keeps that
   grain and adds Rebwand's own: the architect's grid ("Digital business architecture", the live site's line) with a
   cross at every major line, a field of faint stars and the live site's orbit rings, and every few seconds a thin band
   of it slips sideways with a trace of the blue. All of it behind the content, so words and photographs stay clean. */
.bgx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgx > *{position:absolute;left:0;right:0;top:0;bottom:0}
.bgx-c{width:100%;height:100%}
.bgx-grid{top:-6rem;bottom:-6rem;will-change:transform;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M48 43v10M43 48h10' stroke='%23fff' stroke-opacity='.085' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.011) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.011) 1px,transparent 1px);
  background-size:6rem 6rem,6rem 6rem,6rem 6rem,1.5rem 1.5rem,1.5rem 1.5rem;
  background-position:calc(var(--gut) - 3rem) -3rem,var(--gut) 0,var(--gut) 0,var(--gut) 0,var(--gut) 0;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 10%,rgba(0,0,0,.25) 60%,transparent 92%);
  mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 10%,rgba(0,0,0,.25) 60%,transparent 92%)}
.bgx-grain{background-size:256px 256px;image-rendering:pixelated;opacity:1}
.bgx-gl{bottom:auto;height:0;opacity:0;mix-blend-mode:screen;background-size:256px 256px,100% 100%;
  background-image:var(--grainUrl,none),linear-gradient(90deg,transparent 0%,rgba(56,182,255,.07) 18%,rgba(255,255,255,.025) 46%,rgba(56,182,255,.05) 74%,transparent 100%)}
.bgx-v{background:radial-gradient(ellipse 90% 80% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}
@media(max-width:760px){.bgx-grid{background-size:4rem 4rem,4rem 4rem,4rem 4rem,1rem 1rem,1rem 1rem;background-position:calc(var(--gut) - 2rem) -2rem,var(--gut) 0,var(--gut) 0,var(--gut) 0,var(--gut) 0}}

/* ---------- v2 MENU, on Hackett's own (his words: "awesome menu nav for him also, better spacing, bigger CTA on the
   email. and the blurred with a new temporary logo once clicked. apply our rebwand logo here, and brand blue on hover").
   The page blurs behind it and the Rebwand mark and wordmark sit in the clear space; the panel is three bands on
   hairlines (the links; the email, the city and clock, socials; the small print); the email is the big call; the link
   under the pointer turns brand blue while the rest go grey. ---------- */
.mn-sh{background:rgba(5,5,5,.42);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.mn-logo{position:absolute;top:0;bottom:0;left:0;right:min(32rem,100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;opacity:0;transform:scale(.94);transition:opacity .6s ease .1s,transform .9s var(--e) .1s}
html.menu-open .mn-logo{opacity:1;transform:none}
.mn-logo img{width:clamp(4rem,7vw,6.5rem);height:auto}
.mn-wm{font-family:var(--mark);font-weight:770;letter-spacing:-.04em;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;font-variation-settings:normal}
.mn-wm i{font-style:normal;font-weight:400;opacity:.88;letter-spacing:inherit}
.mn-p{width:min(32rem,100%);padding:0;background:#080808}
.mn-x{position:absolute;top:1.5rem;right:1.75rem;width:3rem;height:3rem;margin:0;z-index:2}
.mn-x svg{width:1.75rem;height:1.75rem}
@media(hover:hover){.mn-x:hover{color:var(--accent)}}
.mn-k{font-size:.8125rem;color:var(--mute2);font-weight:600;margin:0 0 1.1rem}
.mn-s1{padding:4.5rem 2.75rem 2.75rem;border-bottom:1px solid var(--line)}
.mn-s1 .mn-l{margin:0;display:grid;gap:.15rem}
.mn-s1 .mn-l a{font-size:clamp(2rem,2.6vw,2.6rem);line-height:1.2;width:max-content}
@media(hover:hover){.mn-s1 .mn-l:hover a{color:var(--mute)}.mn-s1 .mn-l a:hover{color:var(--accent)}}
.mn-s2{padding:2.75rem;flex:1}
.mn-mail{display:inline-flex;align-items:baseline;gap:.9rem;font-size:clamp(1.75rem,2.3vw,2.4rem);font-weight:600;line-height:1.2;padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.28);transition:color .3s ease,border-color .3s ease}
.mn-mail span{font-size:.55em;color:var(--mute2);transition:transform .4s var(--e),color .3s ease}
@media(hover:hover){.mn-mail:hover{color:var(--accent);border-color:var(--accent)}.mn-mail:hover span{color:var(--accent);transform:rotate(90deg)}}
.mn-city{margin-top:2rem;font-size:.9375rem}
.mn-city .clock{color:var(--mute2);margin-left:.5rem}
.mn-k2{margin-top:2.75rem}
.mn-ig{display:inline-flex;align-items:center;gap:.6rem;font-size:.9375rem;font-weight:600;min-height:2.75rem}
.mn-ig svg{width:1.25rem;height:1.25rem}
@media(hover:hover){.mn-ig:hover{color:var(--accent)}}
.mn-s3{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;padding:1.5rem 2.75rem;border-top:1px solid var(--line);font-size:.8125rem}
.mn-s3 small{font-size:.75rem;color:var(--mute2)}
@media(max-width:760px){
  .mn-logo{display:none}
  .mn-s1{padding:4.5rem 1.5rem 2rem}.mn-s2{padding:2rem 1.5rem}.mn-s3{padding:1.25rem 1.5rem}
  .mn-x{top:1rem;right:1rem}
}

/* ---------- v2 HERO CORNERS (his words: "we dont need the bottom left and bottom right yet, they are or should be in other
   areas of the page, this is where we start to deconstruct some of the clone and put in our own main rebwand index. move
   the time to the bottom left and our work to the bottom right"): the price line and the closing line are gone from the
   first screen; the city and clock and Our Work leave the header for the hero's two bottom corners. The header is the
   name and the menu. ---------- */
.hd{grid-template-columns:auto 1fr auto}
.hero-foot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1.5rem;font-size:.8125rem;font-weight:600;white-space:nowrap;position:relative;z-index:2}
.hero-foot b{font-weight:600}
.hero-foot span{color:var(--mute2)}
.hf-work{padding-block:.5rem}
@media(hover:hover){.hf-work:hover b{color:var(--accent)}}
@media(max-width:760px){.hero-mid{align-content:start}}

/* the logo's lift, exactly as on the live site's top-left logo (his words: "top left logo same zoom animation as our
   original main index"): up 1px and 6% larger from its left edge over .25s, with a soft shadow under it */
.hd-brand{transform-origin:left center;transition:transform .25s cubic-bezier(.2,.9,.3,1),text-shadow .25s ease}
@media(hover:hover){.hd-brand:hover{transform:translateY(-1px) scale(1.06);text-shadow:0 .25rem .375rem rgba(0,0,0,.55)}}
.hd-brand:focus-visible{transform:translateY(-1px) scale(1.06)}
@media(prefers-reduced-motion:reduce){.hd-brand{transition:none}}
/* "See Pricing" (bottom right of the hero) lands on the Services section */
#pricing{scroll-margin-top:0}   /* v3: #pricing is now a whole section, so it lands at the top like the others */


/* ---------- v3 [01] SERVICES, AS A MENU YOU USE. His words, on the first pass (the live cards in v2's dress): "the
   section is good because you listened, but there is no creativity there", "keep the design elements dont just copy and
   paste". The live words, prices and buttons are kept as they are; the section now does what its own line says, "Pick
   one, or take both": two tiles you switch on and off, each showing what it delivers (the Instagram page, the website,
   for one business, so the two read as one brand); when both are on they lock together into the Full Rebwand, and the
   order bar under them (the price that rolls to the new total, the days, the one button) follows the choice. ---------- */
.mp-lead{margin-top:1.75rem;max-width:32rem;font-size:.9375rem;color:var(--mute2);line-height:1.6}
.mp-pick{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.75rem;margin:5rem var(--gut) 0;transition:column-gap .7s var(--e)}
.mp-pick[data-both]{column-gap:0}
.mp-tile{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:.375rem;padding:1.5rem 1.75rem 2rem;cursor:pointer;
  transition:border-color .4s ease,border-radius .7s var(--e),background .4s ease}
.mp-tile[aria-pressed="true"]{border-color:rgba(56,182,255,.55);background:#0b0d10}
.mp-pick[data-both] .mp-tile:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0;border-right-color:rgba(56,182,255,.25)}
.mp-pick[data-both] .mp-tile:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:rgba(56,182,255,.25)}
@media(hover:hover){.mp-tile[aria-pressed="false"]:hover{border-color:rgba(255,255,255,.25)}}
/* the media: what the service delivers, grey until it is chosen */
.mp-media{display:block;position:relative;aspect-ratio:16/10;border-radius:.25rem;overflow:hidden;background:#141414;margin-bottom:1.5rem}
.mp-media img{filter:grayscale(1) brightness(.7);transition:filter .6s ease,transform 1s var(--e)}
.mp-tile[aria-pressed="true"] .mp-media img{filter:none}
.mp-web .web-bar{position:absolute;left:0;right:0;top:0;height:1.6rem;display:flex;align-items:center;gap:.3rem;padding:0 .6rem;background:#1b1b1b;z-index:1}
.mp-web .web-bar i{width:.4rem;height:.4rem;border-radius:50%;background:rgba(255,255,255,.25)}
.mp-web .web-bar em{font-style:normal;font-size:.625rem;color:var(--mute2);margin-left:.6rem}
.mp-web img{position:absolute;left:0;top:1.6rem;width:100%;height:calc(100% - 1.6rem);object-fit:cover;object-position:top}
/* the social tile is a real Instagram profile (his note, 28 Oct: "better showcase the social media rework with instagram
   profile pic and bio it dosent really look like social media rework"): Instagram's own desktop layout in its dark mode,
   the story ring, the handle with its tick, Follow, the counts, the bio, the highlights, the tabs and the grid. Sized off
   the tile's width so it reads the same on a phone. */
.mp-ig{container-type:inline-size;display:flex;flex-direction:column;background:#000;padding:4.5cqw 5cqw 0;gap:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-variation-settings:normal;color:#f5f5f5}
.mp-ig *{letter-spacing:normal}
.ig-hd{display:flex;align-items:center;gap:6cqw}
.ig-av{flex:none;width:17cqw;height:17cqw;border-radius:50%;padding:.55cqw;background:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.ig-av img{width:100%;height:100%;border-radius:50%;border:.7cqw solid #000;object-fit:cover;background:#111}
.ig-info{display:flex;flex-direction:column;gap:1.6cqw;min-width:0}
.ig-row{display:flex;align-items:center;gap:1.2cqw;white-space:nowrap}
.ig-row b{font-size:3.4cqw;font-weight:400}
.ig-vf{width:3cqw;height:3cqw;flex:none}
.ig-btn{font-style:normal;font-size:2.4cqw;font-weight:600;background:#0095F6;color:#fff;border-radius:1.4cqw;padding:.9cqw 3cqw;margin-left:1cqw}
.ig-btn.ig-g{background:#363636;margin-left:0}
.ig-stats{display:flex;gap:4cqw;font-size:2.6cqw;color:#f5f5f5;white-space:nowrap}
.ig-stats b{font-weight:600}
.ig-bio{display:flex;flex-direction:column;font-size:2.4cqw;line-height:1.35}
.ig-bio b{font-weight:600}
.ig-bio em{font-style:normal;color:#E0F1FF;font-weight:600}
.ig-hl{display:flex;gap:5cqw;margin:3.6cqw 0 0 1cqw}
.ig-hl span{display:flex;flex-direction:column;align-items:center;gap:1cqw;font-size:2cqw;font-weight:600;color:#f5f5f5}
.ig-hl i{display:block;width:10cqw;height:10cqw;border-radius:50%;background:#121212 center/cover;box-shadow:0 0 0 .5cqw #000,0 0 0 .8cqw #363636}
.ig-tabs{display:flex;justify-content:center;gap:10cqw;margin-top:3cqw;border-top:1px solid #262626;font-size:2cqw;font-weight:600;color:#a8a8a8;text-transform:uppercase}
.ig-tabs i{font-style:normal;padding:1.8cqw 0;letter-spacing:.08em}
.ig-tabs i:first-child{color:#f5f5f5;box-shadow:inset 0 1px 0 #f5f5f5}
.ig-grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:30cqw;gap:.4cqw;min-height:0;margin:0 -5cqw}
.ig-grid img{width:100%;height:100%;object-fit:cover}
@media(hover:hover){.mp-tile:hover .mp-media img{transform:scale(1.03)}}
/* the tick: a square that fills brand blue when chosen */
.mp-tick{position:absolute;bottom:1.75rem;right:1.75rem;width:1.5rem;height:1.5rem;border:1.5px solid rgba(255,255,255,.35);border-radius:.3rem;transition:background .3s ease,border-color .3s ease;z-index:2}
.mp-tick::after{content:"";position:absolute;left:.42rem;top:.18rem;width:.4rem;height:.75rem;border-right:2px solid #04131f;border-bottom:2px solid #04131f;transform:rotate(45deg) scale(0);transition:transform .3s var(--e)}
.mp-tile[aria-pressed="true"] .mp-tick{background:var(--accent);border-color:var(--accent)}
.mp-tile[aria-pressed="true"] .mp-tick::after{transform:rotate(45deg) scale(1)}
.mp-tag{font-size:.75rem;color:var(--mute2)}
.mp-h{display:block;font-size:clamp(1.5rem,1.9vw,1.9rem);letter-spacing:-.035em;line-height:1.2;margin-top:.6rem}
.mp-price{display:flex;align-items:baseline;gap:.5rem;margin-top:1rem}
.mp-price b{font-size:clamp(2.4rem,3.2vw,3.2rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.mp-price i{font-style:normal;font-size:.8125rem;color:var(--mute2)}
.mp-list{display:grid;gap:.65rem;margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.mp-list span{position:relative;padding-left:1.5rem;font-size:.875rem;line-height:1.45;color:var(--mute2)}
.mp-list span::before{content:"";position:absolute;left:0;top:.35em;width:.75rem;height:.42rem;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
/* the seam: a + between the tiles that turns to = when both are on */
.mp-seam{position:absolute;left:50%;top:50%;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border-radius:50%;background:var(--bg);border:1px solid var(--line);z-index:3;display:grid;place-items:center;transition:border-color .4s ease,background .4s ease}
.mp-seam i,.mp-seam i::before{display:block;width:.9rem;height:1.5px;background:#fff;transition:transform .5s var(--e)}
.mp-seam i{position:relative}
.mp-seam i::before{content:"";position:absolute;inset:0;transform:rotate(90deg)}
.mp-pick[data-both] .mp-seam{background:var(--accent);border-color:var(--accent)}
.mp-pick[data-both] .mp-seam i{background:#04131f;transform:translateY(-.15rem)}
.mp-pick[data-both] .mp-seam i::before{background:#04131f;transform:translateY(.3rem)}
/* the order bar */
.mp-bar{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto auto;align-items:center;gap:2.5rem;margin:.75rem var(--gut) 0;padding:1.5rem 1.75rem;border:1px solid var(--line);border-radius:.375rem;background:var(--bg2)}
.mp-bar[data-both]{border-color:rgba(56,182,255,.55)}
.mp-pill{display:inline-block;background:var(--accent);color:var(--accent-ink);font-size:.6875rem;font-weight:600;padding:.2rem .6rem;border-radius:1rem;margin-bottom:.6rem}
.mp-bar:not([data-both]) .mp-pill{display:none}
.mp-name{font-size:1.375rem;letter-spacing:-.035em}
.mp-note{font-size:.8125rem;color:var(--mute2);margin-top:.3rem}
.mp-when small{display:block;font-size:.75rem;color:var(--mute2)}
.mp-when b{font-size:1.25rem;letter-spacing:-.035em}
.mp-total{display:flex;align-items:baseline;gap:.6rem}
.mp-total s{font-size:1rem;color:var(--mute);text-decoration-thickness:1.5px}
.mp-total b{font-size:clamp(2.2rem,3vw,3rem);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.mp-total i{font-style:normal;font-size:.8125rem;color:var(--mute2)}
.mp-save{font-size:.8125rem;color:var(--accent);margin-top:.25rem}
.mp-bar:not([data-both]) .mp-total s,.mp-bar:not([data-both]) .mp-save{display:none}
.mp-go{gap:.75rem}
.mp-bar[data-none] .mp-go{opacity:.4;pointer-events:none}
.mp-more{margin-top:3rem;text-align:center;font-size:.9375rem;color:var(--mute2)}
.mp-more .go{margin-left:.5rem;color:var(--fg);font-size:.9375rem}
@media(max-width:1000px){.mp-bar{grid-template-columns:minmax(0,1fr) auto;row-gap:1.25rem}}
@media(max-width:760px){
  .mp-pick{grid-template-columns:minmax(0,1fr);row-gap:.75rem;margin-top:3rem}
  .mp-pick[data-both]{row-gap:0}
  .mp-pick[data-both] .mp-tile:first-of-type{border-radius:.375rem .375rem 0 0;border-right-color:rgba(56,182,255,.55);border-bottom-color:rgba(56,182,255,.25)}
  .mp-pick[data-both] .mp-tile:last-of-type{border-radius:0 0 .375rem .375rem;border-left-color:rgba(56,182,255,.55);border-top-color:rgba(56,182,255,.25)}
  .mp-tile{padding:1.25rem 1.25rem 1.5rem}
  .mp-tick{bottom:1.25rem;right:1.25rem}
  .mp-seam{position:relative;left:auto;top:auto;margin:-1.375rem auto;justify-self:center}   /* on the seam between the stacked tiles */
  .mp-bar{grid-template-columns:minmax(0,1fr) auto;padding:1.25rem}
  .mp-go{grid-column:1/-1;justify-content:center}
}

/* ---------- THE BIG HEADINGS, HELD TO THE STATEMENT'S LOOK (his note, 28 Oct: the statement is "clean, resembles apple,
   modern futurisic, good letter spacing, good line spacing", the heading "gappy ... not bold"). Same face; at headline size
   it needs to be a touch heavier and tighter to read the same. 28 Oct, second note: "if this was increased in size, how
   would it look ... it has to look the same when increased", and of 650 / -.045em with words pulled closer: "still best
   but not perfect". That one jammed the letters and crashed the words together. Now: the statement's line grown to
   headline size, weight 650, letters -.041em, the words at their natural gap. Then: "line spacing maybe an issue aswell":
   I opened them to 1.15; his answer: "lines 1.08 still isnt tight enough imo needs to be tighter to feel the same as the
   introduction text" (the [02] Introduction, 1.22 at its size). 1.0 was "still dosent look tight enough": now .94, the lines nearly touching,
   as the Introduction's read at its size. motion.css gives the word masks room so tails and tops are never cut. ---------- */
h2.big,h2.big *,.faq-h h2,.faq-h h2 *{font-weight:700!important;letter-spacing:-.041em!important}
h2.big,.faq-h h2{line-height:.94}

/* ---------- OUR SECTIONS' HEADS (his notes, 28 Oct). First: "our header reads on two lines ... thats on the second line";
   a stacked, full-width head was tried and turned down: "i dont mean stacked like this ... the 2 coloumn setup is better
   so keep the services on the left where it was ... just across 2 lines". So the label column stays, and the heading's
   grey half takes its own line ("Two services. Two prices." / "That's the whole menu."). ---------- */
.row.split h2.big .g{display:block}

/* the wordmark's safe dress: when the canvas's letters would not match the page's, the name is the page's own text, filled
   with the chrome gradient (site.js, maskWm) */
.wm.wm-safe canvas,.wm.wm-safe .wm-fb{visibility:hidden}
.wm.wm-safe .wm-t{color:transparent;background:linear-gradient(115deg,#1a1a1a 0%,#8d8f93 18%,#e9eaec 26%,#4a4b4e 38%,#cfd1d4 52%,#2b2c2e 63%,#b9bbbf 77%,#f4f5f6 84%,#3d3e40 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:chrome 14s ease-in-out infinite alternate}

/* ---------- REBWAND'S OWN SHAPES AND WEIGHT IN OUR SECTIONS (his notes, 28 Oct: "dont remove our rebwand shapes for the
   pricing cards, and other buttons like the device switcher, embed switchers etc, keep that main rebwand", and "pricing or
   headers needs a more bold variant"). The cards take the live card's corner: small corners and one big one, the big one
   on the outside so the two locked together are still one Rebwand card. Buttons take the live button's round. The big
   headings, the service names and every price go to bold (700). ---------- */
.mp-tile:first-of-type{border-radius:.5rem .5rem .5rem 2.75rem}
.mp-tile:last-of-type{border-radius:.5rem .5rem 2.75rem .5rem}
.mp-pick[data-both] .mp-tile:first-of-type{border-radius:.5rem 0 0 2.75rem}
.mp-pick[data-both] .mp-tile:last-of-type{border-radius:0 .5rem 2.75rem 0}
.mp-bar{border-radius:.5rem .5rem 2.75rem .5rem}
.btn{border-radius:1.375rem}
.mp-h,.mp-name,.mp-when b,.mp-price b,.mp-total b{font-weight:700}
@media(max-width:760px){
  .mp-pick[data-both] .mp-tile:first-of-type{border-radius:.5rem .5rem 0 0}
  .mp-pick[data-both] .mp-tile:last-of-type{border-radius:0 0 2.75rem 2.75rem}
}

/* ---------- THE HERO, OURS (his notes, 28 Oct): "re engage our main index catch phrase underneath rebwand.io logo",
   "the "your website isnt" only turn blue when mouse track goes around it", "make the top left logo just our logo with no
   text and play around with it", "put the website and socials rebuild in the bottom left corner and remove australia time
   from the hero keep in menu nav", and of Hackett's card: "just dosent look good on ours, remove ... keep it simple".
   So: the name, the live line under it, the two corners. Nothing else on the first screen. ---------- */
.hero-mid{grid-template-columns:minmax(0,1fr);margin-top:clamp(1.25rem,2.4vw,2.5rem)}
.hero-cp{font-size:clamp(1.9rem,3.7vw,3.9rem)!important;font-weight:700!important;letter-spacing:-.041em!important;line-height:.98!important;max-width:none!important}
.hero-cp *{letter-spacing:-.041em}
.hero-cp .cp-x{display:block;color:rgba(255,255,255,.46);font-weight:700}   /* on its own line (his note: "your website isnt has to sit on a line below") */
.hero-cp .cp-w{transition:color .25s ease}
.hf-tag b{font-weight:600}
/* the wordmark's depth: copies of the name stacked behind it, darker as they go back; the pointer turns the whole name
   and pulls the stack out (motion.js 6) */
.wm .wm-t.wm-dl{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;background:none!important;animation:none!important;
  color:var(--c)!important}
.wm{transform-style:flat}
/* the mark in the corner: on the pointer it turns once in space, like a coin, and leans toward the pointer */
.hd-mk{padding:.25rem 0;perspective:400px}
.hd-mk img{display:block;width:1.7rem;height:1.7rem;transition:transform .9s cubic-bezier(.2,.9,.25,1),filter .3s ease;transform-style:preserve-3d}
@media(hover:hover){.hd-mk:hover{transform:none;text-shadow:none}.hd-mk:hover img{transform:rotateY(360deg) scale(1.08);filter:drop-shadow(0 .35rem .5rem rgba(0,0,0,.6))}}
@media(prefers-reduced-motion:reduce){.hd-mk img{transition:none}}
@media(max-width:760px){.hd-mk img{width:1.55rem;height:1.55rem}.hero-cp{font-size:clamp(1.6rem,8.4vw,2.6rem)!important}}
/* "See Pricing" leaves the corner for a button under the line (his note: "see pricing we can choose a new location"); the
   corners are the city and clock, bottom left, and "Website & Socials, Rebuilt.", bottom right */
.hero-mid{align-content:start;justify-items:start;row-gap:clamp(1.5rem,2.6vw,2.5rem)}
/* the name, the line and the button sit in the middle of the first screen, the corners pinned to its foot (his note:
   "move the hero header down more centrally") */
.hero{grid-template-rows:minmax(0,1fr) auto auto minmax(0,1.15fr) auto}
.hero > .wm{grid-row:2}.hero > .hero-mid{grid-row:3}.hero > .hero-foot{grid-row:5}
@media(max-width:760px){.hero-go{order:2}.hero-cp{padding-top:0}}
/* the corner mark (his notes, 28 Oct: "a touch too big", "not correctly position compared to the other symbols"): smaller,
   and centred on the menu button's two lines rather than on the header box (the lines sit .375rem apart, below centre) */
.hd-mk{position:relative;top:calc((.375rem + 1.5px) / 2)}

/* See Pricing on the first screen is words and an arrow, no button shape (his note, 28 Oct: "maybe no bubble for home
   screen see pricing"): white, brand blue under the pointer, the arrow stepping out */
.hero-go{display:inline-flex;align-items:center;gap:.6rem;font-size:clamp(1rem,1.15vw,1.25rem);font-weight:600;color:#fff;padding-block:.4rem;transition:color .25s ease}
.hero-go svg{width:1em;height:1em;transition:transform .35s var(--e)}
@media(hover:hover){.hero-go:hover{color:var(--accent)}.hero-go:hover svg{transform:translate(.2em,-.2em)}}
.hero-go:focus-visible{color:var(--accent)}
/* ---------- THE ORDER BAR HOLDS STILL (his note, 28 Oct: "the full rebwand pricing card is gliching and the save part
   looks tacky"). Measured: each tick moved the columns sideways (the name, the days, the total and the button each set
   their own width) and the bar grew and shrank by 36px as the label came and went. Now every column has a fixed width,
   the label keeps its space when hidden, the figures are even-width, and the bar's height never changes. The saving is
   one quiet line under the total instead of a struck-out price and a blue "Save". ---------- */
.mp-bar{grid-template-columns:minmax(0,1fr) 6.5rem 6.5rem 12.5rem 13rem}
/* his note, 28 Oct: "left text on full rebwand cooked": the hidden label still took its line, so a single service's
   name and note sat low with a hole above them. The block now holds its full height and centres what it shows. */
.mp-what{min-height:5.8rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.mp-bar:not([data-both]) .mp-pill{display:none}
.mp-total{white-space:nowrap}
/* the figure and AUD once sit together; the column's own fixed width is what keeps the bar still */
.mp-total b{font-variant-numeric:tabular-nums lining-nums}
/* the saving is its own column, set exactly like "Ready in", so the total stands alone on the bar's middle line; it is
   blue only in its figure, and keeps its space when there is nothing to save */
.mp-sv b{color:var(--accent)}
.mp-bar:not([data-both]) .mp-sv{visibility:hidden}
.mp-sum{display:flex;align-items:center}
.mp-go{justify-content:space-between;width:100%}
.mp-name,.mp-note{white-space:nowrap;overflow:hidden;text-overflow:clip}
@media(max-width:1000px){.mp-bar{grid-template-columns:minmax(0,1fr) auto}.mp-name,.mp-note{white-space:normal}}
@media(max-width:760px){.mp-bar{grid-template-columns:minmax(0,1fr) auto}}
/* the bar on phones and tablets: the name across the top, Ready in and You save side by side, the total, then the button;
   the note keeps two lines' room so the bar's height does not change between choices */
@media(max-width:1000px){
  .mp-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:1.25rem;column-gap:1.5rem}
  .mp-what,.mp-sum,.mp-go{grid-column:1/-1}
  .mp-note{min-height:2.9em}
}
/* ---------- SECTION HEADS LOCK TO THE RIGHT MARGIN (his notes, 28 Oct: "can we have the headers lock right?", then
   "can we have the headers locked to the right margin please"). In every two-column head the heading and the line
   under it end on the right gutter; the label stays on the left one. ---------- */
.row > .rv:has(> h2.big){text-align:right}
.row > .rv:has(> h2.big) > p{margin-left:auto}
@media(max-width:760px){.row > .rv:has(> h2.big){text-align:left}.row > .rv:has(> h2.big) > p{margin-left:0}}
.bgx-o{width:100%;height:100%;pointer-events:none}
/* the line under a section heading runs on one line wherever the column has room (his note, 28 Oct: "can we have body
   text here across one line"); narrower screens let it wrap rather than run off */
.row > .rv:has(> h2.big) > p{max-width:none}
@media(max-width:1000px){.mp-bar:not([data-both]) .mp-pill{display:inline-block;visibility:hidden}}   /* phones: the label keeps its line so the stacked bar holds its height */
/* ---------- ONE LINK STYLE, THE MENU EMAIL'S (his note, 28 Oct: "see pricing should underline same as hello@rebwand, same
   for lets talk and so on"): a thin line under the words at rest; under the pointer the words and the line turn brand
   blue together. For See Pricing and every text link on the page. ---------- */
/* then: "underline on see pricing when hovered": no line at rest; under the pointer a brand-blue line draws in under
   the words as they turn blue. The same for every text link. */
.hero-go,.go{border-bottom:0;padding-bottom:.35rem;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:color .3s ease,background-size .45s var(--e)}
@media(hover:hover){.hero-go:hover,.go:hover{color:var(--accent);background-size:100% 1px}}
.hero-go:focus-visible,.go:focus-visible{color:var(--accent);background-size:100% 1px}
.tk-g span{-webkit-font-smoothing:antialiased}
/* the trust strip frosts what passes behind it (his note, 28 Oct: "add some blur to the trust animation line so its easier
   to read the galaxy bleeding through is drawing attention away"): a blur and a little shade on the strip itself, faded
   at its two ends by the strip's own mask */
/* then: "too much intensity i said add some blur not make the trust pill background solid": blur only, lighter, no shade */
.tk{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}   /* "less blur on trust" */
/* the hero's name and line sit on the screen's middle (his note, 28 Oct: "both v3 and v4 need the main logo header to come
   down more centrally to look more balanced also, more salient"): measured, they were 32 to 60px above it; more of the
   free space now goes above them, so their centre lands within a few px of the middle at every laptop size */
@media(min-width:761px){.hero{grid-template-rows:minmax(0,1.55fr) auto auto minmax(0,1fr) auto}}
/* the trust strip without its two hard lines (his note, 29 Oct: "find an alternative to the harsh lines above and below
   the trust pill like maybe soft fade transition", "like just a blur"): no rules; its blur fades in from the top and
   out at the bottom as well as at the two ends, so it reads as a soft band */
.tk{border-block:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 30%,#000 70%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-composite:intersect}
/* the line under each section heading at the live site's size (his note, 29 Oct: "body text font size is better on
   original index ... bring up v4 a bit to match"): live sets it at 17px on a laptop and on a phone; here it was 15 and 14 */
.mp-lead,.pf-lead,.row > .rv > h2.big + p{font-size:1.0625rem}
@media(max-width:760px){.mp-lead,.pf-lead,.row > .rv > h2.big + p{font-size:1.125rem}}
/* the first trust strip (between the hero and Services), his note, 29 Oct: "larger fade on the trust pill its too tight
   make the fade larger between top and bottom section, its also not central between section". A taller band, so the
   blur fades in and out over a longer distance, and placed half way between the hero's corner lines and the [01] label */
.hero + .tk{padding-block:3rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 42%,#000 58%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 42%,#000 58%,transparent)}
.hero + .tk + .sec{padding-top:2rem}
@media(max-width:760px){.hero + .tk + .sec{padding-top:2.05rem}}
/* when the line under a heading has to wrap, it wraps into two even lines, never a short last line (his note, 30 Oct:
   "take both is on its own line why?": at 17px the Services line was a word too long for its column on a 1512 laptop) */
.mp-lead,.pf-lead,.row > .rv > h2.big + p{text-wrap:balance}
/* the line under a section heading stays on ONE line on a laptop (his note, 30 Oct: "the text underneath services header
   should be one line as instructed"): at 17px it is longer than the heading's column, so it reaches left past the
   column toward the label, still ending on the right margin. Only a screen too narrow for it wraps it, evenly. */
@media(min-width:761px){
  .row > .rv:has(> h2.big){display:flex;flex-direction:column;align-items:unsafe flex-end;min-width:0}
  .row > .rv:has(> h2.big) > p{width:max-content;max-width:calc(100vw - 2 * var(--gut));white-space:normal;margin-left:0}   /* an auto margin would cancel the alignment */
}
/* small laptops and the app's browser pane: the line may still reach left across the whole row, wrapping only if the row itself is too narrow (his note, 30 Oct: "subheading text stacking on 3 lines?") */
/* the menu's Rebwand mark does the corner mark's flip as the menu opens, and the name comes in after it (his note, 30 Oct:
   "rebwand logo animation needed for menu nav aswell, same flip as hover when clicked, and rebwand.io text to appear
   after its clicked"). The flip: one turn in space as it lands; the name rises in once the turn is done. */
.mn-logo{perspective:600px}
.mn-logo img{transform:rotateY(-360deg) scale(.92);transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.9,.25,1) .1s}
html.menu-open .mn-logo img{transform:none}
.mn-wm{opacity:0;transform:translateY(.6rem);filter:blur(4px);transition:opacity .5s ease,transform .6s var(--e),filter .5s ease}
html.menu-open .mn-wm{opacity:1;transform:none;filter:none;transition-delay:.85s,.85s,.85s}
@media(prefers-reduced-motion:reduce){.mn-logo img,.mn-wm{transition:none;transform:none;filter:none}}
/* ---------- SPLIT SCREEN / SMALL LAPTOP, 761 to 1099px (his notes, 30 Oct: "remember this is a split screen optimisation or
   our small device", "full rebwand card also looks terrible, refer to how main rebwand-site index manages this", "embed
   looks terrible on split"). Taken from the live page at the same width:
   - section heads stack on the left, label, heading, line, as live does there (the right-locked two columns are for
     full laptops), so the viewer and the cards sit straight under their heading;
   - the Full Rebwand bar is live's bundle card: the name, the price under it with Ready In and You Save beside it, and the
     button on the right, centred, in one compact card. ---------- */
@media(min-width:761px) and (max-width:1099px){
  .row,.row.split{grid-template-columns:minmax(0,1fr);row-gap:1.25rem}
  .row > .lab{padding-top:0}
  .row > .rv:has(> h2.big){text-align:left;align-items:flex-start}
  .row > .rv:has(> h2.big) > p{margin-left:0;width:auto;max-width:40rem}
  .pf-stage,.mp-pick{margin-top:3rem}
  .mp-bar{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"what what what go" "sum when sv go";column-gap:2rem;row-gap:1rem;padding:1.6rem 1.75rem}
  .mp-what{grid-area:what;min-height:0}.mp-sum{grid-area:sum}.mp-when{grid-area:when;align-self:end}.mp-sv{grid-area:sv}
  .mp-go{grid-area:go;grid-column:auto;align-self:center;justify-self:end;width:auto;min-width:12rem}
  .mp-note{min-height:0;white-space:normal}
}
/* the Full Rebwand bar against the cards above it and against the live page (his note, 30 Oct: "the header size for full
   rebwand dosent match the other services ... the button on the right, the text is too small, refer to main index ...
   make the text in that button central"): the bar's name is set exactly as the service names in the cards; the button's
   words are the live bundle button's size (16px), centred, the arrow kept at the right edge */
.mp-name{font-size:clamp(1.5rem,1.9vw,1.9rem);line-height:1.2}
/* (then "text not central yet": the words were centred but the arrow sat apart at the edge, so the pair read as off
   centre; now the words and the arrow are one group, centred together) */
.mp-go{position:relative;justify-content:center;gap:.6rem;font-size:1rem;padding-inline:1.5rem}
.mp-go svg{position:static;margin:0}
/* "The Smart Choice" sits to the right of the name, on its line (his note, 30 Oct: "put the smart choice to the right of
   full rebwand"); the note runs under both */
.mp-what{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:center;column-gap:.85rem}   /* start, not centre: the column rule centred it, which pushed the name in from the left edge */
.mp-what .mp-name{order:1}
.mp-what .mp-pill{order:2;margin-bottom:0}
.mp-what .mp-note{order:3;flex-basis:100%}


/* ---------- what every build includes: the R that throws out five cards (30 Oct 2026; site.js) ---------- */
.dl{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:2;pointer-events:none}
.dl-c{position:absolute;left:0;top:0;width:min(17.5rem,24vw);padding:1.15rem 1.25rem 1.25rem;background:rgba(14,14,15,.86);border:1px solid var(--line);
  border-radius:.375rem;opacity:0;will-change:transform,opacity;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dl-c svg{width:1.1rem;height:1.1rem;color:var(--fg)}
.dl-c h4{font-size:.9375rem;font-weight:600;margin-top:.8rem;letter-spacing:-.02em}
.dl-c p{font-size:.8125rem;color:var(--mute2);margin-top:.45rem;line-height:1.55}
.crowd-ratio p b{margin:0 .15rem 0 0}
@media(max-width:760px){
  .dl-c{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.7rem;padding:.8rem 1rem}
  .dl-c h4{margin-top:0}
  .dl-c p{grid-column:1/-1;margin-top:.35rem;font-size:.875rem;line-height:1.4}
  .crowd-ratio{display:none}
}

/* the header shade, softer (his note, 30 Oct: "can we have a softer blur to nav bar so its more seamless"): a lighter blur
   that runs further down the page and thins out in even steps, so it has no edge where it ends */
.hd::before{inset:0 0 -5rem;
  background:linear-gradient(180deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.6) 30%,rgba(5,5,5,.3) 60%,rgba(5,5,5,.1) 82%,rgba(5,5,5,0) 100%);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 30%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.2) 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 30%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.2) 78%,transparent 100%)}