/* Page-level styles. Design tokens live in tokens.css. */
html{scroll-behavior:smooth;background:#F8E1D1}
body{margin:0;background:#F8E1D1;overflow-x:clip}
a{color:inherit}a:hover{color:inherit}
#root{position:relative;color:#F8E1D1;transition:color .9s cubic-bezier(.22,1,.36,1)}

/* sunburst mark: rays are driven by js/engine.js */
.sunburst{display:block;width:100%;height:auto;fill:var(--olive);overflow:visible}
.sunburst g{transform-origin:176.885px 179.965px}

/* nav */
.nav{display:flex;align-items:center;gap:40px;padding:18px var(--gutter)}
.nav--blush{color:var(--blush)}
.nav--olive{color:var(--olive-900)}
.nav__logo{background-image:none;margin-right:auto;line-height:0}
.nav .logo{display:block;width:clamp(146px,11.7vw,225px);height:auto;aspect-ratio:840.66/218.55;fill:currentColor}
.nav__links{display:flex;gap:32px}
.nav__links a{font-size:14px;font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;background-size:0 1px}
.nav__links a:hover{background-size:100% 1px}

/* pill button with circle-arrow cap */
.btn{--bg:var(--olive);--fg:var(--blush);--line:var(--olive);--cap-line:var(--blush);--cap-bg:transparent;--cap-fg:var(--blush);
  display:inline-flex;align-items:center;gap:20px;height:56px;padding:0 7px 0 28px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--fg);font-family:var(--font-body);font-weight:400;font-size:14px;letter-spacing:var(--tracking-button);
  text-transform:uppercase;white-space:nowrap;cursor:pointer;background-image:none;text-decoration:none}
.btn--sm{gap:14px;height:44px;padding:0 5px 0 20px;font-size:14px}
.btn--lg{gap:28px;height:76px;padding:0 9px 0 44px;font-size:17px}
.btn--lg .btn__cap{width:58px;height:58px}
.btn--blush{--bg:var(--blush);--fg:var(--olive-900);--line:var(--blush);--cap-line:var(--olive);--cap-fg:var(--olive)}
.btn--outline{--bg:transparent;--fg:var(--olive-900);--line:var(--olive);--cap-line:var(--olive);--cap-bg:var(--olive);--cap-fg:var(--blush)}
.btn--outline-blush{--bg:transparent;--fg:var(--blush);--line:var(--blush);--cap-line:var(--blush);--cap-bg:var(--blush);--cap-fg:var(--olive)}
.btn:hover{color:var(--fg)} /* keep label colour on hover (the global a:hover would otherwise inherit it away) */
.btn__label{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:3px;
  transition:background-size var(--dur-calm) var(--ease-settle)}
.btn:hover .btn__label{background-size:100% 1px}
.btn__cap{position:relative;display:inline-block;flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;
  border:1px solid var(--cap-line);background:var(--cap-bg);color:var(--cap-fg);
  transition:background var(--dur-calm) var(--ease-settle),color var(--dur-calm) var(--ease-settle)}
.btn--sm .btn__cap{width:34px;height:34px}
.btn__arrows{position:absolute;inset:0}
.btn__arrows svg{position:absolute;left:50%;top:50%;width:42%;height:42%;overflow:visible;
  transition:transform var(--dur-calm) var(--ease-settle),opacity var(--dur-calm) var(--ease-settle)}
.btn__arrows svg:first-child{transform:translate(-50%,-50%);opacity:1}
.btn__arrows svg:last-child{transform:translate(-50%,-50%) translateX(-140%);opacity:0}
.btn:hover .btn__arrows svg:first-child{transform:translate(-50%,-50%) translateX(140%);opacity:0}
.btn:hover .btn__arrows svg:last-child{transform:translate(-50%,-50%);opacity:1}

/* arch photo frame (about section) */
.frame-arch{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 0 0}
.frame-arch__in{position:absolute;inset:0;background:var(--olive-800)}
.frame-arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(1) sepia(.38) contrast(1.06) brightness(.8)}

