/* ============================================================
   LEARN-MORE LAB — sandbox-only styles.
   The page reuses ../OWL/css/owl.css for tokens, the .topbar/.nav-dock
   dock, AND the live ABOUT scroll-stacking system (.about / .about-wrap /
   .rail / .rail__* / .about-stats / .blocks / .block / .block__*). This file
   only adds the lab layer: a blue default accent, an always-on dock, the
   merged rail description, a per-card step kicker, the final "book" section,
   and a desktop dock-clearance offset. Folds into owl.css at port time.
   ============================================================ */

/* Lab default accent — Slate Blue (Lana's preference). Overrides owl.css's
   sage :root default for this lab only; the live site stays on sage. Loaded
   after owl.css, so this :root wins over its sage tokens. */
:root{ --accent:#46627F; --accent-deep:#324A63; --accent-tint:#E2E8EE; --accent-light:#9FB4C8; }

html{ scroll-behavior:smooth; }
body.lm{ background:var(--paper); }

/* Dock mirrors the live site: owl.css already shows the icon dock on desktop and
   swaps to the hamburger + mobile menu under 900px — so no nav-dock override here. */

/* LAB-ONLY folder tabs — a fixed ribbon just under the topbar to switch between the
   Organizing and Move Services landing-page previews. z-index sits below the topbar
   (90) but above the .lm-book curtain (2), so the tabs stay reachable while scrolling. */
.lm-tabs{ position:fixed; top:50px; left:0; right:0; z-index:88; height:42px;
  display:flex; align-items:flex-end; gap:6px; padding:0 clamp(16px,4vw,48px);
  background:var(--paper); border-bottom:1px solid var(--line); }
.lm-tab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-faint); padding:8px 18px; border:1px solid var(--line); border-bottom:none; border-radius:9px 9px 0 0;
  background:var(--surface-2); transform:translateY(1px); transition:color .2s var(--ease), background .2s var(--ease); }
.lm-tab:hover{ color:var(--ink-soft); }
.lm-tab.is-active{ color:var(--accent-deep); background:var(--paper); font-weight:500; }

/* The ABOUT scroll system sits at the very top here (no hero above it), so the
   pinned rail must clear the always-on ~52px dock. Desktop only — owl.css
   already handles the mobile rail (top:52px) and --m-ceiling:150px. */
@media(min-width:901px){
  /* flex-start + 24px gap → the nav list sits directly above the foot line, with the
     same 24px the stats sit below it (about-stats padding-top). Void falls to the bottom. */
  .rail{ top:96px; height:calc(100vh - 96px); justify-content:flex-start; gap:24px; }   /* clear the topbar (~50px) + folder-tab ribbon (42px) */
  /* Wider rail + tighter gap → the top paragraph reflows shorter and the nav
     highlight bars sit closer to the image. (Overrides owl.css .about-wrap.) */
  .about-wrap{ grid-template-columns:minmax(240px,1fr) 1.42fr; gap:clamp(32px,4.5vw,72px); }
  .rail__nav a{ margin-right:calc(-1 * clamp(10px,2.2vw,34px)); }   /* let the highlight reach toward the image */
  /* Curtain cover: long tail keeps the last card pinned for the full viewport the dark
     .lm-book rises over (margin-top:-100vh lives on the base .lm-book rule below). */
  .blocks::after{ height:100vh; }
}

/* merged top description (lead + "what's included") in the rail.
   Hidden on mobile to mirror the live ABOUT ceiling (title only). */
.rail__desc{ color:var(--ink-soft); font-size:15.5px; line-height:1.55; margin:18px 0 0; }
.rail__desc + .rail__nav{ margin-top:clamp(48px,9vh,104px); }   /* more breathing room after the paragraph; pushes the whole list+line+stats+CTA block down */

/* Scroll-spy active item — full highlight bar (accent bg + white text) instead of
   owl.css's growing em-dash line. The shared ABOUT scroll-spy JS toggles .active as
   each card pins, so the highlight steps down the list as items come into view.
   Lab-only (learn-more.css loads after owl.css → these win on equal specificity). */
.rail__nav{ gap:3px; }
.rail__nav a{ padding:3px 16px; border-radius:7px; line-height:1.25; cursor:default;   /* passive scroll indicator — not clickable */
  transition:background .25s var(--ease), color .25s var(--ease), padding .25s var(--ease); }
.rail__nav a::before{ display:none; }                                 /* em-dash hidden on inactive items */
/* active = slim accent bar; white text + a white em-dash inside the pill. Its taller
   padding "builds" space in the tightly-spaced list as the highlight steps down. */
