/* ============================================================
   SHARIFI'S STUDIO — MAIN STYLESHEET
   Cascade layers keep section-level rules from out-specifying
   element-level ones. Order below IS the priority order.
   ============================================================ */

@layer reset, base, layout, components, sections, utilities;

/* ============================================================
   RESET
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
    padding: 0;
  }

  ul[class], ol[class] { list-style: none; }

  /* Navigation and footer lists are link groups, not prose lists.
     They carry no class of their own, so target them by context
     rather than adding a class to every <ul>. */
  nav ul, .footer ul { list-style: none; }

  img, picture, svg, video {
    max-width: 100%;
    display: block;
  }

  input, button, textarea, select { font: inherit; color: inherit; }

  button { background: none; border: 0; cursor: pointer; }

  a { color: inherit; }
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  html { scroll-behavior: smooth; }

  body {
    background-color: var(--field);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-17);
    line-height: var(--lh-body);
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--lh-tight);
    font-variation-settings: "SOFT" 40, "WONK" 1;
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.5rem, 5.5vw, var(--t-51)); }
  h2 { font-size: clamp(var(--t-26), 3.6vw, var(--t-41)); }
  h3 { font-size: var(--t-26); }

  p { max-width: var(--measure); }

  /* Visible keyboard focus — designed double ring, survives on
     both --field and --field-raised grounds. */
  :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius);
  }
  /* Inputs keep their border and gain the ring */
  .field input:focus-visible,
  .field textarea:focus-visible {
    border-color: var(--thread);
    box-shadow: var(--focus-ring);
  }

  /* Only suppress the ring for genuine pointer input */
  :focus:not(:focus-visible) { outline: none; }

  ::selection {
    background: var(--thread);
    color: var(--field-raised);
  }

  /* Skip link */
  .skip {
    position: absolute;
    left: var(--s-4);
    top: -100px;
    z-index: 999;
    background: var(--ink);
    color: var(--field-raised);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--radius);
    font-family: var(--font-utility);
    font-size: var(--t-14);
    transition: top var(--dur) var(--ease);
  }
  .skip:focus { top: var(--s-4); }
}

