@font-face{font-family:Ubuntu;src:url(/assets/fonts/ubuntu-light.woff) format('woff');font-weight:300;font-display:swap}
@font-face{font-family:Ubuntu;src:url(/assets/fonts/ubuntu-regular.woff) format('woff');font-weight:400 700;font-display:swap}
:root{--petrol:#123B3A;--deep:#0E3A3B;--abyss:#072529;--copper:#B84E2B;--copper-soft:#D47B58;--stone:#A7ACA8;--ivory:#F3F0E8;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Ubuntu,system-ui,sans-serif;font-weight:300;color:var(--ivory);background:var(--abyss);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}img{display:block}
.wrap{width:min(1160px,92vw);margin:0 auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ivory);color:var(--abyss);padding:.5rem 1rem;border-radius:8px}
:focus-visible{outline:2px solid var(--copper-soft);outline-offset:3px;border-radius:10px}
h1,h2,h3{font-weight:400;letter-spacing:-.02em;line-height:1.1;margin:0}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--copper-soft);margin:0 0 1rem}
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 4vw 0;background:transparent}
.site-header .brand img{width:196px;height:auto}
.site-header nav{display:flex;gap:1.6rem;margin-left:auto}
.site-header nav a{text-decoration:none;font-size:.92rem;color:var(--stone);transition:color .2s}.site-header nav a:hover{color:var(--ivory)}
.chip{font-size:.72rem;letter-spacing:.08em;padding:.35rem .75rem;border:1px solid rgba(212,123,88,.45);color:var(--copper-soft);border-radius:999px;white-space:nowrap}
.hero{position:relative;overflow:hidden;min-height:min(88vh,820px);display:grid;align-items:center;background:radial-gradient(1200px 600px at 80% 20%,rgba(184,78,43,.22),transparent 60%),radial-gradient(900px 600px at 10% 90%,rgba(18,59,58,.9),transparent 70%),linear-gradient(160deg,var(--deep),var(--abyss))}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.ribbon{position:absolute;right:-10%;width:80%;height:160px;border-radius:50%;filter:blur(2px);border-top:2px solid rgba(212,123,88,.55);transform:rotate(-12deg);animation:drift 18s var(--ease) infinite alternate}
.r1{top:18%}.r2{top:30%;border-color:rgba(184,78,43,.35);animation-duration:24s;right:-20%}.r3{top:44%;border-color:rgba(167,172,168,.25);animation-duration:30s}
@keyframes drift{to{transform:rotate(-8deg) translateX(-4%)}}
.hero-inner{position:relative;padding:9rem 0 6rem}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem);max-width:12ch}.hero h1 em{font-style:normal;color:var(--copper-soft)}
.lede{max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--stone);margin:1.6rem 0 2.4rem}
.btn{display:inline-block;padding:.85rem 1.4rem;border-radius:999px;text-decoration:none;font-weight:400;transition:transform .25s var(--ease),background .25s}
.btn.primary{background:var(--copper);color:var(--ivory)}.btn.primary:hover{background:var(--copper-soft);transform:translateY(-2px)}
.btn.ghost{border:1px solid rgba(243,240,232,.25);margin-left:.6rem}.btn.ghost:hover{border-color:var(--ivory)}
section{padding:7rem 0}
h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:1.2rem}
.practice{background:linear-gradient(180deg,var(--abyss),var(--deep))}
.grid-2{display:grid;grid-template-columns:1fr 1.05fr;gap:4rem;align-items:center}
.copy p{color:var(--stone);max-width:50ch}
.layer-detail{margin-top:2rem;padding:1.2rem 1.4rem;border-left:2px solid var(--copper);background:rgba(243,240,232,.04);border-radius:0 12px 12px 0;color:var(--ivory)!important;min-height:5.5em}
.layers{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.layers li:nth-child(n){padding-left:calc(var(--i,0)*0px)}
.layer{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:inherit;color:var(--ivory);text-align:left;cursor:pointer;padding:1.15rem 1.4rem;border-radius:14px;border:1px solid rgba(243,240,232,.1);background:rgba(18,59,58,.55);transition:transform .35s var(--ease),background .35s,border-color .35s,opacity .35s}
.layers li:nth-child(1) .layer{background:rgba(18,59,58,.35)}.layers li:nth-child(6) .layer{background:rgba(18,59,58,.95)}
.layer small{color:var(--stone);font-size:.78rem;letter-spacing:.04em}
.layer.bridge{border-color:rgba(212,123,88,.6);background:linear-gradient(90deg,rgba(184,78,43,.28),rgba(18,59,58,.7))}
.layers:hover .layer:not(:hover):not(.active),.layers:has(.active) .layer:not(.active){opacity:.6}
.layer:hover,.layer.active{transform:translateX(10px);border-color:var(--copper-soft);opacity:1!important}
.tools{background:var(--deep)}
.section-lede{color:var(--stone);margin:0 0 3rem;max-width:56ch}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;grid-auto-flow:dense}
.tile{position:relative;border-radius:20px;padding:1.6rem;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(212,123,88,.12),transparent 60%),linear-gradient(160deg,rgba(18,59,58,.9),rgba(7,37,41,.9));border:1px solid rgba(243,240,232,.09);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.tile.wide{grid-column:span 2}.tile.tall{grid-row:span 2}
.tile:hover,.tile:focus-within{transform:translateY(-4px);border-color:rgba(212,123,88,.45);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.tile.open{border-color:var(--copper-soft)}
.tile-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:1rem;width:100%}
.tile-btn:focus-visible{outline:2px solid var(--copper-soft);outline-offset:6px;border-radius:12px}
.tile-head{flex:1}.tile h3{font-size:1.45rem}.tag{display:block;font-size:.85rem;color:var(--copper-soft);margin-top:.2rem}
.tile img{border-radius:14px;flex:none}
.plus{width:28px;height:28px;border-radius:50%;border:1px solid rgba(243,240,232,.25);position:relative;flex:none;transition:transform .35s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ivory);transform:translate(-50%,-50%)}.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.open .plus{transform:rotate(45deg)}
.tile-p{color:var(--stone);margin:1.1rem 0 0}
.more p{margin:.8rem 0 0;padding-top:.8rem;border-top:1px solid rgba(243,240,232,.1);animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}}
.tile.tall .tile-btn{flex-wrap:wrap}.tile.tall img{width:72px;height:72px}
.closing{text-align:center;background:radial-gradient(700px 300px at 50% 100%,rgba(184,78,43,.25),transparent 70%),var(--abyss)}
.closing p{color:var(--stone);max-width:50ch;margin:0 auto 2rem}
.site-footer{padding:2rem 0;border-top:1px solid rgba(243,240,232,.08);font-size:.85rem;color:var(--stone)}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.in{opacity:1;transform:none}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;gap:2.5rem}.bento{grid-template-columns:repeat(2,1fr)}.tile.tall{grid-row:auto}}
@media (max-width:600px){.site-header{padding-top:24px}.site-header .brand img{width:150px}.bento{grid-template-columns:1fr}.tile.wide{grid-column:auto}.btn.ghost{margin:.6rem 0 0}section{padding:4.5rem 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* v5.1: shared Hello cover artwork, faded, behind the whole Tools page */
body{background:linear-gradient(180deg,#174546 0%,#0E3A3B 45%,#03282B 100%) fixed}
.page-art{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.page-art picture,.page-art img{display:block;width:100%;height:100%}
.page-art img{object-fit:cover;object-position:right center;opacity:.55;transform-origin:88% 50%;transform:scale(1.06);animation:artdrift 28s ease-in-out infinite alternate}
.page-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,58,59,.82) 0%,rgba(14,58,59,.55) 40%,rgba(14,58,59,.2) 70%,rgba(14,58,59,.1) 100%)}
@keyframes artdrift{0%{transform:scale(1.06) translate3d(0,0,0)}50%{transform:scale(1.09) translate3d(-1.2%,.8%,0)}100%{transform:scale(1.07) translate3d(-2.2%,-.6%,0)}}
.hero-bg,.ribbon{display:none}
.hero{background:linear-gradient(180deg,transparent 0%,transparent 70%,rgba(3,40,43,.45) 100%)}
.practice{background:linear-gradient(180deg,rgba(3,40,43,.45) 0%,rgba(3,40,43,.72) 100%)}
.tools{background:linear-gradient(180deg,rgba(3,40,43,.72) 0%,rgba(3,40,43,.85) 100%)}
.closing{background:radial-gradient(700px 300px at 50% 100%,rgba(184,78,43,.22),transparent 70%),linear-gradient(180deg,rgba(3,40,43,.85),rgba(3,40,43,.95))}
@media (max-width:760px){.page-art img{object-position:80% 40%;opacity:.4}.page-art::after{background:linear-gradient(180deg,rgba(14,58,59,.7),rgba(3,40,43,.85))}}
@media (prefers-reduced-motion:reduce){.page-art img{animation:none}}