/* premium.css, 3 Nov 2026, third pass: built like squarespace.com, in the YFS
   brand. Black and white, one big clean sans, photography carries the colour.
   Loads after styles.css, polish.css and rusty.css and overrides them; every
   class, id and script hook the pages use is kept so forms, the checker and the
   phone menu keep working. Fonts are self-hosted Inter (CSP font-src 'self'). */

:root{
  --ground:#FFFFFF; --panel:#F5F5F3; --raise:#ECECE9;
  --text:#111111; --mute:#555555; --faint:#7A7A7A;
  --line:#E6E6E3; --line-lit:#CFCFCB;
  --blue:#1A5FD0; --blue-deep:#124AA8; --blue-soft:rgba(26,95,208,.08);
  --cyan:#111111; --glow:rgba(0,0,0,.18);
  --ok:#1B9E5A; --gold:#111111; --accent:#111111;
  --ink:#0A0A0A; --paper:#FFFFFF;
  --sp:clamp(20px,5vw,40px);
  --display:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
body{background:var(--ground); color:var(--text); font:16.5px/1.6 var(--body); -webkit-font-smoothing:antialiased; padding-left:0 !important}
body::before,body::after{display:none}
.wrap{width:min(1360px,100% - var(--sp)*2)}
a{color:var(--text); text-decoration:underline; text-decoration-color:var(--line-lit); text-underline-offset:3px}
a:hover{text-decoration-color:var(--text)}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* ---- type: one clean sans, tight, large, mostly centred ---- */
h1,h2,h3{font-family:var(--display); font-weight:500; letter-spacing:-.035em; line-height:1.02; margin:0; text-wrap:balance}
h1{font-size:clamp(2.9rem,7.5vw,5.8rem); font-weight:500; letter-spacing:-.04em}
h1 .l2{display:block; color:inherit} h1 .l2 .w{color:inherit}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:1.35rem; letter-spacing:-.02em; font-weight:500}
.sub{font-family:var(--body); font-size:clamp(1rem,1.5vw,1.15rem); color:var(--mute); max-width:54ch; margin:22px auto 26px; line-height:1.55}
.lede{font-size:1.08rem; color:var(--mute); max-width:60ch; line-height:1.55; margin-top:14px}
.kicker{font-family:var(--body); font-size:12.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
.kicker::before{display:none}
.eyebrow{background:none; border:0; padding:0; margin-bottom:18px; color:var(--faint); font-weight:500; letter-spacing:.1em; font-size:12px}
.cta-note{color:var(--faint); font-size:14px}

/* ---- buttons: squarespace shape, black on white, white on black ---- */
.btn,.btn:not(.ghost),.rusty-cta{font-family:var(--body); font-weight:500; font-size:14px; letter-spacing:.02em; text-transform:uppercase;
  padding:0 26px; min-height:50px; border-radius:4px; background:var(--ink); color:#fff; border:1px solid var(--ink); box-shadow:none; transform:none}
.btn::after{display:none}
.btn:hover,.btn:not(.ghost):hover{background:#2a2a2a; border-color:#2a2a2a; color:#fff; transform:none; filter:none; box-shadow:none; text-decoration:none}
.btn.ghost,.btn.ghost:hover{background:transparent; color:var(--text); border-color:var(--text)}
.btn.ghost:hover{background:var(--panel)}
nav .cta-lite,nav .cta-lite:hover{background:var(--ink); color:#fff; border:1px solid var(--ink); box-shadow:none; text-transform:uppercase; letter-spacing:.02em; font-size:13px; padding:0 18px; min-height:44px; border-radius:4px}
.btn,nav a,.offers a,.work,a.card,.more-link a,.crumb a,footer a,.rusty-cta,.rail a,.price .btn,.kind-tabs button,.sq-card,.sq-tile,.sq-tall,.sq-chips a,.sq-row a{text-decoration:none !important}

/* ---- nav ---- */
body > nav{background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
nav.stuck{background:rgba(255,255,255,.96)}
nav .bar{height:72px; gap:24px}
nav img{height:24px}
nav .links a{color:var(--text); font-size:13.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase}
nav .links a:hover{color:var(--mute)}
@media(min-width:821px){
  .rail,.rail-scrim{display:none !important}
  nav .links{display:flex !important; position:static; visibility:visible; opacity:1; transform:none}
  nav .bar .burger{display:none}
}
@media(max-width:820px){
  nav .links{background:var(--ground); border-bottom:1px solid var(--line); box-shadow:none}
  nav .links a{border-top:1px solid var(--line); color:var(--text)}
  .rail{background:var(--ground); border-right:1px solid var(--line)}
  .rail .item{color:var(--mute)} .rail .item:hover,.rail .item[aria-current="page"]{color:var(--text); background:var(--panel)}
  .rail-cta{background:var(--ink); color:#fff}
  .burger{border-color:var(--line-lit)} .burger span{background:var(--text)}
}
/* the home page nav sits over the photo */
.home body > nav{background:transparent; border-bottom-color:transparent; position:absolute; top:0; left:0; right:0}
.home nav .links a,.home nav .links a:hover{color:#fff}
.home nav .cta-lite,.home nav .cta-lite:hover{background:#fff; color:var(--ink); border-color:#fff}
.home .burger{border-color:rgba(255,255,255,.4)} .home .burger span{background:#fff}
@media(max-width:820px){.home nav .links{background:var(--ink)} .home nav .links a{color:#fff; border-top-color:#333}}

/* ---- home: hero ---- */
.sq-hero{position:relative; padding:0 0 clamp(140px,18vw,240px); margin:0; min-height:min(92vh,900px); display:grid; align-content:center; overflow:visible; background:var(--ink); color:#fff}
.sq-hero::before{display:none}
.sq-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; z-index:0; filter:saturate(1.1)}
.sq-hero::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35) 45%,rgba(0,0,0,.85))}
.sq-hero-in{position:relative; z-index:2; text-align:center; padding-top:clamp(120px,16vw,170px)}
.sq-hero h1{color:#fff; max-width:14ch; margin:0 auto; text-shadow:0 2px 30px rgba(0,0,0,.35)}
.sq-hero .sub{color:rgba(255,255,255,.88)}
.sq-hero .cta-row{justify-content:center}
.sq-hero .btn{background:#fff; color:var(--ink); border-color:#fff} .sq-hero .btn:hover{background:#eee; border-color:#eee}
.sq-hero .cta-note{color:rgba(255,255,255,.75); margin-top:16px}
.sq-row{position:absolute; left:0; right:0; bottom:calc(-1 * clamp(70px,9vw,120px)); z-index:3; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,28px); padding:0 clamp(0px,4vw,60px); align-items:end}
.sq-row a{display:block; border-radius:8px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.55); transform:translateY(0); transition:transform .5s var(--ease)}
.sq-row a:hover{transform:translateY(-6px)}
.sq-row a:nth-child(2){transform:scale(1.06)} .sq-row a:nth-child(2):hover{transform:scale(1.06) translateY(-6px)}
.sq-row img{display:block; width:100%; height:auto}
@media(max-width:700px){.sq-row{grid-template-columns:1fr 1fr; padding:0 16px} .sq-row a:nth-child(3){display:none} .sq-hero{padding-bottom:120px}}
html.anim .sq-hero .rise{transition-delay:.2s}

/* ---- home: stats band ---- */
.sq-stats{background:var(--ink); color:#fff; border:0; padding:clamp(150px,18vw,250px) 0 clamp(70px,8vw,110px); text-align:center}
.sq-stats-lede{color:rgba(255,255,255,.75); margin:0 0 34px; font-size:1rem}
.sq-stats-row{display:flex; justify-content:center; gap:clamp(40px,8vw,120px); flex-wrap:wrap}
.sq-stats-row b{display:block; font-family:var(--display); font-weight:500; font-size:clamp(3rem,7vw,5.4rem); letter-spacing:-.05em; line-height:1}
.sq-stats-row span{display:block; margin-top:10px; font-size:14px; color:rgba(255,255,255,.75)}

/* ---- sections ---- */
section{padding:clamp(70px,9vw,120px) 0; border:0}
.sq-light{background:var(--ground); text-align:center}
.sq-light .lede{margin-left:auto; margin-right:auto}
.sq-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:30px 0 34px}
.sq-chips a{padding:10px 18px; border-radius:999px; font-size:15px; color:var(--text); font-weight:500}
.sq-chips a:hover{background:var(--panel)}
.sq-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); text-align:left}
.sq-card,.sq-tile{position:relative; display:flex; flex-direction:column; justify-content:flex-start; min-height:520px; border-radius:10px; overflow:hidden; color:#fff; isolation:isolate;
  background:var(--ink) var(--img) center/cover no-repeat; padding:30px 30px 28px}
.sq-card::before,.sq-tile::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.18) 55%,rgba(0,0,0,.55)); z-index:-1; transition:opacity .4s}
.sq-card:hover::before,.sq-tile:hover::before{opacity:.9}
.sq-card h3,.sq-tile h3{color:#fff; font-size:1.6rem; margin-bottom:10px}
.sq-card p,.sq-tile p{color:rgba(255,255,255,.88); font-size:15px; max-width:34ch; margin:0}
.sq-arrow{position:absolute; right:26px; bottom:22px; font-size:1.5rem; color:#fff; transition:transform .3s var(--ease)}
.sq-card:hover .sq-arrow,.sq-tile:hover .sq-arrow,.sq-tall:hover b{transform:translateX(6px)}
@media(max-width:880px){.sq-cards{grid-template-columns:1fr} .sq-card{min-height:380px}}
.sq-prices{text-align:left; padding-top:0}
.sq-split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:34px}
.sq-split .lede{margin:0}
@media(max-width:880px){.sq-split{grid-template-columns:1fr; gap:14px}}
.sq-grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px)}
.sq-tile{min-height:440px; padding:26px 24px}
.sq-tile h3{font-size:1.2rem; letter-spacing:-.01em}
.sq-tile h3 b{display:block; font-size:2.2rem; letter-spacing:-.04em; margin-top:8px; font-weight:500}
.sq-tile p{font-size:14.5px; margin-top:10px}
@media(max-width:1000px){.sq-grid4{grid-template-columns:1fr 1fr}} @media(max-width:560px){.sq-grid4{grid-template-columns:1fr} .sq-tile{min-height:320px}}
.sq-warm{text-align:center; background:linear-gradient(180deg,#FFFFFF 0%,#F3EEE6 40%,#D9CFC2 100%)}
.sq-warm .lede{margin-left:auto; margin-right:auto}
.sq-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,28px); margin-top:40px; max-width:980px; margin-left:auto; margin-right:auto}
.sq-tall{display:flex; flex-direction:column; background:var(--ink); color:#fff; border-radius:10px; overflow:hidden; text-align:center}
.sq-tall img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top}
.sq-tall div{padding:26px 24px 30px}
.sq-tall small{display:block; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:10px}
.sq-tall p{color:rgba(255,255,255,.85); margin:0 auto 16px; max-width:40ch; font-size:15px}
.sq-tall b{display:inline-block; font-weight:500; transition:transform .3s var(--ease)}
@media(max-width:700px){.sq-two{grid-template-columns:1fr}}
.sq-dark{background:var(--ink); color:#fff}
.sq-dark .lede{color:rgba(255,255,255,.75)}
.sq-dark h2,.sq-dark h3,.sq-dark b{color:#fff}
.sq-dark .more-link a{color:#fff}
.sq-dark + .sq-dark{padding-top:0}

/* ---- shared components, inner pages ---- */
header{padding:clamp(56px,9vw,112px) 0 clamp(40px,6vw,72px); overflow:visible}
header::before{display:none}
header.page{padding:clamp(60px,9vw,110px) 0 clamp(34px,5vw,56px); text-align:center; background:var(--ground)}
header.page .wrap > *{margin-left:auto; margin-right:auto}
header.page h1{font-size:clamp(2.4rem,5.6vw,4.4rem); max-width:20ch}
header.page .sub{margin-bottom:0}
.crumb{font-family:var(--body); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.crumb a{color:var(--faint)}
.hero-grid{gap:clamp(32px,5vw,72px); align-items:center}
.hero-facts{font-size:13.5px; color:var(--faint); margin-top:30px; gap:10px 26px}
.hero-facts svg{stroke:var(--ok)}
.strip{border:0; background:var(--ink); color:#fff; margin:0}
.strip .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.strip div{padding:26px 22px 24px; border-left:1px solid rgba(255,255,255,.18)} .strip div:first-child{border-left:0; padding-left:0}
.strip b{display:block; font-family:var(--display); font-weight:500; font-size:1.8rem; letter-spacing:-.03em; color:#fff; margin-bottom:4px}
.strip span{font-size:13.5px; color:rgba(255,255,255,.72)}
@media(max-width:820px){.strip .wrap{grid-template-columns:1fr 1fr} .strip div{padding:18px 16px} .strip div:nth-child(odd){border-left:0; padding-left:0} .strip div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}}
.grid{gap:clamp(12px,1.6vw,22px); border:0; border-radius:0; overflow:visible; background:transparent}
.grid > *{border:0; border-radius:10px !important; margin:0}
.card,a.card{background:var(--panel); border:0; box-shadow:none; padding:30px 28px; transition:background .25s, transform .3s var(--ease)}
.card::before,.work::before{display:none}
.card:hover,a.card:hover{background:var(--raise); transform:none; box-shadow:none; text-decoration:none}
.sq-dark .card{background:#1A1A1A; color:#fff} .sq-dark .card > p{color:rgba(255,255,255,.75)}
.card h2,.card h3{font-size:1.3rem; margin-bottom:10px}
.card > p{color:var(--mute); font-size:15px}
.ico{width:40px; height:40px; border-radius:8px; background:var(--ground); border:1px solid var(--line); margin-bottom:18px}
.ico svg{stroke:var(--text); width:18px; height:18px}
.work{padding:0; background:var(--panel); border:0; box-shadow:none; overflow:hidden; transition:transform .4s var(--ease)}
.work:hover{transform:translateY(-4px); background:var(--panel); box-shadow:0 30px 50px -30px rgba(0,0,0,.4)}
.sq-dark .work{background:#1A1A1A} .sq-dark .work p{color:rgba(255,255,255,.72)}
.work .shot{aspect-ratio:16/11; border-bottom:0; background:var(--raise)}
.work .shot img{object-position:top} .work .shot::after{display:none}
.work .body{padding:20px 24px 24px}
.work h2,.work h3{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:1.2rem}
.work p{color:var(--mute); font-size:15px}
.tag,.badge{font-family:var(--body); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; padding:3px 8px; background:transparent}
.tag.live{color:var(--ok); border:1px solid rgba(27,158,90,.4)}
.tag.demo{color:var(--mute); border:1px solid var(--line-lit)} .sq-dark .tag.demo{color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.3)}
.more-link{font-weight:500; font-size:15px; margin-top:28px} .more-link a{color:var(--text)}
.price{background:var(--panel); border:0; padding:32px 30px; border-radius:10px}
.price.feature,.price.feature:hover{background:var(--ink); color:#fff; transform:none; box-shadow:none; outline:0}
.price.feature h2,.price.feature h3,.price.feature .amt,.price.feature li,.price.feature p{color:#fff}
.price.feature .amt small{color:rgba(255,255,255,.7)} .price.feature .note{color:rgba(255,255,255,.7)}
.price.feature .btn{background:#fff; color:var(--ink); border-color:#fff}
.grid:has(.price.feature) .price{padding-top:32px} .grid:has(.price.feature) .price:not(.feature){opacity:1}
.price h2,.price h3{font-family:var(--body); font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:12.5px; color:var(--faint)}
.amt{font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,4vw,3.6rem); letter-spacing:-.05em; margin:12px 0 8px}
.amt small{font-family:var(--body); font-size:13px; color:var(--faint); letter-spacing:.02em}
.price li{color:var(--mute); font-size:15px} .price li svg{stroke:var(--ok)}
.price .btn{margin-top:22px}
.badge{position:static; display:inline-block; margin-bottom:12px; background:#fff; color:var(--ink); border:1px solid #fff}
.steps::before,.steps::after{display:none}
.steps li{border-top:1px solid var(--line); padding:22px 0 22px 64px; grid-template-columns:1fr}
.steps li::before{position:absolute; left:0; top:22px; width:40px; height:40px; border:1px solid var(--line-lit); background:transparent; font-family:var(--display); font-weight:500; font-size:14px; color:var(--text); box-shadow:none}
.steps li.lit::before{border-color:var(--text); color:var(--text); box-shadow:none}
.steps b{font-family:var(--display); font-weight:500; font-size:1.2rem} .steps p{color:var(--mute)}
.faq details{background:transparent; border:0; border-top:1px solid var(--line); border-radius:0}
.faq details:last-child{border-bottom:1px solid var(--line)} .faq details[open]{background:transparent}
.faq summary{font-family:var(--display); font-weight:500; font-size:1.1rem; padding:18px 0; color:var(--text)}
.faq summary .fchev{color:var(--text)} .faq .fbody{color:var(--mute); padding:0 0 20px}
.how{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px); margin-top:34px}
.how div{padding:26px 24px 24px; border-radius:10px; background:#1A1A1A}
.how .n{font-family:var(--display); font-weight:500; font-size:2.2rem; letter-spacing:-.04em; color:#fff; display:block; margin-bottom:14px}
.how b{display:block; font-family:var(--display); font-weight:500; font-size:1.15rem; margin-bottom:8px}
.how p{color:rgba(255,255,255,.72); font-size:15px; margin:0}
@media(max-width:880px){.how{grid-template-columns:1fr 1fr}} @media(max-width:520px){.how{grid-template-columns:1fr}}
.offers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px)}
.offers a{display:block; padding:30px 28px 28px; border-radius:10px; background:var(--panel); color:inherit; min-width:0}
.offers .k{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:18px}
.offers .amt{margin:0 0 10px} .offers p{color:var(--mute); font-size:15px; margin:0 0 18px} .offers .go{font-weight:500}
@media(max-width:880px){.offers{grid-template-columns:1fr}}

/* ---- enquiry block and form: the dark final section ---- */
#start{background:var(--ink); color:#fff; padding-top:0}
.final{background:transparent; border:0; border-top:1px solid rgba(255,255,255,.12); border-radius:0; padding:clamp(56px,8vw,96px) 0 0; box-shadow:none}
.final::before{display:none}
.final h2{font-size:clamp(2rem,4.4vw,3.4rem); color:#fff}
.final .lede{color:rgba(255,255,255,.75); margin-left:auto; margin-right:auto}
.kind-tabs{background:transparent; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:3px}
.kind-tabs button{font-family:var(--body); font-weight:500; border-radius:999px; color:#fff}
.kind-tabs button[aria-pressed="true"]{background:#fff; color:var(--ink)}
.enq-form label{font-family:var(--body); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.enq-form input,.enq-form textarea{background:#1A1A1A; border:1px solid #333; border-radius:4px; color:#fff}
.enq-form input::placeholder,.enq-form textarea::placeholder{color:#777}
.enq-form input:focus,.enq-form textarea:focus{outline:1px solid #fff; border-color:#fff}
.opts label{border:1px solid #444; background:transparent; border-radius:999px; font-family:var(--body); font-weight:500; color:#fff}
.opts input:checked + label{background:#fff; color:var(--ink); border-color:#fff}
.enq-form button[type=submit]{background:#fff; color:var(--ink); border-color:#fff}
.enq-ok{border:1px solid rgba(27,158,90,.5); background:rgba(27,158,90,.12); color:#fff}
.enq-fallback,.enq-fallback a{color:rgba(255,255,255,.7)}
.enq-msg.err{color:#ff8a80}
.copy-btn{background:transparent; border:1px solid #444; color:#fff}
.enq-fab{background:var(--ink); color:#fff; box-shadow:0 10px 30px -12px rgba(0,0,0,.6); border-radius:999px}
.to-top{border:1px solid var(--line-lit); background:#fff; color:var(--text)}
.scroll-progress{background:var(--ink)}
/* inner pages keep the final block light */
main > section:not(.sq-dark):not(#start) .final{border-top:1px solid var(--line); color:var(--text)}
main > section:not(.sq-dark):not(#start) .final h2{color:var(--text)}
main > section:not(.sq-dark):not(#start) .final .lede{color:var(--mute)}
main > section:not(.sq-dark):not(#start) .enq-form label{color:var(--faint)}
main > section:not(.sq-dark):not(#start) .enq-form input,main > section:not(.sq-dark):not(#start) .enq-form textarea{background:var(--panel); border-color:var(--line-lit); color:var(--text)}
main > section:not(.sq-dark):not(#start) .enq-form input:focus,main > section:not(.sq-dark):not(#start) .enq-form textarea:focus{outline-color:var(--ink); border-color:var(--ink)}
main > section:not(.sq-dark):not(#start) .kind-tabs{border-color:var(--line-lit)} main > section:not(.sq-dark):not(#start) .kind-tabs button{color:var(--text)}
main > section:not(.sq-dark):not(#start) .kind-tabs button[aria-pressed="true"]{background:var(--ink); color:#fff}
main > section:not(.sq-dark):not(#start) .opts label{border-color:var(--line-lit); color:var(--text)}
main > section:not(.sq-dark):not(#start) .opts input:checked + label{background:var(--ink); color:#fff; border-color:var(--ink)}
main > section:not(.sq-dark):not(#start) .enq-form button[type=submit]{background:var(--ink); color:#fff; border-color:var(--ink)}
main > section:not(.sq-dark):not(#start) .enq-fallback,main > section:not(.sq-dark):not(#start) .enq-fallback a{color:var(--mute)}
main > section:not(.sq-dark):not(#start) .copy-btn{border-color:var(--line-lit); color:var(--text)}

/* ---- footer ---- */
footer{border-top:1px solid #222; background:var(--ink); color:#fff}
footer .foot-grid{padding:clamp(44px,6vw,72px) 0 36px; gap:36px}
footer a{color:rgba(255,255,255,.8); font-size:14.5px} footer a:hover{color:#fff}
footer .foot-h{font-family:var(--body); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.foot-brand img{height:22px; width:auto}
.foot-brand p{color:rgba(255,255,255,.72); font-size:14.5px; max-width:36ch}
.foot-brand .abn{color:rgba(255,255,255,.5); font-size:12.5px}
.foot-base{border-top:1px solid #222; padding:18px 0 28px; color:rgba(255,255,255,.5); font-size:12.5px}
footer .copy-btn{border-color:#444; color:#fff}

html.anim .rv,html.anim .rv-l,html.anim .rv-r{transition-duration:.7s}
@media(prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ---- fixes after the squarespace pass ---- */
#enquire .kind-tabs{background:#1A1A1A; border:1px solid #333}
#enquire .kind-tabs button{color:#fff; background:transparent}
#enquire .kind-tabs button[aria-pressed="true"]{background:#fff; color:var(--ink)}
section h2{margin-bottom:18px}
h2 + .grid,h2 + .cta-row,h2 + .offers,h2 + .steps,h2 + .faq,h2 + .tbl-wrap,.lede + .grid,.lede + .cta-row,.lede + .steps,.lede + .faq,.lede + .offers{margin-top:28px}
header.page + section > .wrap > p,section > .wrap > p:not(.lede):not(.kicker):not(.more-link):not(.cta-note):not(.sq-stats-lede){max-width:72ch}
.sq-light > .wrap > p{margin-left:auto; margin-right:auto}
.sq-prices > .wrap > p{margin-left:0}
#enquire .opts label{color:#fff; background:transparent; border:1px solid #555; border-radius:999px}
#enquire .opts label:hover{border-color:#fff}
#enquire .opts input:checked + label{background:#fff; color:var(--ink); border-color:#fff}
#enquire .opts input:focus-visible + label{outline:2px solid #fff; outline-offset:2px}
#enquire .need legend{color:rgba(255,255,255,.7)}

/* ---- iPhone Duo (3 Nov 2026): outer screen about 466px wide, inner screen about 626 by 890.
   Between 600 and 760px everything that is three or four across goes two across, with a
   gutter wide enough that the fold lands between columns, never through a card. ---- */
@media(min-width:600px) and (max-width:760px){
  .sq-cards,.sq-grid4,.how,.offers,.grid.g3,.grid.g2{grid-template-columns:1fr 1fr !important; column-gap:28px}
  .sq-row{grid-template-columns:1fr 1fr; column-gap:28px; padding:0 20px} .sq-row a:nth-child(3){display:none}
  .sq-card{min-height:420px} .sq-tile{min-height:360px}
  .sq-two{grid-template-columns:1fr 1fr; column-gap:28px}
  .sq-stats-row{gap:40px}
  .strip .wrap{grid-template-columns:1fr 1fr}
}
/* when the browser reports the two halves of a folding screen, keep the hinge in the gutter */
@media(horizontal-viewport-segments:2){
  .sq-cards,.sq-grid4,.how,.offers,.grid.g3,.grid.g2,.sq-two,.sq-row{grid-template-columns:1fr 1fr !important; column-gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + 24px)}
  .sq-hero-in,header.page .wrap{padding-left:12px; padding-right:12px}
}

/* ---- hero slideshow (3 Nov): six niches, one photo each, slow crossfade with a gentle
   push in, and the last word of the headline changes with the photo. Pure CSS, 36s loop,
   6s per niche. Reduced motion shows the first photo and word only. ---- */
.sq-slides{position:absolute; inset:0; z-index:0; overflow:hidden}
.sq-slides .sq-hero-bg{opacity:0; animation:sqFade 36s infinite; transform-origin:center}
.sq-slides .sq-hero-bg:nth-child(1){animation-delay:0s} .sq-slides .sq-hero-bg:nth-child(2){animation-delay:6s}
.sq-slides .sq-hero-bg:nth-child(3){animation-delay:12s} .sq-slides .sq-hero-bg:nth-child(4){animation-delay:18s}
.sq-slides .sq-hero-bg:nth-child(5){animation-delay:24s} .sq-slides .sq-hero-bg:nth-child(6){animation-delay:30s}
@keyframes sqFade{0%{opacity:0; transform:scale(1)} 4%{opacity:1} 16.6%{opacity:1; transform:scale(1.06)} 21%{opacity:0; transform:scale(1.07)} 100%{opacity:0; transform:scale(1)}}
.sq-hero h1{line-height:1.02}
.sq-for{display:block; color:rgba(255,255,255,.92)}
.sq-niche{display:inline-grid; justify-items:center; text-align:center; vertical-align:top}
.sq-niche i{grid-area:1/1; font-style:normal; opacity:0; animation:sqWord 36s infinite; white-space:nowrap}
.sq-niche i:nth-child(1){animation-delay:0s} .sq-niche i:nth-child(2){animation-delay:6s} .sq-niche i:nth-child(3){animation-delay:12s}
.sq-niche i:nth-child(4){animation-delay:18s} .sq-niche i:nth-child(5){animation-delay:24s} .sq-niche i:nth-child(6){animation-delay:30s}
@keyframes sqWord{0%{opacity:0; transform:translateY(.25em)} 4%{opacity:1; transform:none} 15%{opacity:1; transform:none} 19%{opacity:0; transform:translateY(-.25em)} 100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sq-slides .sq-hero-bg,.sq-niche i{animation:none !important} .sq-slides .sq-hero-bg:first-child,.sq-niche i:first-child{opacity:1 !important}}
/* first slide and first word are visible from the first paint, no black flash */
.sq-slides .sq-hero-bg:nth-child(1){animation-name:sqFadeFirst}
@keyframes sqFadeFirst{0%{opacity:1; transform:scale(1)} 16.6%{opacity:1; transform:scale(1.06)} 21%{opacity:0; transform:scale(1.07)} 100%{opacity:0; transform:scale(1)}}
.sq-niche i:nth-child(1){animation-name:sqWordFirst}
@keyframes sqWordFirst{0%{opacity:1; transform:none} 15%{opacity:1; transform:none} 19%{opacity:0; transform:translateY(-.25em)} 100%{opacity:0}}
/* no template row under the hero any more: close the gap it overhung */
.sq-hero{padding-bottom:clamp(70px,8vw,110px) !important; min-height:min(100vh,960px)}
.sq-stats{padding-top:clamp(70px,8vw,110px) !important}
@media(max-width:700px){.sq-hero{padding-bottom:70px !important}}
.sq-tall div{padding:40px 28px 44px}
.sq-tall small{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-bottom:14px}
.sq-tall p{font-size:clamp(18px,2vw,22px); line-height:1.35; margin:0 0 22px}
/* nav hides on scroll down, returns on scroll up; solid once past the hero */
body > nav{transition:transform .35s cubic-bezier(.2,.7,.2,1), background-color .3s, border-color .3s; will-change:transform}
body > nav.hide{transform:translateY(-100%)}
.home body > nav.scrolled{position:fixed; background:rgba(10,10,10,.92); backdrop-filter:blur(14px); border-bottom-color:rgba(255,255,255,.08)}
nav .links a,nav .cta-lite{white-space:nowrap}
@media(max-width:1100px){nav .links{gap:18px} nav .links a{font-size:12.5px; letter-spacing:.04em}}

/* ---- dark mode: follows the phone or computer setting, in CSS, before first paint ---- */
@media(prefers-color-scheme:dark){
  :root{--ground:#0A0A0A; --panel:#161616; --raise:#1F1F1F; --text:#F2F2F0; --mute:#B4B4AF; --faint:#8C8C87;
        --line:#242424; --line-lit:#3A3A3A; --blue:#6B9BFF; --blue-deep:#8DB1FF; --blue-soft:rgba(107,155,255,.12);
        --cyan:#F2F2F0; --glow:rgba(255,255,255,.1); --gold:#F2F2F0; --accent:#F2F2F0; --paper:#111111}
  html{color-scheme:dark}
  body > nav{background:rgba(10,10,10,.86); border-bottom-color:var(--line)} nav.stuck{background:rgba(10,10,10,.96)}
  .home body > nav{background:transparent; border-bottom-color:transparent}
  .btn,.btn:not(.ghost),.rusty-cta,nav .cta-lite,nav .cta-lite:hover{background:#fff; color:#0A0A0A; border-color:#fff}
  .btn:hover,.btn:not(.ghost):hover{background:#E4E4E1; border-color:#E4E4E1; color:#0A0A0A}
  .btn.ghost,.btn.ghost:hover{background:transparent; color:var(--text); border-color:var(--text)} .btn.ghost:hover{background:var(--panel)}
  .sq-dark,#start,.sq-stats,footer,.price.feature,.price.feature:hover,.sq-tall{background:#161616}
  .sq-dark .card,.sq-dark .work,.how div{background:#222222}
  footer,.foot-base{border-top-color:#2A2A2A}
  .sq-warm{background:linear-gradient(180deg,#0A0A0A 0%,#151310 40%,#1C1914 100%)}
  .sq-light{background:var(--ground)} header.page{background:var(--ground)}
  .sq-chips a:hover{background:var(--panel)}
  .sq-tile,.sq-card{background-color:#161616}
  main > section:not(.sq-dark):not(#start) .kind-tabs button[aria-pressed="true"],
  main > section:not(.sq-dark):not(#start) .opts input:checked + label,
  main > section:not(.sq-dark):not(#start) .enq-form button[type=submit]{background:#fff; color:#0A0A0A; border-color:#fff}
  main > section:not(.sq-dark):not(#start) .enq-form input:focus,main > section:not(.sq-dark):not(#start) .enq-form textarea:focus{outline-color:#fff; border-color:#fff}
  .steps li.lit::before{border-color:var(--text); color:var(--text)}
  .tag.demo{color:var(--mute); border-color:var(--line-lit)}
  ::selection{background:#fff; color:#0A0A0A}
}
/* entrance for .rise runs in CSS from first paint, so headings never wait on a script */
html.anim .rise{opacity:1; transform:none; animation:sqRise .8s var(--ease) both}
html.anim .rise.d1{animation-delay:.05s} html.anim .rise.d2{animation-delay:.16s} html.anim .rise.d3{animation-delay:.27s} html.anim .rise.d4{animation-delay:.38s}
html.anim .ready .rise{transition:none}
@keyframes sqRise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){html.anim .rise{animation:none}}
/* examples sections (4 Nov 2026): template screenshot beside the callouts */
.ex-row{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(18px,3vw,36px); align-items:start; margin-top:26px}
.ex-shot{display:block; border-radius:8px; overflow:hidden; background:var(--panel); box-shadow:0 24px 50px -24px rgba(0,0,0,.35)}
.ex-shot img{display:block; width:100%; height:auto}
.ex-notes{margin:0; padding-left:20px; color:var(--mute); font-size:15.5px}
.ex-notes li{margin:0 0 14px} .ex-notes b{color:var(--text); font-weight:600}
.ex-card{padding:0; overflow:hidden} .ex-card .kicker{margin:18px 24px 6px} .ex-card h3{margin:0 24px} .ex-card .ex-notes{margin:12px 24px 0; padding-left:18px; font-size:15px} .ex-card .more-link{margin:16px 24px 22px}
@media(max-width:700px){.ex-row{grid-template-columns:1fr}}