/* Metaoros site styles, built on brand kit tokens.css. Foundations locked 27 Oct 2026. */
*{box-sizing:border-box}
/* Only brand-kit colours (tokens.css v1.1). No other hex values. */
:root{--ease:cubic-bezier(.22,.61,.36,1);--dur:180ms;--dur-slow:280ms}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video,picture{display:block;max-width:100%}
img{height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
h1,h2,h3{margin:0;color:var(--color-espresso)}
h1{font-size:clamp(40px,4.6vw,64px);line-height:1.04;font-weight:600;font-variation-settings:"opsz" 24;letter-spacing:-0.025em}
h2{font-size:clamp(30px,3vw,40px);line-height:1.1;text-wrap:balance}
h3{font-size:22px;line-height:1.25}
p{margin:0}
.muted{color:var(--color-warm-grey)}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--color-redwood)}
section{padding:96px 0}
[id]{scroll-margin-top:88px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* actions: Redwood on light, Redwood light on dark (same swap as the logo sun).
   States follow the Material 3 state-layer rule: hover = 8% of the button's text colour over its fill, pressed = 12%. */
.btn{--btn-bg:var(--color-redwood);--btn-fg:#fff;display:inline-flex;align-items:center;min-height:52px;padding:0 24px;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font-weight:600;font-size:16px;border-radius:var(--radius-button);transition:background-color var(--dur) var(--ease)}
.btn:hover{background:color-mix(in srgb,var(--btn-bg),var(--btn-fg) 8%)}
.btn:active{background:color-mix(in srgb,var(--btn-bg),var(--btn-fg) 12%)}
.dark .btn{--btn-bg:var(--color-redwood-light);--btn-fg:var(--color-espresso)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--color-espresso);outline-offset:3px}
.dark a:focus-visible,.dark button:focus-visible,.site-footer a:focus-visible{outline-color:var(--color-bone)}
/* text links: underline thickens on hover (GOV.UK pattern); colour stays */
.link{color:var(--color-redwood);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-thickness var(--dur) var(--ease)}
.link:hover{text-decoration-thickness:3px}
.dark .link{color:var(--color-redwood-light)}
.todo{background:#F3DCCF;color:#7A3A22;border-radius:4px;padding:1px 6px;font-size:.85em;font-weight:600}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--color-bone);border-bottom:1px solid var(--color-line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.site-header img{height:28px;width:auto}
.site-header picture{display:block}
.nav{display:flex;align-items:center;gap:28px;font-size:16px}
.nav a.n,.site-footer a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease)}
.nav a.n:hover{color:var(--color-redwood);text-decoration-color:currentColor}
.nav .btn{min-height:44px;padding:0 16px;font-size:15px;white-space:nowrap}

/* dark sections + footer */
.dark{background:var(--color-espresso);color:var(--color-bone)}
.dark h2,.dark h3{color:var(--color-bone)}
.dark .muted{color:var(--color-bone-muted)}
.ridge{display:block;width:100%;height:clamp(64px,9vw,140px)}
.site-footer{background:var(--color-espresso);color:var(--color-bone-muted);font-size:15px;padding:40px 0 48px}
.site-footer img{height:24px;width:auto}
.site-footer a:hover{color:var(--color-bone);text-decoration-color:currentColor}

