:root {
      --paper: #f2ede6;
      --paper2: #e8e1d8;
      --paper3: #d9d0c5;
      --dust: #6a6258;
      --mid: #4a4540;
      --charcoal: #2e2a25;
      --ink: #161310;
      --red: #d42b1e;
      --FD: 'Barlow Condensed', sans-serif;
      --FM: 'Inconsolata', monospace;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      font-family: var(--FM);
      background: var(--paper);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      cursor: none;
      -webkit-text-size-adjust: 100%;
    }

    /* GRAIN */
    body::after {
      content: '';
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      z-index: 9000;
      opacity: 0.04;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* ── CURSOR ── */
    .cur {
      position: fixed;
      pointer-events: none;
      z-index: 99999;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--red);
      transform: translate(-50%, -50%);
      transition: width .15s, height .15s, border-radius .15s, background .15s;
    }

    .cur.big {
      width: 44px;
      height: 44px;
      background: transparent;
      border: 1.5px solid var(--red);
      border-radius: 50%;
    }

    .cur.line {
      width: 40px;
      height: 2px;
      border-radius: 1px;
      background: var(--ink);
    }

    @media (pointer:coarse) {
      .cur {
        display: none;
      }

      body {
        cursor: auto;
      }
    }

    /* ── PROGRESS ── */
    .prog {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: var(--red);
      z-index: 9998;
    }

    /* ── NAV ── */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      padding: .85rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(242, 237, 230, .96);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--paper3);
      transition: padding .3s, background .3s;
    }

    .nav-logo {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .nav-logo-top {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.35rem;
      letter-spacing: .04em;
      color: var(--ink);
      text-transform: uppercase;
      line-height: 1;
    }

    .nav-logo-top em {
      font-style: normal;
      color: var(--red);
    }

    .nav-logo-sub {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .15em;
      color: var(--dust);
      margin-top: .1rem;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2.25rem;
    }

    .nav-link {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .08em;
      color: var(--mid);
      text-decoration: none;
      transition: color .2s;
    }

    .nav-link:hover {
      color: var(--red);
    }

    .nav-cta {
      font-family: var(--FD);
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .5rem 1.4rem;
      background: var(--red);
      color: var(--paper);
      text-decoration: none;
      transition: background .2s, transform .15s;
    }

    .nav-cta:hover {
      background: var(--ink);
      transform: translateY(-1px);
    }

    .mob-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }

    .mob-toggle span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--ink);
      transition: all .3s;
    }

    .mob-toggle.open span:nth-child(1) {
      transform: rotate(45deg) translate(4px, 4px);
    }

    .mob-toggle.open span:nth-child(2) {
      opacity: 0;
    }

    .mob-toggle.open span:nth-child(3) {
      transform: rotate(-45deg) translate(4px, -4px);
    }

    /* MOBILE MENU */
    .mob-menu {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: var(--ink);
      z-index: 998;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 3rem 2rem;
      -webkit-clip-path: inset(0 0 100% 0);
      clip-path: inset(0 0 100% 0);
      transition: -webkit-clip-path .6s cubic-bezier(.16, 1, .3, 1), clip-path .6s cubic-bezier(.16, 1, .3, 1);
    }

    .mob-menu.open {
      -webkit-clip-path: inset(0 0 0% 0);
      clip-path: inset(0 0 0% 0);
    }

    .mob-menu a {
      font-family: var(--FD);
      font-weight: 900;
      font-style: italic;
      font-size: clamp(3rem, 12vw, 6rem);
      text-transform: uppercase;
      color: var(--paper);
      text-decoration: none;
      line-height: 1.05;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .4s, transform .4s cubic-bezier(.16, 1, .3, 1), color .2s;
    }

    .mob-menu.open a {
      opacity: 1;
      transform: translateY(0);
    }

    .mob-menu.open a:nth-child(1) {
      transition-delay: .06s
    }

    .mob-menu.open a:nth-child(2) {
      transition-delay: .12s
    }

    .mob-menu.open a:nth-child(3) {
      transition-delay: .18s
    }

    .mob-menu.open a:nth-child(4) {
      transition-delay: .24s
    }

    .mob-menu.open a:nth-child(5) {
      transition-delay: .30s
    }

    .mob-menu a:hover {
      color: var(--red);
    }

    .mob-flag-strip {
      margin-top: 2.5rem;
      display: flex;
      height: 3px;
    }

    .mob-flag-strip span {
      flex: 1;
    }

    .mf1 {
      background: var(--red)
    }

    .mf2 {
      background: #0f4d8a
    }

    .mf3 {
      background: #f5c518
    }

    .mf4 {
      background: #009a44
    }

    /* ════════════════════════════
       HERO
    ════════════════════════════ */
    .hero {
      min-height: 100vh;
      min-height: -webkit-fill-available;
      display: grid;
      grid-template-columns: 64px 1fr;
      position: relative;
      overflow: hidden;
    }

    .hero-edge {
      background: var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 3;
      flex-shrink: 0;
    }

    .hero-edge-text {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-family: var(--FD);
      font-weight: 900;
      font-size: .95rem;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--red);
    }

    .hero-edge-line {
      width: 1px;
      flex: 1;
      background: rgba(255, 255, 255, .07);
      max-height: 120px;
      margin: 1rem 0;
    }

    .hero-edge-num {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .15em;
      color: rgba(255, 255, 255, .18);
      writing-mode: vertical-rl;
    }

    .hero-main {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 8rem 3rem 4rem 3rem;
      min-width: 0;
    }

    /* Ghost "TK" — decorative only, z-index 0 */
    .hero-bg-num {
      position: absolute;
      right: -0.05em;
      top: 50%;
      transform: translateY(-55%);
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(14rem, 30vw, 34rem);
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px rgba(22, 19, 16, .04);
      user-select: none;
      pointer-events: none;
      letter-spacing: -.03em;
      z-index: 0;
    }

    .hero-weave {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      opacity: .03;
      z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='10' height='10' fill='%23161310'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23161310'/%3E%3C/svg%3E");
      background-size: 6px 6px;
    }

    /* Mauritian flag stripe */
    .flag-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      display: flex;
      z-index: 4;
    }

    .flag-bar span {
      flex: 1;
    }

    .fb1 {
      background: var(--red)
    }

    .fb2 {
      background: #0f4d8a
    }

    .fb3 {
      background: #f5c518
    }

    .fb4 {
      background: #009a44
    }

    .hero-eyebrow {
      font-family: var(--FM);
      font-size: 1.15rem;
      letter-spacing: .05em;
      color: var(--dust);
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: .75rem;
      position: relative;
      z-index: 2;
      opacity: 0;
      transform: translateY(10px);
    }

    .hero-eyebrow.in {
      animation: slideup .7s cubic-bezier(.16, 1, .3, 1) .1s forwards;
    }

    .hero-eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
      flex-shrink: 0;
    }

    .hero-headline {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(4rem, 12vw, 11rem);
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-bottom: 2.5rem;
      position: relative;
      z-index: 2;
    }

    /* Overflow hidden on each line clips the slide-up reveal */
    .hero-headline .hl {
      display: block;
      overflow: hidden;
      padding-bottom: .06em;
    }

    .hero-headline .hl>span,
    .hero-headline .hl>svg {
      display: block;
      transform: translateY(110%);
      transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
    }

    .hero-headline .hl.in>span,
    .hero-headline .hl.in>svg {
      transform: translateY(0);
    }

    .hero-headline .hl:nth-child(1)>span {
      transition-delay: .05s;
    }

    .hero-headline .hl:nth-child(2)>span {
      transition-delay: .18s;
    }

    .hero-headline .hl:nth-child(3)>svg {
      transition-delay: .31s;
    }

    .italic-line {
      font-style: italic;
      color: var(--red);
    }

    /* Outline line — inline SVG, bulletproof across all browsers */
    .outline-svg {
      display: block;
      width: auto;
      /* don't stretch — let height drive sizing */
      height: .94em;
      /* matches line-height of headline */
      overflow: visible;
      color: var(--ink);
      /* currentColor for stroke */
    }

    @media (max-width:768px) {
      .outline-svg {
        stroke-width: 1px;
      }

      /* Hide TK ghost on mobile — it overlaps at small sizes */
      .hero-bg-num {
        display: none;
      }
    }

    .hero-bottom {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 3rem;
      align-items: end;
      position: relative;
      z-index: 2;
      padding-top: 2rem;
      border-top: 1px solid var(--paper3);
    }

    .hero-desc {
      font-family: var(--FM);
      font-weight: 400;
      font-size: 1.1rem;
      color: var(--mid);
      line-height: 1.9;
      opacity: 0;
      transform: translateY(12px);
    }

    .hero-desc.in {
      animation: slideup .8s cubic-bezier(.16, 1, .3, 1) .55s forwards;
    }

    .hero-right-block {
      opacity: 0;
    }

    .hero-right-block.in {
      animation: slideup .8s cubic-bezier(.16, 1, .3, 1) .7s forwards;
    }

    .hero-specs {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--paper3);
      margin-bottom: 1.5rem;
    }

    .hero-spec {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: .65rem .9rem;
      border-bottom: 1px solid var(--paper3);
    }

    .hero-spec:last-child {
      border-bottom: none;
    }

    .hero-spec-label {
      font-family: var(--FM);
      font-size: .85rem;
      letter-spacing: .1em;
      color: var(--dust);
    }

    .hero-spec-val {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--ink);
      letter-spacing: .03em;
    }

    .cta-main {
      display: block;
      width: 100%;
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.4rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .85rem 1.5rem;
      background: var(--red);
      color: var(--paper);
      text-decoration: none;
      text-align: center;
      transition: background .2s, transform .15s, box-shadow .2s;
    }

    .cta-main:hover {
      background: var(--ink);
      transform: translate(-3px, -3px);
      box-shadow: 3px 3px 0 var(--red);
    }

    /* ── TICKER ── */
    .ticker {
      overflow: hidden;
      padding: .9rem 0;
      background: var(--ink);
    }

    .ticker-track {
      display: flex;
      width: max-content;
      animation: tick 32s linear infinite;
    }

    @keyframes tick {
      to {
        transform: translateX(-50%);
      }
    }

    .ticker-item {
      font-family: var(--FD);
      font-weight: 700;
      font-style: italic;
      font-size: 1.15rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--paper2);
      padding: 0 2rem;
      white-space: nowrap;
    }

    .ticker-dot {
      color: var(--red);
      padding: 0 .5rem;
      font-style: normal;
    }

    /* ── SECTION LABEL ── */
    .sec-label {
      display: flex;
      align-items: center;
      padding: .9rem 2rem;
      border-top: 1px solid var(--paper3);
      gap: .75rem;
    }

    .sec-label-text {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .1em;
      color: var(--mid);
      white-space: nowrap;
    }

    .sec-label-rule {
      flex: 1;
      height: 1px;
      background: var(--paper3);
    }

    .sec-label-num {
      font-family: var(--FM);
      font-size: 1rem;
      letter-spacing: .15em;
      color: var(--paper3);
      white-space: nowrap;
    }

    /* ════════════════════════════
       EDITORIAL BREAK
    ════════════════════════════ */
    .editorial-break {
      background: var(--red);
      overflow: hidden;
      padding: 4rem 0;
    }

    .editorial-break-inner {
      display: flex;
      align-items: center;
      white-space: nowrap;
      animation: tick 20s linear infinite;
      width: max-content;
    }

    .editorial-break-word {
      font-family: var(--FD);
      font-weight: 900;
      font-style: italic;
      font-size: clamp(3.5rem, 9vw, 7.5rem);
      text-transform: uppercase;
      letter-spacing: .04em;
      color: transparent;
      -webkit-text-stroke: 2px var(--paper);
      padding: 0 3rem;
      line-height: 1.1;
    }

    .editorial-break-word.filled {
      color: var(--paper);
      -webkit-text-stroke: 0;
    }

    /* ════════════════════════════
       SERVICES
    ════════════════════════════ */
    .services {
      padding: 5rem 0 0;
    }

    .svc-header {
      padding: 0 2rem 3rem;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 2rem;
    }

    .svc-hed {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(3rem, 8vw, 7.5rem);
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .svc-hed em {
      display: block;
      font-style: italic;
      color: var(--red);
    }

    .svc-hed-sub {
      font-family: var(--FM);
      font-size: 1rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--dust);
      max-width: 280px;
      line-height: 1.9;
      text-align: right;
    }

    .svc-list {
      border-top: 1px solid var(--paper3);
    }

    .svc {
      display: grid;
      grid-template-columns: 3.5rem 18rem 1fr 2.5rem;
      border-bottom: 1px solid var(--paper3);
      padding: 0 2rem;
      cursor: none;
      transition: background .25s;
    }

    .svc:hover {
      background: var(--paper2);
    }

    .svc-num {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 5rem;
      color: var(--paper3);
      line-height: 1;
      padding: 1.5rem 0;
      align-self: start;
      transition: color .25s;
    }

    .svc:hover .svc-num {
      color: var(--paper2);
    }

    .svc-name-wrap {
      padding: 2rem 1.5rem 2rem 0;
    }

    .svc-name {
      font-family: var(--FD);
      font-weight: 900;
      font-style: italic;
      font-size: clamp(2.2rem, 4vw, 3.8rem);
      text-transform: uppercase;
      line-height: .95;
      color: var(--ink);
      transition: color .25s;
    }

    .svc:hover .svc-name {
      color: var(--red);
    }

    .svc-name-sub {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--dust);
      display: block;
      margin-top: .4rem;
    }

    .svc-body {
      padding: 2rem;
      border-left: 1px solid var(--paper3);
    }

    .svc-body p {
      font-family: var(--FM);
      font-weight: 400;
      font-size: 1.1rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1.1rem;
    }

    .svc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
    }

    .svc-tag {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .25rem .65rem;
      border: 1px solid var(--paper3);
      color: var(--mid);
      transition: border-color .2s, color .2s;
    }

    .svc:hover .svc-tag {
      border-color: var(--red);
      color: var(--charcoal);
    }

    .svc-arr {
      align-self: center;
      justify-self: end;
      font-size: .9rem;
      color: var(--paper3);
      transition: all .25s;
    }

    .svc:hover .svc-arr {
      color: var(--red);
      transform: translateX(4px);
    }

    .svc.svc-cta {
      background: rgba(212, 43, 30, 0.03);
    }

    .svc-cta .svc-name {
      font-size: clamp(2.2rem, 4vw, 3.8rem);
      color: var(--ink);
      background: linear-gradient(to right, var(--red) 50%, var(--ink) 50%);
      background-size: 200% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: background-position .4s cubic-bezier(.165, .84, .44, 1);
      position: relative;
      display: inline-block;
    }

    .svc-cta:hover .svc-name {
      background-position: 0 0;
    }

    .svc-cta .svc-arr {
      font-size: 1.6rem;
      color: var(--red);
      opacity: 0.6;
    }

    .svc-cta:hover .svc-arr {
      opacity: 1;
      transform: translate(6px, -6px);
    }

    /* ════════════════════════════
       NUMBERS
    ════════════════════════════ */
    .numbers-section {
      padding: 5rem 2rem;
      border-top: 1px solid var(--paper3);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .num {
      padding: 2rem 2.5rem 2rem 0;
      border-right: 1px solid var(--paper3);
    }

    .num:last-child {
      border-right: none;
      padding-right: 0;
      padding-left: 2.5rem;
    }

    .num:not(:first-child) {
      padding-left: 2.5rem;
    }

    .num-big {
      font-family: var(--FD);
      font-weight: 900;
      font-style: italic;
      font-size: clamp(3.5rem, 6vw, 6rem);
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .num-big em {
      font-style: italic;
      color: var(--red);
    }

    .num-label {
      font-family: var(--FM);
      font-size: 1rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--dust);
      margin-top: .65rem;
      line-height: 1.6;
    }

    /* ════════════════════════════
       CULTURE PANEL
    ════════════════════════════ */
    .culture-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-top: 1px solid var(--paper3);
    }

    .culture-left {
      background: var(--ink);
      padding: 5rem 3rem;
      position: relative;
      overflow: hidden;
    }

    /* Ghost text — explicit z-index 0, well below readable content */
    .culture-left::before {
      content: 'MO\ARI';
      white-space: pre;
      position: absolute;
      bottom: -1rem;
      left: -0.05em;
      font-family: var(--FD);
      font-weight: 900;
      font-style: italic;
      font-size: clamp(6rem, 14vw, 13rem);
      text-transform: uppercase;
      letter-spacing: -.03em;
      line-height: .85;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255, 255, 255, .05);
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }

    .culture-quote {
      font-family: var(--FD);
      font-weight: 700;
      font-style: italic;
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      line-height: 1.2;
      color: var(--paper);
      position: relative;
      z-index: 2;
      margin-bottom: 2rem;
    }

    .culture-attr {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(242, 237, 230, .3);
      position: relative;
      z-index: 2;
    }

    .culture-right {
      padding: 5rem 3rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .culture-statement {
      font-family: var(--FD);
      font-weight: 700;
      font-size: clamp(1.5rem, 2.8vw, 2.4rem);
      text-transform: uppercase;
      line-height: 1.05;
      color: var(--ink);
      margin-bottom: 2.5rem;
    }

    .culture-statement em {
      font-style: italic;
      color: var(--red);
    }

    .culture-facts {
      display: flex;
      flex-direction: column;
      gap: .85rem;
    }

    .cf {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      font-family: var(--FM);
      font-size: .88rem;
      color: var(--mid);
      line-height: 1.7;
    }

    .cf-dash {
      color: var(--red);
      flex-shrink: 0;
      margin-top: .05rem;
    }

    /* ════════════════════════════
       WHO
    ════════════════════════════ */
    .who {
      padding: 5rem 2rem;
    }

    .who-header {
      margin-bottom: 3rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
    }

    .who-hed {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(3rem, 7vw, 6rem);
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .who-hed em {
      font-style: italic;
      color: var(--red);
    }

    .who-hed-note {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--dust);
      max-width: 200px;
      line-height: 1.9;
      text-align: right;
    }

    .who-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border: 1px solid var(--paper3);
    }

    .wi {
      padding: 2.5rem 2rem;
      border-right: 1px solid var(--paper3);
      border-bottom: 1px solid var(--paper3);
      transition: background .25s;
    }

    .wi:hover {
      background: var(--paper2);
    }

    .wi:nth-child(3),
    .wi:nth-child(6) {
      border-right: none;
    }

    .wi:nth-child(4),
    .wi:nth-child(5),
    .wi:nth-child(6) {
      border-bottom: none;
    }

    .wi-n {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 3rem;
      color: var(--paper3);
      line-height: 1;
      margin-bottom: 1rem;
      transition: color .25s;
    }

    .wi:hover .wi-n {
      color: var(--red);
    }

    .wi-title {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--ink);
      margin-bottom: .5rem;
      line-height: 1.1;
    }

    .wi-sub {
      font-family: var(--FM);
      font-weight: 400;
      font-size: .82rem;
      color: var(--mid);
      line-height: 1.85;
    }

    /* MARKETS */
    .market-strip {
      border-top: 1px solid var(--paper3);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }

    .mkt {
      padding: 3rem 2rem;
      border-right: 1px solid var(--paper3);
      position: relative;
      overflow: hidden;
      transition: background .25s;
    }

    .mkt:hover {
      background: var(--paper2);
    }

    .mkt:last-child {
      border-right: none;
    }

    .mkt-eyebrow {
      font-family: var(--FM);
      font-size: 1.1rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 1rem;
    }

    .mkt-name {
      font-family: var(--FD);
      font-weight: 900;
      font-style: italic;
      font-size: clamp(1.9rem, 3.2vw, 2.8rem);
      text-transform: uppercase;
      letter-spacing: -.01em;
      color: var(--ink);
      line-height: 1;
      margin-bottom: 1.25rem;
      position: relative;
      z-index: 2;
    }

    .mkt-desc {
      font-family: var(--FM);
      font-weight: 400;
      font-size: 1.1rem;
      color: var(--mid);
      line-height: 1.85;
      position: relative;
      z-index: 2;
    }

    /* Ghost country code — never overlaps real text due to overflow:hidden on parent */
    .mkt-bg-letter {
      position: absolute;
      bottom: 0;
      right: -.05em;
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(4.5rem, 10vw, 9rem);
      text-transform: uppercase;
      color: transparent;
      -webkit-text-stroke: 1px var(--paper3);
      pointer-events: none;
      user-select: none;
      line-height: 1;
      z-index: 0;
      opacity: .55;
    }

    /* ════════════════════════════
       PROCESS
    ════════════════════════════ */
    .process {
      padding: 5rem 2rem;
      border-top: 1px solid var(--paper3);
    }

    .process-hed {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(3rem, 7vw, 6rem);
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-bottom: 4rem;
    }

    .process-hed em {
      font-style: italic;
      color: var(--red);
    }

    .ps-list {
      border-top: 1px solid var(--paper3);
    }

    .ps {
      display: grid;
      grid-template-columns: 5rem 16rem 1fr;
      border-bottom: 1px solid var(--paper3);
      padding: 2rem;
      transition: background .25s;
      align-items: center;
    }

    .ps:hover {
      background: var(--paper2);
    }

    .ps-n {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 3rem;
      color: var(--paper3);
      line-height: 1;
      transition: color .25s;
      align-self: center;
    }

    .ps:hover .ps-n {
      color: var(--red);
    }

    .ps-name {
      font-family: var(--FD);
      font-weight: 700;
      font-style: italic;
      font-size: 1.75rem;
      text-transform: uppercase;
      letter-spacing: .02em;
      color: var(--ink);
      line-height: 1;
      align-self: center;
    }

    .ps-desc {
      font-family: var(--FM);
      font-weight: 400;
      font-size: 1.1rem;
      color: var(--mid);
      line-height: 1.9;
      align-self: center;
      padding-left: 2rem;
      border-left: 1px solid var(--paper3);
    }

    /* ════════════════════════════
       MATERIALS
    ════════════════════════════ */
    .materials {
      background: var(--ink);
      padding: 5rem 2rem;
    }

    .mat-head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      margin-bottom: 4rem;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      padding-bottom: 3rem;
    }

    .mat-hed {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(3rem, 6vw, 5.5rem);
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.02em;
      color: var(--paper);
    }

    .mat-hed em {
      font-style: italic;
      color: var(--red);
    }

    .mat-sub {
      font-family: var(--FM);
      font-weight: 400;
      font-size: .9rem;
      color: rgba(242, 237, 230, .72);
      line-height: 1.9;
      align-self: center;
    }

    .mat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid rgba(255, 255, 255, .06);
    }

    .mat-item {
      padding: 2rem;
      border-right: 1px solid rgba(255, 255, 255, .06);
      transition: background .25s;
    }

    .mat-item:last-child {
      border-right: none;
    }

    .mat-item:hover {
      background: rgba(255, 255, 255, .04);
    }

    .mat-item-gsm {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 2.5rem;
      color: rgba(255, 255, 255, .14);
      line-height: 1;
      margin-bottom: .5rem;
    }

    .mat-item-name {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1.35rem;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--paper2);
      margin-bottom: .35rem;
    }

    .mat-item-tag {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: .75rem;
    }

    .mat-item-desc {
      font-family: var(--FM);
      font-weight: 400;
      font-size: 1.1rem;
      color: rgba(242, 237, 230, .75);
      line-height: 1.85;
    }

    /* ════════════════════════════
       CONTACT
    ════════════════════════════ */
    .contact {
      padding: 5rem 2rem;
      border-top: 1px solid var(--paper3);
    }

    .contact-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
    }

    .contact-hed {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(3rem, 7vw, 6rem);
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-bottom: 2rem;
    }

    .contact-hed em {
      font-style: italic;
      color: var(--red);
    }

    .contact-blurb {
      font-family: var(--FM);
      font-weight: 400;
      font-size: .9rem;
      color: var(--mid);
      line-height: 1.95;
      margin-bottom: 2.5rem;
    }

    .contact-meta {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .cmi {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-family: var(--FM);
      font-size: 1.1rem;
      letter-spacing: .03em;
      color: var(--mid);
    }

    .cmi-bullet {
      width: 4px;
      height: 4px;
      background: var(--red);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .cmi a {
      color: var(--ink);
      text-decoration: none;
      transition: color .2s;
    }

    .cmi a:hover {
      color: var(--red);
    }

    .fg {
      margin-bottom: 1.75rem;
    }

    .fl {
      font-family: var(--FM);
      font-size: 1.25rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--mid);
      display: block;
      margin-bottom: .5rem;
      transition: color .2s;
    }

    .fg:focus-within .fl {
      color: var(--red);
    }

    .fi,
    .fs,
    .ft {
      width: 100%;
      padding: .75rem 0;
      border: none;
      border-bottom: 1px solid var(--paper3);
      background: transparent;
      font-family: var(--FM);
      font-size: .95rem;
      color: var(--ink);
      outline: none;
      transition: border-color .2s;
    }

    .fi:focus,
    .fs:focus,
    .ft:focus {
      border-color: var(--red);
    }

    .ft {
      min-height: 90px;
      resize: vertical;
    }

    .fs {
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%237a7268' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 4px center;
    }

    .fs option {
      background: var(--paper);
    }

    .frow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .submit-btn {
      width: 100%;
      padding: 1rem;
      background: var(--ink);
      color: var(--paper);
      border: none;
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.35rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all .2s;
    }

    .submit-btn:hover {
      background: var(--red);
      transform: translate(-3px, -3px);
      box-shadow: 3px 3px 0 var(--ink);
    }

    .form-ok {
      display: none;
      padding: 3rem;
      border: 1px solid var(--paper3);
      text-align: center;
    }

    .form-ok.on {
      display: block;
      animation: fade .4s ease;
    }

    .form-ok-big {
      font-family: var(--FD);
      font-weight: 900;
      font-style: italic;
      font-size: 4.5rem;
      text-transform: uppercase;
      color: var(--red);
      line-height: 1;
      margin-bottom: .5rem;
    }

    .form-ok p {
      font-family: var(--FM);
      font-size: .85rem;
      letter-spacing: .18em;
      color: var(--mid);
      text-transform: uppercase;
    }

    /* ════════════════════════════
       FOOTER
    ════════════════════════════ */
    .footer {
      background: var(--ink);
      border-top: 3px solid var(--red);
      padding: 3.5rem 2rem 2.5rem;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: end;
      gap: 3rem;
    }

    .footer-logo {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(3rem, 6vw, 5rem);
      text-transform: uppercase;
      line-height: .88;
      letter-spacing: -.01em;
      color: rgba(255, 255, 255, 0.2);
      transition: color .3s;
    }

    .footer-logo:hover {
      color: rgba(242, 237, 230, .2);
    }

    .footer-logo-sub {
      font-family: var(--FM);
      font-size: 1.15rem;
      letter-spacing: .15em;
      color: rgba(255, 255, 255, 0.7);
      margin-top: .2rem;
    }

    .footer-center-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .7rem;
    }

    .footer-center-links a {
      font-family: var(--FM);
      font-size: 1.1rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: color .2s;
    }

    .footer-center-links a:hover {
      color: var(--red);
    }

    .footer-right {
      text-align: right;
    }

    .footer-flag {
      display: flex;
      height: 3px;
      margin-bottom: 1.25rem;
      justify-content: flex-end;
    }

    .footer-flag span {
      width: 24px;
    }

    .ff1 {
      background: var(--red)
    }

    .ff2 {
      background: #0f4d8a
    }

    .ff3 {
      background: #f5c518
    }

    .ff4 {
      background: #009a44
    }

    .footer-copy {
      font-family: var(--FM);
      font-size: 1.15rem;
      letter-spacing: .05em;
      color: rgba(255, 255, 255, 0.6);
    }

    .footer-copy em {
      font-style: normal;
      color: var(--red);
    }

    /* ════════════════════════════
       IMAGE PLACEHOLDERS
    ════════════════════════════ */

    /* 1 — Full-width cinematic strip (after numbers) */
    .img-cinematic {
      width: 100%;
      height: clamp(280px, 40vw, 520px);
      position: relative;
      overflow: hidden;
    }

    .img-cinematic img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: transform 8s ease, opacity 1s ease-in-out;
    }

    .img-cinematic img.active {
      opacity: 1;
      z-index: 1;
    }

    .img-cinematic:hover img.active {
      transform: scale(1.03);
    }

    .img-placeholder {
      width: 100%;
      height: 100%;
      background: var(--paper2);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }

    .img-placeholder-label {
      font-family: var(--FM);
      font-size: .85rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--dust);
    }

    .img-placeholder-dim {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      color: var(--paper3);
      letter-spacing: -.01em;
    }

    .img-placeholder-cross {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
    }

    .img-placeholder-cross::before,
    .img-placeholder-cross::after {
      content: '';
      position: absolute;
      background: var(--paper3);
    }

    .img-placeholder-cross::before {
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      transform: translateX(-50%);
    }

    .img-placeholder-cross::after {
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      transform: translateY(-50%);
    }

    /* 2 — Culture panel image (replaces dark left bg) */
    .culture-left {
      background: var(--ink);
      padding: 5rem 3rem;
      position: relative;
      overflow: hidden;
    }

    .culture-img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      opacity: .35;
      /* image tints behind quote */
    }

    .culture-img-placeholder {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: repeating-linear-gradient(45deg,
          rgba(255, 255, 255, .02) 0px,
          rgba(255, 255, 255, .02) 1px,
          transparent 1px,
          transparent 12px);
      display: flex;
      align-items: flex-end;
      padding: 1.5rem;
    }

    .culture-img-placeholder span {
      font-family: var(--FM);
      font-size: .85rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .2);
    }

    /* 3 — Asymmetric image between Who and Markets */
    .img-break {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-top: 1px solid var(--paper3);
    }

    .img-break-image {
      height: clamp(300px, 45vw, 560px);
      position: relative;
      overflow: hidden;
    }

    .img-break-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 8s ease;
    }

    .img-break-image:hover img {
      transform: scale(1.03);
    }

    .img-break-caption {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background: var(--paper2);
    }

    .img-break-caption-hed {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(2rem, 4vw, 3.5rem);
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-bottom: 1rem;
    }

    .img-break-caption-hed em {
      font-style: italic;
      color: var(--red);
    }

    .img-break-caption p {
      font-family: var(--FM);
      font-size: .88rem;
      color: var(--mid);
      line-height: 1.8;
    }

    @media (max-width: 768px) {
      .img-break {
        grid-template-columns: 1fr;
      }

      .img-break-image {
        height: clamp(220px, 60vw, 360px);
      }
    }

    /* ANIMATIONS */
    .rv {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1);
    }

    .rv.in {
      opacity: 1;
      transform: translateY(0);
    }

    .rv2 {
      opacity: 0;
      transform: translateX(-18px);
      transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
    }

    .rv2.in {
      opacity: 1;
      transform: translateX(0);
    }

    @keyframes slideup {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fade {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* ════════════════════════════
       RESPONSIVE
    ════════════════════════════ */
    @media (max-width:1100px) {
      .hero {
        grid-template-columns: 44px 1fr;
      }

      .svc {
        grid-template-columns: 3rem 16rem 1fr;
      }

      .svc-arr {
        display: none;
      }

      .numbers-section {
        grid-template-columns: 1fr 1fr;
      }

      .num:nth-child(2) {
        border-right: none;
      }

      .num:nth-child(3) {
        border-right: 1px solid var(--paper3);
        border-top: 1px solid var(--paper3);
      }

      .num:nth-child(4) {
        border-top: 1px solid var(--paper3);
      }

      .culture-panel {
        grid-template-columns: 1fr;
      }

      .who-grid {
        grid-template-columns: 1fr 1fr;
      }

      .wi:nth-child(2),
      .wi:nth-child(4) {
        border-right: none;
      }

      .wi:nth-child(3),
      .wi:nth-child(4) {
        border-bottom: 1px solid var(--paper3);
      }

      .wi:nth-child(5) {
        border-right: 1px solid var(--paper3);
      }

      .wi:nth-child(5),
      .wi:nth-child(6) {
        border-bottom: none;
      }

      .market-strip {
        grid-template-columns: 1fr;
      }

      .mkt {
        border-right: none;
        border-bottom: 1px solid var(--paper3);
      }

      .mkt:last-child {
        border-bottom: none;
      }

      .ps {
        grid-template-columns: 4rem 12rem 1fr;
      }

      .mat-grid {
        grid-template-columns: 1fr 1fr;
      }

      .mat-item:nth-child(2) {
        border-right: none;
      }

      .mat-item:nth-child(3) {
        border-right: 1px solid rgba(255, 255, 255, .06);
        border-top: 1px solid rgba(255, 255, 255, .06);
      }

      .mat-item:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .06);
      }

      .contact-inner {
        grid-template-columns: 1fr;
        gap: 4rem;
      }

      .footer {
        grid-template-columns: 1fr 1fr;
      }

      .footer-center-links {
        align-items: flex-start;
      }
    }

    @media (max-width:768px) {
      .cur {
        display: none;
      }

      body {
        cursor: auto;
      }

      .nav-links .nav-link,
      .nav-links .nav-cta {
        display: none;
      }

      .mob-toggle {
        display: flex;
      }

      .hero {
        grid-template-columns: 1fr;
      }

      .hero-edge {
        display: none;
      }

      .hero-main {
        padding: 7rem 1.5rem 3rem;
      }

      .hero-bottom {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .hero-bg-num {
        font-size: clamp(7rem, 42vw, 15rem);
      }

      .svc {
        grid-template-columns: 1fr;
        padding: 1.75rem 1.5rem;
        gap: .5rem;
      }

      .svc-num {
        display: none;
      }

      .svc-body {
        border-left: none;
        padding-left: 0;
        padding-top: 0;
      }

      .svc-name-wrap {
        padding-bottom: 0;
      }

      .ps {
        grid-template-columns: 3rem 1fr;
        gap: .75rem;
      }

      .ps-name {
        align-self: start;
        padding-top: .15rem;
        font-size: 1.4rem;
      }

      .ps-desc {
        border-left: none;
        padding-left: 0;
        grid-column: 2;
      }

      .mat-head {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .mat-grid {
        grid-template-columns: 1fr;
      }

      .mat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
      }

      .mat-item:last-child {
        border-bottom: none;
      }

      .who-grid {
        grid-template-columns: 1fr;
      }

      .wi {
        border-right: none !important;
      }

      .wi:nth-child(n) {
        border-bottom: 1px solid var(--paper3);
      }

      .wi:last-child {
        border-bottom: none;
      }

      .frow {
        grid-template-columns: 1fr;
      }

      .footer {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .footer-right {
        text-align: left;
      }

      .footer-flag {
        justify-content: flex-start;
      }

      .numbers-section {
        padding: 3rem 1.5rem;
      }

      .sec-label {
        padding: .9rem 1.5rem;
      }

      .culture-left {
        padding: 3.5rem 2rem;
      }

      .culture-right {
        padding: 3.5rem 2rem;
      }

      .svc-header {
        grid-template-columns: 1fr;
      }

      .svc-hed-sub {
        text-align: left;
        max-width: none;
      }

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

      .who-hed-note {
        text-align: left;
        max-width: none;
      }
    }

    @media (max-width:480px) {
      .numbers-section {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
      }

      .num {
        border-right: none !important;
        border-top: 1px solid var(--paper3);
        padding: 2rem 0 !important;
      }

      .num:first-child {
        border-top: none;
      }
    }

    .nav-back {
      font-size: 0.95rem;
      letter-spacing: .05em;
      color: var(--dust);
      text-decoration: none;
      transition: color .2s
    }

    .nav-back:hover {
      color: var(--red)
    }

    .flag-strip {
      height: 3px;
      display: flex
    }

    .flag-strip span {
      flex: 1
    }

    .fs1 {
      background: #d42b1e
    }

    .fs2 {
      background: #0f4d8a
    }

    .fs3 {
      background: #f5c518
    }

    .fs4 {
      background: #009a44
    }

    /* HERO */
    .page-hero {
      background: var(--ink);
      padding: 7rem 2rem 2.5rem 2rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem
    }

    .page-hero-hed {
      font-family: var(--FD);
      font-weight: 900;
      font-size: clamp(2.5rem, 7vw, 5.5rem);
      text-transform: uppercase;
      line-height: .92;
      letter-spacing: -.02em;
      color: var(--paper)
    }

    .page-hero-hed em {
      font-style: italic;
      color: var(--red)
    }

    .page-hero-sub {
      font-size: 1.05rem;
      letter-spacing: .05em;
      color: rgba(242, 237, 230, .4);
      max-width: 320px;
      line-height: 1.8;
      text-align: right
    }

    /* LAYOUT */
    .designer {
      display: block;
      padding-bottom: 130px;
      max-width: 960px;
      margin: 0 auto
    }

    /* STEPS */
    .step {
      border-bottom: 1px solid var(--paper3)
    }

    .step-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.25rem 2rem;
      cursor: pointer;
      transition: background .2s;
      user-select: none
    }

    .step-header:hover {
      background: var(--paper2)
    }

    .step-num {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 2rem;
      color: var(--paper3);
      line-height: 1;
      flex-shrink: 0;
      transition: color .3s
    }

    .step.active .step-num {
      color: var(--red)
    }

    .step-title {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1.3rem;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--ink)
    }

    .step-subtitle {
      font-size: 1.05rem;
      letter-spacing: .05em;
      color: var(--dust);
      display: block;
      margin-top: .1rem
    }

    .step-chevron {
      margin-left: auto;
      color: var(--dust);
      font-size: .85rem;
      transition: transform .3s
    }

    .step.active .step-chevron {
      transform: rotate(180deg)
    }

    .step-body {
      display: none;
      padding: 1.5rem 2rem 2rem;
      border-top: 1px solid var(--paper3);
      background: var(--paper)
    }

    .step.active .step-body {
      display: block
    }

    /* PRODUCT GRID */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: .75rem
    }

    .product-card {
      border: 1px solid var(--paper3);
      padding: 1rem .75rem;
      cursor: pointer;
      transition: border-color .2s, background .2s, transform .15s;
      text-align: center;
      position: relative
    }

    .product-card:hover {
      border-color: var(--mid);
      background: var(--paper2);
      transform: translateY(-2px)
    }

    .product-card.in-cart {
      border-color: var(--red);
      background: rgba(212, 43, 30, .04)
    }

    .product-card.in-cart::after {
      content: attr(data-count);
      position: absolute;
      top: .3rem;
      right: .3rem;
      background: var(--red);
      color: white;
      font-family: var(--FD);
      font-weight: 900;
      font-size: .85rem;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px
    }

    .product-icon {
      font-size: 2rem;
      margin-bottom: .5rem;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--mid)
    }

    .product-icon svg,
    .product-icon img {
      width: 44px;
      height: 44px;
      object-fit: contain;
    }

    .product-name {
      font-family: var(--FD);
      font-weight: 700;
      font-size: .95rem;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--ink);
      line-height: 1.1
    }

    .product-spec {
      font-size: 1.05rem;
      letter-spacing: .02em;
      color: var(--dust);
      margin-top: .25rem
    }

    .product-price {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.1rem;
      color: var(--red);
      margin-top: .4rem
    }

    /* ADD PRODUCT FORM */
    .add-product-form {
      border: 1px solid var(--paper3);
      padding: 1.5rem;
      margin-top: 1rem;
      background: var(--paper2);
      display: none
    }

    .add-product-form.visible {
      display: block
    }

    .apf-title {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.5rem;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--ink);
      margin-bottom: 1.25rem
    }

    .apf-title span {
      color: var(--red)
    }

    /* COLOUR PICKER */
    .colour-section {
      margin-bottom: 1.25rem
    }

    .colour-section-label {
      font-size: 1.05rem;
      letter-spacing: .1em;
      color: var(--dust);
      margin-bottom: .6rem;
      display: block
    }

    .colour-grid {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem
    }

    .colour-swatch {
      width: 32px;
      height: 32px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform .15s, border-color .15s;
      position: relative;
      flex-shrink: 0
    }

    .colour-swatch:hover {
      transform: scale(1.18)
    }

    .colour-swatch.selected {
      border-color: var(--ink)
    }

    .colour-swatch.selected::after {
      content: '';
      position: absolute;
      top: 3px;
      right: 3px;
      bottom: 3px;
      left: 3px;
      border: 1.5px solid rgba(255, 255, 255, .7)
    }

    .apf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem
    }

    .apf-field label {
      font-size: 1.05rem;
      letter-spacing: .1em;
      color: var(--dust);
      display: block;
      margin-bottom: .35rem
    }

    .apf-field input {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--paper3);
      background: transparent;
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1.4rem;
      color: var(--ink);
      padding: .2rem 0;
      outline: none;
      transition: border-color .2s
    }

    .apf-field input:focus {
      border-color: var(--red)
    }

    .colour-name-display {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--ink);
      margin-top: .6rem
    }

    .colour-price-note {
      font-size: 1rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--dust);
      margin-top: .15rem
    }

    .btn-add-to-order {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: .75rem 2rem;
      background: var(--ink);
      color: var(--paper);
      border: none;
      cursor: pointer;
      margin-top: 1rem;
      transition: background .2s, transform .15s, box-shadow .2s;
      display: block
    }

    .btn-add-to-order:hover {
      background: var(--red);
      transform: translate(-2px, -2px);
      box-shadow: 2px 2px 0 var(--ink)
    }

    .btn-add-cancel {
      font-family: var(--FM);
      font-size: .85rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--dust);
      background: none;
      border: none;
      cursor: pointer;
      margin-top: .6rem;
      display: block;
      transition: color .2s
    }

    .btn-add-cancel:hover {
      color: var(--ink)
    }

    /* CUSTOMISATION */
    .custom-options {
      display: flex;
      flex-direction: column;
      gap: 1rem
    }

    .custom-option {
      border: 1px solid var(--paper3);
      padding: 1rem 1.25rem;
      transition: border-color .2s
    }

    .custom-option.active {
      border-color: var(--red)
    }

    .custom-option-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer
    }

    .custom-option-name {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--ink)
    }

    .custom-toggle {
      width: 36px;
      height: 20px;
      background: var(--paper3);
      border-radius: 10px;
      position: relative;
      transition: background .25s;
      flex-shrink: 0
    }

    .custom-toggle::after {
      content: '';
      position: absolute;
      left: 3px;
      top: 3px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: white;
      transition: transform .25s
    }

    .custom-option.active .custom-toggle {
      background: var(--red)
    }

    .custom-option.active .custom-toggle::after {
      transform: translateX(16px)
    }

    .custom-option-desc {
      font-size: .9rem;
      color: var(--mid);
      margin-top: .4rem;
      line-height: 1.6
    }

    .custom-option-price {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1rem;
      color: var(--red);
      margin-top: .4rem
    }

    .custom-sub {
      margin-top: .85rem;
      padding-top: .85rem;
      border-top: 1px solid var(--paper3);
      display: none
    }

    .custom-option.active .custom-sub {
      display: block
    }

    .custom-sub label {
      font-size: 1.05rem;
      letter-spacing: .1em;
      color: var(--dust);
      display: block;
      margin-bottom: .4rem
    }

    .custom-sub input,
    .custom-sub textarea,
    .custom-sub select {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--paper3);
      background: transparent;
      font-family: var(--FM);
      font-size: .82rem;
      color: var(--ink);
      padding: .4rem 0;
      outline: none;
      transition: border-color .2s
    }

    .custom-sub input:focus,
    .custom-sub textarea:focus {
      border-color: var(--red)
    }

    .custom-sub textarea {
      min-height: 60px;
      resize: vertical
    }

    .cascade-note {
      font-size: .85rem;
      color: var(--dust);
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--paper3);
      line-height: 1.8
    }

    .cascade-note strong {
      color: var(--mid)
    }

    /* ORDER LIST */
    .order-list {
      display: flex;
      flex-direction: column;
      gap: .75rem
    }

    .order-item {
      border: 1px solid var(--paper3);
      background: var(--paper)
    }

    .order-item-top {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem
    }

    .oi-swatch {
      width: 28px;
      height: 28px;
      border: 1px solid var(--paper3);
      flex-shrink: 0
    }

    .oi-name {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--ink);
      line-height: 1
    }

    .oi-details {
      font-size: .85rem;
      letter-spacing: .02em;
      color: var(--dust);
      margin-top: .2rem
    }

    .oi-price {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.3rem;
      color: var(--ink);
      text-align: right;
      white-space: nowrap
    }

    .oi-price small {
      display: block;
      font-family: var(--FM);
      font-weight: 400;
      font-size: .8rem;
      color: var(--dust);
      text-align: right
    }

    .oi-remove {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--paper3);
      font-size: 1rem;
      padding: .2rem;
      transition: color .2s;
      flex-shrink: 0
    }

    .oi-remove:hover {
      color: var(--red)
    }

    /* CUSTOMISATION CHIPS PER ITEM */
    .oi-customs {
      padding: .6rem 1.25rem .8rem;
      border-top: 1px solid var(--paper3);
      background: var(--paper2);
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      align-items: center
    }

    .oi-customs-label {
      font-size: 1rem;
      letter-spacing: .1em;
      color: var(--dust);
      margin-right: .3rem;
      flex-shrink: 0
    }

    .custom-chip {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      padding: .25rem .55rem;
      font-size: 1.1rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      border: 1px solid transparent;
      transition: all .2s
    }

    .custom-chip.on {
      background: rgba(212, 43, 30, .1);
      border-color: rgba(212, 43, 30, .25);
      color: var(--red)
    }

    .custom-chip.off {
      background: var(--paper3);
      border-color: var(--paper3);
      color: var(--dust);
      text-decoration: line-through;
      opacity: .55
    }

    .chip-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: .8rem;
      line-height: 1;
      padding: 0 0 0 .15rem;
      color: inherit;
      opacity: .8;
      transition: opacity .15s;
      font-weight: 700
    }

    .chip-btn:hover {
      opacity: 1
    }

    .no-customs-msg {
      font-size: 1.05rem;
      color: var(--dust);
      font-style: italic
    }

    /* SIZE BREAKDOWN */
    .oi-size-row {
      padding: .65rem 1.25rem;
      border-top: 1px solid var(--paper3);
      display: grid;
      grid-template-columns: repeat(6, 1fr) 1fr;
      gap: .5rem;
      align-items: end
    }

    .oi-sf label {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1.1rem;
      text-transform: uppercase;
      color: var(--mid);
      display: block;
      margin-bottom: .2rem;
      text-align: center
    }

    .oi-sf input {
      width: 100%;
      border: 1px solid var(--paper3);
      background: var(--paper);
      font-family: var(--FM);
      font-size: 1rem;
      color: var(--ink);
      padding: .3rem;
      text-align: center;
      outline: none;
      transition: border-color .2s
    }

    .oi-sf input:focus {
      border-color: var(--red)
    }

    .oi-sf.total-sf label {
      color: var(--red)
    }

    .oi-sf.total-sf input {
      border-color: rgba(212, 43, 30, .4);
      background: rgba(212, 43, 30, .04);
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1rem
    }

    .order-empty {
      padding: 2rem;
      text-align: center;
      border: 1px dashed var(--paper3);
      color: var(--dust);
      font-size: .85rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      line-height: 2
    }

    /* DETAILS FORM */
    .details-form {
      display: flex;
      flex-direction: column;
      gap: 1.25rem
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem
    }

    .fg label {
      font-size: 1rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--mid);
      display: block;
      margin-bottom: .4rem
    }

    .fg input,
    .fg textarea {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--paper3);
      background: transparent;
      font-family: var(--FM);
      font-size: .88rem;
      color: var(--ink);
      padding: .5rem 0;
      outline: none;
      transition: border-color .2s
    }

    .fg input:focus,
    .fg textarea:focus {
      border-color: var(--red)
    }

    .fg textarea {
      min-height: 70px;
      resize: vertical
    }

    /* BOTTOM QUOTE BAR */
    .quote-panel {
      background: var(--ink);
      border-top: 3px solid var(--red);
      margin-top: 4rem;
      padding-bottom: 4rem;
    }

    .quote-drawer {
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .quote-drawer-inner {
      padding: 1.5rem 2rem;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      max-width: 960px;
      margin: 0 auto
    }

    .drawer-items {
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .di-row {
      display: grid;
      grid-template-columns: 20px 1fr auto auto;
      align-items: center;
      gap: .75rem;
      padding: .6rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .di-row:last-child {
      border-bottom: none
    }

    .di-swatch {
      width: 20px;
      height: 20px;
      border: 1px solid rgba(255, 255, 255, .1);
      flex-shrink: 0
    }

    .di-name {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1rem;
      text-transform: uppercase;
      color: var(--paper);
      line-height: 1
    }

    .di-sub {
      font-size: 1rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(242, 237, 230, .6);
      margin-top: .1rem
    }

    .di-qty {
      font-size: 1.05rem;
      color: rgba(242, 237, 230, .7);
      text-align: right;
      white-space: nowrap
    }

    .di-price {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.1rem;
      color: var(--paper);
      text-align: right;
      white-space: nowrap
    }

    .drawer-empty {
      font-size: 1.15rem;
      color: rgba(242, 237, 230, .5);
      text-transform: uppercase;
      letter-spacing: .15em;
      line-height: 2
    }

    .qt-rows {
      border-left: 1px solid rgba(255, 255, 255, .08);
      padding-left: 1.75rem;
      min-width: 180px;
      display: flex;
      flex-direction: column;
      gap: .4rem
    }

    .qt-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem
    }

    .qt-label {
      font-size: 1.05rem;
      letter-spacing: .1em;
      color: rgba(242, 237, 230, .65);
      white-space: nowrap
    }

    .qt-val {
      font-family: var(--FD);
      font-weight: 700;
      font-size: .95rem;
      color: rgba(242, 237, 230, .9)
    }

    .qt-val.big {
      font-size: 1.6rem;
      color: var(--paper);
      letter-spacing: -.01em
    }

    .qt-val.big em {
      font-style: normal;
      color: var(--red)
    }

    .qt-note {
      font-size: 1rem;
      letter-spacing: .02em;
      color: rgba(242, 237, 230, .4);
      margin-top: .5rem;
      line-height: 1.85
    }

    .quote-bar-cta {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: .85rem 2rem;
      border-top: 1px solid rgba(255, 255, 255, .06);
      max-width: 960px;
      margin: 0 auto
    }

    .quote-bar {
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      align-items: center;
      gap: 1.5rem;
      padding: .85rem 2rem;
      max-width: 960px;
      margin: 0 auto;
    }

    .chevron {
      transition: transform .3s;
      display: inline-block
    }

    .quote-drawer.open~.quote-bar .chevron {
      transform: rotate(180deg)
    }

    .btn-quote {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: .65rem 2rem;
      background: var(--red);
      color: var(--paper);
      border: none;
      cursor: pointer;
      transition: background .2s, transform .15s, box-shadow .2s;
      white-space: nowrap
    }

    .btn-quote:hover {
      background: var(--paper);
      color: var(--ink);
      transform: translate(-2px, -2px);
      box-shadow: 2px 2px 0 var(--red)
    }

    .btn-quote:disabled {
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .2);
      cursor: not-allowed;
      transform: none;
      box-shadow: none
    }

    .btn-reset {
      font-family: var(--FM);
      font-size: 1.05rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(242, 237, 230, .5);
      background: none;
      border: none;
      cursor: pointer;
      padding: .4rem;
      transition: color .2s
    }

    .btn-reset:hover {
      color: rgba(242, 237, 230, .45)
    }

    /* MODAL */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(22, 19, 16, .85);
      backdrop-filter: blur(8px);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem
    }

    .modal-overlay.open {
      display: flex
    }

    .modal {
      background: var(--paper);
      max-width: 600px;
      width: 100%;
      padding: 3rem;
      animation: modalIn .35s cubic-bezier(.16, 1, .3, 1);
      max-height: 90vh;
      overflow-y: auto
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .modal-hed {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 2.8rem;
      text-transform: uppercase;
      line-height: .92;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-bottom: 1.5rem
    }

    .modal-hed em {
      font-style: italic;
      color: var(--red)
    }

    .modal-summary {
      border: 1px solid var(--paper3);
      margin-bottom: 1.5rem
    }

    .ms-row {
      display: flex;
      justify-content: space-between;
      padding: .6rem .85rem;
      border-bottom: 1px solid var(--paper3);
      font-size: .85rem
    }

    .ms-row:last-child {
      border-bottom: none
    }

    .ms-key {
      color: var(--dust);
      text-transform: uppercase;
      letter-spacing: .12em;
      flex-shrink: 0;
      padding-right: 1rem
    }

    .ms-val {
      color: var(--ink);
      font-weight: 500;
      text-align: right
    }

    .ms-val.big {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.3rem;
      color: var(--red)
    }

    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 1rem
    }

    .mf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem
    }

    .mfg label {
      font-size: .75rem;
      letter-spacing: .1em;
      color: var(--dust);
      display: block;
      margin-bottom: .35rem
    }

    .mfg input,
    .mfg textarea {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--paper3);
      background: transparent;
      font-family: var(--FM);
      font-size: .88rem;
      color: var(--ink);
      padding: .5rem 0;
      outline: none;
      transition: border-color .2s
    }

    .mfg input:focus,
    .mfg textarea:focus {
      border-color: var(--red)
    }

    .mfg textarea {
      min-height: 60px;
      resize: vertical
    }

    .modal-actions {
      display: flex;
      gap: .75rem;
      margin-top: 1.5rem
    }

    .btn-send {
      flex: 1;
      font-family: var(--FD);
      font-weight: 900;
      font-size: 1.3rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: .85rem;
      background: var(--red);
      color: var(--paper);
      border: none;
      cursor: pointer;
      transition: background .2s
    }

    .btn-send:hover {
      background: var(--ink)
    }

    .btn-cancel {
      font-family: var(--FM);
      font-size: .85rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--mid);
      background: none;
      border: 1px solid var(--paper3);
      padding: .85rem 1.25rem;
      cursor: pointer;
      transition: all .2s
    }

    .btn-cancel:hover {
      border-color: var(--ink);
      color: var(--ink)
    }

    .modal-success {
      display: none;
      text-align: center;
      padding: 1rem 0
    }

    .modal-success.on {
      display: block
    }

    .modal-form-wrap.hidden {
      display: none
    }

    .success-big {
      font-family: var(--FD);
      font-weight: 900;
      font-size: 5rem;
      text-transform: uppercase;
      line-height: 1;
      color: var(--red);
      margin-bottom: .5rem
    }

    .success-sub {
      font-size: .85rem;
      letter-spacing: .05em;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1.5rem
    }

    .fallback-quote {
      text-align: left;
      margin-bottom: 2rem;
      background: var(--paper2);
      padding: 1rem;
    }

    .fallback-quote p {
      font-size: 1rem;
      margin-bottom: .5rem;
    }

    .fallback-quote textarea {
      width: 100%;
      height: 150px;
      font-family: var(--FM);
      font-size: 1rem;
      padding: .5rem;
      background: var(--paper);
      border: 1px solid var(--paper3);
      resize: vertical;
      margin-bottom: .5rem;
    }

    .btn-copy {
      font-family: var(--FD);
      font-weight: 700;
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: .5rem 1rem;
      background: var(--ink);
      color: var(--paper);
      border: none;
      cursor: pointer;
      transition: background .2s;
    }

    .btn-copy:hover {
      background: var(--mid);
    }

    /* RESPONSIVE */
    @media(max-width:768px) {
      .page-hero {
        flex-direction: column;
        gap: 1rem
      }

      .page-hero-sub {
        text-align: left;
        max-width: none
      }

      .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr))
      }

      .apf-row {
        grid-template-columns: 1fr
      }

      .form-row,
      .mf-row {
        grid-template-columns: 1fr
      }

      .quote-bar {
        grid-template-columns: 1fr auto
      }

      .quote-bar .qbm-item {
        display: none
      }

      .quote-bar-toggle {
        display: none
      }

      .quote-drawer-inner {
        grid-template-columns: 1fr
      }

      .qt-rows {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding-top: 1rem
      }

      .oi-size-row {
        grid-template-columns: repeat(3, 1fr) 1fr
      }

      .di-row {
        grid-template-columns: 16px 1fr auto
      }

      .di-qty {
        display: none
      }

      .step-header {
        padding: 1rem 1.25rem
      }

      .step-body {
        padding: 1.25rem
      }

      .quote-bar-cta,
      .quote-bar {
        padding: .75rem 1rem
      }

      .designer {
        padding-bottom: 110px
      }

      .modal {
        padding: 1.5rem
      }
    }