/* =========================================================================
   faintOBJECT site chrome: the layout every page shares.

   Built from the /service/ (then /services/) redesign. You, Thu 10th September 2026: "apply
   all the design style changes we made on the services page to every other
   page on the website, so they're all consistent. the only exception is the
   home page design which should be preserved as is except for the menu and
   cursor ... don't change any colours."

   One file on purpose, so the pages cannot drift apart again. Every colour
   comes from the tokens in /styles.css; nothing here introduces a new one.
   Loaded after /styles.css and before each page's own <style>, which holds
   only what is unique to that page.

   NOT loaded by the client demo pages (/demo/*), the client review pages
   (/review/*) or the service agreement (/terms/). You, Thu 10th September
   2026: "you don't need to touch the /terms page at all either".
   ========================================================================= */

/* ---- Page frame: full width, content on the menu's edges ---- */
.fo-page {
  min-height: 100svh; display: flex; flex-direction: column;
  overflow-x: clip;   /* a reel bleeds to the right edge; never let it add a sideways scroll */
}
.fo-main {
  flex: 1; width: 100%;
  padding: clamp(2.5rem, 7.5vh, 5rem) calc(var(--frame-pad) + 0.2rem) clamp(2.5rem, 6.25vh, 3.75rem);
}

/* ---- Menu. Desktop: Home, Service, Method and Enquire spread evenly
   edge to edge; it scrolls away with the page. Phones: see further down. ---- */
.fo-nav {
  position: relative; z-index: 1000;
  min-height: var(--header-h); display: flex; flex-wrap: wrap; row-gap: 0.2rem;
  align-items: center; justify-content: space-between;
  padding-inline: var(--frame-pad);
}
/* Homepage only: overlays the top and takes no room, so the homepage's own
   layout (built for a header that reserved none) is left exactly as it was. */
.fo-nav--overlay { position: absolute; top: 0; left: 0; right: 0; }
.fo-nav-group { display: contents; }
.fo-menu-btn { display: none; }
.fo-link, .fo-enquire {
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-small);
  text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none;
  padding: 0.5rem 0.2rem;
  transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fo-link { color: var(--ink); }
.fo-link:hover { color: var(--blue); }
.fo-enquire { color: var(--blue); }
.fo-enquire:hover { color: var(--ink); }

/* ---- Title: the words spread edge to edge ("Full" hard left, "Kit" hard
   right). /chrome.js shrinks a title only if its words would not fit the
   width; a title that fits is never touched. The top margin doubles the
   visible gap under the menu: 16px of menu bar + 0.2em of the font's own
   space above the letters. ---- */
.fo-title {
  margin-top: calc(16px + 0.2em);
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.25em;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.5rem, 15.5vw, 16rem); line-height: 0.95; letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---- Intro: left edge of the page; on desktop it ends where the right-hand
   column begins (35%). ---- */
.fo-intro { margin-top: clamp(2.5rem, 6.25vh, 4.375rem); }
.fo-lede { font-size: var(--step-body); line-height: 1.45; }
@media (min-width: 761px) { .fo-intro { max-width: 35%; } }

/* ---- Reel: a film parked at the left end (optional) and stills scrolling
   past for ever. The stills appear THREE times and the track moves exactly
   one third of its width, so the jump back lands on an identical frame. Each
   still carries its own right margin instead of a flex gap to keep that
   exact. Hover pauses it; reduced motion stops it. margin-right pulls the row
   out to the window's right edge. ---- */
.fo-reel {
  --reel-h: clamp(22.5rem, 45vw, 42rem);
  display: flex; gap: calc(var(--frame-pad) + 0.2rem); height: var(--reel-h);
  margin-top: clamp(3.125rem, 7.5vh, 5rem); margin-right: calc(50% - 50vw);
}
.fo-reel > video {
  flex: none; height: 100%; width: auto; aspect-ratio: 720 / 1294;
  object-fit: cover; border-radius: 3px; background: var(--ink);
}
.fo-reel-window { flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; }
.fo-reel-track {
  display: flex; height: 100%; width: max-content;
  animation: fo-reel 75s linear infinite;
}
.fo-reel-track img {
  flex: none; display: block; height: 100%; width: auto; aspect-ratio: 768 / 1376;
  margin-right: calc(var(--frame-pad) + 0.2rem); object-fit: cover; border-radius: 3px;
}
/* Mouse only. On a touchscreen a tap counts as hover and froze the reel, so
   touch never pauses it (you, Thu 10th September 2026: "disable the touch to
   pause carousel behaviour on touchscreen devices only"). */
