:root{
  color-scheme: light;
  --navy:#0C2340; --navy-deep:#081A31; --navy-line:rgba(255,255,255,.14);
  --teal:#17A9A3; --teal-ink:#0F6F6B; --teal-bright:#3FD0C9;
  --gold:#DAA520; --gold-ink:#8A6410;
  --paper:#F7F5F1; --stone:#E6E4DF; --ink:#1A1A1A; --ink-soft:#4A4F57;
  --on-navy:#FFFFFF; --on-navy-soft:rgba(255,255,255,.72);
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Libre Franklin", Arial, Helvetica, sans-serif;
  --wrap:1200px; --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:italic}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.tagline{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px}

/* ---------- Header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:#0C2340;border-bottom:1px solid var(--navy-line);transition:background .35s,border-color .35s}
body.over-pond .site-head{background:transparent;border-bottom-color:transparent}
body.over-pond .site-head .nav{background:transparent}
@media (max-width:900px){body.over-pond .site-head .nav.open{background:#0C2340}}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{color:var(--on-navy-soft);text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding-block:6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-color:var(--gold)}
.nav .ext::after{content:" ↗";color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.04em;text-decoration:none;padding:14px 22px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:#E8B632}
.btn-line{border-color:rgba(255,255,255,.4);color:#fff}
.btn-line:hover{border-color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.head-cta{padding:11px 18px;font-size:13px}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-radius:2px}
@media (max-width:900px){
  .nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:4px;background:var(--navy);padding:16px var(--gut) 24px;border-bottom:1px solid var(--navy-line)}
  .nav.open{display:flex}
  .nav a{font-size:14px;padding-block:10px}
  .menu-btn{display:block}
  .head-cta{display:none}
  .brand img{height:28px}
}

/* ---------- Hero / pond ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;margin-top:-77px;padding-top:77px}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;cursor:crosshair}
.hero .wrap{pointer-events:none}
.hero-inner{padding-block:clamp(72px,11vw,150px) clamp(64px,9vw,120px);max-width:760px;pointer-events:none}
.hero-inner a,.hero-inner button{pointer-events:auto}
.hero .tagline{color:var(--on-navy-soft);margin-bottom:28px;display:flex;flex-wrap:wrap;gap:.35em .9em}
.hero .tagline b{font-weight:400;color:var(--gold)}
.hero h1{font-size:clamp(44px,7.4vw,96px)}
.hero h1 em{color:var(--teal-bright)}
.hero .lede{margin-top:28px;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--on-navy-soft);max-width:34em;font-weight:300}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.pond-hint{position:absolute;right:var(--gut);bottom:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);pointer-events:none}
@media (max-width:700px){.pond-hint{display:none}}
/* Isla on the pond, home page hero. She stands to the right of the headline with her own
   slow ripples, sized to the space the text leaves; under 1040px she sits small below
   the two buttons. */
