/*
 * Tenfold Motion site styles (grown from the earn-sprint bakery sample page). Layers, in order of reuse:
 *   tokens     brand-neutral design tokens (re-skin by editing only these)
 *   base       element defaults, typography, focus, reduced motion
 *   layout     .wrap .stack .cluster .grid-* .section (page-agnostic)
 *   components .btn .card .badge .media-frame .price-card .feature .steps
 *              .form/.field .alert .site-header .site-footer
 *   utilities  .visually-hidden .hp
 * Mobile-first: base rules target ~320-479px; min-width queries add columns.
 */
@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --c-bg: #faf8f4;
    --c-surface: #ffffff;
    --c-alt: #f1ede6;
    --c-ink: #1f2a2e;
    --c-muted: #4d5a5e;
    --c-line: #d9d3c9;
    --c-accent: #0b5d57;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #e6efec;
    --c-highlight: #f3c77a;
    --c-error: #b3261e;
    --c-error-bg: #fdecea;
    --c-success: #1e6b3a;
    --c-success-bg: #e7f4ec;
    --c-focus: #1a56db;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-0: 1rem;
    --fs-1: 1.125rem;
    --fs-2: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    --fs-3: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
    --lh: 1.6;

    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;

    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgb(31 42 46 / .06), 0 6px 20px rgb(31 42 46 / .06);
    --wrap: 72rem;
    --wrap-narrow: 40rem;
    --header-h: 3.75rem;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-4)); -webkit-text-size-adjust: 100%; }
  body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-0); line-height: var(--lh); color: var(--c-ink); background: var(--c-bg); }
  img, video { max-width: 100%; height: auto; display: block; }
  h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
  h1 { font-size: var(--fs-3); letter-spacing: -.01em; }
  h2 { font-size: var(--fs-2); }
  h3 { font-size: var(--fs-1); }
  p, ul, ol, figure { margin: 0; }
  a { color: var(--c-accent); text-underline-offset: .15em; }
  :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
  main:focus { outline: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  }
}

