/* Starfish theme
   Layout: a printed-matter feel for a print-and-web studio – sections carry a printer's slug line and folio number,
   images sit inside crop marks, and a CMYK bar signs off the page. Brand gold from the Starfish logo on paper and charcoal.
   One deliberate light look; colours are set explicitly. */
:root{
  color-scheme: light;
  --gold:#c89e4a;          /* logo gold */
  --gold-deep:#8a6a24;     /* gold for small text on light (AA) */
  --gold-tint:#f4ecdb;
  --ink:#1f1d1a;           /* charcoal */
  --ink-2:#4a4640;
  --ink-3:#77716a;
  --paper:#f6f5f1;
  --white:#ffffff;
  --line:#e2ded5;
  --c:#00a3d9; --m:#d6007e; --y:#ffe500; --k:#1f1d1a;   /* process colours for the CMYK bar */
  --f-display:"Bricolage Grotesque","Poppins",system-ui,sans-serif;
  --f-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --wrap:1240px;
  --gut:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink-2);font:300 17px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;counter-reset:sec;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);margin:0;line-height:1.02;letter-spacing:-.025em;text-wrap:balance;font-weight:800}
p{margin:0 0 1em}
em{font-style:normal;color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sf-skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 14px;border-radius:6px}
.sf-skip:focus{top:12px}
.sf-wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* buttons */
.sf-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sf-btn{display:inline-flex;align-items:center;gap:8px;font:500 15px var(--f-body);text-decoration:none;padding:13px 24px;border-radius:999px;border:1.5px solid transparent;transition:transform .3s var(--ease),background .3s,color .3s}
.sf-btn:hover{transform:translateY(-2px)}
.sf-btn-gold{background:var(--gold);color:var(--ink)}
.sf-btn-gold:hover{background:var(--ink);color:var(--white)}
.sf-btn-ink{background:var(--ink);color:var(--white)}
.sf-btn-ink:hover{background:var(--white);color:var(--ink)}
.sf-btn-line{border-color:var(--ink);color:var(--ink)}
.sf-btn-line:hover{background:var(--ink);color:var(--white)}

/* slug line: section label + folio number, like a printer's slug */
.sf-section{counter-increment:sec;padding-block:clamp(80px,12vw,150px)}
.sf-slug{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 22px}
.sf-num::before{content:counter(sec,decimal-leading-zero);display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font-size:11px}
.sf-slug span:last-child::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px;opacity:.6}

/* crop marks round framed images */
.sf-crop{position:relative;margin:0}
.sf-crop::before{content:"";position:absolute;inset:-14px;pointer-events:none;z-index:2;
  background:
   linear-gradient(var(--ink),var(--ink)) left 0 top 14px/9px 1px no-repeat,
   linear-gradient(var(--ink),var(--ink)) left 14px top 0/1px 9px no-repeat,
   linear-gradient(var(--ink),var(--ink)) right 0 top 14px/9px 1px no-repeat,
   linear-gradient(var(--ink),var(--ink)) right 14px top 0/1px 9px no-repeat,
   linear-gradient(var(--ink),var(--ink)) left 0 bottom 14px/9px 1px no-repeat,
   linear-gradient(var(--ink),var(--ink)) left 14px bottom 0/1px 9px no-repeat,
   linear-gradient(var(--ink),var(--ink)) right 0 bottom 14px/9px 1px no-repeat,
   linear-gradient(var(--ink),var(--ink)) right 14px bottom 0/1px 9px no-repeat}
.sf-crop img{width:100%;height:100%;object-fit:cover}

/* CMYK colour bar */
.sf-cmyk{display:flex;gap:0}
.sf-cmyk i{width:26px;height:26px;display:block}
.sf-cmyk i:nth-child(1){background:var(--c)}.sf-cmyk i:nth-child(2){background:var(--m)}.sf-cmyk i:nth-child(3){background:var(--y)}.sf-cmyk i:nth-child(4){background:var(--k)}.sf-cmyk i:nth-child(5){background:var(--gold)}
.sf-cmyk-sm i{width:14px;height:14px}

/* ---------- header */
.sf-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:rgba(246,245,241,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.admin-bar .sf-header{top:32px}
@media (max-width:782px){.admin-bar .sf-header{top:46px}}
.sf-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 8px 30px -24px rgba(31,29,26,.4)}
.sf-header-inner{display:flex;align-items:center;gap:28px;height:84px;transition:height .3s var(--ease)}
.is-scrolled .sf-header-inner{height:68px}
.sf-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.sf-logo img{height:58px;width:auto;transition:height .3s var(--ease)}
.is-scrolled .sf-logo img{height:46px}
.sf-nav{margin-left:auto}
.sf-menu{list-style:none;margin:0;padding:0;display:flex;gap:26px}
.sf-menu a{text-decoration:none;font:400 15px var(--f-body);color:var(--ink);position:relative;padding:6px 0}
.sf-menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.sf-menu a:hover::after,.sf-menu a.is-current::after{transform:scaleX(1)}
.sf-nav-contact{display:none}
.sf-head-cta{padding:10px 20px}
.sf-burger{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:none;position:relative;cursor:pointer}
.sf-burger span:not(.screen-reader-text){position:absolute;left:13px;right:13px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.sf-burger span:nth-child(1){top:17px}.sf-burger span:nth-child(2){top:25px}
.nav-open .sf-burger span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-open .sf-burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
@media (max-width:1120px){
  .sf-burger{display:block}
  .sf-head-cta{margin-left:auto}
  .sf-nav{position:fixed;inset:0;z-index:-1;background:var(--paper);padding:110px var(--gut) 40px;opacity:0;visibility:hidden;transition:.3s var(--ease);overflow:auto}
  .nav-open .sf-nav{opacity:1;visibility:visible}
  .sf-menu{flex-direction:column;gap:6px}
  .sf-menu a{font:800 34px/1.2 var(--f-display);letter-spacing:-.02em}
  .sf-nav-contact{display:grid;gap:6px;margin-top:30px}
  .sf-nav-contact a{color:var(--gold-deep);text-decoration:none}
}
@media (max-width:460px){.sf-head-cta{display:none}.sf-burger{margin-left:auto}}

/* ---------- hero */
.sf-hero{padding-block:clamp(40px,7vw,90px) clamp(40px,6vw,70px);overflow:hidden}
.sf-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,70px);align-items:center}
.sf-eyebrow{font:500 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:24px}
.sf-hero-title{font-size:clamp(38px,5vw,80px);line-height:.95;letter-spacing:-.04em}
.sf-line{display:block;overflow:hidden;padding-bottom:.05em}
.sf-line>span{display:inline-block}
.sf-hero-title em{position:relative;color:var(--ink)}
.sf-hero-title em::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.28em;background:var(--gold);z-index:-1;transform-origin:left}
.sf-hero-copy{position:relative;z-index:1}
.sf-hero-text{font-size:clamp(17px,1.4vw,19px);max-width:52ch;margin-top:28px;color:var(--ink-2)}
.sf-hero-art{position:relative;min-height:440px}
.sf-hero-a{position:absolute;right:0;top:0;width:86%;aspect-ratio:1/1;transform:rotate(-3deg);box-shadow:0 30px 60px -30px rgba(31,29,26,.45)}
.sf-hero-a img{object-position:12% 50%}
.sf-hero-b{position:absolute;left:0;bottom:-10px;width:52%;aspect-ratio:4/5;transform:rotate(4deg);box-shadow:0 30px 60px -30px rgba(31,29,26,.5)}
.sf-hero-art .sf-cmyk{position:absolute;right:6%;bottom:-6px;transform:rotate(-3deg)}
.sf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(50px,7vw,90px) 0 0;border-top:1px solid var(--ink)}
.sf-stats div{padding:20px 20px 0 0}
.sf-stats dt{font:800 clamp(26px,3vw,40px)/1 var(--f-display);color:var(--ink);letter-spacing:-.02em}
.sf-stats dd{margin:6px 0 0;font-size:14px;color:var(--ink-3)}
@media (max-width:900px){.sf-hero-grid{grid-template-columns:1fr}.sf-hero-art{min-height:0;aspect-ratio:1/0.85;max-width:560px;width:100%;margin:10px auto 40px}}
@media (max-width:520px){.sf-stats{grid-template-columns:1fr}.sf-stats div{padding:14px 0;border-bottom:1px solid var(--line)}}

