/* ==========================================================
   Tartan Couch — shared styles for inner pages
   (homepage keeps its own inline CSS + scroll animation;
    this is the calm, static version of the same brand)
   ========================================================== */

:root {
  --ink:#090a08;
  --ink2:#11120e;
  --cream:#f1ebdf;
  --paper:#f4eee2;
  --landing:#ede2cc;         /* the homepage couch-landing cream (nav match) */
  --charcoal:#1a1915;
  --muted:#766f63;
  --brass:#6e665d;
  --dark:#17130d;
  --dark-sub:#efe7d7;

  --serif:"Libre Caslon Display",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;

  --pad:clamp(24px,4.4vw,78px);
  --nav-h:74px;
}

* { box-sizing:border-box; }

html { scroll-behavior:auto; }

body {
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.theme-dark  { background:var(--dark);   color:var(--dark-sub); }
body.theme-light { background:#ffffff; color:var(--charcoal); }

img { display:block; max-width:100%; }
a   { color:inherit; }

/* smooth cross-page navigation (Chromium): crossfade between pages, and morph the
   logo from its seated size here to its large size on the homepage, so moving
   between pages doesn't hard-jump. Browsers without support just navigate normally. */
@view-transition { navigation: auto; }

/* ==========================================================
   NAV — the homepage's nav, VERBATIM, so inner pages are
   identical. nav.js plays the same logo-fly-in + link-parting
   on load. (index.html keeps its own inline copy; this mirrors
   it exactly. Only the flat page-colour background is added,
   since inner pages don't have the couch wipe behind the nav.)
   ========================================================== */
.top-nav {
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  right:0;

  height:74px;
  padding:0 clamp(24px,3.5vw,56px);

  display:flex;
  align-items:center;
  justify-content:space-evenly;

  color:#2c281f;
  transition:color .7s ease;   /* matches the logo/tagline crossfade so links invert black<->white in sync */

  pointer-events:none;
}
.nav-dark .top-nav { color:#fff; }   /* true white over dark (matches the homepage nav + the logo's white) */

.theme-light .top-nav { background:#ffffff; }
.theme-dark  .top-nav { background:var(--dark); }

.top-nav a {
  font-family:var(--serif);
  font-size:clamp(16px,1.2vw,19px);   /* slightly larger, matches the homepage nav */
  letter-spacing:.015em;
  color:inherit;
  text-decoration:none;

  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  white-space:nowrap;

  will-change:transform;
}
.top-nav > * { pointer-events:auto; }

/* hover feedback: a fine underline grows beneath the link */
.top-nav a { position:relative; -webkit-text-stroke:0.4px currentColor; }   /* faux-bold: Caslon has no bold face (matches the homepage nav) */
.top-nav a::after {
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-5px;
  height:1px;
  background:currentColor;
  opacity:.8;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.top-nav a:hover::after,
.top-nav a[aria-current="page"]::after { transform:scaleX(1); }   /* current page = persistent underline */
@media (prefers-reduced-motion:reduce) {
  .top-nav a::after { transition:none; }
}

.brand-logo {
  position:fixed;
  z-index:101;
  top:16px;
  left:50%;
  /* default = seated (also the no-JS fallback) */
  transform:translateX(-50%) translateY(0) scale(0.54);
  transform-origin:top center;

  width:clamp(280px,30vw,440px);
  container-type:inline-size;

  pointer-events:auto;
  will-change:transform;
  view-transition-name:brand-logo;   /* morph the logo across page navigations */
}
/* intro start pose (large + lowered), set via a head script so the FIRST paint
   is already here; nav.js then removes .js-intro and it transitions to seated */
.js-intro .brand-logo {
  transform:translateX(-50%) translateY(9vh) scale(1);
  transition:none;
}
/* mobile logo-seat: driven by a compositor CSS scroll-timeline (smooth, no main-thread JS) —
   same as the homepage. On mobile nav.js hands the seat to CSS (see cssOwnsSeat); this keyframe
   + the @media rule below drive it. Matches the JS mapping: translateY 9vh->0, scale 1->0.54. */
@keyframes logo-seat {
  from { transform:translateX(-50%) translateY(9vh) scale(1); }
  to   { transform:translateX(-50%) translateY(0)   scale(0.54); }
}
.brand-logo img {
  display:block;
  width:100%;
  height:auto;
  transition:opacity .4s ease;
}
.brand-logo .logo-white {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
}
.nav-dark .brand-logo .logo-light { opacity:0; }
.nav-dark .brand-logo .logo-white { opacity:1; }

.brand-sub {
  position:absolute;
  left:0;
  right:0;
  top:76%;

  text-align:center;
  white-space:nowrap;
  line-height:normal;        /* match the homepage (don't inherit body's 1.6) */

  font-family:var(--sans);
  font-weight:500;
  font-size:3.4cqw;
  letter-spacing:0.3em;
  text-transform:uppercase;

  color:#3a3633;
  pointer-events:none;
}
.nav-dark .brand-sub { color:#efe7d7; }

/* ==========================================================
   PAGE HERO + CONTENT
   ========================================================== */
main { padding-top:var(--nav-h); }

.page-hero {
  padding:clamp(70px,13vh,150px) var(--pad) clamp(40px,7vh,80px);
  max-width:1200px;
}

.eyebrow {
  font-family:var(--sans);
  font-weight:500;
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 clamp(18px,3vh,30px);
}

.page-hero h1 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px,7vw,104px);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}

.lede {
  font-family:var(--serif);
  font-size:clamp(19px,1.7vw,25px);
  line-height:1.55;
  max-width:60ch;
  margin:clamp(24px,4vh,40px) 0 0;
}
.theme-dark  .lede { color:#d9cfbd; }
.theme-light .lede { color:#4a443b; }

.section {
  padding:clamp(30px,6vh,70px) var(--pad) clamp(60px,10vh,110px);
  max-width:1200px;
}

.prose p {
  font-family:var(--serif);
  font-size:clamp(17px,1.25vw,20px);
  line-height:1.7;
  max-width:62ch;
  margin:0 0 1.1em;
}
.theme-dark  .prose p { color:#cfc6b6; }
.theme-light .prose p { color:#4a443b; }

/* a quiet "in progress" note for the stub pages */
.stub-note {
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:.02em;
  color:var(--muted);
  border-top:1px solid;
  border-color:rgba(130,120,100,.28);
  padding-top:22px;
  margin-top:clamp(30px,6vh,60px);
  max-width:60ch;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 28px;
  border-radius:2px;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
/* understated to match the site's hairline/taupe language: a thin taupe outline that
   fills on hover, rather than a solid block (the only filled box on an otherwise typographic site) */
.btn-primary { background:transparent; color:var(--brass); border:1px solid var(--brass); }
.btn-primary:hover { background:var(--charcoal); border-color:var(--charcoal); color:#fdfefe; transform:translateY(-1px); }
.btn-ghost {
  border:1px solid currentColor;
  opacity:.85;
}
.btn-ghost:hover { background:var(--charcoal); border-color:var(--charcoal); color:#fdfefe; opacity:1; }

/* ==========================================================
   SHARED FOOTER (dark on every page)
   ========================================================== */
.page-footer {
  background:var(--dark);
  color:var(--dark-sub);
  padding:clamp(60px,10vh,110px) var(--pad) 46px;
}
.page-footer .foot-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,5vw,80px);
  align-items:flex-start;
  justify-content:space-between;
}
.page-footer .foot-brand {
  font-family:var(--serif);
  font-size:clamp(26px,3vw,38px);
  letter-spacing:.02em;
}
.page-footer .foot-tag {
  font-family:var(--serif);
  font-size:18px;
  color:#c9bfad;
  margin:10px 0 0;
  max-width:34ch;
}
.page-footer .foot-links {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.page-footer .foot-links a {
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:.03em;
  text-decoration:none;
  color:#cfc6b6;
  transition:color .2s ease;
}
.page-footer .foot-links a:hover { color:#fff; }
.page-footer .foot-copy {
  width:100%;
  margin:clamp(40px,6vh,70px) 0 0;
  padding-top:22px;
  border-top:1px solid rgba(239,231,215,.14);
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.06em;
  color:#8a8170;
}

/* ==========================================================
   SIMPLE INTAKE FORM (Contact)
   ========================================================== */
.intake {
  display:grid;
  gap:22px;
  max-width:560px;
  margin-top:clamp(30px,5vh,50px);
}
.intake label {
  display:block;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:9px;
}
.intake input,
.intake textarea {
  width:100%;
  font-family:var(--serif);
  font-size:17px;
  color:var(--charcoal);
  background:#fff;
  border:1px solid rgba(130,120,100,.4);
  border-radius:2px;
  padding:13px 15px;
}
.intake textarea { min-height:130px; resize:vertical; }
.intake input:focus,
.intake textarea:focus { outline:2px solid var(--brass); outline-offset:1px; }

@media (max-width:620px){
  /* mobile nav matches the homepage: the two links (Pricing + Contact) pin to the
     edges, clear of the centred logo; full size (no 11px shrink). The logo-seat runs on a
     compositor CSS scroll-timeline (smooth) — nav.js hands the seat to CSS here (cssOwnsSeat). */
  .top-nav { justify-content:space-between; }
  .top-nav > a{ transform:none !important; }   /* phones: links stay pinned to the edges. Neutralises any desktop-parting transform left inline by nav.js (e.g. after rotating landscape->portrait, when the scroll-timeline path returns before apply()'s phone guard runs). */
  .brand-logo { width:min(82vw,350px); }   /* bigger landing logo on mobile, like the homepage */
  @supports (animation-timeline: scroll()){
    .brand-logo { animation:logo-seat linear both; animation-timeline:scroll(root block); animation-range:0 40vh; }
  }
}

/* ==========================================================
   FOOTER — cinematic (consistent with the home page): blurred
   photo + the couch rising from the bottom, pinned for scroll.
   ========================================================== */
.site-footer {
  position:relative;
  height:150vh;
  background:#17130d;
}
.footer-sticky {
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:#17130d;
}
.footer-bg {
  position:absolute;
  inset:0;
  top:-130px;
  z-index:0;
  background:url("story-tete.webp?v=1") center right / cover no-repeat fixed;
  will-change:filter;
}
.footer-scrim {
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(12,9,6,.94) 0%, rgba(12,9,6,.74) 32%, rgba(12,9,6,.18) 60%, rgba(12,9,6,0) 100%),
    linear-gradient(180deg, rgba(12,9,6,0) 40%, rgba(12,9,6,.5) 100%);
}
.footer-couch {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:0;
  width:min(1120px,86vw);
  height:auto;
  transform:translateX(-50%) translateY(100%);
  pointer-events:none;
  filter:drop-shadow(0 -20px 44px rgba(0,0,0,.5));
  will-change:transform;
}
.footer-bar {
  position:absolute;
  z-index:3;
  left:0; right:0;
  top:42%;
  transform:translateY(-50%);
  text-align:center;
  padding:0 24px;
  font-family:"DM Sans",Arial,Helvetica,sans-serif;
}
.footer-bar .footer-brand {
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:1.7rem;
  letter-spacing:.03em;
  color:#f4eddd;
  margin-bottom:16px;
}
.footer-bar .footer-links {
  display:flex;
  gap:26px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.footer-bar .footer-links a {
  color:rgba(245,240,230,.86);
  text-decoration:none;
  font-size:.9rem;
  letter-spacing:.02em;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:border-color .2s ease, color .2s ease;
}
.footer-bar .footer-links a:hover { color:#fff; border-bottom-color:rgba(245,240,230,.7); }
.footer-bar .footer-copy {
  font-size:.76rem;
  color:rgba(245,240,230,.5);
  letter-spacing:.05em;
}