/* Corner Team AI site styles. Built from Banksy's concepts (home A, services, pricing v2), 2026-10-03. */
:root{
  --black:#000;--ink-soft:#1e1e1e;--gray:#2b2b2b;--gray-hover:#4a4a4a;--white:#fff;--light:#f2f2f0;--paper:#fafafa;--silver:#d9d9d9;
  --muted:rgb(217 217 217/.72);
  --blue:#4F86FF;--amber:#F5B83D;--mint:#2FD3B2;--lime:#C6F432;--orange:#FF5A1F;--orange-hover:#ff7a48;
  --gutter:clamp(1.25rem,.5rem + 3vw,2.5rem);--section:clamp(96px,11vw,176px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{font-family:Inter,"Suisse Intl",Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--light);line-height:1.4;letter-spacing:-.2px}
a{color:inherit}img{display:block;max-width:100%}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-blue{color:var(--blue)}.c-amber{color:var(--amber)}.c-mint{color:var(--mint)}.c-lime{color:var(--lime)}.c-orange{color:var(--orange)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.lock{display:inline-flex;align-items:center;min-height:44px;gap:10px;font-size:20px;letter-spacing:-.035em;color:var(--white);text-decoration:none;white-space:nowrap}
.lock svg{width:22px;height:22px}.lock b{font-weight:600}
.nav ul{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;font-size:15px}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);transition:color .3s var(--ease)}
.nav ul a:hover{color:var(--white)}
.nav ul a.pill{color:#000}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:50px;border:0;cursor:pointer;
  background:var(--orange);color:#000;font:600 16px/1 Inter,Arial,sans-serif;letter-spacing:-.2px;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease)}
.pill:hover{background:var(--orange-hover)}
.pill.sm{min-height:44px;padding:0 20px;font-size:15px}
.textlink{font-weight:600;text-decoration:underline;text-decoration-color:var(--gray-hover);text-underline-offset:6px;text-decoration-thickness:2px;min-height:44px;display:inline-flex;align-items:center;transition:text-decoration-color .3s var(--ease)}
.textlink:hover{text-decoration-color:currentColor}

/* type */
.statement{font-size:clamp(1.375rem,1.05rem + 1.15vw,2.25rem);line-height:1.15;letter-spacing:-.3px;color:var(--white);margin:0;max-width:41rem;font-weight:400}
.statement strong{font-weight:600}
.display{font-size:clamp(2.75rem,1.2rem + 5.6vw,6.25rem);font-weight:400;line-height:.95;letter-spacing:-.042em;color:var(--white);margin:0}
.display strong{font-weight:600}
.dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--white);margin-left:.04em}
.lead{margin:0;color:var(--muted);max-width:30rem;font-size:17px;line-height:1.5}
.label{display:block;font-size:14px;color:var(--muted);margin-bottom:16px}
section.s{padding:var(--section) 0 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}

