/* ==========================================================================
   QualityLife Rolfing — faithful rebuild of the Wix original
   Geometry measured from the live site. Wix canvas = 1265px wide with a
   980px content column centred in it. Page is built from fixed-height
   "strips"; on desktop the contents are absolutely placed inside each strip
   exactly as Wix positions them. Mobile falls back to normal flow.
   ========================================================================== */

:root {
  --accent:     #0088cb;   /* headings, links, buttons                     */
  --accent-alt: #3588cc;   /* the "Improve Your" list                      */
  --ink:        #272c2d;
  --body:       #495356;
  --muted:      #615f5e;
  --header-ink: #4e585b;
  --footer-ink: #302f2f;
  --btn-bg:     #cad2d5;
  --cream:      #f9f8f3;
  --white:      #fff;

  --canvas: 1265px;        /* the Wix site canvas                          */
  --col:     980px;        /* content column centred inside the canvas     */

  --serif: Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--body);
  font-family: var(--serif); line-height: 1.4; overflow-x: hidden;
}
img { max-width: 100%; display: block; border: 0; }
a { color: var(--accent); text-decoration: none; }

.skip { position: absolute; left: -9999px; top: 0; background: #fff;
  color: var(--accent); padding: 10px 16px; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }

/* -------------------------------------------------------------- header -- */
.site-header { position: relative; z-index: 60; background: var(--white); height: 38px; }
.site-header__inner {
  max-width: var(--col); margin-inline: auto; height: 38px;
  display: flex; align-items: center; gap: 9px;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand img { width: 36px; height: 32px; object-fit: contain; }
.brand__name { font-size: 20px; color: var(--header-ink); line-height: 1; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
.site-nav a {
  font-size: 15px; color: var(--accent); line-height: 1;
  transition: opacity .25s var(--ease);
}
.nav-toggle { display: none; margin-left: auto; background: none; border: 0;
  padding: 4px; cursor: pointer; color: var(--ink); }

/* --------------------------------------------------------------- strips - */
.strip { position: relative; overflow: hidden; background: var(--white); }
.strip--hero    { height: 958px; }
.strip--improve { height: 429px; }
.strip--runner  { height: 660px; }
.strip--phil    { height: 443px; }
.strip--cyclist { height: 673px; }
.strip--plain   { background: var(--white); }

/* The parallax layer: oversized, translated on scroll by main.js.
   Wix renders every strip photo at opacity .29 over a white strip — that
   washed-out treatment is the site's whole visual signature. */
/* Wix DOES parallax these. Verified by scrolling the live site: at the same
   band-relative offset, different parts of the photo are visible at different
   scroll positions. Do not be fooled by the bgMedia_* container — that stays
   at translateY(0); it is the image INSIDE it that moves. Inset beyond the
   strip on both sides so the travel never exposes an edge. */
/* inset:0 means the photo is framed EXACTLY like the strip at scale 1 —
   fully zoomed out, no crop. Coverage during travel is bought by scaling
   in main.js (scale >= 1 + 2*|shift|/height) rather than by pre-inflating
   the box, which is what made the hero look pre-zoomed. */
.strip__bg {
  position: absolute; inset: 0; z-index: 0;
  opacity: .29; will-change: transform;
}
.strip__bg img { width: 100%; height: 100%; object-fit: cover; }
.strip--hero    .strip__bg img { object-position: 42% 42%; }
.strip--runner  .strip__bg img { object-position: 50% 50%; }
.strip--cyclist .strip__bg img { object-position: 50% 50%; }

/* the 980px content column, centred, positioned context for absolute kids */
.strip__content {
  position: relative; z-index: 1;
  width: var(--col); max-width: 100%;
  height: 100%; margin-inline: auto;
  left: 8px;   /* Wix's column sits 8px right of true centre */
}

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: flex; align-items: center; justify-content: center;
  background: var(--btn-bg); color: var(--accent);
  border: 0; border-radius: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
  font-family: var(--serif); font-weight: 400; text-align: center;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

/* ---------------------------------------------------------------- hero -- */
.hero__content { text-align: center; }
.hero__mark {
  position: absolute; top: 138px; left: 365px;
  width: 236px; height: 224px; object-fit: contain;
}
.hero__wordmark {
  position: absolute; top: 345px; left: 0; right: 0;
  margin: 0; font-size: 100px; line-height: 1; font-weight: 400;
  color: var(--muted); letter-spacing: -0.5px;
}
/* the rule between the wordmark and "Rolfing" */
.hero__wordmark::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -16px; width: 420px; height: 1px; background: #9a9a9a;
}
.hero__sub {
  position: absolute; top: 486px; left: 0; right: 0;
  margin: 0; font-size: 30px; line-height: 1; color: var(--muted); font-weight: 400;
}
.hero__sub sup { font-size: 15px; vertical-align: super; }
.hero__tagline {
  position: absolute; top: 547px; left: 0; right: 0;
  margin: 0; font-size: 25px; line-height: 1.12; font-weight: 700;
  letter-spacing: 3.75px; color: var(--accent);
}
.btn--hero {
  position: absolute; top: 604px; left: 50%; margin-left: -93px;
  width: 186px; height: 39px; font-size: 20px;
}
.hero__chevron {
  position: absolute; top: 660px; left: 50%; margin-left: -19.5px;
  width: 39px; color: var(--accent);
  animation: chev 2.4s var(--ease) infinite;
}
.hero__chevron svg { display: block; }
@keyframes chev {
  0%, 62%, 100% { transform: translateY(0); }
  76%           { transform: translateY(9px); }
}

/* ------------------------------------------------------------- improve -- */
.improve { position: absolute; top: 93px; left: 0; right: 0; }
.improve__head {
  margin: 0; font-size: 27px; line-height: 1.37;
  color: var(--accent-alt); text-align: center;
}
.improve__list {
  margin: 0 auto 7px; padding: 0; list-style: none;
  font-size: 27px; line-height: 1.37; color: var(--accent-alt);
  /* must stay wide enough that "Coordination & Balance" never wraps */
  width: 306px; text-align: left; white-space: nowrap;
}
.improve__list li { position: relative; padding-left: 22px; }
.improve__list li::before {
  content: "\2022"; position: absolute; left: 0; top: -1px;
}
.improve__copy {
  margin: 0 auto; width: 536px; max-width: 100%;
  font-size: 20px; line-height: 1.45; color: var(--muted); text-align: left;
  text-indent: 30px;
}

/* --------------------------------------------------------------- about -- */
.about__text { position: absolute; top: 187px; left: 6px; width: 660px; }
.about__title {
  margin: 0 0 8px; font-size: 35px; line-height: 1.2; font-weight: 400; color: var(--accent);
}
.about__text p {
  margin: 0 0 4px; font-size: 20px; line-height: 20px; color: var(--body);
  max-width: 520px;
}
.btn--learn {
  position: absolute; top: 174px; left: 152px;
  width: 213px; height: 52px; font-size: 31px;
}
.about__figure { position: absolute; top: 69px; left: 686px; margin: 0; width: 271px; }

/* ---------------------------------------------------------------- phil -- */
.phil__portrait {
  position: absolute; top: 80px; left: 75px;
  width: 230px; height: 228px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.phil__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.phil__body { position: absolute; top: 119px; left: 343px; width: 495px; }
.phil__name {
  margin: 0 0 11px 9px; font-size: 35px; line-height: 1.1; font-weight: 400; color: var(--accent);
}
.phil__name strong { font-weight: 700; }
.phil__bio { margin: 0; font-size: 18px; line-height: 1.16; color: var(--muted); }

/* ----------------------------------------------------------------- cta -- */
.btn--cta {
  position: absolute; top: 293px; left: 276px;
  width: 413px; height: 87px; font-size: 20px;
}

/* -------------------------------------------------------------- footer -- */
.site-footer { background: var(--white); padding: 11px 0 72px; }
.site-footer__inner {
  width: var(--col); max-width: 100%; margin-inline: auto; padding-left: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.site-footer .ig img { width: 39px; height: 39px; }
.servicemark { margin: 0 0 0 4px; font-size: 11px; color: var(--footer-ink); }
.servicemark a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------- inner pages -- */
.wrap { max-width: var(--col); margin-inline: auto; padding-inline: 20px; }
.page { padding: 56px 0 20px; }
.page__title { font-size: 35px; color: var(--accent); margin: 0 0 24px; font-weight: 400; }
.prose { max-width: 900px; }
.prose p { font-size: 18px; line-height: 1.55; color: var(--body); margin: 0 0 20px; }
.faq { margin-top: 46px; }
.faq__title { font-size: 32px; color: var(--accent); margin: 0 0 20px; font-weight: 400; }
.faq__q { font-size: 22px; color: var(--accent); margin: 30px 0 10px; font-weight: 400; }
.cta-band { background: var(--white); text-align: center; padding: 44px 20px 60px; }
.cta-band .btn { width: 413px; max-width: 100%; height: 87px; font-size: 20px; margin-inline: auto; }

/* ---------------------------------------------------------- booking ----
   Two columns, matching the original at 1280px: scheduler left (x=150,
   w=649), Buy-now card right (x=819, w=280) with the $300 line flush
   underneath it. 649 + 20 gutter + 280 = 949 inside the 980 column.      */
.booking {
  width: var(--col); max-width: 100%; margin-inline: auto;
  position: relative; left: 8px;
  display: grid; grid-template-columns: 649px 280px; gap: 20px;
  align-items: start; padding: 32px 0 34px;
}
/* Cross-origin, so the frame cannot auto-size to its content — it needs a
   height generous enough for the tallest step (the calendar). The original
   was only 365px because it held a compact list, not the whole flow. */
.booking__frame iframe { width: 100%; height: 720px; border: 0; display: block; }
.booking__aside { padding-top: 24px; }   /* card sits 24px below the frame */
.booking__promo {
  margin: 1px 0 0;
  /* the one non-Georgia string on the site — Wix sets Open Sans here */
  font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 28px; line-height: 1.34; font-weight: 400; color: var(--ink);
}
.booking__amt { color: var(--accent); }
.square-buy {
  display: flex; flex-direction: column; align-items: center;
  /* 35px reproduces the padding the original's 164px-tall embed iframe
     added below the 129px card, putting the $300 line back at y=259 */
  margin: 0 0 35px; width: 259px; background: #fff;
  border: 1px solid rgba(0,0,0,.1); border-radius: 10px;
  font-family: "SQ Market", Helvetica, Arial, sans-serif; padding: 20px;
}
.square-buy p { font-size: 18px; line-height: 20px; margin: 0 0 14px; color: var(--ink); }
.square-buy a {
  display: inline-block; font-size: 18px; line-height: 48px; height: 48px;
  color: #fff; min-width: 212px; background: #006aff; text-align: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; border-radius: 6px;
}

/* ------------------------------------------------- google reviews badge -
   Floating pill, bottom-left, matching the widget the Wix site rents.
   Data comes from a static JSON refreshed server-side — no API key ships
   to the browser. "Google" branding stays visible per Maps Platform terms. */
.gwrap {
  position: fixed; left: 20px; bottom: 22px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* the expanding reviews panel */
.gpanel {
  width: 340px; max-width: calc(100vw - 40px);
  background: #fff; border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.10);
  overflow: hidden; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(8px) scale(.985); transform-origin: bottom left;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.gpanel.is-in { opacity: 1; transform: none; }
.gpanel__head {
  display: flex; align-items: center; gap: 14px; padding: 14px 12px 14px 16px;
  border-bottom: 1px solid #e8eaed; flex: 0 0 auto;
}
.gpanel__g { display: flex; }
.gpanel__g svg { width: 30px; height: 30px; }
.gpanel__summary { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.gpanel__row { display: flex; align-items: center; gap: 8px; }
.gpanel__score { font-size: 20px; font-weight: 600; color: #e8710a; line-height: 1; }
.gpanel__stars { display: inline-flex; gap: 1px; }
.gpanel__stars svg { width: 17px; height: 17px; }
.gpanel__count { font-size: 12px; letter-spacing: .04em; color: #5f6368; }
.gpanel__close {
  background: none; border: 0; padding: 6px; cursor: pointer; color: #5f6368;
  border-radius: 50%; display: flex; transition: background-color .2s var(--ease);
}
.gpanel__scroll { overflow-y: auto; max-height: 430px; overscroll-behavior: contain; }
.gpanel__list { list-style: none; margin: 0; padding: 0; }
.gpanel__empty { margin: 0; padding: 26px 16px; font-size: 13px; color: #5f6368; text-align: center; }
.gpanel__all {
  display: block; padding: 13px 16px; border-top: 1px solid #e8eaed;
  font-size: 13px; color: #1a73e8; text-decoration: none; text-align: center;
  transition: background-color .2s var(--ease);
}

/* one review */
.grev {
  position: relative; display: flex; gap: 12px;
  padding: 16px 16px 18px; border-bottom: 1px solid #e8eaed;
}
.grev:last-child { border-bottom: 0; }
.grev__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
}
.grev__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .02em;
}
.grev__main { min-width: 0; flex: 1; padding-right: 26px; }
.grev__name { font-size: 15px; font-weight: 500; color: #202124; }
.grev__meta { display: flex; align-items: center; gap: 8px; margin: 3px 0 7px; }
.grev__stars { display: inline-flex; gap: 1px; }
.grev__stars svg { width: 15px; height: 15px; }
.grev__stars svg path { fill: #202124; }
.grev__date { font-size: 13px; color: #5f6368; }
.grev__text { margin: 0; font-size: 14px; line-height: 1.45; color: #3c4043; }
.grev__more {
  background: none; border: 0; padding: 2px 0 0; cursor: pointer;
  font: inherit; font-size: 14px; color: #1a73e8;
}
.grev__g { position: absolute; top: 16px; right: 14px; display: flex; }
.grev__g svg { width: 18px; height: 18px; }

.gbadge {
  position: relative;   /* .gbadge__g is absolutely placed inside it */
  border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 22px 0 60px;
  background: #fff; border-radius: 999px;
  box-shadow: 0 3px 14px rgba(0,0,0,.17), 0 1px 3px rgba(0,0,0,.09);
  text-decoration: none; color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .25s var(--ease);
}
.gbadge.is-in { opacity: 1; transform: none; }
.gbadge__g {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
.gbadge__body { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.gbadge__score { font-size: 17px; font-weight: 600; line-height: 1; }
.gbadge__stars { display: inline-flex; gap: 1px; }
.gbadge__count { font-size: 14px; color: #5f6368; }

@media (prefers-reduced-motion: reduce) {
  .gbadge { transition: none; opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .gwrap { left: 12px; bottom: 12px; right: 12px; }
  .gpanel { width: 100%; }
  .gpanel__scroll { max-height: 52vh; }
  .gbadge { height: 44px; padding: 0 16px 0 50px; gap: 8px; align-self: flex-start; }
  .gbadge__g { width: 40px; height: 40px; }
  .gbadge__g svg { width: 22px; height: 22px; }
  .gbadge__score { font-size: 15px; }
  .gbadge__count { font-size: 12px; }
  .gbadge__stars svg { width: 11px; height: 11px; }
}

/* ------------------------------------------------------ scroll reveals --
   Wix uses exactly one effect here: "motion-fadeIn" — pure opacity, NO
   transform — 1.2s on an easeInOutSine curve. It is applied to only five
   blocks (see index.html). The hero, the "What is Rolfing" copy and the
   final CTA are deliberately NOT animated. Don't add lift or stagger:
   the original has neither.                                              */
.reveal { opacity: 0; }
/* fill-mode must be a SINGLE keyword — "backwards forwards" is invalid and
   silently voids the whole shorthand, leaving the element stuck at opacity 0 */
.reveal.is-in { animation: motion-fadeIn 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) both; }
@keyframes motion-fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* the Learn More button carries a second animation, motion-expandIn */
.reveal--expand.is-in {
  animation: motion-fadeIn 1.2s linear both,
             motion-expandIn 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
@keyframes motion-expandIn { from { transform: scale(.8); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.is-in, .reveal--expand.is-in { animation: none; opacity: 1; transform: none; }
  .hero__chevron { animation: none; }
}

/* =========================================================== responsive == */
@media (max-width: 1100px) {
  :root { --col: 100%; }
  .site-header__inner, .site-footer__inner { padding-inline: 20px; }
  .strip__content { padding-inline: 20px; }
  .hero__mark { left: 50%; margin-left: -118px; }
  .about__text { left: 20px; width: calc(100% - 320px); }
  .about__figure { left: auto; right: 20px; }
  /* .btn--learn's top:174px is calibrated for the 1265px canvas, where the
     title fits on one line. Once the column narrows the title wraps to two,
     the copy grows past 174px, and the button lands on top of the last
     paragraph. Let it flow after the text instead of holding a fixed offset.
     Keeps the 152px indent so the layout still reads the same. Full desktop
     (>1100px) is untouched. */
  .btn--learn { position: static; margin: 20px 0 0 152px; }
  .btn--cta { left: 50%; margin-left: -206px; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 12px 24px rgba(0,0,0,.08); z-index: 80;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 6px 20px 14px; }
  .site-nav a { display: block; padding: 12px 0; font-size: 17px; }

  /* strips become auto-height and their contents return to normal flow */
  .strip, .strip--hero, .strip--improve, .strip--runner,
  .strip--phil, .strip--cyclist { height: auto; }
  .strip__content { height: auto; left: 0; }
  .strip__bg { position: absolute; inset: 0; }
  .strip--improve .strip__bg, .strip--phil .strip__bg { display: none; }

  .hero__content { padding: 47px 20px 44px; }
  .hero__mark, .hero__wordmark, .hero__sub, .hero__tagline,
  .btn--hero, .hero__chevron { position: static; margin-left: 0; }
  .hero__mark { width: 127px; height: 125px; margin-inline: auto; }
  .hero__wordmark { font-size: 44px; margin-top: 6px; }
  .hero__wordmark::after { width: 200px; bottom: -8px; }
  .hero__sub { font-size: 24px; margin-top: 20px; }
  .hero__sub sup { font-size: 14px; }
  .hero__tagline { font-size: 14px; letter-spacing: 2px; margin-top: 20px; }
  .btn--hero { width: 168px; height: 36px; font-size: 18px; margin: 18px auto 0; }
  /* an <a> is inline, so auto margins do nothing until it is a block box */
  .hero__chevron { display: block; width: 39px; margin: 22px auto 0; }

  .improve { position: static; padding: 34px 0 30px; }
  .improve__head { font-size: 19px; }
  .improve__list { font-size: 19px; width: 220px; }
  /* mobile centres this copy; desktop keeps it left-aligned and indented */
  .improve__copy { font-size: 15px; width: 100%; text-indent: 0; text-align: center; }

  .about { display: flex; flex-direction: column; }
  .about__text, .about__figure, .btn--learn { position: static; width: auto; }
  .about__text { padding: 34px 0 0; order: 1; text-align: center; }
  .about__title { font-size: 23px; }
  .about__text p { font-size: 15px; line-height: 1.35; margin-bottom: 12px;
                   max-width: none; margin-inline: auto; }
  .btn--learn { width: 168px; height: 44px; font-size: 27px; margin: 18px auto 0; }
  .about__figure { order: 2; width: 140px; margin: 24px auto 34px; }
  .about__figure img { width: 140px; height: auto; }

  .phil { display: flex; flex-direction: column; align-items: center;
          text-align: center; padding: 34px 0; gap: 16px; }
  .phil__portrait, .phil__body { position: static; width: auto; }
  .phil__portrait { width: 150px; height: 150px; }
  .phil__body { max-width: 100%; }
  .phil__name { font-size: 20px; }
  .phil__bio { font-size: 11px; line-height: 1.5; }

  .cta { padding: 40px 0; display: flex; justify-content: center; }
  .btn--cta { position: static; width: 260px; height: 60px; font-size: 18px; margin: 0; }

  .site-footer__inner { align-items: center; text-align: center; }
  .servicemark { font-size: 9px; margin-left: 0; }

  /* FAQ page: centre everything on mobile only — desktop stays left-aligned */
  .page { padding: 34px 0 10px; text-align: center; }
  .page__title { font-size: 23px; }
  .prose { max-width: none; }
  .prose p { font-size: 15px; }
  .faq__title { font-size: 22px; }
  .faq__q { font-size: 17px; }
  /* stack: scheduler, then the buy card and the $300 line */
  .booking { grid-template-columns: 1fr; gap: 28px; left: 0; padding: 24px 20px 30px; }
  /* Square's booking page pins its own footer to the bottom of whatever
     height it is given, so an over-tall frame shows as dead white space.
     Track the viewport instead of a fixed value; taller steps (the
     calendar) scroll inside the frame. */
  .booking__frame iframe { height: 76vh; min-height: 520px; max-height: 680px; }
  /* on mobile the offer sits ABOVE the scheduler; desktop keeps it beside */
  .booking__aside { order: -1; padding-top: 0; display: flex;
                    flex-direction: column; align-items: center; gap: 16px; }
  .booking__frame { order: 1; }
  /* the desktop spacer below the card is redundant against the flex gap */
  .square-buy { margin-bottom: 0; }
  .booking__promo { font-size: 19px; text-align: center; margin: 0; }
  .cta-band .btn { width: 260px; height: 60px; font-size: 18px; }
}

/* ==================================================== interaction states ==
   Split out deliberately:

   1. PRESS feedback (:active) — invisible at rest, so it costs no fidelity
      against the Wix original while making every control feel responsive.
   2. HOVER — gated behind a hover-capable pointer. Ungated :hover fires on
      touch tap and then STICKS after navigation, which was a real bug on
      the nav links.
   3. FOCUS — a real ring, separate from hover, so keyboard users can tell
      where they are. Never rendered for mouse users.
   ========================================================================== */

/* ---- 1. press ---------------------------------------------------------- */
/* NOTE: `transition` is not additive — declaring it again REPLACES the
   earlier one. Elements that already transition colour must restate it
   here alongside transform, or the hover fade is silently lost. */
.btn {
  transition: background-color .4s var(--ease), color .4s var(--ease),
              transform 160ms ease-out;
}
.square-buy a {
  transition: background-color .2s var(--ease), transform 160ms ease-out;
}
.gpanel__close {
  transition: background-color .2s var(--ease), transform 160ms ease-out;
}
.grev__more,
.nav-toggle { transition: transform 160ms ease-out; }

.btn:active,
.square-buy a:active { transform: scale(0.97); }
.gbadge:active       { transform: scale(0.985); }  /* large pill, subtler */
.gpanel__close:active,
.nav-toggle:active   { transform: scale(0.92); }   /* small icon, stronger */
.grev__more:active   { transform: scale(0.96); }

/* the badge also animates opacity/transform on entry — keep both */
.gbadge { transition: opacity .5s var(--ease), transform .5s var(--ease),
                      box-shadow .25s var(--ease); }
.gbadge.is-in:active { transition: transform 160ms ease-out; }

/* ---- 2. hover (pointer devices only) ----------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover      { opacity: .65; }
  .btn:hover             { background: #b8c3c7; }
  .square-buy a:hover    { background: #0059d6; }
  .gpanel__close:hover   { background: #f1f3f4; }
  .gpanel__all:hover     { background: #f8f9fa; text-decoration: underline; }
  .grev__more:hover      { text-decoration: underline; }
  .gbadge:hover          { box-shadow: 0 6px 22px rgba(0,0,0,.22),
                                       0 1px 3px rgba(0,0,0,.09); }
}

/* ---- 3. focus ---------------------------------------------------------- */
.btn:focus-visible,
.gbadge:focus-visible,
.gpanel__close:focus-visible,
.gpanel__all:focus-visible,
.grev__more:focus-visible,
.nav-toggle:focus-visible,
.site-nav a:focus-visible,
.square-buy a:focus-visible,
.hero__chevron:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* keep colour fades (they aid comprehension); drop only the movement */
  .btn { transition: background-color .4s var(--ease), color .4s var(--ease); }
  .square-buy a, .gpanel__close { transition: background-color .2s var(--ease); }
  .grev__more, .nav-toggle { transition: none; }
  .btn:active, .gbadge:active, .gpanel__close:active,
  .grev__more:active, .nav-toggle:active, .square-buy a:active {
    transform: none;
  }
}


/* ------------------------------------------------------------- 404 page --
   Exists so Cloudflare Pages returns a real 404 instead of falling back to
   index.html with a 200 (a soft 404, which muddies Google indexing).
   Deliberately plain — it is a signpost, not a destination. */
.notfound { padding: 90px 0 110px; text-align: center; }
.notfound__title {
  margin: 0 0 14px; font-family: var(--serif); font-weight: 400;
  font-size: 35px; line-height: 1.2; color: var(--accent);
}
.notfound__copy {
  margin: 0 auto 26px; max-width: 460px;
  font-family: var(--serif); font-size: 20px; line-height: 1.4; color: var(--body);
}
.notfound__links { list-style: none; margin: 0; padding: 0; }
.notfound__links li { margin: 0 0 10px; }
.notfound__links a {
  font-family: var(--serif); font-size: 20px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .notfound { padding: 56px 0 72px; }
  .notfound__title { font-size: 23px; }
  .notfound__copy, .notfound__links a { font-size: 15px; }
}