/* ==========================================================================
   Coronation Physiotherapy - design system
   Brand: crimson #C41E3A, charcoal #1A1A1A, warm light grey #F5F5F2
   Type: Playfair Display (display) + Source Sans 3 (body)
   Signature device: the "measure line", a crimson rule that draws on scroll.
   ASCII only. No em dash, no en dash, anywhere in this file.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --crimson:#C41E3A;
  --crimson-deep:#8B1525;
  --crimson-wash:#FBEEF0;
  --ink:#1A1A1A;
  --ink-soft:#4A4A4A;
  --ink-faint:#6E6E6E;
  --paper:#FFFFFF;
  --paper-warm:#F5F5F2;
  --paper-warm-2:#EDEDE8;
  --line:#E2E2DC;
  --line-strong:#CFCFC7;

  --display:"Bricolage Grotesque","Bricolage Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Hanken Grotesk","Hanken Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --wrap-narrow:820px;
  --gutter:clamp(20px,5vw,64px);

  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:88px; --sp-8:120px;

  --r-sm:6px; --r-md:12px; --r-lg:20px;
  --shadow-sm:0 2px 10px rgba(26,26,26,.06);
  --shadow-md:0 12px 34px rgba(26,26,26,.10);
  --shadow-lg:0 26px 60px rgba(26,26,26,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.22s; --t-mid:.42s; --t-slow:.8s;

  --header-h:76px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16.5px,1.05vw,18px);
  line-height:1.68;
  font-weight:400;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,picture,video,svg{max-width:100%;display:block}
img{height:auto}
a{color:var(--crimson);text-decoration:none}
button{font:inherit;cursor:pointer}
ul,ol{margin:0;padding:0}
figure{margin:0}

/* Weight 800 and -.02em tracking at 1.06 leading is the live treatment
   (coronationphysio.ca h1 computes to Bricolage Grotesque 800). A grotesque
   needs the extra weight and the tighter track to hold the same presence a
   serif gets from its contrast, so these are not the serif values carried
   over. */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
h3,h4{line-height:1.2;letter-spacing:-.015em}
/* Headline accent: the live pages colour one phrase crimson inside an
   otherwise ink headline. It is the client's signature headline device. */
h1 .accent,h2 .accent,h3 .accent{color:var(--crimson)}
p{margin:0;text-wrap:pretty}
h1{font-size:clamp(2.45rem,5.4vw,4.35rem)}
h2{font-size:clamp(1.95rem,3.7vw,3rem)}
h3{font-size:clamp(1.25rem,1.7vw,1.6rem)}
h4{font-size:clamp(1.05rem,1.3vw,1.22rem)}

/* ---------- a11y ---------- */
/* Offset with transform, never a negative left: a -9999px box still counts
   toward documentElement.scrollWidth and reads as a horizontal overflow. */
