/* Spare Octopus layer: loaded after styles.css, so these rules win.
   The octopus images sit on black; mix-blend-mode: screen drops the black so only the glow shows. */

/* ---------- Brand bits ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wm-logo { width: 30px; height: 30px; }
.foot-mark { display: inline-flex; align-items: center; gap: 10px; }
.foot-mark img { width: 34px; height: 34px; }
.ball-mini, .modal-ball { border-radius: 50%; object-fit: cover; }
.ball-static, .reveal-octo img, .ohero-img { mix-blend-mode: screen; }
/* blend can't reach the page inside animated wrappers, so also fade the square edges away */
.ball-rest .ball-static, .reveal-octo img { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }

/* ---------- Hero: headline left, octopus right ---------- */
.ohero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.ohero .hero-copy { position: relative; top: auto; left: auto; right: auto; text-align: left; padding-top: 80px; z-index: 6; }
.ohero h1 { margin: 0; max-width: 8.2ch; font-size: clamp(56px, 7.4vw, 112px); line-height: 0.95; }
.ohero .lede { margin: 26px 0 0; text-align: left; max-width: 25em; font-size: 19px; color: #d6d6d6; }
.ohero .cta-row { justify-content: flex-start; margin-top: 32px; }
.ohero-art { position: absolute; right: -7%; top: 52%; width: min(70vw, 1180px); transform: translateY(-50%); z-index: 2; pointer-events: none; }
/* the stage floats as one piece so the logos stay on the tiles */
.ohero-stage { position: relative; aspect-ratio: 1920 / 1071; animation: octo-float 7s ease-in-out infinite; }
.ohero-img { display: block; width: 100%; height: auto; mix-blend-mode: normal; }
/* painted dusk sky behind the octopus (the Saffrai painting), darker on the left so the headline reads */
/* dusk sea: the octopus rises out of the water with the sun behind it */
.ohero .hero-sky { transform: none; background: url(assets/gen/demo-backdrop.jpg) 100% 40% / 118% auto no-repeat; opacity: 1; }
.ohero .hero-sky::after { background:
  linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0) 55%),
  linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 70%, #000 100%); }
.ohero-glow { right: 16%; top: 40%; width: 820px; height: 640px; background: radial-gradient(closest-side, rgba(245,165,36,0.30), rgba(245,165,36,0.08) 55%, transparent); }
/* real tool logos laid over the glass tiles in the picture (positions are % of the image) */
.tl { position: absolute; width: 5.4%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 24%; background: linear-gradient(160deg, rgba(246,242,238,0.96), rgba(214,207,200,0.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 18px rgba(0,0,0,0.35); }
.tl img { width: 58%; height: 58%; object-fit: contain; }
.t-gmail { left: 31.3%; top: 33.6%; }
.t-drive { left: 68.6%; top: 32.8%; }
.t-meet { left: 22.8%; top: 48.6%; }
.t-sheets { left: 77.4%; top: 49.2%; }
.t-crm { left: 25.2%; top: 73.8%; }
.t-wa { left: 74.8%; top: 73.2%; }
.ohero-glow { position: absolute; right: 12%; top: 50%; width: 760px; height: 620px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(245,165,36,0.20), rgba(245,165,36,0.05) 60%, transparent); z-index: 1; animation: glow 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes octo-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-0.6deg); } }

/* ---------- "Meet your spare octopus" ---------- */
.reveal-octo { width: 260px; margin: 0 auto 8px; }
.reveal-octo img { display: block; width: 100%; height: auto; animation: octo-float 8s ease-in-out infinite; }
.reveal-title { font-size: clamp(60px, 9.5vw, 148px); }

/* ---------- Booking section: octopus above the headline ---------- */
.book-rays { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ohero-art img, .reveal-octo img { animation: none; }
}

/* ---------- Phone: octopus on top, words below, in thumb reach ---------- */
@media (max-width: 760px) {
  .ohero { display: block; min-height: 0; padding: 70px 0 48px; }
  /* same picture as desktop, cropped to the middle: octopus plus six logos */
  .ohero-art { position: relative; right: auto; top: auto; width: 100%; overflow: hidden; transform: none; }
  .ohero-stage { width: 136%; margin-left: -18%; }
  .ohero .hero-sky { background-position: 50% 0; background-size: cover; }
  .ohero .hero-sky::after { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0.1) 42%, rgba(0,0,0,0.75) 60%, #000 78%); }
  .ohero-glow { right: 50%; top: 190px; width: 360px; height: 300px; transform: translate(50%, -50%); }
  .ohero .hero-copy { padding-top: 0; margin-top: -8px; text-align: center; }
  .ohero h1 { font-size: 44px; max-width: 10ch; margin: 0 auto; }
  .ohero .lede { text-align: center; font-size: 17px; margin: 18px auto 0; }
  .ohero .cta-row { justify-content: center; }
  .reveal-octo { width: 190px; }
}