/* written recommendation specimen */
.mail{background:#fff;color:var(--color-espresso);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:24px 26px}
.mail .from{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mail .from img{width:36px;height:36px;flex:none}
.mail .from b{display:block;font-weight:600;font-size:14.5px;line-height:1.3}
.mail .from span{font-size:13px;color:var(--color-warm-grey)}
.mail .tag{margin-left:auto;font-size:12px;font-weight:600;color:var(--color-sage-text);background:var(--color-sage);border-radius:4px;padding:2px 8px}
.mail .subj{font-family:var(--font-heading);font-variation-settings:"opsz" 16;font-size:19px;letter-spacing:-0.01em;padding-bottom:12px;border-bottom:1px solid var(--color-line)}
.mail dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 24px}
.mail dt{font-size:13px;font-weight:600;color:var(--color-warm-grey);margin-top:12px}
.mail dd{margin:6px 0 0}
.mail .full{grid-column:1/-1}
.bar{display:block;height:9px;border-radius:5px;background:var(--color-line);margin-top:6px}
.mail .keep{margin-top:18px;padding-top:12px;border-top:1px solid var(--color-line);font-size:14px;color:var(--color-warm-grey)}

@media (max-width:900px){
  body{font-size:17px}
  .wrap{padding:0 22px}
  .nav a.n{display:none}
  .site-header .wrap{height:64px}
  .nav .btn{padding:0 14px;font-size:15px}
  section{padding:72px 0}
  .mail dl{grid-template-columns:minmax(0,1fr)}
  .hide-sm{display:none}
}

/* compact footer (28 Oct) */
.site-footer .foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer .foot img{margin:0}
.foot-links{display:flex;gap:28px;align-items:center;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){*,*::before,*::after,::details-content{transition-duration:1ms!important}}

/* Motion (locked 29 Oct 2026). Hidden states apply only while html.js-anim is set, which a head script removes after 2.5s if motion.js never loads. */
.ridge path{transform-box:fill-box}
html.js-anim .split > div > *,html.js-anim .steps .step,html.js-anim .promises li,html.js-anim .do-head > *,html.js-anim .trio > div,
html.js-anim .team-split > div:first-child,html.js-anim .duo > div,html.js-anim .teach > div:last-child,html.js-anim .faq-grid > div,
html.js-anim .final .wrap > *,html.js-anim #how > .wrap > h2{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease),transform 600ms var(--ease);transition-delay:calc(var(--i,0)*70ms)}
html.js-anim .in{opacity:1!important;transform:none!important}
html.js-anim .hero-doc{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease) 150ms,transform 700ms var(--ease) 150ms}
html.js-anim .hero-doc .bar{transform:scaleX(0);transform-origin:left;transition:transform 650ms var(--ease);transition-delay:calc(600ms + var(--b,0)*70ms)}
html.js-anim .hero-doc.in .bar{transform:scaleX(1)}
html.js-anim .duo img,html.js-anim .clip{opacity:0;transform:scale(1.035);transition:opacity 900ms var(--ease),transform 1200ms var(--ease)}
html.js-anim .ridge path{clip-path:inset(0 100% 0 0)}
html.js-anim .ridge.in path{animation:ridge-sweep 1400ms var(--ease) both}
.ridge.in path:nth-child(2){animation-delay:90ms}.ridge.in path:nth-child(3){animation-delay:180ms}.ridge.in path:nth-child(4){animation-delay:270ms}
@keyframes ridge-sweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html.js-anim .hero .eyebrow,html.js-anim .hero .lede,html.js-anim .hero .actions,html.js-anim .hero .assure{animation:hero-up 500ms var(--ease) both}
html.js-anim .hero .lede{animation-delay:120ms}html.js-anim .hero .actions{animation-delay:200ms}html.js-anim .hero .assure{animation-delay:260ms}
@keyframes hero-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.js-anim *{animation:none!important;transition-duration:1ms!important;transition-delay:0s!important}html.js-anim .ridge path{clip-path:none}}

/* Responsive standards (29 Oct 2026) */
a.sr-only:focus{position:fixed;left:16px;top:12px;width:auto;height:auto;clip:auto;overflow:visible;z-index:100;background:var(--color-espresso);color:var(--color-bone);padding:10px 14px;border-radius:var(--radius-button);font-weight:600;text-decoration:none}
.site-header .wrap > a{display:inline-flex;align-items:center;min-height:44px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}
.menu-btn,.menu-panel{display:none}
@media (max-width:900px){
  .nav{gap:8px}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid var(--color-line);border-radius:var(--radius-button);font:600 15px var(--font-body);color:var(--color-espresso);cursor:pointer;transition:background-color var(--dur) var(--ease)}
  .menu-btn:hover{background:#fff}
  .menu-btn .bars{position:relative;width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
  .menu-btn[aria-expanded="true"] .bars{border-color:transparent}
  .menu-btn[aria-expanded="true"] .bars::before,.menu-btn[aria-expanded="true"] .bars::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid currentColor;transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] .bars::after{transform:rotate(-45deg)}
  .menu-panel{display:block;position:absolute;left:0;right:0;top:100%;background:var(--color-bone);border-bottom:1px solid var(--color-line);box-shadow:0 18px 24px -18px rgba(42,30,24,.3)}
  .menu-panel[hidden]{display:none}
  .menu-panel nav{display:flex;flex-direction:column;padding:4px 22px 22px;max-width:1180px;margin:0 auto}
  .menu-panel a.m{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--color-line);font-family:var(--font-heading);font-size:21px;letter-spacing:-0.01em;text-decoration:none;color:var(--color-espresso);transition:color var(--dur) var(--ease)}
  .menu-panel a.m:hover{color:var(--color-redwood)}
  .menu-panel .btn{margin-top:18px;justify-content:center}
  .menu-panel:not([hidden]){animation:menu-in 200ms var(--ease)}
  @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
/* phones: full logo + menu icon; the booking button lives in the hero and in the menu (8-site check, 29 Oct) */
@media (max-width:639px){
  .nav > .btn{display:none}
}
/* buttons never wrap; on the smallest phones the main buttons go full width (one line, centred) */
.btn{white-space:nowrap;justify-content:center;text-align:center}
@media (max-width:379px){
  main .btn,.menu-panel .btn{display:flex;width:100%;padding:0 16px;white-space:normal}
  /* Reflow enlarged text; normal-size labels and phrases still fit on one line. */
  main,.foot-links a{overflow-wrap:anywhere}
  .book h1 span{display:inline-block;max-width:100%;white-space:normal!important}
}

/* no single-word last lines in paragraphs (progressive enhancement) */
p,li{text-wrap:pretty}