/* ---------- clients marquee */
.sf-clients{padding:26px 0;border-block:1px solid var(--line);background:var(--white);overflow:hidden}
.sf-clients-label{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:center;margin:0 0 14px}
.sf-marquee{display:flex;width:max-content;animation:sf-marquee 60s linear infinite}
.sf-marquee:hover{animation-play-state:paused}
.sf-marquee ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.sf-marquee li{font:700 clamp(20px,2.2vw,30px) var(--f-display);color:var(--ink);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center}
.sf-marquee li::after{content:"";width:18px;height:18px;margin:0 32px;background:var(--gold);-webkit-mask:var(--sf-star) center/contain no-repeat;mask:var(--sf-star) center/contain no-repeat}
@keyframes sf-marquee{to{transform:translateX(-50%)}}

/* ---------- about */
.sf-about{background:var(--paper)}
.sf-statement{font:700 clamp(30px,4vw,56px)/1.1 var(--f-display);color:var(--ink);letter-spacing:-.03em;max-width:22ch;margin-bottom:clamp(40px,6vw,70px)}
.sf-about-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.sf-cols{columns:2 300px;column-gap:40px}
.sf-cols p{break-inside:avoid}
.sf-people{display:grid;gap:14px}
.sf-person{display:flex;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px}
.sf-initial{flex:0 0 56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--ink);font:800 26px var(--f-display)}
.sf-person strong{display:block;font:700 19px var(--f-display);color:var(--ink);letter-spacing:-.01em}
.sf-person span{font-size:14px;color:var(--ink-3)}
@media (max-width:900px){.sf-about-grid{grid-template-columns:1fr}}

/* ---------- feature (print / web) */
.sf-feature.tone-white{background:var(--white)}
.sf-feature.tone-ink{background:var(--ink);color:rgba(255,255,255,.78)}
.sf-feature.tone-ink h2{color:var(--white)}
.sf-feature.tone-ink .sf-slug{color:var(--gold)}
.sf-feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,90px);align-items:center}
.is-flipped .sf-feature-art{order:-1}
.sf-feature h2{font-size:clamp(34px,4.4vw,62px);margin-bottom:22px}
.sf-feature-copy>p{max-width:56ch}
.sf-ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.sf-ticks li{display:flex;gap:10px;align-items:baseline;font-weight:400;color:var(--ink)}
.tone-ink .sf-ticks li{color:var(--white)}
.sf-ticks li::before{content:"";flex:0 0 10px;height:10px;background:var(--gold);-webkit-mask:var(--sf-star) center/contain no-repeat;mask:var(--sf-star) center/contain no-repeat;transform:translateY(1px)}
.sf-feature-art{margin:0;position:relative}
.sf-feature-art img{width:100%;aspect-ratio:4/3;object-fit:cover}
.frame-crop{padding:0}
.frame-crop::before{content:"";position:absolute;inset:-14px;pointer-events:none;z-index:2;
  background:
   linear-gradient(var(--ink),var(--ink)) left 0 top 14px/9px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) left 14px top 0/1px 9px no-repeat,
   linear-gradient(var(--ink),var(--ink)) right 0 top 14px/9px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) right 14px top 0/1px 9px no-repeat,
   linear-gradient(var(--ink),var(--ink)) left 0 bottom 14px/9px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) left 14px bottom 0/1px 9px no-repeat,
   linear-gradient(var(--ink),var(--ink)) right 0 bottom 14px/9px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) right 14px bottom 0/1px 9px no-repeat}