/* ---------- Hero: logo tiles pop in one by one, then bob on their own ---------- */
.tl { animation: tl-in .7s cubic-bezier(.2,.9,.3,1.25) both, tl-bob 4.6s ease-in-out infinite; }
.t-gmail  { animation-delay: .55s, 1.4s; }
.t-drive  { animation-delay: .67s, 2.1s; }
.t-meet   { animation-delay: .79s, 1.8s; }
.t-sheets { animation-delay: .91s, 2.6s; }
.t-crm    { animation-delay: 1.03s, 2.3s; }
.t-wa     { animation-delay: 1.15s, 1.6s; }
@keyframes tl-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tl-bob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -62%); } }

/* ---------- Meet: the eight-arms diagram on the dusk painting ---------- */
.arms-sec { padding-bottom: 110px; }
.arms-paint { background-position: 50% 80%; opacity: 0.85; }
.arms-sec .def-text { font-size: 24px; color: #f0f0f0; }
.arms { position: relative; aspect-ratio: 1000 / 600; max-width: 1120px; margin: 24px auto 0; }
.arms-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arms-lines path { fill: none; stroke: rgba(245,165,36,0.6); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }
.arms.on .arms-lines path { stroke-dashoffset: 0; }
.arms-lines path:nth-child(1) { transition-delay: .1s; } .arms-lines path:nth-child(5) { transition-delay: .15s; }
.arms-lines path:nth-child(2) { transition-delay: .3s; } .arms-lines path:nth-child(6) { transition-delay: .35s; }
.arms-lines path:nth-child(3) { transition-delay: .5s; } .arms-lines path:nth-child(7) { transition-delay: .55s; }
.arms-lines path:nth-child(4) { transition-delay: .7s; } .arms-lines path:nth-child(8) { transition-delay: .75s; }
.arms-octo { position: absolute; left: 50%; top: 52%; width: 34%; transform: translate(-50%, -50%); }
.arms-octo img { display: block; width: 100%; height: auto; animation: octo-float 8s ease-in-out infinite; }
.al { position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; width: 230px; border-radius: 14px; background: rgba(12,10,8,0.62); border: 1px solid rgba(245,165,36,0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
.al b { font-size: 17px; font-weight: 500; color: #fff; }
.al span { font-size: 14px; line-height: 1.4; color: #a8a8a8; }
.al::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 12px rgba(245,165,36,0.8); }
.a1, .a2, .a3, .a4 { text-align: right; transform: translate(-100%, -50%) translateX(-14px); }
.a1::after, .a2::after, .a3::after, .a4::after { right: -5px; }
.a5, .a6, .a7, .a8 { transform: translate(0, -50%) translateX(14px); }
.a5::after, .a6::after, .a7::after, .a8::after { left: -5px; }
.a1 { left: 26.2%; top: 15%; }  .a5 { left: 73.8%; top: 15%; }
.a2 { left: 22.2%; top: 38.3%; } .a6 { left: 77.8%; top: 38.3%; }
.a3 { left: 22.2%; top: 61.7%; } .a7 { left: 77.8%; top: 61.7%; }
.a4 { left: 26.2%; top: 85%; }  .a8 { left: 73.8%; top: 85%; }
.arms.on .al { opacity: 1; }
.arms.on .a1, .arms.on .a2, .arms.on .a3, .arms.on .a4 { transform: translate(-100%, -50%); }
.arms.on .a5, .arms.on .a6, .arms.on .a7, .arms.on .a8 { transform: translate(0, -50%); }
.a1, .a5 { transition-delay: .5s; } .a2, .a6 { transition-delay: .7s; } .a3, .a7 { transition-delay: .9s; } .a4, .a8 { transition-delay: 1.1s; }
.arms-note { max-width: 40em; margin: 36px auto 0; text-align: center; }

/* ---------- One accent colour: results cards in saffron, not red ---------- */
.tk-arrow { color: var(--saffron); }
.tk-num small { color: var(--saffron); background: rgba(245,165,36,0.12); }
.spark .line { stroke: var(--saffron); }
.spark .area { fill: rgba(245,165,36,0.10); }

@media (prefers-reduced-motion: reduce) {
  .tl { animation: none; }
  .arms-lines path { stroke-dashoffset: 0; transition: none; }
  .al { opacity: 1; transition: none; }
  .arms-octo img { animation: none; }
}

/* phone/tablet: octopus on top, the eight jobs as a two-column list */
@media (max-width: 900px) {
  .arms { aspect-ratio: auto; }
  .arms-lines { display: none; }
  .arms-octo { position: relative; left: auto; top: auto; width: 230px; margin: 0 auto 18px; transform: none; }
  .arms-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .al, .arms.on .al { position: relative; left: auto; top: auto; width: auto; transform: none; text-align: left; opacity: 1; padding: 12px 14px; }
  .al::after { display: none; }
  .al b { font-size: 15px; } .al span { font-size: 13px; }
}

/* ---------- Round 3 review: no black holes, tighter eight arms ---------- */
/* hero: painting runs the full width, octopus sits on the horizon */
.ohero .hero-sky::after { background:
  linear-gradient(90deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.4) 32%, rgba(0,0,0,0) 58%),
  linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 72%, #000 100%); }
.ohero-art { top: calc(52% + 30px); }

/* eight arms: bigger octopus, cards closer, lines leave the arm tips, sun glow behind the head */
.arms { max-width: 1060px; }
.arms::before { content: ""; position: absolute; left: 50%; top: 34%; width: 62%; height: 80%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(245,165,36,0.32), rgba(245,165,36,0.08) 55%, transparent); pointer-events: none; animation: glow 4.5s ease-in-out infinite; }
.arms-octo { width: 44%; top: 52%; }
.al { width: 210px; }
.a1 { left: 24.5%; top: 14%; }  .a5 { left: 75.5%; top: 14%; }
.a2 { left: 21.5%; top: 37%; }  .a6 { left: 78.5%; top: 37%; }
.a3 { left: 21.5%; top: 62%; }  .a7 { left: 78.5%; top: 62%; }
.a4 { left: 24.5%; top: 86%; }  .a8 { left: 75.5%; top: 86%; }
.arms-lines path { stroke: rgba(245,165,36,0.75); stroke-width: 1.8; }
.arms-paint { opacity: 1; background-position: 50% 70%; }
.arms-sec .paint-shade { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.25) 16%, rgba(0,0,0,0.2) 75%, #000 100%); }

/* pilot card: the dusk painting inside it, so it isn't a black box on black */
.pilot-wrap .pilot { background:
  linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.15) 100%),
  url(assets/gen/demo-backdrop.jpg) 85% 45% / cover no-repeat, #000; }

/* projects band: a warm glow pool behind the cards */
.projects { position: relative; }
.projects::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 60% at 50% 62%, rgba(245,165,36,0.09), transparent 70%); pointer-events: none; }
.projects > .wrap { position: relative; }

