/* Swan Advisory Group. One stylesheet for the whole site.
   Edit here and every page follows. No build step: this is plain CSS. */

:root{
  --ink:#12302B; --pine:#173934; --teal:#1D443F;
  --seafoam:#4FA69E; --seafoam-lift:#7FC7BF; --seafoam-deep:#2E6B65; --seafoam-wash:#E6F2F0;
  --brass:#E8A845; --brass-lift:#F0B85F; --brass-deep:#8F5E1C; --brass-wash:#FCF4E6;
  --paper:#FBFAF7; --white:#FFFFFF; --slate:#475855; --mist:#7E908D; --rule:#E4E3DC;
  --display:'Fraunces','Iowan Old Style',Georgia,serif;
  --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --gut:clamp(24px,5vw,80px);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.06;margin:0}
p{margin:0 0 1.1em}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--text);font-size:clamp(12.5px,1.05vw,15px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--seafoam-deep);margin:0 0 26px;
  display:flex;align-items:center;gap:13px}
.eyebrow::before{content:'';width:28px;height:2px;background:var(--brass);flex:none}
.dot{color:var(--brass)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.88);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:34px;height:34px;display:block}
.brand b{font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink);
  letter-spacing:-.01em}
.navlinks{display:flex;gap:34px;align-items:center}
.navlinks a{color:var(--slate);text-decoration:none;font-size:14.5px;font-weight:500;
  transition:color .25s}
.navlinks a.btn{color:var(--ink)}
.navlinks a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--brass);color:var(--ink);text-decoration:none;
  font-weight:600;font-size:14.5px;padding:11px 22px;border-radius:2px;transition:background .25s}
.btn:hover{background:#D6942F}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:5px 0;
  transition:transform .3s,opacity .3s}
.nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero .wrap{position:relative;z-index:1}
.hero{background:transparent;color:var(--ink);border-bottom:1px solid var(--rule);z-index:1;padding:clamp(80px,12vw,150px) 0 clamp(70px,9vw,110px);
  position:relative;overflow:hidden}
.hero .hero-eyebrow{font-size:clamp(14.5px,1.55vw,20px);letter-spacing:.14em;
  color:var(--brass-deep);font-weight:700;margin-bottom:26px}
.hero .hero-eyebrow::before{width:42px;height:2.5px}
.hero h1{font-size:clamp(42px,7.4vw,88px);max-width:16ch;font-weight:300}
.hero h1 em{font-style:normal;color:var(--seafoam-deep)}
.hero .lede{max-width:52ch;color:var(--slate);font-size:clamp(17px,1.5vw,19.5px);
  margin-top:34px}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.tagline{margin-top:clamp(56px,7vw,84px);padding-top:30px;
  border-top:1px solid var(--rule);font-family:var(--display);
  font-size:clamp(19px,2.4vw,27px);color:var(--ink);font-weight:300}
.tagline .dot{color:var(--brass-deep)}