.tone-ink .frame-crop::before{filter:invert(1)}
.frame-browser{border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 40px 80px -40px rgba(31,29,26,.45);border:1px solid var(--line)}
.sf-browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#ece9e2;border-bottom:1px solid var(--line)}
.sf-browser-bar i{width:10px;height:10px;border-radius:50%;background:#d3cec4}
.sf-browser-bar i:first-child{background:var(--gold)}
.sf-browser-bar b{margin-left:12px;flex:1;font:500 11px var(--f-mono);color:var(--ink-3);background:var(--white);border-radius:6px;padding:5px 10px;letter-spacing:.02em}
@media (max-width:900px){.sf-feature-grid{grid-template-columns:1fr}.is-flipped .sf-feature-art{order:0}}
@media (max-width:520px){.sf-ticks{grid-template-columns:1fr}}

/* ---------- services */
.sf-services{background:var(--paper)}
.sf-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.sf-head h2{font-size:clamp(34px,4.6vw,66px);max-width:18ch}
.sf-head>p{max-width:36ch;margin:0}
.sf-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px)}
.sf-service{background:var(--white);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line)}
.sf-service figure{aspect-ratio:4/3;overflow:hidden;margin:0}
.sf-service .sf-crop::before{display:none}
.sf-service img{transition:transform 1s var(--ease)}
.sf-service:hover img{transform:scale(1.05)}
.sf-service-body{padding:24px 24px 26px;position:relative}
.sf-service-no{font:500 12px var(--f-mono);color:var(--gold-deep);letter-spacing:.08em}
.sf-service h3{font-size:28px;margin:6px 0 10px}
.sf-service p{font-size:15px;margin:0}
.sf-service.no-img{justify-content:flex-end;min-height:360px}
.sf-service.no-img .sf-service-no{position:absolute;top:18px;right:22px;font:800 120px/1 var(--f-display);color:rgba(31,29,26,.08);letter-spacing:-.05em}
.sf-service.no-img:nth-of-type(3n+1){background:var(--gold-tint);border-color:transparent}
.sf-service.no-img:nth-of-type(3n+2){background:var(--ink);border-color:transparent}
.sf-service.no-img:nth-of-type(3n+2) h3{color:var(--white)}
.sf-service.no-img:nth-of-type(3n+2) p{color:rgba(255,255,255,.75)}
.sf-service.no-img:nth-of-type(3n+2) .sf-service-no{color:rgba(255,255,255,.08)}
.sf-service.no-img:nth-of-type(3n){background:var(--gold);border-color:transparent}
.sf-service.no-img:nth-of-type(3n) p{color:var(--ink)}
.sf-service.no-img:nth-of-type(3n) .sf-service-no{color:rgba(31,29,26,.12)}
@media (max-width:980px){.sf-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sf-service-grid{grid-template-columns:1fr}.sf-service.no-img{min-height:0;padding-top:60px}}

/* ---------- statement band */
.sf-band{background:var(--gold);padding-block:clamp(60px,8vw,100px);overflow:hidden}
.sf-band-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.sf-band p{font:800 clamp(30px,4.2vw,60px)/1.05 var(--f-display);color:var(--ink);letter-spacing:-.03em;margin:0;max-width:20ch}
.sf-band em{color:var(--white)}
.sf-band .sf-ctas{margin:0}

/* ---------- specialisations */
.sf-special{position:relative;background:var(--ink);color:rgba(255,255,255,.76);overflow:hidden}
.sf-special-bg{position:absolute;right:0;top:-10%;bottom:-10%;width:46%;opacity:.55}
.sf-special-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.sf-special-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(31,29,26,.5) 45%,rgba(31,29,26,.2) 100%)}
.sf-special .sf-wrap{position:relative}
.sf-special .sf-slug{color:var(--gold)}
.sf-special h2{color:var(--white);font-size:clamp(34px,4.6vw,66px);max-width:16ch;margin-bottom:clamp(40px,6vw,70px)}
.sf-special-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:880px;border-top:1px solid rgba(255,255,255,.2)}
.sf-special-grid article{padding:26px 30px 26px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.sf-special-grid h3{color:var(--white);font-size:24px;margin-bottom:10px}
.sf-special-grid p{font-size:15px;margin:0}
@media (max-width:760px){.sf-special-grid{grid-template-columns:1fr}.sf-special-bg{width:100%;opacity:.25}}

/* ---------- testimonials */
.sf-testimonials{background:var(--white);padding-bottom:clamp(70px,9vw,120px)}
.sf-arrows{display:flex;gap:10px}
.sf-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:none;font-size:20px;cursor:pointer;color:var(--ink);transition:.25s}
.sf-arrow:hover{background:var(--ink);color:var(--white)}
.sf-quotes{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 26px;scrollbar-width:thin;scroll-padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.sf-quote{flex:0 0 min(420px,84vw);scroll-snap-align:start;margin:0;background:var(--paper);border-radius:20px;padding:30px 30px 28px;display:flex;flex-direction:column;position:relative}
.sf-quote::before{content:"“";font:800 90px/0.7 var(--f-display);color:var(--gold);display:block;height:44px}
.sf-quote.is-long{flex-basis:min(560px,88vw)}
.sf-quote blockquote{margin:0 0 22px;flex:1}
.sf-quote p{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0}
.sf-quote figcaption{border-top:1px solid var(--line);padding-top:16px}
.sf-quote strong{display:block;font:700 18px var(--f-display);color:var(--ink)}
.sf-quote figcaption span{font-size:14px;color:var(--ink-3)}

/* ---------- contact */
.sf-contact{background:var(--paper)}
.sf-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);align-items:start}
.sf-contact h2{font-size:clamp(40px,6vw,84px);letter-spacing:-.04em;margin-bottom:20px}
.sf-contact-text{max-width:40ch}
.sf-place{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.sf-contact-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sf-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}
.sf-card-gold{grid-column:1/-1;background:var(--gold);border-color:transparent}
.sf-card-label{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.sf-card-gold .sf-card-label{color:var(--ink)}
.sf-big{display:block;font:800 clamp(22px,2.4vw,32px)/1.15 var(--f-display);color:var(--ink);text-decoration:none;letter-spacing:-.02em;overflow-wrap:anywhere}
.sf-mail{display:block;margin-top:8px;font-size:15px;color:var(--ink-2);overflow-wrap:anywhere}
.sf-social{display:flex;gap:18px;margin:16px 0 0}
.sf-social a{font-weight:500;color:var(--ink)}
.sf-form{grid-column:1/-1;background:var(--white);border-radius:20px;padding:clamp(20px,3vw,36px);border:1px solid var(--line)}
.sf-form input[type=text],.sf-form input[type=email],.sf-form input[type=tel],.sf-form textarea,.sf-form select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:400 16px var(--f-body);background:var(--paper)}
.sf-form input[type=submit]{background:var(--ink);color:var(--white);border:0;border-radius:999px;padding:14px 28px;font:500 16px var(--f-body);cursor:pointer}
@media (max-width:900px){.sf-contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.sf-contact-cards{grid-template-columns:1fr}}

/* ---------- inner pages */
.sf-page-head{padding-block:clamp(60px,9vw,120px) clamp(30px,4vw,50px);border-bottom:1px solid var(--line)}
.sf-page-head h1{font-size:clamp(40px,6vw,86px);letter-spacing:-.04em;max-width:18ch}
.sf-entry{padding-block:clamp(50px,7vw,90px)}
.sf-prose{max-width:780px}
.sf-prose h2{font-size:clamp(28px,3vw,40px);margin:1.6em 0 .5em}
.sf-prose h3{font-size:24px;margin:1.4em 0 .4em}
.sf-prose a{color:var(--gold-deep)}
.sf-posts{display:grid;gap:30px;max-width:860px}
.sf-post{border-top:1px solid var(--line);padding-top:22px}
.sf-post h2{font-size:30px;margin-bottom:8px}
.sf-post h2 a{text-decoration:none}