@media (max-width: 900px) {
  .arms::before { top: 18%; width: 90%; height: 40%; }
  .arms-octo { width: 250px; }
  .pilot-wrap .pilot { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.9) 100%), url(assets/gen/demo-backdrop.jpg) 80% 0 / auto 60% no-repeat, #000; }
}

/* the eighth arm is the open offer, so it gets the accent */
.al-any { border-color: rgba(245,165,36,0.6); background: rgba(40,24,6,0.7); }
.al-any b { color: var(--saffron); }

/* ---------- Hero, every width above phone: centred and stacked, like old Saffrai ----------
   octopus on the horizon with a sun halo behind its head, headline under it, one axis */
@media (min-width: 761px) {
  .ohero { display: block; min-height: 100vh; min-height: 100svh; padding: 86px 0 48px; }
  .ohero-art { position: relative; right: auto; top: auto; transform: none; margin: 0 auto;
    width: min(84vw, calc((100svh - 470px) * 1.79), 860px); min-width: 480px; }
  .ohero .hero-copy { text-align: center; padding-top: 0; margin-top: -4px; }
  .ohero h1 { margin: 0 auto; max-width: 13ch; font-size: clamp(56px, 6.7vw, 96px); line-height: 0.95; }
  .ohero .lede { margin: 18px auto 0; text-align: center; max-width: 30em; }
  .ohero .cta-row { justify-content: center; margin-top: 26px; }
  /* the sun: a warm halo centred behind the head */
  .ohero-glow { right: auto; left: 50%; top: calc(86px + min(84vw, calc((100svh - 470px) * 1.79), 860px) * 0.2); width: 720px; height: 520px; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255,190,90,0.55), rgba(245,165,36,0.22) 40%, rgba(245,165,36,0.06) 70%, transparent); }
  .ohero .hero-sky { background: url(assets/gen/demo-backdrop.jpg) 50% 34% / cover no-repeat; }
  .ohero .hero-sky::after { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 44%, rgba(0,0,0,0.72) 64%, #000 84%); }
}

/* ---------- New sea paintings (Gemini, 12 Nov) ---------- */
.paint-hire { background-image: url(assets/gen/sea-cliffs.webp); background-position: 70% 60%; }
.founder .paint-dusk { background-image: url(assets/gen/sea-rays.webp); background-position: 70% 30%; }
.book { position: relative; background: url(assets/gen/sea-horizon.webp) 50% 58% / cover no-repeat; }
.book::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 22%, rgba(0,0,0,0.25) 60%, #000 100%); pointer-events: none; }
.book-copy, .book-ball { position: relative; z-index: 2; }
.book-ball { transform: none; width: 300px; }
@media (max-width: 900px) {
  .arms-paint { background-size: cover; background-position: 50% 50%; }
  .hire .paint-hire, .founder .paint-dusk { background-size: cover; }
}

