/* =========================================================
   Counterfit Fabrication — Design System
   ---------------------------------------------------------
   Strategy
   - All sizing in rem (1rem = 16px at root).
   - Fluid scale uses clamp(min, calc-with-vw, max) where the
     middle term is computed from min/max viewport widths and
     min/max rem values, so type & space scale linearly between
     320px and 1440px and clamp at the extremes.
   - One type scale (--step-* / --step--*) shared by display,
     headings and body. One spacing scale (--space-*) used for
     all paddings, margins, gaps.
   - Layers control cascade specificity: tokens < base < layout
     < components < utilities.
   ========================================================= */

@layer tokens, base, layout, components, utilities;

/* =========================================================
   TOKENS
   ========================================================= */
@layer tokens {
  :root {
    /* ---- Fluid scaling math ----
       Convert min/max viewport widths to rem (assumes 16px root).
       320px = 20rem,  1440px = 90rem
       slope = (max-rem - min-rem) / (max-vw-rem - min-vw-rem)
       intercept = min-rem - slope * min-vw-rem
       fluid = intercept + slope * 100vw
                       = (intercept)rem + (slope * 100)vw
       Each step below pre-computes those constants. */

    --vp-min: 20;     /* 320px in rem (unitless for calc) */
    --vp-max: 90;     /* 1440px in rem */

    /* Type scale (modular: ~1.2 mobile -> 1.333 desktop)
       Each step gives clamp(min-rem, fluid, max-rem). */

    /* step--2: 12 -> 13   (0.75   -> 0.8125) */
    --step--2: clamp(0.75rem,
      calc(0.7321rem + 0.0893vw),
      0.8125rem);

    /* step--1: 14 -> 15   (0.875  -> 0.9375) */
    --step--1: clamp(0.875rem,
      calc(0.8571rem + 0.0893vw),
      0.9375rem);

    /* step-0  body: 16 -> 18  (1     -> 1.125) */
    --step-0: clamp(1rem,
      calc(0.9643rem + 0.1786vw),
      1.125rem);

    /* step-1: 18 -> 22 (1.125 -> 1.375) */
    --step-1: clamp(1.125rem,
      calc(1.0536rem + 0.3571vw),
      1.375rem);

    /* step-2: 22 -> 28 (1.375 -> 1.75) */
    --step-2: clamp(1.375rem,
      calc(1.2679rem + 0.5357vw),
      1.75rem);

    /* step-3: 26 -> 36 (1.625 -> 2.25) */
    --step-3: clamp(1.625rem,
      calc(1.4464rem + 0.8929vw),
      2.25rem);

    /* step-4: 32 -> 48 (2 -> 3) */
    --step-4: clamp(2rem,
      calc(1.7143rem + 1.4286vw),
      3rem);

    /* step-5: 40 -> 64 (2.5 -> 4) */
    --step-5: clamp(2.5rem,
      calc(2.0714rem + 2.1429vw),
      4rem);

    /* step-6 hero: 48 -> 96 (3 -> 6) */
    --step-6: clamp(3rem,
      calc(2.1429rem + 4.2857vw),
      6rem);

    /* Aliases for readability ------------------------------ */
    --fs-eyebrow: var(--step--2);
    --fs-small:   var(--step--1);
    --fs-body:    var(--step-0);
    --fs-lead:    var(--step-1);
    --fs-h3:      var(--step-2);
    --fs-h2:      var(--step-4);
    --fs-h1:      var(--step-6);
    --fs-display: var(--step-6);

    /* Spacing scale (rem). Same fluid pattern. */
    /* 4 -> 6 */
    --space-3xs: clamp(0.25rem, calc(0.2143rem + 0.1786vw), 0.375rem);
    /* 8 -> 12 */
    --space-2xs: clamp(0.5rem,  calc(0.4286rem + 0.3571vw), 0.75rem);
    /* 12 -> 16 */
    --space-xs:  clamp(0.75rem, calc(0.6786rem + 0.3571vw), 1rem);
    /* 16 -> 24 */
    --space-s:   clamp(1rem,    calc(0.8571rem + 0.7143vw), 1.5rem);
    /* 24 -> 32 */
    --space-m:   clamp(1.5rem,  calc(1.3571rem + 0.7143vw), 2rem);
    /* 32 -> 48 */
    --space-l:   clamp(2rem,    calc(1.7143rem + 1.4286vw), 3rem);
    /* 48 -> 72 */
    --space-xl:  clamp(3rem,    calc(2.5714rem + 2.1429vw), 4.5rem);
    /* 64 -> 112 */
    --space-2xl: clamp(4rem,    calc(3.1429rem + 4.2857vw), 7rem);
    /* 96 -> 160 */
    --space-3xl: clamp(6rem,    calc(4.8571rem + 5.7143vw), 10rem);

    /* Color */
    --bg:          #F5F4F0;
    --bg-tinted:   #F1EFE9;
    --surface:     #FFFFFF;
    --ink:         #0F0F0E;
    --ink-soft:    #2C2C29;
    --ink-muted:   #5C5C58;
    --line:        #E5E4DE;
    --line-soft:   #EDEBE5;
    --accent:      #B8541F;
    --accent-hi:   #C95E25;
    --accent-soft: #F4E8DF;

    --shadow-sm: 0 1px 2px rgba(15,15,14,.04);
    --shadow-md: 0 1px 2px rgba(15,15,14,.04), 0 8px 24px rgba(15,15,14,.06);
    --shadow-lg: 0 1px 2px rgba(15,15,14,.04), 0 24px 56px rgba(15,15,14,.10);

    /* Radius */
    --radius-xs: 0.5rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999rem;

    /* Layout */
    --container-max: 75rem;     /* 1200px */
    --container-narrow: 47.5rem;/* 760px  */
    --gutter: var(--space-s);
    --header-h: 4.5rem;         /* 72px */
    --header-h-mobile: 4rem;    /* 64px */

    /* Type families */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 200ms;
    --dur-2: 300ms;
    --dur-3: 500ms;
    --dur-4: 700ms;

    /* Z */
    --z-header: 80;
    --z-mobile-nav: 90;
    --z-lightbox: 120;

    color-scheme: light;
  }
}