/* the signature drawing: five strands sweeping the full hero, lower left to upper right */
.sweepwrap{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:hidden;z-index:0}
.sweep{display:block;width:100%;height:100%}
.sweep path{fill:none;stroke-linecap:round;stroke:url(#gSweep)}
.sweep .ribbons path{stroke-width:60;opacity:.2;filter:url(#soft)}
.sweep .deep path{stroke-width:.9;opacity:.22}
.sweep .glow{transform-box:fill-box;transform-origin:50% 50%;opacity:.9;animation:glow 7s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.65;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.sweep .base path{stroke-width:1.6;opacity:.5}
.sweep .flow path{stroke-width:3;opacity:1;
  stroke-dasharray:150 2450;stroke-dashoffset:2600;
  animation:flow 10s linear infinite}
.sweep .flow path:nth-child(2){animation-duration:12.5s;animation-delay:-3s}
.sweep .flow path:nth-child(3){animation-duration:15s;animation-delay:-6s}
.sweep .flow path:nth-child(4){animation-duration:11.5s;animation-delay:-1.5s}
.sweep .flow path:nth-child(5){animation-duration:13.5s;animation-delay:-8s}
@keyframes flow{from{stroke-dashoffset:2600}to{stroke-dashoffset:0}}
/* the broad ribbons breathe, which is what gives it scale */

/* the point everything arrives at */
.sweep .knot{fill:var(--brass);animation:knot 5s ease-in-out infinite}
@keyframes knot{0%,100%{opacity:.3;r:4}50%{opacity:.85;r:7}}

/* ---------- generic section ---------- */
section{padding:clamp(64px,7.5vw,112px) 0;position:relative;z-index:1;background:var(--paper)}
.lead{font-size:clamp(22px,2.6vw,31px);font-family:var(--display);font-weight:300;
  line-height:1.34;max-width:22ch;letter-spacing:-.015em}
.grid2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);
  align-items:start}
.body p{color:var(--slate);max-width:60ch}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- perspectives band ---------- */
.band{background:var(--seafoam-deep);color:var(--paper)}
.band .eyebrow{color:var(--paper)}
.band .eyebrow::before{background:var(--paper)}
.band .disciplines{display:flex;flex-wrap:nowrap;align-items:baseline;
  font-family:var(--display);font-weight:300;font-size:clamp(15px,2.55vw,33px);
  letter-spacing:-.02em;white-space:nowrap}
.band .disciplines span{padding-right:.34em}
.band .disciplines i{font-style:normal;color:var(--brass-lift);padding-right:.34em}
.band p{color:rgba(251,250,247,.84);max-width:56ch;margin-top:34px}

/* ---------- motif ---------- */
.motif{width:clamp(120px,15vw,190px);height:auto;display:block}
.motif path,.motif circle,.motif ellipse{fill:none;stroke-width:.85;vector-effect:non-scaling-stroke}
.draw path,.draw circle,.draw ellipse{stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1)}
.draw.in path,.draw.in circle,.draw.in ellipse{stroke-dashoffset:0}
/* once drawn, each motif keeps a slow life of its own */
.motif.spin.in{animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.motif.globe.in ellipse:nth-child(4){animation:lon 11s ease-in-out infinite alternate}
.motif.globe.in ellipse:nth-child(5){animation:lon 11s ease-in-out .9s infinite alternate}
@keyframes lon{from{opacity:.7}to{opacity:.22}}
.motif.breathe.in{animation:breathe 9s ease-in-out infinite alternate;
  transform-origin:50% 50%}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.045)}}
.draw path:nth-child(2){transition-delay:.08s}
.draw path:nth-child(3){transition-delay:.16s}
.draw path:nth-child(4){transition-delay:.24s}
.draw path:nth-child(5){transition-delay:.32s}

/* ---------- method ---------- */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;
  border-top:1px solid var(--rule)}
.step{padding:34px 26px 0 0;border-right:1px solid var(--rule);position:relative}
.step:last-child{border-right:0}
.step .num{font-family:var(--text);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  color:var(--brass-deep);margin-bottom:16px}
.step h3{font-size:23px;margin-bottom:6px}
.step .role{color:var(--seafoam-deep);font-size:13.5px;font-weight:600;margin-bottom:14px}
.step p{color:var(--slate);font-size:15px;line-height:1.6;margin:0}
.step::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
  background:var(--brass);transition:width .9s cubic-bezier(.22,.61,.36,1)}
.method.in .step::before{width:100%}
.method.in .step:nth-child(2)::before{transition-delay:.12s}
.method.in .step:nth-child(3)::before{transition-delay:.24s}
.method.in .step:nth-child(4)::before{transition-delay:.36s}

/* ---------- practices ---------- */
.practices{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:56px}
.practice{background:var(--paper);padding:40px 34px 44px;transition:background .3s}
.practice:hover{background:var(--white)}
.practice h3{font-size:26px;margin-bottom:16px;max-width:14ch;min-height:2.2em;display:flex;align-items:flex-end}
.practice p{color:var(--slate);font-size:15.5px}
.practice ul{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--rule);
  padding-top:18px}
.practice li{color:var(--slate);font-size:14.5px;padding:6px 0 6px 18px;position:relative}
.practice li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;
  background:var(--brass)}

/* ---------- outcomes ---------- */
.outcomes{background:var(--seafoam-wash)}
.olist{margin-top:48px;border-top:1px solid rgba(15,30,28,.14)}
.o{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);
  padding:26px 0;border-bottom:1px solid rgba(15,30,28,.14);align-items:baseline}
.o h3{font-size:clamp(24px,3vw,34px);font-weight:300}
.o p{color:var(--teal);margin:0;font-size:16px;max-width:52ch;opacity:.86}

/* ---------- why ---------- */
.who{background:var(--seafoam);color:var(--ink)}
.who .eyebrow{color:var(--ink)}
.who .eyebrow::before{background:var(--ink)}
.why{background:var(--paper);color:var(--ink)}
.why .lead{color:var(--paper)}
.why p{color:var(--slate)}
.why .sig{margin-top:46px;font-family:var(--display);font-size:clamp(19px,2.3vw,26px);
  font-weight:300}
