:root{
  --green:#003c32; --teal:#1e6e64; --maroon:#672241; --amber:#f3a949;
  --blue:#1e506e; --mist:#f4f5f9; --ink:#0d1f1b; --body:#3c4b47;
  --line:#e3e7ee; --rad:14px;
  --display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--amber);color:var(--green)}
body{font-family:var(--sans);color:var(--body);background:#fff;font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(315deg,rgba(0,60,50,.30) 0%,rgba(0,60,50,.14) 24%,rgba(30,110,100,.06) 46%,#fff 74%)}
.bg-lines{position:fixed;left:0;bottom:0;width:min(58vw,720px);height:auto;z-index:-1;pointer-events:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{font-family:var(--display);color:var(--green);font-weight:600;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.8rem)}
h4,h5{color:var(--green);line-height:1.35}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon);margin-bottom:1rem}
.eyebrow.light{color:var(--amber)}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.65;max-width:44em}
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--green);color:#fff;font-weight:600;font-size:.95rem;
  padding:.85em 1.6em;border-radius:999px;border:2px solid var(--green);cursor:pointer;font-family:var(--sans);
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.btn:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-2px)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:var(--green);color:#fff;border-color:var(--green)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--green)}
.btn.amber:hover{background:#fff;border-color:#fff}
.btn.sm{padding:.6em 1.2em;font-size:.85rem}
.arr{width:1.05em;height:1.05em;flex:none}

/* header */
#hd{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
#hd.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(0,60,50,.07)}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:44px;width:auto;transition:height .3s}
#hd.scrolled .brand img{height:38px}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav>a,.nav-drop>button{font-size:.92rem;font-weight:600;color:var(--ink);background:none;border:0;cursor:pointer;
  font-family:var(--sans);display:inline-flex;align-items:center;gap:.35em;padding:.4em 0;position:relative}
.nav>a:after,.nav-drop>button:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2.5px;background:var(--amber);transition:right .3s}
.nav>a:hover:after,.nav>a.active:after,.nav-drop>button.active:after,.nav-drop:hover>button:after{right:0}
.nav-drop>button svg{width:.9em;height:.9em;transition:transform .25s}
.nav-drop{position:relative}
.nav-drop:hover>button svg,.nav-drop.open>button svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,60,50,.16);
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav-drop:hover .drop,.nav-drop.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop:before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.mega{display:flex;width:min(860px,94vw);overflow:hidden}
.mega-left{width:315px;flex:none;background:var(--mist);padding:12px;display:flex;flex-direction:column;gap:2px}
.mega-p{display:flex;align-items:center;gap:11px;padding:.7em .85em;border-radius:10px;font-size:.88rem;font-weight:600;
  color:var(--ink);transition:background .2s,color .2s}
.mega-p .pic{width:21px;height:21px;flex:none;color:var(--teal)}
.mega-p span{flex:1;line-height:1.3}
.mega-chev{width:.85em;height:.85em;flex:none;opacity:0;transition:opacity .2s,transform .2s}
.mega-p.active{background:#fff;color:var(--green);box-shadow:0 4px 14px rgba(0,60,50,.08)}
.mega-p.active .mega-chev{opacity:1;transform:translateX(2px)}
.mega-right{flex:1;position:relative;padding:22px 26px;min-height:100%}
.mega-svcs{display:none}
.mega-svcs.active{display:block;animation:megain .25s ease}
@keyframes megain{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.mega-view{display:flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;font-size:.98rem;
  color:var(--green);padding-bottom:.9em;margin-bottom:.9em;border-bottom:2px solid var(--acc)}
.mega-view .arr{width:.95em;height:.95em;transition:transform .2s}
.mega-view:hover .arr{transform:translateX(4px)}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
.mega-links a{display:block;padding:.42em .55em;margin-left:-.55em;border-radius:7px;font-size:.83rem;font-weight:500;
  color:var(--body);line-height:1.35}
.mega-links a:hover{background:var(--mist);color:var(--green)}
.mega-soon{padding:.42em .55em;margin-left:-.55em;font-size:.78rem;color:#9aa6b5;font-style:italic}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff;
  padding:.8em 1.4em;border-radius:0 0 10px 0;font-weight:600;font-size:.92rem}
.skip:focus{left:0}
html{caret-color:var(--teal);scrollbar-color:var(--teal) var(--mist)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--mist)}
::-webkit-scrollbar-thumb{background:#bcccc6;border-radius:99px;border:3px solid var(--mist)}
::-webkit-scrollbar-thumb:hover{background:var(--teal)}
.hd-right{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.lang{display:flex;align-items:center;gap:2px;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.lang-opt{font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--body);
  padding:.3em .8em;border-radius:999px;line-height:1.55;white-space:nowrap;transition:background .22s,color .22s}
.lang-opt:hover{color:var(--green)}
.lang-opt.active{background:var(--green);color:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2.5px;background:var(--green);margin:5px 0;border-radius:2px;transition:transform .3s,opacity .3s}
body.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;gap:2px;padding:0 24px;background:#fff;border-bottom:0 solid var(--line);
  max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}
body.menu-open .mnav{max-height:80vh;overflow:auto;padding:12px 24px 28px;border-bottom-width:1px}
/* the panel scrolls internally, so stop the page scrolling behind it */
body.menu-lock{overflow:hidden}
.mnav>a{padding:.6em 0;font-weight:600;color:var(--ink);border-bottom:1px solid var(--mist)}
.mnav .m-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);font-weight:700;margin-top:1em}
.m-acc{border-bottom:1px solid var(--mist)}
.m-p{display:flex;align-items:center}
.m-p a{flex:1;padding:.6em 0;font-weight:600;color:var(--ink);font-size:.95rem}
.m-p button{background:none;border:0;padding:.5em .2em .5em 1em;cursor:pointer;color:var(--teal)}
.m-p button svg{width:1.15em;height:1.15em;transition:transform .3s}
.m-acc.open .m-p button svg{transform:rotate(180deg)}
.m-svcs{max-height:0;overflow:hidden;transition:max-height .35s ease}
.m-acc.open .m-svcs{max-height:640px}
.m-svc{display:block;padding:.45em 0 .45em 1.1em;font-size:.86rem;font-weight:500;color:var(--body);
  border-left:2px solid var(--line)}