/* ---------- footer */
.sf-footer{background:var(--ink);color:rgba(255,255,255,.7);padding-top:clamp(60px,8vw,100px)}
.sf-footer a{color:var(--white);text-decoration:none}
.sf-footer a:hover{color:var(--gold)}
.sf-footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:36px}
.sf-footer-brand img{height:96px;width:auto;margin-bottom:18px}
.sf-footer-h{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.sf-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sf-footer-base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:clamp(50px,7vw,80px);padding-block:22px;border-top:1px solid rgba(255,255,255,.14);font-size:14px}
@media (max-width:760px){.sf-footer-grid{grid-template-columns:1fr}}

/* ---------- motion (only when JS adds .sf-anim; everything is visible without it) */
.sf-anim .sf-line>span{animation:sf-rise 1s var(--ease) both;animation-delay:calc(.12s + var(--i,0) * .1s)}
.sf-anim .sf-hero-title em::after{animation:sf-swipe .9s var(--ease) .7s both}
.sf-anim .sf-hero-text,.sf-anim .sf-hero .sf-ctas,.sf-anim .sf-eyebrow{animation:sf-fade .9s var(--ease) .45s both}
.sf-anim .sf-hero-a{animation:sf-drop 1.1s var(--ease) .2s both}
.sf-anim .sf-hero-b{animation:sf-drop2 1.1s var(--ease) .4s both}
.sf-anim .sf-reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * .08s)}
.sf-anim .sf-reveal.is-in{opacity:1;transform:none}
@keyframes sf-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes sf-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sf-swipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sf-drop{from{opacity:0;transform:rotate(-8deg) translateY(40px)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes sf-drop2{from{opacity:0;transform:rotate(10deg) translateY(50px)}to{opacity:1;transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.sf-anim .sf-reveal{opacity:1;transform:none}html{scroll-behavior:auto}}


/* ==========================================================================
   Starfish multi-page additions
   Same printed-matter system: slug lines, crop marks, CMYK. New: a CMYK
   registration progress bar, a slowly turning starfish, pinned horizontal
   services, an app "phone" story and a starfield for the games section.
   ========================================================================== */
:root{
  --ink-deep:#15130f;
  --ink-card:#2a2723;
  --on-ink:rgba(255,255,255,.76);
  --on-ink-soft:rgba(255,255,255,.14);
  /* the Starfish logo's rounded star, used for every star on the site */
  --sf-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M53.37 12.26Q57.05 19.55 60.98 25.67A7 7 0 0 0 67.36 29.21Q74.63 29.30 82.76 28.56A9 9 0 0 1 89.78 43.62Q83.99 49.37 79.39 55.00A7 7 0 0 0 78.00 62.16Q80.15 69.10 83.37 76.60A9 9 0 0 1 71.22 87.94Q63.96 84.20 57.18 81.57A7 7 0 0 0 49.94 82.46Q44.01 86.65 37.87 92.03A9 9 0 0 1 23.33 83.97Q24.64 75.91 25.05 68.66A7 7 0 0 0 21.97 62.05Q16.14 57.70 9.13 53.52A9 9 0 0 1 12.30 37.21Q20.37 35.96 27.40 34.11A7 7 0 0 0 32.73 29.14Q35.07 22.25 36.87 14.29A9 9 0 0 1 53.37 12.26Z'/%3E%3C/svg%3E");
}

/* paint the band above the sticky header on phones */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:150;background:var(--paper)}

/* scroll progress, printed as a CMYK registration strip */
.sf-progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:4px;z-index:160;pointer-events:none;transform-origin:left center;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--gold) 75% 100%)}

.sf-menu a[aria-current="page"]::after{transform:scaleX(1)}
.sf-menu a[aria-current="page"]{font-weight:500}
.sf-new{display:inline-block;font:500 9px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--m);color:var(--white);padding:3px 5px;border-radius:4px;margin-left:6px;vertical-align:3px}
@media (max-width:1120px){.sf-new{font-size:11px;vertical-align:12px}}

/* hero additions */
.sf-hero{position:relative}
.sf-hero>.sf-wrap{position:relative;z-index:1}
.sf-pill{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 6px;font:500 14px/1.3 var(--f-body);color:var(--ink);margin-bottom:24px;transition:border-color .3s,transform .3s var(--ease)}
.sf-pill b{background:var(--m);color:var(--white);font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;flex:0 0 auto}
.sf-pill:hover{border-color:var(--gold);transform:translateY(-2px)}
.sf-bigstar{position:absolute;z-index:0;width:min(78vw,860px);aspect-ratio:1/1;right:-20%;top:-26%;pointer-events:none;color:var(--gold);opacity:.22}
.sf-bigstar svg{display:block;width:100%;height:100%;transform:rotate(calc(var(--rot,0) * 1deg));transition:transform .1s linear}
.sf-page-head .sf-bigstar{width:min(60vw,560px);right:-12%;top:-40%;opacity:.25}
@media (max-width:700px){.sf-bigstar{right:-45%;top:-10%;width:120vw;opacity:.14}}

/* word-by-word fill statement */
.sf-fill .w{transition:color .35s}
.sf-anim .sf-fill .w{color:rgba(31,29,26,.15)}
.sf-anim .sf-fill .w.on{color:var(--ink)}
.sf-anim .sf-fill .w.on.gold{color:var(--gold-deep)}

/* image wipe */
.sf-anim .sf-wipe img{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease),transform 1.3s var(--ease);transform:scale(1.12)}
.sf-anim .sf-wipe.is-in img{clip-path:inset(0 0 0 0);transform:none}

/* ---------- pinned horizontal services */
.sf-hs{background:var(--ink);color:var(--on-ink);position:relative}
.sf-hs-pin{padding-block:clamp(70px,9vw,120px);overflow:hidden}
.sf-hs .sf-slug{color:var(--gold)}
.sf-hs .sf-head h2{color:var(--white)}
.sf-hs .sf-head>p{color:var(--on-ink)}
.sf-hs-hint{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.sf-hs-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
  padding:8px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 26px;scroll-padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.sf-hs.is-pinned .sf-hs-pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);height:calc(100vh - 68px);display:flex;flex-direction:column;justify-content:center;padding-block:24px}
