/* =====================================================================
   Find Your Swan: the shared house style for every page (menu, footer, chat, the Calendly room,
   circles, carousels, questions, the newsletter, figures, tiles, reviews) plus the inner-page
   components further down. Values come from tokens.css; nothing here is page-specific.
   The homepage keeps only its own sections inline (intro, hero, founder, stack, closing band).
   ===================================================================== */
button,input[type="submit"],input[type="button"],input[type="reset"]{-webkit-appearance:none;appearance:none}   /* buttons wear only the site's styles; iPhone Safari would add its own */
html{scroll-padding-top:1.5rem;--logo-h:clamp(2.5rem,2rem + 1.8vw,3.4rem);--logo-top:clamp(1.25rem,2.4vw,1.75rem)} /* the header logo: hero and menu share it, so opening the menu never resizes or moves it */
body{overflow-x:clip}
html.menu-open{overflow:hidden}
.skip{position:fixed;left:1rem;top:-6rem;z-index:100;padding:.9rem 1.25rem;background:var(--plum-900);color:var(--white)}
.skip:focus{top:1rem}

/* arrival: the page fades up once, hero lines rise one after another */
main,.foot{animation:fys-enter var(--dur-slow) var(--ease-silk) both}
@keyframes fys-enter{from{opacity:0}to{opacity:1}}
.rise{animation:fys-rise var(--dur-slow) var(--ease-silk) both;animation-delay:var(--d,0ms)}
@keyframes fys-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}

/* ---------- the circle and its label (the inspiration's signature move) ---------- */
.ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .ico{width:16px;height:16px;fill:none}
.ring{position:relative}
.ring::after{content:"";position:absolute;inset:-1px;border-radius:var(--radius-round);border:var(--hairline) solid var(--plum-700);opacity:0;pointer-events:none;transition:inset var(--dur-calm) var(--ease-silk),opacity var(--dur-calm) var(--ease-silk)}
.on-dark .ring::after{border-color:var(--white)}
.cta-circle{display:inline-grid;justify-items:center;gap:var(--space-xs);color:var(--plum-700)}
.cta-circle .label{color:inherit}
.on-dark .cta-circle{color:var(--white)}
.cta-circle .icon-btn{width:3rem;height:3rem;border-color:rgba(66,51,88,.3)}
.on-dark .cta-circle .icon-btn{border-color:rgba(255,255,255,.3)}
.cta-circle:hover .icon-btn,.cta-circle:focus-visible .icon-btn{background:var(--plum-700);border-color:var(--plum-700);color:var(--white)}
.on-dark .cta-circle:hover .icon-btn,.on-dark .cta-circle:focus-visible .icon-btn{background:var(--white);border-color:var(--white);color:var(--plum-800)}
.cta-circle:hover .ring::after,.cta-circle:focus-visible .ring::after,.ring:hover::after{inset:-7px;opacity:.22}
.cta-circle:focus-visible{outline:none}
.cta-inline{grid-auto-flow:column;align-items:center;justify-items:start;gap:var(--space-s)}
.cta-inline .icon-btn{width:2.75rem;height:2.75rem}
.cta-circle:focus-visible .icon-btn{outline:2px solid var(--focus);outline-offset:4px}

/* ---------- menu button: one circle, plum on paper, white wherever a dark band passes beneath ----------
   Each face carries its own frosted fill, so text and photos scrolling beneath never show through the
   circle. The paper face is clipped to exactly what the white face leaves uncovered (see tone()). */
.menu-btn{position:fixed;top:clamp(1rem,2.4vw,1.75rem);right:clamp(1rem,3vw,2.25rem);z-index:60;width:3rem;height:3rem;border-radius:var(--radius-round)}
.mb-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--radius-round);border:var(--hairline) solid rgba(66,51,88,.3);background:rgba(251,251,251,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--plum-700);transition:background-color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}
.mb-light{border-color:rgba(255,255,255,.5);background:rgba(27,25,39,.34);color:var(--white);clip-path:inset(100% 0 0 0)}
html.menu-open .mb-face:not(.mb-light){clip-path:inset(100% 0 0 0)!important}
.mb-lines{position:relative;width:18px;height:7px}
.mb-lines i{position:absolute;left:0;right:0;height:var(--hairline);background:currentColor;transition:transform var(--dur-calm) var(--ease-silk),top var(--dur-calm) var(--ease-silk)}
.mb-lines i:first-child{top:0}
.mb-lines i:last-child{top:6px}
html.menu-open .mb-lines i:first-child{top:3px;transform:rotate(45deg)}
html.menu-open .mb-lines i:last-child{top:3px;transform:rotate(-45deg)}
html.menu-open .mb-light{clip-path:inset(0 0 0 0)!important}
.menu-btn:hover .mb-face{background:var(--plum-700);border-color:var(--plum-700);color:var(--white)}
.menu-btn:hover .mb-light{background:var(--white);border-color:var(--white);color:var(--plum-800)}

/* ---------- the menu: a plum-900 room that wipes down from the top ---------- */
.menu{position:fixed;inset:0;z-index:50;pointer-events:none}
.menu[data-menu=active]{pointer-events:auto}
.menu-room{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding-block:0 clamp(1.25rem,3.5svh,2.25rem);background:var(--plum-900);color:var(--white);overflow:hidden;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path var(--dur-slow) var(--ease-in-out)}
.menu[data-menu=active] .menu-room{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.menu-top{display:flex;justify-content:center;padding-top:var(--logo-top)}   /* same place and size as the hero logo beneath */
.menu-top img{height:var(--logo-h);width:auto}
/* one clean left edge for the words, each led by a small bullet. vertical-align:middle sets the
   bullet on the middle of the words' x-height, whatever the size of the type. */
.menu-links{position:relative;z-index:1;align-self:center;justify-self:center;display:grid;justify-items:start;gap:clamp(0rem,.6svh,.4rem);padding-block:clamp(1rem,4svh,2.5rem)}
.menu-links a{display:block;font-family:var(--font-serif);font-weight:var(--w-light);font-size:min(clamp(2.4rem,1.6rem + 3.2vw,4.25rem),7.2svh);line-height:1.08;letter-spacing:-.015em;color:var(--white);transition:opacity var(--dur-quick) var(--ease-out)}
.menu-links .mask{display:block;overflow:hidden;padding:.06em .12em .1em}
.menu-links .inner{display:inline-block;transform:translateY(115%) rotate(5deg);transform-origin:left bottom;transition:transform var(--dur-calm) var(--ease-in-out);transition-delay:var(--c,0s)}
.menu[data-menu=active] .menu-links .inner{transform:none;transition-delay:var(--o,0s)}
.menu-links .inner i{display:inline-block;width:.375rem;height:.375rem;margin-right:clamp(1.1rem,.8rem + 1vw,1.75rem);border-radius:var(--radius-round);background:var(--plum-400);vertical-align:middle;transition:background-color var(--dur-quick) var(--ease-out)}
.menu-links a:hover .inner i,.menu-links a:focus-visible .inner i{background:var(--white)}
.menu-links:has(>a:hover)>a:not(:hover){opacity:.3}
.menu-links a:hover .inner span,.menu-links a:focus-visible .inner span{font-style:italic}
.menu-foot{position:relative;z-index:1;display:grid;justify-items:center}
.menu-small{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-s) var(--space-xl)}
.menu-small a{font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-on-dark-muted);transition:color var(--dur-quick) var(--ease-out)}
.menu-small a:hover{color:var(--white)}
/* phones: the logo leaves the header line, grows to about twice its size and sits centred above the
   words, the two held as one group in the middle of the room; it rises in just before the words */
@media (max-width:599px){
  .menu-room{grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr) auto}
  .menu-top{grid-row:2;padding-top:0}
  .menu-top img{width:min(62vw,15.5rem);height:auto;opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-calm) var(--ease-silk),transform var(--dur-calm) var(--ease-silk)}
  .menu[data-menu=active] .menu-top img{opacity:1;transform:none;transition-delay:.3s}
  .menu-links{grid-row:3;padding-block:clamp(1.75rem,5svh,2.75rem) 0}
  .menu-foot{grid-row:5}
}

