/* ==========================================================================
   THE COMPANION CIRCLE — v4
   Idea: it takes a circle to feel connected.
   Palette: ivory · deep teal · antique gold — derived from the logo
   Type:    Fraunces (editorial display, wght 560) + Inter (UI/body)
   Every colour pair below was contrast-checked by calculation, not by eye.
   ========================================================================== */

/* ------------------------------------------------------------- 1. Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ivory);overflow-x:clip}
body{overflow-x:clip;width:100%}
img,svg,video{display:block;max-width:100%;height:auto}
picture{display:contents}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px;border-radius:2px}

/* ------------------------------------------------------------ 2. Tokens */
:root{
  /* Surfaces — teal + gold, derived from the logo */
  --ivory:#FAF7F2;        /* page */
  --linen:#EFE9DE;        /* alternating bands */
  --paper:#FFFFFF;        /* cards */
  --teal:#143238;         /* dark sections — deepened logo teal */
  --teal-2:#204B52;       /* THE logo teal, exact */

  /* Ink — verified on ivory */
  --ink:#17272B;          /* 14.4:1 */
  --ink-soft:#4E5F63;     /* 6.3:1  */
  --ink-faint:#74868A;    /* 3.6:1 — large/decorative only */

  /* Action — teal on light ground, gold on dark ground (flipped below) */
  --action:#204B52;       /* the logo teal, exact — shape vs ivory 9.0:1 */
  --on-action:#FFFFFF;    /* 9.8:1 on action */
  --action-glow:#DDE7E7;

  /* Accent — the logo gold */
  --accent:#C3965A;       /* logo ring gold, exact — on teal 5.1:1 */
  --accent-light:#D4AE7B; /* logo figure gold, exact — small text & photo grounds, 6.6:1 on teal */
  --accent-ink:#7A5C22;   /* accent text on light 5.8:1 */
  --accent-mist:#F4EADA;

  --on-dark:#F3F0E9;      /* 12.0:1 on teal */
  --on-dark-soft:#B9C4C5; /* 7.6:1  on teal */

  --rule:rgba(23,39,43,.12);
  --rule-2:rgba(23,39,43,.22);
  --rule-dark:rgba(243,240,233,.18);

  /* Type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --scale:1;                                    /* driven by the text-size control */
  --t--1:calc(clamp(.875rem,.85rem + .12vw,.9375rem)*var(--scale));
  --t-0: calc(clamp(1.0625rem,1.02rem + .26vw,1.1875rem)*var(--scale));
  --t-1: calc(clamp(1.1875rem,1.11rem + .4vw,1.4375rem)*var(--scale));
  --t-2: calc(clamp(1.5rem,1.32rem + .9vw,2.25rem)*var(--scale));
  --t-3: calc(clamp(2rem,1.62rem + 1.9vw,3.5rem)*var(--scale));
  --t-4: calc(clamp(2.5rem,1.9rem + 3vw,5rem)*var(--scale));
  --t-5: calc(clamp(2.875rem,1.9rem + 4.9vw,6.75rem)*var(--scale));

  /* Space — generous, editorial */
  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem;
  --s5:3rem;  --s6:4.5rem;  --s7:7rem;    --s8:10rem;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --maxw:88rem;
  --measure:34rem;

  --r-xs:6px; --r-sm:12px; --r-md:20px; --r-lg:32px; --r-pill:999px;
  --lift-1:0 2px 12px -6px rgba(20,50,56,.18);
  --lift-2:0 18px 44px -24px rgba(20,50,56,.30);
  --lift-3:0 36px 80px -40px rgba(20,50,56,.38);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --f1:200ms; --f2:450ms; --f3:900ms;
  --nav-h:88px;
}

/* Dark grounds: gold becomes the action colour, deep teal its text. */
.dark,.site-footer,.drawer,.hero,.cta-photo,.visit,.circle-film{
  --action:#C3965A;      /* the logo gold, exact — 5.1:1 on teal */
  --on-action:#143238;   /* 5.1:1 on action */
}

/* -------------------------------------------------------------- 3. Base */
body{
  font-family:var(--sans);font-size:var(--t-0);font-weight:420;line-height:1.65;
  color:var(--ink);background:var(--ivory);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.04;letter-spacing:-.018em;
  font-variation-settings:"opsz" 144,"SOFT" 18,"WONK" 0;text-wrap:balance;padding-bottom:.06em}
h1{font-size:var(--t-4)}h2{font-size:var(--t-3)}h3{font-size:var(--t-2)}
h4{font-family:var(--sans);font-size:var(--t-0);font-weight:650;letter-spacing:-.01em;line-height:1.3}
p{text-wrap:pretty;overflow-wrap:anywhere}
.lede{font-size:var(--t-1);font-weight:420;line-height:1.5;color:var(--ink-soft);max-width:38ch}
.prose{max-width:var(--measure)}
.prose p{color:var(--ink-soft)}.prose p+p{margin-top:1.05em}
strong{font-weight:650;color:var(--ink)}
em{font-style:italic}
::selection{background:var(--action);color:var(--on-action)}
.skip-link{position:fixed;top:0;left:0;z-index:999;transform:translateY(-130%);background:var(--teal);
  color:var(--on-dark);padding:1rem 1.5rem;font-weight:650;transition:transform var(--f1) var(--ease)}
.skip-link:focus{transform:none}