.m-svc:hover{color:var(--green);border-left-color:var(--teal)}
.mnav .btn{margin-top:1.2em;justify-content:center}

/* pages */
main{padding-top:76px}
.page{display:none}
.page.active{display:block;animation:pagein .55s ease both}
@keyframes pagein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(60px,8vw,110px) 0 clamp(50px,7vw,90px);background:
  radial-gradient(1200px 600px at 85% -10%,rgba(30,110,100,.07),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-in{position:relative}
/* homepage headline: its own display face, sized so the sentence sets
   on three lines in the hero column rather than five */
.hero h1{font-family:"Source Serif 4","Georgia",serif;font-weight:600;
  font-size:clamp(1.95rem,3.55vw,2.75rem);line-height:1.2;letter-spacing:-.005em;
  max-width:14.5em;margin-bottom:.5em}
.hero-photo{position:relative;padding:26px}
.hero-photo img{border-radius:20px;aspect-ratio:4/3.1;object-fit:cover;width:100%;
  box-shadow:0 30px 70px rgba(0,60,50,.22);position:relative;z-index:1}
.hero-arcs{position:absolute;inset:-26px -34px auto auto;width:62%;z-index:0;opacity:.9}
.hero-photo:after{content:"";position:absolute;left:6px;bottom:6px;width:46%;height:46%;
  border-left:4px solid var(--amber);border-bottom:4px solid var(--amber);border-radius:0 0 0 24px;z-index:2}
.hero-badge{position:absolute;z-index:3;left:-6px;bottom:34px;background:var(--green);color:#fff;border-radius:14px;
  padding:14px 20px;box-shadow:0 18px 40px rgba(0,60,50,.3);max-width:270px;animation:floaty 5.5s ease-in-out infinite}
.hero-badge b{display:block;font-family:var(--display);font-size:1.02rem;margin-bottom:.15em;color:var(--amber)}
.hero-badge span{font-size:.78rem;line-height:1.5;color:#d5e3df}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero h1 em{font-style:italic;color:var(--teal);position:relative;white-space:nowrap}
.hero h1 em:after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.14em;background:var(--amber);opacity:.55;border-radius:2px;
  transform:scaleX(0);transform-origin:left;animation:underline 1s .9s ease forwards}
@keyframes underline{to{transform:scaleX(1)}}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2rem}
.stats{display:flex;gap:clamp(24px,5vw,64px);margin-top:clamp(36px,5vw,60px);flex-wrap:wrap}
.stat b{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--green);display:block;line-height:1}
.stat span{font-size:.85rem;max-width:14em;display:block;margin-top:.4em}
.spin-slow{animation:spin 26s linear infinite}
.spin-rev{animation:spinrev 20s linear infinite}
.spin-slow2{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}
.pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;r:5}50%{opacity:1;r:8}}

/* sections */
.sect{padding:clamp(64px,9vw,110px) 0}
.sect.alt{background:rgba(244,245,249,.55)}
.sect-lead{max-width:46em;margin:1em 0 0;font-size:1.05rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;margin-top:clamp(32px,4vw,52px)}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  display:flex;flex-direction:column;color:var(--body);overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.pcard:hover{transform:translateY(-7px);box-shadow:0 24px 48px rgba(0,60,50,.14);border-color:transparent}
.pcard-bar{position:absolute;inset:0 0 auto;height:4px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .35s;z-index:3}
.pcard:hover .pcard-bar{transform:scaleX(1)}
.pcard-img{position:relative;display:block;height:172px;overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcard-ic{position:absolute;left:22px;top:146px;width:52px;height:52px;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,60,50,.16);z-index:2}
.pcard-body{display:flex;flex-direction:column;gap:.7em;flex:1;padding:38px 26px 22px}
.pic{width:40px;height:40px;color:var(--acc)}
.pcard-ic .pic{width:27px;height:27px}
.pcard h3{font-size:1.22rem}
.pcard p{font-size:.92rem;flex:1}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.6em;color:var(--green);font-weight:600;font-size:.88rem}
.pcard-foot em{font-style:normal;color:var(--maroon);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.pcard-foot .arr{transition:transform .3s}
.pcard:hover .pcard-foot .arr{transform:translateX(5px)}

.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,80px);align-items:start}
.about-grid p{margin-top:1.1em}
.about-img{border-radius:var(--rad);aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:18px;
  box-shadow:0 20px 46px rgba(0,60,50,.16)}
.team-banner{border-radius:var(--rad);width:100%;aspect-ratio:5/2;object-fit:cover;margin-top:clamp(28px,4vw,44px);
  box-shadow:0 22px 50px rgba(0,60,50,.14)}
.vlist{display:flex;flex-direction:column;gap:16px}
.vcard{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:22px 24px}
.vcard h4{margin-bottom:.25em}
.vcard p{font-size:.92rem}
.dm{width:11px;height:11px;flex:none;margin-top:.45em;transform:rotate(45deg);border-radius:2px}

.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;margin-top:clamp(30px,4vw,48px)}
.tcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:10px;padding:24px 26px;transition:transform .3s,box-shadow .3s}
.tcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,60,50,.1)}
.tcard h4{margin-bottom:.35em}
.tcard p{font-size:.92rem}