/* ---------- strips: featured (top) and affiliations (bottom), each a slow carousel ---------- */
.strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);padding:clamp(1.75rem,3vw,2.5rem) 0;border-top:var(--hairline) solid var(--rule);border-bottom:var(--hairline) solid var(--rule)}
.strip>.label{white-space:nowrap}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.marquee-track{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;row-gap:var(--space-l)}
.marquee-track li{flex:none;display:flex;align-items:center;padding:0 clamp(1.5rem,3.2vw,3.25rem)}
.marquee-track img{height:var(--h);width:auto;max-width:none}
.marquee.is-running .marquee-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:fys-marquee var(--marquee-dur,40s) linear infinite}
.marquee.is-running[data-dir=reverse] .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes fys-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:699px){.strip{grid-template-columns:1fr;justify-items:center;gap:var(--space-m)}.marquee{width:100%}.marquee-track img{height:calc(var(--h) * .86)}}
.affiliations .strip{padding-block:clamp(2.25rem,4vw,3.25rem)}

/* ---------- section heads, centred like the inspiration ---------- */
.sec-head{display:grid;justify-items:center;text-align:center;gap:var(--space-m);margin-bottom:clamp(3rem,6vw,5.5rem)}
.sec-head h2{max-width:18ch}
.sec-head .standfirst{max-width:34ch}
.sec-cta{display:flex;justify-content:center;margin-top:clamp(3.5rem,6vw,5.5rem)}

/* ---------- figures: each counts up to its number once it is on screen ----------
   A hidden copy of the final figure holds the width; the live count is right-aligned over it,
   so the "+" stays put and the digits grow leftward, never shifting the cell. */
.numeral .count{display:inline-grid}
.numeral .count>span{grid-area:1/1}
.numeral .count .ghost{visibility:hidden}
.numeral .count .live{justify-self:end}
/* the join call to action, raised: a filled circle with a soft halo, 1.1 times the usual size */
.cta-pop{gap:calc(var(--space-xs) * 1.1)}
.cta-pop .icon-btn{width:3.3rem;height:3.3rem;background:var(--plum-700);border-color:var(--plum-700);color:var(--white)}
.cta-pop .ico{width:17.6px;height:17.6px}
.cta-pop .ring::after{inset:-7px;opacity:.16}
.cta-pop:hover .icon-btn,.cta-pop:focus-visible .icon-btn{background:var(--plum-800);border-color:var(--plum-800)}
.cta-pop:hover .ring::after,.cta-pop:focus-visible .ring::after{inset:-11px;opacity:.26}
.cta-pop .label{max-width:min(100%,46em);font-size:calc(var(--fs-label) * 1.1);text-align:center;text-wrap:balance}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--hairline) solid var(--rule);border-bottom:var(--hairline) solid var(--rule)}
.figs>div{display:grid;justify-items:center;text-align:center;gap:var(--space-s);padding:clamp(2.25rem,4vw,3.5rem) var(--space-m)}
.figs>div+div{border-left:var(--hairline) solid var(--rule)}
.figs .fl{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted);max-width:20ch}
@media (max-width:699px){.figs{grid-template-columns:1fr}.figs>div+div{border-left:0;border-top:var(--hairline) solid var(--rule)}}

/* ---------- IV. services: editorial tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.5rem,4vw,4rem) var(--gutter)}
.tile{display:grid;gap:1.6rem;align-content:start}
.tile .frame img{object-position:var(--pos,50% 50%)}
.tile-body{display:grid;gap:.85rem;justify-items:start}
.tile h3{font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem)}
.tile h3 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-calm) var(--ease-silk)}
.tile:hover h3 span,.tile:focus-visible h3 span{background-size:100% 1px}
.tile:hover .link-arrow .arrow,.tile:focus-visible .link-arrow .arrow{width:3.25rem}
.tile p{font-size:var(--fs-small);line-height:var(--lh-small);max-width:36ch}
.tile .link-arrow{margin-top:.6rem}
/* arrival: each tile flies up in turn, photograph first, words a beat behind, then stays still */
html.js .tile .frame,html.js .tile .tile-body{opacity:0;transition:opacity var(--dur-slow) var(--ease-silk),transform var(--dur-slow) var(--ease-silk)}
html.js .tile .frame{transform:translateY(calc(var(--rise) * 5));transition-delay:calc(var(--i,0) * 200ms)}
html.js .tile .tile-body{transform:translateY(calc(var(--rise) * 3));transition-delay:calc(var(--i,0) * 200ms + 160ms)}
html.js .tile.in .frame,html.js .tile.in .tile-body{opacity:1;transform:none}
@media (max-width:899px){.tiles{grid-template-columns:1fr}html.js .tile{--i:0!important}}
@media (min-width:600px) and (max-width:899px){.tile{grid-template-columns:2fr 3fr;align-items:center;gap:var(--gutter)}}

/* ---------- VI. kind words: an endless, slow carousel of reviews ---------- */
.reviews{padding-block:var(--section);background:var(--plum-800);overflow:hidden}
.reviews .sec-head .label{color:var(--text-on-dark-muted)}
.reviews .marquee-track{align-items:stretch}
.marquee-track li.review{display:grid;grid-template-rows:auto 1fr auto;align-items:start;gap:var(--space-l);width:min(36rem,84vw);padding:0 clamp(2rem,4vw,3.5rem);border-left:var(--hairline) solid var(--rule-on-dark)}
.review .mk{display:block;height:2.25rem;font-family:var(--font-serif);font-weight:var(--w-light);font-size:4.5rem;line-height:1;color:var(--plum-400)}
.review blockquote{margin:0;font-family:var(--font-serif);font-style:italic;font-weight:var(--w-light);font-size:clamp(1.3rem,1.15rem + .6vw,1.7rem);line-height:1.34;color:var(--white);text-wrap:pretty}
.review .by{display:grid;gap:.45rem}
.review .by .label{color:var(--white)}
.review .by .caption{color:var(--text-on-dark-muted)}
/* her clients' reviews run to sixty words: a finger on the carousel holds it still for reading (site.js) */
.marquee.is-held .marquee-track{animation-play-state:paused}

/* ---------- VII. questions ---------- */
.faq-wrap{width:min(100% - 2*var(--margin),58rem);margin-inline:auto}
.qa{border-top:var(--hairline) solid var(--rule)}
.qa-item{border-bottom:var(--hairline) solid var(--rule)}
.qa-q{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;width:100%;padding:1.4rem 0;text-align:left;font-family:var(--font-serif);font-weight:var(--w-regular);font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);line-height:1.25;color:var(--plum-700)}
.qa-q .icon-btn{flex:none}
.pm{position:relative;width:1rem;height:1rem}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--hairline);background:currentColor;transition:transform var(--dur-calm) var(--ease-silk)}
.pm::after{transform:rotate(90deg)}
.qa-q[aria-expanded=true] .pm::after{transform:rotate(0deg)}
.qa-q:hover .icon-btn{background:var(--plum-700);border-color:var(--plum-700);color:var(--white)}
.qa-a{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows var(--dur-calm) var(--ease-silk),opacity var(--dur-calm) var(--ease-silk),visibility 0s linear var(--dur-calm)}
.qa-q[aria-expanded=true]+.qa-a{grid-template-rows:1fr;opacity:1;visibility:visible;transition-delay:0s}
.qa-a>div{overflow:hidden}
.qa-a p{padding:0 0 1.75rem}   /* answers run the full line, to the right edge of the rule */

/* ---------- IX. the newsletter ---------- */
.letter{padding-bottom:clamp(4rem,7vw,6rem)}
.letter-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-l);align-items:end;padding-top:clamp(3rem,5vw,4.5rem);border-top:var(--hairline) solid var(--rule)}
.letter-copy{grid-column:1 / span 5;display:grid;gap:var(--space-s)}
.letter-copy p:last-child{font-size:var(--fs-small);line-height:var(--lh-small);max-width:34ch}
.letter-form{grid-column:7 / -1;display:grid;grid-template-columns:1fr auto;gap:var(--space-m);align-items:end}
@media (max-width:899px){.letter-copy,.letter-form{grid-column:1 / -1}}
@media (max-width:499px){.letter-form{grid-template-columns:1fr}.letter-form .btn{justify-self:start}}