.rail__nav a.active{ background:var(--accent); color:#fff; padding-top:8px; padding-bottom:8px; padding-left:42px; }
.rail__nav a.active::before{ display:block; content:''; left:16px; width:18px; height:1.5px; background:#fff; }

/* Raise the pin "ceiling" on desktop so there's breathing room between the
   always-on dock/header and the first image — AND so that gap is the hard stop:
   the cards pin at --ceiling, and the first card STARTS at --ceiling (padding-top
   = --ceiling), so the first image never scrolls up higher than this gap / tucks
   under the dock. Overrides owl.css's --ceiling for this lab only; the live
   ABOUT keeps its own. Mobile keeps the live behavior (--m-ceiling + the rail
   title as the ceiling, .blocks padding-top:0). */
@media(min-width:901px){
  :root{ --ceiling:clamp(118px,15vh,160px); }   /* raised so the first card clears the topbar + folder-tab ribbon */
  .blocks{ padding-top:var(--ceiling); }
}

/* Rail CTA: let the button widen to its label (e.g. "Book your technical visit")
   instead of wrapping when the rail column is narrow. Lab-only. */
.rail__cta{ white-space:nowrap; }

/* per-card step kicker above each head */
.lm-step{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep); margin:22px 0 0; }
.lm-step + .block__head{ margin-top:6px; }

/* FINAL "book" section — rises and overlays the pinned stack, the same way the
   live Testimonials covers the About (margin-top + z-index). */
.lm-book{ position:relative; z-index:2; margin-top:-100vh; background:var(--ink); color:var(--surface); }   /* full-viewport curtain cover (desktop + mobile) */
.lm-book__inner{ max-width:1240px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(20px,5vw,64px); }
.lm-book .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent-light); margin:0; }
.lm-book h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.4vw,3.6rem); color:var(--surface); line-height:1.05; margin:16px 0 0; }
.lm-book p{ color:rgba(244,240,230,.72); max-width:52ch; margin-top:16px; font-size:16.5px; }
.lm-book__cta{ display:inline-flex; align-items:center; gap:9px; width:max-content; margin-top:30px; padding:15px 28px; border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font-size:15px; font-weight:600; text-decoration:none; transition:background .25s var(--ease), transform .25s var(--ease); }
.lm-book__cta:hover{ background:var(--accent-light); transform:translateY(-1px); }
.lm-book__cta svg{ transition:transform .25s var(--ease); }
.lm-book__cta:hover svg{ transform:translateX(3px); }

/* HONEYBOOK EMBED — form in the "book" curtain (Organizing tab). Two columns:
   intro copy left, the embedded HoneyBook contact form (light card) right. The HB
   widget injects its own form markup into .hb-embed; we only style the wrapper. */
/* Single centered column — the form (with its own heading/logo) owns the whole band. */
.lm-book--form{ background:var(--accent); }   /* accent-blue band for the form section (overrides the base dark .lm-book) */
.lm-book--form .lm-book__inner{ display:block; min-height:100vh; padding:96px clamp(20px,5vw,64px) clamp(40px,6vh,72px); }
/* Default: no card — the form's own background blends into the accent band (Organizing). */
.hb-embed{ max-width:760px; margin:0 auto; }
.hb-embed *{ max-width:100%; box-sizing:border-box; }   /* keep the HoneyBook form fluid inside the band */

/* Windowed card variant (Move Services) — mirrors the main site's .book-shell. Deeper,
   layered shadow so the panel reads clearly against the blue band. */
.hb-embed--card{ max-width:960px;   /* wider than the 760px default so HoneyBook keeps its two-column field layout instead of stacking */
  background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55), 0 10px 30px -12px rgba(0,0,0,.35); }

/* Centered intro above the form (Move Services) — mirrors the main site's centered
   section head; light text reads on the blue band (inherits .lm-book eyebrow/h2/p colors). */
.lm-book--form .lm-book__intro{ text-align:center; max-width:680px; margin:0 auto clamp(32px,5vh,56px); }
.lm-book--form .lm-book__intro p{ margin-left:auto; margin-right:auto; }

/* GET-STARTED router (demo tab): a service chooser on the blue band that reveals the
   matching HoneyBook form. Standalone page (no scroll-stack), so disable the curtain rise. */