.why .sig .dot{color:var(--seafoam)}

/* ---------- cta ---------- */
.cta{text-align:center;padding:clamp(84px,10vw,140px) 0}
.cta h2{font-size:clamp(32px,5vw,58px);font-weight:300;max-width:18ch;margin:0 auto 26px}
.cta p{color:var(--slate);max-width:46ch;margin:0 auto 36px}

/* ---------- footer ---------- */
footer{position:relative;z-index:1;background:var(--pine);color:rgba(248,247,243,.6);padding:56px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer a{color:rgba(248,247,243,.6);text-decoration:none}
footer a:hover{color:var(--paper)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .method{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid var(--rule);padding-bottom:30px}
  .practices{grid-template-columns:1fr}
  .sweep .ribbons path{opacity:.1}
  .sweep .base path{opacity:.26}
  .sweep .flow path{opacity:.6;stroke-width:2.2}
  .burger{display:block}
  .navlinks{position:fixed;inset:76px 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:flex-start;gap:0;padding:14px var(--gut) 34px;
    border-bottom:1px solid var(--rule);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
  .nav.open .navlinks{transform:none;opacity:1;pointer-events:auto}
  .navlinks a{font-size:19px;font-family:var(--display);font-weight:300;padding:13px 0;width:100%;
    border-bottom:1px solid var(--rule)}
  .navlinks .btn{color:var(--ink);font-family:var(--text);font-size:15px;margin-top:20px;width:auto;border-bottom:0;
    padding:13px 24px}
  .o{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .rv,.draw path,.draw circle,.draw ellipse,.step::before{transition:none!important}
  .rv{opacity:1;transform:none}
  .draw path,.draw circle,.draw ellipse{stroke-dashoffset:0}
  .sweep .flow path,.sweep .ribbons,.sweep .knot,.sweep .glow{animation:none}
  .motif.spin.in,.motif.breathe.in,.motif.globe.in ellipse{animation:none}

  .sweep .flow path{stroke-dasharray:none;stroke-dashoffset:0;opacity:.55}
  .sweep .knot{opacity:.6}
}

/* ---------- interior pages ---------- */
/* ---------- interior page header ---------- */
.phead{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule);
  padding:clamp(64px,8vw,104px) 0 clamp(56px,7vw,88px)}
.phead h1{font-size:clamp(38px,6vw,70px);font-weight:300;max-width:17ch}
.phead h1 em{font-style:normal;color:var(--seafoam-deep)}
.phead .lede{max-width:54ch;color:var(--slate);margin-top:30px;
  font-size:clamp(16.5px,1.4vw,18.5px)}
.crumb{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--seafoam-deep);margin:0 0 24px}
.crumb a{color:var(--slate);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.navlinks a.here{color:var(--ink)}
.navlinks a.here::after{content:"";display:block;height:1px;background:var(--brass);margin-top:5px}

/* ---------- connections diagram ---------- */
.connect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center;margin-top:16px}
.diagram{width:100%;height:auto;overflow:visible}
.chord{fill:none;stroke:var(--seafoam);stroke-width:1;opacity:.34;
  stroke-dasharray:460;stroke-dashoffset:460;
  transition:stroke-dashoffset 1.5s cubic-bezier(.22,.61,.36,1),
             opacity .35s,stroke .35s,stroke-width .35s}
.diagram.in .chord{stroke-dashoffset:0}
.chord:nth-child(2){transition-delay:.06s,0s,0s,0s}
.chord:nth-child(3){transition-delay:.12s,0s,0s,0s}
.chord:nth-child(4){transition-delay:.18s,0s,0s,0s}
.chord:nth-child(5){transition-delay:.24s,0s,0s,0s}
.chord:nth-child(6){transition-delay:.30s,0s,0s,0s}
.chord:nth-child(7){transition-delay:.36s,0s,0s,0s}
.chord:nth-child(8){transition-delay:.42s,0s,0s,0s}
.chord:nth-child(9){transition-delay:.48s,0s,0s,0s}
.chord:nth-child(10){transition-delay:.54s,0s,0s,0s}
.diagram .node{opacity:0;transition:opacity .7s ease .8s}
.diagram.in .node{opacity:1}
.diagram.dim .chord{opacity:.12}
.diagram .chord.lit{opacity:1;stroke:var(--brass);stroke-width:1.5}
.diagram.ready .chord{stroke-dasharray:none}
.node{cursor:pointer}
.node .halo{fill:transparent}
.node .dot{fill:var(--paper);stroke:var(--seafoam);stroke-width:1.5;transition:fill .3s,stroke .3s,r .3s}
.node text{font-family:var(--text);font-size:15px;font-weight:600;fill:var(--pine);
  transition:fill .3s}
.node:hover .dot,.node.on .dot{fill:var(--brass);stroke:var(--brass-deep)}
.node.on text{fill:var(--brass-deep)}
.diagram.dim .node:not(.on) text{fill:var(--mist)}
.readout{min-height:290px}
.readout .eyebrow{margin-bottom:14px}
.readout h3{font-size:clamp(24px,3vw,32px);font-weight:300;margin-bottom:14px}
.readout p{color:var(--slate);max-width:44ch;margin-bottom:18px}
.readout .hint{color:var(--mist);font-size:14px;font-style:italic}
.readout ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule);padding-top:14px}
.readout li{color:var(--slate);font-size:14.5px;padding:5px 0 5px 18px;position:relative}
.readout li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--brass)}