.hero .wrap{position:relative}
.isla-hero{position:absolute;z-index:1;right:var(--gut);bottom:clamp(64px,9vw,120px);width:clamp(170px,calc(100% - 2*var(--gut) - 788px),330px);pointer-events:none}
.isla-hero picture,.isla-hero img{display:block;width:100%;height:auto;position:relative}
.isla-rings{position:absolute;left:50%;bottom:-4%;width:150%;transform:translateX(-50%);overflow:visible;pointer-events:none}
.isla-rings .rg{fill:none;stroke:#3FD0C9;stroke-width:1.2;transform-origin:150px 45px;animation:isla-ring 6s linear infinite;opacity:0}
.isla-rings .r2{stroke:#DAA520;animation-delay:2s}
.isla-rings .r3{animation-delay:4s}
@keyframes isla-ring{0%{transform:scale(.3);opacity:0}12%{opacity:.75}70%{opacity:.3}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.isla-rings .rg{opacity:.45;transform:scale(.9)}.isla-rings .r2{transform:scale(.6)}.isla-rings .r3{transform:scale(1.2)}}
@media (max-width:1040px){.isla-hero{position:relative;right:auto;bottom:auto;width:150px;margin:-36px 0 44px auto}}

/* ---------- Section scaffolding ---------- */
section{padding-block:clamp(72px,10vw,128px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head .eyebrow{color:var(--teal-ink);margin-bottom:18px;display:block}
.sec-head h2{font-size:clamp(36px,5vw,64px)}
.sec-head p{color:var(--ink-soft);max-width:30em}
@media (max-width:800px){.sec-head{grid-template-columns:1fr}}

/* ---------- Divisions ---------- */
.divisions{background:var(--navy);color:#fff;padding-block:0}
.div-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.div-col{position:relative;padding:clamp(40px,4vw,56px) clamp(24px,3vw,40px) clamp(40px,4vw,56px);border-left:1px solid var(--navy-line);display:flex;flex-direction:column;gap:22px;overflow:hidden;text-decoration:none}
.div-col:first-child{border-left:0}
.div-col::before{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;border:1px solid rgba(63,208,201,.0);box-shadow:0 0 0 40px rgba(63,208,201,0),0 0 0 80px rgba(63,208,201,0);transition:border-color .5s, box-shadow .6s;pointer-events:none}
.div-col:hover::before{border-color:rgba(63,208,201,.35);box-shadow:0 0 0 40px rgba(63,208,201,.05),0 0 0 80px rgba(63,208,201,.03)}
.div-kind{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.div-logo{height:44px;display:flex;align-items:center}
.div-logo img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.div-col h3{font-size:clamp(28px,2.6vw,36px)}
.div-col h3 em{color:var(--teal-bright)}
.div-col p{color:var(--on-navy-soft);font-weight:300}
.div-col .tagline{color:rgba(255,255,255,.6)}
.div-col .tagline b{font-weight:400;color:var(--teal-bright)}
.div-link{margin-top:auto;display:inline-flex;gap:10px;align-items:center;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--gold);padding-bottom:6px;align-self:flex-start}
.div-col:hover .div-link{color:var(--gold)}
@media (max-width:960px){.div-grid{grid-template-columns:1fr}.div-col{border-left:0;border-top:1px solid var(--navy-line)}.div-col:first-child{border-top:0}}

/* ---------- Structure band (who does what) ---------- */
.structure{background:var(--paper)}
.org{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.org h2{font-size:clamp(36px,5vw,60px)}
.org h2 em{color:var(--teal-ink)}
.org .eyebrow{color:var(--teal-ink);display:block;margin-bottom:18px}
.org-intro{margin-top:24px;color:var(--ink-soft);max-width:30em}
.org-list{display:grid;gap:0;border-top:1px solid var(--stone)}
.org-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding-block:24px;border-bottom:1px solid var(--stone)}
.org-row dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--navy)}
.org-row dt span{display:block;font-weight:400;color:var(--gold-ink);letter-spacing:.12em;margin-top:4px}
.org-row dd{margin:0;color:var(--ink-soft)}
@media (max-width:800px){.org{grid-template-columns:1fr}.org-row{grid-template-columns:1fr;gap:6px}}

/* ---------- Process ---------- */
.process{background:var(--stone)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:rgba(12,35,64,.2)}
.step{position:relative;padding-right:28px}
.step-dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid rgba(12,35,64,.25);font-family:var(--display);font-size:20px;color:var(--navy);position:relative}
.step:last-child .step-dot{background:var(--navy);color:#fff;border-color:var(--navy)}
.step:last-child .step-dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--gold)}
.step h3{font-size:24px;margin-top:26px}
.step p{margin-top:10px;color:var(--ink-soft);font-size:16px}
/* Gold ink reads at 4.2:1 on the stone band, just under the 4.5:1 small type needs,
   so this one label uses a slightly deeper tone (4.9:1). */
.step .who{display:block;margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#80590C;font-weight:600}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:44px}.steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Principle ---------- */
.principle{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.principle-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:center}
.principle blockquote{margin:0;font-family:var(--display);font-size:clamp(34px,4.6vw,60px);line-height:1.1;text-wrap:balance}
.principle blockquote em{color:var(--teal-bright)}
.principle .eyebrow{color:var(--gold);display:block;margin-bottom:24px}
.tenets{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--navy-line)}
.tenets li{padding-block:20px;border-bottom:1px solid var(--navy-line)}
.tenets strong{display:block;font-family:var(--display);font-weight:400;font-size:22px}
.tenets span{display:block;margin-top:6px;color:var(--on-navy-soft);font-size:15px;font-weight:300}
.rings-deco{position:absolute;right:-180px;bottom:-220px;width:560px;height:560px;pointer-events:none;opacity:.5}
@media (max-width:860px){.principle-grid{grid-template-columns:1fr}}

/* ---------- Place ---------- */
.place{background:var(--paper);padding-block:clamp(56px,7vw,88px)}
.place-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px 48px;border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);padding-block:28px}
.place-row h2{font-size:clamp(28px,3.4vw,42px)}
.coords{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:var(--ink-soft);display:flex;gap:28px}