/* ============================================================
   LAYOUT — 12 column grid, 1200px, persistent right-hand void
   ============================================================ */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--section-inline);
  }

  .section {
    padding-block: var(--section-block);
  }

  .grid12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: center;
  }

  /* Asymmetric split: content 1-7, media 8-12.
     Column 12 stays visually reserved = the seam allowance. */
  .col-content { grid-column: 1 / span 6; }
  .col-media   { grid-column: 8 / span 5; }

  /* Mirrored inner sections: 1-5 / 6-12 */
  .col-content--narrow { grid-column: 1 / span 5; }
  .col-media--wide     { grid-column: 6 / span 6; }

  /* Where a text column sits beside a much taller image, centring
     strands a block of empty space under the shorter column. These
     sections hang both columns from the top instead. The hero keeps
     the centred default. */
  .grid12--top { align-items: start; }

  @media (max-width: 899px) {
    .grid12 { grid-template-columns: 1fr; }
    .col-content,
    .col-media,
    .col-content--narrow,
    .col-media--wide { grid-column: 1 / -1; }
  }
}

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

  /* ---------- THE SIGNATURE: tailor's tack ----------
     Two strokes crossing, slightly rotated. The only
     bold move on the site. Static by default.        */
  .tack {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--thread);
    transform: rotate(-8deg);
  }
  .tack svg { width: 100%; height: 100%; display: block; }
  .tack path {
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    fill: none;
  }

  /* Eyebrow: brass rule terminating in a tack */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-utility);
    font-size: var(--t-13);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-70);
    margin-bottom: var(--s-5);
  }
  .eyebrow::before {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--brass);
    flex: none;
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    font-family: var(--font-utility);
    font-size: var(--t-14);
    font-weight: 500;
    letter-spacing: .04em;
    padding: 14px 28px;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    min-height: 48px;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
  }

  .btn--primary {
    background: var(--thread);
    color: var(--on-thread);
    box-shadow: var(--shadow-1);
  }
  .btn--primary:hover { background: var(--thread-press); transform: translateY(-1px); }

  .btn--ghost {
    border: 1px solid var(--ink-12);
    color: var(--ink);
    background: transparent;
  }
  .btn--ghost:hover { border-color: var(--ink); background: var(--ink-08); }

  /* The tack on the primary CTA draws through on hover.
     This is the site's ONLY motion. */
  .btn--primary .tack path {
    stroke-dasharray: 26;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--dur) var(--ease);
  }
  .btn--primary:hover .tack path { stroke-dashoffset: 26; }
  .btn--primary .tack { color: var(--on-thread); }

  /* ---------- Header ---------- */
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--field-raised);
    border-bottom: 1px solid var(--ink-12);
  }
  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: 68px;
    padding-block: var(--s-3);
  }
  .header__logo { margin-right: auto; display: flex; align-items: center; }
  .header__logo img {
    /* LOCKED asset. Scaled UP from the 93px of the old site. */
    width: 148px;
    height: auto;
  }

  .nav { display: flex; align-items: center; gap: var(--s-5); }
  .nav__link {
    font-family: var(--font-utility);
    font-size: var(--t-14);
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--ink);
    /* 44px minimum tap target */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    position: relative;
    white-space: nowrap;
  }
  .nav__link:hover { color: var(--thread); }

  /* Active nav marked by a tack, not an underline */
  .nav__link[aria-current="page"] { color: var(--thread); }
  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(-8deg);
    background:
      linear-gradient(to bottom right, transparent 44%, var(--thread) 44%, var(--thread) 56%, transparent 56%),
      linear-gradient(to bottom left,  transparent 44%, var(--thread) 44%, var(--thread) 56%, transparent 56%);
  }

  .header__tel {
    font-family: var(--font-utility);
    font-size: var(--t-14);
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .header__tel:hover { color: var(--thread); }

  .burger { display: none; }

  /* ---------- Cards ---------- */
  .card {
    background: var(--field-raised);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
    padding: var(--s-6);
  }

  /* ---------- Figures ---------- */
  .figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--field-raised);
  }
  .figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;
  }

  /* ---------- Forms ---------- */
  .field { margin-bottom: var(--s-5); }
  .field label {
    display: block;
    font-family: var(--font-utility);
    font-size: var(--t-14);
    font-weight: 500;
    margin-bottom: var(--s-2);
  }
  .field input,
  .field textarea {
    width: 100%;
    padding: 13px var(--s-4);
    font-family: var(--font-body);
    font-size: var(--t-17);
    background: var(--field-raised);
    color: var(--ink);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
    min-height: 48px;
  }
  .field input:focus,
  .field textarea:focus { border-color: var(--thread); }
  .field textarea { min-height: 132px; resize: vertical; }
  .req { color: var(--thread); }
}

/* ============================================================
   SECTIONS — kept to single-class specificity so they never
   out-weigh the component rules above.
   ============================================================ */