/* founder band: a little more room under the nav */
.founder { padding-top: calc(var(--founder-pad, 0px) + 24px); }

/* hero uses the centred-sun horizon so the sun sits right behind the octopus; booking takes the side-sun sea */
@media (min-width: 761px) {
  .ohero .hero-sky { background: url(assets/gen/sea-horizon.webp) 50% 46% / cover no-repeat; }
  .ohero .hero-sky::after { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.7) 70%, #000 88%); }
  .ohero h1 { max-width: 11ch; }
}
.book { background-image: url(assets/gen/demo-backdrop.jpg); background-position: 80% 45%; }

/* ================= Round 6: smooth 3D sea backgrounds ================= */
@media (min-width: 761px) {
  .ohero .hero-sky { background: url(assets/gen/bg-hero.webp) 50% 44% / cover no-repeat; }
  /* bigger octopus: it is the hero */
  .ohero-art { width: min(94vw, calc((100svh - 400px) * 1.79), 1060px); }
  .ohero { padding-top: 72px; }
}
.ohero .hero-sky { background-image: url(assets/gen/bg-hero.webp); }
.arms-paint { background-image: url(assets/gen/bg-mist.webp); background-size: cover; background-position: 50% 50%; opacity: 1; }
.paint-hire { background-image: url(assets/gen/bg-islands.webp); background-size: cover; background-position: 60% 50%; opacity: 1; }
.pilot-wrap .pilot { background:
  linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.05) 100%),
  url(assets/gen/bg-sunpath.webp) 80% 50% / cover no-repeat, #000; }
.book { background-image: url(assets/gen/bg-hero.webp); background-position: 50% 50%; }
.demo-stage { background-image: url(assets/gen/bg-sunpath.webp); }

