:root{
  --green:#003c32; --teal:#1e6e64; --maroon:#672241; --amber:#f3a949;
  --blue:#1e506e; --mist:#f4f5f9; --ink:#0d1f1b; --body:#3c4b47;
  --line:#e3e7ee; --rad:14px;
  /* the built-in CSS easings are too weak to read as intentional; these are
     the strong variants every transition below uses */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --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:1440px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
/* The header and the footer run the full width of the screen, so the logo sits
   at one edge and the language switch at the other. The content between them
   stays at 1440 and its prose narrower still: a paragraph set across a 2560px
   monitor is one unbroken line and nobody finishes reading it. */
.hd-in,footer>.container{max-width:none}
.about-grid p,.p-body p,.origin p{max-width:62ch}
.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 .22s var(--ease-out),border-color .22s var(--ease-out),color .22s var(--ease-out),transform .16s var(--ease-out)}
.btn:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-2px)}
/* press feedback: the button has to look like it heard the click */
.btn:active{transform:scale(.97)}
.btn .arr{transition:transform .22s var(--ease-out)}
.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:0;bottom:-2px;height:2.5px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease-out)}
.nav>a:hover:after,.nav>a.active:after,.nav-drop>button.active:after,.nav-drop:hover>button:after{transform:scaleX(1)}
.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 var(--ease-out),transform .2s var(--ease-out),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 var(--ease-out),color .2s var(--ease-out),transform .14s var(--ease-out)}
.mega-p:active{transform:scale(.985)}
.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;display:grid;align-items:start;padding:22px 26px;min-height:100%}
/* Every panel sits in the same grid cell. Keeping them all in flow is what
   lets the swap be a transition instead of a keyframe: moving the pointer
   down the practice list re-triggers this many times a second, and a
   keyframe restarts from zero each time while a transition retargets from
   wherever it had got to. visibility (not display) keeps the inactive
   panels out of the tab order. */
.mega-svcs{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(6px);filter:blur(3px);
  /* leaving: a quick fade with no travel, then snap. Two panels of text
     overlapping mid-crossfade reads as two objects, so the outgoing one
     gets out of the way fast and a little blur bridges the gap. */
  transition:opacity .1s var(--ease-out),filter .1s var(--ease-out),
    transform 0s linear .1s,visibility 0s linear .1s}
.mega-svcs.active{opacity:1;visibility:visible;transform:none;filter:none;
  transition:opacity .18s var(--ease-out),filter .18s var(--ease-out),
    transform .18s var(--ease-out),visibility 0s}
.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)}
/* One control, not two: the visible link is always the other language, the
   way mfec.co.th does it. Both anchors stay in the markup because the build
   rewrites each to point at this same page in that language - the current one
   is simply hidden. */
/* set apart from the menu: it is a control, not another nav item */
.lang{display:flex;align-items:center;margin-left:clamp(8px,2.5vw,40px)}
.lang-opt{display:inline-flex;align-items:center;gap:.45em;font-family:var(--display);font-size:.85rem;
  font-weight:600;letter-spacing:.02em;color:var(--ink);padding:.35em .2em;line-height:1.5;
  white-space:nowrap;transition:color .22s}
.lang-opt:hover{color:var(--teal)}
.lang-opt .globe{width:1.15em;height:1.15em;flex:none}
.lang-opt.active{display:none}
.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 .32s var(--ease-out) both}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}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 .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s var(--ease-out)}
.pcard:hover{transform:translateY(-7px);box-shadow:0 24px 48px rgba(0,60,50,.14);border-color:transparent}
.pcard:active{transform:translateY(-3px) scale(.995)}
.pcard-bar{position:absolute;inset:0 0 auto;height:4px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);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 .5s var(--ease-out)}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcard-ic{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out);
  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 .24s var(--ease-out)}
.pcard:hover .pcard-foot .arr{transform:translateX(5px)}
.pcard:hover .pcard-ic{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,60,50,.2)}