.skip-link{
  position:absolute;left:0;top:0;z-index:2000;
  transform:translateY(-140%);
  background:var(--crimson);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600;
  transition:transform var(--t-fast) var(--ease);
}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--crimson);outline-offset:3px;border-radius:2px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.wrap-narrow{width:min(var(--wrap-narrow),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(56px,7.5vw,var(--sp-8))}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.section--warm{background:var(--paper-warm)}
.section--ink{background:var(--ink);color:#fff}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink p{color:rgba(255,255,255,.82)}

.grid{display:grid;gap:clamp(20px,2.4vw,34px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4.4vw,72px);align-items:center}
.split--reverse .split__media{order:-1}

/* ---------- eyebrow and the measure line ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.775rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--crimson);display:flex;align-items:center;gap:14px;margin-bottom:var(--sp-2);
}
.eyebrow::after{
  content:"";height:1px;background:var(--crimson);flex:1;max-width:96px;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease-out) .12s;
}
.is-in .eyebrow::after,.fx .eyebrow::after{transform:scaleX(1)}
.section--ink .eyebrow{color:#EE8A9B}
.section--ink .eyebrow::after{background:#EE8A9B}

.measure{height:2px;background:var(--line);position:relative;overflow:hidden;margin-block:var(--sp-4)}
.measure::after{
  content:"";position:absolute;inset:0;background:var(--crimson);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out);
}
.is-in .measure::after,.fx .measure::after{transform:scaleX(1)}

.lede{font-size:clamp(1.08rem,1.35vw,1.28rem);color:var(--ink-soft);line-height:1.62}
.section--ink .lede{color:rgba(255,255,255,.8)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;border:2px solid transparent;
  font-weight:700;font-size:1rem;letter-spacing:.01em;line-height:1;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
  will-change:transform;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform var(--t-fast) var(--ease)}
.btn--primary{background:var(--crimson);color:#fff;border-color:var(--crimson);box-shadow:0 8px 22px rgba(196,30,58,.24)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:0 16px 34px rgba(26,26,26,.26)}
/* The mobile scroll twin keeps the focal CTA recognisably crimson. It still
   moves the text colour and two visual properties, so the interaction rule is
   met without the primary action going dark every time it crosses the band. */
.btn--primary.fx{background:var(--crimson-deep);border-color:var(--crimson-deep);color:#FFF1F3;transform:translateY(-3px);box-shadow:0 16px 34px rgba(139,21,37,.34)}
.btn--primary:hover svg,.btn--primary.fx svg{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover,.btn--ghost.fx{color:var(--crimson);border-color:var(--crimson);background:var(--crimson-wash);transform:translateY(-3px)}
.btn--onink{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--onink:hover,.btn--onink.fx{background:#fff;color:var(--crimson);border-color:#fff;transform:translateY(-3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-4)}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),height var(--t-mid) var(--ease);
}
.site-header.is-stuck{box-shadow:var(--shadow-sm);border-bottom-color:var(--line)}
.header-inner{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;display:flex;align-items:center;gap:var(--sp-3)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
/* Brand Guide s7: minimum 120px wide on digital, measured on the logo itself.
   Sized by width so the floor is enforceable; the source was re-cropped to
   360x128 so the artwork fills the frame (it previously carried 11% transparent
   padding, which made a 105px box render a 94px logo). Clear space per rule 7. */
.brand img{width:132px;height:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.7vw,30px)}
.nav a{
  position:relative;color:var(--ink);font-weight:600;font-size:.965rem;padding-block:6px;
  transition:color var(--t-fast) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--crimson);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-fast) var(--ease);
}
.nav a:hover,.nav a.fx,.nav a[aria-current="page"]{color:var(--crimson)}
.nav a:hover::after,.nav a.fx::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:12px 24px;font-size:.94rem}
/* `.nav a` (0,1,1) outranks `.btn--primary` (0,1,0) and was repainting the
   header CTA ink-on-crimson at 2.96:1. Restore the button's own colours. */
.nav a.btn--primary{color:#fff}
.nav a.btn--primary:hover,.nav a.btn--primary.fx{color:#fff}
.nav a.btn--primary::after{display:none}
.nav-toggle{display:none;background:none;border:0;padding:8px;margin-left:auto}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.nav-toggle span+span{margin-top:6px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
body{padding-top:var(--header-h)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(18,18,18,.93) 0%,rgba(20,20,20,.82) 42%,rgba(26,26,26,.52) 100%);
}
.hero__inner{padding-block:clamp(72px,11vw,148px);position:relative}
.hero__body{max-width:760px}
.hero h1{color:#fff;margin-bottom:var(--sp-3)}
.hero .lede{color:rgba(255,255,255,.86);max-width:58ch}
.hero .eyebrow{color:#F0A0AE}
.hero .eyebrow::after{background:#F0A0AE}

/* hero stat strip */
/* Grid, not flex-wrap. With four stats and a large gap the fourth wrapped to
   a row of its own, which is the orphan-row failure. Four columns on
   desktop and two on mobile both divide evenly, so it cannot recur. */
.hero__stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(22px,3.6vw,58px);margin-top:clamp(34px,4.6vw,56px);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.2)}
.stat{min-width:124px}
.stat__n{font-family:var(--display);font-size:clamp(1.85rem,3vw,2.6rem);font-weight:700;color:#fff;line-height:1}
.stat__l{font-size:.85rem;color:rgba(255,255,255,.66);margin-top:6px;letter-spacing:.02em}

/* page hero (interior) */
.pagehero{position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.pagehero__media{position:absolute;inset:0;z-index:-2}
.pagehero__media img{width:100%;height:100%;object-fit:cover}
.pagehero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(16,16,16,.93),rgba(22,22,22,.72) 62%,rgba(30,30,30,.48))}
.pagehero__inner{padding-block:clamp(58px,8vw,104px)}
/* The interior hero sits on near-black, where the default crimson eyebrow
   measures 2.96:1. Use the same tint the dark sections use. */
.pagehero .eyebrow{color:#EE8A9B}
.pagehero .eyebrow::after{background:#EE8A9B}
.pagehero h1{color:#fff;max-width:19ch}
.pagehero .lede{color:rgba(255,255,255,.84);max-width:60ch;margin-top:var(--sp-3)}

/* breadcrumb */
.crumbs{font-size:.86rem;color:rgba(255,255,255,.62);margin-bottom:var(--sp-2)}
.crumbs a{color:rgba(255,255,255,.82);transition:color var(--t-fast) var(--ease)}
.crumbs a:hover,.crumbs a.fx{color:#fff;text-decoration:underline}

/* ---------- cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
}
.card:hover,.card.fx{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--crimson)}
.card__media{aspect-ratio:16/10;overflow:hidden;background:var(--paper-warm-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.card:hover .card__media img,.card.fx .card__media img{transform:scale(1.06)}
.card__body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:12px;flex:1}
.card__body h3{transition:color var(--t-fast) var(--ease);text-wrap:balance}
.card:hover .card__body h3,.card.fx .card__body h3{color:var(--crimson)}
.card__body p{color:var(--ink-soft);font-size:.98rem}
.card__more{
  margin-top:auto;font-weight:700;font-size:.93rem;color:var(--crimson);
  display:inline-flex;align-items:center;gap:8px;transition:gap var(--t-fast) var(--ease)
}
.card:hover .card__more,.card.fx .card__more{gap:14px}
.card__more svg{width:15px;height:15px}
a.card{color:inherit}

/* fact / feature tiles */
.tile{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:12px;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),background var(--t-mid) var(--ease);
}
.tile:hover,.tile.fx{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--crimson);background:var(--crimson-wash)}
.tile h3{font-size:1.16rem;transition:color var(--t-fast) var(--ease)}
.tile:hover h3,.tile.fx h3{color:var(--crimson)}
.tile p{color:var(--ink-soft);font-size:.97rem}
.tile__icon{width:44px;height:44px;color:var(--crimson);transition:transform var(--t-mid) var(--ease)}
.tile__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.tile:hover .tile__icon,.tile.fx .tile__icon{transform:translateY(-3px) scale(1.07)}

/* numbered step */
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start}
.step__n{
  font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--crimson);
  width:56px;height:56px;border:2px solid var(--crimson);border-radius:50%;
  display:grid;place-items:center;flex:none;
  transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
.step:hover .step__n,.step.fx .step__n{background:var(--crimson);color:#fff;transform:scale(1.07)}
.step h3{margin-bottom:8px;transition:color var(--t-fast) var(--ease)}
.step:hover h3,.step.fx h3{color:var(--crimson)}
.step p{color:var(--ink-soft)}

/* team */
.person{text-align:left}
.person__media{aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--paper-warm-2);position:relative}
.person__media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform var(--t-slow) var(--ease-out),filter var(--t-mid) var(--ease)}
.person:hover .person__media img,.person.fx .person__media img{transform:scale(1.05)}
.person__media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--crimson);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--ease-out);
}
.person:hover .person__media::after,.person.fx .person__media::after{transform:scaleX(1)}
.person h3{margin-top:var(--sp-2);font-size:1.16rem;transition:color var(--t-fast) var(--ease)}
.person:hover h3,.person.fx h3{color:var(--crimson)}
.person__role{font-size:.85rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--crimson);margin-top:4px}
.person__bio{font-size:.95rem;color:var(--ink-soft);margin-top:10px}

/* condition chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-3)}
.chip{
  display:inline-block;padding:9px 17px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--paper);font-size:.93rem;color:var(--ink-soft);font-weight:600;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.chip:hover,.chip.fx{color:#fff;background:var(--crimson);border-color:var(--crimson);transform:translateY(-2px)}
.section--warm .chip{background:var(--paper)}

/* progressive disclosure */
.reveal-more{display:none}
.reveal-more.is-open{display:contents}
.more-btn{
  margin-top:var(--sp-3);background:none;border:0;color:var(--crimson);font-weight:700;
  display:inline-flex;align-items:center;gap:9px;padding:8px 0;
  transition:gap var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.more-btn:hover,.more-btn.fx{gap:15px;color:var(--crimson-deep)}
.more-btn svg{width:15px;height:15px;transition:transform var(--t-fast) var(--ease)}
.more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* FAQ, visible dl so crawlers and AI read it */
.faq{display:grid;gap:var(--sp-3)}
.faq__item{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--crimson);
  border-radius:var(--r-sm);padding:clamp(20px,2vw,28px);
  transition:box-shadow var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),border-left-color var(--t-mid) var(--ease);
}
.faq__item:hover,.faq__item.fx{box-shadow:var(--shadow-sm);transform:translateX(4px);border-left-color:var(--crimson-deep)}
.faq__q{font-family:var(--display);font-size:1.2rem;font-weight:700;margin:0 0 10px;color:var(--ink);transition:color var(--t-fast) var(--ease)}
.faq__item:hover .faq__q,.faq__item.fx .faq__q{color:var(--crimson)}
.faq__a{margin:0;color:var(--ink-soft)}

