/* ===========================================================================
   GROWTH SYSTEM v3 — shared components
   The fixed left rail, the top strip, ink buttons, the index rows, the CTA
   plate, forms and the footer. Same class contract as before; new skin.
   =========================================================================== */

/* --- Top strip (the blueprint's banner) ------------------------------------ */
/* the hero slides up under the bars, so the strip must stack above the page */
.utility{ position: relative; z-index: calc(var(--z-nav) - 1); border-bottom: 1px solid var(--rule); color: var(--ink-2); background: var(--chrome); }
.utility__in{ display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 40px;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.utility__in strong{ color: var(--ink); font-weight: 500; }
.utility__dot{ width: 6px; height: 6px; background: var(--warm); flex: none; }
@media (max-width: 700px){ .utility{ display: none; } }

/* --- The left rail ---------------------------------------------------------
   A fixed vertical strip that names the section being read (site.js swaps
   the label as sections pass the middle of the screen) and a ring at the
   foot that fills with page progress and takes you back to the top. */
.rail{ display: none; }
@media (min-width: 900px){
  .rail{ display: grid; position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: calc(var(--z-nav) - 2);
    --sp: 0; grid-template-rows: minmax(0, 1fr) auto; border-right: 1px solid var(--rule); background: var(--chrome); }
  .rail__label{ writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; align-self: center;
    font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
    white-space: nowrap; transition: opacity 180ms var(--ease); }
  .rail.is-swapping .rail__label{ opacity: 0; }
  .rail__mark{ width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; justify-self: center; margin-bottom: var(--s-6); cursor: pointer;
    background: conic-gradient(var(--orange) calc(var(--sp) * 1turn), var(--rule) 0);
    -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); }
  .rail__mark:hover{ background: conic-gradient(var(--graphite) calc(var(--sp) * 1turn), var(--rule-strong) 0); }
}

/* --- Navigation ------------------------------------------------------------- */
.nav{ position: sticky; top: 0; z-index: var(--z-nav); background: var(--chrome); border-bottom: 1px solid var(--rule);
  transition: transform 340ms var(--ease); }
.nav.is-hidden{ transform: translateY(-100%); }
.nav.is-hidden:focus-within{ transform: none; }
.nav__in{ display: flex; align-items: center; gap: var(--s-6); min-height: 68px; }
@media (min-width: 1024px){ .nav__in{ min-height: 76px; } }
.brand{ display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark{ width: 34px; height: 34px; flex: none; object-fit: contain; }
.brand__word{ font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: .9375rem; letter-spacing: -.01em; line-height: 1.02; color: var(--ink); text-transform: uppercase; }
.brand__word span{ display: block; }
.nav__links{ display: none; margin-left: auto; align-items: stretch; gap: 0; }
@media (min-width: 1024px){ .nav__links{ display: flex; } }
.nav__list{ display: contents; }
.nav__item{ position: relative; display: flex; }
.nav__link{ display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-5); min-height: 76px;
  font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink); border-left: 1px solid var(--rule);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.nav__link:hover{ background: var(--yellow-3); }
.nav__link[aria-current="page"], .nav__link.is-section{ background: var(--yellow); color: var(--graphite); box-shadow: inset 0 -3px 0 var(--orange); }
.nav__chev{ width: 9px; height: 9px; opacity: .7; transition: transform var(--dur-1) var(--ease); }
.nav__item[data-open="true"] .nav__chev{ transform: rotate(180deg); }
.nav__panel{ position: absolute; top: 100%; left: -1px; min-width: 300px; background: var(--chrome); border: 1px solid var(--rule-strong);
  box-shadow: 6px 6px 0 0 rgba(30, 25, 25, .1);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms var(--ease), transform var(--dur-2) var(--ease), visibility 140ms; }
