/* ==========================================================================
       Design tokens
       ========================================================================== */
    :root {
      /* Colors */
      --color-navy: #041b36;
      --color-gold: #c1a67e;
      --color-amber: #cc8c1c;
      --color-ink: #172331;
      --color-cream: #f7f1e7;
      --color-cream-overlay: rgba(244, 240, 231, 0.8);
      --color-cream-fade: rgba(244, 240, 231, 0.5);
      --color-cream-clear: rgba(244, 240, 231, 0);
      --color-burgundy: #572d32;
      --color-tan: #a68a5b;
      --color-divider: rgba(166, 138, 91, 0.5);
      --color-brown-border: #35241a;
      --color-muted: #8f7a6c;
      --color-field-border: #9a948d;
      --color-sand: #e0d0aa;
      --color-footer-text: #999694;
      --color-black: #000;
      --color-white: #fff;
      --color-shade-strong: rgba(0, 0, 0, 0.77);
      --color-shade-half: rgba(0, 0, 0, 0.5);

      /* Font families */
      --font-grotesk: "Kross Neue Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
      --font-baskerville: "Baskerville", "Baskerville Old Face", "Libre Baskerville", Georgia, serif;
      --font-times: "Times New Roman", Times, serif;
      --font-playfair: "Playfair Display SC", "Playfair Display", Georgia, serif;
      --font-funnel: "Funnel Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
      --font-inter: "Inter", "Helvetica Neue", Arial, sans-serif;
      --font-lexend: "Lexend", "Inter", Arial, sans-serif;

      /* Font sizes */
      --fs-10: 10px;
      --fs-12: 12px;
      --fs-13: 13.346px;
      --fs-13-5: 13.5px;
      --fs-14: 14px;
      --fs-15: 15px;
      --fs-16: 16px;
      --fs-18: 18px;
      --fs-20: 20px;
      --fs-23: 23px;
      --fs-24: 24px;
      --fs-32: 32px;
      --fs-36: 36px;
      --fs-42: 42px;
      --fs-60: 60px;
      --fs-62: 62px;
      --fs-72: 72px;

      /* Line heights */
      --lh-normal-baskerville: 1.1429;
      --lh-normal-playfair: 1.3333;
      --lh-normal-inter: 1.2102;
      --lh-body: 1.5;
      --lh-tight: 1.2;

      /* Spacing */
      --space-1: 1px;
      --space-2: 2px;
      --space-8: 8px;
      --space-10: 10px;
      --space-13: 13px;
      --space-15: 15px;
      --space-16: 16px;
      --space-24: 24px;
      --space-32: 32px;
      --space-40: 40px;
      --space-48: 48px;
      --space-56: 56px;
      --space-64: 64px;
      --space-80: 80px;
      --space-106: 106px;
      --space-160: 160px;

      /* Layout */
      --page-width: 1440px;
      --header-height: 76px;
      --transition-menu: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ==========================================================================
       Base
       ========================================================================== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

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

    body {
      margin: 0;
      background: var(--color-white);
      color: var(--color-black);
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      line-height: var(--lh-body);
    }

    h1, h2, h3, p, ul, figure {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

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

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
      color: inherit;
    }

    :focus-visible {
      outline: 2px solid var(--color-amber);
      outline-offset: 2px;
    }

    .page {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      position: relative;
      background: var(--color-white);
    }

    /* Trims leading above cap height / below baseline, as in the design */
    .trim {
      text-box: trim-both cap alphabetic;
    }

    /* ==========================================================================
       Button
       ========================================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 var(--space-16);
      border: 0;
      background: var(--color-amber);
      color: var(--color-white);
      font-family: var(--font-grotesk);
      font-size: var(--fs-14);
      line-height: normal;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
    }

    .btn--secondary {
      background: transparent;
      border: 1px solid var(--color-white);
    }

    .btn--dark {
      background: var(--color-ink);
    }

    /* ==========================================================================
       Header / Navigation
       ========================================================================== */
    .header {
      position: relative;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: var(--header-height);
      padding: 0 var(--space-80);
      background: var(--color-navy);
    }

    .header__logo {
      position: absolute;
      top: 41px;
      left: 50%;
      z-index: 2;
      width: 182px;
      height: 70px;
      transform: translateX(-50%);
    }

    .header__logo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .nav {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
    }

    .nav__toggle {
      display: none;
    }

    .nav__backdrop {
      display: none;
    }

    .nav__menu {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
    }

    .nav__group {
      display: flex;
      align-items: center;
    }

    .nav__list {
      display: flex;
      align-items: center;
    }

    .nav__link {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-10);
      color: var(--color-gold);
      font-family: var(--font-grotesk);
      font-size: var(--fs-14);
      line-height: normal;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .nav__social {
      display: flex;
      align-items: center;
      gap: var(--space-13);
    }

    .nav__social-link {
      display: block;
      width: 24px;
      height: 24px;
    }

    .nav__social-icon {
      width: 24px;
      height: 24px;
    }

    /* ==========================================================================
       Hero
       ========================================================================== */
    .hero {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      min-height: 780px;
      padding: var(--space-80);
      overflow: hidden;
    }

    .hero__image,
    .showcase__media img,
    .banner--craft .banner__image {
      transform: none !important;
    }

    .hero__media {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .hero__image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
    }

    .hero__shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to left, var(--color-shade-strong), rgba(0, 0, 0, 0));
    }

    .hero__copy {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--space-48);
      width: 580px;
      max-width: 100%;
      color: var(--color-white);
    }

    .hero__text {
      display: flex;
      flex-direction: column;
      gap: var(--space-24);
    }

    .hero__top-line {
      display: flex;
      align-items: center;
      gap: var(--space-10);
      white-space: nowrap;
    }

    .hero__brand {
      font-family: var(--font-grotesk);
      font-size: var(--fs-18);
      line-height: var(--lh-body);
    }

    .hero__tagline {
      font-family: var(--font-baskerville);
      font-size: var(--fs-23);
      font-style: italic;
      line-height: var(--lh-normal-baskerville);
    }

    .hero__heading-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-24);
    }

    .hero__title {
      font-family: var(--font-playfair);
      font-size: var(--fs-72);
      font-weight: 400;
      line-height: var(--lh-normal-playfair);
      text-transform: uppercase;
    }

    .hero__subtitle {
      width: 447px;
      max-width: 100%;
      font-family: var(--font-baskerville);
      font-size: var(--fs-32);
      font-weight: 400;
      line-height: var(--lh-normal-baskerville);
    }

    .hero__actions {
      display: flex;
      align-items: flex-start;
      gap: var(--space-15);
    }

    /* ==========================================================================
       Philosophy (Section-2)
       ========================================================================== */
    .philosophy {
      display: flex;
      flex-direction: column;
      gap: var(--space-32);
      padding: var(--space-160);
    }

    .philosophy__quote {
      font-family: var(--font-baskerville);
      font-size: var(--fs-42);
      line-height: var(--lh-normal-baskerville);
    }

    .philosophy__em {
      color: var(--color-burgundy);
      font-style: italic;
    }

    .philosophy__caption {
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      letter-spacing: 0.8px;
      line-height: var(--lh-body);
      text-transform: capitalize;
    }

    /* ==========================================================================
       Showcase (Section-3)
       ========================================================================== */
    .showcase {
      display: flex;
      align-items: flex-start;
      gap: var(--space-56);
      padding: 0 var(--space-80);
    }

    .showcase__row {
      display: flex;
      flex: 1;
      min-width: 0;
    }

    .showcase__row--first {
      align-items: flex-start;
      padding-bottom: var(--space-40);
    }

    .showcase__row--second {
      align-items: flex-end;
      justify-content: flex-end;
      padding-top: var(--space-40);
    }

    .showcase__item {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: var(--space-40);
      min-width: 0;
    }

    .showcase__media {
      position: relative;
      width: 100%;
      height: 520px;
      overflow: hidden;
    }

    .showcase__image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
    }

    .showcase__image--crop {
      top: -22.86%;
      height: 176.54%;
    }

    .showcase__text {
      display: flex;
      flex-direction: column;
      gap: var(--space-24);
      min-height: 104px;
    }

    .showcase__title {
      font-family: var(--font-times);
      font-size: var(--fs-42);
      font-weight: 400;
      line-height: var(--lh-body);
      text-transform: capitalize;
    }

    .showcase__desc {
      font-family: var(--font-funnel);
      font-size: var(--fs-24);
      line-height: var(--lh-body);
    }

    /* ==========================================================================
       What we make
       ========================================================================== */
    .catalog {
      display: flex;
      flex-direction: column;
      gap: var(--space-24);
      padding: var(--space-160) 0;
      background: var(--color-white);
    }

    .catalog__copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-24);
      padding: 0 var(--space-80);
      text-align: center;
    }

    .catalog__title {
      width: 100%;
      font-family: var(--font-times);
      font-size: var(--fs-36);
      font-weight: 400;
      line-height: var(--lh-body);
    }

    .catalog__subtitle {
      width: 100%;
      font-family: var(--font-funnel);
      font-size: var(--fs-24);
      line-height: var(--lh-body);
    }

    .catalog__lead {
      width: 100%;
      max-width: 898px;
      min-height: 77px;
      font-family: var(--font-times);
      font-size: var(--fs-24);
      font-style: italic;
      line-height: var(--lh-tight);
    }

    .carousel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-16);
      min-height: 400px;
      padding: 0 var(--space-80);
    }

    .carousel__control {
      flex: none;
      width: 36px;
      height: 48px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .carousel__control-icon {
      width: 36px;
      height: 48px;
    }

    .carousel__track {
      display: flex;
      flex: 1;
      align-items: center;
      gap: var(--space-48);
      min-width: 0;
    }

    .card {
      display: flex;
      flex: 0 0 calc((100% - 2 * var(--space-48)) / 3);
      flex-direction: column;
      min-width: 0;
      height: 400px;
      scroll-snap-align: start;
    }

    .card__media {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .card__image {
      position: absolute;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
    }

    .card__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--space-16);
      padding: var(--space-24);
      background: var(--color-cream);
    }

    .card__title {
      font-family: var(--font-funnel);
      font-size: var(--fs-20);
      font-weight: 600;
      line-height: var(--lh-body);
    }

    .card__desc {
      font-family: var(--font-funnel);
      font-size: var(--fs-14);
      line-height: var(--lh-body);
    }

    /* ==========================================================================
       Feature banner (The Art of craftsmanship) + Heritage banner
       ========================================================================== */
    .banner {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      place-items: center;
      overflow: hidden;
    }

    .banner--craft {
      min-height: 640px;
    }

    .banner--heritage {
      min-height: 553px;
    }

    .banner__media {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .banner__image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
    }

    .banner__image--heritage {
      top: -33.41%;
      height: 149.8%;
    }

    .banner__shade {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(32, 12, 0, 0.61), rgba(0, 0, 0, 0));
      mix-blend-mode: multiply;
    }

    .banner__panel {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-40);
      width: 523px;
      max-width: calc(100% - 32px);
      padding: var(--space-64);
      text-align: center;
    }

    .banner__panel--craft {
      background: var(--color-cream-overlay);
    }

    .banner__panel--heritage {
      gap: var(--space-24);
      background: var(--color-shade-half);
      color: var(--color-white);
    }

    .banner__content {
      display: flex;
      flex-direction: column;
      gap: var(--space-24);
      width: 100%;
    }

    .banner__heading-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
      width: 100%;
    }

    .banner__eyebrow {
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      letter-spacing: 0.8px;
      line-height: var(--lh-body);
      text-transform: capitalize;
    }

    .banner__eyebrow--craft {
      color: var(--color-burgundy);
      font-size: var(--fs-13);
      letter-spacing: 0.6673px;
      text-transform: uppercase;
    }

    .banner__title {
      font-family: var(--font-times);
      font-size: var(--fs-42);
      font-weight: 400;
      line-height: var(--lh-normal-baskerville);
      color: var(--color-ink);
    }

    .banner__title--heritage {
      font-family: var(--font-baskerville);
      color: inherit;
      text-transform: uppercase;
    }

    .banner__text {
      font-family: var(--font-funnel);
      font-size: var(--fs-14);
      line-height: var(--lh-body);
    }

    .banner__text--heritage {
      font-size: var(--fs-18);
    }

    /* ==========================================================================
       Gentleman
       ========================================================================== */
    .gentleman {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--space-160);
    }

    .gentleman__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-24);
      width: 493px;
      max-width: 100%;
      text-align: center;
    }

    .gentleman__heading-group {
      width: 100%;
    }

    .gentleman__eyebrow {
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      letter-spacing: 0.8px;
      line-height: var(--lh-body);
      text-transform: capitalize;
    }

    .gentleman__title {
      font-family: var(--font-baskerville);
      font-size: var(--fs-42);
      font-weight: 400;
      line-height: var(--lh-normal-baskerville);
    }

    .gentleman__text {
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      line-height: var(--lh-body);
    }

    /* ==========================================================================
       Closer look
       ========================================================================== */
    .details {
      display: flex;
      padding: var(--space-80);
      justify-content: center;
    }

    .details>div {
      display: flex;
      align-items: flex-start;
      gap: var(--space-48);
    }

    .details__left {
      display: flex;
      flex: none;
      flex-direction: column;
      gap: var(--space-24);
      width: 397px;
    }

    .details__eyebrow {
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      line-height: var(--lh-body);
    }

    .details__title {
      font-family: var(--font-baskerville);
      font-size: var(--fs-42);
      font-weight: 400;
      line-height: var(--lh-normal-baskerville);
    }

    .specs {
      display: flex;
      flex-direction: column;
    }

    .specs__item {
      position: relative;
      isolation: isolate;
      display: flex;
      align-items: center;
      gap: var(--space-48);
      width: 100%;
      height: 88px;
      padding: 0 var(--space-16);
      border: 0;
      border-top: var(--space-2) solid var(--color-divider);
      background: var(--color-white);
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .specs__item::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to right, var(--color-cream-fade), var(--color-cream-clear));
      /* --hl is animated by GSAP (js/animations.js) */
      opacity: var(--hl);
    }

    .specs__item {
      --hl: 0;
    }

    .specs__item[aria-selected="true"] {
      --hl: 1;
    }

    .specs__item--bordered {
      border-bottom: var(--space-2) solid var(--color-divider);
    }


    .specs__number {
      font-family: var(--font-baskerville);
      font-size: var(--fs-32);
      line-height: var(--lh-normal-baskerville);
      white-space: nowrap;
    }

    .specs__label {
      width: 256px;
      font-family: var(--font-funnel);
      font-size: var(--fs-24);
      font-weight: 400;
      line-height: var(--lh-body);
    }

    .specs__item[aria-selected="true"] .specs__label {
      font-weight: 500;
    }

    .details__right {
      display: flex;
      flex: 1;
      align-items: flex-end;
      align-self: stretch;
      justify-content: flex-start;
      gap: var(--space-48);
      min-width: 0;
    }

    .details__preview {
      position: relative;
      flex: none;
      width: 405px;
      height: 486px;
    }

    .details__caption {
      display: flex;
      flex: none;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: var(--space-24);
      align-self: stretch;
      width: 321px;
    }

    .details__caption-heading {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--space-8);
      width: 100%;
      min-height: 68px;
      font-size: var(--fs-32);
    }

    .details__caption-number {
      font-family: var(--font-baskerville);
      font-weight: 400;
      line-height: var(--lh-normal-baskerville);
    }

    .details__caption-title {
      font-family: var(--font-times);
      font-weight: 400;
      line-height: var(--lh-body);
    }

    .details__caption-text {
      width: 100%;
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      line-height: var(--lh-body);
    }

    /* ==========================================================================
       How it works + CTA
       ========================================================================== */
    .process {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-80);
      padding: var(--space-80) var(--space-80) 0;
      background: var(--color-cream);
    }

    .process__container {
      display: flex;
      flex-direction: column;
      gap: var(--space-40);
      width: 100%;
      max-width: 1279px;
    }

    .process__heading-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-24);
      text-align: center;
    }

    .process__eyebrow {
      width: 100%;
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      letter-spacing: 0.8px;
      line-height: var(--lh-body);
      text-transform: capitalize;
    }

    .process__title {
      width: 100%;
      font-family: var(--font-baskerville);
      font-size: var(--fs-42);
      font-weight: 400;
      line-height: var(--lh-normal-baskerville);
    }

    .steps {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
    }

    .steps__item {
      display: flex;
      align-items: center;
      gap: var(--space-40);
    }

    .steps__number {
      color: var(--color-tan);
      font-family: var(--font-baskerville);
      font-size: var(--fs-42);
      line-height: var(--lh-normal-baskerville);
      white-space: nowrap;
    }

    .steps__text {
      display: flex;
      flex-direction: column;
      gap: var(--space-16);
      width: 315px;
    }

    .steps__title {
      font-family: var(--font-times);
      font-size: var(--fs-32);
      font-weight: 400;
      line-height: var(--lh-body);
    }

    .steps__desc {
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      line-height: var(--lh-body);
    }

    .steps__divider {
      flex: none;
      align-self: stretch;
      width: var(--space-1);
      background: var(--color-divider);
    }

    .cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-40);
      max-width: 100%;
      padding: var(--space-80);
      border: 1px solid var(--color-brown-border);
    }

    .cta__title {
      color: var(--color-burgundy);
      font-family: var(--font-baskerville);
      font-size: var(--fs-62);
      font-weight: 400;
      line-height: var(--lh-normal-baskerville);
      text-align: center;
      white-space: nowrap;
    }

    .cta__title-em {
      font-style: italic;
    }

    /* ==========================================================================
       Footer
       ========================================================================== */
    .footer {
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      min-height: 837px;
      padding: var(--space-80);
      background: var(--color-cream);
      overflow: hidden;
    }

    .footer__media {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .footer__image {
      position: absolute;
      top: -15.78%;
      left: 0;
      width: 100%;
      height: 143.5%;
      max-width: none;
      object-fit: cover;
    }

    .footer__inner {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--space-64);
      width: 1280px;
      max-width: 100%;
    }

    .footer__content {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .footer__newsletter {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--space-24);
    }

    .footer__title {
      color: var(--color-white);
      font-family: var(--font-inter);
      font-size: var(--fs-60);
      font-weight: 400;
      line-height: var(--lh-normal-inter);
      white-space: nowrap;
    }

    .footer__form {
      display: flex;
      align-items: center;
      gap: var(--space-24);
      width: 100%;
    }

    .footer__field {
      flex: 1;
      min-width: 0;
      height: 40px;
      padding: 0 var(--space-16);
      border: 1.5px solid var(--color-field-border);
      border-radius: 0;
      background: transparent;
      color: var(--color-white);
      font-family: var(--font-lexend);
      font-size: var(--fs-13-5);
      letter-spacing: 1.35px;
      line-height: var(--lh-tight);
    }

    .footer__field::placeholder {
      color: var(--color-muted);
      opacity: 1;
    }

    .footer__links {
      display: flex;
      align-items: flex-start;
      gap: var(--space-106);
      font-family: var(--font-inter);
      line-height: normal;
    }

    .footer__column {
      display: flex;
      flex-direction: column;
      gap: var(--space-24);
    }

    .footer__column--shop {
      width: 106px;
    }

    .footer__column--house {
      width: 68px;
    }

    .footer__column--care {
      width: 131px;
    }

    .footer__heading {
      color: var(--color-sand);
      font-size: var(--fs-10);
      font-weight: 400;
      line-height: normal;
      text-transform: uppercase;
    }

    .footer__link {
      color: var(--color-white);
      font-size: var(--fs-15);
      line-height: normal;
    }

    .footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer__logo {
      width: 182px;
      height: 70px;
      object-fit: cover;
      mix-blend-mode: lighten;
    }

    .footer__legal {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: var(--space-8);
      width: 330px;
      color: var(--color-footer-text);
      font-family: var(--font-inter);
      font-size: var(--fs-12);
      line-height: normal;
      text-align: right;
    }

    /* ==========================================================================
       Scroll reveal animations (only active when JS is available)
       ========================================================================== */
    /* Initial hidden state only; the reveal itself is animated by GSAP + ScrollTrigger */
    .js [data-reveal] {
      opacity: 0;
    }

    .js [data-reveal].is-visible {
      opacity: 1;
    }

    /* ==========================================================================
       Slider (What we make)
       ========================================================================== */
    /* Arrow hover / disabled fade and card image zoom are animated by GSAP */
    .carousel__control[aria-disabled="true"] {
      cursor: default;
    }

    .carousel__track {
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      cursor: grab;
      -webkit-overflow-scrolling: touch;
    }

    .carousel__track::-webkit-scrollbar {
      display: none;
    }

    .carousel__track.is-dragging {
      scroll-snap-type: none;
      cursor: grabbing;
      user-select: none;
    }

    .carousel__track:focus-visible {
      outline-offset: 6px;
    }

    /* ==========================================================================
       Details tabs
       ========================================================================== */
    .specs__item:focus-visible {
      outline-offset: -2px;
    }

    .details__view {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      opacity: 0;
      pointer-events: none;
      user-select: none;
    }

    /* Preview and caption swaps are animated by GSAP (js/animations.js) */
    .details__view.is-active {
      opacity: 1;
    }

    /* ==========================================================================
       Popup form
       ========================================================================== */
    html.is-locked {
      overflow: hidden;
    }

    .dialog {
      max-width: none;
      max-height: none;
      margin: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--color-black);
      overflow: visible;
    }

    .dialog::backdrop {
      background: rgba(4, 27, 54, 0.62);
      backdrop-filter: blur(4px);
      opacity: 0;
      /* ::backdrop cannot be targeted by GSAP, so its fade stays in CSS, timed to match */
      transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .dialog.is-visible::backdrop {
      opacity: 1;
    }

    .dialog__surface {
      position: relative;
      width: min(560px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      max-height: calc(100dvh - 32px);
      padding: var(--space-48);
      overflow-y: auto;
      border: 1px solid var(--color-brown-border);
      background: var(--color-cream);
      opacity: 0;
    }

    /* Open / close motion is animated by GSAP; this is the no-JS fallback */
    .dialog.is-visible .dialog__surface {
      opacity: 1;
    }

    .dialog__close {
      position: absolute;
      top: var(--space-16);
      right: var(--space-16);
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--color-ink);
      cursor: pointer;
    }

    .dialog__title {
      margin-bottom: var(--space-8);
      color: var(--color-burgundy);
      font-family: var(--font-baskerville);
      font-size: var(--fs-32);
      font-weight: 400;
      line-height: var(--lh-normal-baskerville);
    }

    .dialog__intro {
      margin-bottom: var(--space-32);
      font-size: var(--fs-14);
    }

    .form {
      display: flex;
      flex-direction: column;
      gap: var(--space-24);
    }

    .form__field {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
    }

    .form__label {
      color: var(--color-ink);
      font-size: var(--fs-14);
      font-weight: 500;
      line-height: var(--lh-tight);
    }

    .form__input {
      width: 100%;
      min-height: 40px;
      padding: 0 var(--space-16);
      border: 1.5px solid var(--color-field-border);
      border-radius: 0;
      background: var(--color-white);
      color: var(--color-ink);
      font-family: var(--font-funnel);
      font-size: var(--fs-16);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .form__input--area {
      min-height: 120px;
      padding: var(--space-10) var(--space-16);
      resize: vertical;
    }

    .form__input:focus {
      border-color: var(--color-ink);
      outline: none;
      box-shadow: 0 0 0 3px rgba(204, 140, 28, 0.35);
    }

    .form__input:user-invalid {
      border-color: #a3322f;
    }

    .form__honey {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .form__status {
      min-height: 1.5em;
      color: var(--color-burgundy);
      font-size: var(--fs-14);
    }

    .form__status a {
      text-decoration: underline;
    }

    .form__submit:disabled {
      opacity: 0.6;
      cursor: wait;
    }

    .dialog__success {
      padding: var(--space-24) 0;
      text-align: center;
    }

    .dialog__success .dialog__intro {
      margin-bottom: var(--space-32);
    }

    .footer__status {
      min-height: 1.4em;
      color: var(--color-sand);
      font-family: var(--font-inter);
      font-size: var(--fs-14);
    }

    /* Safety net against horizontal scroll */
    .page {
      overflow-x: clip;
    }

    h1, h2, h3, p {
      overflow-wrap: break-word;
    }

    /* ==========================================================================
       Tablet (max-width: 1024px)
       ========================================================================== */
    @media (max-width: 1024px) {
      /* Navigation: hamburger + collapsible menu */
      .header {
        padding: 0 var(--space-40);
      }

      .details>div {
      flex-direction: column;
    }

      .nav {
        justify-content: flex-end;
      }

      .nav__toggle {
        position: relative;
        z-index: 7;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
      }

      .nav__toggle-bar {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-gold);
      }

      /* Hamburger morph and drawer slide are animated by GSAP (js/animations.js) */

      /* Slide-in drawer: opens right to left, closes left to right */
      .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        flex: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-24);
        width: min(360px, 86vw);
        height: 100vh;
        height: 100dvh;
        padding: 96px var(--space-32) var(--space-40);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--color-navy);
        box-shadow: -24px 0 48px rgba(0, 0, 0, 0.35);
        visibility: hidden;
      }

      .nav__menu.is-open {
        visibility: visible;
      }

      .nav__backdrop {
        position: fixed;
        inset: 0;
        z-index: 4;
        display: block;
        background: rgba(4, 27, 54, 0.6);
        opacity: 0;
        visibility: hidden;
      }

      .nav__backdrop.is-open {
        opacity: 1;
        visibility: visible;
      }

      html.is-nav-open {
        overflow: hidden;
      }

      .nav__group {
        flex-direction: column;
        align-items: flex-start;
      }

      .nav__list {
        flex-direction: column;
        align-items: flex-start;
      }

      .nav__social {
        padding: var(--space-10);
      }

      /* Hero */
      .hero {
        min-height: 640px;
        padding: var(--space-64) var(--space-40);
      }

      .hero__title {
        font-size: 56px;
      }

      .hero__subtitle {
        font-size: 28px;
      }

      /* Philosophy */
      .philosophy {
        padding: 96px var(--space-40);
      }

      .philosophy__quote {
        font-size: 34px;
      }

      .philosophy__break {
        display: none;
      }

      /* Showcase */
      .showcase {
        gap: var(--space-32);
        padding: 0 var(--space-40);
      }

      .showcase__media {
        height: 400px;
      }

      .showcase__title {
        font-size: 32px;
      }

      .showcase__desc {
        font-size: var(--fs-20);
      }

      /* Catalog */
      .catalog__copy,
      .carousel {
        padding-left: var(--space-40);
        padding-right: var(--space-40);
      }

      .carousel__track {
        gap: var(--space-24);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      .carousel__track::-webkit-scrollbar {
        display: none;
      }

      .card {
        flex: 0 0 300px;
        scroll-snap-align: start;
      }

      /* Banners */
      .banner--craft {
        min-height: 560px;
      }

      .banner--heritage {
        min-height: 520px;
      }

      /* Gentleman */
      .gentleman {
        padding: 112px var(--space-40);
      }

      /* Details */
      .details {
        flex-direction: column;
        gap: var(--space-40);
        padding: var(--space-64) var(--space-40);
      }

      .details__left {
        width: 100%;
      }

      .details__right {
        align-self: auto;
        align-items: center;
        justify-content: center;
        width: 100%;
      }

      .details__preview {
        width: 340px;
        height: 408px;
      }

      .details__caption {
        align-self: center;
        width: 280px;
      }

      /* Process */
      .process {
        gap: var(--space-64);
        padding: var(--space-64) var(--space-40) 0;
      }

      .process__title {
        font-size: 36px;
      }

      .steps {
        flex-direction: column;
        gap: var(--space-40);
      }

      .steps__item {
        width: 100%;
      }

      .steps__text {
        flex: 1;
        width: auto;
      }

      .steps__divider {
        width: 100%;
        height: var(--space-1);
        align-self: auto;
      }

      .cta {
        padding: var(--space-64) var(--space-40);
      }

      .cta__title {
        font-size: 48px;
      }

      /* Footer */
      .footer {
        min-height: 0;
        padding: 338px var(--space-40) var(--space-64);
      }

      .footer__field {padding: 10px var(--space-16);}

      .footer__content {
        flex-direction: column;
        gap: var(--space-48);
      }

      .footer__newsletter {
        width: 100%;
      }

      .footer__title {
        font-size: 48px;
      }

      .footer__links {
        flex-wrap: wrap;
        gap: var(--space-48);
      }
    }

    /* ==========================================================================
       Mobile (max-width: 768px)
       ========================================================================== */
    @media (max-width: 768px) {
      .header {
        padding: 0 var(--space-16);
      }

      .header__logo {
        top: 36px;
        width: 140px;
        height: 54px;
      }

      .nav__menu {
        padding-left: var(--space-24);
        padding-right: var(--space-24);
      }

      /* Hero */
      .hero {
        align-items: flex-start;
        min-height: 600px;
        padding: 96px var(--space-16) var(--space-48);
      }

      .hero__shade {
        background: linear-gradient(to top, var(--color-shade-strong), rgba(0, 0, 0, 0.25));
      }

      .hero__copy {
        gap: var(--space-32);
      }

      .hero__top-line {
        flex-wrap: wrap;
        white-space: normal;
      }

      .hero__tagline {
        font-size: var(--fs-18);
      }

      .hero__title {
        font-size: 40px;
      }

      .hero__subtitle {
        font-size: var(--fs-24);
      }

      .hero__actions {
        flex-direction: column;
        align-items: stretch;
      }

      /* Philosophy */
      .philosophy {
        gap: var(--space-24);
        padding: var(--space-64) var(--space-16);
      }

      .philosophy__quote {
        font-size: var(--fs-24);
        line-height: 1.3;
      }

      /* Showcase */
      .showcase {
        flex-direction: column;
        gap: var(--space-48);
        padding: 0 var(--space-16) var(--space-48);
      }

      .showcase__row {
        width: 100%;
      }

      .showcase__row--first,
      .showcase__row--second {
        padding: 0;
      }

      .showcase__row--second .showcase__item {
        flex-direction: column-reverse;
      }

      .showcase__media {
        height: 360px;
      }

      .showcase__title {
        font-size: var(--fs-32);
      }

      .showcase__desc {
        font-size: var(--fs-16);
      }

      .hero__image {top: 0;}

      /* Catalog */
      .catalog {
        padding: var(--space-48) 0;
      }

      .catalog__copy {
        padding: 0 var(--space-16);
      }

      .catalog__title {
        font-size: var(--fs-32);
      }

      .catalog__subtitle,
      .catalog__lead {
        font-size: var(--fs-18);
      }

      .catalog__lead {
        min-height: 0;
      }

      .carousel {
        gap: var(--space-8);
        padding: 0 var(--space-8);
      }

      .carousel__control {
        width: 28px;
        height: 40px;
      }

      .carousel__control-icon {
        width: 28px;
        height: 40px;
      }

      .card {
        flex-basis: 260px;
      }

      /* Banners */
      .banner--craft,
      .banner--heritage {
        min-height: 0;
        padding: var(--space-64) 0;
      }

      .banner__panel {
        padding: var(--space-40) var(--space-24);
      }

      .banner__title {
        font-size: 32px;
      }

      /* Gentleman */
      .gentleman {
        padding: var(--space-80) var(--space-16);
      }

      .gentleman__title {
        font-size: 32px;
      }

      /* Details */
      .details {
        padding: var(--space-48) var(--space-16);
      }

      .details__title {
        font-size: 32px;
      }

      .specs__item {
        gap: var(--space-24);
      }

      .specs__label {
        flex: 1;
        width: auto;
        font-size: var(--fs-20);
      }

      .details__right {
        flex-direction: column;
        align-items: center;
        gap: var(--space-32);
      }

      .details__preview {
        width: 100%;
        max-width: 340px;
        height: auto;
        aspect-ratio: 405 / 486;
      }

      .details__caption {
        align-items: flex-start;
        width: 100%;
      }

      /* Process */
      .process {
        gap: var(--space-48);
        padding: var(--space-48) var(--space-16) 0;
      }

      .process__title {
        font-size: var(--fs-32);
      }

      .steps__item {
        gap: var(--space-24);
      }

      .steps__title {
        font-size: var(--fs-24);
      }

      .cta {
        width: 100%;
        padding: var(--space-48) var(--space-16);
      }

      .cta__title {
        font-size: 34px;
      }

      /* Footer */
      .footer {
        padding: 400px var(--space-16) var(--space-48);
      }

      .footer__title {
        font-size: 34px;
        white-space: normal;
      }

      .footer__form {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-16);
      }

      .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-24);
      }

      .footer__legal {
        align-items: flex-start;
        width: 100%;
        text-align: left;
      }
    }

    /* ==========================================================================
       Small laptops / landscape tablets (1025px - 1380px)
       ========================================================================== */
    @media (min-width: 1025px) and (max-width: 1380px) {
      .steps {
        gap: var(--space-24);
      }

      .steps__item {
        flex: 1 1 0;
        gap: var(--space-24);
        min-width: 0;
      }

      .steps__text {
        flex: 1;
        width: auto;
        min-width: 0;
      }

      .details__right {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        row-gap: var(--space-32);
      }

      .details__caption {
        flex: 1 1 240px;
        align-items: flex-start;
        align-self: center;
        width: auto;
        min-width: 0;
      }
    }

    @media (min-width: 1025px) and (max-width: 1300px) {
      .footer__content {
        flex-wrap: wrap;
        gap: var(--space-48);
      }

      .footer__links {
        gap: var(--space-48);
      }
    }

    @media (min-width: 1025px) and (max-width: 1280px) {
      .header {
        padding: 0 var(--space-40);
      }
    }

    /* ==========================================================================
       Responsive refinements (tablet and mobile)
       ========================================================================== */
    @media (max-width: 1024px) {
      .card {
        flex: 0 0 min(320px, 70vw);
      }

      .details__right {
        flex-wrap: wrap;
      }

      .hero__title,
      .cta__title,
      .footer__title {
        max-width: 100%;
      }
    }

    @media (max-width: 768px) {
      .hero__title {
        font-size: clamp(28px, 9vw, 40px);
      }

      .hero__subtitle {
        font-size: clamp(20px, 6vw, 24px);
      }

      .cta__title {
        font-size: clamp(26px, 8vw, 34px);
        white-space: normal;
      }

      .footer__title {
        font-size: clamp(26px, 8vw, 34px);
      }

      .card {
        flex-basis: min(280px, 78vw);
      }

      .dialog__surface {
        padding: var(--space-48) var(--space-24) var(--space-32);
      }

      .details__right {
        flex-wrap: nowrap;
        overflow-x: clip;
      }
    }

    @media (max-width: 400px) {
      .banner__panel {
        padding: var(--space-32) var(--space-16);
      }

      .specs__item {
        gap: var(--space-16);
      }

      .specs__label {
        font-size: var(--fs-18);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
      }

      .js [data-reveal] {
        opacity: 1;
        transform: none;
      }
    }
    /* ==========================================================================
       Smooth scrolling (Lenis, started in js/animations.js)
       ========================================================================== */
    html.lenis,
    html.lenis body {
      height: auto;
    }

    .lenis.lenis-smooth {
      scroll-behavior: auto !important;
    }

    .lenis.lenis-smooth [data-lenis-prevent] {
      overscroll-behavior: contain;
    }

    .lenis.lenis-smooth iframe {
      pointer-events: none;
    }