.sf-hs.is-pinned .sf-head{margin-bottom:clamp(24px,3vw,40px)}
.sf-hs.is-pinned .sf-hs-track{overflow:visible;will-change:transform}
.sf-hcard{flex:0 0 min(400px,82vw);scroll-snap-align:start;background:var(--ink-card);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;border:1px solid var(--on-ink-soft);transition:transform .45s var(--ease),border-color .3s}
.sf-hcard:hover,.sf-hcard:focus-visible{transform:translateY(-8px) rotate(-.6deg);border-color:var(--gold)}
.sf-hcard figure{margin:0;aspect-ratio:16/10;overflow:hidden;max-width:100%;position:relative}
.sf-hcard figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sf-hcard:hover figure img{transform:scale(1.06)}
.sf-hcard-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.sf-hcard h3{color:var(--white);font-size:clamp(24px,2.4vw,30px)}
.sf-hcard p{font-size:15px;margin:0}
.sf-hcard .more{margin-top:auto;padding-top:8px;color:var(--gold);font-weight:500;font-size:15px}
.sf-hcard .sf-new{position:absolute;top:14px;left:14px;margin:0;font-size:11px;padding:5px 8px;z-index:2}
.sf-art{display:grid;place-items:center;width:100%;height:100%}
.sf-art-app{background:var(--gold)}
.sf-art-game{background:var(--m);position:relative;overflow:hidden}
.sf-art-web{background:var(--gold-tint);padding:22px}
.sf-mini-phone{width:30%;aspect-ratio:9/18;background:var(--ink);border-radius:18px;padding:6px;transform:rotate(-8deg);box-shadow:0 18px 30px -16px rgba(0,0,0,.6)}
.sf-mini-phone i{display:block;height:100%;border-radius:13px;background:linear-gradient(var(--white) 0 22%,var(--paper) 22% 100%);position:relative}
.sf-mini-phone i::after{content:"£485";position:absolute;left:12%;right:12%;bottom:14%;font:800 16px var(--f-display);color:var(--ink);text-align:center;background:var(--gold);border-radius:8px;padding:4px 0}
.sf-art-game i{position:absolute;width:var(--s,34px);aspect-ratio:1/1;background:var(--y);-webkit-mask:var(--sf-star) center/contain no-repeat;mask:var(--sf-star) center/contain no-repeat;left:var(--x);top:var(--y0);animation:sf-bob 3s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.sf-art-game b{font:800 clamp(30px,3.4vw,44px)/1 var(--f-display);color:var(--white);letter-spacing:-.03em;position:relative;z-index:1}
@keyframes sf-bob{to{transform:translateY(14px) rotate(25deg)}}
.sf-mini-browser{width:100%;max-width:300px;background:var(--white);border-radius:10px;overflow:hidden;box-shadow:0 18px 30px -18px rgba(31,29,26,.5)}
.sf-mini-browser span{display:flex;gap:5px;padding:7px 9px;background:#ece9e2}
.sf-mini-browser span i{width:7px;height:7px;border-radius:50%;background:#d3cec4}
.sf-mini-browser span i:first-child{background:var(--gold)}
.sf-mini-browser div{padding:14px;display:grid;gap:7px}
.sf-mini-browser div b{height:12px;border-radius:4px;background:var(--ink);width:70%}
.sf-mini-browser div em{height:8px;border-radius:4px;background:var(--line);display:block}
.sf-mini-browser div u{height:22px;width:42%;border-radius:999px;background:var(--gold);display:block}

/* ---------- app story: sticky phone */
.sf-app{background:var(--paper)}
.sf-app-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(30px,6vw,90px);align-items:start}
.sf-app h2{font-size:clamp(34px,4.6vw,66px);max-width:14ch}
.sf-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:12px;max-width:46ch}
.sf-anim .sf-step{opacity:.28;transition:opacity .5s var(--ease)}
.sf-anim .sf-step.is-active{opacity:1}
.sf-step h3{font-size:clamp(26px,2.8vw,38px)}
.sf-step p{margin:0}
.sf-step-tag{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.sf-phone-wrap{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);height:calc(100vh - 120px);min-height:540px;display:grid;place-items:center}
.sf-phone{width:min(290px,100%);aspect-ratio:9/18.5;max-width:100%;background:var(--ink);border-radius:46px;padding:11px;position:relative;box-shadow:0 50px 80px -40px rgba(31,29,26,.6),inset 0 0 0 2px #3a362f}
.sf-phone::before{content:"";position:absolute;top:22px;left:50%;width:84px;height:22px;margin-left:-42px;background:var(--ink);border-radius:999px;z-index:3}
.sf-phone-glow{position:absolute;inset:8% -10%;background:radial-gradient(closest-side,rgba(200,158,74,.35),transparent);z-index:-1}
.sf-screen{position:absolute;inset:11px;border-radius:36px;background:var(--white);overflow:hidden;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease);padding:54px 16px 16px;display:flex;flex-direction:column;gap:11px;font:400 13px/1.35 var(--f-body);color:var(--ink)}
.sf-screen.is-on{opacity:1;transform:none}
.ui-brand{display:flex;justify-content:space-between;align-items:center;font:500 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ui-title{font:800 21px/1.05 var(--f-display);letter-spacing:-.02em}
.ui-field{background:var(--paper);border-radius:12px;padding:9px 11px;display:grid;gap:5px}
.ui-field small{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.ui-row{display:flex;justify-content:space-between;align-items:center;font-weight:500}
.ui-range{height:5px;border-radius:5px;background:var(--line);position:relative}
.ui-range::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v,50%);border-radius:5px;background:var(--gold)}
.ui-range::before{content:"";position:absolute;left:var(--v,50%);top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--ink);z-index:1}
.ui-total{margin-top:auto;background:var(--ink);color:var(--white);border-radius:16px;padding:13px 14px;display:flex;justify-content:space-between;align-items:center}
.ui-total b{font:800 26px var(--f-display);color:var(--gold)}
.ui-btn{background:var(--gold);color:var(--ink);text-align:center;border-radius:999px;padding:10px;font-weight:500}
.ui-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:11px}
.ui-cal span{padding:6px 0;border-radius:8px;font-variant-numeric:tabular-nums}
.ui-cal .h{color:var(--ink-3);font-size:9px;text-transform:uppercase}
.ui-cal .off{color:#c4beb3}
.ui-cal .sel{background:var(--ink);color:var(--white)}
.ui-cal .dot{position:relative}.ui-cal .dot::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
.ui-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ui-slots span{border:1.5px solid var(--line);border-radius:10px;text-align:center;padding:7px 0;font-size:12px;font-variant-numeric:tabular-nums}
.ui-slots .sel{border-color:var(--gold);background:var(--gold-tint);font-weight:500}
.ui-job{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 11px;border-radius:12px;background:var(--paper)}
.ui-job div{min-width:0}
.ui-job strong{display:block;font-weight:500;font-size:13px}
.ui-job small{color:var(--ink-3);font-size:11px}
.ui-pill{font:500 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 8px;flex:0 0 auto}
.ui-pill.go{background:#dff2e4;color:#1d6b34}
.ui-pill.wait{background:var(--gold-tint);color:var(--gold-deep)}
.ui-pill.new{background:#fde3f1;color:#a3005f}
@media (max-width:900px){
  .sf-app-grid{grid-template-columns:1fr}
  .sf-phone-wrap{position:relative;top:0;height:auto;min-height:0;order:-1;padding-block:10px 20px}
  .sf-phone{width:min(260px,72vw)}
  .sf-step{min-height:0;padding-block:18px;border-top:1px solid var(--line)}
  .sf-anim .sf-step{opacity:1}
}

/* ---------- games band with starfield */
.sf-games{position:relative;background:var(--ink-deep);color:var(--on-ink);overflow:hidden}
.sf-games .sf-starfield{position:absolute;inset:0;width:100%;height:100%;display:block}
.sf-games .sf-wrap{position:relative}
.sf-games .sf-slug{color:var(--y)}
.sf-games h2{color:var(--white);font-size:clamp(40px,6vw,92px);letter-spacing:-.04em;max-width:13ch}
.sf-games h2 em{color:var(--y)}
.sf-games-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,70px);align-items:end}
.sf-games p{max-width:50ch}
.sf-chips{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.sf-chips li{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--white)}
.sf-btn-y{background:var(--y);color:var(--ink)}
.sf-btn-y:hover{background:var(--white);color:var(--ink)}
.sf-btn-outline-w{border-color:rgba(255,255,255,.6);color:var(--white)}
.sf-btn-outline-w:hover{background:var(--white);color:var(--ink)}
@media (max-width:900px){.sf-games-grid{grid-template-columns:1fr}}

/* ---------- testimonial trio */
.sf-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sf-trio .sf-quote{flex:none}
@media (max-width:900px){.sf-trio{grid-template-columns:1fr}}

/* ---------- inner pages */
.sf-page-head{position:relative;overflow:hidden;background:var(--paper)}
.sf-page-head>.sf-wrap{position:relative;z-index:1}
.sf-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 26px;font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sf-crumbs li+li::before{content:"/";margin-right:8px;color:var(--gold)}
.sf-crumbs a{color:var(--ink-3);text-decoration:none}
.sf-crumbs a:hover{color:var(--ink)}
.sf-lead{font-size:clamp(18px,1.6vw,21px);max-width:58ch;margin-top:24px;color:var(--ink-2)}
.sf-page-head .sf-ctas{margin-top:26px}
.sf-h2{font-size:clamp(32px,4vw,56px);max-width:18ch;margin-bottom:22px}
.tone-white{background:var(--white)}
.tone-paper{background:var(--paper)}
.tone-gold-tint{background:var(--gold-tint)}
.sf-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.sf-boxes.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-boxes.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.sf-box{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px 24px 26px;min-width:0;display:flex;flex-direction:column;gap:10px}
.tone-white .sf-box{background:var(--paper);border-color:transparent}
.sf-box h3{font-size:24px}
.sf-box p{margin:0;font-size:15px}
.sf-box-star{width:30px;height:30px;background:var(--gold);-webkit-mask:var(--sf-star) center/contain no-repeat;mask:var(--sf-star) center/contain no-repeat;transition:transform .6s var(--ease)}
.sf-box:hover .sf-box-star{transform:rotate(72deg) scale(1.1)}
.sf-box.ink{background:var(--ink);color:var(--on-ink)}
.sf-box.ink h3{color:var(--white)}
.sf-box.gold{background:var(--gold);border-color:transparent;color:var(--ink)}
@media (max-width:1000px){.sf-boxes,.sf-boxes.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sf-boxes,.sf-boxes.two,.sf-boxes.four{grid-template-columns:1fr}}

/* a real sequence: numbered process */
.sf-process{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink)}
.sf-process li{counter-increment:step;padding:22px 22px 10px 0;min-width:0}
.sf-process li::before{content:counter(step,decimal-leading-zero);display:block;font:800 52px/1 var(--f-display);color:var(--gold);letter-spacing:-.04em;margin-bottom:12px}
.sf-process h3{font-size:22px;margin-bottom:8px}
.sf-process p{font-size:15px;margin:0}
@media (max-width:900px){.sf-process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sf-process{grid-template-columns:1fr}}