/* quote */
.quote{
  border-left:3px solid var(--crimson);padding-left:clamp(20px,2.4vw,34px);
  font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.34;color:var(--ink);
}
.quote cite{display:block;margin-top:var(--sp-2);font-family:var(--body);font-size:.92rem;font-style:normal;color:var(--ink-faint);letter-spacing:.03em}

/* media frame */
.frame{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--tall{aspect-ratio:4/5}
.frame--wide{aspect-ratio:16/10}
.frame--square{aspect-ratio:1}
.frame::after{
  content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);pointer-events:none;
}
.frame__cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 16px;
  background:linear-gradient(to top,rgba(16,16,16,.88),transparent);
  color:#fff;font-size:.88rem;font-weight:600;letter-spacing:.01em;
}

/* media mosaic, keeps image count high without filler */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.mosaic .frame{aspect-ratio:1}
.mosaic .frame:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:1}
.mosaic img{transition:transform var(--t-slow) var(--ease-out)}
.mosaic .frame:hover img,.mosaic .frame.fx img{transform:scale(1.07)}

/* callout band */
.band{
  background:var(--crimson);color:#fff;border-radius:var(--r-lg);
  padding:clamp(30px,4vw,60px);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-4);align-items:center;
}
.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.9);margin-top:10px}

/* insurance / logos row */
.payers{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-3)}
.payer{
  padding:11px 20px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--paper);font-weight:700;font-size:.92rem;color:var(--ink-soft);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.payer:hover,.payer.fx{border-color:var(--crimson);color:var(--crimson);transform:translateY(-2px)}

