/* FORGE LOOK — 23 Sep 2026 (Director go: anvil mark, card font, forge imagery, colour reassessment).
   Homepage only. The hero goes dark over the rune-circle forge stone, a rune ring turns slowly behind the
   phones, teal stays the one electric accent. Dark sections carry the gunmetal circuit texture.
   Revert: remove this file's <link> from index.html. */

/* ---------- hero: dark forge ---------- */
html body .hero{position:relative;overflow:hidden;background:#0a0c0d url(/media/brand/forge-hero-wide.webp) 72% 50%/cover no-repeat}
html body .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,12,13,.96) 0%,rgba(10,12,13,.86) 38%,rgba(10,12,13,.35) 70%,rgba(10,12,13,.55) 100%)}
html body .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
html body .hero .hero-inner{position:relative;z-index:1}
html body .hero h1{color:#fff}
html body .hero .teal-underline{color:#4DD9D5}
html body .hero .eyebrow{color:#4DD9D5}
html body .hero .hero-sub{color:#b9c5c5}
html body .hero .hero-pills li{color:#bff5f3;background:rgba(77,217,213,.1);border-color:rgba(77,217,213,.35)}
html body .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
html body .hero .btn-ghost:hover{border-color:#4DD9D5;color:#4DD9D5}
html body .hero .hero-trust{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
html body .hero .hero-trust strong{color:#fff}
html body .hero .hero-trust span{color:#9aa6a6}
html body .hero .trust-divider{background:rgba(255,255,255,.12)}
html body .hero .hero-founder p{color:#b9c5c5}
html body .hero .hero-founder strong{color:#fff}
html body .hero .proof-cap{color:#9aa6a6}
html body .hero .proof-cap a{color:#4DD9D5}

/* the turning rune ring behind the phones */
.proof-ring{position:absolute;left:50%;top:44%;width:560px;height:560px;margin:-280px 0 0 -280px;opacity:.28;
  pointer-events:none;animation:ring-turn 140s linear infinite;filter:drop-shadow(0 0 12px rgba(77,217,213,.55))}
@keyframes ring-turn{to{transform:rotate(360deg)}}
.proof .phone{box-shadow:0 30px 70px -20px rgba(0,0,0,.8),0 0 0 1px rgba(77,217,213,.18) inset}

@media (max-width:768px){
  html body .hero{background-image:url(/media/brand/forge-hero-tall.webp);background-position:50% 100%}
  html body .hero::before{background:linear-gradient(180deg,rgba(10,12,13,.95) 0%,rgba(10,12,13,.82) 55%,rgba(10,12,13,.55) 100%)}
  .proof-ring{width:360px;height:360px;margin:-180px 0 0 -180px}
}
@media (prefers-reduced-motion:reduce){.proof-ring{animation:none}}

/* ---------- dark sections: gunmetal circuit texture ---------- */
html body #results.section-dark,html body #contact.section-dark{
  background:#111315 linear-gradient(rgba(17,19,21,.82),rgba(17,19,21,.9)),url(/media/brand/forge-texture.webp) center/cover}
html body #contact.section-dark{background-image:linear-gradient(rgba(17,19,21,.86),rgba(17,19,21,.92)),url(/media/brand/forge-texture.webp)}

/* ---------- "How I work" — the manifesto, in the site's voice ---------- */
.method{position:relative;background:#0c0e0f;color:#e9eeee;padding:6rem 2rem;overflow:hidden}
.method::before{content:"";position:absolute;inset:0;background:url(/media/brand/forge-tamahagane.webp) 70% 50%/cover;opacity:.32}
.method::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c0e0f 20%,rgba(12,14,15,.7) 60%,rgba(12,14,15,.35))}
.method .container{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.method h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.12;margin:.6rem 0 2rem;max-width:22ch}
.method ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;counter-reset:m}
.method li{counter-increment:m;border-top:1px solid rgba(77,217,213,.35);padding-top:.9rem}
.method li::before{content:"0" counter(m);font-family:'IBM Plex Mono',ui-monospace,monospace;color:#4DD9D5;font-size:.8rem;letter-spacing:.1em;display:block;margin-bottom:.4rem}
.method li strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:.3rem}
.method li span{color:#aab6b6;font-size:.95rem;line-height:1.5}
.method figure{margin:0}
.method figure img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 30px 70px -25px rgba(0,0,0,.9),0 0 0 1px rgba(77,217,213,.2)}
@media (max-width:860px){.method .container{grid-template-columns:1fr}.method ol{grid-template-columns:1fr}.method{padding:4rem 1.2rem}}

/* ---------- "Where we work": a dark band, blueprint grid, the globe in the rune ring (23 Sep 2026) ---------- */
.where{position:relative;overflow:hidden;background:#0b0d0e;color:#e9eeee;padding:6rem 2rem}
.where::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(77,217,213,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(77,217,213,.07) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%)}
.where::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;
  background:radial-gradient(ellipse at 70% 120%,rgba(255,130,50,.16),transparent 60%)}
.where .where-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.where h2{color:#fff}
.where .section-label{color:#4DD9D5}
.where .section-sub{color:#aab6b6}
.where-list{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:0}
.where-list li{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid rgba(77,217,213,.22);color:#c3cccc;line-height:1.5}
.where-list li:last-child{border-bottom:1px solid rgba(77,217,213,.22)}
.where-list a{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:#4DD9D5;font-weight:600;text-decoration:none;padding-top:.15rem}
.where-list a:hover{color:#fff}
.where-globe{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;margin:0 auto}
.where-globe canvas{position:absolute;inset:0;width:100%;height:100%}
.where-ring{position:absolute;inset:0;width:100%;height:100%;opacity:.3;animation:ring-turn 160s linear infinite reverse;filter:drop-shadow(0 0 10px rgba(77,217,213,.5))}
@media (max-width:860px){.where{padding:4rem 1.2rem}.where .where-grid{grid-template-columns:1fr;gap:1.5rem}
  .where-globe{max-width:380px;order:-1}.where-list li{grid-template-columns:1fr;gap:.25rem}}
@media (prefers-reduced-motion:reduce){.where-ring{animation:none}}