/* hero */
.hero{padding:clamp(40px,6.5vw,104px) 0 0}
.hook{font-size:clamp(3rem,1.2rem + 6.9vw,7.25rem);font-weight:400;line-height:.94;letter-spacing:-.042em;color:var(--white);margin:0}
.hook .l2{display:block}.hook strong{font-weight:600}
.hero-sub{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:clamp(32px,4vw,56px);align-items:end}
/* hero photo: ring corner illustration, masked so the headline sits on black */
.hero-photo{position:relative;min-height:min(calc(100svh - 230px),800px);display:flex;flex-direction:column;justify-content:space-between}
.hero-photo .hook,.hero-photo .hero-sub{position:relative;z-index:1}
.hero-photo .hero-sub{grid-template-columns:minmax(0,1fr)}
.hero-photo .hero-sub .statement{max-width:34rem}
.hp{position:absolute;z-index:0;top:var(--hp-top,22%);bottom:0;right:calc(var(--gutter)*-1);width:var(--hp-w,64%);margin:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%),linear-gradient(to bottom,transparent 0,#000 30%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 38%),linear-gradient(to bottom,transparent 0,#000 30%,#000 82%,transparent 100%);mask-composite:intersect}
.hp img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hp-pos,center)}
.hp-cap{position:absolute;right:var(--gutter);bottom:8px;z-index:1;font-size:12px;color:var(--muted)}
@media (min-width:1441px){.hp{right:calc((100vw - 1440px)/-2 - var(--gutter))}}
@media (max-width:900px){
  .hero-photo{min-height:0;display:block}
  .hp{position:relative;inset:auto;right:auto;width:auto;margin:-24px calc(var(--gutter)*-1) 0;aspect-ratio:5/4;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .hp img{object-position:var(--hp-pos-m,center)}
  .hp-cap{position:static;display:block;text-align:right;margin-top:-28px;padding:0 var(--gutter) 12px}
  .hero-photo .hero-sub{margin-top:8px;display:flex;flex-direction:column;gap:28px}
  .hero-photo .hero-sub>div{order:-1}
}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.proof{margin:16px 0 0;color:var(--muted);font-size:15px}
.reasons{list-style:none;margin:clamp(56px,7vw,112px) 0 0;padding:28px 0 0;border-top:1px solid var(--ink-soft);display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.reasons li{font-size:16px;color:var(--muted);max-width:19rem}
.reasons b{display:block;color:var(--white);font-weight:600;margin-bottom:4px}
.n{font-weight:600;font-variant-numeric:tabular-nums;display:block;margin-bottom:12px}


/* four corners */
.corners{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.corner{position:relative;min-height:clamp(260px,22vw,340px);padding:clamp(28px,3.4vw,56px);display:flex;flex-direction:column;justify-content:flex-start}
.corner::before{content:"";position:absolute;width:clamp(48px,5vw,72px);height:clamp(48px,5vw,72px);border:0 solid var(--c)}
.tl::before{top:0;left:0;border-top-width:7px;border-left-width:7px}
.tr::before{top:0;right:0;border-top-width:7px;border-right-width:7px}
.bl::before{bottom:0;left:0;border-bottom-width:7px;border-left-width:7px}
.br::before{bottom:0;right:0;border-bottom-width:7px;border-right-width:7px}
.bl,.br{justify-content:flex-end}
.tr,.br{align-items:flex-end;text-align:right}
.corner .k{font-size:14px;font-weight:600;color:var(--c);font-variant-numeric:tabular-nums}
.corner h3{margin:10px 0 12px;font-size:clamp(2.25rem,1.3rem + 3vw,4.5rem);font-weight:400;letter-spacing:-.045em;line-height:.95;color:var(--white)}
.corner p{margin:0;color:var(--muted);font-size:18px;line-height:1.45;max-width:26rem}
.you{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;background:var(--white);transform:translate(-50%,-50%)}

/* audit band (variant 2) */

/* covers list */
.covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;counter-reset:c}
.covers li{display:grid;grid-template-columns:44px 1fr;padding:18px 0;border-top:1px solid var(--ink-soft);font-size:17px;color:var(--white);counter-increment:c}
.covers li::before{content:counter(c,decimal-leading-zero);font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.covers-foot{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;margin-top:32px}
.covers-foot p{margin:0;color:var(--muted);font-size:15px}

/* how */
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--ink-soft);align-items:start}
.step .big{display:flex;gap:clamp(16px,2vw,32px);align-items:baseline}
.step .num{color:var(--white);font-size:clamp(3.5rem,2rem + 5vw,7.5rem);line-height:.85;font-weight:400;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(1.5rem,1.05rem + 1.15vw,2.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--white);margin:0}
.step p{margin:0;font-size:18px;line-height:1.45;color:var(--light);max-width:32rem}
.step .meta{display:block;margin-top:12px;font-size:14px;color:var(--muted)}

/* speed to lead */
.stl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.stl .statement{margin-bottom:20px}
.stl .lead{margin-bottom:28px}
.flow{list-style:none;margin:0;padding:0}
.flow li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--ink-soft);align-items:baseline}
.flow li:last-child{border-bottom:1px solid var(--ink-soft)}
.flow time{font-weight:600;font-variant-numeric:tabular-nums;color:var(--mint);font-size:15px;white-space:nowrap}
.flow span{color:var(--white);font-size:18px;line-height:1.4}