/* ------------------------------------------------------------ 4. Layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:62rem}
.section{padding-block:clamp(4.5rem,9vw,var(--s7))}
.section-lg{padding-block:clamp(5.5rem,12vw,var(--s8))}
.section-sm{padding-block:clamp(3rem,6vw,var(--s5))}
.grid{display:grid;gap:var(--s4)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.split-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split-top{align-items:start}
@media (max-width:940px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split-wide{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}
@media (max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:minmax(0,1fr)}}
.linen{background:var(--linen)}
.dark{background:var(--teal);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark strong{color:var(--on-dark)}
.dark p,.dark .lede{color:var(--on-dark-soft)}
.dark .eyebrow,.visit .eyebrow{color:var(--accent-light)}
.hero .eyebrow,.cta-photo .eyebrow{color:#fff}
.rule{height:1px;background:var(--rule);border:0}

/* --------------------------------------------------- 5. Typographic bits */
/* The eyebrow carries the circle motif: a small ring rather than a dash. */
.eyebrow{display:flex;align-items:center;gap:.65rem;font-size:.75rem;font-weight:650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:var(--s3)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid currentColor;flex:none}
.eyebrow.center{justify-content:center}
.section-head{max-width:46rem;margin-bottom:var(--s5)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.display{font-family:var(--serif);font-weight:560;line-height:1.04;letter-spacing:-.018em;
  font-variation-settings:"opsz" 144,"SOFT" 18,"WONK" 0}
.serif-em{font-family:var(--serif);font-style:italic}

/* --------------------------------------------------------- 6. Buttons */
.btn{--bg:var(--action);--fg:var(--on-action);--bd:var(--action);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:58px;padding:1rem 1.9rem;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font-size:1rem;font-weight:650;letter-spacing:-.005em;text-decoration:none;
  transition:transform var(--f2) var(--ease),box-shadow var(--f2) var(--ease),
             background var(--f1) linear,color var(--f1) linear,border-color var(--f1) linear}
.btn:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.btn:active{transform:translateY(0)}
.btn .ico{width:18px;height:18px;flex:none;transition:transform var(--f2) var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--rule-2)}
.btn-ghost:hover{--bg:var(--ink);--fg:var(--ivory);--bd:var(--ink)}
.dark .btn-ghost,.site-footer .btn-ghost,.drawer .btn-ghost,.on-photo .btn-ghost,.hero .btn-ghost,.visit .btn-ghost{
  --fg:var(--on-dark);--bd:rgba(243,240,233,.75);--bg:rgba(243,240,233,.10)}
.dark .btn-ghost:hover,.site-footer .btn-ghost:hover,.drawer .btn-ghost:hover,.on-photo .btn-ghost:hover,.hero .btn-ghost:hover,.visit .btn-ghost:hover{
  --bg:var(--on-dark);--fg:var(--teal);--bd:var(--on-dark)}
.btn-light{--bg:var(--ivory);--fg:var(--ink);--bd:var(--ivory)}
.btn-light:hover{--bg:#fff;--bd:#fff}
.btn-lg{min-height:64px;padding:1.15rem 2.25rem;font-size:1.0625rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.link-u{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;color:var(--accent-ink);
  text-decoration:none;font-weight:650;padding-block:.4rem;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1.5px;
  transition:background-size var(--f2) var(--ease)}
.link-u:hover{background-size:0 1.5px;background-position:100% 100%}
.dark .link-u,.site-footer .link-u,.drawer .link-u,.on-photo .link-u,.hero .link-u,.visit .link-u{color:var(--accent)}
.link-u .ico{width:16px;height:16px;flex:none}

/* --------------------------------------------------------- 7. Header */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;background:var(--action);
  transform:scaleX(0);transform-origin:0 50%}
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;border-bottom:1px solid transparent;
  transition:transform var(--f2) var(--ease),background var(--f2) linear,border-color var(--f2) linear}
.site-header.stuck{background:rgba(250,247,242,.90);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--rule)}
.site-header.hide{transform:translateY(-100%)}
.site-header.on-film:not(.stuck){--nav-fg:var(--on-dark)}
.header-inner{display:flex;align-items:center;gap:clamp(.75rem,1.3vw,1.25rem);min-height:var(--nav-h);min-width:0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--nav-fg,var(--ink));
  flex:1 1 auto;min-width:0}
.brand{position:relative}
.brand-mark{height:50px;width:auto;flex:none;transition:transform var(--f3) var(--ease),opacity var(--f2) linear}
.brand-mark-col{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.brand:hover .brand-mark{transform:scale(1.05)}
.brand:hover .brand-mark-col{transform:translateY(-50%) scale(1.05)}
/* Over a photograph the logo's own teal disappears, so the reversed mark shows;
   once the bar solidifies on ivory, the full-colour mark takes over. */
.site-header:not(.on-film) .brand-mark-rev,
.site-header.stuck .brand-mark-rev{opacity:0}
.site-header:not(.on-film) .brand-mark-col,
.site-header.stuck .brand-mark-col{opacity:1}
.site-header.on-film:not(.stuck) .brand-mark-rev{opacity:1}
.site-header.on-film:not(.stuck) .brand-mark-col{opacity:0}

.brand-name{font-family:var(--serif);font-weight:580;font-variation-settings:"opsz" 40;font-size:1.26rem;line-height:1;letter-spacing:-.022em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:520px){.brand-mark{height:44px}.brand-name{font-size:1.15rem}}
@media (max-width:340px){.brand-name{display:none}}
.nav{display:flex;align-items:center;gap:clamp(.2rem,.5vw,.6rem);margin-left:auto;flex:none}
.nav a{position:relative;text-decoration:none;font-size:.875rem;font-weight:500;
  color:var(--nav-fg,var(--ink-soft));padding:.7rem .3rem;white-space:nowrap;transition:color var(--f1)}
.nav a::after{content:"";position:absolute;left:.3rem;right:.3rem;bottom:.4rem;height:1.5px;
  background:var(--action);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--f2) var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{font-weight:700}
.header-tools{display:flex;align-items:center;gap:.5rem;flex:none}
.header-tools>.btn{min-height:50px;padding:.75rem 1.35rem;font-size:.9375rem}
@media (max-width:1280px){.nav-desktop{display:none}}
.textsize{display:none;align-items:center;gap:2px;border:1.5px solid var(--rule-2);
  border-radius:var(--r-pill);padding:3px;background:rgba(250,247,242,.94)}
.textsize button{width:34px;height:34px;border-radius:50%;font-family:var(--serif);color:var(--ink-soft);
  line-height:1;transition:background var(--f1),color var(--f1)}
.textsize button:hover{background:var(--action-glow);color:var(--ink)}
.textsize button[aria-pressed="true"]{background:var(--action);color:var(--on-action)}
.textsize .a1{font-size:.8125rem}.textsize .a2{font-size:1rem}.textsize .a3{font-size:1.1875rem}
@media (min-width:1400px){.textsize{display:flex}}
.burger{display:none;width:52px;height:52px;align-items:center;justify-content:center;
  border:1.5px solid var(--rule-2);border-radius:50%;flex:none;background:rgba(250,247,242,.94)}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);border-radius:2px;position:relative;
  transition:background var(--f1)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;
  background:var(--ink);border-radius:2px;transition:transform var(--f2) var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1180px){.burger{display:flex}.header-tools>.btn{display:none}}