/* mobile: single column, simpler nav */
@media (max-width:760px){
  main > section, main > footer{grid-template-columns:minmax(0,1fr)!important}
  main > section > div{padding-right:20px!important}
  .about-row{flex-wrap:wrap}
  .about-quote{flex-direction:column;align-items:flex-start!important}
  .nav{gap:10px}
  .nav .logo{width:clamp(104px,40vw,190px)}
  .nav .btn{height:38px;padding:0 4px 0 14px;gap:8px;font-size:12px;letter-spacing:.08em}
  .nav .btn__cap{width:30px;height:30px}
  .nav .logo,.nav__logo{flex-shrink:0}
  main .btn{max-width:100%;white-space:normal;text-align:left;height:auto;min-height:48px;padding-top:4px;padding-bottom:4px}
  .about-row--r{flex-direction:column-reverse}
  #top h1{width:calc(100vw - clamp(20px,8vw,140px) - 20px)!important}
  .nav{gap:12px;padding:12px 16px}
  .nav__links{display:none}
  .btn{height:48px;font-size:14px;padding:0 6px 0 22px}
  .btn__cap{width:36px;height:36px}
  #about [style*="align-items:center"]{flex-wrap:wrap}
  main .btn--lg{min-height:64px;font-size:15px}
  #space [data-col="1"]{margin-top:8vh!important}
  /* hero: the eyebrow wraps to two lines, so give the tagline more room */
  #top p:nth-of-type(2){top:calc(64vh + 96px)!important}
  /* the eye and its rings sit behind the copy on a phone, so keep them quiet */
  [data-eye]{width:52vw!important}
  [data-rings]{filter:opacity(.4)}
  [data-eye]{filter:opacity(var(--eye-dim,.4))} /* main.js raises this to 1 as the eye docks beside the footer logo */
  /* section numerals: show both digits across the screen instead of a cropped slice */
  .numerals{left:0!important}
}

.btn__arrows svg{stroke-width:1.75}
.sr-label{font-size:16px}

/* service / focus icons: sit to the left of the heading, in the text colour */
#services,#focuses{--ico:clamp(40px,3.8vw,72px)}
.ico{display:block;width:var(--ico);height:var(--ico);margin-top:clamp(-4px,-.3vw,0px);overflow:visible}
@media (max-width:760px){#services,#focuses{--ico:44px}}

/* booking popup: full-page, opens like the intro loader (a circle growing from the centre) */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:start center;overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;clip-path:circle(0% at 50% 50%);
  transition:clip-path 1.5s cubic-bezier(.22,1,.36,1),visibility 0s linear 1.5s}
.modal.is-open{visibility:visible;clip-path:circle(150% at 50% 50%);transition-delay:0s}
.modal__bg{position:fixed;inset:0;background:url(../assets/textures-images-03.webp) center/cover}
.modal__bg::after{content:"";position:absolute;inset:0;background:#F8E1D1;opacity:.82}
.modal__close{position:fixed;top:clamp(16px,2.4vw,36px);right:clamp(16px,2.4vw,36px);z-index:2;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--olive);background:transparent;color:var(--olive-900);cursor:pointer;display:grid;place-items:center;padding:0;
  transition:background var(--dur-calm) var(--ease-settle),color var(--dur-calm) var(--ease-settle)}
.modal__close svg{width:20px;height:20px}
.modal__close:hover{background:var(--olive);color:var(--blush)}
.modal__inner{position:relative;width:min(1080px,100%);padding:clamp(72px,10vh,120px) clamp(16px,4vw,48px) clamp(40px,8vh,96px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vh,44px);color:var(--olive-900)}
.modal__title{margin:0;font-size:clamp(26px,2.52vw,48px);line-height:1.08;text-align:center;color:var(--olive-900)}
.modal__embed{width:min(990px,100%)}
.modal__embed img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 20px 60px color-mix(in oklab,var(--olive-950) 18%,transparent)}
@media (prefers-reduced-motion:reduce){.modal{transition:none}}

/* accessibility + resilience */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
/* failsafe: if scripts ever fail, the intro cover still lifts by itself */
@keyframes loader-failsafe{to{opacity:0;visibility:hidden}}
[data-loader]{animation:loader-failsafe .6s linear 15s forwards}

@media (max-width:360px){.nav .btn{font-size:11px;letter-spacing:.04em;padding-left:10px;gap:6px}}