/* human */
.pairs{list-style:none;margin:0;padding:0}
.pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:start;padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--ink-soft)}
.pair h3{margin:0 0 10px;font-size:clamp(1.75rem,1.1rem + 2vw,3.25rem);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--white)}
.pair h3 strong{font-weight:600}
.pair p{margin:0;color:var(--muted);max-width:26rem}
.pair .or{font-size:15px;color:var(--muted);padding-top:clamp(8px,1vw,18px)}
.quote{margin:clamp(48px,6vw,96px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.quote p{margin:0}
.quote .lead{align-self:end}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.story{display:grid;gap:24px}
.story p{margin:0;font-size:18px;line-height:1.5;color:var(--light);max-width:34rem}

/* close */
.close{padding:var(--section) 0 clamp(64px,7vw,104px)}
.closegrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end;margin-top:clamp(40px,5vw,64px)}
footer{border-top:1px solid var(--ink-soft);padding:32px 0 48px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
footer b{color:var(--white);font-weight:600}

.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .starter{grid-template-columns:1fr}.starter ul{grid-template-columns:1fr}.how-head{grid-template-columns:1fr}
  .hero-sub,.head,.step,.stl,.quote,.about,.closegrid,.show{grid-template-columns:1fr}
  .hero-sub{gap:28px}.head{gap:16px}.show{gap:28px}.notes{order:2}
  .reasons{grid-template-columns:1fr 1fr;gap:28px 20px}
  .step{gap:16px}
  .covers{grid-template-columns:1fr 1fr}
  .pair{grid-template-columns:1fr;gap:8px}.pair .or{padding:0}
}
@media (max-width:640px){
  .hook{font-size:clamp(2.75rem,13.6vw,4rem);line-height:.96}
  .reasons{grid-template-columns:1fr}
  .reasons li{display:grid;grid-template-columns:40px 1fr}.reasons .n{margin:0}
  .covers{grid-template-columns:1fr}
  .corners{grid-template-columns:1fr;gap:12px}.you{display:none}
  .corner{min-height:0;padding:28px 24px}
  .tr,.br{align-items:flex-start;text-align:left}
  .bl,.br{justify-content:flex-start}
  .flow li{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js .rv{opacity:1;transform:none}}
.nav ul a.on{color:var(--white)}
.svc{scroll-margin-top:24px}
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:clamp(32px,4vw,56px);position:relative;padding-top:clamp(28px,3vw,44px)}
.svc-head::before{content:"";position:absolute;top:0;left:0;width:clamp(48px,5vw,72px);height:clamp(48px,5vw,72px);border-top:7px solid var(--c);border-left:7px solid var(--c)}
.svc-head .k{display:block;font-size:14px;font-weight:600;color:var(--c);margin:clamp(20px,2vw,28px) 0 10px clamp(20px,2vw,28px)}
.svc-head h2{margin:0 0 0 clamp(20px,2vw,28px);font-size:clamp(2.25rem,1.3rem + 3vw,4.5rem);font-weight:400;letter-spacing:-.045em;line-height:.95;color:var(--white)}
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.item{padding:24px 0 28px;border-top:1px solid var(--ink-soft)}
.item h3{margin:0 0 8px;font-size:20px;font-weight:600;letter-spacing:-.3px;color:var(--white);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.item p{margin:0;color:var(--muted);font-size:16px;line-height:1.5;max-width:26rem}
.item.star{border-top:2px solid var(--c)}
.item em{font-style:normal;font-size:12px;font-weight:700;color:#000;background:var(--c);border-radius:50px;padding:4px 10px;letter-spacing:0}
@media (max-width:900px){.svc-head{grid-template-columns:1fr;gap:16px}.items{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.items{grid-template-columns:1fr}}

/* home */
.how-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.how-head p{margin:0;color:var(--muted);max-width:28rem}
.starter{margin-top:8px;border-radius:16px;background:#0d0d0d;box-shadow:inset 0 0 0 1px var(--ink-soft);padding:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start}
.starter h4{margin:0;font-size:24px;letter-spacing:-.03em;font-weight:400;color:var(--white);line-height:1.15}
.starter h4 strong{font-weight:600}
.starter h4 small{display:block;font-size:14px;letter-spacing:-.2px;color:var(--muted);margin-bottom:10px;font-weight:400}
.starter ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 32px}
.starter li{padding-left:22px;position:relative;color:var(--light)}
.starter li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--white)}
.starter .pill{margin-top:28px}
/* pricing */
.k{display:block;font-size:14px;font-weight:600;color:var(--c,var(--muted));font-variant-numeric:tabular-nums}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:16px;line-height:1.45;color:var(--light)}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--c,var(--white));border-bottom:2px solid var(--c,var(--white));transform:rotate(-45deg)}
.free{--c:var(--amber);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:40px;align-items:center;padding:clamp(28px,3.4vw,48px);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft);position:relative}
.free::before{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-top:7px solid var(--c);border-left:7px solid var(--c);border-top-left-radius:16px}
.free h2{margin:10px 0 0;font-size:clamp(2rem,1.2rem + 2.4vw,3.5rem);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--white)}
.price{display:block;font-weight:600;color:var(--c);margin-top:8px}
.plans{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;padding:clamp(28px,2.8vw,40px);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft);display:flex;flex-direction:column;gap:18px}
.plan::before{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-top:7px solid var(--c);border-left:7px solid var(--c);border-top-left-radius:16px}
.plan.pop{box-shadow:inset 0 0 0 2px var(--c);background:#0b0b0b}
.plan h3{margin:0;font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--white)}
.plan .what{margin:0;color:var(--muted);font-size:16px;line-height:1.5;min-height:4.5em}
.amt{margin:0;display:flex;align-items:baseline;gap:6px;padding:16px 0;border-top:1px solid var(--ink-soft);border-bottom:1px solid var(--ink-soft)}
.amt b{font-size:clamp(2.5rem,1.6rem + 2.6vw,3.75rem);font-weight:600;letter-spacing:-.045em;color:var(--white);font-variant-numeric:tabular-nums}
.amt span{color:var(--muted);font-size:16px}
.fine{margin:20px 0 0;color:var(--muted);font-size:15px}
.rows{list-style:none;margin:0;padding:0}
.row{display:flex;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--ink-soft);font-size:18px;color:var(--light)}
.row:last-child{border-bottom:1px solid var(--ink-soft)}
.row b{font-weight:600;color:var(--white);text-align:right}
@media (max-width:900px){.free{grid-template-columns:1fr;gap:24px}.plans{grid-template-columns:1fr}.plan .what{min-height:0}}
@media (max-width:640px){.row{flex-direction:column;gap:4px}.row b{text-align:left}}
.setup{margin:0;color:var(--light);font-size:16px}
.plan .setup{margin:-6px 0 0;font-size:15px;color:var(--light)}
.plan .ticks b{color:var(--white);font-weight:600}