/* prose, for blog and legal pages */
.prose{max-width:74ch}
.prose h2{margin-top:var(--sp-6);margin-bottom:var(--sp-2)}
.prose h3{margin-top:var(--sp-5);margin-bottom:var(--sp-1)}
.prose p{margin-bottom:var(--sp-3);color:var(--ink-soft)}
.prose ul,.prose ol{margin:0 0 var(--sp-3) 1.25em;color:var(--ink-soft)}
.prose li{margin-bottom:10px;list-style:disc}
.prose ol li{list-style:decimal}
.prose a{text-decoration:underline;text-underline-offset:3px;transition:color var(--t-fast) var(--ease)}
.prose a:hover{color:var(--crimson-deep)}
.prose strong{color:var(--ink)}
.prose img{border-radius:var(--r-md);margin-block:var(--sp-4)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4vw,64px);align-items:start}
.info-list{display:grid;gap:var(--sp-3);margin-top:var(--sp-3)}
.info{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.info__ico{width:40px;height:40px;border-radius:50%;background:var(--crimson-wash);color:var(--crimson);display:grid;place-items:center;flex:none;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.info__ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.info:hover .info__ico,.info.fx .info__ico{background:var(--crimson);color:#fff;transform:scale(1.08)}
.info__k{font-size:.79rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.info__v{font-size:1.06rem;font-weight:600;color:var(--ink);margin-top:2px}
.info__v a{color:var(--ink);transition:color var(--t-fast) var(--ease)}
.info:hover .info__v a,.info.fx .info__v a{color:var(--crimson)}
.map-frame{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/11;background:var(--paper-warm-2)}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
/* Deferred embeds keep their box so nothing shifts when they arrive. */
iframe[data-src]{background:var(--paper-warm-2)}
.embed-hold{position:relative;background:var(--paper-warm-2);border-radius:var(--r-md);overflow:hidden}
.embed-hold__note{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;
  color:var(--ink-faint);font-size:.94rem;pointer-events:none;
}
iframe[data-loaded]~.embed-hold__note{display:none}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.76);padding-block:clamp(48px,6vw,80px) 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(26px,3vw,48px)}
.site-footer h2{color:#fff;font-family:var(--body);font-size:.81rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:var(--sp-2);line-height:1.4}
.site-footer a{color:rgba(255,255,255,.76);transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease)}
.site-footer a:hover,.site-footer a.fx{color:#fff}
.site-footer nav a{display:block;padding-block:6px}
.site-footer nav a:hover,.site-footer nav a.fx{padding-left:6px;color:#F0A0AE}
/* No invert: Brand Guide rule 2 allows crimson-on-white OR white-on-crimson only.
   brightness(0) invert(1) produced a white silhouette, which is a third and
   non-permitted combination. The logo carries its own white ground. */
.footer-brand img{width:148px;height:auto;display:block;margin-bottom:var(--sp-3)}
.footer-bottom{
  margin-top:clamp(34px,4vw,56px);border-top:1px solid rgba(255,255,255,.14);
  padding-block:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:.86rem;color:rgba(255,255,255,.52);
}
.footer-bottom a{color:rgba(255,255,255,.62)}

/* ---------- motion, reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.955)}
[data-reveal].is-in{transform:none}
[data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .68s var(--ease-out),transform .68s var(--ease-out)}
[data-stagger].is-in>*{opacity:1;transform:none}

/* split text heading */
.split-text .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(1.4deg);transition:opacity .62s var(--ease-out),transform .62s var(--ease-out)}
.split-text.is-in .w{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic .frame:nth-child(1){grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
}
@media (max-width:900px){
  :root{--header-h:66px}
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line);padding:var(--sp-3) var(--gutter) var(--sp-4);
    gap:2px;margin-left:0;box-shadow:var(--shadow-md);
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility var(--t-mid);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav a{padding-block:13px;border-bottom:1px solid var(--line);font-size:1.03rem}
  .nav a::after{display:none}
  .nav .btn{margin-top:var(--sp-3);border-bottom:0;justify-content:center}
  .split,.contact-grid{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .band{grid-template-columns:1fr}
}
/* Horizontal reveal offsets push past the viewport edge on a narrow screen
   and register as a horizontal scroll before the element reveals. Below the
   tablet breakpoint every reveal travels vertically instead. */
@media (max-width:900px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(26px)}
  [data-reveal="left"].is-in,[data-reveal="right"].is-in{transform:none}
}

@media (max-width:720px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:20px 30px}
  .stat{min-width:104px}
  .step{grid-template-columns:1fr;gap:var(--sp-2)}
  .quote{padding-left:18px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-stagger]>*,.split-text .w{opacity:1!important;transform:none!important}
  .measure::after,.eyebrow::after{transform:scaleX(1)!important}
}

/* ---------- print ---------- */
@media print{
  .site-header,.site-footer,.nav-toggle,.band{display:none}
  body{padding-top:0;color:#000}
}

/* ---------------------------------------------------------------------------
 * Two-path booking, ported from Contact-body-2026-09-09.html
 * (Contact-Page-Two-Path-Booking-AS-BUILT-2026-09-16.md).
 *
 * Why this exists: the GHL form's on-submit redirect sends people to
 * app.practiceperfectemr.com, which 301s to a patient-portal SIGN IN screen. A
 * brand new lead who just typed their name and phone lands on a login they have
 * no account for. The fix is to label the two audiences so each self-selects,
 * rather than routing everyone down the existing-client path.
 *
 * ADAPTED, deliberately: the GHL original is a near-white card because it sat
 * in a dark column and needed to stand out. Here the column is on white, so a
 * near-white card would disappear instead. Same intent, different ground:
 * crimson-wash fill with the crimson edge bar and icon tile, so it still reads
 * as a distinct card and still rhymes with the white form opposite it.
 * ------------------------------------------------------------------------- */
.portalcard{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;
  border-radius:var(--r-md);border:1px solid rgba(196,30,58,.26);
  background:linear-gradient(150deg,var(--crimson-wash) 0%,#FFF7F8 100%);
  padding:20px 22px;margin-top:var(--sp-4);text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
}
.portalcard::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--crimson)}
.portalcard:hover,.portalcard.fx.on{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(196,30,58,.5)}
.portalcard:focus-visible{outline:3px solid var(--crimson);outline-offset:3px}
.portalcard .pin{flex:none;width:46px;height:46px;border-radius:12px;background:var(--crimson);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(196,30,58,.32)}
.portalcard .pin svg{width:22px;height:22px}
.portalcard .mtxt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.portalcard .plabel{display:block;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);margin-bottom:3px}
.portalcard .mtxt strong{color:var(--ink);font-family:var(--display);font-size:1.03rem;letter-spacing:-.01em}
.portalcard .psub{color:var(--ink-soft);font-size:.86rem;margin-top:2px}
.portalcard .pbtn{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;
  background:var(--crimson);color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem;
  padding:14px 20px;border-radius:12px;box-shadow:0 10px 22px rgba(196,30,58,.34);
  transition:background var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.portalcard .pbtn svg{width:16px;height:16px;transition:transform var(--t-mid) var(--ease)}
.portalcard:hover .pbtn,.portalcard.fx.on .pbtn{background:var(--crimson-deep);box-shadow:0 14px 28px rgba(196,30,58,.46)}
.portalcard:hover .pbtn svg,.portalcard.fx.on .pbtn svg{transform:translateX(3px)}
/* Stays visible on mobile: a current client on a phone is exactly who needs it. */
@media (max-width:600px){
  .portalcard{flex-wrap:wrap;gap:14px}
  .portalcard .pbtn{margin-left:0;width:100%;justify-content:center;padding:14px}
}

/* ---------------------------------------------------------------------------
 * About hero cluster, ported from About-body-2026-07-30.html.
 *
 * This is the client's signature About device: the team arranged as an orbit
 * around a "serving since 1987" chip, so the page opens on the people and the
 * longevity at once. The WordPress build had replaced it with a stock page
 * hero over a cluttered reception photo, which said neither.
 *
 * Geometry, sizes and float timings are the shipped values, not re-derived.
 * ------------------------------------------------------------------------- */
.abouthero{position:relative;overflow:hidden;background:var(--paper);padding:clamp(56px,7vw,96px) 0}
.abouthero__glow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.abouthero__glow::before{content:"";position:absolute;width:62vw;height:62vw;right:-16vw;top:-26vw;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(196,30,58,.16),transparent 62%);filter:blur(10px)}
.abouthero__glow::after{content:"";position:absolute;width:42vw;height:42vw;left:-14vw;bottom:-24vw;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,120,140,.12),transparent 62%);filter:blur(14px)}
.abouthero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.abouthero h1{margin-bottom:var(--sp-3)}
.abouthero .lede{color:var(--ink-soft);max-width:54ch}