/* FAQ */
.sf-faq{max-width:860px;display:grid;gap:0;border-top:1px solid var(--line)}
.sf-faq details{border-bottom:1px solid var(--line)}
.sf-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font:700 clamp(19px,1.8vw,23px)/1.25 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.sf-faq summary::-webkit-details-marker{display:none}
.sf-faq summary::after{content:"+";flex:0 0 36px;height:36px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;font:400 20px var(--f-body);transition:transform .3s var(--ease),background .3s}
.sf-faq details[open] summary::after{transform:rotate(45deg);background:var(--gold);border-color:var(--gold)}
.sf-faq details p{margin:0 0 22px;max-width:68ch}

/* split layout */
.sf-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start}
@media (max-width:900px){.sf-split{grid-template-columns:1fr}}
.sf-sticky{position:sticky;top:110px}
@media (max-width:900px){.sf-sticky{position:static}}

/* demo frame (calculator / game) */
.sf-demo{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3vw,34px);box-shadow:0 40px 80px -50px rgba(31,29,26,.5)}
.sf-demo-tag{display:inline-block;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--white);padding:6px 10px;border-radius:999px;margin-bottom:16px}
.sf-calc{display:grid;gap:16px}
.sf-calc label{display:grid;gap:6px;font-weight:500;color:var(--ink);font-size:15px}
.sf-calc select,.sf-calc input[type=range]{width:100%}
.sf-calc select{padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;font:400 16px var(--f-body);background:var(--paper);color:var(--ink)}
.sf-calc input[type=range]{accent-color:var(--gold)}
.sf-calc .row{display:flex;justify-content:space-between;align-items:baseline}
.sf-calc output{font:700 18px var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.sf-check{display:flex!important;grid-template-columns:none;align-items:center;gap:10px!important;font-weight:400!important}
.sf-check input{width:20px;height:20px;accent-color:var(--gold)}
.sf-calc-total{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--ink);color:var(--white);border-radius:18px;padding:18px 20px;flex-wrap:wrap}
.sf-calc-total span{font-size:14px;color:var(--on-ink)}
.sf-calc-total strong{font:800 clamp(34px,4vw,48px)/1 var(--f-display);color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.sf-note{font-size:13px;color:var(--ink-3);margin:12px 0 0}

/* game */
.sf-game{background:var(--ink-deep);border-radius:24px;padding:clamp(12px,2vw,18px);color:var(--white);box-shadow:0 40px 80px -40px rgba(21,19,15,.8)}
.sf-game-hud{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 6px 12px;font:500 13px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.sf-game-hud b{color:var(--y);font-size:20px;font-family:var(--f-display);letter-spacing:0;font-variant-numeric:tabular-nums;margin-left:6px}
.sf-game-stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;max-width:100%;background:#1f1c17;touch-action:none}
.sf-game-stage canvas{display:block;width:100%;height:100%}
.sf-game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;background:rgba(21,19,15,.78);backdrop-filter:blur(3px)}
.sf-game-overlay h3{color:var(--white);font-size:clamp(28px,4vw,48px)}
.sf-game-overlay p{margin:0;max-width:42ch;color:var(--on-ink);font-size:15px}
.sf-game-lead{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;max-width:420px}
.sf-game-lead input{flex:1 1 200px;min-width:0;padding:11px 14px;border-radius:999px;border:0;font:400 15px var(--f-body);background:var(--white);color:var(--ink)}
.sf-game-lead button{border:0;cursor:pointer}
.sf-game-help{font-size:13px;color:var(--on-ink);margin:10px 6px 2px}

/* contact page */
.sf-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sf-form-grid .full{grid-column:1/-1}
.sf-form label{display:grid;gap:6px;font-weight:500;color:var(--ink);font-size:15px;min-width:0}
.sf-form textarea{min-height:140px;resize:vertical}
.sf-form button{justify-self:start;cursor:pointer;border:0}
.sf-form-msg{background:var(--gold-tint);border-radius:12px;padding:14px 16px;color:var(--ink);margin:0}
.sf-copy{border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:5px 12px;font:500 13px var(--f-body);cursor:pointer;color:var(--ink);margin-top:10px}
.sf-copy:hover{border-color:var(--ink)}
@media (max-width:620px){.sf-form-grid{grid-template-columns:1fr}}

/* reviews wall */
.sf-wall{columns:3 320px;column-gap:22px}
.sf-wall .sf-quote{break-inside:avoid;margin:0 0 22px;flex:none;background:var(--white)}
.sf-wall .sf-quote:nth-child(3n+2){background:var(--gold-tint)}

/* footer additions */
.sf-footer-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
@media (max-width:900px){.sf-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-footer-brand{grid-column:1/-1}}
@media (max-width:520px){.sf-footer-grid{grid-template-columns:1fr}}

/* stat counters keep their width while counting */
.sf-stats dt{font-variant-numeric:tabular-nums}
.sf-stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.sf-stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sf-stats.four{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.sf-bigstar svg{transform:none}.sf-progress{display:none}}
.sf-band .sf-fill .w.on.gold{color:var(--white)}
.sf-anim .sf-band .sf-fill .w{color:rgba(31,29,26,.22)}
.sf-anim .sf-band .sf-fill .w.on{color:var(--ink)}
.sf-footer-grid li{color:rgba(255,255,255,.7)}
.sf-hs{counter-increment:sec}
.sf-hs-hint{display:block;margin-top:10px}
.sf-hs.is-pinned .sf-head h2{font-size:clamp(32px,3.6vw,54px)}
.sf-hs.is-pinned .sf-hcard figure{aspect-ratio:16/9}
@media (max-height:760px){.sf-hs.is-pinned .sf-hcard p{display:none}}
@media (max-width:900px){.sf-app .sf-phone-wrap{order:0;padding-block:30px 0}}

.sf-ticks li::before{flex:0 0 14px;width:14px;height:14px;transform:translateY(2px)}

/* WordPress admin bar */
.admin-bar .sf-progress{top:32px}
@media (max-width:782px){.admin-bar .sf-progress{top:46px}}
.sf-form-msg.is-error{background:#fde3f1}
.sf-prose img{border-radius:12px}
.sf-posts .nav-links{display:flex;gap:16px}

/* ==========================================================================
   Block editor content
   The pages are built from core blocks (groups, headings, paragraphs, images,
   lists, quotes, details, buttons) carrying the theme's class names.
   These rules adapt the design to that markup.
   ========================================================================== */
main .wp-block-group{box-sizing:border-box}
.sf-hero .wp-block-image,.sf-section .wp-block-image,.sf-hs .wp-block-image,.sf-page-head .wp-block-image{margin:0}
.sf-tight-top{padding-top:clamp(50px,6vw,80px)!important}

/* section label: folio number and rule are drawn by CSS so the label stays plain text */
p.sf-slug::before{content:counter(sec,decimal-leading-zero);order:-2;flex:0 0 34px;display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font-size:11px}
p.sf-slug::after{content:"";order:-1;flex:0 0 28px;height:1px;background:currentColor;opacity:.6}

/* buttons */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.wp-block-buttons>.wp-block-button{margin:0}
.wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;font:500 15px/1.3 var(--f-body);text-decoration:none;padding:13px 24px;border-radius:999px;border:1.5px solid transparent;background:var(--gold);color:var(--ink);transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.wp-block-button .wp-block-button__link:hover{transform:translateY(-2px);background:var(--ink);color:var(--white)}
.wp-block-button.is-style-sf-line .wp-block-button__link{background:transparent;border-color:var(--ink);color:var(--ink)}
.wp-block-button.is-style-sf-line .wp-block-button__link:hover{background:var(--ink);color:var(--white)}
.wp-block-button.is-style-sf-ink .wp-block-button__link{background:var(--ink);color:var(--white)}
.wp-block-button.is-style-sf-ink .wp-block-button__link:hover{background:var(--white);color:var(--ink)}
.wp-block-button.is-style-sf-yellow .wp-block-button__link{background:var(--y);color:var(--ink)}
.wp-block-button.is-style-sf-yellow .wp-block-button__link:hover{background:var(--white);color:var(--ink)}
.wp-block-button.is-style-sf-outline-white .wp-block-button__link{background:transparent;border-color:rgba(255,255,255,.6);color:var(--white)}
.wp-block-button.is-style-sf-outline-white .wp-block-button__link:hover{background:var(--white);color:var(--ink)}
.sf-band .wp-block-buttons,.sf-head .wp-block-buttons{margin-top:0}
.sf-page-head .wp-block-buttons{margin-top:26px}
.sf-step .wp-block-buttons{margin-top:10px}

/* hero */
p.sf-announce{margin:0 0 24px}
p.sf-announce a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 6px;font:500 14px/1.3 var(--f-body);color:var(--ink);transition:border-color .3s,transform .3s var(--ease)}
p.sf-announce a:hover{border-color:var(--gold);transform:translateY(-2px)}
p.sf-announce strong{background:var(--m);color:var(--white);font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;flex:0 0 auto}
.sf-hero-art::after{content:"";position:absolute;right:6%;bottom:-6px;width:130px;height:26px;transform:rotate(-3deg);background:linear-gradient(90deg,var(--c) 0 20%,var(--m) 20% 40%,var(--y) 40% 60%,var(--k) 60% 80%,var(--gold) 80%)}
.sf-hero-art:has(.sf-cmyk)::after{display:none}
.sf-hero-title br{display:none}
.sf-hero-title:not(:has(.sf-line)) br{display:inline}
.sf-stats>div>p{margin:0}
.sf-stats p.sf-stat{font:800 clamp(26px,3vw,40px)/1 var(--f-display);color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sf-stats>div>p:not(.sf-stat){margin-top:6px;font-size:14px;color:var(--ink-3)}

/* client names: a list that becomes a marquee */
.sf-logos{list-style:none;margin:0;padding:0 var(--gut);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
.sf-logos li{font:700 clamp(20px,2.2vw,30px) var(--f-display);color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center}
.sf-logos li::after{content:"";width:18px;height:18px;margin:0 24px;background:var(--gold);-webkit-mask:var(--sf-star) center/contain no-repeat;mask:var(--sf-star) center/contain no-repeat}

/* people */
.sf-person>p{margin:0}
.sf-person>p:not(.sf-initial){font-size:14px;line-height:1.5;color:var(--ink-3)}
.sf-person>p strong{display:block;font:700 19px var(--f-display);color:var(--ink);letter-spacing:-.01em}
.sf-people .wp-block-buttons{margin-top:6px}
.sf-split .sf-people{margin-top:28px}

/* heads with a text group on the right */
.sf-head>.wp-block-group:last-child:not(:first-child){max-width:38ch}
.sf-head>.wp-block-group:last-child:not(:first-child) p{margin:0}
.sf-hs .sf-head p{color:var(--on-ink)}
p.sf-hs-hint{margin-top:10px!important}

/* service cards in the scroller */
.sf-hcard{position:relative;gap:10px;padding-bottom:26px}
.sf-hcard>*{margin:0}
.sf-hcard>.wp-block-image,.sf-hcard>.sf-art{aspect-ratio:16/10;width:100%;overflow:hidden;margin-bottom:12px}
.sf-hcard>.wp-block-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sf-hcard:hover>.wp-block-image img{transform:scale(1.06)}
.sf-hcard>:not(.wp-block-image):not(.sf-art):not(.sf-badge){padding-inline:24px}
.sf-hcard p{font-size:15px}
.sf-hcard p.more{margin-top:auto;padding-top:8px}
.sf-hcard p.more a{color:var(--gold);font-weight:500;text-decoration:none}
.sf-hcard p.more a::after{content:"";position:absolute;inset:0;z-index:1}
.sf-hcard:focus-within{border-color:var(--gold)}
.sf-hcard p.sf-badge{position:absolute;top:14px;left:14px;z-index:2;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--m);color:var(--white);padding:5px 8px;border-radius:4px}
.sf-hs.is-pinned .sf-hcard>.wp-block-image,.sf-hs.is-pinned .sf-hcard>.sf-art{aspect-ratio:16/9}
@media (max-height:760px){.sf-hs.is-pinned .sf-hcard p.more,.sf-hs.is-pinned .sf-hcard p.sf-badge{display:block}}

/* feature images */
.frame-browser::before{content:"";display:block;height:34px;border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 19px 17px,var(--gold) 5px,transparent 5.5px),radial-gradient(circle at 36px 17px,#d3cec4 5px,transparent 5.5px),radial-gradient(circle at 53px 17px,#d3cec4 5px,transparent 5.5px),#ece9e2}

/* testimonials as quote blocks */
blockquote.sf-quote{margin:0;border:0;background:var(--paper);border-radius:20px;padding:30px 30px 28px;display:flex;flex-direction:column}
.sf-quote>p{flex:1;margin:0 0 22px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.sf-quote cite{display:block;font-style:normal;border-top:1px solid var(--line);padding-top:16px;font-size:14px;color:var(--ink-3)}
.sf-quote cite strong{display:block;font:700 18px var(--f-display);color:var(--ink)}
.sf-trio.one{grid-template-columns:1fr}

/* specialisations */
figure.sf-special-bg{margin:0}
.sf-special-grid>*{padding:26px 30px 26px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.sf-special-grid>* h3{color:var(--white);font-size:24px;margin-bottom:10px}
.sf-special-grid>* p{font-size:15px;margin:0}

/* cards */
.sf-box>*{margin:0}
.sf-box::before{content:"";width:30px;height:30px;background:var(--gold);-webkit-mask:var(--sf-star) center/contain no-repeat;mask:var(--sf-star) center/contain no-repeat;transition:transform .6s var(--ease)}
.sf-box:hover::before{transform:rotate(72deg) scale(1.1)}
.sf-box.gold::before{background:var(--ink)}

/* numbered steps from an ordered list */
.sf-process li{font-size:15px}
.sf-process li strong{display:block;font:800 22px/1.05 var(--f-display);color:var(--ink);letter-spacing:-.025em;margin-bottom:8px}

/* contact */
.sf-contact-cards.one{grid-template-columns:1fr}
.sf-card>p{margin:0}
.sf-card p.sf-big a,.sf-card p.sf-mail a{color:inherit;text-decoration:none}
.sf-card p.sf-mail{margin-top:8px}
p.sf-social a+a{margin-left:18px}

/* generic pages and posts written in the editor */
.sf-prose>*+*{margin-top:1em}
.sf-prose .wp-block-image img{border-radius:12px}
.sf-prose .wp-block-buttons{margin-top:1.4em}

/* safety net if a plugin restores Group inner wrappers */
.wp-block-group__inner-container{display:contents}
.sf-contact-grid>.sf-form{grid-column:auto}

/* elements toggled with the hidden attribute (game overlay, form messages) */
[hidden]{display:none!important}

.sf-ticks li::before{flex:0 0 14px;width:14px;height:14px;transform:translateY(2px)}