/* team member cards */
/* leadership row: two wide cards; the rest fall into a 3-up grid below */
.tm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;margin-top:clamp(26px,4vw,40px)}
.tm-grid.lead-row{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.tm-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:30px 24px 26px;text-align:center;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.tm-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,60,50,.1);border-color:#cfd6e2}
/* photo + monogram share one avatar box so both variants line up on a row */
.tm-ph{width:112px;height:112px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;background:linear-gradient(140deg,#eaf1ee,#f4f5f9);
  box-shadow:0 10px 26px rgba(0,60,50,.14);border:3px solid #fff;outline:1px solid var(--line);
  transition:transform .35s,box-shadow .35s}
.tm-card:hover .tm-ph{transform:scale(1.05);box-shadow:0 16px 34px rgba(0,60,50,.2)}
.tm-ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.tm-grid.lead-row .tm-ph{width:132px;height:132px}
/* no photograph supplied yet — a neutral avatar icon, sized to match the photo circles */
.tm-ph.is-icon{background:linear-gradient(140deg,#eef3f1,#f4f5f9);color:#94a2b0}
.tm-ph.is-icon svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.tm-card h4{font-size:1.08rem;margin-bottom:.25em}
.tm-nick{font-family:var(--sans);font-size:.82rem;font-weight:500;color:#8b96a4;white-space:nowrap}
.tm-role{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);margin-bottom:.7em}
.tm-card p{font-size:.89rem;line-height:1.6}
.tm-card>:last-child{margin-bottom:0}
.tm-loc{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--teal);
  background:rgba(30,110,100,.09);border-radius:999px;padding:.32em .85em}
.tm-loc svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tm-note{font-size:.85rem;color:#7d8896;margin-top:clamp(22px,3vw,30px);padding-top:1.1em;border-top:1px dashed var(--line)}
.mock-note{display:flex;gap:12px;align-items:flex-start;background:rgba(243,169,73,.12);border:1.5px dashed #e0b477;
  border-radius:var(--rad);padding:18px 22px;margin-top:clamp(24px,3vw,34px);font-size:.9rem;color:#7d5a1f}
.mock-note svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:#b8860b;fill:none;stroke-width:1.8;stroke-linecap:round}
.mock-note b{color:#6b4c1a}
.creed{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6em}
.creed span{font-family:var(--display);font-size:clamp(1.05rem,2vw,1.4rem);font-style:italic;color:var(--teal)}
.creed i{color:var(--amber);font-style:normal}
.origin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;margin-top:clamp(26px,3vw,38px)}
.origin{background:#fff;border:1px solid var(--line);border-top:4px solid var(--acc,#1e6e64);border-radius:10px;padding:24px 26px}
.origin h4{margin-bottom:.4em;font-size:1.05rem}
.origin p{font-size:.91rem}

.part-strip{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.part-strip p{margin-top:1em;max-width:36em}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--green) 0%,#0a5245 55%,var(--teal) 100%);padding:clamp(56px,8vw,90px) 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta-band h2{color:#fff;max-width:16em}

/* practice hero */
.p-hero{padding:clamp(48px,7vw,84px) 0 clamp(30px,4vw,48px);background:
  radial-gradient(900px 420px at 90% 0%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 65%)}
.crumb{display:flex;gap:.6em;font-size:.82rem;margin-bottom:2.2em;flex-wrap:wrap}
.crumb span{color:#9aa6b5}
.crumb b{color:var(--green);font-weight:600}
.p-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,64px);align-items:center}
.p-hero-art{position:relative;padding:16px 16px 0 0}
.p-hero-art img{width:100%;border-radius:16px;aspect-ratio:4/3.1;object-fit:cover;position:relative;z-index:1;
  box-shadow:0 24px 56px rgba(0,60,50,.18)}
.p-hero-art:after{content:"";position:absolute;right:2px;top:2px;width:44%;height:44%;
  border-right:4px solid var(--acc);border-top:4px solid var(--acc);border-radius:0 20px 0 0;z-index:2;opacity:.85}
.ph-arcs{position:absolute;left:-38px;bottom:-30px;width:52%;z-index:0}
.p-count{margin-top:1.6em;font-size:.92rem;color:var(--maroon)}
.p-count b{font-family:var(--display);font-size:1.5em}

/* practice body: sidebar + one-service views */
.p-body{padding:clamp(36px,5vw,64px) 0 clamp(56px,8vw,96px)}
.p-body-grid{display:grid;grid-template-columns:288px minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.p-side{position:sticky;top:96px;min-width:0}
.p-views{min-width:0}
.p-side-label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);margin-bottom:.9em}
.p-side-nav{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.p-tab{display:flex;gap:10px;align-items:baseline;padding:.6em .9em;margin-left:-2px;border-left:2px solid transparent;
  font-size:.86rem;font-weight:600;color:var(--body);line-height:1.35;border-radius:0 9px 9px 0;
  transition:background .2s,color .2s,border-color .2s}
.p-tab i{font-style:normal;font-family:var(--display);font-weight:700;color:var(--acc);opacity:.5;font-size:.8rem;flex:none}
.p-tab:hover{background:var(--mist);color:var(--green)}
.p-tab.active{border-left-color:var(--acc);background:var(--mist);color:var(--green)}
.p-tab.active i{opacity:1}
.p-tab.soon{color:#9aa6b5;font-style:italic;cursor:default;font-weight:500}
.p-tab.soon:hover{background:none;color:#9aa6b5}

/* single service view */
.svc-view{display:none}
.svc-view.active{display:block;animation:pagein .45s ease both}
.svc-head{border-bottom:1px solid var(--line);padding-bottom:1.7em;margin-bottom:1.9em}
.svc-kicker{display:flex;align-items:center;gap:.8em;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--maroon);margin-bottom:.7em}
.svc-num{font-family:var(--display);font-size:1.7rem;color:var(--acc);font-weight:600}
.svc-title{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.svc-tag{font-family:var(--display);font-style:italic;font-size:1.13rem;color:var(--teal);line-height:1.5;margin-top:.45em;max-width:36em}
.glance{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}
.gl-item{display:inline-flex;align-items:center;gap:.55em;background:rgba(255,255,255,.72);border:1px solid var(--line);
  border-radius:999px;padding:.42em 1em;font-size:.82rem;color:var(--body)}
.gl-item b{font-family:var(--display);font-size:1.08rem;color:var(--green)}
.gl-ic{width:17px;height:17px;color:var(--acc);display:inline-flex;flex:none}
.gl-ic svg{width:100%;height:100%}
.svc-desc p{margin-bottom:1.1em;max-width:46em}
.blk-h{display:flex;align-items:center;gap:.7em;font-size:1.15rem;margin:2.2em 0 .5em;font-family:var(--display);font-weight:600}
.blk-bar{width:30px;height:4px;border-radius:2px;flex:none;background:var(--acc,#1e6e64)}
.svc-view .dm{background:var(--acc,#1e6e64)}

/* process journey: animated palette timeline */
@keyframes tl-flow{to{-webkit-mask-position:26px 0;mask-position:26px 0}}
@keyframes tl-flow-y{to{-webkit-mask-position:0 26px;mask-position:0 26px}}
@keyframes tl-ring{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.9);opacity:0}}
@keyframes node-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes seg-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes seg-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.steps{display:flex;margin-top:2.6em;position:relative;counter-reset:sp}
.step{flex:1;min-width:0;position:relative;counter-increment:sp;text-align:center;padding:0 8px;outline:none}
.step:before{content:"";position:absolute;top:21px;left:0;right:0;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--c1,#1e6e64),var(--c2,#1e6e64));transform-origin:left;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 15px,transparent 15px 26px);
  mask:repeating-linear-gradient(90deg,#000 0 15px,transparent 15px 26px);
  animation:tl-flow 1.5s linear infinite}
.step.rv.in:before{animation:seg-grow .7s ease calc(var(--i,0)*170ms + 80ms) backwards,tl-flow 1.5s linear infinite}
.step:first-child:before{left:50%}
.step:last-child:before{right:50%}
.step.has-d{cursor:pointer}
.step:hover,.step.open,.step:focus-visible{z-index:30}
.step-n{width:48px;height:48px;border-radius:50%;background:var(--c1,#1e6e64);color:var(--ct,#fff);margin:0 auto;
  font-family:var(--display);font-weight:700;font-size:1.08rem;display:flex;align-items:center;justify-content:center;
  border:3px solid #fff;box-shadow:0 8px 18px rgba(0,60,50,.25);position:relative;z-index:1;transition:transform .3s}
.step.rv.in .step-n{animation:node-pop .6s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0)*170ms + 260ms) backwards}
.step:hover .step-n,.step.open .step-n,.step:focus-visible .step-n{transform:scale(1.14)}
.step-n:before{content:counter(sp)}
.step-n:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--c1,#1e6e64);
  animation:tl-ring 3s ease-out infinite;animation-delay:calc(var(--i,0)*.5s)}
.step h5{font-size:.88rem;line-height:1.35;margin-top:.8em}
.step-more{width:30px;height:30px;border-radius:50%;background:#fff;border:1.5px solid var(--c1,#1e6e64);
  color:var(--c1,#1e6e64);display:inline-flex;align-items:center;justify-content:center;margin-top:.65em;
  box-shadow:0 6px 14px rgba(0,60,50,.15);transition:background .25s,color .25s}
.step-more svg{width:14px;height:14px;transition:transform .3s}
.step:hover .step-more,.step.open .step-more,.step:focus-visible .step-more{background:var(--c1,#1e6e64);color:var(--ct,#fff)}
/* click-to-expand: hover only highlights, the chevron flips while the panel is open */
.step.open .step-more svg{transform:rotate(180deg)}
.step-pop{position:absolute;left:50%;top:calc(100% + 14px);width:min(320px,86vw);transform:translate(-50%,-10px);
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--c1,#1e6e64);border-radius:12px;
  box-shadow:0 26px 60px rgba(0,60,50,.2);padding:16px 18px;z-index:40;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
.step:first-child .step-pop{left:0;transform:translate(0,-10px)}
.step:last-child .step-pop{left:auto;right:0;transform:translate(0,-10px)}
.step.open .step-pop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.step:first-child.open .step-pop{transform:translate(0,0)}
.step:last-child.open .step-pop{transform:translate(0,0)}
.step-pop:after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-8px;border:8px solid transparent;
  border-bottom-color:var(--c1,#1e6e64);filter:drop-shadow(0 -2px 1px rgba(0,60,50,.08))}
.step:first-child .step-pop:after{left:32px;margin-left:0}
.step:last-child .step-pop:after{left:auto;right:32px;margin-left:0}
.step-pop ul{padding-left:1.15em;font-size:.85rem;line-height:1.55}
.step-pop li{margin-bottom:.35em}
.step-pop li:last-child{margin-bottom:0}
@media (max-width:700px){
  .steps{flex-direction:column;gap:20px}
  .step{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;text-align:left;padding:0}
  .step:before{left:22px;top:-12px;bottom:-12px;width:4px;height:auto;right:auto;transform-origin:top;
    background:linear-gradient(180deg,var(--c1,#1e6e64),var(--c2,#1e6e64));
    -webkit-mask:repeating-linear-gradient(180deg,#000 0 15px,transparent 15px 26px);
    mask:repeating-linear-gradient(180deg,#000 0 15px,transparent 15px 26px);
    animation:tl-flow-y 1.5s linear infinite}
  .step.rv.in:before{animation:seg-grow-y .7s ease calc(var(--i,0)*170ms + 80ms) backwards,tl-flow-y 1.5s linear infinite}
  .step:first-child:before{left:22px;top:24px}
  .step:last-child:before{bottom:auto;height:24px}
  .step-n{margin:0}
  .step h5{margin:0}
  .step-more{grid-column:2;justify-self:start;margin-top:.5em}
  /* inline accordion below 700px: animate the height, and strip every card surface
     — background included — so the detail reads as page text, not a floating box */
  .step-pop{position:static;grid-column:2;width:auto;visibility:visible;transform:none;box-shadow:none;
    background:none;border:0;border-radius:0;padding:0;margin:0;opacity:0;max-height:0;overflow:hidden;
    transition:max-height .25s ease,opacity .2s ease,margin-top .25s ease}
  .step-pop:after{display:none}
  .step.open .step-pop{opacity:1;max-height:600px;margin-top:8px}
  /* the desktop pop is centred on the node with translate(-50%); once it flows
     in the grid that shift pushes the middle steps off the left edge */
  .step.open .step-pop,.step:first-child .step-pop,.step:last-child .step-pop{transform:none}
}

/* prev/next service */
.svc-pn{display:flex;justify-content:space-between;gap:16px;margin-top:2.6em;border-top:1px solid var(--line);padding-top:1.4em}
.spn{max-width:46%}
.spn span{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--maroon);font-weight:700;margin-bottom:.3em}
.spn b{font-family:var(--display);color:var(--green);font-size:.98rem;line-height:1.3;font-weight:600}
.spn.next{text-align:right;margin-left:auto}
.spn:hover b{color:var(--teal)}
.spn.empty{visibility:hidden}
.blk-tag{font-weight:600;color:var(--ink);margin-bottom:.7em}
.blk-p{font-size:.95rem;margin-bottom:.8em;max-width:46em}
.ess-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-top:1.2em}
.ess-item{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;
  transition:transform .3s,box-shadow .3s}
.ess-n{flex:none;width:42px;height:42px;border-radius:11px 11px 11px 3px;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:1.05rem;
  box-shadow:0 6px 14px rgba(0,60,50,.14)}
.ess-item:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,60,50,.09)}
.ess-item h5{font-size:.97rem;margin-bottom:.25em}
.ess-item p{font-size:.88rem;line-height:1.55}
.pull{display:flex;gap:14px;align-items:flex-start;font-family:var(--display);font-style:italic;font-size:1.06rem;
  color:var(--green);border-left:4px solid var(--amber);background:rgba(243,169,73,.07);border-radius:0 12px 12px 0;
  padding:1em 1.3em;margin-top:1.4em;max-width:44em;line-height:1.6}
.pull-ic{flex:none;width:26px;height:26px;color:var(--amber);margin-top:.1em}
.pull-ic svg{width:100%;height:100%}

/* helps */
.helps{margin-top:2.4em;background:linear-gradient(160deg,#eef5f2,#f6f9f7);border:1px solid #dbe7e2;border-radius:var(--rad);
  padding:clamp(22px,3vw,36px)}
.helps h4{font-family:var(--display);font-size:1.15rem;margin-bottom:1em}
.helps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.help-item{display:flex;gap:12px}
.help-item h5{font-size:.95rem;margin-bottom:.15em}
.help-item p{font-size:.88rem;line-height:1.55}
.ck{width:22px;height:22px;flex:none;margin-top:2px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ck circle{fill:rgba(30,110,100,.1);stroke:none}
.helps-close{margin-top:1.4em;font-family:var(--display);font-style:italic;color:var(--green);font-size:1.02rem;border-top:1px dashed #cfe0da;padding-top:1.1em}

/* prev/next */
.pn{padding:clamp(40px,6vw,64px) 0}
.pn-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pn-card{border:1px solid var(--line);background:rgba(255,255,255,.75);border-radius:var(--rad);padding:24px 28px;color:var(--green);transition:transform .3s,box-shadow .3s}
.pn-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,60,50,.1)}
.pn-card span{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);margin-bottom:.5em;font-weight:700}
.pn-card b{font-family:var(--display);font-size:1.15rem;display:flex;align-items:center;gap:.5em}
.pn-card.next{text-align:right}
.pn-card.next b{justify-content:flex-end}

/* affiliates */
.aff-card{display:flex;gap:0;align-items:stretch;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden;box-shadow:0 20px 50px rgba(0,60,50,.09)}
.aff-img{flex:none;width:min(340px,36%);object-fit:cover}
.aff-body{position:relative;padding:clamp(26px,4vw,44px)}
/* the real LMS wordmark is ~3.4:1, so it sits inline rather than in a square badge */
.aff-logo{display:inline-block;margin:.2em 0 .9em;border-radius:6px;transition:transform .3s,opacity .25s}
.aff-logo img{width:min(215px,62%);height:auto}
.aff-logo:hover{transform:translateY(-2px);opacity:.82}
.aff-logo:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.aff-tag{font-family:var(--display);font-style:italic;color:var(--teal);font-size:1.05rem;margin:.1em 0 .8em}
.aff-links{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:1.5em}
.ext{width:.95em;height:.95em;flex:none}
.aff-does{margin-top:2.4em}
.aff-more{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--green);border-bottom:2px solid var(--amber);padding-bottom:2px}
.aff-more:hover{color:var(--teal)}
.aff-does h4{font-family:var(--display);font-size:1.12rem;margin-bottom:.2em}
.aff-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:12px 26px;margin-top:1.1em}
.aff-list div{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
/* icon sits exactly where the bullet did — same slot, no extra chrome */
.aff-ic{flex:none;width:20px;height:20px;margin-top:.15em;color:#672241}
.aff-ic svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ess-ic{flex:none;width:20px;height:20px;margin-top:.15em;color:var(--teal)}
.ess-ic svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aff-card h3{margin:.2em 0 .4em}
.aff-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-top:28px}
.aff-cta{margin-top:34px;font-size:1.02rem}
.aff-cta a{font-weight:600;border-bottom:2px solid var(--amber)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start}
.cinfo{background:var(--green);color:#dfe9e6;border-radius:var(--rad);padding:clamp(26px,4vw,40px)}
.cinfo h3{color:#fff;margin-bottom:1.2em}
.cinfo h4{color:var(--amber);margin:1.6em 0 .7em;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.cline{display:flex;flex-direction:column;margin-bottom:1.1em}
.clab{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#9dbcb4;font-weight:700;margin-bottom:.2em}
.cline a{color:#fff;font-weight:600}
.cline a:hover{color:var(--amber)}
.social{display:flex;gap:10px;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.1);color:#fff;font-size:.88rem;font-weight:600;
  padding:.55em 1.1em;border-radius:999px;transition:background .25s}
.soc:hover{background:rgba(243,169,73,.9);color:var(--green)}
.soc svg{width:1.15em;height:1.15em}
.cnote{margin-top:1.8em;font-size:.85rem;border-top:1px solid rgba(255,255,255,.15);padding-top:1.2em;color:#b7ccc6}
.cform{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(26px,4vw,40px);box-shadow:0 24px 60px rgba(0,60,50,.08)}
.cform h3{margin-bottom:1em}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{display:flex;flex-direction:column;gap:.35em;font-size:.82rem;font-weight:700;color:var(--green);margin-bottom:1.1em;
  letter-spacing:.04em}
.cform input,.cform select,.cform textarea{font-family:var(--sans);font-size:.95rem;color:var(--ink);border:1.5px solid var(--line);
  border-radius:8px;padding:.7em .9em;background:#fff;transition:border-color .25s,box-shadow .25s;width:100%}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,110,100,.14)}
.fnote{font-size:.8rem;color:#8b97a5;margin-top:1em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* once the enquiry is away, swap the fields for the confirmation */
.cform.sent .frow,.cform.sent>label,.cform.sent>button{display:none}
.cform .fmsg{display:none;margin-top:1.2em;padding:14px 16px;border-radius:10px;font-size:.92rem;line-height:1.55}
.cform.sent .fmsg.ok,.cform.error .fmsg.err{display:block}
.fmsg.ok{background:rgba(30,110,100,.1);color:var(--green);border:1px solid rgba(30,110,100,.25)}
.fmsg.err{background:rgba(243,169,73,.14);color:#7d5a1f;border:1px solid #e0b477}
.fmsg a{color:inherit;text-decoration:underline}

/* footer */
footer{background:rgba(244,245,249,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:clamp(48px,7vw,72px) 0 0}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px)}
.ft-brand img{height:40px;width:auto;margin-bottom:1em}
.ft-brand p{font-size:.88rem;max-width:26em}
.ft-col h5{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);margin-bottom:1em}
.ft-col a{display:block;font-size:.88rem;color:var(--body);padding:.28em 0;transition:color .2s}
.ft-col a:hover{color:var(--green)}
.ft-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);
  margin-top:clamp(32px,5vw,48px);padding-block:22px;font-size:.8rem;color:#8b97a5}

/* reveal animations */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}.rv.d4{transition-delay:.48s}
.rv-group .rv{transition-delay:calc(var(--i,0)*90ms)}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}


.prod-promo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.prod-links{display:grid;gap:14px}
.prod-link{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:20px 22px;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.prod-link b{grid-column:1;font-family:var(--display);font-size:1.12rem;color:var(--green);font-weight:600}
.prod-link span{grid-column:1;font-size:.93rem;color:var(--body);line-height:1.6}
.prod-link .arr{grid-column:2;grid-row:1 / span 2;width:22px;height:22px;color:var(--teal);transition:transform .3s}
.prod-link:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,60,50,.09);border-color:#cfe0da}
.prod-link:hover .arr{transform:translateX(4px)}
.xref{background:var(--mist);border-radius:10px;padding:.9em 1.1em;font-size:.94rem;margin-bottom:1.2em}
.xref a{font-weight:600;color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:960px){.prod-promo{grid-template-columns:1fr}}

/* ---------- Healthcare CRM pages ----------
   A reading surface, not the dense service layout: full-width bands, one idea
   per band, body copy a step larger and looser than the practice pages. */
.crm{--acc:#1e6e64}
.crm .sect{padding:clamp(56px,7vw,96px) 0}
.crm h2{font-size:clamp(1.9rem,3.1vw,2.7rem);max-width:22ch;margin-bottom:.15em}
.crm p{font-size:1.06rem;line-height:1.8}
.crm .container.narrow{max-width:860px}

.crm-hero{padding:clamp(40px,6vw,72px) 0 clamp(48px,7vw,88px);
  background:linear-gradient(180deg,rgba(244,245,249,.7),transparent)}
.crm-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,64px);align-items:center}
.crm-hero-grid>*{min-width:0}
.crm-hero .svc-title{font-family:var(--display);font-size:clamp(2.1rem,4.1vw,3.2rem);
  line-height:1.16;color:var(--green);letter-spacing:-.015em;margin:.1em 0 .4em;max-width:16ch}
.crm-hero .svc-tag{font-family:var(--sans);font-style:normal;font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:var(--body);line-height:1.7;max-width:40em}
.crm-hero-art img{border-radius:var(--rad);box-shadow:0 22px 50px rgba(0,60,50,.14)}

/* audience switch - the only navigation between the two pages */
.aud{display:inline-flex;gap:4px;margin-top:1.8em;padding:4px;background:#fff;
  border:1px solid var(--line);border-radius:999px}
.aud-opt{padding:.55em 1.25em;border-radius:999px;font-weight:600;font-size:.95rem;color:var(--body);
  transition:background .22s,color .22s}
.aud-opt:hover{color:var(--green)}
.aud-opt.active{background:var(--acc);color:#fff}

.crm-cols{columns:2;column-gap:clamp(28px,4vw,56px);max-width:960px;margin-top:1.6em}
.crm-cols p{break-inside:avoid;margin-bottom:1em}

.models{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:2em}
.models>*{min-width:0}
.model{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:28px 30px 30px;
  transition:transform .3s,box-shadow .3s}
.model:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,60,50,.09)}
.model-tag{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);margin-bottom:.6em}
.model h3{font-family:var(--display);font-size:1.4rem;color:var(--green);margin-bottom:.4em}
.model-fit{margin-bottom:1em}
.model-meta{font-size:.95rem!important;color:var(--green);background:var(--mist);
  border-radius:10px;padding:.7em .9em;margin-bottom:1.2em}
.model-list{list-style:none;display:grid;gap:.7em}
.model-list li{position:relative;padding-left:1.6em;line-height:1.7}
.model-list li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--acc);transform:rotate(45deg)}

/* numbered because the count is the point, not decoration */
.inc{list-style:none;counter-reset:inc;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,44px) clamp(32px,5vw,72px);margin-top:2.4em;max-width:1040px}
.inc>*{min-width:0}
.inc-item{display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
.inc-item .card-ic{grid-row:1 / span 2}
.inc-item h3{font-family:var(--display);font-size:1.16rem;color:var(--green);margin-bottom:.3em}

/* one icon treatment, three sizes by context */
.card-ic{display:grid;place-items:center;color:var(--acc);flex:none}
.card-ic svg{width:100%;height:100%}
.inc-item .card-ic{width:58px;height:58px;border-radius:14px;background:rgba(30,110,100,.09);padding:13px}
.model .card-ic{width:56px;height:56px;border-radius:14px;background:var(--mist);padding:13px;margin-bottom:1em}
.scope .card-ic{width:52px;height:52px;border-radius:13px;background:var(--mist);padding:12px;margin-bottom:.9em}
.resp-col .card-ic{width:52px;height:52px;border-radius:13px;background:var(--mist);padding:12px;margin-bottom:.8em}

/* a photograph between the reading blocks, so the page is not a wall of type */
.shot{position:relative;border-radius:var(--rad);overflow:hidden;box-shadow:0 22px 50px rgba(0,60,50,.14)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 28px 24px;color:#fff;
  background:linear-gradient(to top,rgba(0,40,33,.95),rgba(0,40,33,.86) 42%,rgba(0,40,33,.55) 72%,rgba(0,40,33,0))}
.shot-cap b{display:block;font-family:var(--display);font-size:1.15rem;margin-bottom:.25em}
.shot-cap span{display:block;font-size:.95rem;line-height:1.6;opacity:.92;max-width:34em}
.flow-shot{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.flow-shot .shot{min-height:340px}
.flow-shot>*{min-width:0}
.flow-shot .flow{margin-top:0}

.flow{list-style:none;display:grid;gap:0;margin-top:2.4em;max-width:900px}
.flow-step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;
  border-top:1px solid var(--line)}
.flow-step:last-child{border-bottom:1px solid var(--line)}
.flow-n{width:44px;height:44px;border-radius:50%;background:var(--acc);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.1rem}
.flow-step h3{font-family:var(--display);font-size:1.25rem;color:var(--green);margin-bottom:.25em}

.scopes{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:2.2em}
.scopes>*{min-width:0}
.scope{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:26px 28px 28px;
  border-top:3px solid var(--acc)}
.scope-step{font-size:.74rem!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:.5em}
.scope h3{font-family:var(--display);font-size:1.3rem;color:var(--green);margin-bottom:.2em}
.scope-dur{font-size:.92rem!important;color:var(--acc);font-weight:600;margin-bottom:.8em}

.resp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:2.2em}
.resp-grid>*{min-width:0}
.resp-col{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:26px 28px 28px}
.resp-col h3{font-family:var(--display);font-size:1.2rem;color:var(--green);margin-bottom:.8em;
  padding-bottom:.6em;border-bottom:1px solid var(--line)}
.resp-col ul{list-style:none;display:grid;gap:.7em}
.resp-col li{position:relative;padding-left:1.6em;line-height:1.7}
.resp-col li:before{content:"";position:absolute;left:.15em;top:.56em;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--acc)}

.callout{margin-top:2.2em;max-width:60em;background:var(--mist);border-radius:var(--rad);
  padding:1.2em 1.5em;font-size:1rem!important}
.fineprint{margin-top:1.8em;max-width:62em;font-size:.92rem!important;color:#5c6b66;line-height:1.75}

.faq{margin-top:1.6em}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:1.15em 2.4em 1.15em 0;position:relative;
  font-family:var(--display);font-weight:600;color:var(--green);font-size:1.08rem;line-height:1.5}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"";position:absolute;right:.6em;top:1.55em;width:9px;height:9px;
  border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(45deg);transition:transform .25s}
.qa[open] summary:after{transform:rotate(-135deg)}
.qa summary:hover{color:var(--acc)}
.qa p{padding:0 2.4em 1.3em 0;max-width:62em}

.cta-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn.line{background:#fff;color:var(--green);border-color:#fff}
.btn.line svg{width:1.15em;height:1.15em}
.btn.line:hover{background:rgba(255,255,255,.88)}

/* the Products menu is two destinations, not a practice grid */
.drop.simple{width:min(420px,84vw);padding:8px}
.drop.simple a{display:block;padding:14px 16px;border-radius:10px;transition:background .2s}
.drop.simple a:hover{background:var(--mist)}
.drop.simple b{display:block;font-family:var(--display);font-size:1.02rem;color:var(--green);margin-bottom:.15em}
.drop.simple span{display:block;font-size:.88rem;color:var(--body);line-height:1.55}

@media (max-width:960px){
  .crm-hero-grid{grid-template-columns:1fr}
  .crm-cols{columns:1}
  .inc,.scopes{grid-template-columns:1fr}
}
@media (max-width:960px){
  .flow-shot{grid-template-columns:1fr}
}
@media (max-width:700px){
  .models,.resp-grid{grid-template-columns:1fr}
  .flow-step{grid-template-columns:1fr;gap:12px}
  .inc-item{grid-template-columns:1fr;gap:10px}
  .inc-item .card-ic{grid-row:auto}
}

/* ---------- Thai ---------- */
/* Prompt already ships with the site for headings and covers Thai in full, so
   Thai pages run on it throughout. Helvetica and Arial have no Thai glyphs at
   all, and letting the OS substitute gives a different weight, a different
   x-height and no matching italic. */
html[lang="th"]{
  --sans:"Prompt","Leelawadee UI","Noto Sans Thai",-apple-system,"Thonburi",sans-serif;
  --display:"Prompt","Leelawadee UI","Noto Sans Thai",-apple-system,"Thonburi",sans-serif;
}
/* Thai stacks vowels above the consonant and tone marks above those, with a
   second vowel slot below, so Latin leading collides. Loosen it, and drop the
   negative tracking that pulls the marks off their base. */
html[lang="th"] body{font-size:16px;line-height:1.95}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{line-height:1.5;letter-spacing:0}
html[lang="th"] h4,html[lang="th"] h5{line-height:1.65}
html[lang="th"] .lead,html[lang="th"] .sect-lead{line-height:1.9}
html[lang="th"] .svc-body p,html[lang="th"] .step-d,html[lang="th"] .origin p{line-height:1.95}
html[lang="th"] .crumb{line-height:1.8}
html[lang="th"] .stat b,html[lang="th"] .svc-num{line-height:1.2}

/* Source Serif has no Thai either, and the hero would silently drop to a system
   serif at a weight that does not match the rest of the page. */
html[lang="th"] .hero h1{font-family:var(--display)}
/* Thai does not use italics for emphasis - the slant is synthesised and the
   tone marks smear. The amber underline already carries the emphasis, and the
   teal carries the rest. */
html[lang="th"] .hero h1 em{font-style:normal;white-space:normal}
html[lang="th"] .svc-tag,html[lang="th"] .creed span,html[lang="th"] .pull,
html[lang="th"] .helps-close,html[lang="th"] .aff-tag,html[lang="th"] .mega-soon,
html[lang="th"] .p-tab.soon{font-style:normal}

/* Uppercasing does nothing to Thai but mangles any Latin caught in the label,
   and 0.1-0.2em tracking pushes every tone mark off its consonant. */
html[lang="th"] .eyebrow,html[lang="th"] .mnav .m-label,html[lang="th"] .tm-role,
html[lang="th"] .p-side-label,html[lang="th"] .svc-kicker,html[lang="th"] .spn span,
html[lang="th"] .pn-card span,html[lang="th"] .cinfo h4,html[lang="th"] .clab,
html[lang="th"] .ft-col h5,html[lang="th"] .pcard-foot em{
  text-transform:none;letter-spacing:.02em}
html[lang="th"] .eyebrow{font-size:.8rem}
html[lang="th"] .model-tag{text-transform:none;letter-spacing:.02em;font-size:.8rem}
html[lang="th"] .model-list li,html[lang="th"] .resp-col li{line-height:1.9}
html[lang="th"] .qa summary{line-height:1.7}
html[lang="th"] .qa p{line-height:1.9}

/* Grid and flex children default to min-width:auto, which means a track can
   never shrink below its content's min-content width. A long unbreakable run
   then pushes the whole page wider than the viewport - and Thai supplies plenty
   of those, having no spaces to break at. */
.hero-grid>*,.p-hero-grid>*,.p-body-grid>*,.about-grid>*,.contact-grid>*,
.prod-promo>*,.models>*,.resp-grid>*,.tm-grid>*,.ess-grid>*,.helps-grid>*,
.pgrid>*,.ft-grid>*{min-width:0}
h1,h2,h3,h4,h5,.svc-title,.blk-h{overflow-wrap:break-word}
.crumb{flex-wrap:wrap}
html[lang="th"] .crm p,html[lang="th"] .model-list li,html[lang="th"] .resp-col li{line-height:1.95}
html[lang="th"] .crm h2,html[lang="th"] .crm-hero .svc-title{line-height:1.5;max-width:24ch}
html[lang="th"] .model-tag,html[lang="th"] .scope-step{text-transform:none;letter-spacing:.02em;font-size:.82rem}
html[lang="th"] .qa summary{line-height:1.7}

/* responsive */
@media (max-width:960px){
  .nav{display:none}
  .burger{display:block}
  .mnav{display:flex}
  .hero-grid,.p-hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .hero-photo{max-width:520px;margin-top:10px}
  .p-hero-art{max-width:480px}
  .p-body-grid{grid-template-columns:1fr;gap:20px}
  /* wrapped tabs make this block too tall to pin under the header */
  .p-side{position:static;z-index:40;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    margin:0 calc(-1*clamp(20px,4vw,48px));padding:10px clamp(20px,4vw,48px)}
  .p-side-label{display:none}
  /* a side-scrolling strip with no scrollbar showed 1 of 7 services and
     ellipsised the labels, so wrap the tabs and let every one be read */
  .p-side-nav{flex-direction:row;flex-wrap:wrap;overflow-x:visible;border-left:0;gap:8px;padding-bottom:2px}
  .p-tab{flex:0 1 auto;margin-left:0;border:1px solid var(--line);border-radius:999px;padding:.6em 1em;font-size:.8rem;max-width:100%}
  .p-tab span{white-space:normal;overflow:visible;text-overflow:clip}
  .p-tab.active{background:var(--acc);color:#fff;border-color:var(--acc)}
  .p-tab i{display:inline;opacity:.55}
  .p-tab.active i{opacity:1;color:#fff}
  .svc-num{font-size:1.4rem}
  .svc-pn{flex-direction:column}
  .spn,.spn.next{max-width:none;text-align:left;margin-left:0}
  .spn.empty{display:none}
  .ft-grid{grid-template-columns:1fr 1fr}
  .pn-grid{grid-template-columns:1fr}
  .pn-card.next{text-align:left}
  .pn-card.next b{justify-content:flex-start}
  .aff-card{flex-direction:column}
  .aff-img{width:100%;max-height:240px}
}
@media (max-width:560px){
  .frow{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .stats{gap:20px}
  /* position:static dropped the z-index:3, so the -30px overlap put the badge
     behind the photo (z-index:1) and its corner rule (z-index:2) */
  .hero-badge{position:relative;left:auto;bottom:auto;z-index:3;
    margin-top:-30px;margin-left:12px;max-width:none;display:block}
  .hero-photo{padding:14px}
  .hero-arcs{inset:-14px -18px auto auto}
}

/* touch devices: reachable tap targets, no iOS zoom-on-focus, no stuck hovers */
@media (hover:none){
  /* anything under 16px makes iOS Safari zoom the whole page on focus */
  .cform input,.cform select,.cform textarea{font-size:16px}
  .burger{padding:10px 8px}
  .m-svc{padding:.7em 0 .7em 1.1em}
  .m-p a{padding:.8em 0}
  .mnav>a{padding:.8em 0}
  /* the accordion chevrons are the only way to open a practice on a phone */
  .m-p button{padding:.85em .5em .85em 1em}
  .p-tab{padding:.8em 1.1em}
  .cline a{padding:.35em 0;display:inline-block}
  .soc{padding:.7em 1.2em}
  .ft-col a{padding:.55em 0}
  .crumb{font-size:.85rem}
  .crumb a{padding:.5em 0;display:inline-block}
  /* :hover sticks after a tap on touch, so drop the motion-based states */
  .pcard:hover,.tcard:hover,.ess-item:hover,.pn-card:hover,.btn:hover,.spn:hover{transform:none;box-shadow:none}
  .btn:hover .arr,.pcard:hover .pcard-foot .arr{transform:none}
}