/* ---------- three moves ---------- */
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:52px}
.move .num{font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--brass-deep);margin-bottom:14px}
.move h3{font-size:clamp(20px,2.2vw,26px);font-weight:400;margin-bottom:12px;max-width:13ch}
.move p{color:var(--slate);font-size:15.5px;margin:0}

/* ---------- next pages ---------- */
.next{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.next a{background:var(--paper);padding:clamp(34px,5vw,58px) clamp(24px,4vw,48px);
  text-decoration:none;display:block;transition:background .3s}
.next a:hover{background:var(--white)}
.next .k{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--seafoam-deep);margin-bottom:12px}
.next h3{font-size:clamp(23px,2.6vw,30px);font-weight:300}
.next .arrow{color:var(--brass);margin-top:16px;font-size:15px;font-weight:600}

@media (max-width:900px){
  .connect{grid-template-columns:1fr}
  .moves{grid-template-columns:1fr}
  .next{grid-template-columns:1fr}
  .readout{min-height:0}
}


/* ---------- home page gateway ---------- */
.gates{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:clamp(40px,5vw,64px)}
.gate{background:var(--paper);padding:clamp(30px,3.6vw,46px);text-decoration:none;display:block;
  transition:background .3s}
.gate:hover{background:var(--white)}
.gate .k{font-family:var(--mono,var(--text));font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--brass-deep);margin-bottom:16px}
.gate h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.3vw,29px);
  color:var(--ink);letter-spacing:-.015em}
.gate p{color:var(--slate);font-size:15.5px;margin-top:12px;max-width:38ch}
.gate .arrow{color:var(--brass-deep);margin-top:20px;font-size:14.5px;font-weight:600}
@media (max-width:800px){.gates{grid-template-columns:1fr}}


/* =====================================================================
   2026-09-12 revisions: tighter rhythm, colour and motion on the interior
   pages. Appended last so these win over earlier rules.
   ===================================================================== */

/* ---------- home: the green band shows on landing ---------- */
.hero{padding:clamp(30px,3.3vw,48px) 0 clamp(28px,2.8vw,40px)}
.hero h1{font-size:clamp(40px,5.2vw,66px);max-width:18ch}
.hero .lede{max-width:60ch}
.hero .lede{margin-top:22px}
.hero .acts{margin-top:28px}
.tagline{margin-top:clamp(28px,3.5vw,44px);padding-top:20px}
.band{padding:clamp(30px,3.2vw,46px) 0}
.band p{margin-top:22px}
.band-tagline{margin-top:22px;padding-top:16px;border-top:1px solid rgba(251,250,247,.22);
  color:var(--paper);font-size:clamp(18px,2vw,24px)}
.band-tagline .dot{color:var(--brass-lift)}
.cta{padding:clamp(64px,8vw,112px) 0}

/* ---------- interior headers: colour and a living graphic ---------- */
.phead{position:relative;overflow:hidden;
  background:linear-gradient(118deg,var(--seafoam-wash) 0%,var(--paper) 55%,var(--brass-wash) 100%);
  padding:clamp(52px,6vw,88px) 0 clamp(44px,5vw,72px)}
