/* Kin-Tore homepage.

   One brand hue, used at three depths, each with a job.

   DEEP TEAL (#177A7B) is structure: labels, links, the selected filter, and the
   action button on white grounds. AQUA (#62CDD6) is the same teal brightened
   until it glows on the dark grounds: it is the action colour wherever the
   ground is dark - hero, dock, menu, footer. The darkest end, PINE and INK, is
   the ground itself. Keeping the accent inside the brand hue is what makes the
   page read as one thing. The only other colour is the gold of the rating
   stars, which is Google's own and reads as a rating anywhere.

   Every pairing below is measured, not eyeballed (WCAG AA is 4.5:1). */
/* Self-hosted, latin subset. Plex is one variable file covering 400-500. */
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/saira-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/saira-condensed-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/ibm-plex-sans.woff2) format("woff2")}

:root{
  /* grounds */
  --paper:#FFFFFF;
  --surface:#EEF3F3;        /* one cool step off paper */
  --ink:#0B0F0F;            /* brand dark. 19.3:1 on paper */
  --pine:#0C2224;           /* dark ground with the teal in it */
  --navy:#151A1A;           /* lifted panel on the dark ground */
  --muted:#495453;          /* 7.9:1 on paper, 7.0:1 on surface */
  --on-dark-muted:#C9D6D6;  /* 12.9:1 on ink, 11.1:1 on pine */
  --line:rgba(11,15,15,.13);
  --line-dark:rgba(255,255,255,.16);

  /* teal */
  --teal-200:#A9DDE2;       /* 11.1:1 on pine */
  --teal-300:#5FB8C4;       /* 8.4:1 on ink, 7.2:1 on pine. dark grounds only */
  --teal-500:#1F9798;       /* the brand teal itself */
  --teal-600:#177A7B;       /* 5.1:1 on paper, and under white text */
  --teal-700:#11605F;       /* hover */

  /* aqua: the brand teal brightened, for action on dark grounds */
  --aqua-100:#D6F1F3;       /* tint for tags. deep teal on it: 6.2:1 */
  --aqua-200:#A9E5EA;       /* hover on the action colour. ink on it: 13.8:1 */
  --aqua-300:#62CDD6;       /* the action colour. ink on it: 10.3:1 */
  --star:#FBBC04;           /* Google's star gold, for the rating only */

  --display:"Saira Condensed","Arial Narrow",Arial,sans-serif;
  --text:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;

  --s-small:0.9375rem;
  --s-body:1.0625rem;
  --s-lead:1.3125rem;
  --s-mid:1.625rem;
  --s-head:clamp(2.35rem,4.4vw,4rem);
  --s-display:clamp(3rem,2rem + 5.6vw,6.5rem);

  --gutter:clamp(1.25rem,3.4vw,3rem);
  --gap:clamp(4.5rem,10vw,10rem);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --t-press:140ms;
  --t-ui:220ms;
  --t-move:450ms;

  --dock-h:64px;
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--teal-600) var(--surface)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-weight:400;font-size:var(--s-body);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
h1,h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.005em;line-height:1.0;margin:0;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;letter-spacing:0.005em;line-height:1.15;margin:0;text-wrap:balance}
p,dl,dd,figure{margin:0}
p{text-wrap:pretty}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em}
button{font:inherit;color:inherit}
section[id],header[id]{scroll-margin-top:var(--dock-h)}
:focus-visible{outline:3px solid var(--teal-600);outline-offset:3px}
.hero :focus-visible,.glance :focus-visible,.about :focus-visible,.ft :focus-visible,.dock :focus-visible,.menu :focus-visible,.lb :focus-visible{outline-color:var(--aqua-300)}
::selection{background:var(--teal-600);color:#fff}
.wrap{padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:60;padding:.8rem 1.1rem;background:var(--aqua-300);color:var(--ink);font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;transition:top var(--t-ui) var(--ease-out)}
.skip:focus{top:var(--gutter)}
.i{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- buttons ---------- */
.btn{
  --mx:0px;--my:0px;--press:1;
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:15px 1.6em;
  background:var(--teal-600);color:#fff;text-decoration:none;border:0;border-radius:0;
  font-family:var(--display);font-size:var(--s-lead);font-weight:600;letter-spacing:0.03em;line-height:1;text-transform:uppercase;cursor:pointer;
  transform:translate(var(--mx),var(--my)) scale(var(--press));
  transition:background var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);
}
.btn:active{--press:.97;transition-duration:var(--t-press)}
/* the action. one per screen. */
.btn--go{background:var(--aqua-300);color:var(--ink)}
/* a band of light crosses the button once when the pointer arrives */
.btn--go::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-110%)}
.visit__card .btn--go{background:var(--teal-600);color:#fff}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.btn--ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.arrow{display:inline-block;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--teal-700)}
  .btn--go:hover{background:var(--aqua-200)}
  .visit__card .btn--go:hover{background:var(--teal-700)}
  .btn--go:hover::after{transform:translateX(110%);transition:transform .7s var(--ease-out)}
  .btn--ghost:hover{background:rgba(255,255,255,.14)}
  .btn--ink:hover{background:var(--ink);color:#fff}
  .btn:hover .arrow,a:hover>.arrow{transform:translateX(5px)}
}

/* ---------- open-now status ---------- */
.status{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.6rem 1.05rem .6rem .9rem;border-radius:999px;
  background:rgba(11,15,15,.78);color:#fff;font-size:var(--s-small);line-height:1.2;font-variant-numeric:tabular-nums}
.status__dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--on-dark-muted);flex:0 0 auto}
.status.is-open .status__dot{background:var(--teal-300)}
.status.is-open .status__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.4s var(--ease-out) infinite}
.status.is-closed .status__dot{background:transparent;box-shadow:inset 0 0 0 2px var(--on-dark-muted)}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
.status--ink{min-height:0;padding:0;background:none;color:var(--ink);font-weight:500}
.status--ink .status__dot{background:var(--muted)}
.status--ink.is-open .status__dot{background:var(--teal-600)}
.status--ink.is-closed .status__dot{box-shadow:inset 0 0 0 2px var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:max(100svh,640px);overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__still,.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%}
/* the still is the first paint; the video arrives over it once it can play */
.hero__vid{opacity:0;transition:opacity .9s var(--ease-out)}
.hero__vid.is-on{opacity:1}
/* dark where the words are, open where they are not, so the room still reads */
.hero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,15,15,.74) 0%,rgba(11,15,15,.22) 28%,rgba(11,15,15,.34) 52%,rgba(11,15,15,.92) 100%),
  linear-gradient(90deg,rgba(11,15,15,.5) 0%,rgba(11,15,15,0) 62%)}