@layer sections {

  /* ---------- HERO ---------- */
  .hero { padding-block: var(--s-8) var(--s-8); }
  .hero__title { margin-bottom: var(--s-5); }
  .hero__lead {
    font-size: var(--t-21);
    color: var(--ink-70);
    margin-bottom: var(--s-6);
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
  }
  .hero__tel {
    font-family: var(--font-utility);
    font-size: var(--t-14);
    color: var(--ink-70);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
  .hero__tel strong { color: var(--ink); font-weight: 600; }
  .hero__tel:hover strong { color: var(--thread); }

  .hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--ink-12);
  }
  .hero__proof li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-utility);
    font-size: var(--t-14);
    color: var(--ink-70);
  }

  .hero__media { position: relative; }
  .hero__media .figure img { aspect-ratio: 4 / 5; }

  /* The award badge breaks the grid — the one permitted
     violation of the seam. Overlaps the image edge. */
  .hero__badge {
    position: absolute;
    left: calc(-1 * var(--s-7));
    bottom: var(--s-7);
    width: 196px;
    background: var(--field-raised);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
    padding: var(--s-4);
    box-shadow: var(--shadow-2);
  }
  .hero__badge img { width: 100%; height: auto; }

  /* ---------- Trust strip ---------- */
  .trust { border-block: 1px solid var(--ink-12); padding-block: var(--s-6); }
  .trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--s-6);
  }
  .trust__item { display: flex; gap: var(--s-3); align-items: flex-start; }
  .trust__num {
    font-family: var(--font-display);
    font-size: var(--t-33);
    /* Text, not a rule — takes the darkened brass. These numerals are
       the site's credibility claim (years, reviews); they were the
       lowest-contrast text on the page at 2.71:1. */
    color: var(--brass-text);
    line-height: 1;
  }
  .trust__label {
    font-family: var(--font-utility);
    font-size: var(--t-14);
    color: var(--ink-70);
    line-height: 1.4;
  }
  .trust__label strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    font-size: var(--t-17);
    font-family: var(--font-body);
  }

  /* ---------- Work gallery ---------- */
  .work__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter);
  }
  .work__note {
    font-family: var(--font-utility);
    font-size: var(--t-13);
    color: var(--ink-45);
    margin-top: var(--s-4);
  }

  /* ---------- Services ---------- */
  .services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gutter);
    margin-top: var(--s-7);
  }
  .service {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
    background: var(--field-raised);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
  }
  .service:hover { border-color: var(--thread-30); transform: translateY(-2px); }
  .service h3 { font-size: var(--t-21); }
  .service p { font-size: var(--t-17); color: var(--ink-70); margin: 0; }
  .service__more {
    margin-top: auto;
    font-family: var(--font-utility);
    font-size: var(--t-14);
    font-weight: 500;
    color: var(--thread);
  }

  /* ---------- Maker ---------- */
  .maker__card { background: var(--field-raised); }
  .maker__quote {
    font-family: var(--font-display);
    font-size: var(--t-26);
    line-height: 1.35;
    margin-bottom: var(--s-5);
  }

  /* ---------- Reviews ---------- */
  .reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gutter);
    margin-top: var(--s-7);
  }
  .review {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-6);
    background: var(--field-raised);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
  }
  .review blockquote { font-size: var(--t-17); }
  .review blockquote p { margin: 0; }
  .review figcaption {
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--ink-12);
    font-family: var(--font-utility);
    font-size: var(--t-14);
  }
  .review cite { font-style: normal; font-weight: 600; }
  .review__meta { color: var(--ink-45); }

  /* ---------- Policy ---------- */
  .policy__list { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
  .policy__item {
    padding-left: var(--s-5);
    border-left: 1px solid var(--ink-12);
  }
  .policy__item p { margin: 0; font-size: var(--t-17); color: var(--ink-70); }
  .policy__item strong { color: var(--ink); font-weight: 600; }

  /* ---------- Booking ---------- */
  .booking__panel { background: var(--field-raised); }
  .booking__or {
    font-family: var(--font-utility);
    font-size: var(--t-13);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin-block: var(--s-5);
  }
  .booking__hours {
    font-family: var(--font-utility);
    font-size: var(--t-14);
    color: var(--ink-70);
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--ink-12);
  }
  .booking__hours dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); }
  .booking__hours dt { font-weight: 500; }
  .booking__hours dd { margin: 0; color: var(--ink-45); }

  /* ---------- PAGE HEADER — inner pages ----------
     Replaces the hero on every route that is not home.
     Same asymmetric seam: text sits 1-7, column 12 stays void. */
  .pagehead {
    padding-block: var(--s-7) var(--s-6);
    border-bottom: 1px solid var(--ink-12);
  }
  .pagehead__inner { grid-column: 1 / span 7; }
  .pagehead h1 { margin-bottom: var(--s-5); }
  .pagehead__lead {
    font-size: var(--t-21);
    color: var(--ink-70);
    margin-bottom: 0;
  }
  .pagehead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-6);
  }

  /* Breadcrumb — utility scale, tack separator inherited from brass rule */
  .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-utility);
    font-size: var(--t-13);
    color: var(--ink-45);
    margin-bottom: var(--s-5);
  }
  .crumbs a { color: var(--ink-70); text-decoration: none; }
  .crumbs a:hover { color: var(--thread); text-decoration: underline; }
  .crumbs li { display: flex; align-items: center; gap: var(--s-2); }
  .crumbs li + li::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--brass);
    flex: none;
  }
  .crumbs [aria-current="page"] { color: var(--ink); }

  /* ---------- PROSE — the reading column on inner pages ----------
     Held to --measure so line length never runs past 68ch. */
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: var(--s-5); }
  .prose h2 { margin-top: var(--s-7); }
  .prose h3 { margin-top: var(--s-6); font-size: var(--t-21); }
  .prose h2:first-child, .prose h3:first-child { margin-top: 0; }
  /* Prose lists take a brass rule, not a tack. The tack is the
     site's signature and is spent on the nav state, the eyebrow
     and the CTAs; using it as a bullet too would dilute it. */
  .prose ul { display: grid; gap: var(--s-3); padding-left: 0; }
  .prose ul li {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    color: var(--ink-70);
  }
  .prose ul li::before {
    content: "";
    flex: none;
    width: 14px;
    height: 1px;
    margin-top: 15px;
    background: var(--brass);
  }

  /* ---------- COPY NEEDED — scaffold marker ----------
     Deliberately loud. These pages must not ship with it present. */
  .copy-needed {
    border: 1px dashed var(--thread-30);
    border-left: 3px solid var(--thread);
    border-radius: var(--radius);
    background: var(--field-raised);
    padding: var(--s-5);
    margin-block: var(--s-5);
    max-width: var(--measure);
  }
  .copy-needed > p {
    font-family: var(--font-utility);
    font-size: var(--t-14);
    color: var(--ink-70);
    margin: 0;
  }
  .copy-needed > p + p { margin-top: var(--s-3); }
  .copy-needed strong {
    display: block;
    font-size: var(--t-13);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--thread);
    margin-bottom: var(--s-2);
  }

  /* ---------- GALLERY ---------- */
  .gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
    margin-top: var(--s-7);
  }
  /* Break the grid once: the fourth frame runs tall. Asymmetry
     is stated here rather than achieved with a masonry library. */
  .gallery__item--tall { grid-row: span 2; }
  .gallery__item--tall .figure img { aspect-ratio: 4 / 6.6; }
  .gallery figcaption {
    font-family: var(--font-utility);
    font-size: var(--t-13);
    color: var(--ink-45);
    margin-top: var(--s-3);
    line-height: 1.45;
  }
  .gallery .figure { margin-bottom: 0; }

  /* ---------- CONTACT ---------- */
  .contact__panel { background: var(--field-raised); }
  .contact__block + .contact__block {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--ink-12);
  }
  .contact__label {
    font-family: var(--font-utility);
    font-size: var(--t-13);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin-bottom: var(--s-3);
  }
  .contact__big {
    font-family: var(--font-display);
    font-size: var(--t-26);
    text-decoration: none;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .contact__big:hover { color: var(--thread); }
  .contact__pay {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
  }
  .contact__pay li {
    font-family: var(--font-utility);
    font-size: var(--t-13);
    color: var(--ink-70);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
    padding: 6px var(--s-3);
  }
  .contact__map {
    display: block;
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: var(--s-6);
  }
  .contact__map iframe { display: block; width: 100%; height: 320px; border: 0; }

  /* ---------- SERVICE DETAIL — spec list ---------- */
  .spec {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-3) var(--s-5);
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--ink-12);
    font-family: var(--font-utility);
    font-size: var(--t-14);
  }
  .spec dt { font-weight: 600; color: var(--ink); }
  .spec dd { margin: 0; color: var(--ink-70); }

  /* ---------- NEXT / cross-links at page foot ---------- */
  .next {
    border-top: 1px solid var(--ink-12);
    padding-block: var(--s-7);
  }
  .next__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gutter);
    margin-top: var(--s-6);
  }

  /* ---------- Footer ---------- */
  .footer {
    background: var(--field-raised);
    border-top: 1px solid var(--ink-12);
    padding-block: var(--s-7) var(--s-6);
  }
  .footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--s-6);
  }
  .footer h2 {
    font-family: var(--font-utility);
    font-size: var(--t-13);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin-bottom: var(--s-4);
  }
  .footer a { color: var(--ink); text-decoration: none; font-size: var(--t-17); }
  .footer a:hover { color: var(--thread); text-decoration: underline; }
  .footer li { margin-bottom: var(--s-2); }
  .footer address { font-style: normal; color: var(--ink-70); }
  .footer__bottom {
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--ink-12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    justify-content: space-between;
    font-family: var(--font-utility);
    font-size: var(--t-13);
    color: var(--ink-45);
  }
  .footer__social { display: flex; gap: var(--s-5); flex-wrap: wrap; }
  .footer__social a { font-family: var(--font-utility); font-size: var(--t-14); }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
  .lead { font-size: var(--t-21); color: var(--ink-70); }
  .stack > * + * { margin-top: var(--s-5); }
  .mt-6 { margin-top: var(--s-6); }
  .mt-7 { margin-top: var(--s-7); }

  /* Secondary prose. Stays at body size — dimmed, never shrunk,
     so it is still readable to the studio's older clients. */
  .muted { color: var(--ink-70); }

  /* Small print genuinely intended as a label, not a sentence. */
  .fineprint { font-size: var(--t-14); color: var(--ink-70); }

  /* Postal addresses render upright, not italic. */
  .addr { font-style: normal; color: var(--ink-70); }

  /* Kill a leading margin where a grid already provides the gap. */
  .flush { margin-top: 0; }
  .flush-t { margin-top: 0; padding-top: 0; border-top: 0; }

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 899px) {
  .nav,
  .header__tel--desk { display: none; }

  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    flex: none;                 /* never compress below 48px */
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
  }
  .burger svg { width: 20px; height: 20px; }

  /* Header packs tighter on small screens: logo keeps its size,
     CTA sheds its label, burger holds 48px. */
  .header__inner { gap: var(--s-3); }
  .header__logo img { width: 124px; }

  .header__cta {
    padding-inline: var(--s-4);
    flex: none;
  }
  .header__cta .btn__label { display: none; }
  .header__cta .tack { transform: rotate(-8deg) scale(1.15); }

  .nav--open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--field-raised);
    border-bottom: 1px solid var(--ink-12);
    padding: var(--s-4) var(--section-inline) var(--s-5);
  }
  .nav--open .nav__link {
    width: 100%;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--ink-12);
  }
  .nav--open .nav__link[aria-current="page"]::after { display: none; }

  .hero { padding-block: var(--s-6) var(--s-7); }

  /* Copy leads on mobile — the headline and the booking action
     must be reachable without scrolling past a full-height image. */
  .hero__media { margin-top: var(--s-6); }
  .hero__media .figure img { aspect-ratio: 4 / 3.4; }

  /* Badge overlaps the image corner rather than stacking below it,
     so it never adds a full row of its own height. */
  .hero__badge {
    left: auto;
    right: var(--s-4);
    bottom: calc(-1 * var(--s-4));
    width: 132px;
    padding: var(--s-3);
  }

  .work__grid { grid-template-columns: repeat(2, 1fr); }

  /* Inner pages */
  .pagehead { padding-block: var(--s-6) var(--s-5); }
  .pagehead__inner { grid-column: 1 / -1; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  /* The tall frame stops spanning rows once the grid is only 2 wide,
     otherwise it strands a hole beside it. */
  .gallery__item--tall { grid-row: auto; }
  .gallery__item--tall .figure img { aspect-ratio: 4 / 5; }
}