.phead .wrap{position:relative;z-index:1}
.phead .art{position:absolute;right:clamp(24px,7vw,120px);top:0;bottom:0;margin:auto 0;
  width:clamp(200px,23vw,330px);height:clamp(200px,23vw,330px);pointer-events:none}
.phead .art path,.phead .art circle,.phead .art ellipse{fill:none;stroke-width:1}
.art.spin.in{animation:spin 60s linear infinite}
.art.breathe.in,.support-art.breathe.in{animation:breathe 8s ease-in-out infinite alternate}
.art.globe.in ellipse:nth-child(4){animation:lon 11s ease-in-out infinite alternate}
.art.globe.in ellipse:nth-child(5){animation:lon 11s ease-in-out .9s infinite alternate}
.phead.long h1{font-size:clamp(30px,4.2vw,54px);max-width:23ch;line-height:1.14}
.phead .eyebrow{margin-bottom:18px}
@media (max-width:1040px){.phead .art{opacity:.22;right:-40px}}

/* ---------- how we work: the stages arrive in order ---------- */
.stages{padding-top:clamp(52px,6vw,84px)}
.stages .method{margin-top:0;position:relative}
.method .step{opacity:0;transform:translateY(22px);padding:34px 24px 30px 20px;
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1),background .3s}
.method.in .step{opacity:1;transform:none}
.method.in .step:nth-child(2){transition-delay:.15s,.15s,0s}
.method.in .step:nth-child(3){transition-delay:.3s,.3s,0s}
.method.in .step:nth-child(4){transition-delay:.45s,.45s,0s}
.method .step:hover{background:var(--seafoam-wash)}
.method .step .num{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--seafoam);
  color:var(--seafoam-deep);font-size:13px;margin-bottom:18px;
  transition:background .5s ease,border-color .5s ease,color .5s ease}
.method.in .step .num{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.method.in .step:nth-child(2) .num{transition-delay:.35s}
.method.in .step:nth-child(3) .num{transition-delay:.5s}
.method.in .step:nth-child(4) .num{transition-delay:.65s}
.method::after{content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--brass);box-shadow:0 0 0 6px rgba(232,168,69,.2);opacity:0}
.method.in::after{opacity:1;animation:travel 9s ease-in-out 1.4s infinite}
@keyframes travel{0%,100%{left:0}50%{left:calc(100% - 9px)}}

.support{background:var(--seafoam-deep);color:var(--paper);overflow:hidden}
.support .wrap{position:relative;z-index:1}
.support-text{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.4vw,44px);
  line-height:1.28;letter-spacing:-.015em;max-width:25ch;color:var(--paper);margin:0;
  padding-left:clamp(20px,2.4vw,34px);border-left:3px solid var(--brass-lift)}
.support-art{position:absolute;right:clamp(12px,6vw,110px);top:0;bottom:0;margin:auto 0;
  width:clamp(180px,22vw,300px);height:clamp(180px,22vw,300px);opacity:.7;pointer-events:none}
.support-art path,.support-art ellipse,.support-art circle{fill:none;stroke-width:1.2}
@media (max-width:1040px){.support-art{opacity:.18;right:-30px}}

/* ---------- services: three practices at the centre ---------- */
.services-core{background:linear-gradient(180deg,var(--paper) 0%,var(--seafoam-wash) 100%)}
.core-title{font-family:var(--display);font-weight:300;font-size:clamp(32px,4.6vw,58px);
  letter-spacing:-.02em;line-height:1.08;max-width:18ch;margin:0 0 clamp(36px,4.5vw,56px)}
.core-title em{font-style:normal;color:var(--seafoam-deep)}
.practice{position:relative;transition:background .3s,transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s}
.practice::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--seafoam),var(--brass));transition:width .6s cubic-bezier(.22,.61,.36,1)}
.practice:hover{transform:translateY(-6px);box-shadow:0 20px 44px -24px rgba(18,48,43,.4);z-index:2}
.practice:hover::before{width:100%}

/* ---------- outcomes: bigger, darker, counted ---------- */
.outcomes{background:var(--seafoam-deep);color:var(--paper);counter-reset:out}
.outcomes .olist{margin-top:0;border-top:1px solid rgba(251,250,247,.2)}
.outcomes .o{counter-increment:out;grid-template-columns:3.2em minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);padding:clamp(20px,2.3vw,30px) 0;align-items:center;position:relative;
  border-bottom:1px solid rgba(251,250,247,.2)}
.outcomes .o::before{content:counter(out,decimal-leading-zero);font-family:var(--text);
  font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--seafoam-wash)}