@layer layout {
  .wrap { width: min(100% - 2 * var(--sp-4), var(--wrap)); margin-inline: auto; }
  .narrow { max-width: var(--wrap-narrow); }
  .stack > * + * { margin-top: var(--sp-4); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .grid { display: grid; gap: var(--sp-4); padding: 0; list-style: none; }
  .section { padding-block: var(--sp-7); }
  .section-alt { background: var(--c-alt); }
  .section-intro { color: var(--c-muted); max-width: 44rem; }
  @media (min-width: 40rem) {
    .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 64rem) {
    .wrap { width: min(100% - 2 * var(--sp-6), var(--wrap)); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .section { padding-block: var(--sp-8); }
  }
}

@layer components {
  /* Skip link */
  .skip-link { position: absolute; left: var(--sp-3); top: -10rem; z-index: 100; background: var(--c-ink); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); }
  .skip-link:focus { top: var(--sp-3); }

  /* Header */
  .site-header { position: sticky; top: 0; z-index: 10; background: rgb(250 248 244 / .96); border-bottom: 1px solid var(--c-line); }
  .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--header-h); }
  .brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-ink); text-decoration: none; }
  .brand-name { font-weight: 700; line-height: 1.1; display: flex; flex-direction: column; }
  .brand-name small { font-weight: 500; color: var(--c-muted); font-size: .8rem; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.25rem; border-radius: 999px; border: 2px solid var(--c-accent); background: var(--c-accent); color: var(--c-accent-ink); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
  .btn:hover { background: #084843; border-color: #084843; }
  .btn-ghost { background: transparent; color: var(--c-accent); }
  .btn-ghost:hover { background: var(--c-accent-soft); color: #084843; }
  .btn-small { min-height: 44px; padding: .45rem 1rem; font-size: .95rem; }
  .btn-block { width: 100%; }
  .btn[disabled] { opacity: .7; cursor: progress; }

  /* Cards, badges */
  .card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow); }
  .badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
  .badge-featured { background: var(--c-highlight); color: var(--c-ink); }
  .badge-example { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1; background: rgb(31 42 46 / .88); color: #fff; pointer-events: none; }

  /* Hero */
  .eyebrow { font-weight: 700; color: var(--c-accent); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
  .lede { font-size: var(--fs-1); color: var(--c-muted); max-width: 36rem; }
  .hero { padding-top: var(--sp-5); }
  .hero-grid { display: grid; gap: var(--sp-6); align-items: center; }
  .hero-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: 0; list-style: none; color: var(--c-muted); }
  .hero-facts strong { color: var(--c-ink); }
  /* The example clip comes first in the markup so it is the first thing visitors see on phones. */
  @media (min-width: 56rem) { .hero-grid { grid-template-columns: .85fr 1.15fr; gap: var(--sp-7); } }

  /* Media frame (reusable for any portfolio clip) */
  .media-frame { width: min(100%, 22rem); justify-self: center; }
  .media-box { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: var(--c-ink); box-shadow: var(--shadow); }
  .media { width: 100%; height: 100%; object-fit: cover; }
  .media-caption { margin-top: var(--sp-3); font-size: .9rem; color: var(--c-muted); }

  /* Features */
  .feature-list .feature > * + * { margin-top: var(--sp-3); }
  .feature p { color: var(--c-muted); }

  /* Price cards */
  .price-card { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
  .price-card.is-featured { border: 2px solid var(--c-accent); }
  .price-card .badge-featured { align-self: flex-start; }
  .price-amount { font-size: 2.25rem; font-weight: 800; }
  .ticks { padding: 0; list-style: none; flex: 1; }
  .ticks li { padding-left: 1.6rem; position: relative; margin-block: .35rem; }
  .ticks li::before { content: ""; position: absolute; left: .2rem; top: .45rem; width: .8rem; height: .45rem; border-left: 2.5px solid var(--c-accent); border-bottom: 2.5px solid var(--c-accent); transform: rotate(-45deg); }
  .fine-print summary { cursor: pointer; font-weight: 650; min-height: 24px; }
  .fine-print ul { margin-top: var(--sp-3); padding-left: 1.2rem; color: var(--c-muted); }

  /* Steps */
  .steps { counter-reset: step; }
  .step { counter-increment: step; background: var(--c-surface); border-radius: var(--radius); padding: var(--sp-5); border: 1px solid var(--c-line); }
  .step::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-accent); color: #fff; font-weight: 700; margin-bottom: var(--sp-3); }
  .step p { color: var(--c-muted); margin-top: var(--sp-2); }

  /* Forms */
  .form { padding: var(--sp-5); }
  .field { display: flex; flex-direction: column; gap: var(--sp-1); }
  /* min-width: 0 overrides the fieldset default (min-content), which let the
     file input push the page 12px wider than a 375px phone (found in testing). */
  .fieldset { min-width: 0; border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: var(--sp-4); margin: 0; gap: var(--sp-3); }
  .fieldset legend { font-weight: 650; padding-inline: var(--sp-1); }
  label { font-weight: 650; }
  .req, .opt { font-weight: 400; color: var(--c-muted); font-size: .9rem; }
  input[type="text"], input[type="email"], input[type="url"], select, textarea { font: inherit; width: 100%; min-height: 48px; padding: .6rem .75rem; border: 1.5px solid #8a9396; border-radius: var(--radius-sm); background: #fff; color: var(--c-ink); }
  input[type="file"] { font: inherit; width: 100%; max-width: 100%; padding: var(--sp-2) 0; }
  textarea { resize: vertical; }
  [aria-invalid="true"] { border-color: var(--c-error) !important; box-shadow: 0 0 0 1px var(--c-error); }
  .hint { color: var(--c-muted); font-size: .9rem; }
  .error-msg { color: var(--c-error); font-weight: 600; font-size: .95rem; }
  .error-msg:empty { display: none; }
  .or { text-align: center; color: var(--c-muted); font-weight: 600; }
  .file-list { padding: 0; list-style: none; font-size: .9rem; color: var(--c-muted); }
  .file-list:empty { display: none; }
  .status { min-height: 1.5rem; color: var(--c-muted); }
  .alert { border-radius: var(--radius); padding: var(--sp-5); border: 2px solid; }
  .alert > * + * { margin-top: var(--sp-3); }
  .alert-error { background: var(--c-error-bg); border-color: var(--c-error); }
  .alert-error ul { padding-left: 1.2rem; }
  .alert-error a { color: var(--c-error); font-weight: 600; }
  .alert-success { background: var(--c-success-bg); border-color: var(--c-success); }

  /* Footer */
  .site-footer { background: var(--c-ink); color: #e9ecec; padding-block: var(--sp-6); }
  .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-5); }
}

@layer utilities {
  .visually-hidden, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [hidden] { display: none !important; }
}

@layer components {
  /* Site nav: inline on wide screens, disclosure menu on phones (no-js.css shows the plain list without JS) */
  .site-nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding: 0; margin: 0; list-style: none; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; font-weight: 600; }
  .site-nav a:hover { color: var(--c-accent); text-decoration: underline; }
  .site-nav a[aria-current="page"] { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 2px; }
  .nav-toggle { font: inherit; font-weight: 650; min-height: 44px; padding: .4rem 1rem; border: 2px solid var(--c-accent); border-radius: 999px; background: transparent; color: var(--c-accent); cursor: pointer; }
  .header-inner { position: relative; flex-wrap: wrap; }
  @media (max-width: 63.99rem) {
    .site-nav { display: none; position: absolute; top: 100%; left: calc(-1 * var(--sp-4)); right: calc(-1 * var(--sp-4)); background: var(--c-bg); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow); padding: var(--sp-2) var(--sp-4) var(--sp-4); }
    .site-nav.is-open { display: block; }
    .site-nav ul { flex-direction: column; }
  }
  @media (min-width: 64rem) { .nav-toggle { display: none; } }

  .page-head { padding-bottom: var(--sp-5); }
  .section-tight { padding-top: var(--sp-5); }
  .center { text-align: center; margin-inline: auto; }
  .center .section-intro { margin-inline: auto; }
  .cluster-center { justify-content: center; }
  .stack-sm > * + * { margin-top: var(--sp-1); }

  /* Clip grid */
  .clip-grid { align-items: start; }
  .clip-card { display: flex; flex-direction: column; gap: var(--sp-2); }
  .clip-card .media-frame { width: 100%; max-width: 22rem; justify-self: start; }
  .clip-card h3 { margin-top: var(--sp-2); }
  .clip-proof { font-size: .9rem; font-weight: 600; color: var(--c-ink); background: var(--c-accent-soft); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
  .service-price { color: var(--c-muted); }
  .service-card { display: flex; flex-direction: column; }
  .service-card .btn { margin-top: auto; }

  /* Case study */
  .badge-concept { background: var(--c-highlight); color: var(--c-ink); }
  .case-card { display: grid; gap: var(--sp-5); }
  .case-shots { display: grid; grid-template-columns: 3fr 1fr; gap: var(--sp-3); align-items: start; }
  .case-shots img, .shot-grid img { border-radius: var(--radius-sm); border: 1px solid var(--c-line); background: #fff; }
  @media (min-width: 56rem) { .case-card { grid-template-columns: 1.3fr 1fr; align-items: center; } }
  .case-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: 0; }
  .case-facts dt { font-size: .85rem; color: var(--c-muted); font-weight: 600; }
  .case-facts dd { margin: 0; font-weight: 650; }
  .shot-grid figcaption { margin-top: var(--sp-2); font-size: .9rem; color: var(--c-muted); }

  /* Price table */
  .table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); }
  .price-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
  .price-table th, .price-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); vertical-align: top; }
  .price-table tbody tr:last-child > * { border-bottom: 0; }
  .price-table thead th { font-size: .9rem; color: var(--c-muted); }
  .price-note { font-size: var(--fs-1); }

  .alert-info { background: var(--c-accent-soft); border-color: var(--c-accent); }
  .prose h2 { margin-top: var(--sp-6); }

  .footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: 0; margin: 0; list-style: none; }
  .site-footer a { color: #fff; display: inline-flex; min-height: 44px; align-items: center; }
  .footer-inner { align-items: center; }
}

@layer components {
  /* Single featured clip (Video page when a category has one item) */
  .clip-feature { display: grid; gap: var(--sp-5); align-items: center; }
  .clip-feature .media-frame { width: min(100%, 20rem); justify-self: center; }
  .clip-feature p { color: var(--c-muted); }
  .clip-feature .badge-example { color: #fff; } /* keep the badge white; .clip-feature p would grey it */
  .clip-feature .media-caption { margin-top: 0; }
  @media (min-width: 48rem) { .clip-feature { grid-template-columns: minmax(14rem, 20rem) 1fr; gap: var(--sp-7); padding: var(--sp-6); } .clip-feature .media-frame { justify-self: start; } }
  .more-soon { color: var(--c-muted); font-weight: 600; text-align: center; }
}