.drawer{position:fixed;inset:0;z-index:200;background:var(--teal);color:var(--on-dark);
  padding:calc(var(--nav-h) + var(--s3)) var(--gutter) var(--s5);display:flex;flex-direction:column;
  justify-content:space-between;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 52px) 44px);transition:clip-path 720ms var(--ease)}
.drawer[data-open="true"]{clip-path:circle(150% at calc(100% - 52px) 44px)}
.drawer[hidden]{display:none}
.drawer-nav{display:flex;flex-direction:column;gap:.1rem}
.drawer-nav a{display:flex;align-items:baseline;gap:1rem;text-decoration:none;color:var(--on-dark);
  font-family:var(--serif);font-size:clamp(1.7rem,7vw,2.5rem);padding:.35rem 0;opacity:0;transform:translateY(18px);
  transition:opacity 460ms var(--ease),transform 460ms var(--ease),color var(--f1)}
.drawer[data-open="true"] .drawer-nav a{opacity:1;transform:none}
.drawer-nav a:hover{color:var(--accent)}
.drawer-nav .n{font-family:var(--sans);font-size:.6875rem;font-weight:700;color:var(--accent);opacity:.85}
.drawer-foot{padding-top:var(--s4);margin-top:var(--s4);border-top:1px solid var(--rule-dark);display:grid;gap:var(--s2)}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.6rem;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(250,247,242,.96);backdrop-filter:blur(16px);border-top:1px solid var(--rule);
  transform:translateY(110%);transition:transform var(--f2) var(--ease)}
.callbar.show{transform:none}
.callbar .btn{flex:1;min-height:54px;padding-inline:1rem;font-size:.9375rem;white-space:nowrap}
@media (max-width:820px){.callbar{display:flex}body{padding-bottom:78px}}

/* ------------------------------------------------------------- 8. Hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden;color:var(--on-dark)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,50,56,.52) 0%,rgba(20,50,56,.10) 30%,rgba(20,50,56,.42) 62%,rgba(20,50,56,.88) 100%)}
.hero-inner{position:relative;padding-block:calc(var(--nav-h) + var(--s5)) clamp(4rem,9vw,7rem);max-width:56rem}
.hero h1{font-size:var(--t-5);color:#fff;letter-spacing:-.02em}
.hero .lede{color:var(--on-dark);max-width:44ch;font-size:var(--t-1)}
.hero .eyebrow{color:#fff}
.hero-facts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid rgba(243,240,233,.28)}
.hero-facts .k{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-soft);margin-bottom:.3rem}
.hero-facts .v{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 24;font-size:var(--t-1);color:#fff}
.scroll-cue{position:absolute;right:var(--gutter);bottom:clamp(1.5rem,4vw,2.5rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.625rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft)}
.scroll-cue i{width:1px;height:44px;background:linear-gradient(var(--accent),transparent);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:620px){.scroll-cue{display:none}}

/* Assurance strip directly under the hero */
.assure{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}
.assure div{padding:var(--s4) var(--s3);border-right:1px solid var(--rule);display:grid;gap:.35rem;align-content:start}
.assure div:last-child{border-right:0}
.assure .k{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 24;font-size:var(--t-1);line-height:1}
.assure .d{font-size:var(--t--1);color:var(--ink-soft)}
@media (max-width:820px){.assure{grid-template-columns:repeat(2,minmax(0,1fr))}
  .assure div:nth-child(2n){border-right:0}.assure div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}

/* ---------------------------------------------------- 9. THE CIRCLE */
/* Full-bleed film still. One drawn arc, labels on it, a photograph per member. */
.circle-film{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark);
  min-height:min(92svh,860px);display:grid;align-items:center;
  padding-block:clamp(var(--s6),11vw,var(--s8))}
.circle-beds{position:absolute;inset:0;z-index:-2;background:var(--teal)}
.circle-bed{position:absolute;inset:0;opacity:0;transition:opacity 900ms var(--ease)}
.circle-bed[data-on="true"]{opacity:1}
.circle-bed img{width:100%;height:100%;object-fit:cover}
/* Scrim: verified to carry --on-dark text at AA over the lightest of the five frames. */
/* Two scrims: a light teal tint to tie the photograph to the brand, then a
   near-black gradient that does the actual contrast work. Keeps the warmth of
   the image instead of washing it flat teal. */
.circle-film::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(20,50,56,.34);mix-blend-mode:multiply}
.circle-film::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% 46%,rgba(6,20,23,.78) 0%,rgba(6,20,23,.64) 45%,rgba(6,20,23,.87) 100%)}
.circle-film-in{position:relative;text-align:center;max-width:56rem}
.circle-film-in h2{font-size:var(--t-4);max-width:16ch;margin-inline:auto}
.circle-film-in .lede{margin-inline:auto;color:var(--on-dark);max-width:44ch}
.circle-film-in .eyebrow{color:var(--accent-light)}