/* min-height, not height: on a short or narrow screen the hero grows rather than clipping its buttons */
.hero__inner{position:relative;min-height:max(100svh,640px);display:flex;flex-direction:column;justify-content:space-between;padding:var(--gutter)}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.hero__mark{display:block;color:#fff;font-size:var(--s-small);line-height:1.3;text-decoration:none}
.hero__mark img{width:clamp(132px,11vw,170px);height:auto}
.hero__mark span{display:block;margin-top:.55rem;color:var(--on-dark-muted)}
.hero__nav{display:flex;gap:clamp(1rem,2vw,1.75rem);font-size:var(--s-small);color:#fff}
.hero__nav a,.dock__nav a{text-decoration:none;position:relative;padding-block:6px}
.hero__nav a::after,.dock__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--aqua-300);transform:scaleX(0);transform-origin:right;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.hero__nav a:hover::after,.dock__nav a:hover::after{transform:scaleX(1);transform-origin:left}}
.menubtn{display:none;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border:0;background:rgba(11,15,15,.78);color:#fff;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:var(--s-body);letter-spacing:.03em;text-transform:uppercase;transition:background var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.menubtn:active{transform:scale(.97)}
.hero__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem 2.5rem;flex-wrap:wrap}
.hero h1{font-size:var(--s-display);max-width:15ch}
.hero__right{max-width:36ch;display:flex;flex-direction:column;gap:1.25rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:.6rem}
.hero__said{font-size:var(--s-lead);line-height:1.45}
.hero__acts{display:flex;gap:.75rem;flex-wrap:wrap}
.gbadge{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.5rem 1.05rem .5rem .65rem;border-radius:999px;background:rgba(11,15,15,.78);
  text-decoration:none;color:#fff;font-size:var(--s-small);line-height:1;
  transition:background var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.gbadge:active{transform:scale(.98)}
.gbadge__g{width:20px;height:20px;flex:0 0 auto}
.gbadge__num b{font-family:var(--display);font-weight:700;font-size:var(--s-lead);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.gbadge__stars{display:inline-flex;gap:1px}
.gbadge__stars svg{width:15px;height:15px;fill:var(--star)}
.gbadge__txt{color:var(--on-dark-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .gbadge:hover{background:rgba(11,15,15,.94)}
  .gbadge:hover .gbadge__stars svg{animation:starPop .5s var(--ease-out) both}
  .gbadge:hover .gbadge__stars svg:nth-child(2){animation-delay:50ms}
  .gbadge:hover .gbadge__stars svg:nth-child(3){animation-delay:100ms}
  .gbadge:hover .gbadge__stars svg:nth-child(4){animation-delay:150ms}
  .gbadge:hover .gbadge__stars svg:nth-child(5){animation-delay:200ms}
  .menubtn:hover{background:rgba(11,15,15,.94)}
}
@keyframes starPop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}
.hero__tools{display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.25rem)}
.hero__pause{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(11,15,15,.6);color:#fff;cursor:pointer;transition:background var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.hero__pause[hidden]{display:none}
.hero__pause:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.hero__pause:hover{background:rgba(11,15,15,.9)}}

/* Hero intro - the page's one authored entrance, and it plays on load, not on
   scroll. These keyframes are the no-JS and no-Motion path; the HERO table at
   the top of assets/js/home.js plays the same beats through Motion. Keep the
   two in step:
     frame    media 0     mark/nav .10
     message  line 1 .28  line 2 .40      (each line rises out of its own mask)
     support  meta .62    said .72        acts .84      ends 1.14            */
.hero__media{opacity:0;animation:heroFade .7s var(--ease-out) forwards}
.hero__mark,.hero__nav,.menubtn{opacity:0;animation:heroFade .28s var(--ease-out) .1s forwards}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln span{display:block;transform:translateY(105%);animation:lineUp .6s var(--ease-out) .28s forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.4s}
.hero__meta{opacity:0;transform:translateY(8px);animation:riseIn .4s var(--ease-out) .62s forwards}
.hero__said{opacity:0;transform:translateY(8px);animation:riseIn .4s var(--ease-out) .72s forwards}
/* readable and clickable from the first frame: a light lift, landing last */
.hero__acts{opacity:.55;animation:heroFade .3s var(--ease-out) .84s forwards}
@keyframes heroFade{to{opacity:1}}
@keyframes lineUp{to{transform:none}}
@keyframes riseIn{to{opacity:1;transform:none}}

/* Hero intro ownership - see kintore_hero_guard() in functions.php.
   .js-hero parks the keyframes so Motion can drive the same timeline;
   .js-hero-done is the backstop that snaps the hero visible if home.js never
   runs. Order matters: -done must come after -hero to win the cascade. */
.js-hero .hero__media,.js-hero .hero__mark,.js-hero .hero__nav,.js-hero .menubtn,
.js-hero .hero h1 .ln span,.js-hero .hero__meta,.js-hero .hero__said,.js-hero .hero__acts{animation:none}
.js-hero-done .hero__media,.js-hero-done .hero__mark,.js-hero-done .hero__nav,.js-hero-done .menubtn,
.js-hero-done .hero h1 .ln span,.js-hero-done .hero__meta,.js-hero-done .hero__said,.js-hero-done .hero__acts{opacity:1;transform:none;animation:none}

/* ---------- at a glance ---------- */
.glance{background:var(--ink);color:#fff;padding:clamp(2.25rem,5vw,3.25rem) var(--gutter)}
.glance__in{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:0}
.glance__in>div{padding-inline:clamp(1rem,2.2vw,2rem);border-left:1px solid var(--line-dark)}
.glance__in>div:first-child{padding-left:0;border-left:0}
.glance dt{font-family:var(--display);font-size:var(--s-mid);font-weight:600;line-height:1.15;letter-spacing:0.01em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.glance dd{margin-top:.4rem;font-size:var(--s-small);color:var(--on-dark-muted)}
/* hours read as a table: day on the left, time on the right, one row each */
.glance__hours dd{display:flex;justify-content:space-between;gap:1rem;max-width:17rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line-dark)}
.glance__hours dd+dd{margin-top:.5rem}
.glance__hours span{white-space:nowrap}
.glance__hours b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- training ---------- */
.train{padding-block:var(--gap);background:var(--paper)}
.faq__in,.blog__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.train h2,.clips__head h2,.gal h2,.faq h2,.blog h2,.about h2{font-size:var(--s-head)}
/* the heading and its intro are one unit: stacked, on the same left edge as the content below */
.train__head,.about__head{display:grid;gap:1.1rem;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.train__head p{color:var(--muted);font-size:var(--s-lead);line-height:1.5;max-width:52ch}
/* eight cells, two across. seven ways to train, and the one class in the eighth */
.fmt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,4vw,4rem)}
.fmt>div{position:relative;padding:1.35rem 0 1.45rem;border-top:1px solid var(--line)}
.fmt>div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
/* a teal rule draws itself over the row you are reading */
.fmt>div::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--teal-500);transform:scaleX(0);transform-origin:left;transition:transform var(--t-move) var(--ease-out)}
.fmt dt{font-family:var(--display);font-weight:600;font-size:var(--s-mid);letter-spacing:0.01em;text-transform:uppercase;color:var(--teal-600);line-height:1.15}
.fmt dd{margin-top:.35rem;color:var(--muted);line-height:1.6;transition:color var(--t-ui) var(--ease-out)}
.fmt__class dt span{display:inline-block;margin-left:.5rem;padding:.2rem .6rem;border-radius:999px;background:var(--aqua-100);color:var(--teal-700);font-family:var(--text);font-weight:500;font-size:var(--s-small);letter-spacing:0;text-transform:none;vertical-align:.2em;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .fmt>div:hover::after{transform:scaleX(1)}
  .fmt>div:hover dd{color:var(--ink)}
}