.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 .28s var(--ease-out),box-shadow .28s var(--ease-out)}
.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 .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s var(--ease-out)}
.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 .32s var(--ease-out),box-shadow .32s var(--ease-out)}
.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 var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out),transform .14s var(--ease-out)}
.p-tab:not(.soon):active{transform:scale(.985)}
.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 .3s var(--ease-out) 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(.92);opacity:0}to{transform:scale(1);opacity: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 8}
.step.rv.in:before{animation:seg-grow .52s var(--ease-out) calc(var(--i,0)*90ms + 80ms) backwards,tl-flow 1.5s linear 8}
.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 .26s var(--ease-out)}
.step.has-d:active .step-n{transform:scale(1.04)}
.step.rv.in .step-n{animation:node-pop .42s cubic-bezier(.34,1.4,.64,1) calc(var(--i,0)*90ms + 200ms) 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 4 forwards;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 .22s var(--ease-out),color .22s var(--ease-out)}
.step-more svg{width:14px;height:14px;transition:transform .26s var(--ease-out)}
.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 .15s var(--ease-out),transform .15s var(--ease-out),visibility .15s}
.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);
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility 0s}
.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 8}
  .step.rv.in:before{animation:seg-grow-y .52s var(--ease-out) calc(var(--i,0)*90ms + 80ms) backwards,tl-flow-y 1.5s linear 8}
  .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(18px);transition:opacity .52s var(--ease-out),transform .52s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}.rv.d4{transition-delay:.28s}
/* 60ms reads as one cascade; past ~80ms it reads as items arriving late */
.rv-group .rv{transition-delay:calc(var(--i,0)*60ms)}

@media (prefers-reduced-motion:reduce){
  /* reduced motion means less movement, not no transition: colour and opacity
     changes still carry meaning, so they stay - only travel is removed */
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-iteration-count:1!important;animation-duration:.2s!important;transition-duration:.14s!important;transition-delay:0ms!important}
  .rv,.rv.in{opacity:1!important;transform:none!important}
  .hero-badge,.spin-slow,.spin-rev,.spin-slow2,.pulse{animation:none!important}
  .hero h1 em:after{animation:none;transform:scaleX(1)}
  .page.active,.svc-view.active{animation:none!important}
  .mega-svcs,.mega-svcs.active{transform:none!important;filter:none!important}
  .btn:hover,.pcard:hover,.tcard:hover,.tm-card:hover,.prod-link:hover{transform:none}
  .btn:active,.pcard:active,.prod-link:active,.mega-p:active,.p-tab:not(.soon):active{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 .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s var(--ease-out)}
.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:active{transform:translateY(-1px) scale(.995)}
.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:start}
.flow-shot .shot{min-height:340px;aspect-ratio:5/4;width:100%}
.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,#1e6e64);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}
.cta-note{color:rgba(255,255,255,.82);font-size:.95rem;margin-top:1em;max-width:34em}
.cta-note a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.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)}

/* healthcare growth hub - one page per audience. The hero carries a photograph
   and the badge motif the rest of the site's landing heroes already use. */
.gro-hero{padding:clamp(40px,6vw,72px) 0 clamp(48px,7vw,88px);
  background:linear-gradient(180deg,rgba(244,245,249,.7),transparent)}
.gro-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(20px,4vw,56px);
  align-items:center}
.gro-hero-grid>*{min-width:0}
.gro-hero .svc-title{font-family:var(--display);font-size:clamp(2rem,3.5vw,2.85rem);
  line-height:1.17;color:var(--green);letter-spacing:-.015em;margin:.1em 0 .5em;max-width:18ch}
.gro-hero .lead{color:var(--body);line-height:1.72;max-width:34em}
.gro-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:1.9em}
.gro-note{font-size:.9rem;color:#5c6b66;margin-top:1.2em;max-width:40em}

/* a service is a photograph and its promise, alternating side to side, so the
   five of them read as a rhythm instead of five identical boxes of prose */
.svcs{list-style:none;display:grid;gap:clamp(34px,5vw,64px);margin-top:2.8em}
.svc-card{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(22px,4vw,56px);align-items:center}
.svc-card:nth-child(even) .svc-shot{order:2}
.svc-shot{position:relative;padding:0 0 16px 16px}
.svc-shot img{width:100%;border-radius:var(--rad);aspect-ratio:19/14;object-fit:cover;
  box-shadow:0 24px 54px rgba(0,60,50,.18);position:relative;z-index:1}
.svc-shot:after{content:"";position:absolute;left:0;bottom:0;width:46%;height:50%;
  border-left:4px solid var(--acc,#1e6e64);border-bottom:4px solid var(--acc,#1e6e64);
  border-radius:0 0 0 22px}
.svc-body>h3{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.62rem);color:var(--green);
  line-height:1.24;margin-bottom:.5em}
.svc-body>p{max-width:44em}
.svc-fit{margin-top:1.2em;font-size:.95rem!important;line-height:1.7;max-width:44em}
.lab{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:.3em}
/* deliverables are a set of things you receive, not a sentence to wade through */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:.55em}
.chips li{font-size:.84rem;line-height:1.35;background:#fff;color:var(--green);
  border:1px solid var(--line);border-radius:999px;padding:.5em .95em}