/* shared header + footer (www build) */
.nav{display:flex;align-items:center;gap:32px;height:88px}
.nav .links{display:flex;gap:32px;margin-left:auto;font-size:15px}
.nav .links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);transition:color .3s var(--ease)}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--white)}
.sm-only{display:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:9;background:var(--white);color:#000;padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:8px}
.site-foot{border-top:1px solid var(--ink-soft);margin-top:clamp(64px,7vw,104px);padding:40px 0 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;font-size:15px;color:var(--muted)}
.site-foot .lock{font-size:18px}
.site-foot p{margin:8px 0 0}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px;align-items:start}
.site-foot ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--light)}
.site-foot ul a:hover{text-decoration:underline}
.site-foot small{grid-column:1/-1;font-size:14px}
.step .textlink{margin-top:8px}
.nf{padding:clamp(64px,10vw,160px) 0 0}
.nf .cta{margin-top:40px}
@media (max-width:640px){
  .nav{display:grid;grid-template-columns:1fr auto;grid-template-areas:"lock cta" "links links";height:auto;gap:4px 12px;padding:14px 0 6px}
  .nav .lock{grid-area:lock;font-size:18px}
  .nav .pill{grid-area:cta}
  .nav .links{grid-area:links;margin:0;gap:24px}
  .lg-only{display:none}.sm-only{display:inline}
  main .pill{white-space:normal;text-align:center;line-height:1.2;padding:12px 24px;max-width:100%}
  .site-foot{grid-template-columns:1fr}
}