/* ---------- about ---------- */
.about{position:relative;background:var(--pine);color:#fff;padding-block:var(--gap);overflow:hidden;isolation:isolate}
/* two portraits sit in the ground itself, faded into it, behind the words */
.about__bg{position:absolute;inset:0;z-index:-1}
.about__bg img{position:absolute;top:0;height:100%;width:auto;max-width:none;object-fit:cover}
.about__bg-a{right:0;opacity:.4;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.about__bg-b{left:0;opacity:.16;filter:grayscale(1);-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 70%);mask-image:linear-gradient(270deg,transparent 0%,#000 70%)}
.about__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,34,36,.55) 0%,rgba(12,34,36,.84) 45%,rgba(12,34,36,.5) 100%)}
.about__head p{max-width:none}
.about__lead{font-size:var(--s-lead);line-height:1.5;max-width:52ch}
.about__body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);max-width:74rem}
.about__body h3{font-size:var(--s-mid);text-transform:uppercase;color:var(--teal-300);margin-bottom:.6rem}
.about__body p{color:var(--on-dark-muted)}
.about__values{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);max-width:74rem;padding-top:1.75rem;border-top:1px solid var(--line-dark)}
.about__values dt{font-family:var(--display);font-weight:600;font-size:var(--s-lead);letter-spacing:.01em;text-transform:uppercase}
.about__values dd{margin-top:.25rem;color:var(--on-dark-muted);font-size:var(--s-small);line-height:1.6}