/* ---------- chat: the concierge ----------
   Built from the house language, not a widget kit: a square night-plum tab with hairline edge and
   tracked capitals (the system's button voice); the panel is one plum-900 room like the menu.
   The house answers in Cormorant (feeling), the visitor's words sit in Jost (fact). Suggestions are
   hairline rows with the lengthening arrow. Anything the page cannot answer goes to Mia on WhatsApp
   with the visitor's words already written; the panel says so. */
.chat{position:fixed;right:clamp(1rem,2vw,1.5rem);bottom:clamp(1rem,2vw,1.5rem);z-index:55;display:grid;justify-items:end;gap:.75rem}
html.intro-playing .chat,html.menu-open .chat{display:none}
.chat-launch{display:inline-flex;align-items:center;gap:.85rem;height:3.25rem;padding:0 calc(1.4rem - var(--track-button)) 0 1.1rem;background:var(--plum-900);border:var(--hairline) solid rgba(255,255,255,.18);color:var(--white);font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-button);text-transform:uppercase;white-space:nowrap;animation:fys-rise var(--dur-slow) var(--ease-silk) .9s both;transition:background-color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}
.chat-launch img{width:1.45rem;height:auto}
.chat-launch:hover,.chat-launch:focus-visible{background:var(--plum-800);border-color:rgba(255,255,255,.32)}
.chat[data-open]{z-index:70}
.chat[data-open] .chat-launch{display:none}   /* one object at a time: the open panel has its own close */
.chat-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;width:min(25rem,calc(100vw - 2rem));height:min(38rem,calc(100svh - 7.5rem));background:var(--plum-900);border:var(--hairline) solid rgba(255,255,255,.14);color:var(--white);clip-path:inset(0 0 0 0);animation:chat-open var(--dur-calm) var(--ease-in-out)}
.chat-panel[hidden]{display:none}
@keyframes chat-open{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.chat-panel>*{animation:fys-rise var(--dur-slow) var(--ease-silk) both}
.chat-panel>:nth-child(2){animation-delay:120ms}.chat-panel>:nth-child(3){animation-delay:200ms}.chat-panel>:nth-child(4){animation-delay:260ms}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1rem 1rem 1.5rem;border-bottom:var(--hairline) solid var(--rule-on-dark)}
.chat-head .label{color:var(--text-on-dark-muted)}
.chat-x{width:2.5rem;height:2.5rem}
.chat-scroll{overflow-y:auto;overscroll-behavior:contain;padding:1.75rem 1.5rem 1rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.chat-hello{font-family:var(--font-serif);font-weight:var(--w-light);font-size:2.375rem;line-height:1.05;letter-spacing:-.01em;color:var(--white)}
.chat-hello em{font-style:italic}
.chat-sub{margin-top:.5rem;font-family:var(--font-serif);font-weight:var(--w-regular);font-size:1.25rem;line-height:1.35;color:var(--text-on-dark-muted)}
.chat-log{display:grid;gap:1.15rem;margin:1.6rem 0 0}
.chat-log .say{font-family:var(--font-serif);font-weight:var(--w-regular);font-size:1.1875rem;line-height:1.45;color:var(--white);animation:fys-rise var(--dur-slow) var(--ease-silk) both}
.chat-log .ask{justify-self:end;max-width:80%;padding-right:.9rem;border-right:var(--hairline) solid rgba(255,255,255,.3);font-size:var(--fs-small);line-height:1.55;color:var(--text-on-dark-muted);text-align:right;animation:fys-rise var(--dur-slow) var(--ease-silk) both}
.chat-log .writing{font-family:var(--font-serif);font-style:italic;font-size:1.0625rem;color:var(--plum-400);animation:chat-breathe 1.4s var(--ease-in-out) infinite}
@keyframes chat-breathe{0%,100%{opacity:.35}50%{opacity:.9}}
.chat-next{display:grid;margin-top:1.4rem}
.chat-row{display:flex;align-items:center;gap:.8rem;width:100%;padding:.9rem 0;border-top:var(--hairline) solid var(--rule-on-dark);font-size:var(--fs-small);line-height:1.3;color:rgba(255,255,255,.88);text-align:left;animation:fys-rise var(--dur-slow) var(--ease-silk) both}
.chat-row:last-child{border-bottom:var(--hairline) solid var(--rule-on-dark)}
.chat-row svg{flex:none;width:16px;height:16px}
.chat-row .t{flex:1}
.chat-row .arrow,.chat-wa .arrow,.chat-send .arrow{position:relative;display:block;flex:none;width:1.5rem;height:var(--hairline);background:currentColor;transition:width var(--dur-calm) var(--ease-silk)}
.chat-row .arrow::after,.chat-wa .arrow::after,.chat-send .arrow::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-top:var(--hairline) solid currentColor;border-right:var(--hairline) solid currentColor;transform:translateY(-50%) rotate(45deg)}
.chat-row:hover,.chat-row:focus-visible{color:var(--white)}
.chat-row:hover .arrow,.chat-row:focus-visible .arrow,.chat-wa:hover .arrow,.chat-wa:focus-visible .arrow,.chat-send:hover .arrow,.chat-send:focus-visible .arrow{width:2.5rem}
.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem;margin:0 1.5rem;padding:.6rem 0 1.1rem}
.chat-input{min-width:0;height:2.75rem;padding:0;border:0;border-bottom:var(--hairline) solid rgba(255,255,255,.35);border-radius:0;background:transparent;font-family:var(--font-sans);font-weight:var(--w-light);font-size:1rem;color:var(--white);transition:border-color var(--dur-quick) var(--ease-out)}
.chat-input::placeholder{font-family:var(--font-serif);font-style:italic;font-size:1.125rem;color:rgba(255,255,255,.5);opacity:1}
.chat-input:focus{outline:none;border-bottom-color:var(--white)}
.chat-send{display:inline-flex;align-items:center;gap:.75rem;height:2.75rem;font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-button);text-transform:uppercase;color:var(--white)}
.chat-wa{display:flex;align-items:center;gap:.8rem;padding:1.05rem 1.5rem;border-top:var(--hairline) solid var(--rule-on-dark);font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-button);text-transform:uppercase;color:var(--white);transition:background-color var(--dur-quick) var(--ease-out)}
.chat-wa svg{width:17px;height:17px;flex:none}
.chat-wa .t{flex:1}
.chat-wa:hover{background:rgba(255,255,255,.04)}
@media (min-width:600px) and (max-height:700px){   /* short laptop screens: same room, a little tighter */
  .chat-scroll{padding-top:1.2rem}
  .chat-hello{font-size:1.875rem}
  .chat-sub{font-size:1.0625rem}
  .chat-next{margin-top:1rem}
  .chat-row{padding:.68rem 0}
  .chat-form{padding-bottom:.8rem}
  .chat-wa{padding-block:.85rem}
}
@media (max-width:599px){
  .chat-launch{width:3.25rem;padding:0;justify-content:center}
  .chat-launch .chat-label{display:none}
  .chat[data-open]{inset:0}
  .chat-panel{width:100%;height:100%;height:100svh;border:0}
  .chat-hello{font-size:2.125rem}
  .chat-head .hide-s{display:none}
}

/* ---------- the discovery call: Mia's Calendly, opened over the page ----------
   Every link to calendly.com/findyourswan opens here instead of a new tab (cmd/ctrl-click still
   opens a tab). The room is the house's: night veil, a plum-900 head with the label and a hairline
   close circle; Calendly's own page fills the frame. Phones get the whole screen. */