.svc-del{margin-top:1.4em}
.svc-body .btn{margin-top:1.6em}

/* which priority fits which kind of organisation - the page's one table, and
   the quickest way in for a reader who already knows what they are */
.fit-wrap{margin-top:2.4em;overflow-x:auto}
.fit-wrap:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
/* the table has to scroll sideways on a phone, so say so rather than leaving
   the last two columns to be discovered by accident */
.fit-hint{display:none;font-size:.84rem;color:#5c6b66;margin-top:.9em}
@media (max-width:820px){.fit-hint{display:block}}
.fit{border-collapse:collapse;width:100%;min-width:760px}
.fit th,.fit td{padding:.9em .8em;border-bottom:1px solid var(--line);text-align:center}
.fit thead th{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);border-bottom:2px solid var(--line);vertical-align:bottom;line-height:1.45}
.fit thead th a{color:inherit;border-bottom:1.5px solid transparent;transition:border-color .2s}
.fit thead th a:hover{border-bottom-color:var(--amber)}
.fit tbody th{text-align:left;width:32%;font-weight:400}
.fit tbody th b{display:block;font-family:var(--display);font-weight:600;font-size:1.04rem;
  color:var(--green);margin-bottom:.2em}
.fit tbody th span{display:block;font-size:.88rem;line-height:1.6;color:var(--body)}
.fit tbody tr:hover{background:rgba(244,245,249,.7)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--teal)}
.dot.off{background:none;border:1.5px solid #b9c4cc}
.fit-key{display:flex;gap:22px;flex-wrap:wrap;margin-top:1.3em;font-size:.86rem;color:#5c6b66}
.fit-key span{display:inline-flex;align-items:center;gap:.55em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the audience switch, carried across the hub and all five campaign pages */
.segs{display:flex;flex-wrap:wrap;gap:8px;margin-top:2em}
.seg-opt{padding:.5em 1.1em;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-weight:600;font-size:.88rem;color:var(--body);
  transition:background .22s,color .22s,border-color .22s}
.seg-opt:hover{color:var(--green);border-color:var(--acc)}
.seg-opt.active{background:var(--acc);border-color:var(--acc);color:#fff}

.ways{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:20px;margin-top:2.2em}
.ways>*{min-width:0}
.scope-dur+p{margin-top:0}

/* the campaign form sits on the page itself, so nobody has to leave to reply */
.gro-form{max-width:760px;margin-top:2.4em}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.cform.sent .frow3{display:none}

@media (max-width:860px){
  .gro-hero-grid{grid-template-columns:1fr}
  .gro-hero .svc-title{max-width:22ch}
  .svc-card{grid-template-columns:1fr;gap:20px}
  .svc-card:nth-child(even) .svc-shot{order:0}
}
@media (max-width:760px){
  .frow3{grid-template-columns:1fr}
}

/* six top-level items fit at desktop width; below that they need the room back
   before the burger takes over at 960 */
@media (max-width:1240px){
  .nav{gap:13px}
  .nav>a,.nav-drop>button{font-size:.85rem}
}

/* 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}

/* Healthcare Growth lists six audiences, not two; an icon per row makes the
   menu scannable without reading all six descriptions */
.drop.simple.ico{width:min(468px,88vw)}
.drop.simple.ico a{display:flex;align-items:flex-start;gap:13px}
.drop.simple.ico .dic{width:22px;height:22px;flex:none;color:var(--teal);margin-top:3px}
.drop.simple.ico .dtx{flex:1;min-width:0;font-size:inherit;color:inherit;line-height:inherit}

@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}
}

/* ---------- Insights (blog) ----------
   Listing, category filter, article. Cards reuse the surface language of
   .pcard/.tm-card - white, hairline border, lift on hover - so a post sits
   beside a practice card without looking like a different site. */
.ins-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,4vw,38px);
  padding-bottom:clamp(24px,3.5vw,34px);border-bottom:1px solid var(--line)}