/* ---------- clips ---------- */
.clips{padding-block:var(--gap);background:var(--paper)}
.clips__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.clips__head p{margin-top:1rem;color:var(--muted);max-width:44ch}
.cbtn{width:54px;height:54px;display:grid;place-items:center;border:0;cursor:pointer;background:var(--ink);color:#fff;
  transition:background var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.cbtn:active{transform:scale(.95)}
.cbtn__i{width:20px;height:20px;fill:currentColor}
@media (hover:hover) and (pointer:fine){.cbtn:hover{background:var(--teal-600)}}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
/* once JS has cloned the set, the row drives itself instead of being scrolled */
.rail.is-live{overflow:hidden;scroll-snap-type:none}
.rail.is-live .railtrack{display:flex;gap:14px;animation:reel 26s linear infinite}
.rail.is-live.is-paused .railtrack,.rail.is-live.is-hover .railtrack{animation-play-state:paused}
@keyframes reel{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 7px),0,0)}}
.rail figure{flex:0 0 clamp(200px,18vw,250px);scroll-snap-align:start;aspect-ratio:9/16;background:var(--ink);position:relative;overflow:hidden;transition:transform var(--t-move) var(--ease-out)}
.rail video,.rail img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){.rail figure:hover{transform:translateY(-6px)}}

