:root{
    --gap-xs: .5rem;  --gap-s: 1rem;   --gap-m: 1.75rem;
    --gap-l: 3rem;    --gap-xl: 5rem;  --gap-2xl: 7.5rem;
    --ease-out:    cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.22,1,.36,1); /* exponential ease-out */
    --nav-h: 104px;
    --gold: #FBBC04;   /* Google's review-star amber — a third-party mark, not an AMS brand colour */
  }

  @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
  section[id]{ scroll-margin-top:var(--nav-h); }
  body{
    background:#231F20;
    font-family:Inter, system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---- Type system (Guidelines §04) --------------------------------- */
  .h-display{
    font-family:"Barlow Condensed", sans-serif;
    font-weight:700; font-style:italic; text-transform:uppercase;
    letter-spacing:-.03em; line-height:.9;
    text-wrap:balance;
  }
  .h-sub{
    font-family:"Barlow Condensed", sans-serif;
    font-weight:500; text-transform:uppercase; letter-spacing:.02em;
  }
  .prose-body{ line-height:1.7; }
  .num{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

  /* ---- The red dash: the brand's own divider, used as page structure -- */
  .eyebrow .dash{ margin-top:.32rem; }
  .dash{
    display:inline-block; width:34px; height:5px; border-radius:99px;
    background:#ED1C24; flex:0 0 auto; transform-origin:left center;
  }
  .eyebrow{
    /* flex-start so the dash tracks the first line when the label wraps */
    display:flex; align-items:flex-start; gap:.85rem;
    font-family:"Barlow Condensed", sans-serif; font-weight:600;
    text-transform:uppercase; letter-spacing:.16em; font-size:.8125rem;
  }

  /* ---- Depth: base → elevated → floating ---------------------------- */
  .surface-float{
    box-shadow:
      0 1px 1px rgba(35,31,32,.04),
      0 8px 16px -6px rgba(35,31,32,.10),
      0 28px 48px -20px rgba(35,31,32,.18);
  }
  .surface-dark{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 24px 60px -28px rgba(0,0,0,.9);
  }

  /* ---- Texture ------------------------------------------------------- */
  .tex-dark{ position:relative; isolation:isolate; }
  .tex-dark::before{
    content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
    background:
      radial-gradient(120% 80% at 12% 0%,   rgba(237,28,36,.10), transparent 55%),
      radial-gradient(90%  70% at 90% 100%, rgba(255,255,255,.06), transparent 60%);
  }
  .tex-dark::after{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    opacity:.16; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---- Buttons ------------------------------------------------------- */
  .btn{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    gap:.6rem; font-family:"Barlow Condensed",sans-serif; font-weight:700;
    font-style:italic; text-transform:uppercase; letter-spacing:.03em;
    transition:transform .28s var(--ease-spring), box-shadow .28s var(--ease-out),
               background-color .2s var(--ease-out), color .2s var(--ease-out),
               border-color .2s var(--ease-out);
    will-change:transform;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn:active{ transform:translateY(0) scale(.985); }
  /* Tinted toward a deep red-black rather than the brand red itself: keeps the
     layered colour-tinted elevation CLAUDE.md asks for, without the chromatic
     halo a saturated red shadow produces against the near-black sections. */
  .btn-primary{ background:#ED1C24; color:#fff;
    box-shadow:0 1px 2px rgba(35,31,32,.32), 0 7px 16px -8px rgba(35,31,32,.5); }
  .btn-primary:hover{ background:#C4141B;
    box-shadow:0 2px 4px rgba(35,31,32,.36), 0 12px 22px -10px rgba(35,31,32,.56); }
  .btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.28); }
  .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
  .btn-dark{ background:#231F20; color:#fff;
    box-shadow:0 2px 4px rgba(35,31,32,.18), 0 12px 24px -10px rgba(35,31,32,.4); }
  .btn-dark:hover{ background:#373234; }
  .btn-outline-dark{ background:transparent; color:#231F20; border:1.5px solid #231F20; }
  .btn-outline-dark:hover{ background:#231F20; color:#fff; }

  a, button{ transition:color .2s var(--ease-out), opacity .2s var(--ease-out); }
  :focus-visible{ outline:3px solid #ED1C24; outline-offset:3px; border-radius:2px; }
  .on-dark :focus-visible{ outline-color:#fff; }

  .navlink{ position:relative; }
  .navlink::after{
    content:''; position:absolute; left:0; right:0; bottom:-6px; height:3px;
    border-radius:99px; background:#ED1C24;
    transform:scaleX(0); transform-origin:left center;
    transition:transform .34s var(--ease-out);
  }
  .navlink:hover::after, .navlink:focus-visible::after{ transform:scaleX(1); }

  /* ---- Mobile menu ---------------------------------------------------- */
  .bars{ display:block; width:24px; height:16px; position:relative; }
  .bars i{
    position:absolute; left:0; width:100%; height:3px; border-radius:99px; background:#fff;
    transition:transform .34s var(--ease-spring), opacity .2s var(--ease-out);
  }
  .bars i:nth-child(1){ top:0 }
  .bars i:nth-child(2){ top:6.5px }
  .bars i:nth-child(3){ top:13px }
  [aria-expanded="true"] .bars i:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
  [aria-expanded="true"] .bars i:nth-child(2){ opacity:0 }
  [aria-expanded="true"] .bars i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

  #mobile-menu{
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
    transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  }
  #mobile-menu.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }

  /* ---- Hero slideshow ---------------------------------------------------
     4:3 plate against 4:3 source photos, so every frame sits in its own
     native framing — nothing cropped, nothing scaled up. ------------------ */
  .slides{
    --slide-dur:5.5s;
    position:relative; overflow:hidden; isolation:isolate; background:#191617;
    border:1px solid rgba(255,255,255,.09);
    touch-action:pan-y;
  }
  .slide{
    position:absolute; inset:0; opacity:0;
    transition:opacity 1s var(--ease-out);
  }
  .slide.is-on{ opacity:1; }
  .slide img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:saturate(1.05) contrast(1.03);
  }
  /* One light grade so daylight, fluoro and shade shots read as one workshop. */
  .slide::before{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:#231F20; mix-blend-mode:multiply; opacity:.18;
  }
  /* Just enough foot to carry the dots. */
  .slide::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(to top, rgba(22,18,19,.62) 0%, rgba(22,18,19,0) 26%);
  }

  .slides-dots{ position:absolute; left:0; right:0; bottom:0; z-index:5;
    display:flex; gap:.5rem; padding:1.15rem 1.3rem; }
  .dot{
    position:relative; overflow:hidden;
    width:34px; height:4px; border-radius:99px; background:rgba(255,255,255,.40);
    box-shadow:0 1px 3px rgba(0,0,0,.45);
    transition:background-color .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .dot:hover{ background:rgba(255,255,255,.7); }
  .dot:active{ transform:scaleY(1.5); }
  /* The fill doubles as the timer: you can see the next photo coming, and see
     it hold still while the slideshow is paused. */
  .dot::after{
    content:''; position:absolute; inset:0; border-radius:99px;
    background:#ED1C24; transform:scaleX(0); transform-origin:left center;
  }
  .dot[aria-current="true"]{ transform:scaleY(1.5); }
  .dot[aria-current="true"]::after{ animation:dotfill var(--slide-dur) linear forwards; }
  .slides.is-paused .dot[aria-current="true"]::after{ animation-play-state:paused; }
  @keyframes dotfill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

  /* ---- Service rows ---------------------------------------------------- */
  .svc{ transition:transform .38s var(--ease-out), background-color .3s var(--ease-out); }
  .svc:hover{ transform:translateX(6px); background:#fff; }
  .svc .svc-dash{ transition:transform .38s var(--ease-spring); transform-origin:left center; }
  .svc:hover .svc-dash{ transform:scaleX(1.75); }

  /* ---- Pricing dockets ------------------------------------------------- */
  .tier{ display:flex; flex-direction:column; background:#fff; }
  .tier-head{ background:#231F20; }
  .tier-feat{ display:flex; gap:.7rem; padding:.55rem 0; align-items:flex-start; }
  .tier-feat svg{ flex:0 0 auto; margin-top:.28rem; color:#ED1C24; }

  /* ---- Testimonials ---------------------------------------------------- */
  .quote{ position:relative; }
  .quote{ display:flex; flex-direction:column; }
  .quote blockquote{ flex:1 1 auto; }
  .stars{ display:inline-flex; gap:3px; }
  .stars svg{ fill:var(--gold); }
  .stars-lg{ gap:4px; }


  .social-btn{
    display:grid; place-items:center; width:46px; height:46px;
    border:1.5px solid var(--tw-silver, #D1D3D4); color:#231F20;
    transition:background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
  }
  .social-btn:hover{ background:#231F20; border-color:#231F20; color:#fff; }

  /* ---- Testimonial marquee -------------------------------------------- */
  .mq{ position:relative; overflow:hidden; padding:.5rem 0; }
  .mq-track{
    display:flex; gap:var(--gap-m); width:max-content;
    animation:mq-scroll var(--mq-duration, 64s) linear infinite;
    will-change:transform;
  }
  /* Track holds the list twice, so -50% lands exactly on the seam. */
  @keyframes mq-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

  .mq:hover .mq-track,
  .mq:focus-within .mq-track,
  .mq.is-paused .mq-track{ animation-play-state:paused; }

  .mq-card{
    display:flex; flex-direction:column;
    width:clamp(270px, 74vw, 355px); flex:0 0 auto;
    background:#2C2829; border-top:1px solid rgba(255,255,255,.09);
    padding:1.6rem 1.5rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -24px rgba(0,0,0,.85);
  }
  .mq-ini{
    display:grid; place-items:center; flex:0 0 auto;
    width:34px; height:34px; border-radius:99px;
    background:#373234; color:#fff;
    font-family:"Barlow Condensed",sans-serif; font-weight:700; font-style:italic;
    font-size:1.05rem; line-height:1;
  }
  .mq-fade{ position:absolute; inset-block:0; width:11%; pointer-events:none; z-index:2; }
  .mq-fade-l{ left:0;  background:linear-gradient(to right, #231F20, transparent); }
  .mq-fade-r{ right:0; background:linear-gradient(to left,  #231F20, transparent); }
  @media (max-width:640px){ .mq-fade{ display:none; } }

  .mq-icon-play{ display:none; }
  .mq.is-paused ~ * .mq-icon-pause,
  [aria-pressed="true"] .mq-icon-pause{ display:none; }
  [aria-pressed="true"] .mq-icon-play{ display:inline; }

  /* Reduced motion: no auto-scroll. The row becomes a normal scrollable
     region so every review is still reachable. */
  @media (prefers-reduced-motion: reduce){
    .mq{ overflow-x:auto; }
    .mq-track{ animation:none; width:auto; }
    #mq-toggle{ display:none; }
  }

  /* ---- Gallery --------------------------------------------------------- */
  .shot{ position:relative; overflow:hidden; isolation:isolate; display:block; }
  .shot img{ display:block; width:100%; height:100%; object-fit:cover;
    transition:transform .6s var(--ease-out); }
  .shot::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:#231F20; mix-blend-mode:multiply; opacity:.22;
    transition:opacity .4s var(--ease-out); }
  .shot:hover img{ transform:scale(1.05); }
  .shot:hover::before{ opacity:.06; }

  /* ---- Scroll reveal ---------------------------------------------------- */
  .js .rise{ opacity:0; transform:translateY(22px);
    transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js .rise.is-in{ opacity:1; transform:none; }
  .js .rise[data-d="1"]{ transition-delay:.08s }
  .js .rise[data-d="2"]{ transition-delay:.16s }
  .js .rise[data-d="3"]{ transition-delay:.24s }

  @keyframes dashIn{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
  @keyframes riseIn{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
  .load-dash{ animation:dashIn .7s var(--ease-out) .15s both; }
  .load-1{ animation:riseIn .8s var(--ease-out) .28s both; }
  .load-2{ animation:riseIn .8s var(--ease-out) .40s both; }
  .load-3{ animation:riseIn .8s var(--ease-out) .52s both; }
  .load-4{ animation:riseIn .8s var(--ease-out) .64s both; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{
      animation-duration:.01ms !important; animation-delay:0ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important; transition-delay:0ms !important;
    }
    .js .rise{ opacity:1; transform:none; }
  }

  /* Guidelines §02: clear space ≥ height of the "A"; min 140px; no effects. */
  .logo{ display:block; height:auto; }

  /* <picture> must not generate a box, or it breaks the img's layout inside
     aspect-ratio and object-fit containers. */
  picture{ display:contents; }

  /* ---- Hero proof strip ------------------------------------------------ */
  .proof{ display:flex; align-items:center; gap:.75rem; }

  /* ---- Sticky mobile action bar ---------------------------------------- */
  #action-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
    padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(35,31,32,.96); backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.12);
  }
  @media (min-width:1024px){ #action-bar{ display:none; } }
  /* keep the footer clear of the bar */
  @media (max-width:1023px){ body:has(#action-bar){ padding-bottom:78px; } }

  /* ---- Long-form pages: FAQ, terms, privacy ---------------------------- */
  .doc{ max-width:72ch; }
  .doc > * + *{ margin-top:1.15rem; }
  .doc h2{
    font-family:"Barlow Condensed", sans-serif; font-weight:700; font-style:italic;
    text-transform:uppercase; letter-spacing:-.02em; line-height:1;
    font-size:1.55rem; color:#231F20;
    margin-top:var(--gap-l); padding-top:var(--gap-s);
    border-top:1px solid var(--tw-silver, #D1D3D4);
  }
  .doc h3{
    font-family:"Barlow Condensed", sans-serif; font-weight:600;
    text-transform:uppercase; letter-spacing:.02em;
    font-size:1.075rem; color:#231F20; margin-top:var(--gap-m);
  }
  .doc p, .doc li{ line-height:1.7; color:#58595B; }
  .doc ul{ list-style:none; padding-left:0; }
  .doc ul li{ position:relative; padding-left:1.5rem; margin-top:.5rem; }
  .doc ul li::before{
    content:''; position:absolute; left:0; top:.72em;
    width:14px; height:3px; border-radius:99px; background:#ED1C24;
  }
  .doc ol{ padding-left:1.35rem; }
  .doc ol li{ margin-top:.5rem; }
  .doc a:not(.btn){
    color:#231F20; text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:rgba(237,28,36,.55);
    transition:text-decoration-color .2s var(--ease-out), color .2s var(--ease-out);
  }
  .doc a:not(.btn):hover{ color:#ED1C24; text-decoration-color:#ED1C24; }
  .doc strong{ color:#231F20; font-weight:600; }

  /* Unanswered copy. Loud on purpose — this must not reach production. */
  .todo{
    display:block; padding:.7rem .95rem;
    border:1.5px dashed rgba(237,28,36,.55); background:rgba(237,28,36,.05);
    font-family:"Barlow Condensed", sans-serif; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em; font-size:.9rem;
    color:#C4141B;
  }

  /* ---- FAQ accordion --------------------------------------------------- */
  .faq{ border-top:1px solid var(--tw-silver, #D1D3D4); }
  .faq:last-of-type{ border-bottom:1px solid var(--tw-silver, #D1D3D4); }
  .faq summary{
    display:flex; align-items:flex-start; gap:1rem; cursor:pointer;
    padding:1.15rem 0; list-style:none;
    font-family:"Barlow Condensed", sans-serif; font-weight:600;
    text-transform:uppercase; letter-spacing:.01em; font-size:1.125rem; color:#231F20;
    transition:color .2s var(--ease-out);
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary:hover{ color:#ED1C24; }
  .faq summary:focus-visible{ outline:3px solid #ED1C24; outline-offset:3px; }
  .faq-mark{
    flex:0 0 auto; position:relative; width:14px; height:14px; margin-top:.42rem;
  }
  .faq-mark::before, .faq-mark::after{
    content:''; position:absolute; left:0; top:5.5px;
    width:14px; height:3px; border-radius:99px; background:#ED1C24;
    transition:transform .32s var(--ease-spring);
  }
  .faq-mark::after{ transform:rotate(90deg); }
  .faq[open] .faq-mark::after{ transform:rotate(0deg); }
  .faq-body{ padding:0 0 1.4rem 1.9rem; max-width:66ch; }
  .faq-body p{ line-height:1.7; color:#58595B; }
  .faq-body > * + *{ margin-top:.75rem; }
  @media (prefers-reduced-motion: reduce){
    .faq-mark::before, .faq-mark::after{ transition:none; }
  }