.outcomes .o h3{font-size:clamp(28px,3.6vw,46px);color:var(--paper);font-weight:300;
  transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.outcomes .o h3 .dot{color:var(--brass-lift)}
.outcomes .o p{color:rgba(251,250,247,.88);opacity:1}
.outcomes .o::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--brass-lift);transition:width 1s cubic-bezier(.22,.61,.36,1) .2s}
.outcomes .o.in::after{width:100%}
.outcomes .o:hover h3{transform:translateX(10px)}
.outcomes .o:nth-child(2){transition-delay:.08s}
.outcomes .o:nth-child(3){transition-delay:.16s}
.outcomes .o:nth-child(4){transition-delay:.24s}
.outcomes .o:nth-child(5){transition-delay:.32s}
@media (max-width:760px){.outcomes .o{grid-template-columns:2.6em minmax(0,1fr)}
  .outcomes .o p{grid-column:2}}

/* ---------- why swan: the three phrases as a statement ---------- */
.trio{background:var(--seafoam);padding:clamp(44px,5vw,76px) 0}
.trio-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}
.trio-item{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.3vw,44px);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0;padding-top:22px;
  border-top:2px solid rgba(18,48,43,.35)}
.trio-item .dot{color:var(--paper)}
.trio-item:nth-child(2){transition-delay:.15s}
.trio-item:nth-child(3){transition-delay:.3s}
.story{overflow:hidden}
.story .wrap{position:relative}
.story-body{max-width:62ch;position:relative;z-index:1}
.story-body p{color:var(--slate);font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.72}
.story-body p:first-child{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.7vw,34px);
  line-height:1.34;color:var(--ink);letter-spacing:-.01em;margin-bottom:30px}
.swanmark{position:absolute;right:clamp(-20px,2vw,40px);top:50%;width:clamp(220px,30vw,440px);
  height:auto;color:var(--seafoam);opacity:0;transform:translateY(-44%) scale(.94);
  transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.swanmark.in{opacity:.14;transform:translateY(-50%) scale(1)}
@media (max-width:760px){.trio-row{grid-template-columns:1fr}.swanmark{opacity:0!important}}

@media (prefers-reduced-motion:reduce){
  .art.spin.in,.art.breathe.in,.art.globe.in ellipse,.support-art.breathe.in,.method.in::after{animation:none}
  .method .step{opacity:1;transform:none;transition:none}
  .method .step .num{transition:none}
  .outcomes .o::after{transition:none;width:100%}
  .practice,.practice::before,.outcomes .o h3,.swanmark{transition:none}
  .practice:hover,.outcomes .o:hover h3{transform:none}
  .swanmark{opacity:.14;transform:translateY(-50%)}
}

/* the one-line disciplines row cannot fit a phone; let it wrap there so the
   page is not pushed wider than the screen */
@media (max-width:700px){
  .band .disciplines{flex-wrap:wrap;white-space:normal;row-gap:4px;font-size:clamp(19px,5.6vw,24px)}
}

/* =====================================================================
   Bright seafoam, one section per interior page (2026-09-12).
   Only ink reads on this ground (4.91:1). Slate, deep seafoam, paper and
   brass all fail, so every piece of text and every line here is ink.
   ===================================================================== */
.bright,.services-core,.stages,.phead.bright{background:var(--seafoam);color:var(--ink)}
.bright .eyebrow,.services-core .eyebrow,.phead.bright .eyebrow,
.bright .lead,.bright p,.bright .body p,
.services-core .core-title,.services-core .core-title em,
.phead.bright h1,.phead.bright h1 em,.phead.bright .lede,
.phead.bright .crumb,.phead.bright .crumb a{color:var(--ink)}
.bright .eyebrow::before,.services-core .eyebrow::before,.phead.bright .eyebrow::before{background:var(--ink)}
.bright .motif *,.phead.bright .art *{stroke:var(--ink)}
.bright .motif,.phead.bright .art{opacity:.55}

/* how we work, on bright seafoam */
.stages .step h3,.stages .step .role,.stages .step p{color:var(--ink)}
.stages .method{border-top-color:rgba(18,48,43,.35)}
.stages .step{border-right-color:rgba(18,48,43,.22)}
.stages .method .step .num{border-color:var(--ink);color:var(--ink)}
.stages .method.in .step .num{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.stages .step::before{background:var(--ink)}
.stages .method::after{background:var(--paper);box-shadow:0 0 0 6px rgba(251,250,247,.35)}
.stages .method .step:hover{background:rgba(251,250,247,.35)}

/* How We Work: the four stages as paper cards on the bright seafoam,
   so they stand forward. Text inside returns to its normal colours,
   since it now sits on paper rather than seafoam. (2026-09-12) */
.stages .method{border-top:0;gap:14px;padding-top:26px}
.stages .method .step{background:var(--paper);border-right:0;padding:30px 26px 32px;
  box-shadow:0 1px 0 rgba(18,48,43,.06)}
.stages .step h3{color:var(--ink)}
.stages .step .role{color:var(--seafoam-deep)}
.stages .step p{color:var(--slate)}
.stages .method .step .num{border-color:var(--seafoam);color:var(--seafoam-deep)}
.stages .method.in .step .num{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.stages .step::before{background:var(--brass);top:0}
/* the highlight: wash tint plus a small lift */
.stages .method .step{transition:opacity .7s ease,transform .45s cubic-bezier(.22,.61,.36,1),
  background .3s,box-shadow .35s}
.stages .method.in .step:hover{background:var(--seafoam-wash);transform:translateY(-5px);
  box-shadow:0 18px 38px -22px rgba(18,48,43,.45)}
/* the travelling dot now runs along the top of the row of cards */
.stages .method::after{top:6px;background:var(--brass);box-shadow:0 0 0 6px rgba(251,250,247,.45)}
@media (prefers-reduced-motion:reduce){.stages .method.in .step:hover{transform:none}}
/* two card columns leave about 108px of text width on a phone; stack them */
@media (max-width:600px){.stages .method{grid-template-columns:1fr}}

/* =====================================================================
   Contact and thank-you pages (2026-09-12). The form and calendar sit
   on paper cards over the bright seafoam, so everything outside the
   cards is ink (see the bright seafoam note above).
   ===================================================================== */
.talk{background:var(--seafoam);color:var(--ink)}
.talk .eyebrow{color:var(--ink)}
.talk .eyebrow::before{background:var(--ink)}
.talk-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(36px,6vw,96px);align-items:start}
.nextsteps{list-style:none;margin:0;padding:0}
.nextsteps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:22px 0;
  border-top:1px solid rgba(18,48,43,.28)}
.nextsteps li:last-child{border-bottom:1px solid rgba(18,48,43,.28)}
.nextsteps li:nth-child(2){transition-delay:.12s}
.nextsteps li:nth-child(3){transition-delay:.24s}
.nextsteps .n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--paper);color:var(--ink);font-size:13px;font-weight:700;
  letter-spacing:.08em}