/* =========================================================
   BASE
   ========================================================= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-size: 100%;            /* 16px root — drives all rem */
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    font-feature-settings: "kern", "liga", "calt", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }

  body.is-locked { overflow: hidden; }

  img, svg, iframe, video { display: block; max-width: 100%; }
  img { height: auto; }
  a  { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; padding: 0; margin: 0; }

  section { scroll-margin-top: calc(var(--header-h) + var(--space-s)); }

  ::selection { background: var(--accent-soft); color: var(--ink); }

  :focus-visible {
    outline: 0.125rem solid var(--accent);
    outline-offset: 0.125rem;
    border-radius: 0.25rem;
  }

  .skip {
    position: absolute; left: -10000rem; top: 0;
    padding: var(--space-2xs) var(--space-s);
    background: var(--ink); color: var(--bg);
    z-index: 200; border-radius: 0 0 var(--radius-xs) 0;
  }
  .skip:focus { left: 0; }

  /* Type defaults */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
  }
  h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2xs);
  }
  p { margin: 0 0 1em; }
}

/* =========================================================
   LAYOUT
   ========================================================= */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container.narrow { max-width: var(--container-narrow); }

  .section { padding-block: var(--space-2xl); }
  .section-tinted {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 4%, transparent), transparent);
  }

  .section-head {
    max-width: 47.5rem;
    margin: 0 auto var(--space-xl);
  }
  .section-head.center { text-align: center; }

  .grid { display: grid; gap: var(--space-m); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 57.5rem) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 40rem) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
  }
}

/* =========================================================
   COMPONENTS
   ========================================================= */