.lm-route-page .lm-book{ margin-top:0; }
.lm-choose{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:900px; margin:0 auto; }
.lm-choose__card{ display:flex; flex-direction:column; gap:9px; text-align:left; cursor:pointer; font:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px 24px;
  box-shadow:0 24px 60px -32px rgba(0,0,0,.5); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.lm-choose__card:hover{ transform:translateY(-4px); box-shadow:0 34px 70px -30px rgba(0,0,0,.6); }
.lm-choose__t{ font-family:var(--serif); font-size:1.4rem; color:var(--ink); line-height:1.1; }
.lm-choose__d{ font-size:14px; color:var(--ink-soft); line-height:1.55; }
.lm-choose__cta{ margin-top:6px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.lm-route__back{ display:block; margin:0 auto 20px; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-light); }
.lm-route__back:hover{ color:#fff; }
.hb-placeholder{ padding:64px 24px; text-align:center; color:var(--ink-soft); font-family:var(--mono); font-size:12px; letter-spacing:.08em; }
@media(max-width:760px){ .lm-choose{ grid-template-columns:1fr; max-width:440px; } }

@media(max-width:900px){
  /* Form curtain stacks: intro above, form below. */
  .lm-book--form .lm-book__inner{ grid-template-columns:1fr; align-items:start; gap:28px; padding-top:130px; }
  /* Mobile: the intro (eyebrow + title + paragraph) scrolls away, then the image cards
     pin & stack — matching the desktop scroll feel. (owl.css makes the rail a sticky
     ceiling on mobile; here we let it scroll normally and show the paragraph.) */
  .about{ padding-top:106px; }                 /* clear the fixed topbar + folder-tab ribbon */
  .rail{ position:static; height:auto; padding:0 0 12px; }
  .rail__desc{ display:block; }                /* show the intro paragraph on mobile */
  .block{ top:102px; }                         /* cards pin just below the ribbon */
  .blocks::after{ height:100vh; }              /* keep the last card pinned through the full curtain (owl's mobile default is 60vh) */
  /* lm-book margin-top:-100vh + inner min-height:100vh inherited from the base rules:
     panel height == curtain travel → fills to the bottom (no white gap) and covers everything. */
}

/* ============================================================
   FAQ tab (faq.html) — a standalone Q&A page. A master/detail "carousel-dialogue":
   question tiles on the left drive an answer "dialogue box" on the right, borrowing
   the Browse-by-Space carousel FUNCTION (one active tile, auto-advance, pause on
   hover, click/keys to select — see the inline script). Built to drop into OWL.html
   as a normal <section id="faq"> at port time. */
.faq-main{ min-height:100vh; background:var(--paper); }
.faq{ max-width:1100px; margin:0 auto;
  padding:clamp(120px,16vh,180px) clamp(20px,5vw,40px) clamp(72px,10vh,120px); }   /* top pad clears the fixed dock (~50px) + folder-tab ribbon (42px) */

/* Section header — full width, above the carousel-dialogue. */
.faq__head{ margin-bottom:clamp(28px,4vh,44px); }
.faq__title{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.05; color:var(--ink); margin:0; }
.faq__lead{ font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--ink-soft); margin:16px 0 0; }
.faq__lead a{ color:var(--accent-deep); font-weight:500; text-decoration:none; border-bottom:1px solid var(--accent-light); padding-bottom:1px; transition:color .2s var(--ease); }
.faq__lead a:hover{ color:var(--accent); }

/* Carousel-dialogue grid: tiles left, dialogue box right. Stacks under 860px. */
.faq-cad{ display:grid; grid-template-columns:1fr; gap:clamp(18px,3vw,32px); }
@media(min-width:861px){
  .faq-cad{ grid-template-columns:minmax(260px,1fr) 1.4fr; gap:clamp(22px,3vw,44px); align-items:start; }
}

/* LEFT — question tiles as a vertical CAROUSEL WHEEL (mirrors Browse-by-Space). The JS
   absolutely-positions each tile by its distance from the active index (transform/opacity);
   CSS just supplies the viewport, the fixed-height tiles, and the top/bottom fades. */
.faq-cad__tiles{ position:relative; height:clamp(330px,50vh,430px); overflow:hidden; }
/* Only a BOTTOM fade — the active tile is pinned at the top (inline with the dialogue box);
   upcoming questions cascade below it and fade out toward the bottom. */
.faq-cad__tiles::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:96px; z-index:6;
  pointer-events:none; background:linear-gradient(rgb(from var(--paper) r g b / 0), var(--paper)); }