.circle-arc{position:relative;width:100%;aspect-ratio:100/30;min-height:170px}
.circle-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.circle-arc path{fill:none;stroke:var(--accent-light);stroke-width:1.25;opacity:.5}
.circle-dot{fill:var(--accent-light);opacity:.5;transition:opacity var(--f2)}
.circle-labels{position:absolute;inset:0;list-style:none}
.circle-label{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.circle-label>button{position:absolute;transform:translate(-50%,calc(-50% - 1.9rem));
  white-space:nowrap;font-family:var(--serif);font-weight:560;font-variation-settings:"opsz" 40;
  font-size:clamp(1rem,1.5vw,1.375rem);line-height:1;color:var(--on-dark-soft);
  padding:.75rem .6rem;min-height:44px;min-width:44px;
  transition:color var(--f2),transform var(--f2) var(--ease)}
.circle-label>button:hover{color:var(--on-dark)}
.circle-label>button[aria-pressed="true"]{color:var(--accent-light);
  transform:translate(-50%,calc(-50% - 2.1rem)) scale(1.06)}
.circle-label>button[aria-pressed="true"]::after{content:"";position:absolute;left:.6rem;right:.6rem;
  bottom:.45rem;height:1.5px;background:var(--accent-light)}

.circle-says{min-height:6.5rem;margin-top:var(--s3)}
.circle-say{display:none;font-size:var(--t-1);line-height:1.5;color:var(--on-dark);
  max-width:46ch;margin-inline:auto}
.circle-say[data-on="true"]{display:block;animation:fade-up 520ms var(--ease) both}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Below the arc's comfortable width the labels stack — same content, no diagram. */
@media (max-width:720px){
  .circle-arc{aspect-ratio:auto;min-height:0;margin-top:var(--s4)}
  .circle-arc svg{display:none}
  .circle-labels{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem .5rem}
  .circle-label{position:static;width:auto;height:auto}
  .circle-label>button{position:static;transform:none;font-size:1.0625rem;padding:.7rem .55rem}
  .circle-label>button[aria-pressed="true"]{transform:none}
  .circle-says{min-height:8.5rem}
}
@media (prefers-reduced-motion:reduce){
  .circle-bed{transition:none}
  .circle-say[data-on="true"]{animation:none}
}

/* --------------------------------------------------- 10. Loneliness */
.vignettes{display:grid;gap:0;border-top:1px solid var(--rule-dark)}
.vignette{padding:clamp(1.5rem,3.5vw,2.5rem) 0;border-bottom:1px solid var(--rule-dark);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:baseline}
.vignette .n{font-family:var(--serif);font-size:var(--t-1);color:var(--accent);line-height:1}
.vignette p{font-family:var(--serif);font-size:var(--t-2);line-height:1.2;color:var(--on-dark);max-width:24ch}
.turn{font-family:var(--serif);font-size:var(--t-3);line-height:1.1;max-width:20ch}
.turn em{font-style:italic;color:var(--accent)}

/* ------------------------------------------------------ 11. Matcher */
.matcher{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.5rem,4vw,3.5rem);box-shadow:var(--lift-1)}
.matcher-step{display:none}
.matcher-step[data-on="true"]{display:block;animation:fade-up 480ms var(--ease) both}
.matcher-q{font-family:var(--serif);font-size:var(--t-2);line-height:1.1;margin-bottom:var(--s2)}
.matcher-hint{color:var(--ink-soft);font-size:var(--t--1);margin-bottom:var(--s4)}
.chips{display:flex;flex-wrap:wrap;gap:.7rem}
.chip{display:inline-flex;align-items:center;gap:.6rem;min-height:56px;padding:.85rem 1.35rem;
  border-radius:var(--r-pill);border:1.5px solid var(--rule-2);background:var(--ivory);
  font-size:1rem;font-weight:550;text-align:left;
  transition:background var(--f1),border-color var(--f1),color var(--f1),transform var(--f2) var(--ease)}
.chip:hover{border-color:var(--action);transform:translateY(-2px)}
.chip .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule-2);flex:none;
  display:grid;place-items:center;transition:background var(--f1),border-color var(--f1)}
.chip .tick svg{width:12px;height:12px;color:var(--on-action);opacity:0;transition:opacity var(--f1)}
.chip[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.chip[aria-pressed="true"] .tick{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
.chip[aria-pressed="true"] .tick svg{opacity:1}
.matcher-nav{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--rule)}
.matcher-count{font-size:var(--t--1);color:var(--ink-soft);margin-right:auto}
.matcher-dots{display:flex;gap:.4rem;align-items:center}
.matcher-dots i{width:7px;height:7px;border-radius:50%;background:var(--rule-2);transition:background var(--f2),transform var(--f2)}
.matcher-dots i.on{background:var(--action);transform:scale(1.35)}
.matcher-summary{display:grid;gap:var(--s3)}
.matcher-summary .picked{display:flex;flex-wrap:wrap;gap:.5rem}
.matcher-summary .picked span{font-size:.875rem;font-weight:600;padding:.45rem .85rem;border-radius:var(--r-pill);
  background:var(--accent-mist);color:var(--ink)}

/* ---------------------------------------------------- 12. Steps */
.steps-ed{display:grid;gap:0}
.step-ed{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,4.5rem);
  padding-block:clamp(2.5rem,6vw,4.5rem);border-top:1px solid var(--rule);align-items:center}
.step-ed:last-child{border-bottom:1px solid var(--rule)}
.step-ed .no{font-family:var(--serif);font-size:clamp(3rem,7vw,5.5rem);line-height:.9;color:var(--action);
  display:block;margin-bottom:var(--s2)}