.cluster{position:relative;width:100%;max-width:500px;height:480px;margin:0 auto}
.cluster .ph{position:absolute;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:0 20px 44px rgba(126,15,34,.22);background:var(--paper-warm)}
.cluster .ph::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(196,30,58,.35)}
.cluster .ph img{width:100%;height:100%;object-fit:cover;display:block}
.cluster .p1{width:45%;height:45%;left:29%;top:24%;z-index:5;animation:coro-floaty 7s ease-in-out infinite}
.cluster .p2{width:31%;height:31%;left:1%;top:6%;z-index:4;animation:coro-floaty 8s ease-in-out .4s infinite}
.cluster .p3{width:27%;height:27%;left:5%;top:62%;z-index:4;animation:coro-floaty 9s ease-in-out .8s infinite}
.cluster .p4{width:28%;height:28%;right:1%;top:10%;z-index:4;animation:coro-floaty 8.5s ease-in-out .2s infinite}
.cluster .p5{width:25%;height:25%;right:5%;top:64%;z-index:4;animation:coro-floaty 7.5s ease-in-out .6s infinite}
.cluster .yrchip{position:absolute;left:30%;top:79%;transform:translateX(-50%);z-index:6;background:var(--crimson);color:#fff;border-radius:14px;padding:9px 16px;box-shadow:0 14px 30px rgba(196,30,58,.42);text-align:center;animation:coro-floaty 8s ease-in-out .5s infinite}
.cluster .yrchip b{font-family:var(--display);font-weight:800;font-size:23px;display:block;line-height:1}
.cluster .yrchip small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
@keyframes coro-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.cluster .yrchip{animation-name:coro-floaty-chip}
@keyframes coro-floaty-chip{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@media (max-width:900px){
  .abouthero__grid{grid-template-columns:1fr;gap:40px}
  .cluster{max-width:440px;height:440px;margin-top:8px}
}
@media (max-width:560px){ .cluster{max-width:340px;height:340px} }
@media (prefers-reduced-motion:reduce){
  .cluster .ph,.cluster .yrchip{animation:none}
}

/* ---------------------------------------------------------------------------
 * GHL form card. min-height, never a fixed height: form_embed.js resizes the
 * iframe to its real content height, and a fixed height clips consent text and
 * the Submit button (Codex C02). Values match the live page.
 * ------------------------------------------------------------------------- */
/* min-height is set to the height the embed actually settles at, measured per
   breakpoint on the deployed page (390: 796, 768: 696, 1440: 716). Reserving
   only 600 made the frame grow on load and pushed contact CLS to 0.22. The
   frame can still grow beyond this, for example when validation errors expand
   the form, which is the behaviour we want and a far smaller shift. */
.formcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);min-height:720px}
.formcard iframe{width:100%;min-height:720px;border:0;display:block;background:var(--paper)}
@media (max-width:600px){ .formcard,.formcard iframe{min-height:800px} }
@media (min-width:601px) and (max-width:900px){ .formcard,.formcard iframe{min-height:700px} }
/* Sticky header would otherwise cover the anchored form heading. */
#book{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---------------------------------------------------------------------------
 * Exact-fidelity pages: /contact/ and /edmonton-massage-therapy/.
 *
 * The live coded contact page sets its hero heading at clamp(34px,5vw,58px).
 * The theme default runs to 70px, which is a visible fidelity drift on a page
 * that has to match its reference. Scoped to these two routes only, so the rest
 * of the site keeps the established scale.
 * ------------------------------------------------------------------------- */