.cal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(1rem,4svh,3rem) var(--margin)}
.cal[hidden]{display:none}
html.cal-open{overflow:hidden}
.cal-veil{position:absolute;inset:0;background:rgba(27,25,39,.78);animation:fys-enter var(--dur-calm) var(--ease-out) both}
.cal-box{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);width:min(100%,66rem);height:min(100%,46rem);background:var(--white);border:var(--hairline) solid rgba(255,255,255,.14);animation:fys-rise var(--dur-slow) var(--ease-silk) both}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .75rem .75rem 1.5rem;background:var(--plum-900)}
.cal-head .label{color:var(--text-on-dark-muted)}
.cal-x{width:2.5rem;height:2.5rem}
.cal-frame{position:relative;background:var(--white)}
.cal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity var(--dur-calm) var(--ease-out)}
.cal-frame.is-ready iframe{opacity:1}
.cal-wait{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-serif);font-style:italic;font-size:1.375rem;color:var(--plum-600);animation:chat-breathe 1.4s var(--ease-in-out) infinite}
.cal-frame.is-ready .cal-wait{display:none}
@media (max-width:599px){
  .cal{padding:0}
  .cal-box{width:100%;height:100%;border:0}
}

/* ---------- footer ---------- */
.foot{padding:clamp(3rem,6vw,5rem) var(--margin) 2rem;background:var(--plum-900);color:var(--white)}
.foot-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:2.75rem;padding-bottom:clamp(2.5rem,4vw,3.5rem);border-bottom:var(--hairline) solid var(--rule-on-dark)}
.foot-brand{grid-column:1 / span 5;display:grid;gap:1.75rem;align-content:start;justify-items:start}
.foot-brand img{width:12.5rem}
.icons{display:flex;gap:.5rem}
.foot-col{grid-column:span 2;display:grid;gap:.8rem;align-content:start}
.foot-col .label{margin-bottom:.4rem}
.foot-col a{font-size:var(--fs-small);color:var(--text-on-dark-muted);transition:color var(--dur-quick) var(--ease-out)}
.foot-col a:hover{color:var(--white)}
.foot-col:nth-of-type(2){grid-column:7 / span 2}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.5rem}
.foot-bottom .caption{color:var(--text-on-dark-muted)}
.foot-credit{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--rule-on-dark);transition:text-decoration-color var(--dur-quick) var(--ease-out)}   /* the studio that made the site: on every page */
.foot-credit:hover,.foot-credit:focus-visible{text-decoration-color:currentColor}
@media (max-width:1023px){.foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand{grid-column:1 / -1}.foot-col,.foot-col:nth-of-type(2){grid-column:auto}}
@media (max-width:599px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-col:last-of-type{grid-column:1 / -1}}

/* =====================================================================
   INNER PAGES
   Built from the same pieces as the homepage: paper rooms, night-plum bands, hairlines, circles,
   Cormorant for feeling and Jost for fact. No boxes, no shadows, no numerals in the margin.
   ===================================================================== */
body.inner{background:var(--paper)}

/* ---------- page head: a night room under the same centred logo as the homepage ----------
   The typographic head glows faintly where the homepage hero's violet sits (#332c4f, the intro's
   night). A photographic head lays a veil that deepens toward the words at the bottom, so the
   words never sit across a face. */
.ph{position:relative;isolation:isolate;display:grid;align-content:end;min-height:min(42rem,72svh);padding:calc(var(--logo-top) + var(--logo-h) + clamp(3rem,8svh,5.5rem)) 0 clamp(3.25rem,8svh,5.5rem);background:radial-gradient(85% 75% at 80% 8%,#332c4f 0%,rgba(51,44,79,0) 64%),var(--plum-900);color:var(--white);overflow:hidden}
.ph-logo{position:absolute;inset:0 0 auto;z-index:2;display:flex;justify-content:center;padding-top:var(--logo-top)}
.ph-logo img{height:var(--logo-h);width:auto}
.ph-in{display:grid;justify-items:start;gap:var(--space-m)}
.ph .label{color:var(--text-on-dark-muted)}
.ph .label a{color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-calm) var(--ease-silk),color var(--dur-quick) var(--ease-out)}
.ph .label a:hover,.ph .label a:focus-visible{color:var(--white);background-size:100% 1px}
.ph h1{max-width:15ch;color:var(--white);font-size:min(var(--fs-display),13svh);line-height:var(--lh-display);letter-spacing:var(--track-display)}
.ph--long h1{max-width:20ch;font-size:min(var(--fs-h1),11svh);line-height:var(--lh-h1)}
.ph .standfirst{max-width:34ch;color:var(--text-on-dark-muted)}
.ph-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s) var(--space-l);margin-top:var(--space-xs)}
.ph--short{min-height:min(30rem,56svh)}
.ph--center .ph-in{justify-items:center;text-align:center}
.ph--center h1,.ph--center .standfirst{margin-inline:auto}
.ph-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%)}
.ph--photo{background:var(--plum-900)}
.ph--photo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(27,25,39,.55) 0%,rgba(27,25,39,.12) 30%,rgba(27,25,39,.28) 55%,rgba(27,25,39,.86) 100%)}
/* a studio photograph of Mia: she stands on the right, the words on the left over the studio's own dark */
.ph--mia::after{background:linear-gradient(90deg,rgba(27,25,39,.62) 0%,rgba(27,25,39,.3) 42%,rgba(27,25,39,0) 64%),linear-gradient(180deg,rgba(27,25,39,.35) 0%,rgba(27,25,39,0) 30%,rgba(27,25,39,0) 70%,rgba(27,25,39,.55) 100%)}
/* wide screens: a scene photograph takes the right two thirds and fades into the night where the words
   sit, so the words never cross the people in it (Mia's studio portraits already stand on the right) */
@media (min-aspect-ratio:4/5){
  .ph--photo:not(.ph--mia) .ph-bg{left:auto;right:0;width:62%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 22%,#000 58%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 22%,#000 58%)}
  .ph--photo:not(.ph--mia)::after{background:linear-gradient(90deg,var(--plum-900) 0%,rgba(27,25,39,.6) 40%,rgba(27,25,39,0) 68%),linear-gradient(180deg,rgba(27,25,39,.45) 0%,rgba(27,25,39,0) 24%,rgba(27,25,39,0) 72%,rgba(27,25,39,.45) 100%)}
  .ph--photo:not(.ph--mia) .ph-in>*{max-width:min(100%,44vw)}
  .ph--photo:not(.ph--mia) h1{font-size:min(var(--fs-display),13svh,7.2vw)}
  .ph--photo.ph--long:not(.ph--mia) h1{font-size:min(var(--fs-h1),11svh,5.6vw)}
}
/* tall screens: the photograph sits on top and melts into the night, the words follow beneath it */
@media (max-aspect-ratio:4/5){
  .ph--photo{display:block;min-height:0;padding:0 0 clamp(3rem,8svh,4.5rem)}
  .ph--photo .ph-bg{position:relative;inset:auto;display:block;width:100%;height:min(56svh,118vw);object-position:var(--pos-tall,var(--pos,50% 40%));-webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)}
  .ph--photo::after,.ph--mia::after{inset:0 0 auto;height:9rem;background:linear-gradient(180deg,rgba(27,25,39,.55) 0%,rgba(27,25,39,0) 100%)}
  .ph--photo .ph-in{position:relative;z-index:1;margin-top:calc(-1 * clamp(1.5rem,5svh,3rem))}
}
@media (max-width:599px){.ph{min-height:min(34rem,68svh)}.ph--short{min-height:min(26rem,50svh)}.ph--photo{min-height:0}}

/* ---------- sections ---------- */
.sec{padding-block:var(--section)}
.sec-tight{padding-block:clamp(4rem,8vw,7rem)}
.flush-top{padding-top:0}
.sec-dark{background:var(--plum-900);color:var(--white)}
.sec-deep{background:var(--plum-800);color:var(--white)}
.sec-dark .sec-head .label,.sec-deep .sec-head .label{color:var(--text-on-dark-muted)}
.sec-head--left{justify-items:start;text-align:left}
.sec-head--left h2{max-width:20ch}