@media (hover: hover) and (pointer: fine) {
  .fo-reel-window:hover .fo-reel-track { animation-play-state: paused; }
}
@keyframes fo-reel { to { transform: translate3d(-33.3333%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .fo-reel-track { animation: none; } }

/* ---- Chips: the one chip design for every page, going forward (you, Fri
   11th September 2026: "use this for the chip design going forward", with a
   mockup of a "Room dimensions" chip). A soft grey block with small rounded
   corners, no outline, grey text in the site font at its normal weight. Wrap chips in .fo-chips,
   one <span> each. ---- */
.fo-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.fo-chips > span {
  background: var(--hairline); border: 0; border-radius: 0.2em;
  padding: 0.24em 0.5em; font-size: 0.875rem; line-height: 1.2;
  color: var(--ink-60);   /* weight and letter spacing left as the page's own: never thickened or widened (you, Fri 11th September 2026) */
}

/* ---- A portrait film standing on its own, at the reel's height, so a film
   reads the same size wherever it appears. ---- */
.fo-film {
  display: block; height: clamp(22.5rem, 45vw, 42rem); width: auto; max-width: 100%;
  aspect-ratio: 720 / 1294; object-fit: cover; border-radius: 3px; background: var(--ink);
}

/* ---- Sections and rows: the 35 / 65 split. Labels on the left, content on
   the right, so every answer lines up down the page. ---- */
.fo-section { margin-top: clamp(5rem, 12.5vh, 8.75rem); }
.fo-h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-h2); line-height: 1.15; margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem);
}
.fo-rows { margin: 0; }
.fo-row {
  display: grid; grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
  padding: 1.1rem 0;
  font-size: var(--step-body); line-height: var(--line-normal);
}
.fo-row > dt, .fo-row > .fo-k {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--step-small);
  color: var(--ink-60); padding: 0.2rem 2rem 0 0;
}
.fo-row > dd, .fo-row > .fo-v { margin: 0; max-width: 62ch; }

/* ---- Footer: contact lines on the right-hand column, the copyright at the
   left edge on the same line as the email, and the fO mark bottom right with
   its bottom on that line. Pages with no contact lines use --short: the
   copyright and the mark only. ---- */
.fo-footer {
  display: grid; grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
  grid-template-areas: ". q" "copy mail";
  align-items: baseline; row-gap: 0.6rem;
  margin-top: clamp(1.25rem, 3.75vh, 2.5rem);
  padding: 0 calc(var(--frame-pad) + 0.2rem) clamp(2.5rem, 6vh, 3.5rem);
}
.fo-footer--short { grid-template-areas: "copy copy"; }
.fo-foot-q { grid-area: q; font-size: var(--step-body); line-height: var(--line-normal); max-width: 46ch; }
.fo-foot-mail { grid-area: mail; position: relative; font-size: var(--step-body); line-height: var(--line-normal); }
.fo-foot-mail a { color: var(--blue-text); text-decoration: none; }
.fo-foot-mail a:hover { text-decoration: underline; }
.fo-foot-copy { grid-area: copy; position: relative; font-size: var(--step-small); letter-spacing: 0.1em; color: var(--ink); }
.fo-mark { position: absolute; right: 0; bottom: var(--mark-drop, 0.1em); height: 2.5rem; width: auto; }

/* ---- Trail canvas (drawn by /chrome.js) ---- */
.fo-trail { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483647; }

/* ---- Star cursor. Mouse and trackpad only; phones and tablets keep their
   normal touch. /chrome.js draws the star so it can follow the mouse
   smoothly, and adds .fo-soft-cursor to hide the browser's own cursor. The
   url() star below is the fallback when that script doesn't run (and for
   reduced motion). Text fields keep the ordinary text cursor so typing still
   looks like typing. Hotspot is the star's centre. ---- */
@media (hover: hover) and (pointer: fine) {
  html, a, button, label, video, select, [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"] {
    cursor: url("data:image/svg+xml,%3Csvg width='22' height='25' viewBox='458 7 86 98' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M494.281 13.0119C495.241 4.99601 506.759 4.99603 507.719 13.0119L509.732 29.8057C510.273 34.325 514.959 37.0559 519.107 35.2696L534.52 28.6318C541.878 25.4635 547.636 35.5325 541.24 40.3801L527.838 50.536C524.232 53.2691 524.232 58.7309 527.838 61.464L541.24 71.6199C547.636 76.4675 541.877 86.5365 534.52 83.3682L519.107 76.7304C514.959 74.9441 510.273 77.675 509.732 82.1943L507.719 98.9881C506.759 107.004 495.241 107.004 494.281 98.988L492.268 82.1943C491.727 77.675 487.041 74.9441 482.893 76.7304L467.48 83.3682C460.122 86.5365 454.364 76.4674 460.76 71.6199L474.162 61.464C477.768 58.7309 477.768 53.2691 474.162 50.536L460.76 40.3801C454.364 35.5325 460.123 25.4635 467.48 28.6318L482.893 35.2696C487.041 37.0559 491.727 34.325 492.268 29.8057L494.281 13.0119Z' fill='%234C84FC'/%3E %3C/svg%3E") 11 12, auto;
  }
  button[disabled] { cursor: not-allowed; }
  html.fo-soft-cursor, html.fo-soft-cursor * { cursor: none !important; }
  html.fo-soft-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  html.fo-soft-cursor textarea { cursor: text !important; }
  html.fo-soft-cursor button[disabled] { cursor: not-allowed !important; }
  html.fo-soft-cursor :fullscreen, html.fo-soft-cursor :fullscreen * { cursor: auto !important; }
}