.faq-tile{ position:absolute; left:0; right:0;   /* top + opacity set by JS; active pinned at the top */
  display:flex; align-items:center; height:60px;
  text-align:left; cursor:pointer; font:inherit;
  font-family:var(--sans); font-size:15px; line-height:1.3; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 16px;
  /* Animate `top` (not `transform`) so each tile is repainted as it moves — keeps the
     rounded corners crisp. Transforming promotes a GPU layer that drops corner anti-
     aliasing, which shows up on the high-contrast active tile mid-scroll. */
  transition:top .42s var(--ease), opacity .42s var(--ease),
             color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.faq-tile > span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.faq-tile:hover{ color:var(--ink); border-color:var(--accent-light); }
.faq-tile.is-active{ color:#fff; background:var(--accent); border-color:var(--accent); font-weight:500; }
.faq-tile:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }

/* RIGHT — the answer "dialogue box" styled as an iMessage thread: a bordered, soft-shadowed
   window with a contact header, the question as an incoming bubble (top-left) and the answer
   as an outgoing accent bubble (below-right). On desktop it sticks while you click through
   tiles, and a small tail points back toward the list. */
.faq-dlg{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 30px 70px -38px rgba(0,0,0,.42), 0 6px 18px -12px rgba(0,0,0,.18);
  display:flex; flex-direction:column; min-height:300px; }
@media(min-width:861px){ .faq-dlg{ position:sticky; top:clamp(118px,16vh,160px); } }
/* iMessage-style contact header — compact single row (owl avatar + name), centered. */
.faq-dlg__bar{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:9px; padding:9px 16px;
  border-bottom:1px solid var(--line); background:var(--surface-2); border-radius:16px 16px 0 0; }
.faq-dlg__name{ font-family:var(--serif); font-size:18.5px; font-weight:600; color:var(--ink); line-height:1; }
.faq-dlg__avatar--owl{ width:30px; height:30px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex-shrink:0; }
.faq-dlg__avatar--owl img{ width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(1); }   /* even gap (30−18) → whole-pixel centering; black mark → white */

/* The chat thread: incoming question (top-left, neutral) + outgoing answer (below-right, accent). */
.faq-dlg__thread{ flex:1; display:flex; flex-direction:column; gap:14px; padding:clamp(18px,2.6vw,26px) clamp(15px,2.4vw,22px); }
.faq-msg{ display:flex; align-items:flex-end; gap:9px; max-width:88%; }
.faq-msg--in{ align-self:flex-start; }
.faq-msg--out{ align-self:flex-end; }
.faq-msg__avatar{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; }
.faq-msg__avatar--user{ background:var(--surface-2); border:1px solid var(--line); color:var(--ink-faint); }
.faq-msg__avatar--owl{ background:var(--accent); }
.faq-msg__avatar--owl img{ width:16px; height:16px; object-fit:contain; filter:brightness(0) invert(1); }   /* even gap (30−16) → whole-pixel centering */
.faq-msg__bubble{ padding:11px 15px; font-family:var(--sans); font-size:15px; line-height:1.5; }
.faq-msg--in .faq-msg__bubble{ background:var(--surface-2); color:var(--ink); border-radius:18px 18px 18px 5px; }   /* tail bottom-left */
.faq-msg--out .faq-msg__bubble{ background:var(--accent); color:#fff; border-radius:18px 18px 5px 18px;             /* tail bottom-right */
  box-shadow:0 8px 20px -10px color-mix(in srgb, var(--accent) 65%, transparent); }
.faq-dlg__q{ margin:0; font-weight:500; }
.faq-ans{ display:none; }
.faq-ans.is-active{ display:block; animation:faqFade .42s var(--ease); }
.faq-ans p{ margin:0; color:#fff; }
@keyframes faqFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Speech tail — points left from the dialogue's header toward the tiles (desktop only). */
@media(min-width:861px){
  .faq-dlg::before{ content:''; position:absolute; left:-8px; top:18px; width:15px; height:15px;
    background:var(--surface-2); border-left:1px solid var(--line); border-bottom:1px solid var(--line);
    transform:rotate(45deg); border-radius:0 0 0 3px; }
}

.faq__more{ font-family:var(--sans); font-size:15px; color:var(--ink-soft); margin:clamp(32px,5vh,52px) 0 0; }
.faq__more a{ color:var(--accent-deep); font-weight:500; text-decoration:none; border-bottom:1px solid var(--accent-light); padding-bottom:1px; transition:color .2s var(--ease); }
.faq__more a:hover{ color:var(--accent); }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .faq-ans.is-active{ animation:none; }
  .faq-tile{ transition:none; }
}