/* ---------- CTA ---------- */
.cta{background:var(--paper);padding-top:0;overflow-x:clip}
.cta-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.cta-card .eyebrow{color:var(--gold-ink);display:block;margin-bottom:18px}
.cta-card h2{font-size:clamp(40px,6vw,80px);color:var(--navy)}
.cta-card h2 em{color:var(--teal-ink)}
.cta-card p{margin-top:20px;color:var(--ink-soft);max-width:32em}
.talk{position:relative;width:220px;height:220px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;text-align:center;text-decoration:none;font-family:var(--display);font-size:26px;line-height:1.15;transition:transform .3s}
.talk::before,.talk::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(12,35,64,.18);inset:-22px;transition:inset .5s}
.talk::after{inset:-46px;border-color:rgba(12,35,64,.08)}
.talk:hover::before{inset:-30px;border-color:var(--gold)}
.talk:hover::after{inset:-62px}
.talk small{display:block;font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:10px}
@media (max-width:760px){.cta-card{grid-template-columns:1fr}.talk{margin:56px auto 24px;width:190px;height:190px;font-size:22px}}

/* ---------- Division pages ---------- */
.dhero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding-block:clamp(64px,9vw,120px)}
.dhero-logo{height:56px;margin-bottom:48px}
.dhero-logo img{height:100%;width:auto}
.dhero .kind{color:var(--gold);margin-bottom:22px;display:block}
.dhero h1{font-size:clamp(42px,6.6vw,88px);max-width:14ch}
.dhero h1 em{color:var(--teal-bright)}
.dhero .lede{margin-top:28px;max-width:36em;color:var(--on-navy-soft);font-size:clamp(17px,1.5vw,20px);font-weight:300}
.dhero .tagline{margin-top:40px;color:rgba(255,255,255,.66);display:flex;flex-wrap:wrap;gap:.3em 1em}
.dhero .tagline b{font-weight:400;color:var(--teal-bright)}
.dhero-art{position:absolute;right:max(-60px,calc((100vw - var(--wrap))/2 - 60px));top:50%;transform:translateY(-50%);width:min(44vw,520px);opacity:.9;pointer-events:none}
.mkt-art{width:min(24vw,240px);right:max(var(--gut),calc((100vw - var(--wrap))/2 - 60px))}
.ai-art{opacity:.14}
@media (max-width:900px){.dhero-art,.mkt-art{opacity:.18;right:-120px}}
@media (max-width:960px){.mkt-art{opacity:.18;right:-120px}}

.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--stone)}
.offer{padding:36px 36px 36px 0;border-bottom:1px solid var(--stone);display:grid;gap:12px;align-content:start}
.offer:nth-child(odd){border-right:1px solid var(--stone)}
.offer:nth-child(even){padding-left:36px;padding-right:0}
.offer h3{font-size:28px}
.offer p{color:var(--ink-soft)}
.offer .for{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);font-weight:600}
@media (max-width:800px){.offers{grid-template-columns:1fr}.offer,.offer:nth-child(even){padding:28px 0;border-right:0}}