/* ---------- gallery ---------- */
.gal{padding-block:var(--gap);background:var(--paper)}
.gal__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:2.5rem}
.gal__intro{margin-top:1.25rem;color:var(--muted);max-width:40ch}
.gal__filters{position:relative;display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;z-index:1;min-height:44px;padding:.65rem 1.15rem;border:0;border-radius:999px;cursor:pointer;background:transparent;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:var(--s-small);text-transform:uppercase;letter-spacing:0.03em;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),background var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.chip:active{transform:scale(.96)}
.chip.is-on{background:var(--teal-600);color:#fff;box-shadow:none}
/* with JS, one pill slides between the filters instead of each chip filling */
.gal__pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--teal-600);opacity:0;pointer-events:none}
.has-pill .gal__pill{opacity:1;transition:transform var(--t-move) var(--ease-out),width var(--t-move) var(--ease-out),height var(--t-move) var(--ease-out)}
.has-pill .chip.is-on{background:transparent}
@media (hover:hover) and (pointer:fine){.chip:not(.is-on):hover{box-shadow:inset 0 0 0 1px var(--ink)}}
/* a collage: natural proportions kept, one gap everywhere */
.gal__grid{columns:3;column-gap:14px}
.gal__item{position:relative;break-inside:avoid;margin:0 0 14px;overflow:hidden;background:var(--surface)}
.gal__item img{width:100%;height:auto;transition:transform .9s var(--ease-out),filter var(--t-move) var(--ease-out)}
.gal__item[hidden]{display:none}
.gal__item[role="button"]{cursor:zoom-in}
.gal__more{position:absolute;right:10px;top:10px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--aqua-300);color:var(--ink);
  opacity:0;transform:scale(.6);transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);pointer-events:none}
.gal__item:focus-visible .gal__more{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .gal__item[role="button"]:hover img{transform:scale(1.045)}
  .gal__item:hover .gal__more{opacity:1;transform:none}
}
.gal__note{margin-top:1.25rem;font-size:var(--s-small);color:var(--muted)}

/* ---------- faq ---------- */
.faq{padding-block:var(--gap);background:var(--paper);border-top:1px solid var(--line)}
.faq__intro{margin-top:1.5rem;color:var(--muted);max-width:36ch}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.3rem 0;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item h3{font-size:var(--s-mid);transition:color var(--t-ui) var(--ease-out)}
.faq__item summary .i{width:1.5rem;height:1.5rem;color:var(--teal-600);transition:transform var(--t-move) var(--ease-out)}
.faq__item[open] summary .i{transform:rotate(180deg)}
.faq__item[open] h3{color:var(--teal-600)}
.faq__a{padding:0 3rem 1.6rem 0;color:var(--muted);max-width:62ch}
/* the answer opens to its own height where the browser can animate that */
.faq__item::details-content{block-size:0;overflow:clip;transition:block-size var(--t-move) var(--ease-out),content-visibility var(--t-move) allow-discrete}
.faq__item[open]::details-content{block-size:auto}
@media (hover:hover) and (pointer:fine){.faq__item summary:hover h3{color:var(--teal-600)}}

/* ---------- blog ---------- */
.blog{padding-block:var(--gap);background:var(--surface)}
.blog__intro{margin-top:1.5rem;color:var(--muted);max-width:36ch}
.blog__all{margin-top:1.5rem;font-family:var(--display);font-weight:600;font-size:var(--s-body);text-transform:uppercase;letter-spacing:0.02em}
.blog__all a{color:var(--teal-600);text-decoration:none;display:inline-flex;align-items:center;gap:.45em;min-height:44px}
.blog__list{display:grid;gap:2.25rem;margin:0;padding:0;list-style:none}
.blog__list a{display:block;text-decoration:none;transition:transform var(--t-move) var(--ease-out)}
.blog__list h3{font-size:var(--s-mid);transition:color var(--t-ui) var(--ease-out)}
.blog__list p{margin-top:.6rem;color:var(--muted);max-width:52ch}
.blog__meta{display:block;margin-top:.7rem;font-size:var(--s-small);color:var(--muted)}
.blog__slot{min-height:5.5rem;display:flex;align-items:center;background:var(--paper)}
.blog__slot span{padding-inline:1.25rem;font-family:var(--display);font-weight:600;font-size:var(--s-body);text-transform:uppercase;letter-spacing:0.02em;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .blog__list a:hover{transform:translateX(8px)}
  .blog__list a:hover h3{color:var(--teal-600)}
}