.nav__item[data-open="true"] .nav__panel{ opacity: 1; visibility: visible; transform: none; }
.nav__panel a{ display: block; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); transition: background var(--dur-1) var(--ease); }
.nav__panel a:last-child{ border-bottom: 0; }
.nav__panel a:hover{ background: var(--yellow-3); }
.nav__panel b{ display: block; font-size: .9375rem; font-weight: 700; }
.nav__panel span{ display: block; font-size: .8125rem; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
@media (max-width: 1023px){ .nav .nav__cta{ display: none; } }
@media (min-width: 1024px){ .nav .nav__cta{ display: inline-flex; margin-left: var(--s-5); } }

.burger{ margin-left: auto; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; }
@media (min-width: 1024px){ .burger{ display: none; } }
.burger span{ display: block; height: 2px; background: var(--ink); transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.menu{ position: fixed; inset: 0; z-index: var(--z-menu); background: var(--chrome); display: flex; flex-direction: column;
  padding: 96px var(--gutter) var(--s-8); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2); }
.menu[data-open="true"]{ opacity: 1; visibility: visible; }
.menu__group + .menu__group{ margin-top: var(--s-7); }
.menu__label{ margin-bottom: var(--s-4); }
.menu__link{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.05; color: var(--ink);
  opacity: 0; transform: translateY(14px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.menu[data-open="true"] .menu__link{ opacity: 1; transform: none; }
.menu__link i{ font-family: var(--font-mono); font-style: normal; font-size: .6875rem; letter-spacing: .14em; color: var(--ink-2); }
.menu__foot{ margin-top: auto; padding-top: var(--s-8); }

/* --- Buttons: ink-filled, squared, yellow type -------------------------------- */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); padding: .95rem 1.5rem;
  font-family: var(--font-body); font-size: .875rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 0; cursor: pointer; text-align: center;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.btn:active{ transform: translate(1px, 1px); }
.btn__arrow{ width: 15px; height: 9px; flex: none; transition: transform var(--dur-2) var(--ease); }
.btn:hover .btn__arrow{ transform: translateX(4px); }
.btn--primary{ background: var(--graphite); color: var(--yellow); border-color: var(--graphite); box-shadow: 4px 4px 0 0 var(--accent); }
.btn--primary:hover{ box-shadow: 6px 6px 0 0 var(--accent); }
.btn--ghost{ background: transparent; color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--bg, var(--yellow)); }
.btn--onlight{ background: var(--ink); color: var(--ground); }
.btn--block{ width: 100%; }
.tlink{ display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); padding-block: var(--s-2); position: relative; }
.tlink::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-2) var(--ease-out); }
.tlink:hover::after{ transform: scaleX(1); transform-origin: left center; }
.tlink svg{ width: 15px; height: 9px; transition: transform var(--dur-2) var(--ease); }
.tlink:hover svg{ transform: translateX(4px); }
@media (pointer: coarse){ .btn{ min-height: 48px; } .tlink{ min-height: 44px; display: inline-flex; align-items: center; } }

/* --- The indexed row ---------------------------------------------------------- */
.index{ border-top: 1px solid var(--ink); }
.index__row{ display: grid; align-items: start; grid-template-columns: 4.5rem 1fr; gap: var(--s-4) var(--s-5);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-bottom: 1px solid var(--rule-strong); position: relative; transition: background var(--dur-2) var(--ease); }
@media (max-width: 899px){ .index__n{ grid-row: span 2; } .index__title, .index__desc{ grid-column: 2; } }
@media (min-width: 900px){ .index__row{ grid-template-columns: 5.5rem minmax(0, 22ch) minmax(0, 1fr) auto; align-items: center; } }
a.index__row:hover{ background: var(--hover); }
.index__n{ font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em; color: var(--ink); padding-top: .35em; }
.index__title{ font-family: var(--font-display); font-weight: 800; font-stretch: 106%; font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.1; }
.index__desc{ color: var(--ink-2); font-size: var(--t-small); max-width: 52ch; }
.index__go{ display: none; }
@media (min-width: 900px){ .index__go{ display: block; width: 20px; height: 11px; color: var(--ink); transition: transform var(--dur-2) var(--ease); } a.index__row:hover .index__go{ transform: translateX(6px); } }

/* --- Stats ------------------------------------------------------------------- */
.stat__fig{ display: block; }
.stat__fig em{ font-style: normal; }
.stat__cap{ margin-top: var(--s-3); color: var(--ink-2); }