.ins-chip{font-size:.85rem;font-weight:600;color:var(--body);background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:.5em 1.15em;line-height:1.5;transition:background .22s,color .22s,border-color .22s}
.ins-chip:hover{color:var(--green);border-color:#cfe0da}
.ins-chip.active{background:var(--green);border-color:var(--green);color:#fff}

/* featured: the newest post gets the width the others share between three */
.ins-feat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  margin-top:clamp(28px,4vw,44px);transition:transform .3s,box-shadow .3s,border-color .3s}
.ins-feat:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,60,50,.12);border-color:#cfd6e2}
.ins-feat-img{margin:0;overflow:hidden;align-self:stretch}
.ins-feat-img img{width:100%;height:100%;min-height:260px;object-fit:cover;transition:transform .6s ease}
.ins-feat:hover .ins-feat-img img{transform:scale(1.04)}
.ins-feat-body{padding:clamp(26px,3.5vw,40px) clamp(26px,3.5vw,44px) clamp(26px,3.5vw,40px) 0}
.ins-feat-body h2{font-size:clamp(1.45rem,2.6vw,2.05rem);margin:.45em 0 .5em}
.ins-feat-body p{font-size:1rem}
.ins-feat .ins-more{margin-top:1.3em}

.ins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:clamp(20px,2.6vw,28px);margin-top:clamp(28px,4vw,44px)}
.ins-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.ins-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,60,50,.11);border-color:#cfd6e2}
.ins-card-img{margin:0;overflow:hidden;background:var(--mist)}
.ins-card-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s ease}
.ins-card:hover .ins-card-img img{transform:scale(1.05)}
.ins-card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.ins-card-body h3{font-size:1.12rem;line-height:1.35;margin:.55em 0 .45em}
.ins-card-body p{font-size:.92rem;flex:1}

/* one category pill, used on cards, the featured block and the article hero */
.ins-cat{display:inline-flex;align-items:center;gap:.45em;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc,var(--maroon));background:color-mix(in srgb,var(--acc,var(--maroon)) 11%,#fff);
  border-radius:999px;padding:.4em .95em;line-height:1.5;align-self:flex-start}
/* color-mix is unsupported on older Safari and the pill would lose its tint
   entirely, so a flat neutral stands behind it */