.step-ed h3{font-size:var(--t-3);margin-bottom:var(--s2)}
.step-ed p{color:var(--ink-soft);max-width:40ch;font-size:var(--t-1);line-height:1.5}
.step-ed figure{margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3}
.step-ed figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.step-ed:hover figure img{transform:scale(1.04)}
@media (max-width:860px){.step-ed{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------- 13. A real visit */
.visit{background:var(--teal);color:var(--on-dark);position:relative}
.visit-pin{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.visit-head{padding:calc(var(--nav-h) + 1.5rem) var(--gutter) 1.25rem;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:end}
.visit-head h2{font-size:var(--t-3);color:var(--on-dark);max-width:16ch}
@media (max-width:960px){.visit-head{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding-top:calc(var(--nav-h) + 1rem)}}
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding-top:1.5rem}
.timeline::before{content:"";position:absolute;left:0;right:0;top:.5rem;height:1px;background:rgba(243,240,233,.22)}
.tl-fill{position:absolute;left:0;top:.5rem;height:1px;background:var(--accent);width:0}
.tl-mark{position:relative;display:block;grid-row:1;text-align:left;font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 24;
  font-size:var(--t-0);color:var(--on-dark-soft);padding:.55rem .4rem .3rem 0;min-height:44px;transition:color var(--f2)}
.tl-mark::before{content:"";position:absolute;left:0;top:-1rem;width:9px;height:9px;border-radius:50%;
  background:var(--teal);border:1.5px solid rgba(243,240,233,.45);
  transition:background var(--f2),border-color var(--f2),transform var(--f2) var(--ease)}
.tl-mark[aria-current="true"]{color:#fff}
.tl-mark[aria-current="true"]::before{background:var(--accent);border-color:var(--accent);transform:scale(1.4);
  box-shadow:0 0 0 5px rgba(124,139,122,.25)}
.tl-mark small{display:block;font-family:var(--sans);font-size:.625rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-soft);margin-top:.15rem}
.visit-track{display:flex;gap:2.5vw;padding:0 var(--gutter) var(--s5);align-items:stretch;will-change:transform}
.visit .panel{flex:0 0 auto;width:min(74vw,1120px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  border-radius:var(--r-lg);overflow:hidden;background:var(--teal-2);border:1px solid var(--rule-dark)}
.visit .panel figure{position:relative;margin:0;min-height:100%}
.visit .panel figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel-copy{padding:clamp(1.5rem,3.4vw,3.25rem);display:grid;align-content:center;gap:.55rem}
.visit .panel .time{font-family:var(--serif);font-size:var(--t-2);color:var(--accent);line-height:1}
.visit .panel h3{font-size:var(--t-3);color:#fff}
.visit .panel p:not(.time){font-size:var(--t-0);line-height:1.55;color:var(--on-dark);max-width:34ch}
.panel-n{font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--accent-light)}
.visit.native .visit-pin{min-height:auto}
.visit.native .visit-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:var(--s5)}
.visit.native .visit-track::-webkit-scrollbar{display:none}
.visit.native .panel{scroll-snap-align:start;width:min(86vw,560px);grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto}
.visit.native .panel figure{aspect-ratio:4/3;min-height:0}
.visit.native .tl-mark small{display:none}
.visit-hint{padding:0 var(--gutter) var(--s4);font-size:var(--t--1);color:var(--on-dark-soft);display:none}
.visit.native .visit-hint{display:block}

/* --------------------------------------------------- 14. For families */
.phone{width:min(100%,320px);aspect-ratio:9/18.5;border-radius:38px;background:var(--teal);
  border:9px solid var(--teal-2);box-shadow:var(--lift-3);padding:1.1rem .9rem;display:grid;
  align-content:start;gap:.7rem;position:relative;overflow:hidden}
.phone::before{content:"";position:absolute;top:.55rem;left:50%;transform:translateX(-50%);
  width:34%;height:6px;border-radius:4px;background:rgba(243,240,233,.22)}
.phone-top{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--rule-dark)}
.phone-top .av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;background:var(--accent)}
.phone-top .av img{width:100%;height:100%;object-fit:cover}
.phone-top .who{font-size:.8125rem;font-weight:650;color:var(--on-dark);line-height:1.2}
.phone-top .who small{display:block;font-weight:400;font-size:.6875rem;color:var(--on-dark-soft)}
.bubble{background:var(--teal-2);border-radius:16px 16px 16px 5px;padding:.85rem 1rem;
  font-size:.875rem;line-height:1.5;color:var(--on-dark);max-width:92%}
.bubble.me{background:var(--accent);color:var(--teal);border-radius:16px 16px 5px 16px;margin-left:auto;font-weight:500}
.bubble .stamp{display:block;font-size:.625rem;color:var(--on-dark-soft);margin-top:.4rem;letter-spacing:.04em}
.bubble.me .stamp{color:var(--teal)}
.phone-photo{border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.phone-photo img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------- 15. Companions */
.companions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
@media (max-width:1080px){.companions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.companions{grid-template-columns:minmax(0,1fr)}}
.comp{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:transform var(--f2) var(--ease),box-shadow var(--f2) var(--ease)}
.comp:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
.comp figure{margin:0;aspect-ratio:4/5;overflow:hidden;position:relative}
.comp figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.comp:hover figure img{transform:scale(1.05)}
.comp-body{padding:var(--s3);display:grid;gap:.55rem;flex:1}
.comp-name{font-family:var(--serif);font-size:var(--t-2);line-height:1}
.comp-role{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.comp-line{font-family:var(--serif);font-style:italic;font-size:1.0625rem;line-height:1.35;color:var(--ink)}
.comp-meta{font-size:var(--t--1);color:var(--ink-soft);line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.5rem}
.tags span{font-size:.75rem;font-weight:600;padding:.3rem .65rem;border-radius:var(--r-pill);
  background:var(--accent-mist);color:var(--ink)}

/* --------------------------------------------------- 16. Services */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
@media (max-width:820px){.svc{grid-template-columns:minmax(0,1fr)}}
.svc-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;
  padding:clamp(1.25rem,2.6vw,2rem) var(--s3);border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  text-decoration:none;color:inherit;position:relative;transition:background var(--f2) linear}
.svc-item:nth-child(2n){border-right:0}
@media (max-width:820px){.svc-item{border-right:0}}
.svc-item:hover{background:var(--linen)}
.svc-thumb{width:74px;height:74px;border-radius:50%;overflow:hidden;flex:none;background:var(--accent-mist)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--f3) var(--ease)}
.svc-item:hover .svc-thumb img{transform:scale(1.08)}
.svc-item h3{font-size:var(--t-1);margin-bottom:.2rem}
.svc-item p{font-size:var(--t--1);color:var(--ink-soft);max-width:34ch}
.svc-item .go{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule-2);display:grid;
  place-items:center;flex:none;transition:background var(--f2),color var(--f2),border-color var(--f2),transform var(--f2)}
.svc-item .go svg{width:15px;height:15px}
.svc-item:hover .go{background:var(--action);border-color:var(--action);color:var(--on-action);transform:translateX(3px)}

/* ----------------------------------------------------- 17. Trust */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media (max-width:900px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.trust{grid-template-columns:minmax(0,1fr)}}
.trust-item{padding:var(--s4) var(--s3);border-top:1px solid var(--rule-dark);border-right:1px solid var(--rule-dark);
  display:grid;gap:.5rem;align-content:start}
.trust-item:nth-child(3n){border-right:0}
@media (max-width:900px){.trust-item:nth-child(3n){border-right:1px solid var(--rule-dark)}
  .trust-item:nth-child(2n){border-right:0}}
@media (max-width:560px){.trust-item{border-right:0}}
.trust-item .ring{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--accent);display:grid;
  place-items:center;color:var(--accent);margin-bottom:.35rem}