.pull{background:var(--stone)}
.pull figure{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.pull img{width:clamp(120px,16vw,200px);height:auto}
.pull blockquote{margin:0;font-family:var(--display);font-size:clamp(30px,4vw,52px);line-height:1.12;color:var(--navy);text-wrap:balance}
.pull blockquote em{color:var(--teal-ink)}
.pull figcaption{margin-top:20px;color:var(--ink-soft);max-width:34em}
@media (max-width:700px){.pull figure{grid-template-columns:1fr}}

.commit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.commit div{border-top:2px solid var(--navy);padding-top:22px}
.commit strong{display:block;font-family:var(--display);font-weight:400;font-size:26px;color:var(--navy)}
.commit span{display:block;margin-top:8px;color:var(--ink-soft);font-size:16px}
@media (max-width:800px){.commit{grid-template-columns:1fr}}

.loop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--stone);border:2px solid var(--stone)}
.loop div{background:var(--paper);padding:28px 24px 32px}
.loop b{display:block;font-family:var(--display);font-weight:400;font-size:40px;color:var(--navy);line-height:1}
.loop h3{font-size:22px;margin-top:18px}
.loop p{margin-top:8px;color:var(--ink-soft);font-size:15px}
.loop .gate{background:var(--navy);color:#fff}
.loop .gate b,.loop .gate h3{color:#fff}
.loop .gate p{color:var(--on-navy-soft)}
.loop .gate .flag{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--gold);padding:4px 8px;font-weight:600}
@media (max-width:900px){.loop{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.loop{grid-template-columns:1fr}}

.social-band{background:var(--navy-deep);color:#fff}
.social-band .inner{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.social-band img{height:40px;width:auto}
.social-band p{color:var(--on-navy-soft);max-width:34em;font-weight:300}
.social-band h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:14px}
.social-band h2 em{color:var(--teal-bright)}

/* ---------- Footer ---------- */
.foot{background:var(--navy);color:var(--on-navy-soft);padding-block:64px 40px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.6fr));gap:40px}
.foot img{height:30px;width:auto;margin-bottom:18px}
/* Footer column titles are h2 so headings never skip a level; this keeps their small-caps look. */
.foot .foot-h{margin:0 0 14px;font-family:var(--body);font-size:11px;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500;text-wrap:wrap}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none}.foot a:hover{color:#fff}
.foot-base{margin-top:56px;padding-top:22px;border-top:1px solid var(--navy-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;color:rgba(255,255,255,.5)}
.draft{border:1px solid rgba(218,165,32,.5);color:var(--gold);padding:3px 10px;border-radius:20px;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}


/* ---------- Marketing services ---------- */
.svc-jump{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:30;background:var(--paper);border-bottom:1px solid var(--stone)}
.svc-jump .wrap{display:flex;gap:6px 26px;overflow-x:auto;padding-block:14px;scrollbar-width:none}
.svc-jump a{flex:none;text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--navy);padding-block:4px;border-bottom:1px solid transparent}
.svc-jump a:hover{border-color:var(--gold)}
.svc-list{border-top:1px solid var(--stone)}
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);padding-block:clamp(32px,4vw,48px);border-bottom:1px solid var(--stone);scroll-margin-top:150px}
.svc-kind{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);margin-bottom:12px}
.svc h3{font-size:clamp(28px,3vw,38px);color:var(--navy)}
.svc h3 em{color:var(--teal-ink)}
.svc-head p{margin-top:14px;color:var(--ink-soft);max-width:30em}
.svc-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-content:start}
.svc-items li{padding:12px 0 12px 22px;border-bottom:1px solid var(--stone);position:relative;font-size:16px}
.svc-items li::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;border:1.5px solid var(--teal)}
@media (max-width:860px){.svc{grid-template-columns:1fr}}
@media (max-width:520px){.svc-items{grid-template-columns:1fr}}
.record{background:var(--navy);color:#fff}
.record .sec-head .eyebrow{color:var(--gold)}
.record .sec-head h2 em{color:var(--teal-bright)}
.record .sec-head p{color:var(--on-navy-soft)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--navy-line)}
.stats div{padding:28px 24px 28px 0;border-bottom:1px solid var(--navy-line)}
.stats dt{font-family:var(--display);font-size:clamp(44px,5vw,64px);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.stats div:nth-child(3n+2) dt{color:var(--gold)}
.stats dd{margin:10px 0 0;color:var(--on-navy-soft);font-size:15px;max-width:18em}
.industries{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}
.industries span{border:1px solid var(--navy-line);border-radius:30px;padding:6px 14px;font-size:13px;color:var(--on-navy-soft)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}
/* when the last row of figures is one short, draw the rule under the empty cell too */
@media (min-width:761px){.stats:has(> div:nth-child(3n+2):last-child)::after{content:"";border-bottom:1px solid var(--navy-line)}}
@media (max-width:760px){.stats:has(> div:nth-child(odd):last-child)::after{content:"";border-bottom:1px solid var(--navy-line)}}

.built{background:var(--navy);color:#fff}
.built .sec-head .eyebrow{color:var(--gold)}
.built .sec-head h2 em{color:var(--teal-bright)}
.built .sec-head p{color:var(--on-navy-soft)}
.built-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--navy-line)}
.built-grid article{padding:32px 32px 36px 0;display:flex;flex-direction:column;gap:12px}
.built-grid article+article{border-left:1px solid var(--navy-line);padding-left:32px}
.built-grid h3{font-size:30px}
.built-grid p{color:var(--on-navy-soft);font-weight:300;font-size:16px}
.built-grid a{margin-top:auto;align-self:flex-start;color:#fff;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px;font-size:13px;font-weight:600;letter-spacing:.06em}
.status{align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:20px}
.status.live{background:var(--teal);color:var(--navy)}
.status.build{background:var(--gold);color:var(--navy)}
@media (max-width:860px){.built-grid{grid-template-columns:1fr}.built-grid article,.built-grid article+article{border-left:0;padding:28px 0;border-bottom:1px solid var(--navy-line)}}

.div-mark{height:64px;display:flex;align-items:center}
.div-mark img{height:100%;width:auto}
.div-fn{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);line-height:1.5}
.band-mark{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.band-mark img{height:48px;width:auto}
.band-mark span{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.view[hidden]{display:none!important}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.view .rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Page not found ----------
   Deliberately unlike the home page: a light page, centered, with the number itself as
   the picture and Isla standing where the zero would be. */
.nf{background:var(--paper);color:var(--ink);text-align:center;padding-block:clamp(36px,5vw,64px) clamp(64px,8vw,112px)}
.nf-in{display:flex;flex-direction:column;align-items:center}
.nf-code{display:flex;align-items:baseline;justify-content:center;gap:.05em;font-family:var(--display);font-weight:400;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-size:clamp(140px,24vw,300px);line-height:.86;color:var(--navy);margin:0 0 clamp(26px,3.6vw,44px)}
.nf-isla{position:relative;display:block;width:.52em;flex:0 0 auto;transform:translateY(.045em)}
.nf-isla picture,.nf-isla img{display:block;width:100%;height:auto;position:relative}
.nf .isla-rings .rg{stroke:var(--teal);stroke-width:1.6}
.nf .isla-rings .r2{stroke:var(--gold)}
.nf .eyebrow{color:var(--gold-ink);margin-bottom:16px}
.nf h1{font-size:clamp(30px,4.2vw,52px);color:var(--navy);max-width:17em}
.nf h1 em{color:var(--teal-ink)}
.nf .lede{margin-top:18px;max-width:36em;color:var(--ink-soft);font-size:clamp(16px,1.5vw,19px);line-height:1.6}
.nf-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.nf .btn-line{border-color:rgba(12,35,64,.4);color:var(--navy)}
.nf .btn-line:hover{border-color:var(--navy)}

/* office hours under the contact invitation; legal links in the footer base */
.cta-card .hours{margin-top:26px}
.cta-card .hours .eyebrow{margin-bottom:8px}
.cta-card .hours p{margin-top:0;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px}
/* A taller tap area for the small legal links, without moving anything. */
.foot-legal a{display:inline-block;padding-block:4px;margin-block:-4px}
.foot-legal a[hidden]{display:none}
.foot-base a{color:inherit;text-decoration:none}
.foot-base a:hover{color:#fff;text-decoration:underline}
.divisions{scroll-margin-top:77px}
#contact{scroll-margin-top:109px}
/* Analytics notice (assets/analytics.js). Shown only to visitors in California or Europe. */
.consent{position:fixed;z-index:60;left:var(--gut);bottom:max(16px,env(safe-area-inset-bottom,0px));max-width:min(560px,calc(100vw - 2*var(--gut)));display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;border:1px solid var(--navy-line);border-left:3px solid var(--gold);border-radius:2px;padding:10px 12px 10px 14px;box-shadow:0 10px 30px rgba(8,26,49,.3)}
.consent p{margin:0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.88)}
.consent p a{color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.consent-btns{display:flex;gap:8px;flex:none}
.consent .btn{padding:7px 12px;font-size:12px;background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.consent .btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:560px){.consent{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}.consent .btn{flex:1;justify-content:center}}
/* Privacy Policy page */
.legal{background:var(--paper);color:var(--ink);padding-block:clamp(48px,6vw,88px) clamp(64px,8vw,112px)}
.legal-in{max-width:calc(46em + 2*var(--gut))}
.legal .eyebrow{color:var(--gold-ink);display:block;margin-bottom:14px}
.legal h1{font-size:clamp(36px,5vw,60px);color:var(--navy)}
.legal .legal-date{margin:18px 0 30px;font-size:14px;letter-spacing:.04em;color:var(--ink-soft)}
.legal h2{font-size:clamp(22px,2.4vw,28px);color:var(--navy);margin:40px 0 10px}
.legal p{margin:0 0 14px;color:var(--ink-soft);max-width:46em}
.legal a{color:var(--teal-ink);text-underline-offset:3px}
/* Contact form (assets/contact.js). One card, two halves of equal height:
   Isla on a navy pond at the left, the form on white at the right. */
.note-wrap{margin-top:clamp(56px,7vw,96px)}
.note-card{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);border-radius:4px;overflow:hidden;box-shadow:0 24px 60px rgba(12,35,64,.16)}
.note-side{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.note-pond{position:absolute;z-index:-1;left:50%;top:58%;width:170%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);fill:none;stroke:rgba(63,208,201,.22);stroke-width:1}
.note-pond .g{stroke:rgba(218,165,32,.34)}
.note-top .eyebrow{color:var(--gold);display:block;margin-bottom:14px}
.note-top h3{font-size:clamp(34px,4vw,52px);color:#fff}
.note-top h3 em{color:var(--teal-bright)}
.note-isla{display:flex;flex-direction:column;align-items:center}
.note-say{position:relative;margin:0;background:#fff;color:var(--navy);font-family:var(--display);font-style:italic;font-size:clamp(18px,1.9vw,22px);line-height:1.3;padding:16px 20px;border-radius:16px;max-width:13em;text-align:center}
.note-say.swap{opacity:0}
.note-say{transition:opacity .18s}
.note-say::after{content:"";position:absolute;left:50%;bottom:-8px;width:18px;height:18px;margin-left:-9px;background:#fff;transform:rotate(45deg);border-radius:0 0 3px 0}
.note-bird{position:relative;width:clamp(190px,23vw,280px);margin:24px 0 18px}
.note-bird picture,.note-bird img{display:block;width:100%;height:auto;position:relative}
.note-alt{margin:0;font-size:15px;color:var(--on-navy-soft,rgba(255,255,255,.78))}
.note-alt a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;white-space:nowrap}
.note-alt a:hover{color:var(--gold)}
/* Sher, 14 Oct 2026: "you can't see isla" while filling in the form. On a
   two-column screen Isla and her speech bubble now stay in view as the form
   scrolls (sticky, just under the site header), stopping above the
   "Rather talk it through?" line. The "Book a call" line is pinned to the
   bottom of the panel, and its space is reserved, so she never slides over
   it. On a short window she is drawn smaller so the bubble still fits under
   the header. overflow:clip (not hidden) keeps the rounded corners without
   breaking sticky. Phones stack the layout, so none of this applies there. */
@media (min-width:901px){
  .note-card,.note-side{overflow:clip}
  .note-side{justify-content:flex-start;padding-bottom:calc(clamp(28px,3.4vw,44px) + 64px)}
  .note-isla{position:sticky;top:calc(var(--head-h,77px) + 20px);margin-top:auto;margin-bottom:auto}
  .note-bird{width:min(clamp(190px,23vw,280px),max(120px,calc((100vh - 300px) / 1.6)))}
  .note-alt{position:absolute;left:clamp(28px,3.4vw,44px);right:clamp(28px,3.4vw,44px);bottom:clamp(28px,3.4vw,44px)}
}
.note{background:#fff;padding:clamp(24px,3.4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;align-content:start}
/* The display rules below outrank the browser's own [hidden] rule, so the
   confirmation could not hide the fields it replaces. This puts it back. */
.note>[hidden]{display:none!important}
.note .f{display:flex;flex-direction:column}
/* Sher, 14 Oct 2026: a label that wraps to two lines pushed its box lower than
   the box beside it. Each box now sits at the bottom of its cell, so boxes in
   the same row line up whatever the label length. */
.note .f>input,.note .f>select,.note .f>textarea{margin-top:auto}
.note .f-wide{grid-column:1/-1}
.note .f span{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--navy);margin-bottom:4px}
.note .f span i{font-style:normal;font-weight:400;color:var(--ink-soft)}
.note input[type="text"],.note input[type="email"],.note input[type="tel"],.note textarea,.note select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid rgba(12,35,64,.28);border-radius:2px;padding:9px 12px;min-height:44px}
.note textarea{resize:vertical;min-height:88px}
.note input:focus-visible,.note textarea:focus-visible,.note select:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--navy);background:#fff}
.note .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note-group{margin:0 0 -2px;font-family:var(--display);font-weight:400;font-size:22px;color:var(--navy)}
.note .note-group~.note-group{margin-top:5px;padding-top:15px;border-top:1px solid var(--stone)}
.note .radios{border:0;margin:0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.note .radios legend{float:left;width:100%;padding:0;margin:0 0 5px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--navy)}
.note .radios label{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border:1px solid rgba(12,35,64,.28);border-radius:999px;background:var(--paper);font-size:15px;color:var(--ink);cursor:pointer}
.note .radios input{width:16px;height:16px;margin:0;accent-color:var(--navy)}
.note .radios label:has(input:checked){border-color:var(--navy);background:#fff;box-shadow:inset 0 0 0 1px var(--navy)}
.note .radios label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.note input.bad,.note select.bad,.note textarea.bad{border-color:#8A1F1F}
.note .radios.bad label{border-color:#8A1F1F}
.note .f .f-err,.note .radios .f-err,.note .chk .f-err{display:block;width:100%;margin:6px 0 0;font-size:13px;font-weight:400;letter-spacing:0;color:#8A1F1F}
.note .chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.note .chk input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--navy)}
.note-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.note-foot small{font-size:13px;color:var(--ink-soft)}
.note-foot a,.note-status a{color:var(--teal-ink);text-underline-offset:3px}
.note-status{margin:0;font-size:15px;color:var(--navy)}
.note-status.err{color:#8A1F1F}
.note-done{grid-column:1/-1;align-self:center;border-left:3px solid var(--gold);padding:10px 0 10px 20px}
.note-done strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px);color:var(--navy)}
.note-done p{margin:10px 0 0;color:var(--ink-soft)}
.note-done a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;white-space:nowrap}
.note-done a:hover{color:var(--teal-ink)}
.note-done .draft-note{font-size:13px;color:var(--gold-ink)}
.note:has(.note-done){align-content:center}
@media (max-width:900px){
  .note-card{grid-template-columns:1fr}
  .note-side{gap:18px}
  .note-pond{top:70%;width:140%}
  .note-isla{flex-direction:row-reverse;justify-content:flex-end;align-items:flex-end;gap:4px}
  .note-say{font-size:17px;text-align:left;margin-bottom:64px;max-width:12em}
  .note-say::after{left:-7px;bottom:22px;margin-left:0;border-radius:0 0 0 3px}
  .note-bird{flex:none;width:118px;margin:0}
}
@media (max-width:520px){.note{grid-template-columns:1fr}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}