/* ---------- visit ---------- */
/* the name on the glass, framed with room around it, and how to find it beside it */
.visit{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:center;
  padding:clamp(3rem,7vw,6.5rem) var(--gutter);background:var(--ink)}
.visit>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.visit__card{justify-self:start;margin:0;width:min(440px,100%);
  background:var(--paper);padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:1.15rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.visit__card h2{font-size:var(--s-mid)}
.visit__card address{font-style:normal;line-height:1.6}
.visit__rows{display:grid;gap:.6rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.visit__rows div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--s-small)}
.visit__rows dt{color:var(--muted)}
.visit__rows dd{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.visit__acts{display:grid;gap:.6rem}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:#fff;padding:var(--gap) var(--gutter) 2.5rem}
.ft__top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}
.ft__logo{width:clamp(160px,14vw,210px);height:auto}
.ft__social{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0;padding:0;list-style:none}
.ft__social a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 1rem 0 .85rem;border-radius:999px;text-decoration:none;font-size:var(--s-small);
  box-shadow:inset 0 0 0 1px var(--line-dark);transition:background var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.ft__social a:active{transform:scale(.96)}
.ft__social .i{transition:transform var(--t-move) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ft__social a:hover{background:var(--aqua-300);color:var(--ink);box-shadow:none}
  .ft__social a:hover .i{transform:rotate(-8deg) scale(1.12)}
}
.ft__menu{display:flex;flex-wrap:wrap;gap:.25rem 2rem;margin:0 0 3rem;padding:0;list-style:none;font-family:var(--display);font-weight:600;font-size:var(--s-body);text-transform:uppercase;letter-spacing:0.02em}
.ft__menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:color var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ft__menu a:hover,.ft__biz a:hover{color:var(--teal-300)}}
.ft__biz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;font-size:var(--s-small);color:var(--on-dark-muted)}
.ft__biz h3{font-size:var(--s-body);color:#fff;margin-bottom:.85rem}
.ft__biz address{font-style:normal;line-height:1.7}
.ft__biz p{line-height:1.7}
.ft__biz a{display:inline-flex;align-items:center;min-height:44px;color:#fff;transition:color var(--t-ui) var(--ease-out)}
.ft__hours{display:flex;flex-wrap:wrap;gap:.1rem .9rem}
.ft__hours span:first-child{min-width:9.5em}
.ft__hours span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff}
.ft__legal{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);font-size:var(--s-small);color:var(--on-dark-muted)}

/* ---------- dock: the bar that follows you once the hero is gone ---------- */
.dock{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--dock-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-inline:var(--gutter);background:rgba(11,15,15,.96);color:#fff;border-bottom:1px solid var(--line-dark);
  transform:translateY(-101%);visibility:hidden;transition:transform .32s var(--ease-out),visibility 0s .32s}