.trust-item .ring svg{width:19px;height:19px}
.trust-item h3{font-size:var(--t-1);color:var(--on-dark)}
.trust-item p{font-size:var(--t--1);color:var(--on-dark-soft);line-height:1.55}

/* ------------------------------------------------- 18. Testimonials */
.quotes{position:relative}
.quote-panel{display:none}
.quote-panel[data-on="true"]{display:block;animation:fade-up 560ms var(--ease) both}
.quote-panel blockquote{font-family:var(--serif);font-size:var(--t-3);line-height:1.12;letter-spacing:-.015em;max-width:20ch}
.quote-cite{margin-top:var(--s4);font-size:var(--t--1);color:var(--ink-soft);font-style:normal;
  display:flex;align-items:center;gap:.85rem}
.quote-cite .av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--accent-mist)}
.quote-cite .av img{width:100%;height:100%;object-fit:cover}
.quote-cite strong{display:block;font-family:var(--sans);color:var(--ink);margin-bottom:.1rem}
.dark .quote-cite{color:var(--on-dark-soft)}.dark .quote-cite strong{color:var(--on-dark)}
.quote-nav{display:flex;align-items:center;gap:.5rem;margin-top:var(--s5)}
.qbtn{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--rule-2);display:grid;place-items:center;
  color:var(--ink);transition:background var(--f1),color var(--f1),border-color var(--f1),transform var(--f2) var(--ease)}
.qbtn:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink);transform:scale(1.05)}
.dark .qbtn{border-color:var(--rule-dark);color:var(--on-dark)}
.dark .qbtn:hover{background:var(--on-dark);color:var(--teal)}
.qbtn svg{width:17px;height:17px}
.quote-count{margin-left:.5rem;font-size:var(--t--1);color:var(--ink-soft)}
.dark .quote-count{color:var(--on-dark-soft)}

/* ------------------------------------------------------ 19. Pricing */
.price-lead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);
  border-radius:var(--r-md);overflow:hidden;background:var(--paper)}
.price-lead>div{padding:var(--s4);border-right:1px solid var(--rule)}
.price-lead>div:last-child{border-right:0}
.price-lead .big{font-family:var(--serif);font-size:var(--t-3);line-height:1;color:var(--accent-ink);margin-bottom:.4rem}
.price-lead p{font-size:var(--t--1);color:var(--ink-soft)}
@media (max-width:780px){.price-lead{grid-template-columns:minmax(0,1fr)}
  .price-lead>div{border-right:0;border-bottom:1px solid var(--rule)}.price-lead>div:last-child{border-bottom:0}}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:960px){.plans{grid-template-columns:minmax(0,1fr);max-width:34rem;margin-inline:auto}}
.plan{position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);
  transition:transform var(--f2) var(--ease),box-shadow var(--f2) var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
.plan.featured{background:var(--teal);color:var(--on-dark);border-color:var(--teal)}
.plan.featured h3{color:var(--on-dark)}
.plan.featured .plan-price,.plan.featured .plan-freq{color:var(--accent)}
.plan.featured .plan-desc,.plan.featured .feat li{color:var(--on-dark-soft)}
.plan.featured .feat svg{color:var(--accent)}
.plan-flag{position:absolute;top:0;left:0;right:0;background:var(--action);color:var(--on-action);font-size:.6875rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.45rem;text-align:center}
.plan.featured{padding-top:calc(var(--s4) + 1.5rem)}
.plan-freq{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink)}
.plan h3{font-size:var(--t-2)}
.plan-price{font-family:var(--serif);font-size:var(--t-3);line-height:1}
.plan-price small{display:block;margin-top:.4rem;font-family:var(--sans);font-size:.875rem;font-weight:400;color:var(--ink-soft)}
.plan.featured .plan-price small{color:var(--on-dark-soft)}
.plan-desc{font-size:var(--t--1);color:var(--ink-soft)}
.plan .feat{display:grid;gap:.6rem;padding-top:var(--s2);border-top:1px solid var(--rule)}
.plan.featured .feat{border-top-color:var(--rule-dark)}
.plan .feat li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.6rem;align-items:start;
  font-size:.9375rem;line-height:1.5;color:var(--ink-soft)}
.plan .feat svg{width:16px;height:16px;margin-top:.2rem;color:var(--action)}
.plan .btn{margin-top:auto}
.rate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,6vw,5rem)}
@media (max-width:900px){.rate{grid-template-columns:minmax(0,1fr)}}
.rate .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);padding:1.05rem 0;
  border-bottom:1px solid var(--rule);align-items:baseline}
.rate dt{font-weight:600}
.rate dt small{display:block;font-weight:400;color:var(--ink-soft);font-size:.875rem;margin-top:.15rem}
.rate dd{font-family:var(--serif);font-size:var(--t-1);color:var(--accent-ink);white-space:nowrap}

/* -------------------------------------------------- 20. My Circle UI */
.appui{background:var(--teal-2);border:1px solid var(--rule-dark);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--lift-3)}
.appui-bar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--rule-dark);
  background:rgba(9,26,30,.20)}
.appui-bar i{width:9px;height:9px;border-radius:50%;background:rgba(243,240,233,.25)}
.appui-bar .t{margin-left:.6rem;font-size:.75rem;font-weight:650;color:var(--on-dark-soft);letter-spacing:.04em}
.appui-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1px;background:var(--rule-dark)}
@media (max-width:760px){.appui-body{grid-template-columns:minmax(0,1fr)}}
.appui-col{background:var(--teal-2);padding:var(--s3);display:grid;gap:var(--s2);align-content:start}
.appui-h{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-light)}
.appui-card{background:rgba(9,26,30,.24);border:1px solid var(--rule-dark);border-radius:var(--r-sm);padding:.85rem 1rem}
.appui-card .when{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-light);margin-bottom:.25rem}
.appui-card .what{font-family:var(--serif);font-size:1.1875rem;line-height:1.1;color:var(--on-dark)}
.appui-card .who{font-size:.8125rem;color:var(--on-dark-soft);margin-top:.2rem}
.appui-people{display:flex;gap:-.5rem;align-items:center}
.appui-people .av{width:38px;height:38px;border-radius:50%;overflow:hidden;border:2px solid var(--teal-2);
  margin-right:-10px;background:var(--accent)}