.nextsteps h3{font-size:clamp(21px,2vw,25px);margin:9px 0 6px;color:var(--ink)}
.nextsteps p{margin:0;color:var(--ink);font-size:15.5px}
.direct{margin:28px 0 0;color:var(--ink);font-size:15.5px}
.direct a{color:var(--ink);font-weight:600;text-underline-offset:3px}

.formcard,.calcard{position:relative;background:var(--paper);border-radius:4px;
  padding:clamp(26px,3.4vw,44px);box-shadow:0 30px 60px -36px rgba(18,48,43,.55)}
.formcard::before,.calcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--seafoam),var(--brass))}
.formcard-title{font-size:clamp(26px,2.8vw,34px);font-weight:300;margin:0 0 8px}
.formcard-sub{color:var(--slate);font-size:15px;margin:0 0 24px}
.ghl-slot iframe{display:block;width:100%}

/* preview placeholders, shown until a GoHighLevel id is filled in */
.slot-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-deep);background:var(--brass-wash);
  padding:6px 10px;border-radius:2px;margin:0 0 22px}
.pv-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pv-field{margin:0 0 16px}
.pv-field span{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.pv-field i{display:block;height:46px;border:1px solid #CFD6D3;border-radius:3px;background:var(--white)}
.pv-field.tall i{height:120px}
.pv-btn{display:inline-block;background:var(--brass);color:var(--ink);font-weight:600;
  font-size:14.5px;padding:13px 28px;border-radius:2px;margin-top:6px}

.book-head{max-width:44ch;margin:0 0 clamp(30px,4vw,48px)}
.book-title{font-size:clamp(30px,4.2vw,52px);font-weight:300;margin:0 0 18px;color:var(--ink)}
.book-title em{font-style:normal}
.book-head p{color:var(--ink)}
.calcard{max-width:940px}
.book .direct{margin-top:34px}
.pv-cal{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(22px,3.4vw,44px)}
.pv-month{font-family:var(--display);font-size:22px;margin:0 0 14px}
.pv-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.pv-grid b{font-size:11.5px;font-weight:600;color:var(--slate);text-align:center;padding-bottom:4px}
.pv-grid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--slate);border-radius:50%}
.pv-grid span.av{background:var(--seafoam-wash);color:var(--ink);font-weight:600}
.pv-grid span.sel{background:var(--brass);color:var(--ink);font-weight:700}
.pv-times p{font-size:13.5px;font-weight:600;margin:0 0 12px}
.pv-times span{display:block;border:1px solid var(--seafoam);color:var(--seafoam-deep);
  text-align:center;padding:11px;border-radius:3px;margin-bottom:10px;font-weight:600;font-size:14.5px}