.page-contact .pagehero h1,
.page-edmonton-massage-therapy .m-hero h1{font-size:clamp(34px,5vw,58px)}
.page-contact .pagehero .lede,
.page-edmonton-massage-therapy .m-hero p{font-size:clamp(17px,1.6vw,20px)}

/* ---------------------------------------------------------------------------
 * Services dropdown. Real disclosure, not a hover-only menu: the button is
 * focusable and toggles aria-expanded, so it works on keyboard and on touch.
 * Hover opens it only where a pointer actually exists.
 * ------------------------------------------------------------------------- */
.nav__group{position:relative;display:flex;align-items:center}
.nav__toggle{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:.99rem;font-weight:500;color:var(--ink);
  padding:8px 0;position:relative;transition:color var(--t-fast) var(--ease);
}
.nav__toggle svg{width:15px;height:15px;transition:transform var(--t-fast) var(--ease)}
.nav__toggle:hover,.nav__toggle.is-current,.nav__group.is-open .nav__toggle{color:var(--crimson)}
.nav__group.is-open .nav__toggle svg{transform:rotate(180deg)}
.nav__toggle::after{
  content:"";position:absolute;left:0;right:18px;bottom:2px;height:2px;background:var(--crimson);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--ease);
}
.nav__toggle:hover::after,.nav__toggle.is-current::after{transform:scaleX(1)}
.nav__toggle:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;border-radius:4px}