.appui-people .av img{width:100%;height:100%;object-fit:cover}
.appui-people .more{width:38px;height:38px;border-radius:50%;border:2px solid var(--teal-2);
  background:var(--accent);color:var(--teal);display:grid;place-items:center;font-size:.75rem;font-weight:700}
.appui-note{font-size:.875rem;line-height:1.55;color:var(--on-dark)}
.concept-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--rule-dark);border-radius:var(--r-pill);padding:.4rem .85rem}

/* ------------------------------------------------------ 21. Journal */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.posts{grid-template-columns:minmax(0,1fr)}}
.post{display:grid;gap:var(--s2);text-decoration:none;color:inherit}
.post figure{margin:0;aspect-ratio:3/2;border-radius:var(--r-md);overflow:hidden;background:var(--linen)}
.post figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post:hover figure img{transform:scale(1.05)}
.post-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.6875rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--action)}
.post h3{font-size:var(--t-1);transition:color var(--f1)}
.post:hover h3{color:var(--accent-ink)}
.article{max-width:var(--measure);margin-inline:auto}
.article h2{font-size:var(--t-2);margin:var(--s5) 0 var(--s2)}
.article h3{font-size:var(--t-1);margin:var(--s4) 0 var(--s2)}
.article p{color:var(--ink-soft);margin-bottom:1.05em}
.article ul{list-style:disc;padding-left:1.2rem;display:grid;gap:.6rem;margin:0 0 1.4em;color:var(--ink-soft)}
.article blockquote{margin:var(--s4) 0;padding:var(--s3) var(--s4);background:var(--linen);
  border-left:2px solid var(--action);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--serif);font-size:var(--t-1);line-height:1.35;color:var(--ink)}
.article a{color:var(--accent-ink)}

/* ------------------------------------------------------- 22. Forms */
.form{display:grid;gap:var(--s3)}
.field{display:grid;gap:.45rem}
.field label{font-size:.9375rem;font-weight:650}
.field .hint{font-size:.875rem;color:var(--ink-soft)}
.field .req{color:var(--accent-ink)}
.field input,.field select,.field textarea{width:100%;min-height:58px;padding:1rem 1.1rem;background:var(--paper);
  border:1.5px solid var(--rule-2);border-radius:var(--r-sm);font-size:1.0625rem;
  transition:border-color var(--f1),box-shadow var(--f1)}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--action);
  box-shadow:0 0 0 4px rgba(180,84,47,.18)}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{
  border-color:#A32B20;box-shadow:0 0 0 4px rgba(163,43,32,.14)}
.err{display:none;align-items:center;gap:.45rem;font-size:.9375rem;font-weight:650;color:#8A2018}
.field[data-invalid="true"] .err{display:flex}
.err svg{width:16px;height:16px;flex:none}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (max-width:640px){.field-row{grid-template-columns:minmax(0,1fr)}}
.form-summary{display:none;border:1.5px solid #A32B20;border-left-width:5px;background:#FCF2F1;
  padding:var(--s3);border-radius:var(--r-sm)}
.form-summary[data-show="true"]{display:block}
.form-summary h2{font-family:var(--sans);font-size:1.0625rem;font-weight:700;color:#8A2018;margin-bottom:.5rem}
.form-summary ul{list-style:disc;padding-left:1.2rem;display:grid;gap:.3rem}
.form-summary a{color:#8A2018}
.form-ok{display:none;border:1.5px solid var(--accent-ink);border-left-width:5px;background:var(--accent-mist);
  padding:var(--s3);border-radius:var(--r-sm);color:var(--accent-ink)}
.form-ok[data-show="true"]{display:block}
fieldset{border:0}
.checkline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;
  font-size:.9375rem;color:var(--ink-soft)}
.checkline input{min-height:auto;width:26px;height:26px;accent-color:var(--action);cursor:pointer}
.checkline label{cursor:pointer;font-weight:400}

/* ----------------------------------------------------- 23. Footer */
.cta-photo{position:relative;isolation:isolate;color:var(--on-dark);overflow:hidden}
.cta-photo .hero-media{z-index:-2}
.cta-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,50,56,.72),rgba(20,50,56,.90))}
.cta-inner{position:relative;text-align:center;max-width:48rem;margin-inline:auto;padding-block:clamp(5rem,11vw,var(--s8))}
.cta-photo .cta-inner h2{color:#fff}
.cta-photo .cta-inner .lede{color:var(--on-dark);margin-inline:auto}
.site-footer{background:var(--teal);color:var(--on-dark-soft);padding-block:var(--s6) var(--s4);
  border-top:1px solid var(--rule-dark)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:980px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.footer-top{grid-template-columns:minmax(0,1fr)}}
.footer-col h2{font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s3)}
.footer-col ul{display:grid;gap:.2rem}
.footer-col a{display:inline-block;padding-block:.35rem;text-decoration:none;font-size:var(--t--1);
  transition:color var(--f1),transform var(--f1)}
.footer-col a:hover{color:var(--on-dark);transform:translateX(3px)}
.footer-brand img{width:150px;height:auto;margin-bottom:var(--s3)}
.footer-brand p{font-size:var(--t--1);max-width:30ch}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;align-items:center;
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule-dark);font-size:.875rem;color:var(--on-dark-soft)}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--s3)}
.footer-bottom a{text-decoration:none}.footer-bottom a:hover{color:var(--on-dark)}
.socials{display:flex;gap:.5rem;margin-top:var(--s3)}
.socials a{width:46px;height:46px;border:1px solid var(--rule-dark);border-radius:50%;display:grid;place-items:center;
  transition:background var(--f1),color var(--f1),border-color var(--f1),transform var(--f2) var(--ease)}
.socials a:hover{background:var(--accent);color:var(--teal);border-color:var(--accent);transform:translateY(-2px)}
.socials svg{width:18px;height:18px}

/* --------------------------------------------------- 24. Page chrome */
.page-hero{position:relative;padding-top:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem));
  padding-bottom:clamp(2.5rem,6vw,4rem);overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-45%;right:-12%;width:56vw;height:56vw;max-width:680px;max-height:680px;
  border-radius:50%;background:radial-gradient(circle,rgba(124,139,122,.20),transparent 68%);pointer-events:none}