@media (max-width:900px){
  .talk-grid,.pv-cal{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pv-row{grid-template-columns:1fr;gap:0}
}

/* thank-you page: the brand statement closes the page while booking is not live */
[hidden]{display:none!important}
.thanks-trio .direct{margin-top:clamp(30px,3.4vw,46px)}

/* =====================================================================
   2026-09-15 (Hels): header drawings sit beside the headline rather than
   out on the far edge of the screen. The drawing is now in the same row
   as the text, a set distance from it, on every screen width.
   ===================================================================== */
.phead .wrap{display:grid;grid-template-columns:minmax(0,max-content) auto;
  column-gap:clamp(56px,6vw,110px);align-items:center;justify-content:start}
/* the drawing takes no height of its own (the negative margins cancel it), so
   headers stay the height of their text, and it is a little smaller so the
   text column keeps its width */
.phead .art{position:relative;right:auto;top:auto;bottom:auto;z-index:0;
  width:clamp(180px,19vw,280px);height:clamp(180px,19vw,280px);
  margin:calc(clamp(180px,19vw,280px) / -2) 0}
@media (max-width:1040px){
  .phead .wrap{grid-template-columns:minmax(0,1fr)}
  .phead .art{position:absolute;right:-40px;top:0;bottom:0;margin:auto 0;opacity:.22;z-index:-1;
    width:clamp(200px,23vw,330px);height:clamp(200px,23vw,330px)}
}

/* Why Swan and thank-you: the dots in the seafoam statement are amber, as elsewhere */
.trio-item .dot{color:var(--brass)}
/* Services has the long headline, so its drawing and gap are smaller to keep the line length */
@media (min-width:1041px){
  .phead.long .wrap{column-gap:clamp(40px,4vw,64px)}
  .phead.long .art{width:clamp(160px,15vw,220px);height:clamp(160px,15vw,220px);
    margin:calc(clamp(160px,15vw,220px) / -2) 0}
}

/* How We Work support statement: the coil sits beside the text, like the header
   drawings, instead of out at the right edge of the screen (2026-09-15) */
.support .wrap{display:grid;grid-template-columns:minmax(0,max-content) auto;
  column-gap:clamp(56px,6vw,110px);align-items:center;justify-content:start}
.support-art{position:relative;right:auto;top:auto;bottom:auto;
  width:clamp(180px,20vw,280px);height:clamp(180px,20vw,280px);
  margin:calc(clamp(180px,20vw,280px) / -2) 0}
@media (max-width:1040px){
  .support .wrap{grid-template-columns:minmax(0,1fr)}
  .support-art{position:absolute;right:-30px;top:0;bottom:0;margin:auto 0;opacity:.18;z-index:-1;
    width:clamp(180px,22vw,300px);height:clamp(180px,22vw,300px)}
}

/* Why Swan and thank-you (Hels, 2026-09-15): "thinking." on its own line, so all three phrases
   sit on two lines. On phones the phrases stack one per row and fit on a line each, so no break there. */
@media (max-width:760px){.trio-br{display:none}}

/* page not found (2026-09-15) */
.lost-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(24px,4vw,56px)}
.lost-links li{border-top:1px solid rgba(18,48,43,.28)}
.lost-links a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;color:var(--ink);
  text-decoration:none;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.015em;transition:padding .3s}
.lost-links a::after{content:"→";font-family:var(--text);font-size:.7em;transition:transform .3s}
.lost-links a:hover{padding-left:6px}
.lost-links a:hover::after{transform:translateX(6px)}
@media (max-width:760px){.lost-links{grid-template-columns:1fr}}