@media (max-width: 419px) {
  .work__grid { grid-template-columns: 1fr; }
  .hero__proof { gap: var(--s-3); flex-direction: column; }
  .gallery__grid { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; gap: var(--s-1) 0; }
  .spec dd { margin-bottom: var(--s-3); }
}

/* ============================================================
   VIEW TRANSITIONS — route changes where supported.
   Browsers without support simply navigate normally.
   ============================================================ */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 180ms var(--ease) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 260ms var(--ease) both;
  }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

  /* The logo persists across routes rather than cross-fading. */
  .header__logo img { view-transition-name: brandmark; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ============================================================
   REVEALS
   Initial states are applied ONLY when JS has confirmed it will
   animate (html.js-ready) AND motion is allowed. Without JS, or
   with reduced motion, content renders in its final state.
   Transform + opacity only. clip-path for images.
   ============================================================ */
@layer utilities {

  /* Line-level heading reveal — SplitType writes .line wrappers */
  .js-ready .reveal-lines .line {
    display: block;
    overflow: hidden;
  }
  .js-ready .reveal-lines .line > span {
    display: block;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
  }

  /* Block reveal — copy, cards, list items */
  .js-ready .reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    will-change: transform, opacity;
  }

  /* Image reveal — mask wipe, NOT an opacity fade.
     Animating clip-path only; the image itself never fades. */
  .js-ready .reveal-img {
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
  }

  /* The LCP image is exempt: it is never hidden, never faded.
     It reveals via mask only after it has painted and decoded. */
  .js-ready .reveal-img--lcp { clip-path: inset(0 0 0 0); }

  /* Once revealed, will-change is dropped to release compositor memory */
  .is-revealed { will-change: auto !important; }


}

/* ============================================================
   REDUCED MOTION — quality floor
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn--primary:hover,
  .service:hover { transform: none; }

  /* FULL BYPASS — final state immediately, not a faster animation.
     Overrides the .js-ready initial states above. */
  .js-ready .reveal,
  .js-ready .reveal-lines .line > span,
  .js-ready .reveal-img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto !important;
  }
  .js-ready .reveal-lines .line { overflow: visible !important; }
}