/* mobile overrides that must follow the base rules above (how-head, starter) */
@media (max-width:900px){.how-head{grid-template-columns:1fr;gap:16px;margin-top:56px}.starter{grid-template-columns:1fr}.starter ul{grid-template-columns:1fr}}
/* Footer tagline under the lockup (Bo's pick 2026-10-03, matches Steve's preview footer). */
.site-foot .tagline{font-size:14px;line-height:1.5}
.site-foot .tagline b{color:var(--white);font-weight:600}
/* Services: the old home hook is the H1 now; the "Four corners" intro sits under it (Bo 2026-10-03 05:27Z). */
.svc-label{display:block;margin-top:clamp(40px,5vw,72px)}
.svc-sub{margin:12px 0 0}
/* Headline key word in the standard orange (Bo 2026-10-03 05:37Z, replaced the 4-colour gradient). */
.hook strong.grad{color:var(--orange)}
.hook strong.grad + .dot{background:#FF5A1F}

/* ===== 4 corners motion graphic, replaces the .jump pills (Bo picked Banksy's concept 3, 2026-10-03 05:39Z) =====
   The logo unfolds into the four corners, then the Bracket + wordmark lockup settles in the centre.
   Centre lockup is 1.5x the concept (Bo): sized with font-size, so the SVG and text stay sharp. */
.corners4{margin-top:clamp(48px,6vw,88px)}
.home-c4{margin-top:clamp(56px,7vw,112px)}
.home-c4 > .label{margin-bottom:clamp(20px,2.4vw,32px)}
.home-c4 .corners4{margin-top:0}
.corners4 .frame{position:relative;container-type:size;aspect-ratio:1360/500;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;--s:clamp(56px,7.4vw,112px);--w:clamp(6px,.62vw,9px);--d:22px}
.corners4 .cn{display:block;text-decoration:none;color:var(--white);border-radius:12px;outline-offset:-2px}
.corners4 .cn:focus-visible{outline:2px solid var(--c)}
.corners4 .brk{position:absolute;width:var(--s);height:var(--s);border:0 solid var(--c);
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1),border-color .6s ease,border-width .3s cubic-bezier(.16,1,.3,1)}
.corners4 .tl .brk{top:0;left:0;border-top-width:var(--w);border-left-width:var(--w)}
.corners4 .tr .brk{top:0;right:0;border-top-width:var(--w);border-right-width:var(--w)}
.corners4 .bl .brk{bottom:0;left:0;border-bottom-width:var(--w);border-left-width:var(--w)}
.corners4 .br .brk{bottom:0;right:0;border-bottom-width:var(--w);border-right-width:var(--w)}
.corners4 .cn:hover .brk,.corners4 .cn:focus-visible .brk{--w:clamp(9px,.9vw,13px)}
.corners4 .lab{position:absolute;display:flex;flex-direction:column;gap:6px;max-width:min(30cqw,340px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.corners4 .tl .lab{top:calc(var(--s)*.42);left:calc(var(--s)*.42)}
.corners4 .tr .lab{top:calc(var(--s)*.42);right:calc(var(--s)*.42);text-align:right;align-items:flex-end}
.corners4 .bl .lab{bottom:calc(var(--s)*.42);left:calc(var(--s)*.42)}
.corners4 .br .lab{bottom:calc(var(--s)*.42);right:calc(var(--s)*.42);text-align:right;align-items:flex-end}
.corners4 .lab .n{margin:0;display:block;font-size:14px;font-weight:600;color:var(--c);font-variant-numeric:tabular-nums}
.corners4 .lab b{font-size:clamp(1.75rem,1rem + 2.2vw,3.25rem);font-weight:400;letter-spacing:-.045em;line-height:.95}
.corners4 .lab em{font-style:normal;color:var(--muted);font-size:16px;line-height:1.35}
.corners4 .cn:hover .lab b{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:8px}
.corners4 .c4-you{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.corners4 .c4-you i{display:block;width:clamp(18px,1.8vw,26px);height:clamp(18px,1.8vw,26px);border-radius:50%;background:var(--orange)}
.corners4 .seed{position:absolute;left:50%;top:50%;width:calc(var(--s)*.9);height:calc(var(--s)*.9);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .25s ease}
.corners4 .seed svg{width:100%;height:100%}
/* centre lockup: concept was clamp(20px,2.1vw,30px); 1.5x */
.corners4 .lockc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5em;font-size:clamp(30px,3.15vw,45px);letter-spacing:-.035em;color:var(--white);white-space:nowrap;pointer-events:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1)}
.corners4 .lockc svg{width:1.1em;height:1.1em;flex:none}
.corners4 .lockc b{font-weight:600}
/* start frame: the four brackets sit on the centre, turned to read as the Bracket logo, in white */
.corners4.pre .seed{opacity:1}
.corners4.pre .brk{border-color:var(--white);opacity:0}
.corners4.pre .tl .brk{transform:translate(calc(50cqw - var(--s)/2 + var(--d)),calc(50cqh - var(--s)/2 + var(--d))) rotate(180deg) scale(.62)}
.corners4.pre .tr .brk{transform:translate(calc(var(--d) + var(--s)/2 - 50cqw),calc(50cqh - var(--s)/2 + var(--d))) rotate(90deg) scale(.62)}
.corners4.pre .bl .brk{transform:translate(calc(50cqw - var(--s)/2 + var(--d)),calc(var(--d) + var(--s)/2 - 50cqh)) rotate(-90deg) scale(.62)}
.corners4.pre .br .brk{transform:translate(calc(var(--d) + var(--s)/2 - 50cqw),calc(var(--d) + var(--s)/2 - 50cqh)) scale(.62)}
.corners4.pre .lab{opacity:0;transform:translateY(10px)}
.corners4.pre .lockc{opacity:0;filter:blur(6px)}
.corners4.pre .c4-you{opacity:1}
.corners4.play .seed{transition-delay:.35s}
.corners4.play .brk{transition:transform 1.05s cubic-bezier(.16,1,.3,1) .45s,opacity .01s linear .4s,border-color .8s ease .6s,border-width .3s ease}
.corners4.play .tr .brk{transition-delay:.5s,.4s,.65s,0s}
.corners4.play .bl .brk{transition-delay:.55s,.4s,.7s,0s}
.corners4.play .br .brk{transition-delay:.6s,.4s,.75s,0s}
.corners4.play .lab{transition-delay:1.15s}
.corners4.play .tr .lab{transition-delay:1.22s}
.corners4.play .bl .lab{transition-delay:1.29s}
.corners4.play .br .lab{transition-delay:1.36s}
/* the dot glides into its place in the lockup, then hands over to the lockup's own dot */
.corners4.play .c4-you{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(var(--k,1));transition:transform .8s cubic-bezier(.65,0,.35,1) 1.45s,opacity .01s linear 2.3s}
.corners4.play .lockc{transition-delay:1.75s}
@media (max-width:640px){
  .corners4 .frame{aspect-ratio:1/1.1;--s:64px;--w:6px;--d:12px}
  .corners4 .lab{max-width:40cqw}
  .corners4 .lab b{font-size:1.5rem}
  .corners4 .lab em{display:none}
}
/* mid widths: a taller frame so the 1.5x lockup clears the corner labels */
@media (min-width:641px) and (max-width:1100px){.corners4 .frame{aspect-ratio:2/1}}
@media (min-width:641px) and (max-width:900px){.corners4 .frame{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.corners4 *{transition:none!important}}

/* ===== Team photos (Bo picked 07, 08, 09, 02 on 2026-10-03 05:53Z). Generated illustrations, each labelled. =====
   .band = full-bleed photo strip (home by the four reasons, Services under the 4 corners).
   .side-photo = photo beside the "Three steps" heading. Pricing hero reuses .hero-photo/.hp. */
.hero-photo .label{position:relative;z-index:1}
.band{position:relative;margin:clamp(56px,7vw,112px) calc(var(--gutter)*-1) 0}
.band img{display:block;width:100%;height:auto;aspect-ratio:var(--bp-r,21/9);object-fit:cover;object-position:var(--bp-pos,50% 45%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 80%,transparent 100%)}
.band .hp-cap{bottom:6px}
.band + .reasons{margin-top:16px}
@media (min-width:1441px){.band{margin-left:calc((100vw - 1440px)/-2 - var(--gutter));margin-right:calc((100vw - 1440px)/-2 - var(--gutter))}}
.how-photo{margin-top:clamp(72px,9vw,144px)}
.how-photo>div p{margin-top:20px}
.side-photo{position:relative;margin:0}
.side-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:4px;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.side-photo .hp-cap{right:12px;bottom:6px}
@media (max-width:900px){
  .band img{aspect-ratio:4/3;object-position:50% 50%}
  .side-photo{margin:12px calc(var(--gutter)*-1) 0}
  .side-photo img{aspect-ratio:4/3;border-radius:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 80%,transparent 100%)}
  .side-photo .hp-cap{right:var(--gutter)}
}