.nav__menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:266px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:60;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility var(--t-mid);
}
.nav__group.is-open .nav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav__menu a{
  display:block;padding:10px 14px;border-radius:var(--r-sm);font-size:.95rem;color:var(--ink);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);
}
.nav__menu a::after{display:none}
.nav__menu a:hover,.nav__menu a:focus-visible{background:var(--crimson-wash);color:var(--crimson);padding-left:18px}
.nav__menu a[aria-current="page"]{color:var(--crimson);font-weight:600}

@media (hover:hover) and (min-width:901px){
  /* The menu is position:absolute, so it does not extend .nav__group's box.
     That left a 10px dead band between the button's bottom (59) and the menu's
     top (69) belonging to neither element: the moment the pointer entered it,
     .nav__group:hover stopped matching and the menu closed before the pointer
     could reach an item. The menu is also 266px wide against an 81px button,
     so a diagonal move exited sideways for the same reason.

     This pseudo-element bridges the gap at the menu's full width. A generated
     box is part of its originating element for hit testing, so the group stays
     hovered while the pointer crosses. It only exists while the group is open,
     so it never sits invisibly over the nav links next to it. */
  /* No :hover rule opens the menu. JS owns open/closed through .is-open and
     keeps aria-expanded in step. When CSS opened it on :hover as well there
     were two owners: a mouse click always follows a hover, so the click
     handler toggled the state shut while :hover held the menu on screen. The
     button then reported collapsed under a visibly open menu, and Escape
     appeared to do nothing because it only cleared the class. */

  .nav__group::after{
    content:"";position:absolute;left:50%;transform:translateX(-50%);
    top:100%;width:286px;height:14px;pointer-events:none;
  }
  .nav__group:hover::after,
  .nav__group:focus-within::after,
  .nav__group.is-open::after{pointer-events:auto}
}
/* In the mobile drawer the menu is inline, never floated. */
@media (max-width:900px){
  .nav__group{display:block}
  .nav__toggle{width:100%;justify-content:space-between;padding-block:13px;border-bottom:1px solid var(--line);font-size:1.03rem}
  .nav__toggle::after{display:none}
  .nav__menu{
    position:static;transform:none;min-width:0;border:0;box-shadow:none;background:transparent;
    padding:0 0 0 10px;max-height:0;overflow:hidden;opacity:1;visibility:visible;pointer-events:auto;
    transition:max-height var(--t-mid) var(--ease);
  }
  .nav__group.is-open .nav__menu{max-height:560px;transform:none}
  .nav__menu a{padding:11px 12px;border-bottom:1px solid var(--line)}
}