/* lede: the opening thought of a page, in the serif, centred */
.lede{max-width:38ch;margin-inline:auto;text-align:center;font-family:var(--font-serif);font-weight:var(--w-regular);font-size:var(--fs-standfirst);line-height:1.45;color:var(--plum-700);text-wrap:pretty}
.lede+.lede{margin-top:.9em}
.lede-note{max-width:var(--measure);margin:var(--space-l) auto 0;text-align:center;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted)}

/* split: words beside a photograph */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-2xl);align-items:center}
.split-media{grid-column:1 / span 5;margin:0}
.split-text{grid-column:7 / -1;display:grid;gap:var(--space-m);justify-items:start}
.split-text p{max-width:var(--measure)}
.split--flip .split-media{grid-column:8 / -1;order:2}
.split--flip .split-text{grid-column:1 / span 6}
.split .frame{aspect-ratio:4/5}
@media (max-width:899px){.split>*{grid-column:1 / -1!important;order:0!important}.split .frame{aspect-ratio:4/5;max-height:80svh}}   /* !important: some pages set columns inline */
@media (max-width:499px){.btns .btn,.plan-cta .btn{white-space:normal;text-align:center;line-height:1.45;padding-block:.95rem}}

/* prose: long reading, never wider than sixty characters */
.prose{max-width:var(--measure);font-size:var(--fs-body);line-height:var(--lh-body)}
.prose>*+*{margin-top:1.15em}
.prose h2{margin-top:2.1em;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--w-regular)}
.prose h3{margin-top:1.9em;font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--w-regular)}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose ul,.prose ol{display:grid;gap:.55em;padding:0;list-style:none}
.prose li{position:relative;padding-left:1.6em}
.prose ul>li::before{content:"";position:absolute;left:.15em;top:.78em;width:5px;height:5px;border-radius:var(--radius-round);background:var(--plum-400)}
.prose ol{counter-reset:n}
.prose ol>li::before{counter-increment:n;content:counter(n) ".";position:absolute;left:0;top:0;font-family:var(--font-serif);font-size:1.1em;color:var(--plum-600)}
.prose a{color:var(--plum-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--dur-quick) var(--ease-out)}
.prose a:hover{color:var(--plum-900)}
.prose strong{font-weight:var(--w-medium)}
.prose blockquote{margin-inline:0;padding-left:1.4em;border-left:var(--hairline) solid var(--plum-400);font-family:var(--font-serif);font-style:italic;font-size:1.375rem;line-height:1.45;color:var(--plum-700)}
.prose figure{margin-block:2.25em}
.prose figure img{width:100%;height:auto}
.prose figcaption{margin-top:.75rem;font-size:var(--fs-caption);color:var(--text-muted)}
.on-dark .prose a{color:var(--white)}

/* ticks: hairline rows, each led by a small bullet */
.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);margin:0;padding:0;list-style:none;border-top:var(--hairline) solid var(--rule)}
.ticks li{position:relative;padding:1.05rem 0 1.1rem 1.6rem;border-bottom:var(--hairline) solid var(--rule);font-size:var(--fs-small);line-height:var(--lh-small)}
.ticks li::before{content:"";position:absolute;left:.15rem;top:1.65rem;width:5px;height:5px;border-radius:var(--radius-round);background:var(--plum-400)}
.ticks--one{grid-template-columns:1fr}
@media (max-width:699px){.ticks{grid-template-columns:1fr}}
.on-dark .ticks,.on-dark .ticks li{border-color:var(--rule-on-dark)}
.on-dark .ticks li{color:var(--text-on-dark-muted)}
.list-head{margin-bottom:var(--space-m)}

/* pillars: short promises side by side, each under a hairline */
.pillars{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--space-2xl) var(--gutter)}
.pillar{display:grid;gap:var(--space-s);align-content:start;padding-top:var(--space-l);border-top:var(--hairline) solid var(--rule)}
.pillar h3{font-size:clamp(1.625rem,1.35rem + .9vw,2.125rem)}
.pillar p{font-size:var(--fs-small);line-height:var(--lh-small);max-width:38ch}
.on-dark .pillar{border-top-color:var(--rule-on-dark)}
.on-dark .pillar p{color:var(--text-on-dark-muted)}
@media (max-width:899px){.pillars{grid-template-columns:1fr;gap:var(--space-xl)}}

/* plans: tiers in hairline columns, the price in the serif */
.plans{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:var(--hairline) solid var(--rule);border-bottom:var(--hairline) solid var(--rule)}
.plan{display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:var(--space-m);align-content:start;padding:clamp(2rem,3.5vw,3rem) clamp(1.25rem,2.5vw,2.5rem)}
/* cards in a row share one grid, so labels, titles, descriptions, prices and buttons line up across them
   (each plan spans --rows rows of the parent; the template sets --rows to the number of parts) */
.plans[style*="--rows"]{grid-auto-rows:auto;row-gap:0}
.plans[style*="--rows"]>.plan{grid-row:span var(--rows);grid-template-rows:subgrid;row-gap:var(--space-m)}
.plan .ticks{align-content:start;align-self:start}
.plan:first-child{padding-left:0}
.plan:last-child{padding-right:0}
.plan+.plan{border-left:var(--hairline) solid var(--rule)}
.plan h3{font-size:clamp(1.75rem,1.4rem + 1vw,2.375rem)}
.plan .for{font-family:var(--font-serif);font-size:1.25rem;line-height:1.4;color:var(--text-muted)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;font-family:var(--font-serif);font-weight:var(--w-light);font-size:clamp(2.5rem,2rem + 1.6vw,3.5rem);line-height:1;letter-spacing:-.01em;color:var(--plum-700);font-variant-numeric:lining-nums}
.price small{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.plan .ticks{grid-template-columns:1fr}
.plan .ticks li{padding-block:.75rem .8rem}
.plan .ticks li::before{top:1.35rem}
.plan-note{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
.plan-cta{display:flex;flex-wrap:wrap;gap:var(--space-s) var(--space-m);align-items:center;align-self:end}
@media (max-width:899px){.plans{grid-template-columns:1fr}.plan,.plan:first-child,.plan:last-child{padding-inline:0}.plan+.plan{border-left:0;border-top:var(--hairline) solid var(--rule)}}

/* switch: two or three ways in, tracked capitals, the chosen one filled */
.switch{display:inline-flex;flex-wrap:wrap;justify-content:center;border:var(--hairline) solid var(--rule)}
.switch button{min-height:3.25rem;padding:0 calc(1.5rem - var(--track-button)) 0 1.5rem;font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-button);text-transform:uppercase;color:var(--plum-600);transition:background-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}
.switch button+button{border-left:var(--hairline) solid var(--rule)}
.switch button:hover{color:var(--plum-800)}
.switch button[aria-selected=true]{background:var(--plum-700);color:var(--white)}
.switch-wrap{display:flex;justify-content:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
[role=tabpanel][hidden]{display:none}
[role=tabpanel]{animation:fys-enter var(--dur-calm) var(--ease-out)}
@media (max-width:499px){.switch{display:grid;width:100%}.switch button+button{border-left:0;border-top:var(--hairline) solid var(--rule)}}

/* band: a dark closing call, centred */
.band{padding-block:var(--section);background:var(--plum-900);color:var(--white);text-align:center}
.band-in{display:grid;justify-items:center;gap:var(--space-m)}
.band .label{color:var(--text-on-dark-muted)}
.band h2{max-width:16ch;color:var(--white)}
.band .standfirst{max-width:34ch;color:var(--text-on-dark-muted)}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-s);margin-top:var(--space-s)}
.btns--left{justify-content:flex-start}

/* facts: hairline rows of plain detail (when, where, how long) */
.facts{display:grid;margin:0;border-top:var(--hairline) solid var(--rule)}
.facts>div{display:grid;grid-template-columns:minmax(7rem,1fr) 2.2fr;gap:var(--gutter);padding:1.1rem 0;border-bottom:var(--hairline) solid var(--rule)}
.facts dt{font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);padding-top:.2rem}
.facts dd{margin:0;font-size:var(--fs-small);line-height:var(--lh-small)}
.on-dark .facts,.on-dark .facts>div{border-color:var(--rule-on-dark)}
.on-dark .facts dt{color:var(--text-on-dark-muted)}