.page-hero>*{position:relative}
.page-hero h1{max-width:17ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.875rem;color:var(--ink-soft);margin-bottom:var(--s3)}
.crumbs a{text-decoration:none;padding-block:.3rem}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs li{display:flex;gap:.5rem;align-items:center}
.crumbs li+li::before{content:"·";color:var(--ink-soft)}
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--linen)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.media-zoom:hover img{transform:scale(1.05)}
.bleed-full{border-radius:0;aspect-ratio:21/9;max-height:74vh;min-height:320px;overflow:hidden;position:relative}
.bleed-full img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.bleed-full{aspect-ratio:4/3}}
.ar-1{aspect-ratio:1}.ar-43{aspect-ratio:4/3}.ar-34{aspect-ratio:3/4}
.ar-169{aspect-ratio:16/9}.ar-45{aspect-ratio:4/5}.ar-32{aspect-ratio:3/2}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);transition:transform var(--f2) var(--ease),box-shadow var(--f2) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
.card h3{font-size:var(--t-1)}
.card p{color:var(--ink-soft);font-size:var(--t--1);line-height:1.55}
.dark .card{background:var(--teal-2);border-color:var(--rule-dark)}
.dark .card p{color:var(--on-dark-soft)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{border-top:1px solid var(--rule);padding-top:var(--s3)}
.dark .stat{border-top-color:var(--rule-dark)}
.stat-n{display:block;font-family:var(--serif);font-size:var(--t-3);line-height:1;margin-bottom:.4rem;color:var(--accent-ink)}
.dark .stat-n{color:var(--accent)}
.stat p{font-size:var(--t--1);color:var(--ink-soft);line-height:1.5}
.dark .stat p{color:var(--on-dark-soft)}
.ticks{display:grid;gap:.85rem}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.8rem;align-items:start;
  font-size:var(--t--1);color:var(--ink-soft);line-height:1.55}
.ticks svg{width:20px;height:20px;flex:none;margin-top:.15em;color:var(--action)}
.dark .ticks li{color:var(--on-dark-soft)}.dark .ticks svg{color:var(--accent)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{list-style:none;cursor:pointer;position:relative;padding:1.5rem 3.2rem 1.5rem 0;
  font-family:var(--serif);font-size:var(--t-1);line-height:1.3;transition:color var(--f1)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-ink)}
.faq-item summary::after{content:"";position:absolute;right:.3rem;top:50%;width:30px;height:30px;margin-top:-15px;
  border-radius:50%;border:1px solid var(--rule-2);transition:background var(--f2),border-color var(--f2)}
.faq-item summary::before{content:"";position:absolute;right:1.15rem;top:50%;width:11px;height:11px;margin-top:-5.5px;z-index:1;
  background:linear-gradient(var(--accent-ink),var(--accent-ink)) center/11px 1.5px no-repeat,
             linear-gradient(var(--accent-ink),var(--accent-ink)) center/1.5px 11px no-repeat;
  transition:transform var(--f2) var(--ease)}
.faq-item[open] summary::before{transform:rotate(135deg)}
.faq-item[open] summary::after{background:var(--action-glow);border-color:var(--action-glow)}
.faq-body{padding:0 3.2rem 1.6rem 0;color:var(--ink-soft);max-width:62ch;animation:fade-up 380ms var(--ease) both}
.faq-body p+p{margin-top:.9em}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--rule-2);background:var(--paper);font-size:.875rem;font-weight:600;color:var(--ink)}
.pill svg{width:16px;height:16px;color:var(--action)}
.dark .pill{background:rgba(243,240,233,.06);border-color:var(--rule-dark);color:var(--on-dark)}
.dark .pill svg{color:var(--accent)}
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem}
.totop{position:fixed;right:1.1rem;bottom:1.1rem;z-index:95;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal);color:var(--on-dark);box-shadow:var(--lift-2);
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.9);
  transition:opacity var(--f2),transform var(--f2) var(--ease)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--action)}
.totop svg{width:19px;height:19px}
@media (max-width:820px){.totop{bottom:92px}}
.center{text-align:center}
.mt-1{margin-top:var(--s1)}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}
.mb-3{margin-bottom:var(--s3)}.mb-4{margin-bottom:var(--s4)}
.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}

/* ------------------------------------------------------ 25. Motion */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
[data-rv="left"]{transform:translateX(-30px)}
[data-rv="right"]{transform:translateX(30px)}
[data-rv="scale"]{transform:scale(.96)}
[data-rv="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv="mask"].in{clip-path:inset(0 0 0 0)}
[data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity 760ms var(--ease),transform 760ms var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.word i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform 1s var(--ease)}
.in .word i{transform:none}
[data-parallax]{will-change:transform}

@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-rv],[data-stagger]>*{opacity:1!important;transform:none!important;clip-path:none!important}
  .word i{transform:none!important}
  .circle-ring.r2,.scroll-cue i{animation:none!important}
  [data-parallax]{transform:none!important}
  .drawer{transition:none}
}

/* The hidden attribute must beat a component's own display value */
[hidden]{display:none!important}
/* A disabled control has to look disabled, not merely refuse to work */
.btn:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover,.btn[disabled]:hover{transform:none;box-shadow:none}
/* ---- Ad landing page (/visit/): no navigation, one button ---- */
.landing .brand-mark-col{position:static;transform:none;opacity:1}
.landing .brand:hover .brand-mark-col{transform:scale(1.05)}
.landing .header-tools>.btn{display:inline-flex}
.landing-hero{padding-top:calc(var(--nav-h) + clamp(1.5rem,4vw,3rem))}
.landing-hero h1{max-width:13ch}
.landing-hero .ticks li{font-size:var(--t-0);color:var(--ink)}
.landing #enquire{scroll-margin-top:var(--nav-h)}
.landing .site-footer{padding-top:var(--s4)}
@media (max-width:560px){.landing .brand-name{display:none}
  .landing .header-tools>.btn{min-height:44px;padding:.6rem 1rem;font-size:.875rem}}
.footer-legal-line{margin-top:var(--s3);font-size:var(--t--1);line-height:1.6;color:var(--on-dark-soft);max-width:78ch}