/* the promise: quote centred over underwater light, no photo */
.quote-sec { padding: 150px 0 140px; }
.quote-sec .paint-dusk { background-image: url(assets/gen/bg-underwater.webp); background-size: cover; background-position: 50% 20%; opacity: 1; }
.quote-sec .paint-shade { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.35) 75%, #000 100%); }
.quote-inner { position: relative; z-index: 2; display: block; text-align: center; }
.quote-inner blockquote { max-width: 22ch; margin: 0 auto; }
.quote-inner blockquote p { font-family: var(--serif); font-size: clamp(38px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -0.01em; color: #fff; }
.quote-inner footer { margin-top: 22px; font-size: 15px; color: #bdbdbd; }
.quote-inner blockquote { max-width: 980px; flex: none; }
.quote-inner blockquote p { max-width: 21ch; margin: 0 auto; }

/* ---------- What we build ---------- */
.build { position: relative; padding: 120px 0 40px; }
.build::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 30%, rgba(245,165,36,0.07), transparent 70%); pointer-events: none; }
.build .wrap { position: relative; }
.eyebrow-s { font-size: 15px; color: var(--saffron); margin-bottom: 14px; }
.build-h { max-width: 22ch; font-size: clamp(34px, 4vw, 54px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.svc { padding: 26px 24px 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.08); transition: border-color .3s, transform .3s; }
.svc:hover { border-color: rgba(245,165,36,0.45); transform: translateY(-3px); }
.svc svg { width: 30px; height: 30px; fill: none; stroke: var(--saffron); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc b { display: block; margin-top: 16px; font-size: 19px; font-weight: 500; color: #fff; }
.svc p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: #a8a8a8; }
.build-foot { margin-top: 28px; font-size: 16px; color: #bdbdbd; }
.build-foot a { color: var(--saffron); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } .build { padding-top: 80px; } }

/* ---------- Work: outcome line on each card ---------- */
.card-out { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: #a8a8a8; }

/* ---------- Booking: the octopus peeks up over the horizon ---------- */
.book-ball { display: none; }
.book-peek { position: relative; z-index: 2; width: min(520px, 80vw); margin: 0 auto -18px; }
.book-peek img { display: block; width: 100%; height: auto; animation: peek-bob 5s ease-in-out infinite; }
@keyframes peek-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Tentacles rising at section edges, then swaying ---------- */
.projects, .hire, .impact { position: relative; }
.tent { position: absolute; bottom: 0; width: 150px; z-index: 1; pointer-events: none; opacity: 0; transform: translateY(45%); transition: opacity .9s, transform 1.4s cubic-bezier(.2,.8,.2,1); }
.tent img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: tent-sway 6s ease-in-out infinite; }
.tent.in { opacity: 0.9; transform: translateY(8%); }
.tent-l  { left: -30px; }
.tent-r  { right: -24px; } .tent-r img { animation-delay: -2s; }
.tent-l2 { left: -36px; width: 120px; } .tent-l2 img { animation-delay: -4s; }
.tent-r img, .tent-l2 img { scale: -1 1; }
@keyframes tent-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 4deg; } }
.projects > .wrap, .hire-inner, .impact > .wrap { position: relative; z-index: 2; }
@media (max-width: 900px) { .tent { width: 90px; } .tent.in { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .tent, .tent.in { transition: none; opacity: 0.9; transform: none; } .tent img, .book-peek img { animation: none; } }

/* ================= Round 7: ONE look. Sea scene only at top and bottom; black + saffron glow between ================= */
.arms-paint, .paint-hire, .quote-sec .paint-dusk { background-image: none !important; }
.arms-sec .paint-shade, .hire .paint-shade, .quote-sec .paint-shade { background: none; }
.arms-sec::before { background: radial-gradient(45% 55% at 50% 58%, rgba(245,165,36,0.10), transparent 72%); }
.hire::before, .quote-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, rgba(245,165,36,0.07), transparent 70%); }
.quote-sec { position: relative; }
.pilot-wrap .pilot { background: radial-gradient(60% 90% at 85% 40%, rgba(245,165,36,0.16), transparent 65%), #050505; }
.demo-stage { background: radial-gradient(70% 80% at 50% 30%, rgba(245,165,36,0.10), transparent 70%), #070707; }
.tent { display: none; }
@media (max-width: 900px) { .pilot-wrap .pilot { background: radial-gradient(90% 50% at 50% 12%, rgba(245,165,36,0.16), transparent 70%), #050505; } }

/* ================= Round 8: images back, all graded to one palette ================= */
.demo-stage { background: url(assets/gen/bg-sunpath.webp) 70% 50% / cover no-repeat, #05070a; }
.arms-paint { background-image: url(assets/gen/bg-mist.webp) !important; background-size: cover; background-position: 50% 45%; opacity: 1; }
.arms-sec .paint-shade { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.1) 18%, rgba(0,0,0,0.1) 80%, #000 100%); }
.paint-hire { background-image: url(assets/gen/bg-islands.webp) !important; background-size: cover; background-position: 70% 50%; opacity: 1; }
.hire .paint-shade { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.25) 18%, rgba(0,0,0,0.3) 80%, #000 100%); }
.quote-sec .paint-dusk { background-image: url(assets/gen/bg-underwater.webp) !important; background-size: cover; background-position: 50% 15%; opacity: 1; }
.quote-sec .paint-shade { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.2) 22%, rgba(0,0,0,0.35) 78%, #000 100%); }
.book { background: url(assets/gen/bg-hero.webp) 50% 40% / cover no-repeat, #000; }
.book::before { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.35) 70%, #000 100%); }

/* review: hero buttons clear the fold; peek sits on the headline like a ledge */
@media (min-width: 761px) { .ohero-art { width: min(90vw, calc((100svh - 470px) * 1.79), 980px); } }
.book-peek { width: min(380px, 70vw); margin: 0 auto -6px; }

/* ================= Pro round (12 Nov): lighter, never a black hole; bigger hero octopus ================= */
/* deep navy base instead of black */
html, body { background-color: #030712; }
/* Abyss: a very dark blue base with a few soft light pools so nothing reads as empty black */
body { background:
  radial-gradient(900px 700px at 12% 20%, rgba(90,170,220,0.08), transparent 70%),
  radial-gradient(1000px 800px at 88% 46%, rgba(90,170,220,0.07), transparent 70%),
  radial-gradient(800px 640px at 25% 70%, rgba(245,165,36,0.05), transparent 70%),
  radial-gradient(900px 700px at 78% 90%, rgba(90,170,220,0.08), transparent 70%),
  linear-gradient(180deg, #030712 0%, #040a18 50%, #02050d 100%); }

/* "What we build": soft sunlit water from above */
.build { overflow: hidden; }
.build::before { background:
  linear-gradient(180deg, rgba(3,7,18,0.25) 0%, rgba(3,7,18,0.55) 55%, #040a18 100%),
  url(assets/gen/bg-underwater.webp) 50% 0 / cover no-repeat !important; opacity: 1 !important; }
/* "Things we've built": the misty sea behind the cards */
.projects { overflow: hidden; }
.projects::before { background:
  linear-gradient(180deg, #040a18 0%, rgba(4,10,24,0.35) 22%, rgba(4,10,24,0.45) 78%, #040a18 100%),
  url(assets/gen/bg-mist.webp) 50% 55% / cover no-repeat !important; opacity: 1 !important; }
/* results band: a warm glow pool so it isn't flat */
.impact { position: relative; }
.impact::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(55% 70% at 50% 45%, rgba(245,165,36,0.10), transparent 70%), radial-gradient(80% 60% at 50% 100%, rgba(60,110,160,0.18), transparent 70%); }
.impact > .wrap { position: relative; z-index: 1; }
/* pilot card: lighter glass with the warm pool */
.pilot-wrap .pilot { background: radial-gradient(60% 90% at 85% 40%, rgba(245,165,36,0.20), transparent 65%), linear-gradient(180deg, #0a1426, #050c1a) !important; }

/* cards: a touch lighter so they read as glass, not holes */
.svc, .card, .tk { background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03)) !important; border-color: rgba(255,255,255,0.12) !important; }

/* hero octopus: slightly bigger */
@media (min-width: 761px) { .ohero-art { width: min(94vw, calc((100svh - 420px) * 1.79), 1080px) !important; } }
@media (max-width: 760px) { .ohero-stage { width: 150%; margin-left: -25%; } }
/* let the two sea backdrops actually show */
.build::before { background:
  linear-gradient(180deg, rgba(3,7,18,0.05) 0%, rgba(3,7,18,0.35) 60%, #040a18 100%),
  url(assets/gen/bg-underwater.webp) 50% 0 / cover no-repeat !important; }
.projects::before { background:
  linear-gradient(180deg, #040a18 0%, rgba(4,10,24,0.1) 20%, rgba(4,10,24,0.2) 80%, #040a18 100%),
  url(assets/gen/bg-mist.webp) 50% 55% / cover no-repeat !important; }
@media (min-width: 761px) { .ohero-art { width: min(94vw, calc((100svh - 440px) * 1.79), 1060px) !important; } }

/* ================= Seamless backdrops: every image melts into the sections around it (no edges, no lines) ================= */
.build::before, .projects::before, .arms-paint, .paint-hire, .book::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%); }
.build::before { background: url(assets/gen/bg-underwater.webp) 50% 0 / cover no-repeat !important; opacity: .85 !important; }
.projects::before { background: url(assets/gen/bg-mist.webp) 50% 55% / cover no-repeat !important; opacity: .9 !important; }
.arms-sec .paint-shade, .hire .paint-shade { background: none !important; }
/* final call to action: the sea lives on a faded layer, the section itself has no hard background */
.book { background: none !important; position: relative; }
.book::before { background: none !important; }
.book::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(assets/gen/bg-hero.webp) 50% 40% / cover no-repeat; opacity: .9; }
.book > * { position: relative; z-index: 1; }
/* the hero's bottom fades into the page navy, not to black */
.ohero .hero-sky::after { background: linear-gradient(180deg, rgba(3,7,18,0.5) 0%, rgba(3,7,18,0) 16%, rgba(3,7,18,0) 52%, rgba(3,7,18,0.7) 72%, #030712 96%) !important; }

/* ---------- FAQ on the home page ---------- */
.faq-home { position: relative; padding: 110px 0 60px; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 22px; font-size: 17px; font-weight: 500; color: #fff; display: flex; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--saffron, #f5a524); font-size: 22px; line-height: 1; transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.6; color: #b9c2cd; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- floating WhatsApp button ---------- */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: #0a1426; border: 1px solid rgba(255,255,255,0.16); color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: transform .2s, border-color .2s; }
.wa-float:hover { transform: translateY(-2px); border-color: rgba(245,165,36,0.6); }
.wa-float img { width: 28px; height: 28px; }
@media (max-width: 760px) { .wa-float span { display: none; } .wa-float { padding: 10px; right: 16px; bottom: 16px; } }

/* ================= Round: owner fixes ================= */
/* 1. Free pilot: back to the Saffrai card: black, thin saffron border, warm glow, the octopus at the right */
.pilot-wrap .pilot { background: radial-gradient(55% 80% at 82% 35%, rgba(245,165,36,0.16), transparent 62%), #050608 !important;
  border: 1px solid rgba(245,165,36,0.32) !important; box-shadow: 0 0 140px -50px rgba(245,165,36,0.45) !important; }

/* 2. "Tell us what slows…": the octopus floats above the headline, like Saffrai's stone */
.book-octo { position: relative; z-index: 2; width: min(300px, 62vw); margin: 0 auto -10px; filter: drop-shadow(0 0 40px rgba(245,165,36,0.35)); }
.book-octo img { display: block; width: 100%; height: auto; animation: octo-float 8s ease-in-out infinite; }

/* 3. "Things we've built": the misty sea is clearly there, not black */
.projects::before { opacity: 1 !important; filter: brightness(1.25) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%); }

/* 4. "What we build": no sunlight from nowhere, just the calm navy continuing from the hero with a soft warm pool */
.build::before { background: radial-gradient(50% 55% at 50% 40%, rgba(245,165,36,0.07), transparent 70%) !important; opacity: 1 !important; filter: none; -webkit-mask-image: none; mask-image: none; }

/* 5. FAQ: a clean centred list with hairlines, no boxes */
.faq-home { padding: 120px 0 80px; }
.faq-wrap { display: block !important; max-width: 820px; margin: 0 auto; text-align: center; }
.faq-wrap .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 60px); letter-spacing: -0.01em; }
.faq-list { margin-top: 40px; display: block !important; text-align: left; border-top: 1px solid rgba(255,255,255,0.12); }
.faq-item { border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; border-radius: 0 !important; background: none !important; }
.faq-item summary { padding: 24px 4px !important; font-size: 19px !important; font-weight: 400 !important; color: #f2f2f2; }
.faq-item summary:hover { color: #fff; }
.faq-item summary::after { font-size: 26px !important; font-weight: 300; }
.faq-item p { padding: 0 4px 26px !important; max-width: 62ch; font-size: 16px !important; color: #aab3bf !important; }

/* Free pilot: the card is a window onto the same sea; sun path behind the octopus, navy fade under the text */
.pilot-wrap .pilot { background:
  linear-gradient(90deg, rgba(4,9,20,0.96) 0%, rgba(4,9,20,0.82) 38%, rgba(4,9,20,0.25) 70%, rgba(4,9,20,0.1) 100%),
  linear-gradient(180deg, rgba(4,9,20,0) 55%, rgba(4,9,20,0.9) 100%),
  url(assets/gen/bg-sunpath.webp) 78% 50% / cover no-repeat, #040a18 !important;
  border: 1px solid rgba(245,165,36,0.28) !important; box-shadow: 0 30px 120px -50px rgba(245,165,36,0.45) !important; }
@media (max-width: 900px) {
  .pilot-wrap .pilot { background:
    linear-gradient(180deg, rgba(4,9,20,0.2) 0%, rgba(4,9,20,0.85) 45%, rgba(4,9,20,0.96) 100%),
    url(assets/gen/bg-sunpath.webp) 70% 0 / auto 55% no-repeat, #040a18 !important; }
}
/* final section: the glow and rays are background layers again (they were taking up 520px of empty space) */
.book > .book-glow, .book > .book-rays { position: absolute !important; z-index: 0; }
.book { padding: 96px 0 90px !important; }
.book-octo { width: min(240px, 52vw); margin: 0 auto 4px; }

/* ================= Fable round (pro site) ================= */
/* 1. hero buttons clear the fold at 1440x900 and 1366x768 */
@media (min-width: 761px) {
  .ohero-art { width: min(90vw, calc((100svh - 470px) * 1.79), 760px) !important; }
  .ohero h1 { font-size: clamp(52px, 6.1vw, 88px) !important; }
  .ohero .hero-copy { margin-top: 8px !important; }
}
/* 2. final headline breaks cleanly */
.book h2 { max-width: 14ch; margin-left: auto; margin-right: auto; }
/* 3. one heading system: Geist for section headings, serif only for h1s and the final CTA */
.faq-wrap .h2 { font-family: var(--sans) !important; font-weight: 500 !important; font-size: clamp(34px, 3.4vw, 44px) !important; letter-spacing: -0.03em !important; }
/* 5. no flat panels: soft glows behind headings */
.faq-home::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 50% at 50% 30%, rgba(80,130,180,0.10), transparent 70%), radial-gradient(35% 40% at 50% 70%, rgba(245,165,36,0.05), transparent 70%); }
.faq-home > .wrap { position: relative; }
.build::before { background: radial-gradient(48% 55% at 30% 30%, rgba(245,165,36,0.07), transparent 70%), radial-gradient(50% 60% at 80% 70%, rgba(80,130,180,0.10), transparent 70%) !important; }
/* Fable polish */
.pilot-wrap .pilot { background-position: 0 0, 0 0, 60% 50%, 0 0 !important; }
.book h2 { max-width: none !important; text-wrap: balance; }
.faq-home { padding: 96px 0 96px !important; }
.build .eyebrow-s { display: none; }
.build .build-h { font-size: clamp(34px, 3.4vw, 44px) !important; max-width: 28ch !important; }

/* 12 Nov: remove the empty blue band between the FAQ and the final section */
.faq-home { padding-bottom: 32px !important; }
.book { padding-top: 16px !important; }

/* FAQ in two columns on wide screens. Each column is its own list, so opening a question never moves the other column. */
@media (min-width: 1000px) {
  .faq-wrap { max-width: 1120px !important; }
  .faq-list { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; align-items: start; border-top: 0 !important; }
  .faq-col { border-top: 1px solid rgba(255,255,255,0.12); }
}
/* wide hero art and glows bleed past the screen edge on phones; clip them so the page never scrolls sideways (clip keeps sticky elements working) */
main { overflow-x: clip; }

/* ================= Phones: the home page as lists and rows, not a wall of cards ================= */
@media (max-width: 760px) {
  /* What we build: a settings-style list */
  .build { padding: 64px 0 8px; }
  .svc-grid { display: block; margin-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); }
  .svc { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; border-radius: 0; background: none !important; }
  .svc:hover { transform: none; }
  .svc svg { grid-row: span 2; width: 38px; height: 38px; padding: 8px; border-radius: 11px; border: 1px solid rgba(245,165,36,0.3); background: rgba(245,165,36,0.08); }
  .svc b { margin: 0; font-size: 16.5px; line-height: 1.3; }
  .svc p { margin-top: 2px; font-size: 14px; line-height: 1.45; }
  .build-foot { margin-top: 18px; font-size: 15px; }

  /* Meet your spare octopus: tighter tiles, the four steps as a hairline list */
  .arms-sec { padding-bottom: 56px; }
  .arms-octo { width: 160px !important; margin-bottom: 10px; }
  .def-text { font-size: 19px !important; }
  .arms-list { gap: 8px; }
  .al, .arms.on .al { padding: 10px 12px; border-radius: 12px; }
  .al b { font-size: 14.5px; line-height: 1.3; } .al span { display: none; }
  .reveal-copy { padding-top: 0; }
  .arms-sec { padding-top: 48px !important; }
  .arms-note { margin-top: 20px; font-size: 15px; }
  .role-grid { display: block; margin-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); }
  .role-grid li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 13px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 0; background: none; }
  .role-grid svg { grid-row: span 2; width: 26px; height: 26px; margin-top: 1px; }
  .role-grid .mono { right: 0; top: 15px; }
  .role-grid b { margin: 0; font-size: 16px; }
  .role-grid p { margin-top: 2px; font-size: 14px; }

  /* Things we've built: the first build stays a card, the other two become compact rows */
  .projects { padding-top: 64px !important; }
  .cards { margin-top: 22px; gap: 0; }
  .cards .card:first-child { margin-bottom: 14px; }
  .cards .card:first-child .card-pv { height: 200px !important; }
  .cards .card:not(:first-child) { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; border-radius: 0; background: none !important; overflow: visible; }
  .cards .card:nth-child(2) { border-top: 1px solid rgba(255,255,255,0.1) !important; }
  .cards .card:not(:first-child):hover { transform: none; }
  .cards .card:not(:first-child) .card-pv { position: relative; width: 92px; height: 92px; padding: 0; border-radius: 14px; overflow: hidden; }
  .cards .card:not(:first-child) .card-pv > div { position: absolute; left: 50%; top: 50%; width: 300px; height: auto !important; min-height: 200px; border-radius: 10px; transform: translate(-50%, -50%) scale(.34) !important; }
  .cards .card:not(:first-child) .card-body { padding: 0; }
  .cards .card:not(:first-child) h3 { margin-top: 3px; font-size: 16.5px; line-height: 1.3; }
  .cards .card:not(:first-child) .card-out, .cards .card:not(:first-child) .card-foot { display: none; }

  /* What usually drops: three compact stat rows, number left, label right */
  .impact { padding: 56px 0 16px !important; }
  .impact-grid { display: block !important; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
  .tk { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "num what" "num how"; column-gap: 16px; align-items: center; padding: 14px 0; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; border-radius: 0; background: none !important; }
  .tk-num { grid-area: num; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; font-size: 32px; }
  .tk-arrow { display: none; }
  .tk-num small { font-size: 11.5px; padding: 2px 6px; }
  .tk-what { grid-area: what; font-size: 15px; color: #fff; }
  .tk-how { grid-area: how; margin-top: 2px; font-size: 13.5px; }
  .spark { display: none; }
  .impact-note { margin-top: 14px; }

  .build .build-h, #demo .h2, #projects .h2, #hire .h2, #impact .h2 { font-size: 29px !important; line-height: 1.12; }
  #demo > .wrap:first-child { padding-bottom: 0; }
  .site-foot { padding-top: 32px !important; }
  /* tools: small logos without boxes */
  .tools .logo-wall { gap: 16px 20px; }
  .tools .logo-wall li { width: auto; height: 30px; padding: 0; border: 0; border-radius: 0; background: none; }
  .tools .logo-wall img { width: 28px; height: 28px; }
  .tools .logo-wall li.txt { font-size: 16px; }
  .tools .logo-wall li.yours { height: 30px; padding: 0 10px; border: 1px dashed #3a3a3a; border-radius: 999px; }

  /* tighter section rhythm */
  .pilot-wrap { padding-top: 40px !important; padding-bottom: 40px !important; }
  .faq-home { padding-top: 56px !important; }
  .faq-item summary { padding: 18px 4px !important; font-size: 17px !important; }
  .book-octo { width: min(170px, 46vw) !important; }

  /* Why not hire: calmer islands so the grey bar reads */
  .paint-hire { opacity: .5 !important; }
  .bar:not(.s-bar) { background: rgba(3,7,18,0.6); border: 1px solid rgba(255,255,255,0.1); }
  .bar:not(.s-bar) .fill { background: rgba(255,255,255,0.14); }
}

/* Phones: pilot octopus never touches the heading (no scroll parallax, fixed gap) */
@media (max-width: 760px) { #pilot .ball-par { transform: translateY(-24px) !important; } #pilot .ball-par img { animation: none !important; transform: none !important; } }