/* cards: the journal's index and any list of pages */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(3rem,5vw,4.5rem) var(--gutter)}
.card{display:grid;gap:1.15rem;align-content:start}
.card .frame{aspect-ratio:3/2}
.card .frame img{object-position:var(--pos,50% 50%)}
.card h3{font-size:clamp(1.5rem,1.3rem + .7vw,1.9rem);line-height:1.18}
.card h3 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-calm) var(--ease-silk)}
.card:hover h3 span,.card:focus-visible h3 span{background-size:100% 1px}
.card p{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .link-arrow .arrow,.card:focus-visible .link-arrow .arrow{width:3.25rem}
.card .link-arrow{margin-top:.25rem}
@media (max-width:1023px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:649px){.cards{grid-template-columns:1fr}}
/* the newest post leads the index: photograph left, words right */
.card--lead{grid-column:1 / -1;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
.card--lead .frame{grid-column:1 / span 7}
.card--lead .card-body{grid-column:9 / -1;display:grid;gap:1.15rem;justify-items:start}
.card--lead h3{font-size:clamp(2rem,1.5rem + 1.6vw,3rem);line-height:1.08}
@media (max-width:899px){.card--lead{grid-template-columns:1fr;row-gap:1.15rem}.card--lead .frame,.card--lead .card-body{grid-column:1 / -1}}
.card-body{display:grid;gap:.85rem;justify-items:start}

/* a cover in type, for the posts that never had a photograph */
.tcover{display:grid;place-items:center;align-content:center;gap:1.1rem;padding:9% 12%;background:radial-gradient(90% 80% at 75% 10%,#332c4f 0%,rgba(51,44,79,0) 65%),var(--plum-900);color:var(--white);text-align:center}
.tcover img{width:2.75rem;height:auto;opacity:.8}
.tcover span{font-family:var(--font-serif);font-style:italic;font-weight:var(--w-light);font-size:clamp(1.25rem,1rem + 1vw,1.875rem);line-height:1.18;text-wrap:balance}
.frame.tcover{position:relative}

/* quotes: real words from real clients, as a still grid (never invented) */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl) var(--gutter)}
.quotes figure{display:grid;gap:var(--space-m);align-content:start;margin:0;padding-top:var(--space-l);border-top:var(--hairline) solid var(--rule)}
.quotes blockquote{margin:0;font-family:var(--font-serif);font-style:italic;font-weight:var(--w-light);font-size:clamp(1.3rem,1.15rem + .6vw,1.7rem);line-height:1.38;color:var(--plum-700);text-wrap:pretty}
.quotes figcaption{display:grid;gap:.35rem}
.quotes figcaption .caption{color:var(--text-muted)}
.on-dark .quotes figure{border-top-color:var(--rule-on-dark)}
.on-dark .quotes blockquote{color:var(--white)}
.on-dark .quotes figcaption .label{color:var(--white)}
.on-dark .quotes figcaption .caption{color:var(--text-on-dark-muted)}
@media (max-width:899px){.quotes{grid-template-columns:1fr}}

/* forms: hairline fields from the design system, two to a row */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem var(--gutter)}
.form .full{grid-column:1 / -1}
.form textarea.input{min-height:6.5rem;resize:vertical;line-height:1.6}
.form-intro{grid-column:1 / -1;font-family:var(--font-serif);font-style:italic;font-size:1.25rem;line-height:1.45;color:var(--plum-600);max-width:52ch}
.form-group{grid-column:1 / -1;padding-top:var(--space-m);border-top:var(--hairline) solid var(--rule)}
.choices{display:flex;flex-wrap:wrap;gap:.9rem 2.25rem;padding-top:.6rem}
.file{display:grid;gap:.6rem}
.file input[type=file]{width:100%;padding:1.25rem;border:var(--hairline) dashed var(--plum-400);background:transparent;font-family:var(--font-sans);font-size:var(--fs-small);color:var(--plum-700);cursor:pointer}
.file input[type=file]::file-selector-button{margin-right:1rem;padding:.7rem 1.1rem;border:var(--hairline) solid var(--plum-700);background:transparent;font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-button);text-transform:uppercase;color:var(--plum-700);cursor:pointer}
.form-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--space-m);align-items:center;padding-top:var(--space-s)}
.form-small{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted);max-width:52ch}
.form-done{grid-column:1 / -1;font-family:var(--font-serif);font-style:italic;font-size:1.375rem;line-height:1.45;color:var(--plum-700)}
.form-done[hidden]{display:none}
@media (max-width:699px){.form{grid-template-columns:1fr}}

/* an embedded application (Mia's matchmaking database lives in SmartMatchApp) */
.embed{min-height:40rem}
.embed iframe{display:block;width:100%;min-height:60rem;border:0;background:transparent}
html.js .embed iframe{opacity:0;transition:opacity .45s var(--ease-out)}   /* Mia's SmartMatchApp form shows once it wears the site's styles (pages.sma_styles) */
html.js .embed.is-styled iframe{opacity:1}

/* a narrow centred column for forms and short pages */
.narrow{width:min(100% - 2*var(--margin),48rem);margin-inline:auto}
.mid{width:min(100% - 2*var(--margin),62rem);margin-inline:auto}

/* the post: head, cover, words, Mia beneath */
.post-cover{margin:0;width:min(100% - 2*var(--margin),62rem);margin-inline:auto;margin-top:calc(-1 * clamp(2rem,5vw,3.5rem));position:relative;z-index:1}
/* the cover rises into the head by its own amount (set by width), so the head keeps that much room plus a clear gap under
   the title at every window size; the head's usual bottom padding follows the window's height, and on a wide, short
   laptop window the two nearly cancelled, laying the photo over the title's last line (9 October 2026) */
.ph--post{padding-bottom:calc(clamp(2rem,5vw,3.5rem) + clamp(2.75rem,4.5vw,3.5rem))}
.post-cover .frame{aspect-ratio:16/9}
.post-body{width:min(100% - 2*var(--margin),var(--measure));margin-inline:auto;padding-block:clamp(3.5rem,7vw,6rem) var(--section)}
.post-body .prose{max-width:none}
.post-body .prose>p.lead{font-family:var(--font-serif);font-size:var(--fs-standfirst);line-height:1.45;color:var(--plum-700)}
.post-body .prose>:first-child{margin-top:0}   /* a post that opens on a heading starts at the top, not 90px down */
.byline{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-m);margin-top:var(--space-3xl);padding-top:var(--space-l);border-top:var(--hairline) solid var(--rule)}
.byline img{width:4.5rem;height:4.5rem;border-radius:var(--radius-round);object-fit:cover;object-position:50% 18%}
.byline b{display:block;font-family:var(--font-serif);font-style:italic;font-weight:var(--w-light);font-size:1.75rem;line-height:1.1;color:var(--plum-700)}
.byline p{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted)}
.post-cta{display:flex;flex-wrap:wrap;gap:var(--space-s);margin-top:var(--space-l)}

/* a quiet "this has passed" note on old events */
.status{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .75rem;border:var(--hairline) solid rgba(255,255,255,.3);font-size:.625rem;font-weight:var(--w-medium);letter-spacing:.22em;text-transform:uppercase;color:var(--text-on-dark-muted)}
.status::before{content:"";width:5px;height:5px;border-radius:var(--radius-round);background:currentColor}

/* =====================================================================
   Refinements after the page-by-page review (9 October 2026)
   ===================================================================== */
:root{--fs-label:.75rem}                                   /* labels and button words: 12px, the tracking kept */
html{font-variant-numeric:lining-nums}                     /* Cormorant's old-style figures read "1." as "ı." */
.standfirst{font-variant-numeric:lining-nums}
.lede,.sec-head .standfirst,.ph .standfirst,.band .standfirst,.lede-note{text-wrap:balance}
.nw{white-space:nowrap}                                    /* a hyphenated word or a name that must not break */
@media (max-width:599px){.hide-s{display:none}}