@layer components {

  /* ---------- Type utilities ---------- */
  .display {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-display);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ink);
  }
  .display-2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .display .line-1 { display: block; }
  .display .line-2 { display: block; font-weight: 400; color: var(--ink-muted); }

  .eyebrow {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 var(--space-xs);
  }
  .eyebrow-tight { margin-bottom: var(--space-2xs); }
  .dot-sep { color: var(--line); margin-inline: 0.35em; }

  .subhead {
    color: var(--ink-muted);
    max-width: 60ch;
    font-size: var(--fs-lead);
  }
  .section-head.center .subhead { margin-inline: auto; }
  .muted { color: var(--ink-muted); }
  .muted-soft { color: var(--ink-muted); font-weight: 400; }
  .center { text-align: center; }
  .small { font-size: var(--fs-small); }

  /* ---------- Header ---------- */
  .site-header {
    position: fixed; inset: 0 0 auto 0;
    height: var(--header-h);
    z-index: var(--z-header);
    display: flex; align-items: center;
    background: transparent;
    transition: background var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease),
                backdrop-filter var(--dur-1) var(--ease);
    border-bottom: 1px solid transparent;
  }
  @media (max-width: 47.5rem) {
    .site-header { height: var(--header-h-mobile); }
    section { scroll-margin-top: calc(var(--header-h-mobile) + var(--space-s)); }
  }
  .site-header.is-stuck {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    -webkit-backdrop-filter: blur(0.75rem);
            backdrop-filter: blur(0.75rem);
    border-bottom-color: var(--line);
  }
  .header-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-s);
    height: 100%;
  }

  .brand {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-lead);
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.875rem; height: 1.875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    color: var(--ink);
  }
  @media (max-width: 30rem) {
    .brand-word { font-size: var(--fs-body); }
  }

  .primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-left: auto;
    margin-right: var(--space-m);
    font-size: var(--fs-small);
  }
  .primary-nav a {
    color: var(--ink-muted);
    font-weight: 500;
    position: relative;
    padding-block: 0.25rem;
    transition: color var(--dur-1) var(--ease);
  }
  .primary-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-2) var(--ease);
  }
  .primary-nav a:hover { color: var(--ink); }
  .primary-nav a:hover::after { transform: scaleX(1); }
  @media (max-width: 64rem) {
    .primary-nav { display: none; }
  }

  .header-actions {
    display: flex; align-items: center; gap: var(--space-s);
  }
  .header-phone {
    font-weight: 500;
    color: var(--ink);
    position: relative;
    font-size: var(--fs-small);
  }
  .header-phone::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.1875rem;
    height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-2) var(--ease);
  }
  .header-phone:hover::after { transform: scaleX(1); }
  @media (max-width: 47.5rem) {
    .header-phone { display: none; }
  }

  .nav-toggle {
    display: none;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--line);
    background: var(--surface);
    align-items: center; justify-content: center;
  }
  .nav-toggle-bars {
    width: 1.125rem; height: 0.875rem;
    position: relative; display: inline-block;
  }
  .nav-toggle-bars span {
    position: absolute; left: 0; right: 0; height: 1.5px;
    background: var(--ink); border-radius: 999rem;
    transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), top var(--dur-2) var(--ease);
  }
  .nav-toggle-bars span:nth-child(1) { top: 0; }
  .nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .nav-toggle-bars span:nth-child(3) { top: calc(100% - 1.5px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

  @media (max-width: 47.5rem) {
    .nav-toggle { display: inline-flex; }
    /* Hide the small "Call Lorin" pill on mobile — replaced by the
       full-width button inside the mobile menu and the CTA in hero. */
    .header-actions .btn-primary { display: none; }
  }

  /* ---------- Mobile nav panel ---------- */
  .mobile-nav {
    position: fixed; left: 0; right: 0;
    top: var(--header-h-mobile);
    bottom: 0;
    z-index: var(--z-mobile-nav);
    background: var(--bg);
    padding: var(--space-l) var(--gutter) var(--space-xl);
    overflow-y: auto;
    transform: translateY(-1rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .mobile-nav[hidden] { display: block; } /* override default to allow transition */
  .mobile-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-nav nav {
    display: flex; flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-l);
  }
  .mobile-nav nav a {
    display: block;
    padding: var(--space-s) 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  .mobile-nav-cta { font-size: var(--fs-body); }
  @media (min-width: 47.5625rem) {
    .mobile-nav, .mobile-nav.is-open { display: none; }
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2xs);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: var(--fs-small);
    border: 1px solid transparent;
    transition: transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                background var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease);
    white-space: nowrap;
    will-change: transform;
  }
  .btn-lg    { padding: 1rem 1.625rem; font-size: var(--fs-body); }
  .btn-block { width: 100%; padding: 1rem; font-size: var(--fs-body); }

  .btn-primary {
    background: var(--ink);
    color: var(--bg);
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 0.375rem 1.125rem rgba(15,15,14,.18);
  }
  .btn-primary:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0.625rem 1.625rem rgba(184,84,31,.28);
  }
  .btn-primary:active { transform: translateY(1px); }

  .link-arrow {
    display: inline-flex; align-items: center; gap: 0.375rem;
    color: var(--ink); font-weight: 500;
    position: relative;
    font-size: var(--fs-body);
  }
  .link-arrow span { transition: transform var(--dur-2) var(--ease); display: inline-block; }
  .link-arrow:hover span { transform: translateX(0.25rem); }
  .link-arrow::after {
    content: ""; position: absolute; left: 0; right: 1.375rem; bottom: -0.1875rem;
    height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-2) var(--ease);
  }
  .link-arrow:hover::after { transform: scaleX(1); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
    overflow: hidden;
  }
  @media (max-width: 47.5rem) {
    .hero { padding-block: calc(var(--header-h-mobile) + var(--space-l)) var(--space-2xl); }
  }
  .hero-bg { position: absolute; inset: 0; pointer-events: none; }
  .dot-grid {
    position: absolute; inset: -10%;
    background-image: radial-gradient(rgba(15,15,14,.16) 1px, transparent 1px);
    background-size: 1.5rem 1.5rem;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    opacity: 0.55;
  }
  @media (prefers-reduced-motion: no-preference) {
    .dot-grid { animation: drift 22s linear infinite; }
    @keyframes drift {
      0%   { background-position: 0 0; }
      50%  { background-position: 0.75rem 0.5rem; }
      100% { background-position: 0 0; }
    }
  }
  .cursor-halo {
    position: absolute;
    width: 31.25rem; height: 31.25rem;
    left: var(--mx, 50%); top: var(--my, 40%);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(184,84,31,.18), transparent 60%);
    filter: blur(0.5rem);
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease);
    pointer-events: none;
  }
  .hero:hover .cursor-halo { opacity: 1; }
  @media (hover: none) { .cursor-halo { display: none; } }

  .hero-inner { position: relative; }

  .cta-row {
    display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap;
    margin: var(--space-m) 0 var(--space-xl);
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
    border-top: 1px solid var(--line);
    padding-top: var(--space-m);
    max-width: 47.5rem;
  }
  @media (max-width: 37.5rem) {
    .hero-stats { grid-template-columns: 1fr; gap: var(--space-s); }
  }
  .hero-stats li { display: flex; flex-direction: column; gap: 0.375rem; }
  .stat-num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-5);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .stat-label {
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .scroll-cue {
    position: absolute; bottom: -0.5rem; left: 50%; transform: translateX(-50%);
    width: 2.375rem; height: 2.375rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-muted);
    background: var(--surface);
  }
  @media (prefers-reduced-motion: no-preference) {
    .scroll-cue { animation: bob 2.4s var(--ease) infinite; }
    @keyframes bob {
      0%, 100% { transform: translate(-50%, 0); }
      50%      { transform: translate(-50%, 0.375rem); }
    }
  }

  /* ---------- Cards ---------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-m);
    transition: transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
  }
  .card:hover {
    transform: translateY(-0.1875rem);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  }
  .card-tall { padding: var(--space-l); }

  .card-icon, .service-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--accent);
    margin-bottom: var(--space-s);
  }
  .card-icon svg, .service-icon svg { width: 1.375rem; height: 1.375rem; }
  .service-card p { margin-bottom: 0; color: var(--ink-muted); }

  /* ---------- Marquee ---------- */
  .marquee {
    position: relative;
    overflow: hidden;
    margin-inline: calc(var(--gutter) * -1);
    margin-bottom: var(--space-xl);
    padding-block: var(--space-s);
    border-block: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track {
    display: inline-flex; gap: 1.75rem; align-items: center;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: var(--step-3);
    letter-spacing: -0.01em;
    color: var(--ink);
    padding-left: 1.75rem;
  }
  .marquee-track .dot { color: var(--accent); }
  @media (prefers-reduced-motion: no-preference) {
    .marquee-track { animation: marquee 32s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
  }

  /* ---------- Edges ---------- */
  .edge-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-s);
    margin-bottom: var(--space-l);
  }
  @media (max-width: 56.25rem) { .edge-row { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 30rem)    { .edge-row { grid-template-columns: repeat(2, 1fr); } }
  .edge {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs);
    padding: var(--space-m) var(--space-xs);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .edge svg {
    width: 100%; max-width: 7.5rem; height: auto; color: var(--ink);
    transition: transform var(--dur-2) var(--ease);
  }
  .edge:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
  .edge:hover svg { transform: scale(1.05); }
  .edge span { font-size: var(--fs-small); font-weight: 500; color: var(--ink-muted); }

  /* ---------- Filters / Gallery ---------- */
  .filters {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--space-l);
  }
  .pill {
    padding: 0.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    background: var(--surface);
    color: var(--ink-muted);
    transition: background var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease);
  }
  .pill:hover { color: var(--ink); border-color: var(--ink); }
  .pill.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
  }
  @media (max-width: 56.25rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 37.5rem)  { .gallery { grid-template-columns: repeat(2, 1fr); } }

  .g-item:nth-child(7n+1) { grid-row: span 2; }
  @media (max-width: 37.5rem) { .g-item:nth-child(7n+1) { grid-row: auto; } }

  .g-btn {
    display: block; width: 100%; height: 100%;
    padding: 0; overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    cursor: zoom-in;
    position: relative;
  }
  .g-btn img {
    width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: transform 600ms var(--ease), opacity 600ms var(--ease);
  }
  .g-item:nth-child(7n+1) .g-btn img { aspect-ratio: 4 / 5; }
  .g-btn:hover img { transform: scale(1.04); }

  .is-revealing { opacity: 0; transform: scale(1.04); }
  .is-revealed  { opacity: 1; transform: scale(1);
                  transition: transform var(--dur-4) var(--ease), opacity var(--dur-4) var(--ease); }

  /* ---------- Timeline ---------- */
  .timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l);
    padding-top: var(--space-l);
    margin-bottom: var(--space-s);
  }
  @media (max-width: 51.25rem) {
    .timeline { grid-template-columns: 1fr; padding-top: 0; padding-left: 2.25rem; }
  }
  .timeline-track {
    position: absolute;
    top: 1.375rem; left: 4%; right: 4%; height: 2px;
    background: var(--line); border-radius: 2px;
  }
  .timeline-fill {
    display: block; height: 100%; width: 0;
    background: var(--accent);
    transition: width 1.4s var(--ease);
  }
  @media (max-width: 51.25rem) {
    .timeline-track { top: 0; bottom: 0; left: 0.875rem; right: auto; width: 2px; height: auto; }
    .timeline-fill  { width: 100%; height: 0; transition: height 1.4s var(--ease); }
    .timeline-fill.is-on { height: 100%; }
  }
  .step { position: relative; }
  .step-node {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--line);
    font-size: var(--fs-small); font-weight: 600; color: var(--ink-muted);
    margin-bottom: var(--space-2xs);
    position: relative; z-index: 1;
  }
  @media (max-width: 51.25rem) {
    .step-node { position: absolute; left: -2.25rem; top: 0; }
    .step { padding-left: 0.25rem; padding-bottom: var(--space-m); }
  }
  .step h3 { font-size: var(--fs-lead); }
  .step p { color: var(--ink-muted); margin: 0; }

  /* ---------- Lorin / Workshop ---------- */
  .lorin-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-xl);
    align-items: center;
  }
  @media (max-width: 51.25rem) { .lorin-row { grid-template-columns: 1fr; } }
  .lorin-photo {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
  }
  .lorin-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

  .pull-quote {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-2);
    line-height: 1.45;
    color: var(--ink);
  }
  .pull-quote p { margin: 0 0 var(--space-s); }
  .pull-quote footer {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    font-weight: 500;
  }
  .pull-quote footer strong { color: var(--ink); }

  .address {
    font-style: normal;
    font-size: var(--fs-body);
    margin-bottom: var(--space-2xs);
  }
  .hours { color: var(--ink-muted); margin-bottom: var(--space-s); }
  .map {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 11;
    background: var(--surface);
  }
  .map iframe { width: 100%; height: 100%; border: 0; }

  .service-area {
    display: flex; flex-direction: column; gap: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--ink);
  }
  .service-area li { border-bottom: 1px solid var(--line); padding-bottom: var(--space-2xs); }
  .service-area li:last-child { border-bottom: 0; }

  /* ---------- Phone display + form ---------- */
  .phone-display {
    display: block;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-5);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    padding-block: var(--space-s);
    transition: color var(--dur-1) var(--ease);
  }
  .phone-display:hover { color: var(--accent); }

  .or-divider {
    display: flex; align-items: center; gap: var(--space-xs);
    color: var(--ink-muted);
    margin-block: var(--space-l);
    font-size: var(--fs-small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .or-divider::before, .or-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
  }

  .contact-form { display: grid; gap: var(--space-s); }
  .field { display: grid; gap: 0.375rem; }
  .field > span {
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .field input, .field select, .field textarea {
    font: inherit;
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .field textarea { resize: vertical; min-height: 6.875rem; }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--accent) 20%, transparent);
    outline: none;
  }
  .form-status {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    text-align: center;
    min-height: 1.25rem;
  }
  .form-status.is-success { color: var(--accent); }

  /* ---------- Footer ---------- */
  .site-footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding-block: var(--space-xl) var(--space-m);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-l);
    margin-bottom: var(--space-l);
  }
  @media (max-width: 45rem) { .footer-grid { grid-template-columns: 1fr; } }
  .brand-footer { margin-bottom: var(--space-xs); }
  .footer-h {
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 var(--space-2xs);
  }
  .footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: var(--space-s);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    text-align: center;
  }

  /* ---------- Lightbox ---------- */
  .lightbox {
    position: fixed; inset: 0; z-index: var(--z-lightbox);
    background: rgba(15,15,14,.92);
    display: none;
    align-items: center; justify-content: center;
    padding: var(--space-s);
  }
  .lightbox.is-open { display: flex; }
  .lb-img {
    max-width: min(75rem, 92vw);
    max-height: 86vh;
    width: auto; height: auto;
    border-radius: var(--radius-xs);
    box-shadow: 0 1.875rem 5rem rgba(0,0,0,.5);
  }
  .lb-close, .lb-prev, .lb-next {
    position: absolute;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--dur-1) var(--ease);
  }
  .lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.16); }
  .lb-close { top: 1.125rem; right: 1.125rem; }
  .lb-prev  { left: 1.125rem; top: 50%; transform: translateY(-50%); }
  .lb-next  { right: 1.125rem; top: 50%; transform: translateY(-50%); }
}

/* =========================================================
   UTILITIES (animation hooks)
   ========================================================= */
@layer utilities {
  [data-animate] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity var(--dur-4) var(--ease),
                transform var(--dur-4) var(--ease);
    transition-delay: var(--anim-delay, 0ms);
  }
  [data-animate].is-in {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    html { scroll-behavior: auto; }
    [data-animate] { opacity: 1; transform: none; }
    .is-revealing { opacity: 1; transform: none; }
  }
}