.dock.is-on{transform:none;visibility:visible;transition:transform .32s var(--ease-out),visibility 0s}
.dock__mark img{width:118px;height:auto}
.dock__nav{display:flex;gap:clamp(1rem,2vw,1.75rem);font-size:var(--s-small)}
.dock__acts{display:flex;align-items:center;gap:.5rem}
.dock__act{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:42px;padding:0 1rem;border:0;background:transparent;color:#fff;cursor:pointer;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:var(--s-body);letter-spacing:.03em;text-transform:uppercase;line-height:1;
  box-shadow:inset 0 0 0 1px var(--line-dark);transition:background var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.dock__act:active{transform:scale(.96)}
.dock__act--go{background:var(--aqua-300);color:var(--ink);box-shadow:none}
.dock__act[href*="maps"],.dock__act--menu{display:none}
@media (hover:hover) and (pointer:fine){
  .dock__act:hover{background:rgba(255,255,255,.12)}
  .dock__act--go:hover{background:var(--aqua-200)}
}

/* ---------- menu sheet ---------- */
.menu{position:fixed;inset:0 0 0 auto;width:min(100%,430px);height:100dvh;max-height:none;max-width:none;margin:0;padding:var(--gutter);border:0;background:var(--pine);color:#fff;
  flex-direction:column;gap:2rem;overflow-y:auto;
  opacity:0;transform:translateX(24px);
  transition:opacity .28s var(--ease-out),transform .34s var(--ease-out),overlay .34s allow-discrete,display .34s allow-discrete}
.menu[open]{display:flex;opacity:1;transform:none}
@starting-style{.menu[open]{opacity:0;transform:translateX(24px)}}
.menu::backdrop{background:rgba(11,15,15,0);transition:background .34s var(--ease-out),overlay .34s allow-discrete,display .34s allow-discrete}
.menu[open]::backdrop{background:rgba(11,15,15,.62)}
@starting-style{.menu[open]::backdrop{background:rgba(11,15,15,0)}}
.menu__top{display:flex;align-items:center;justify-content:space-between}
.menu__top img{width:132px;height:auto}
.menu__close,.lb__btn{width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  transition:background var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.menu__close:active,.lb__btn:active{transform:scale(.92)}
.menu__close .i,.lb__btn .i{width:1.35rem;height:1.35rem}
@media (hover:hover) and (pointer:fine){.menu__close:hover,.lb__btn:hover{background:var(--aqua-300);color:var(--ink)}}
.menu__nav{display:grid;margin-block:auto}
.menu__nav a{display:block;padding:.5rem 0;font-family:var(--display);font-weight:700;font-size:clamp(2rem,9vw,2.75rem);line-height:1.1;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--line-dark);transition:color var(--t-ui) var(--ease-out),padding-left var(--t-move) var(--ease-out)}
.menu__nav a:active{color:var(--aqua-300)}
@media (hover:hover) and (pointer:fine){.menu__nav a:hover{color:var(--aqua-300);padding-left:.4rem}}
/* the links arrive one after another - it is a list, opened on request */
.menu[open] .menu__nav a{animation:menuIn .45s var(--ease-out) both}
.menu[open] .menu__nav a:nth-child(2){animation-delay:35ms}
.menu[open] .menu__nav a:nth-child(3){animation-delay:70ms}
.menu[open] .menu__nav a:nth-child(4){animation-delay:105ms}
.menu[open] .menu__nav a:nth-child(5){animation-delay:140ms}
.menu[open] .menu__nav a:nth-child(6){animation-delay:175ms}
.menu[open] .menu__nav a:nth-child(7){animation-delay:210ms}
@keyframes menuIn{from{opacity:0;transform:translateX(18px)}}
.menu__foot{display:grid;gap:.6rem;justify-items:start}
.menu__foot .btn{width:100%}
.menu__foot .status{background:rgba(255,255,255,.08);margin-bottom:.4rem}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(11,15,15,.97);color:#fff;
  opacity:0;transition:opacity .25s var(--ease-out),overlay .25s allow-discrete,display .25s allow-discrete}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr);opacity:1}