/* links inside reading take their sentence's size and colour; only the underline marks them */
.prose a{font-family:inherit;font-size:inherit;color:inherit;overflow-wrap:anywhere}
.prose a strong,.prose strong a{font-weight:inherit}
/* a lead-in that repeats ("What you'll learn") is a label above its list */
.prose .list-label{margin-top:1.9em;color:var(--plum-600)}
.prose .list-label+ul,.prose .list-label+ol{margin-top:.65em}

/* the post: words line up with the cover; small print with its text column */
.ph--post .ph-in{width:min(100% - 2*var(--margin),62rem)}
.ph--text .ph-in{width:min(100% - 2*var(--margin),var(--container-text))}
.ph--xlong h1{max-width:22ch;font-size:min(clamp(2.25rem,1.6rem + 2.6vw,4rem),9svh);line-height:1.04}
.ph--photo.ph--xlong:not(.ph--mia) h1{font-size:min(clamp(2.25rem,1.6rem + 2.6vw,4rem),9svh,5vw)}
.post-body--nocover{padding-top:clamp(3rem,6vw,5rem)}
.post-next{margin-top:var(--space-2xl);padding-top:var(--space-l);border-top:var(--hairline) solid var(--rule)}
.post-lead{max-width:40ch;font-family:var(--font-serif);font-size:1.375rem;line-height:1.4;color:var(--plum-700);text-wrap:balance}
.post-next .post-cta{margin-top:var(--space-m)}
@media (max-width:599px){.ph--short{min-height:0;padding-top:calc(var(--logo-top) + var(--logo-h) + 3.25rem)}}

/* cards: the date line is a label, not body text; the arrows sit on one line across a row */
.card p.label{display:block;font-size:var(--fs-label);line-height:1.5;color:var(--text-muted);-webkit-line-clamp:unset;overflow:visible}
.card{grid-template-rows:auto 1fr}
.card-body{grid-template-rows:auto auto 1fr auto;align-content:start;height:100%}
.card .link-arrow{align-self:end}
.cards-room{grid-column:1 / -1;padding-block:clamp(3.5rem,7vw,6rem)}
.cards-room .room-line{max-width:26ch;font-family:var(--font-serif);font-weight:var(--w-light);font-size:var(--fs-h3);line-height:1.2;color:var(--white);text-wrap:balance}
.sec--near{padding-top:clamp(3rem,6vw,6rem)}

/* the menu circle: nearly solid, so text scrolling beneath never blurs through it */
.mb-face{background:rgba(251,251,251,.96)}
.mb-light{background:rgba(27,25,39,.9)}

/* the concierge: clear of the footer's last line everywhere; on phones it waits until the hero has passed */
.foot{padding-bottom:calc(2rem + 4.75rem)}
.chat{transition:opacity var(--dur-quick) var(--ease-out),visibility 0s linear var(--dur-quick)}
@media (max-width:599px){html.hero-on .chat:not([data-open]){opacity:0;visibility:hidden}}

/* phones: every link a finger can find (44px), button pairs as full-width rows, tabs in one row */
@media (max-width:599px){
  .foot-col{gap:0}
  .foot-col .label{margin-bottom:.35rem}
  .foot-col a{display:flex;align-items:center;min-height:2.75rem}
  .ph-logo a,.menu-top a{display:inline-flex;align-items:center;min-height:2.75rem}
  .btns .btn,.post-cta .btn{width:100%}
  .btns{justify-content:stretch}
  .switch{display:flex;width:100%}
  .switch button{flex:1;padding:0 .5rem;letter-spacing:.18em}
  .switch button+button{border-left:var(--hairline) solid var(--rule);border-top:0}
}
@media (max-width:420px){.btn{letter-spacing:.16em;padding-inline:1.25rem}}
.dates a,.facts dd a.link{display:inline-flex;align-items:center;min-height:2.75rem}

/* photo heads on tall screens: a deeper veil at the top so the white logo always has dark behind it */
@media (max-aspect-ratio:4/5){.ph--photo::after{height:11rem;background:linear-gradient(180deg,rgba(27,25,39,.72) 0%,rgba(27,25,39,.38) 55%,rgba(27,25,39,0) 100%)}}

/* forms: a column fills its space; long questions read as sentences, short labels stay in capitals */
.split-text>.form,.split-text>form{justify-self:stretch;width:100%}
.field.q>label{font-size:var(--fs-body);font-weight:var(--w-regular);line-height:1.5;letter-spacing:0;text-transform:none;color:var(--plum-700)}
.form-group h3{font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--plum-700)}
.form-help{margin-top:-.15rem;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted)}
textarea.input,.form textarea.input{resize:none}
@media (max-width:599px){.form textarea.input{min-height:5rem}}
input[type=date].input{min-height:3rem;color:var(--text)}
input[type=date].input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.form-note{grid-column:1 / -1;padding:1rem 1.25rem;border-left:var(--hairline) solid var(--plum-400);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--plum-700)}

/* pages with little in them: one compact rhythm */
.sec--short{padding-block:clamp(3.5rem,7vw,6rem)}

/* event and programme pages: the facts and the button stay beside the long text */
@media (min-width:900px){.split-text.sticky{position:sticky;top:clamp(5rem,9vh,7rem);align-self:start}}
.facts--wide>div{grid-template-columns:minmax(10.5rem,1fr) 2.2fr}
@media (max-width:599px){.facts--wide>div{grid-template-columns:1fr;gap:.2rem}}
details.dates{margin-top:var(--space-s)}
details.dates summary{display:inline-flex;align-items:center;gap:1rem;min-height:2.75rem;cursor:pointer;list-style:none;font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-button);text-transform:uppercase;color:var(--accent)}
details.dates summary::-webkit-details-marker{display:none}
details.dates[open] summary{margin-bottom:.4rem}
.dates-list{display:grid;gap:0;margin:0;padding:0;list-style:none;font-size:var(--fs-small);line-height:var(--lh-small)}
.dates-list li{padding:.35rem 0;border-bottom:var(--hairline) solid var(--rule)}
.signature{font-family:var(--font-serif);font-style:italic;font-size:1.75rem;color:var(--plum-700)}

/* numbered steps: what happens, in order (Matchmaking, for men) */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-l) var(--gutter);margin:0 0 var(--space-m);padding:0;list-style:none;counter-reset:step}
.steps li{display:grid;gap:.55rem;align-content:start;padding-top:var(--space-m);border-top:var(--hairline) solid var(--rule);counter-increment:step}
.steps li::before{content:counter(step);font-family:var(--font-serif);font-weight:var(--w-light);font-size:2.25rem;line-height:1;color:var(--plum-400)}
.steps h3{font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem)}
.steps p{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted)}
@media (max-width:699px){.steps{grid-template-columns:1fr}}

/* lists with a short line under their label, and the rest of the list as one sentence */
.list-line{margin:-.5rem 0 var(--space-m);font-family:var(--font-serif);font-size:1.25rem;line-height:1.35;color:var(--plum-700)}
.list-more{margin-top:var(--space-m);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted);max-width:52ch}
@media (max-width:599px){.ticks li{padding-block:.75rem .8rem}.ticks li::before{top:1.35rem}}

/* splits: facts beside the story (5 and 7 of 12, a wide gutter); short pages in one column */
.split--5-7{grid-template-columns:5fr 7fr;column-gap:clamp(2rem,6.7vw,6rem)}
.split--5-7>*{grid-column:auto!important}
@media (max-width:899px){.split--5-7{grid-template-columns:1fr}}
.split--stack{display:block;max-width:var(--measure);margin-inline:auto}
.split--stack>.split-text{margin-bottom:var(--space-2xl)}
.split-text .quotes{grid-template-columns:1fr}
.split-text.story{gap:var(--space-s)}
.split-text.story p{color:var(--text-on-dark-muted)}

