/* Direction C — AI-led. Palette: Cream #EFECE4 · Ocean #0F2E3D · Rust #9A3B14 (on ocean: light rust #E9895E; tint #E4DFD2, muted #4A5C66, muted-on-dark #B8C6CE derived).
   Type: Cormorant Garamond (display) + Outfit (text, labels). Palette and fonts follow Tree's earlier attempt (cream, deep green, orange-clay; Cormorant + Outfit). */
@font-face{font-family:"Outfit";src:url("fonts/Outfit.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-Italic.ttf") format("truetype");font-weight:300 700;font-style:italic;font-display:swap}
:root{--cream:#EFECE4;--forest:#0F2E3D;--rust:#9A3B14;--rust-l:#E9895E;--tint:#E4DFD2;--mute:#4A5C66;--mute-d:#B8C6CE;--line:rgba(15,46,61,.25);
 --serif:"Cormorant Garamond",Georgia,serif;--sans:"Outfit",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--forest);font:400 1.125rem/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--rust);text-underline-offset:.22em}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.dark :focus-visible{outline-color:var(--rust-l)}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.9rem,9vw,6rem)}
h1 em,h2 em{color:var(--rust);font-style:italic}
.dark h1 em,.dark h2 em{color:var(--rust-l)}
h2{font-size:clamp(2.2rem,5.5vw,3.75rem)}
h3{font-size:1.75rem;line-height:1.1}
p{margin:0 0 1em}
.eyebrow{font:500 .8125rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 1.1rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.dark .eyebrow{color:var(--mute-d)}
.ph{display:inline-block;font:700 .75rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--rust);border:1.5px dashed var(--rust);padding:.3em .55em;border-radius:4px;background:var(--tint);vertical-align:middle}
.dark .ph{background:transparent;color:var(--rust-l);border-color:var(--rust-l)}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 1.5rem;border:2px solid var(--forest);border-radius:999px;font:600 1rem/1 var(--sans);text-decoration:none;color:var(--forest);background:transparent;transition:background .15s,color .15s}
.btn:hover{background:var(--forest);color:var(--cream)}
.btn.solid{background:var(--rust);border-color:var(--rust);color:var(--cream)}
.btn.solid:hover{background:var(--forest);border-color:var(--forest)}
.dark .btn{color:var(--cream);border-color:var(--cream)}
.dark .btn:hover{background:var(--cream);color:var(--forest)}
.dark .btn.solid{background:var(--rust-l);border-color:var(--rust-l);color:var(--forest)}
.dark .btn.solid:hover{background:var(--cream);border-color:var(--cream)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
section{padding:clamp(3.5rem,9vw,7rem) 0}
.dark{background:var(--forest);color:var(--cream)}
.dark a:not(.btn){color:var(--rust-l)}
.tint{background:var(--tint)}
.tag-note,figcaption{font:400 .9375rem/1.5 var(--sans);color:var(--mute);margin-top:1rem}
.dark .tag-note{color:var(--mute-d)}

/* header */
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:50;background:#fff;color:#000;padding:.75rem 1rem}
.site-head{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:1rem}
.brand{font:600 1.75rem/1 var(--serif);color:var(--forest);text-decoration:none;display:flex;align-items:center;gap:.7rem;min-height:48px;letter-spacing:.005em}
.brand .mark{width:52px;height:32px;fill:none;stroke:var(--forest);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.brand .mark path:nth-child(2){stroke:var(--rust)}
.brand .mark .eye{fill:var(--forest);stroke:none}
nav{display:flex;align-items:center;gap:.5rem}
.nav-list{display:none;list-style:none;margin:0;padding:0;gap:.25rem}
.nav-list a{display:inline-flex;align-items:center;min-height:48px;padding:0 1rem;color:var(--forest);font:500 1rem/1 var(--sans);text-decoration:none;border-radius:999px}
.nav-list a:hover{color:var(--rust);background:var(--tint)}
.head-cta{display:none;min-height:48px;margin-left:.5rem}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:0 1.1rem;border:2px solid var(--forest);border-radius:999px;font:600 1rem/1 var(--sans);color:var(--forest)}
.menu summary::-webkit-details-marker{display:none}
.burger,.burger::before,.burger::after{display:block;width:18px;height:2px;background:var(--forest);border-radius:2px;position:relative;content:""}
.burger::before{position:absolute;top:-6px}.burger::after{position:absolute;top:6px}
.menu[open] summary{background:var(--forest);color:var(--cream)}
.menu[open] .burger{background:transparent}.menu[open] .burger::before{top:0;transform:rotate(45deg);background:var(--cream)}.menu[open] .burger::after{top:0;transform:rotate(-45deg);background:var(--cream)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:2px solid var(--forest);padding:.5rem 1.25rem 1.5rem;box-shadow:0 18px 30px rgba(15,46,61,.18)}
.menu-panel ul{list-style:none;margin:0;padding:0}
.menu-panel li a{display:flex;align-items:center;min-height:56px;font:500 1.25rem/1 var(--sans);color:var(--forest);text-decoration:none;border-bottom:1px solid var(--line)}
.menu-panel .btn{width:100%;justify-content:center;margin-top:1.25rem}
@media(min-width:900px){.site-head .wrap{min-height:88px}.nav-list{display:flex}.head-cta{display:inline-flex}.menu{display:none}}

/* hero */
.hero{padding-top:clamp(2.5rem,6vw,5rem);overflow:hidden}
.hero .wrap{display:grid;gap:3rem}
.hero h1 .ph{display:block;width:max-content;font-size:.8125rem;margin-bottom:1.1rem}
.hero .lead{max-width:44ch;font-size:1.25rem;color:var(--mute);margin-top:1.5rem}
@media(min-width:1000px){.hero .wrap{grid-template-columns:1.05fr 1fr;align-items:center;gap:4rem}}
.dev{position:relative}
.dev .laptop{width:86%}
.hero-phone{position:absolute;right:0;bottom:-1.5rem;width:28%;min-width:96px}
.hero-devices{padding-bottom:1.5rem}
.laptop{margin:0}
.lap-screen{background:#000;border:8px solid var(--forest);border-bottom-width:10px;border-radius:14px 14px 4px 4px;overflow:hidden;aspect-ratio:16/10}
.lap-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.lap-base{height:12px;margin:0 -4%;background:var(--forest);border-radius:0 0 22px 22px}
.phone{margin:0}
.ph-screen{background:var(--forest);border:7px solid var(--forest);border-radius:26px;overflow:hidden;aspect-ratio:390/844}
.ph-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.dark .lap-screen,.dark .ph-screen{border-color:var(--cream)}
.dark .lap-base{background:var(--cream)}

/* proof strip */
.facts{display:grid;grid-template-columns:1fr;border-top:2px solid var(--forest);border-bottom:2px solid var(--forest);margin:0}
.facts div{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{font:500 .8125rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:.2rem 0 0;font:500 1.625rem/1.15 var(--serif)}
@media(min-width:900px){.facts{grid-template-columns:repeat(4,1fr)}.facts div{border-bottom:0;border-right:1px solid var(--line);padding:1.5rem 1.5rem 1.5rem 1.25rem}.facts div:first-child{padding-left:0}.facts div:last-child{border-right:0}}
.proof{padding:clamp(2rem,5vw,3.5rem) 0}

/* lead case */
.lead-case .wrap{display:grid;gap:3rem;align-items:center}
@media(min-width:1000px){.lead-case .wrap{grid-template-columns:.9fr 1.1fr;gap:4.5rem}}
.pars{margin:2rem 0 0;border-top:2px solid currentColor}
.par{display:grid;gap:.4rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.dark .par{border-color:rgba(239,236,228,.3)}
.par dt{font:600 .8125rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.dark .par dt{color:var(--rust-l)}
.par dd{margin:0}
.par ul{margin:0;padding-left:1.1rem}.par li{margin-bottom:.35rem}
@media(min-width:700px){.par{grid-template-columns:130px 1fr;gap:1.5rem}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0!important;margin:.9rem 0 0!important}
.chips li{border:1.5px solid currentColor;border-radius:999px;padding:.25rem .8rem;font:500 .9375rem var(--sans);margin:0!important}

/* services */
.sec-head{max-width:760px;margin-bottom:3rem}
.grid{display:grid;gap:1.25rem}
@media(min-width:860px){.grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.card{border:1.5px solid rgba(239,236,228,.45);border-radius:18px;padding:2rem}
.card .num{display:block;font:italic 500 3.25rem/1 var(--serif);color:var(--rust-l);margin-bottom:1rem}
.card h3{margin:1rem 0 .75rem}
.card p{color:var(--mute-d);margin:0}

/* work */
.case-grid{display:grid;gap:3rem}
@media(min-width:900px){.case-grid{grid-template-columns:1fr 1fr;gap:3.5rem}}
.slot{display:grid;place-items:center;align-content:center;gap:.75rem;text-align:center;aspect-ratio:16/10;border:2.5px dashed var(--rust);border-radius:18px;padding:2rem;background:var(--tint)}
.slot strong{font:500 1.75rem/1.2 var(--serif)}
.dark .slot{background:transparent;border-color:var(--rust-l)}
.slot.big{aspect-ratio:16/9}
.case-card{display:grid;gap:1.5rem;align-content:start}
.case-card h3{font-size:2.25rem}
.client{font-weight:500;color:var(--mute)}

/* about */
.about .wrap{display:grid;gap:3rem;align-items:start}
.photo-ph{aspect-ratio:4/5;width:100%;max-width:380px;border:2.5px dashed var(--rust);border-radius:46% 54% 50% 50%/40% 40% 60% 60%;display:grid;place-items:center;text-align:center;padding:2rem}
.photo-ph strong{display:block;font:500 1.75rem/1.2 var(--serif);margin-bottom:.5rem}
@media(min-width:900px){.about .wrap{grid-template-columns:.7fr 1.3fr;gap:5rem}}
.about p.big{font-size:1.25rem;max-width:58ch}
.contact .wrap{display:grid;gap:2.5rem;align-items:end}
.contact h2{max-width:14ch}
.contact .box{border:1.5px solid var(--cream);border-radius:18px;padding:1.75rem}
@media(min-width:860px){.contact .wrap{grid-template-columns:1.2fr 1fr}}
footer{padding:2rem 0;background:var(--cream);border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;color:var(--mute);font-size:.9375rem}
footer a{display:inline-flex;align-items:center;min-height:48px}

/* case study page */
.cs-hero{padding-bottom:1rem}
.cs-hero h1{max-width:13ch}
.cs{padding:clamp(3rem,8vw,6rem) 0}
.cs-top{display:grid;gap:1rem;margin-bottom:3rem;max-width:760px}
.cs-pairs{display:grid;gap:3.5rem;margin-bottom:3.5rem}
@media(min-width:1000px){.cs-pairs{grid-template-columns:1fr 1fr;gap:3rem}}
.cs .pars{max-width:900px}
p a:not(.btn),dd a:not(.btn){display:inline-block;padding:.95rem 0;line-height:1.2}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* gentle reveal, off under reduced motion */
.js .rise:not(.in){opacity:0;transform:translateY(14px)}
.rise{transition:opacity .7s ease,transform .7s ease}
.js .rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rise:not(.in){opacity:1;transform:none}}
.case-grid.one{grid-template-columns:1fr!important;max-width:720px}
.slot.big{aspect-ratio:16/6}

/* round 2 */
.hero .wrap{align-items:center}
.ph-wrap{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.9375rem;color:var(--mute);margin:0 0 1rem}
.hero h1{max-width:15ch}
.art-wrap{max-width:640px;width:100%;justify-self:center}
.art{width:100%;height:auto;display:block}
@media(prefers-reduced-motion:no-preference){.ln path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s ease forwards}.ln path:nth-child(n+2){animation-delay:.3s}@keyframes draw{to{stroke-dashoffset:0}}}
.services .card{border-color:var(--line);background:var(--tint)}
.services .card .num{color:var(--rust)}
.services .card p{color:var(--mute)}
.ph-line{margin-top:1rem!important;font-size:.875rem;font-weight:600;color:var(--rust)!important}
.about .facts{margin-top:2.5rem}
.about .facts dd{font-size:1.4rem}
@media(min-width:900px){.about .facts{grid-template-columns:repeat(2,1fr)}.about .facts div{border-right:0!important;padding:1.25rem 0!important;border-bottom:1px solid var(--line)}.about .facts div:last-child{border-bottom:0}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.steps li{border-top:2px solid var(--forest);padding-top:1.25rem}
.steps .num{font:italic 500 2.75rem/1 var(--serif);color:var(--rust)}
.steps h3{margin:.5rem 0}.steps p{color:var(--mute)}
.work .sec-head{margin-bottom:2.5rem}
.case-two{display:grid;gap:2.5rem}
@media(min-width:860px){.case-two{grid-template-columns:1fr 1fr;gap:2.5rem}}
.case-two .case-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;border:1.5px solid rgba(239,236,228,.45);border-radius:18px;padding:1.25rem 1.25rem 1.75rem}
.case-two .shot{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;margin-bottom:1.25rem;background:#000}
.case-two .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.case-two h3{margin-bottom:.6rem}.case-two p{color:var(--mute-d)}
.case-two .eyebrow{margin-bottom:.6rem}
.case-two .btn{margin-top:auto}
.sr{position:absolute;left:-999px}
.cs-hero{padding-top:clamp(2.5rem,6vw,4.5rem)}
.cs-hero .lead{max-width:60ch;font-size:1.25rem;color:var(--mute);margin-top:1rem}
.cs-hero h1{max-width:18ch}
.back{display:inline-flex;align-items:center;min-height:48px;font-weight:600;letter-spacing:.06em}
.src{display:block;margin-top:.4rem;font-size:.9375rem;color:var(--mute)}
.live{margin-top:2rem}
.live a{display:inline-block;padding:.95rem 0}
.footer-links,footer .fl{display:flex;gap:1.5rem;flex-wrap:wrap}
.contact{background:var(--forest);color:var(--cream)}
.contact .eyebrow{color:var(--mute-d)}
.contact h2 em{color:var(--rust-l)}
.contact .ph{background:transparent;color:var(--rust-l);border-color:var(--rust-l)}
.contact .btn.solid{background:var(--rust-l);border-color:var(--rust-l);color:var(--forest);margin-top:1rem}
.contact .btn.solid:hover{background:var(--cream);border-color:var(--cream)}

h1{font-size:clamp(2.6rem,7vw,4.75rem)}
.hero h1{max-width:16ch}

/* AI page */
.ai-hero h1{max-width:16ch}
.services.dark .card{background:transparent;border-color:rgba(239,236,228,.45)}
.services.dark .card .num{color:var(--rust-l)}
.services.dark .card p,.services.dark .card li{color:var(--mute-d)}
.services.dark .card ul{padding-left:1.1rem;margin:1rem 0 0}
.services.dark .card li{margin-bottom:.4rem}
.services.dark .ph-line{color:var(--rust-l)!important}
.dark .sec-head .tag-note{color:var(--mute-d)}
.demo-card{background:var(--cream);border:1.5px solid var(--line);border-radius:18px;padding:clamp(1.25rem,4vw,3rem)}
.chips-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.75rem}
.chip{min-height:48px;padding:0 1.2rem;border:2px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);font:600 1rem/1 var(--sans);cursor:pointer}
.chip:hover{background:var(--tint)}
.chip[aria-pressed=true]{background:var(--forest);color:var(--cream)}
.brief-out{min-height:6rem}
.brief-out .pars{margin-top:1rem}
/* 2026-10-20: tighter hero-to-services gap, systems section */
.hero{padding-bottom:clamp(2rem,4vw,3.5rem)}
.services{padding-top:clamp(2rem,4vw,3.5rem)}
.hero h1{max-width:12ch}
.systems .sec-head .big{margin-top:1.25rem;color:var(--mute)}
.sys-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
@media(min-width:700px){.sys-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sys-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.sys-card{border:1.5px solid var(--line);border-radius:18px;background:var(--tint);padding:1.75rem;height:100%;box-sizing:border-box}
.sys-card h3{font-size:1.5rem;line-height:1.15;margin:0 0 .75rem}
.sys-card p{margin:0;color:var(--mute)}

/* 2026-10-20 ocean trial: the cream page is the shore; dark bands are the sea.
   A drawn wave line (same rhythm and stroke as the hero waves under the whale) sits on the cream,
   the sea's own wavy edge below it, then a gentle depth gradient #164457 -> #0F2E3D.
   Faint surface lines near the top drift slowly; static under prefers-reduced-motion. */
:root{--sea-top:#164457;--sea-deep:#0F2E3D;
 --wave-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='46'%3E%3Cpath fill='%23164457' d='M0 34c30 -12 60 -12 90 0c30 9 60 9 90 0c30 -10 60 -10 90 0c30 12 60 12 90 0c30 -14 60 -14 90 0c30 10 60 10 90 0c30 -9 60 -9 90 0c30 12 60 12 90 0V46H0Z'/%3E%3C/svg%3E");
 --wave-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='46'%3E%3Cpath fill='none' stroke='%230F2E3D' stroke-opacity='.55' stroke-width='2.5' stroke-linecap='round' d='M0 12c23 -10 47 -10 70 0c23 8 47 8 70 0c23 -11 47 -11 70 0c23 9 47 9 70 0c23 -10 47 -10 70 0c23 8 47 8 70 0c23 -9 47 -9 70 0c23 10 47 10 70 0'/%3E%3C/svg%3E");
 --wave-inner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='120'%3E%3Cg fill='none' stroke='%23EFECE4' stroke-width='2' stroke-linecap='round'%3E%3Cpath stroke-opacity='.075' d='M0 40c27 -10 53 -10 80 0c27 8 53 8 80 0c27 -10 53 -10 80 0c27 8 53 8 80 0c27 -10 53 -10 80 0c27 8 53 8 80 0c27 -10 53 -10 80 0c27 8 53 8 80 0'/%3E%3Cpath stroke-opacity='.045' d='M0 84c27 -8 53 -8 80 0c27 10 53 10 80 0c27 -8 53 -8 80 0c27 10 53 10 80 0c27 -8 53 -8 80 0c27 10 53 10 80 0c27 -8 53 -8 80 0c27 10 53 10 80 0'/%3E%3C/g%3E%3C/svg%3E")}
.ocean{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--sea-top) 0,#123848 9rem,var(--sea-deep) 22rem,var(--sea-deep) 100%);color:var(--cream)}
.ocean::before{content:"";position:absolute;left:0;right:0;top:-45px;height:46px;pointer-events:none;
 background:var(--wave-line) 0 0/560px 46px repeat-x,var(--wave-fill) 0 0/720px 46px repeat-x}
.ocean::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:-1;
 background:var(--wave-inner) 0 0/640px 120px repeat-x}
.ocean.flush{background:var(--sea-deep)}
.ocean.flush::before,.ocean.flush::after{content:none}
@media(prefers-reduced-motion:no-preference){
 .ocean::before{animation:swell-line 70s linear infinite}
 .ocean::after{animation:swell-in 110s linear infinite}
 @keyframes swell-line{to{background-position:560px 0,0 0}}
 @keyframes swell-in{to{background-position:-640px 0}}
}
footer.ocean{border-top:0;padding:2.5rem 0 2rem}
footer.ocean.flush{border-top:1px solid rgba(239,236,228,.16)}
footer.ocean .wrap{color:var(--mute-d)}
footer.ocean a{color:var(--cream)}
footer.ocean a:hover{color:var(--rust-l)}
footer.ocean :focus-visible{outline-color:var(--rust-l)}
.case-two .shot picture{display:block;width:100%;height:100%}
.cs-hero + .ocean{margin-top:3rem}
footer.ocean::after{content:none}
footer.ocean .fl{row-gap:0}

/* ===== 2026-10-20 sea trial B (sea-green teal) =====
   Dark bands are a picture-book sea: an inline SVG per band stacks 4 wave layers
   (tiles defined once per page as <pattern>s), densest at the bottom, with two faint
   swell lines above and a calm field at the top where the heading sits.
   Text panels are solid (#0B4A4A) so text never sits on a wave line.
   Drift is CSS transform only and is off under prefers-reduced-motion. */
:root{--calm:#0E5A5A;--panel:#0B4A4A;--hi:#8FD3C8;--acc-sea:#F7BA9E;--mute-sea:#BFD0D0;--front:#0B4D4D;
 --wave-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='46'%3E%3Cpath fill='%230E5A5A' d='M0 34c30 -12 60 -12 90 0c30 9 60 9 90 0c30 -10 60 -10 90 0c30 12 60 12 90 0c30 -14 60 -14 90 0c30 10 60 10 90 0c30 -9 60 -9 90 0c30 12 60 12 90 0V46H0Z'/%3E%3C/svg%3E");--wave-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='46'%3E%3Cpath fill='none' stroke='%230E5A5A' stroke-opacity='.6' stroke-width='2.5' stroke-linecap='round' d='M0 12c23 -10 47 -10 70 0c23 8 47 8 70 0c23 -11 47 -11 70 0c23 9 47 9 70 0c23 -10 47 -10 70 0c23 8 47 8 70 0c23 -9 47 -9 70 0c23 10 47 10 70 0'/%3E%3C/svg%3E")}
#s0g .g1{stop-color:#177272}#s0g .g2{stop-color:#116464}#s1g .g1{stop-color:#1F8580}#s1g .g2{stop-color:#167470}
#s2g .g1{stop-color:#2E9D95}#s2g .g2{stop-color:#1F8A84}#s3g .g1{stop-color:#106161}#s3g .g2{stop-color:#0B4D4D}
.sea-defs{position:absolute;width:0;height:0;overflow:hidden}
.sea-defs .ink,.sea .ink{stroke:var(--hi)}
.ocean{background:var(--calm);--sh:520px}
.ocean::after{content:none}
.ocean > .wrap{position:relative}
.sea{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden;display:block}
.sea .lay{transform:translateY(calc(var(--sh) * var(--k) * -1))}
.sea .f2{--k:1.62;opacity:.22}.sea .f1{--k:1.3;opacity:.4}
.sea .l0{--k:1}.sea .l1{--k:.68}.sea .l2{--k:.41}.sea .l3{--k:.18}
.sea .lt{--k:.34}
.contact .sea .f1,.contact .sea .f2{display:none}
.tail .tf{fill:#167470}
.tail .ink{stroke:var(--hi)}
@media(prefers-reduced-motion:no-preference){
 .sea .dr{animation:drift 140s linear infinite}
 .sea .df2{animation-duration:220s;animation-direction:reverse;--w:540px}.sea .df1{animation-duration:180s;--w:540px}
 .sea .dl0{--w:540px;animation-duration:170s;animation-direction:reverse}
 .sea .dl1{--w:660px;animation-duration:130s}
 .sea .dl2{--w:760px;animation-duration:110s;animation-direction:reverse}
 .sea .dl3{--w:880px;animation-duration:90s}
 @keyframes drift{to{transform:translateX(var(--w))}}
}
/* bands: room below the content so the sea reads as a picture, not a strip */
.work.ocean{--sh:460px;padding-bottom:calc(var(--sh) * .7)}
.contact.ocean{--sh:380px;padding-bottom:calc(var(--sh) * .98)}
.services.ocean{--sh:460px;padding-bottom:calc(var(--sh) * .7)}
footer.ocean:not(.flush){--sh:150px;padding:2.25rem 0 calc(var(--sh) * 1.02)}
footer.ocean:not(.flush) .sea .f1,footer.ocean:not(.flush) .sea .f2{display:none}
footer.ocean.flush{background:var(--front);border-top:0;padding-top:.5rem}
@media(max-width:700px){.work.ocean,.services.ocean{--sh:380px;padding-bottom:calc(var(--sh) * .92)}.contact.ocean{--sh:330px}}
/* calm panels behind text (solid, so contrast is fixed) */
.ocean .case-two .case-card,.services.ocean .card,.contact .box{background:var(--panel);border-color:rgba(239,236,228,.4)}
.ocean .case-two p,.services.ocean .card p,.services.ocean .card li,.ocean .eyebrow,footer.ocean .wrap{color:var(--mute-sea)}
.contact .ph,.ocean .ph,.services.ocean .ph-line,.ocean a:not(.btn){color:var(--acc-sea)!important;border-color:var(--acc-sea)}
footer.ocean a:not(.btn){color:var(--cream)!important}
/* true colour (Tree, 20 Oct 2026): client screenshots show exactly as captured.
   No filter, blend, overlay, tint or fade on the images or their frames; frames are neutral cream/white. */
.case-two .shot,.case-two .shot picture,.case-two .shot img,.lap-screen,.lap-screen img,.ph-screen,.ph-screen img,.lap-base{filter:none!important;mix-blend-mode:normal!important;opacity:1!important;background-image:none!important;box-shadow:none}
.case-two .shot,.lap-screen,.ph-screen{position:relative;isolation:isolate;z-index:1}
.case-two .shot::before,.case-two .shot::after,.lap-screen::before,.lap-screen::after,.ph-screen::before,.ph-screen::after{content:none!important}
.case-two .shot,.ocean .case-two a.shot{background-color:#FFFFFF;border:3px solid var(--cream)!important;color:inherit!important}
.lap-screen,.ph-screen{background-color:#FFFFFF;border-color:#FFFFFF;outline:1px solid #D6D2C8}
.lap-base{background:#FFFFFF;outline:1px solid #D6D2C8}
.dark .lap-screen,.dark .ph-screen,.ocean .lap-screen,.ocean .ph-screen{border-color:var(--cream);outline:0}
.dark .lap-base,.ocean .lap-base{background:var(--cream);outline:0}
/* reveal on cards with screenshots moves only, never fades */
.js .case-card.rise:not(.in),.js .hero-devices.rise:not(.in){opacity:1}
footer.ocean a:not(.btn):hover{color:var(--acc-sea)!important}
.ocean :focus-visible{outline-color:var(--acc-sea)}

/* ===== 2026-10-20 work/contact fix (Tree): full layered sea + tail ONLY on Contact and its footer join.
   Work = pale sea-tint band with one drawn wave line at its top edge; other ocean bands (AI offer, sub-page
   footers) = calm solid teal with a single filled wave edge, no layered waves. Page alternates light/dark.
   2026-10-21 (Tree): Work band has no wave line at its top; background = About's darker cream var(--tint) #E4DFD2
   (was #E3EEEA, briefly plain cream). Contact has no top wave edge.
   2026-10-21b (Tree): Contact sea drifts ~27% faster (was 170/130/110/90s); still off under reduced motion. */
.contact.ocean::before{content:none}
@media(prefers-reduced-motion:no-preference){
 .contact .sea .dl0{animation-duration:124s}.contact .sea .dl1{animation-duration:95s}
 .contact .sea .dl2{animation-duration:80s}.contact .sea .dl3{animation-duration:66s}
}
.work.paleband{background:var(--tint);color:var(--forest);position:relative;padding-top:calc(clamp(4rem,8vw,7rem) + 20px)}
.work.paleband .sec-head .eyebrow{color:#3E5560}
.ocean.calmband{background:var(--calm);position:relative;padding-top:clamp(4rem,8vw,7rem)}
footer.ocean.calmband{padding-top:2.25rem}
.ocean.calmband::before{content:"";position:absolute;left:0;right:0;top:-45px;height:46px;background:var(--wave-fill) repeat-x 0 0;background-size:720px 46px;pointer-events:none}
/* work cards in each client's own palette; equal shapes */
.case-two .case-card.c-jane{background:#FBF8F1;border:1.5px solid #2A4535;color:#2A4535}
.case-two .c-jane h3,.case-two .c-jane p,.case-two .c-jane .eyebrow{color:#2A4535}
.case-two .c-jane .shot{border:3px solid #F7F2E7!important;background:#F7F2E7}
.case-two .c-jane .btn{color:#2A4535;border-color:#2A4535;background:#F7F2E7}
.case-two .c-jane .btn:hover{background:#2A4535;color:#FBF8F1}
.case-two .c-jane :focus-visible{outline:3px solid #2A4535;outline-offset:3px}
.case-two .case-card.c-ttcf{background:#111;border:1.5px solid #111;color:#fff}
.case-two .c-ttcf h3,.case-two .c-ttcf p,.case-two .c-ttcf .eyebrow{color:#fff}
.case-two .c-ttcf .shot{border:3px solid #fff!important;background:#000}
.case-two .c-ttcf .btn{color:#fff;border-color:#fff;background:#111}
.case-two .c-ttcf .btn:hover{background:#fff;color:#111}
.case-two .c-ttcf :focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #111}

/* ===== 2026-10-21 batch B (Tree): About illustration, contact form, Whales page ===== */
/* About: ink illustration (fixed ratio, no layout shift) */
.about-art{margin:0;width:100%;max-width:420px}
.about-art img{width:100%;height:auto;aspect-ratio:800/622;display:block}
/* Contact card: email + short form (on the solid teal panel) */
.contact .box-lead{margin:0 0 .5rem}
.contact .box-place{margin:1.5rem 0 0;color:var(--mute-sea)}
.cform .field{margin-top:1rem}
.cform label{display:block;font:500 1rem/1.4 var(--sans);color:var(--cream);margin-bottom:.4rem}
.cform input,.cform textarea{display:block;width:100%;min-height:48px;font:400 1.0625rem/1.45 var(--sans);color:var(--forest);background:var(--cream);border:2px solid var(--cream);border-radius:10px;padding:.7rem .85rem;margin:0}
.cform textarea{min-height:8.5rem;resize:vertical}
.cform input:focus-visible,.cform textarea:focus-visible{outline:3px solid var(--acc-sea);outline-offset:2px}
.cform [aria-invalid="true"]{border-color:var(--acc-sea);box-shadow:0 0 0 1px var(--acc-sea)}
.cform .err{margin:.4rem 0 0;font-size:.9375rem;font-weight:500;color:var(--acc-sea)}
.cform .err:empty{display:none}
.cform button{cursor:pointer;margin-top:1.25rem}
.cform button[disabled]{opacity:.75;cursor:progress}
.cform .form-status{margin:1rem 0 0}
.cform .form-status:empty{display:none}
.cform .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact .box{position:relative}
/* Whales page */
.wh-hero .wrap{display:grid;gap:1.5rem;align-items:center}
@media(min-width:860px){.wh-hero .wrap{grid-template-columns:1.3fr 1fr}}
.wh-art{width:100%;max-width:340px;height:auto;display:block;margin-inline:auto}
@media(prefers-reduced-motion:no-preference){.wh-tail{animation:wh-bob 6s ease-in-out infinite;transform-origin:160px 170px}
 @keyframes wh-bob{50%{transform:translateY(-6px) rotate(-1.5deg)}}}
.wh-story .wrap{display:grid;gap:1.5rem}
@media(min-width:860px){.wh-story .wrap{grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}}
.wh-story-text p{font-size:1.1875rem;max-width:58ch}
.wh-story-text p:last-child{margin-bottom:0}
.wh-facts.ocean{padding-bottom:clamp(3.5rem,9vw,7rem)}
.wh-facts .wh-note{color:var(--mute-sea);font-size:.9375rem;margin:1rem 0 0}
.wh-grid{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.25rem}
@media(min-width:640px){.wh-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.wh-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.wcard{background:var(--panel);border:1.5px solid rgba(239,236,228,.4);border-radius:18px;padding:1.75rem}
.wcard .wicon{width:56px;height:56px;color:var(--hi);display:block;margin-bottom:1rem}
.wcard h3{margin:0 0 .6rem;color:var(--cream)}
.wcard p{margin:0;color:var(--mute-sea);font-size:1.0625rem}
.wh-cta-card{max-width:760px}
.wh-cta-card p{color:var(--mute)}
.wh-cta-card h2{max-width:24ch}
.wh-cta-card h2 + p{margin-top:1.25rem}
.wh-sources{padding:clamp(2.5rem,6vw,4rem) 0}
.wh-sources h2{font-size:clamp(1.75rem,3.5vw,2.25rem)}
.wh-sources p{color:var(--mute);margin:1rem 0 .5rem;font-size:1rem}
.wh-sources ol{margin:0;padding-left:1.4rem;font-size:1rem;color:var(--mute)}
.wh-sources li a{display:block;padding:.85rem 0;line-height:1.3}
/* ===== 2026-10-21 update C (Tree) ===== */
@media(min-width:900px){.about-art{align-self:center}}
/* contact: compact, heading top-aligned with the card; bottom padding (room for the animated sea + tail) unchanged */
.contact.ocean{padding-top:clamp(2.5rem,5vw,4rem)}
.contact .wrap{align-items:start}
.contact .box{padding:1.5rem}
.cform .field{margin-top:.75rem}
.cform label{margin-bottom:.3rem}
.cform textarea{min-height:6.75rem}
.cform button{margin-top:1rem}
.contact .box-place{margin-top:1rem}
/* whales page: straight top edges on the teal facts band and footer */
.wh-facts.ocean.calmband::before,footer.ocean.calmband.wh-foot::before{content:none}
/* ===== 2026-10-21 update D (Tree): whales page on the two creams; real hero drawing ===== */
.wh-art{max-width:400px}
@media(prefers-reduced-motion:no-preference){.wh-art .wh-bob{animation:wh-bob2 6s ease-in-out infinite}
 @keyframes wh-bob2{50%{transform:translateY(-8px)}}}
.wh-hero .wh-sub{color:var(--mute);font-size:1rem;margin-top:1rem;max-width:60ch}
.wh-hero .lead{max-width:56ch}
.wh-facts.tint{padding:clamp(3.5rem,9vw,7rem) 0}
.wh-facts .wh-note{color:var(--mute)}
.wh-facts .wcard{background:var(--cream);border-color:var(--line)}
.wh-facts .wcard .wicon{color:#167470}
.wh-facts .wcard h3{color:var(--forest)}
.wh-facts .wcard p{color:var(--mute)}

/* ===== 2026-10-21 update D (Tree): YogaWithJane case study, light true colours, two-cream rhythm ===== */
.jane-hero{padding-bottom:clamp(3rem,7vw,5.5rem)}
.jane-hero .wrap{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1000px){.jane-hero .wrap{grid-template-columns:.8fr 1.2fr;gap:3.5rem}}
.jane-hero h1{max-width:none;font-size:clamp(2.9rem,7vw,5.25rem)}
.jane-hero .client{margin-top:.75rem}
.jane-hero .eyebrow{margin-bottom:.5rem}
.jane-built,.jane-screens,.jane-next{padding:clamp(3.5rem,8vw,6rem) 0}
.jane-grid{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.25rem}
@media(min-width:640px){.jane-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.jane-grid{grid-template-columns:repeat(5,1fr)}}
.jane-card{background:var(--cream);border:1.5px solid var(--line);border-radius:18px;padding:1.5rem}
.jane-card .num{display:block;font:italic 500 2.5rem/1 var(--serif);color:var(--rust)}
.jane-card h3{margin:.9rem 0 .5rem;font-size:1.6rem}
.jane-card p{margin:0;color:var(--mute);font-size:1rem}
.jane-row{display:grid;gap:2.5rem;align-items:center;margin-top:3rem}
@media(min-width:1000px){.jane-row{grid-template-columns:1.5fr 1fr;gap:4rem}.jane-row.flip{grid-template-columns:1fr 1.5fr}.jane-row.flip .hero-devices{order:2}}
.jane-row-text h3{font-size:clamp(1.9rem,3.5vw,2.5rem);margin-bottom:.75rem}
.jane-row-text p{color:var(--mute);max-width:44ch;margin:0}
.jane-cap{margin-top:2.5rem}
.jane-next .live{margin-top:0}

/* ===== 2026-10-21 update E (Tree): footers straight + compact; ai.html showpiece; frame page status ===== */
footer.ocean.calmband::before{content:none}
footer.ocean.calmband{padding:2.25rem 0}
.status{display:inline-flex;align-items:center;font:600 .75rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--forest);background:var(--tint);border:1.5px solid var(--line);border-radius:999px;padding:.45em .8em}
.live-note{color:var(--mute);font-size:.9375rem;margin-top:1.5rem}
/* ai.html */
.ai-top{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem)}
.ai-top .wrap{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.ai-top .wrap{grid-template-columns:1.3fr .7fr;gap:3rem}}
.ai-top h1{max-width:12ch}
.ai-top .lead{font-size:1.25rem;color:var(--mute);max-width:44ch;margin:1.25rem 0 0}
.ai-top-art{width:100%;max-width:320px;height:auto;justify-self:center;display:block}
@media(max-width:899px){.ai-top-art{max-width:240px}}
@media(prefers-reduced-motion:no-preference){.ai-draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s ease forwards}.ai-d2 path{animation-delay:.6s}}
.brief-sec,.ai-offers,.ai-how,.ai-real,.ai-close{padding:clamp(3rem,7vw,5.5rem) 0}
.brief-sec .wrap{display:grid;gap:2rem;align-items:start}
@media(min-width:960px){.brief-sec .wrap{grid-template-columns:.75fr 1.25fr;gap:3.5rem}.brief-sec .sec-head{position:sticky;top:7rem}}
.brief-intro{color:var(--mute);margin:1rem 0 0;max-width:34ch}
.bw{background:#FBFAF6;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 22px 44px -28px rgba(15,46,61,.5)}
.bw-bar{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;background:var(--forest);color:var(--cream)}
.bw-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--cream);display:grid;place-items:center}
.bw-av svg{width:28px;height:auto;fill:none;stroke:var(--forest);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bw-av svg path:last-child{stroke:var(--rust)}
.bw-title{font:600 1rem/1.25 var(--sans)}
.bw-sub{display:block;font-weight:400;font-size:.8125rem;color:#BFD0D0}
.bw-label{margin-left:auto;flex:none;font:600 .6875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--forest);background:#F7BA9E;border-radius:999px;padding:.45em .75em}
.bw-log{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;min-height:340px}
.bw-msg{max-width:90%;margin:0;padding:.8rem 1rem;border-radius:16px;font-size:1rem;line-height:1.5}
.bw-bot{background:var(--tint);color:var(--forest);border-bottom-left-radius:4px;align-self:flex-start}
.bw-you{background:var(--forest);color:var(--cream);border-bottom-right-radius:4px;align-self:flex-end;font-weight:500}
.bw-typing{display:flex;gap:.35rem;padding:1rem 1.1rem}
.bw-typing span{width:8px;height:8px;border-radius:50%;background:var(--mute)}
@media(prefers-reduced-motion:no-preference){.bw-typing span{animation:bw-dot 1s ease-in-out infinite}.bw-typing span:nth-child(2){animation-delay:.15s}.bw-typing span:nth-child(3){animation-delay:.3s}
 @keyframes bw-dot{50%{transform:translateY(-4px);opacity:.5}}}
.bw-brief{background:#fff;border:1.5px solid var(--line);max-width:100%;width:100%;padding:1.1rem 1.25rem}
.bw-brief-h{font:500 1.5rem/1.1 var(--serif);margin:0 0 .5rem}
.bw-brief dl{margin:0}
.bw-brief dl div{padding:.6rem 0;border-top:1px solid var(--line)}
.bw-brief dt{font:600 .75rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--rust)}
.bw-brief dd{margin:.2rem 0 0;color:var(--forest)}
.bw-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem 1.1rem;border-top:1.5px solid var(--line);background:var(--cream)}
.bw-chips button{min-height:48px;padding:0 1.05rem;border:2px solid var(--forest);border-radius:999px;background:#FBFAF6;color:var(--forest);font:600 .9375rem/1 var(--sans);cursor:pointer;transition:background .15s,color .15s}
.bw-chips button:hover{background:var(--tint)}
.bw-chips button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}
.bw-nojs{padding:0 1.25rem 1rem;margin:0;color:var(--mute)}
.bw-bar+.bw-chips{border-top:0;border-bottom:1.5px solid var(--line)}
.bw-brief .eyebrow{margin:0 0 .4rem}
.bw-brief .tag-note{margin:.75rem 0 0;font-size:.875rem;color:var(--mute)}
.ai-offers .card{background:var(--tint);border-color:var(--line)}
.ai-offers .card .num{color:var(--rust)}
.ai-offers .card p,.ai-offers .card li{color:var(--mute)}
.ai-offers .card ul{padding-left:1.1rem;margin:1rem 0 0}
.ai-offers .card li{margin-bottom:.4rem}
.ai-offers .grid{margin-top:2.5rem}
.ai-steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:2rem;position:relative}
.ai-steps li{position:relative;padding-left:4.75rem;min-height:56px}
.ai-steps .dot{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;border:2px solid var(--forest);background:var(--tint);display:grid;place-items:center;font:italic 500 1.9rem/1 var(--serif);color:var(--rust);z-index:1}
.ai-steps h3{margin:.6rem 0 .5rem}
.ai-steps p{color:var(--mute);margin:0;max-width:34ch}
.ai-steps::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--forest);opacity:.4;transform-origin:top}
@media(min-width:860px){.ai-steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}.ai-steps li{padding:4.5rem 0 0}.ai-steps h3{margin-top:0}
 .ai-steps::before{left:28px;right:calc((100% - 5rem) / 3 - 28px);top:27px;bottom:auto;width:auto;height:2px;transform-origin:left}}
@media(prefers-reduced-motion:no-preference){.ai-steps::before{transition:transform 1.4s ease .3s}.js .ai-steps.rise:not(.in)::before{transform:scaleY(0)}
 @media(min-width:860px){.js .ai-steps.rise:not(.in)::before{transform:scaleX(0)}}}
.ai-real .wrap{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.ai-real .wrap{grid-template-columns:1.25fr .75fr;gap:4rem}}
.ai-real-text p{color:var(--mute);max-width:42ch}
.ai-real-text h2{margin-bottom:1rem}
.ai-close .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}
.ai-close p{color:var(--mute);margin:1rem 0 0;max-width:48ch}
.ai-close .actions{margin-top:0}

/* ===== 2026-10-23 (draft, pending Tree): Curious Frame case study enquiry section (#contact) =====
   Plain cream band under the tinted case-study band; no waves. Reuses .box / .cform / .btn.solid from
   the index contact form, re-coloured here for a light background. Messages shown by js/enquiry.js. */
.enquiry{background:var(--cream);color:var(--forest);padding:clamp(3.5rem,8vw,6rem) 0}
.enquiry .wrap{display:grid;gap:2rem;align-items:start}
@media(min-width:860px){.enquiry .wrap{grid-template-columns:1.2fr 1fr;gap:2.5rem}}
.enquiry h2{max-width:14ch}
.enquiry .enq-lead{color:var(--mute);max-width:44ch;margin:1rem 0 0}
.enquiry .box{position:relative;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;padding:1.5rem;min-width:0}
.enquiry .cform label{color:var(--forest)}
.enquiry .cform input,.enquiry .cform textarea{background:#FFFFFF;border-color:var(--mute);color:var(--forest)}
.enquiry .cform input:focus-visible,.enquiry .cform textarea:focus-visible{outline:3px solid var(--rust);outline-offset:2px;border-color:var(--forest)}
.enquiry .cform button{margin-top:1rem}
.enquiry .cf-turnstile{margin-top:1rem}
.enquiry .cf-turnstile:empty{margin-top:0}
.enq-msg{margin:0 0 1rem;padding:.85rem 1rem;border-radius:10px;border-left:4px solid;font-weight:500}
.enq-msg[hidden]{display:none}
.enq-msg.ok{color:var(--calm);border-color:var(--calm);background:rgba(14,90,90,.08)}
.enq-msg.bad{color:var(--rust);border-color:var(--rust);background:rgba(154,59,20,.07)}
/* 2026-10-23: enquiry "Sending…" state (set by js/enquiry.js) */
.enquiry .btn.is-sending{opacity:.85;cursor:progress;display:inline-flex;align-items:center;gap:.6rem}
.enquiry .btn .spin{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:enq-spin .8s linear infinite}
@keyframes enq-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.enquiry .btn .spin{animation:none;border-right-color:currentColor;opacity:.6}}
/* 2026-10-23: Turnstile (interaction-only). Hidden widget takes no space; space above it only when Cloudflare shows it. */
.cform .cf-turnstile{margin:0;padding:0;line-height:0}
.cform .cf-turnstile iframe{margin-top:1rem}