@starting-style{.lb[open]{opacity:0}}
.lb::backdrop{background:transparent}
.lb__bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem var(--gutter)}
.lb__count{font-family:var(--display);font-weight:600;font-size:var(--s-lead);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--on-dark-muted)}
.lb__count b{color:var(--aqua-300);font-weight:600}
.lb__fig{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:0 clamp(1rem,7vw,6rem) 1.5rem}
.lb__fig img{max-width:100%;max-height:calc(100dvh - 11rem);width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.lb__fig figcaption{max-width:60ch;text-align:center;font-size:var(--s-small);color:var(--on-dark-muted);min-height:1.6em}
.lb__nav{position:absolute;top:50%;margin-top:-24px}
.lb__nav--prev{left:var(--gutter)}
.lb__nav--next{right:var(--gutter)}
::view-transition-group(lb){animation-duration:.42s;animation-timing-function:var(--ease-out)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

/* ============ tablet ============ */
@media (max-width:1024px){
  .hero__nav,.dock__nav{display:none}
  .menubtn{display:inline-flex}
  .dock__act--menu{display:inline-flex}
}
@media (max-width:980px){
  .train__head,.about__head,.blog__in,.faq__in,.gal__in,.ft__top{grid-template-columns:1fr}
  .glance__in{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.75rem}
  .glance__hours{grid-column:1/-1}
  .glance__in>div:nth-child(2){padding-left:0;border-left:0}
  .visit{grid-template-columns:1fr}
  .visit__card{width:100%;max-width:560px}
  .gal__grid{columns:2}
  .gal__in{align-items:start}
  .ft__biz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__bottom{flex-direction:column;align-items:flex-start}
  .clips__head p,.train__head p,.faq__intro,.blog__intro{max-width:none}
  .about__body,.about__values{grid-template-columns:1fr;gap:1.5rem}
  .about__bg-b{display:none}
  .about__bg-a{opacity:.3}
  .about__bg::after{background:rgba(12,34,36,.6)}
  .faq__a{padding-right:0}
}

/* ============ phone ============ */
@media (max-width:760px){
  :root{--dock-h:0px}
  .hero,.hero__inner{min-height:max(100svh,600px)}
  .hero__right{max-width:none;width:100%}
  .hero__acts .btn{flex:1 1 auto}
  .fmt{grid-template-columns:1fr}
  .fmt>div:nth-last-child(2){border-bottom:0}
  .glance__hours dd{max-width:none}
  .rail figure{flex-basis:min(62vw,240px)}
  .gal__grid{column-gap:8px}
  .gal__item{margin-bottom:8px}
  /* the filters become one row you can swipe, rather than three rows of pills */
  .gal__filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block:2px;scrollbar-width:none}
  .gal__filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  .visit{padding-block:var(--gutter) 0;gap:0}
  .visit__card{max-width:none;margin-inline:calc(var(--gutter) * -1);width:auto;box-shadow:none}
  .glance__in{grid-template-columns:1fr;row-gap:0}
  .glance__in>div,.glance__in>div:nth-child(2){padding:1.1rem 0;border-left:0;border-top:1px solid var(--line-dark)}
  .glance__in>div:first-child{padding-top:0;border-top:0}
  .ft{padding-bottom:calc(2.5rem + 72px + env(safe-area-inset-bottom))}
  .ft__biz{grid-template-columns:1fr;gap:2rem}
  .lb__nav{top:auto;bottom:1rem;margin:0}
  .lb__fig{padding-bottom:5rem}

  /* on a phone the dock moves under the thumb and becomes the four things people come for */
  .dock{top:auto;bottom:0;height:auto;padding:0;border-bottom:0;border-top:1px solid var(--line-dark);transform:translateY(101%)}
  .dock__mark{display:none}
  .dock__acts{width:100%;gap:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom)}
  .dock__act,.dock__act[href*="maps"],.dock__act--menu{display:flex;flex-direction:column;gap:.3rem;min-height:62px;padding:.5rem .25rem;box-shadow:none;font-size:.8125rem;letter-spacing:.04em}
  .dock__act .i{width:1.35rem;height:1.35rem}
  .dock__act+.dock__act{border-left:1px solid var(--line-dark)}
}
@media (max-width:400px){
  .gbadge__txt{white-space:normal}
  .hero__acts .btn{padding-inline:1em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__vid{display:none}
  .hero__media,.hero__mark,.hero__nav,.menubtn,.hero__meta,.hero__said,.hero__acts,.hero h1 .ln span,
  .js-hero .hero__media,.js-hero .hero__mark,.js-hero .hero__nav,.js-hero .menubtn,.js-hero .hero__meta,.js-hero .hero__said,.js-hero .hero__acts,.js-hero .hero h1 .ln span{opacity:1;transform:none;animation:none}
  .rail.is-live .railtrack{animation:none}
  .rail.is-live{overflow-x:auto}
  .status.is-open .status__dot::after,.gbadge:hover .gbadge__stars svg,.menu[open] .menu__nav a{animation:none}
  /* movement goes; colour and opacity stay, because they still say "that worked" */
  .btn,.chip,.cbtn,.menubtn,.gbadge,.dock__act,.ft__social a,.menu__close,.lb__btn,.hero__pause{transform:none !important}
  .btn--go::after{display:none}
  .arrow,.gal__item img,.rail figure,.blog__list a,.ft__social .i,.fmt>div::after,.gal__more{transition:none;transform:none !important}
  /* the chevron still flips - it says whether the answer is open - it just does not turn */
  .faq__item summary .i{transition:none}
  .has-pill .gal__pill{transition:none}
  .faq__item::details-content{transition:none}
  .dock,.menu,.menu::backdrop,.lb{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}