/* small pieces */
.not-sure{display:grid;justify-items:center;gap:var(--space-s);margin-top:var(--space-2xl);text-align:center}
.not-sure p{font-family:var(--font-serif);font-size:1.375rem;color:var(--plum-700)}
@media (max-width:599px){.not-sure{justify-items:start;text-align:left}}
.cost{margin:-.5rem 0 var(--space-m);font-family:var(--font-serif);font-style:italic;font-size:1.3125rem;line-height:1.4;color:var(--plum-700)}
.pillars--wide .pillar p{max-width:60ch}
.now-line{margin-top:var(--space-l);font-family:var(--font-serif);font-size:1.25rem;line-height:1.4;color:var(--plum-700)}
.lede-left{font-family:var(--font-serif);font-size:var(--fs-standfirst);line-height:1.45;color:var(--plum-700)}
.lede-body{max-width:var(--measure);margin:var(--space-l) auto 0;text-align:center;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);text-wrap:balance}
.list-lead{margin-bottom:var(--space-m);font-family:var(--font-serif);font-size:1.375rem;color:var(--plum-700);text-align:center}
.facts--sessions>div{grid-template-columns:minmax(6.5rem,10rem) 1fr}
.facts--sessions .dd-title{display:block;margin-bottom:.2rem;font-family:var(--font-serif);font-weight:var(--w-regular);font-size:1.25rem;line-height:1.3;color:var(--plum-700)}
.ph:not(.ph--long) h1+.standfirst{margin-top:.4rem}

/* the enquiry page: three service rows */
.svc-rows{display:grid;border-top:var(--hairline) solid var(--rule)}
.svc-row{display:grid;gap:.6rem;justify-items:start;padding:var(--space-l) 0;border-bottom:var(--hairline) solid var(--rule)}
.svc-row h3{font-size:clamp(1.5rem,1.3rem + .7vw,1.9rem)}
.svc-row h3 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-calm) var(--ease-silk)}
.svc-row:hover h3 span,.svc-row:focus-visible h3 span{background-size:100% 1px}
.svc-row p{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted);max-width:44ch}

/* contact: the direct routes first on phones, then the form, then Mia */
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-2xl);align-items:start}
.contact-form{grid-column:1 / span 7;grid-row:1 / span 2}
.contact-photo{grid-column:9 / -1;grid-row:1;display:grid;gap:var(--space-l);justify-items:start}
.contact-routes{grid-column:9 / -1;grid-row:2}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr}.contact-form,.contact-photo,.contact-routes{grid-column:1}.contact-routes{grid-row:1}.contact-form{grid-row:2}.contact-photo{grid-row:3}}

/* free guides: the guide's own first page as its picture */
.guide-cover{aspect-ratio:auto!important;max-height:none}
.guide-cover img{width:100%;height:auto;object-fit:contain;background:var(--white);border:var(--hairline) solid var(--rule)}
@media (max-width:599px){.guide-cover{max-width:15rem}}

/* past events beyond the first six */
.more-events{margin-top:var(--space-2xl)}
.more-events summary{cursor:pointer;list-style:none}
.more-events summary::-webkit-details-marker{display:none}
.more-events[open] summary{display:none}

/* programmes on phones: a row to swipe through */
@media (max-width:899px){
  .plans--swipe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78%,1fr);grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;border-bottom:0}
  .plans--swipe>.plan{scroll-snap-align:start;border-top:0!important;padding-inline:0 var(--gutter)!important}
  .plans--swipe>.plan+.plan{border-left:var(--hairline) solid var(--rule)!important;padding-left:var(--gutter)!important}
}

/* phones: Mia's portrait heads start below the logo, so it never sits on her hair */
@media (max-aspect-ratio:4/5){
  .ph--mia .ph-bg{margin-top:calc(var(--logo-top) + var(--logo-h) + .75rem);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 72%,transparent 100%)}
}
/* phones: the three service tiles as landscape crops, so the recap fits about one screen */
@media (max-width:599px){body.inner .tiles .frame.ratio-4x5{aspect-ratio:16/10}}
/* price cards: the button and its link fit side by side in every column */
.plan-cta{gap:var(--space-xs) var(--space-m)}
.plan .btn{padding-inline:calc(1.75rem - var(--track-button)) 1.75rem}

/* "Keep reading" on phones: a row to swipe through instead of three full-width cards */
@media (max-width:649px){
  .cards--more{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(80%,1fr);grid-template-columns:none;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:.5rem}
  .cards--more>.card{scroll-snap-align:start}
}

/* the homepage's last run: Mia's closing photograph fades into the newsletter, which shades into the
   affiliations and the footer, one dark passage from #1b1a1c (the photograph's own backdrop) to plum-900 */
.letter--dark{background:linear-gradient(180deg,#1b1a1c 0%,#1b1a21 100%);color:var(--white)}
.letter--dark .letter-in{border-top:0;padding-top:clamp(1.5rem,3vw,2.5rem)}
.letter--dark .label,.letter--dark .letter-copy p:last-child,.letter--dark .field>label{color:var(--text-on-dark-muted)}
.letter--dark h3{color:var(--white)}
.letter--dark .input{border-bottom-color:rgba(255,255,255,.42);color:var(--white)}
.letter--dark .input::placeholder{color:rgba(255,255,255,.58)}
.letter--dark .input:focus{border-bottom-color:var(--white);box-shadow:0 1px 0 0 var(--white)}
.letter--dark .field:focus-within>label{color:var(--white)}
.letter--dark .btn-secondary{border-color:rgba(255,255,255,.85);color:var(--white)}
.letter--dark .btn-secondary:hover,.letter--dark .btn-secondary:focus-visible{background:var(--white);border-color:var(--white);color:var(--plum-800)}
.letter--dark .form-done{color:var(--white)}
.affiliations--dark{background:linear-gradient(180deg,#1b1a21 0%,#1b1927 100%)}
.affiliations--dark .strip{border-top-color:var(--rule-on-dark);border-bottom:0}
.affiliations--dark .label{color:var(--text-on-dark-muted)}
.affiliations--dark .marquee-track img{opacity:.86}

/* ---------- the opening: "Stars from the Lake" (assets/intro.js) ----------
   Plays over everything, once per visitor, on the first page they open (_build/partials/intro.html decides).
   At the end its logo glides up into the page's own logo (the homepage hero's, or an inner page head's)
   while the night dissolves (is-landing); a skip (click, key, scroll) lifts it away quickly instead
   (is-leaving). While it plays, the page's own entrance waits (paused), so it happens as the curtain lifts. */
#intro{display:none}
html.intro-playing #intro,#intro.is-leaving,#intro.is-landing{display:block}
html.intro-lock{overflow:hidden}
#intro{position:fixed;inset:0;z-index:200;background:#1b1927;transition:opacity var(--out,1300ms) var(--ease-in-out)}
#intro.is-leaving{opacity:0;pointer-events:none}
#intro.is-landing{background:transparent;pointer-events:none}
#intro .sky{position:absolute;inset:0}
#intro.is-landing .logo-wrap{transform-origin:0 0;will-change:transform}
html.logo-handoff .hero-head img,html.logo-handoff .ph-logo img{animation:none;opacity:0}     /* hidden while the intro's logo flies to it */
html.logo-landed .hero-head img,html.logo-landed .ph-logo img{animation:fys-enter .32s var(--ease-out) both}
#intro .splash{position:absolute;inset:0;overflow:hidden;opacity:0}
#intro .lift{position:absolute;inset:0;display:grid;place-items:center;transition:transform var(--out,1300ms) var(--ease-in-out)}
#intro.is-leaving .lift{transform:translateY(-2.5vh) scale(.97)}
#intro .content{position:relative;width:min(560px,82vw)}
#intro .logo-wrap{position:relative;width:100%;aspect-ratio:1600/521}
#intro .logo-wrap>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#intro .lt,#intro .tb{transform-box:fill-box;transform-origin:50% 50%}
#intro .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
html.intro-playing main,html.intro-playing .foot,html.intro-playing .rise{animation-play-state:paused}