/* --- CTA plate: an ink block, once per page ------------------------------------ */
.cta{ --ink: var(--graphite); --ink-2: #2B211D; --accent: var(--graphite); background: var(--orange); color: var(--graphite);
  background-image: linear-gradient(to right, rgba(30,25,25,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(30,25,25,.08) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell); background-position: calc(var(--rail) + var(--gutter)) 0; }
.cta__in{ display: grid; gap: var(--s-6); padding-block: clamp(3rem, 2.06rem + 4.01vw, 6rem); }
@media (min-width: 900px){ .cta__in{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; align-items: center; gap: var(--s-8); } }
.cta__title{ font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: var(--t-h2); letter-spacing: -.025em; line-height: 1.02; }
.cta__title em{ font-style: normal; -webkit-text-stroke: 1.5px var(--graphite); color: transparent; }
.cta__body{ color: var(--ink-2); font-size: var(--t-small); max-width: 44ch; }
.cta .btn--onlight{ background: var(--graphite); color: var(--white); border-color: var(--graphite); box-shadow: 4px 4px 0 0 var(--white); }

/* --- Footer ------------------------------------------------------------------ */
.footer{ background: var(--chrome); color: var(--ink-2); border-top: 1px solid var(--graphite); }
.footer__top{ display: grid; gap: var(--s-8); padding-block: var(--s-10) var(--s-9); }
@media (min-width: 760px){ .footer__top{ grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: var(--s-6); } }
@media (min-width: 1100px){ .footer__top{ grid-template-columns: minmax(0,1.6fr) repeat(4, minmax(0,1fr)); } }
.footer__brand .brand{ margin-bottom: var(--s-4); }
.footer__tag{ font-size: var(--t-small); color: var(--ink-2); max-width: 30ch; }
.footer__col h3{ margin-bottom: var(--s-4); }
.footer__col li + li{ margin-top: var(--s-3); }
.footer__col a{ font-size: .875rem; color: var(--ink); }
.footer__col a:hover{ text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.footer__bottom{ display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; padding-block: var(--s-5); border-top: 1px solid var(--rule); }
.footer__legal{ display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* --- Forms -------------------------------------------------------------------- */
.field{ display: block; margin-bottom: var(--s-5); }
.field__label{ display: block; margin-bottom: var(--s-3); }
.field__req{ color: var(--warm); }
.input, .select, .textarea{ width: 100%; padding: .85rem 1rem; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink);
  font-size: var(--t-body); line-height: 1.4; transition: box-shadow var(--dur-1) var(--ease); }
.input::placeholder, .textarea::placeholder{ color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus{ outline: none; box-shadow: 4px 4px 0 0 var(--orange); }
.textarea{ min-height: 8rem; resize: vertical; }
.select{ appearance: none; cursor: pointer; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='m1 1 4 4 4-4' stroke='%231E1919' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px 6px; }
.checks{ display: grid; gap: var(--s-3); }
@media (min-width: 640px){ .checks{ grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); } }
.check{ display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; padding: .55rem 0; font-size: var(--t-small); }
.check input{ appearance: none; flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--ink); background: var(--paper); cursor: pointer; }
.check input:checked{ background: var(--ink); }
.check input:checked::after{ content: ""; display: block; width: 5px; height: 9px; margin: 1px auto 0; border: solid var(--yellow); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.form__note{ font-size: var(--t-mono); color: var(--ink-2); font-family: var(--font-mono); }
.form__success{ display: none; padding: var(--s-8); border: 1.5px solid var(--ink); background: var(--paper); }
.form__success[data-show="true"]{ display: block; }
.form__success-body{ margin-top: var(--s-5); }
.form__success-link{ color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.form__error{ margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); border-left: 3px solid var(--warm); background: var(--paper); font-size: var(--t-small); }

/* ============================================ v4.2 · after the site audit */
/* the rail's back-to-top ring meets the 24px minimum target (WCAG 2.5.8) */
@media (min-width: 900px){
  .rail__mark{ width: 28px; height: 28px;
    -webkit-mask: radial-gradient(circle, transparent 9px, #000 9.5px); mask: radial-gradient(circle, transparent 9px, #000 9.5px); }
}
/* the Services dropdown carries each service's colour dot, as the hero does */
.nav__panel a{ position: relative; padding-left: calc(var(--s-5) + 1.4rem); }
.nav__panel a::before{ content: ""; position: absolute; left: var(--s-5); top: calc(var(--s-4) + .3rem); width: 11px; height: 11px;
  border-radius: 50%; background: var(--dot, var(--orange)); box-shadow: 0 0 0 1.5px var(--graphite); }
.nav__panel a[aria-current="page"] b{ text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
/* the phone menu's foot: the CTA, then how to reach us */
.menu__contact{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); color: var(--ink-2); }
.menu__contact a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* v4.4: on desktop the three links sit in the middle of the page, with the
   logo and the booking button holding the two ends */
@media (min-width: 1024px){
  .nav__in{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav__links{ margin-left: 0; justify-self: center; }
  .nav__item:last-child .nav__link{ border-right: 1px solid var(--rule); }
  .nav .nav__cta{ justify-self: end; margin-left: 0; }
}
/* v4.4: the phone menu reads as one even list — smaller one-line items, the
   number and the arrow in the same right-hand column, centred on the row */
.menu__group + .menu__group{ margin-top: var(--s-6); }
.menu__label{ margin-bottom: var(--s-2); }
.menu__link{ align-items: center; min-height: 52px; padding-block: var(--s-3); font-size: 1.25rem; line-height: 1.2; }
.menu__link i{ flex: none; width: 3ch; text-align: right; font-size: .75rem; }
/* the page shell makes room for the left rail; the links are pulled back by
   half of it so they sit on the middle of the window itself */
@media (min-width: 1024px){ .nav__links{ transform: translateX(calc(var(--rail) / -2)); } }

/* ===========================================================================
   v5.0 — the mobile round.
   =========================================================================== */

/* The closing headline's hollow word. `.cta__title em` is drawn as a 1.5px
   outline with a transparent fill, which reads as a deliberate stencil at the
   desktop --t-h2 (~48px). On a phone --t-h2 falls to about 28px, and a 1.5px
   stroke on an 800-weight, 112%-stretched face closes the counters of g, o, w
   and y: "growth system" came out as a smudged double of itself, directly
   above the page's last booking button. Solid below 700px. */
@media (max-width: 699px){
  .cta__title em{ -webkit-text-stroke: 0; color: var(--ink); }
}