/* =========================================================================
   Narrow screens. LAST in the file on purpose: these match the rules above
   in specificity, so they only win by coming after them.
   ========================================================================= */
@media (max-width: 760px) {
  .fo-footer { grid-template-columns: 1fr; grid-template-areas: "q" "mail" "copy"; }
  .fo-footer--short { grid-template-areas: "copy"; }
  .fo-footer:not(.fo-footer--short) .fo-foot-copy { margin-top: 1.2rem; }
}

@media (max-width: 640px) {
  /* Reel at 62.5% of desktop size on phones; the scroll time scales with it,
     so the pictures cross the screen at the same speed. */
  .fo-reel { --reel-h: clamp(14.0625rem, 28.125vw, 26.25rem); }
  .fo-reel-track { animation-duration: 46.875s; }
  .fo-film { height: clamp(14.0625rem, 28.125vw, 26.25rem); }
  /* Intro text the same size as the small text under a price. */
  .fo-lede { font-size: var(--step-small); }
  /* The phone menu bar leaves 12px under ENQUIRE, not 16. */
  .fo-title { margin-top: calc(12px + 0.2em); }

  /* Phone menu. Closed: MENU and ENQUIRE. MENU opens it: ENQUIRE
     slides down from the top row to the foot of the list, and each link
     appears once ENQUIRE has moved past its row. How far ENQUIRE travels
     (--m-rows) is set by /chrome.js from the number of links, so adding or
     removing a link needs no change here (Work removed Thu 10th September 2026). Closing, each link fades out
     BEFORE ENQUIRE reaches it (timed in /chrome.js). The panel takes the
     page's own background, grows with ENQUIRE, and sits over the page so
     nothing below the menu moves. Links sit in your mockup's order via --row. */
  .fo-nav {
    --m-row: 1.35rem; --m-top: calc((var(--header-h) - var(--m-row)) / 2);
    --m-dur: 520ms; --m-ease: cubic-bezier(0.4, 0, 0.2, 1);
    display: block; height: var(--header-h); min-height: 0;
  }
  .fo-nav::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: var(--header-h);
    background: var(--page-bg, var(--paper));
    transition: height var(--m-dur) var(--m-ease) var(--m-delay, 0ms);
  }
  .fo-nav.is-open::before { height: calc(var(--header-h) + var(--m-rows, 3) * var(--m-row)); }
  /* The word MENU, in the site's black, on ENQUIRE's line; it reads CLOSE
     while the menu is open (you, Thu 10th September 2026: "replace the star
     icon in the mobile header with the word MENU in the faintobject black").
     The padding widens the tap area without moving the word. */
  .fo-menu-btn {
    display: block; position: absolute; z-index: 1;
    left: calc(var(--frame-pad) + 0.2rem - 0.6rem); top: calc(var(--m-top) - 0.6rem);
    margin: 0; padding: 0.6rem; border: 0; background: none; cursor: pointer;
    font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
    text-transform: uppercase; letter-spacing: 0.06em; line-height: var(--m-row);
    color: var(--ink);
  }
  .fo-nav-group { display: block; }
  .fo-link, .fo-enquire { font-size: 1.05rem; letter-spacing: 0.06em; line-height: var(--m-row); padding: 0; }
  .fo-link, .fo-enquire {
    position: absolute; z-index: 1; right: calc(var(--frame-pad) + 0.2rem); top: var(--m-top); height: var(--m-row);
  }
  .fo-link {
    transform: translateY(calc(var(--row) * var(--m-row)));
    opacity: 0; visibility: hidden; transition: opacity 140ms ease, visibility 0s linear 140ms;
  }
  .fo-link.is-shown { opacity: 1; visibility: visible; transition: opacity 140ms ease, visibility 0s; }
  .fo-enquire { transition: transform var(--m-dur) var(--m-ease) var(--m-delay, 0ms), color 500ms cubic-bezier(0.4, 0, 0.2, 1); }
  .fo-nav.is-open .fo-enquire { transform: translateY(calc(var(--m-rows, 3) * var(--m-row))); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .fo-nav::before, .fo-enquire, .fo-link { transition: none; }
}
@media (max-width: 560px) {
  .fo-row { grid-template-columns: 1fr; padding: 0.85rem 0; }
  .fo-row > dt, .fo-row > .fo-k { padding-right: 0; }
}