@supports not (background:color-mix(in srgb,red 10%,#fff)){.ins-cat{background:var(--mist)}}
.ins-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5em .9em;margin-top:1.1em;
  font-size:.78rem;color:#8b96a4;font-weight:500}
.ins-meta .sep{width:3px;height:3px;border-radius:50%;background:#c3ccd6;flex:none}
.ins-meta time{white-space:nowrap}
.ins-more{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;
  font-size:.92rem;color:var(--green)}
.ins-more .arr{transition:transform .3s}
.ins-card:hover .ins-more .arr,.ins-feat:hover .ins-more .arr{transform:translateX(5px)}

/* the whole card is the link; the heading anchor is stretched over it so the
   accessible name stays the title rather than "read more" repeated ten times */
.ins-card,.ins-feat{position:relative}
.ins-link:after{content:"";position:absolute;inset:0}
.ins-link{color:inherit}
.ins-card:hover h3,.ins-feat:hover h2{color:var(--teal)}
.ins-card h3,.ins-feat h2{transition:color .25s}

.ins-empty{margin-top:clamp(28px,4vw,44px);background:#fff;border:1px dashed var(--line);border-radius:var(--rad);
  padding:clamp(32px,5vw,56px);text-align:center;color:#7d8896}
.ins-empty h3{margin-bottom:.4em}

/* pagination */
.ins-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin-top:clamp(34px,5vw,54px)}
.ins-pg{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .85em;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-size:.9rem;font-weight:600;color:var(--body);transition:background .22s,color .22s,border-color .22s}
.ins-pg:hover{border-color:#cfe0da;color:var(--green)}
.ins-pg.active{background:var(--green);border-color:var(--green);color:#fff}
.ins-pg.off{opacity:.4;pointer-events:none}
.ins-pg svg{width:1.05em;height:1.05em}
.ins-gap{color:#b3bcc7;padding:0 .2em}

/* ---- article ---- */
.art-hero{padding:calc(76px + clamp(38px,5vw,60px)) 0 clamp(26px,3.5vw,38px);position:relative}
.art-hero:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc,var(--green)) 9%,#fff),rgba(255,255,255,0))}
@supports not (background:color-mix(in srgb,red 10%,#fff)){.art-hero:before{background:linear-gradient(180deg,var(--mist),rgba(255,255,255,0))}}
.art-wrap{max-width:760px;margin:0 auto}
.art-hero h1{font-size:clamp(1.85rem,3.8vw,2.85rem);margin:.5em 0 .45em}
.art-hero .lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--body)}
.art-by{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3vw,30px);
  padding-top:1.3em;border-top:1px solid var(--line)}
.art-by-ph{width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;background:linear-gradient(140deg,#eaf1ee,#f4f5f9);
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;outline:1px solid var(--line);
  font-family:var(--display);font-weight:600;color:var(--teal);font-size:1rem}
.art-by-ph img{width:100%;height:100%;object-fit:cover}
.art-by b{display:block;font-family:var(--display);font-size:.98rem;color:var(--green);line-height:1.4}
.art-by .art-by-role{font-size:.8rem;color:#8b96a4}
.art-cover{margin:0 0 clamp(26px,4vw,42px)}
.art-cover img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--rad);
  box-shadow:0 22px 50px rgba(0,60,50,.14)}
.art-cover figcaption{font-size:.8rem;color:#8b96a4;margin-top:.8em;text-align:center}

/* the body is the one place editors author free HTML, so every element it can
   emit is styled here rather than inheriting whatever the page happens to give */
.art-body{max-width:68ch;margin:0 auto;font-size:1.04rem}
.art-body>*+*{margin-top:1.15em}
.art-body h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-top:1.9em}
.art-body h3{font-size:clamp(1.18rem,1.9vw,1.42rem);margin-top:1.6em}
.art-body h4{font-size:1.08rem;font-family:var(--display);margin-top:1.5em}
.art-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art-body a:hover{color:var(--green)}
.art-body ul,.art-body ol{padding-left:1.35em}
.art-body li+li{margin-top:.45em}
.art-body li::marker{color:var(--teal)}
.art-body img{border-radius:10px;margin-inline:auto;box-shadow:0 14px 34px rgba(0,60,50,.1)}
.art-body figure{margin-block:1.6em}
.art-body figcaption{font-size:.82rem;color:#8b96a4;text-align:center;margin-top:.7em}
.art-body blockquote{border-left:4px solid var(--amber);background:var(--mist);border-radius:0 10px 10px 0;
  padding:1.1em 1.4em;font-size:1.08rem;color:var(--green);font-family:var(--display);line-height:1.6}
.art-body blockquote p+p{margin-top:.7em}
.art-body hr{border:0;border-top:1px solid var(--line);margin-block:2.2em}
.art-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--mist);border-radius:5px;padding:.15em .45em}
.art-body pre{background:var(--ink);color:#e6efec;border-radius:10px;padding:1.1em 1.3em;overflow:auto;font-size:.88rem}
.art-body pre code{background:none;padding:0;color:inherit}
.art-body table{width:100%;border-collapse:collapse;font-size:.93rem}
.art-body th,.art-body td{border:1px solid var(--line);padding:.7em .9em;text-align:left;vertical-align:top}
.art-body th{background:var(--mist);color:var(--green);font-family:var(--display)}
.art-body>:first-child{margin-top:0}

.art-foot{max-width:68ch;margin:clamp(34px,5vw,52px) auto 0;padding-top:1.6em;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.art-tags{display:flex;flex-wrap:wrap;gap:8px}
.art-tag{font-size:.78rem;font-weight:600;color:var(--body);background:var(--mist);border-radius:999px;padding:.35em .9em}
.art-tag:hover{color:var(--green)}
.art-share{display:flex;align-items:center;gap:8px}
.art-share span{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8b96a4}
.art-share a,.art-share button{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--body);cursor:pointer;
  transition:background .22s,color .22s,border-color .22s}
.art-share a:hover,.art-share button:hover{background:var(--green);border-color:var(--green);color:#fff}
.art-share svg{width:16px;height:16px}
.art-share .copied{background:var(--teal);border-color:var(--teal);color:#fff}

.art-author{max-width:68ch;margin:clamp(30px,4vw,44px) auto 0;display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:24px 26px}
.art-author .art-by-ph{width:64px;height:64px;font-size:1.25rem}
.art-author h4{font-size:1.05rem;margin-bottom:.15em}
.art-author p{font-size:.92rem;margin-top:.5em}
.art-author .art-by-role{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--maroon)}

@media (max-width:860px){
  .ins-feat{grid-template-columns:1fr}
  .ins-feat-img img{min-height:0;aspect-ratio:16/9}
  .ins-feat-body{padding:26px 26px 30px}
}
@media (max-width:560px){
  .ins-grid{grid-template-columns:1fr}
  .art-foot{flex-direction:column;align-items:flex-start}
  .art-author{flex-direction:column;gap:14px}
  .ins-filter{gap:6px}
  .ins-chip{font-size:.8rem;padding:.45em 1em}
}


/* ---------- 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}

/* blog: Thai neither uppercases nor tracks out, and the reading measure has to
   open up for stacked vowels the same way the rest of the body copy does */
html[lang="th"] .ins-cat,html[lang="th"] .art-by-role,html[lang="th"] .art-share span{
  text-transform:none;letter-spacing:.02em;font-size:.8rem}
html[lang="th"] .ins-card-body h3,html[lang="th"] .ins-feat-body h2,
html[lang="th"] .art-hero h1{line-height:1.5}
html[lang="th"] .ins-card-body p,html[lang="th"] .ins-feat-body p,
html[lang="th"] .art-body,html[lang="th"] .art-body li,html[lang="th"] .art-author p{line-height:1.95}
html[lang="th"] .art-body h2,html[lang="th"] .art-body h3,html[lang="th"] .art-body h4{line-height:1.55}
html[lang="th"] .art-body blockquote{font-style:normal;line-height:1.85}
html[lang="th"] .ins-meta{line-height:1.8}
/* a Thai headline has no spaces to break at, so a long title in a narrow card
   has to be allowed to break inside a word rather than overflow it */
html[lang="th"] .ins-card-body h3,html[lang="th"] .ins-feat-body h2{overflow-wrap:anywhere}

/* 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-p a{padding:1em 0;min-height:44px;display:flex;align-items:center}
  .mnav>a{padding:1em 0;min-height:44px;display:flex;align-items:center}
  /* the accordion chevrons are the only way to open a practice on a phone */
  .m-p button{padding:.85em .5em .85em 1em;min-width:44px;min-height:44px}
  .p-tab{padding:.8em 1.1em}
  .cline a{padding:.35em 0;display:inline-block}
  /* 44px is the smallest target a thumb hits reliably; these all measured
     under it on a 390px phone */
  .burger{min-width:44px;min-height:44px}
  .lang-opt{min-height:44px}
  .p-tab{padding:.95em 1.1em}
  .ins-chip{padding:.8em 1.2em}
  .art-share a,.art-share button{width:44px;height:44px}
  .art-tag{padding:.5em 1em}
  .m-svc{padding:.9em 0 .9em 1.1em;min-height:44px;display:flex;align-items:center}
  /* uppercase tracked labels at 11px are legible on a monitor and not on a
     phone held at arm's length */
  .mnav .m-label,.ins-cat,.p-side-label,.tm-role,.pcard-foot em,.spn span{font-size:.75rem}
  .soc{padding:.7em 1.2em}
  .ft-col a{padding:.78em 0}
  .crumb{font-size:.85rem}
  .crumb a{padding:.7em 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}
  .tm-card:hover,.prod-link:hover{transform:none;box-shadow:none}
  .tm-card:hover .tm-ph,.pcard:hover .pcard-ic,.pcard:hover .pcard-img img{transform:none}
  .btn:hover .arr,.pcard:hover .pcard-foot .arr,.prod-link:hover .arr{transform:none}
}