/* Inline article figures. Two per post, chosen for the topic and captioned, so
   they read as editorial rather than as the repeated filler strip they replace. */
.postfigs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media (max-width:720px){ .postfigs{grid-template-columns:1fr} }

/* ---------- Blog sprint 2026-10: in-article figure, booking banner, reviewer byline ---------- */
.prose .postfig{margin:var(--sp-5) 0;box-shadow:var(--shadow-md);background:var(--paper);border:1px solid var(--line);transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-fast) var(--ease)}
.prose .postfig img{margin:0;border-radius:0;aspect-ratio:3/2;height:auto;transition:transform var(--t-slow) var(--ease-out)}
.prose .postfig::after{display:none}
.postfig__cap{padding:14px 18px 16px;font-size:.92rem;line-height:1.5;color:var(--ink-soft);border-top:3px solid var(--crimson);transition:color var(--t-fast) var(--ease)}
.prose .postfig:hover,.prose .postfig.fx{transform:translateY(-4px);box-shadow:0 18px 40px rgba(139,21,37,.16);border-color:var(--crimson)}
.prose .postfig:hover img,.prose .postfig.fx img{transform:scale(1.04)}
.prose .postfig:hover .postfig__cap,.prose .postfig.fx .postfig__cap{color:var(--crimson-deep)}

.postbook{margin:var(--sp-6) 0;background:linear-gradient(135deg,var(--crimson) 0%,var(--crimson-deep) 100%);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);display:grid;gap:var(--sp-3);box-shadow:0 18px 44px rgba(139,21,37,.28);transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.postbook:hover,.postbook.fx{transform:translateY(-4px);box-shadow:0 24px 54px rgba(139,21,37,.38)}
.prose .postbook p{color:rgba(255,255,255,.92);margin:0}
.prose .postbook .postbook__eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFD9DF}
.prose .postbook .postbook__head{font-family:var(--font-display,inherit);font-weight:800;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.12;color:#fff;margin-top:6px}
.prose .postbook .postbook__copy{margin-top:8px}
.postbook__actions{display:flex;flex-wrap:wrap;gap:12px}
.prose .postbook a{text-decoration:none}
.postbook .postbook__btn{background:#fff;color:var(--crimson);border-color:#fff}
.postbook .postbook__btn:hover,.postbook .postbook__btn.fx{background:var(--ink,#1a1a1a);color:#fff;border-color:var(--ink,#1a1a1a)}

.postby{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:var(--sp-5);border:1px solid var(--line);border-left:4px solid var(--crimson);border-radius:var(--r-md);background:var(--crimson-wash);transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.postby:hover,.postby.fx{box-shadow:var(--shadow-sm);transform:translateX(4px)}
.postby__faces{display:flex;flex:none}
.postby__face{width:52px;height:52px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:var(--shadow-sm)}
.postby__face + .postby__face{margin-left:-14px}
.postby__face img{width:100%;height:100%;object-fit:cover}
.postby__text{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.postby__text a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;transition:color var(--t-fast) var(--ease)}
.postby__text a:hover{color:var(--crimson)}
.postby__text span{font-size:.85rem;opacity:.85}
@media (max-width:560px){.postby{align-items:flex-start}.postby__face{width:44px;height:44px}}