/* ============================================
   app.css — merged from static HTML sources
   ============================================ */

/* Theme tokens (shared) */
:root {
      /* tuned for high legibility — stronger contrast */
      --ink: #14252e;
      --ink-soft: #2b3d48;
      --bone: #f7f3ea;
      --paper: #fdfbf5;
      --sage: #b9d1c4;
      --sage-deep: #5f7d71;
      --pulse: #db5340;
      --pulse-deep: #b53a24;
      --amber: #c98f2c;
      --muted: #5a544c;
      --line: rgba(20, 37, 46, 0.18);
      --line-soft: rgba(20, 37, 46, 0.05);

      --font-display: "Fraunces", "Instrument Serif", serif;
      --font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
      --font-body-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
      --font-serif: "Instrument Serif", "Fraunces", serif;
      --font-mono: "IBM Plex Mono", "Fraunces", monospace;

      --max: 1440px;
      --gutter: clamp(1.25rem, 3vw, 3rem);
      --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    }

/* ===== index.html ===== */
/* ============ THEME TOKENS ============ */
    

    

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background-color: var(--bone);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.7;
      font-weight: 450;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
      position: relative;
    }

    /* Subtle grid — muted so text never blurs. No more noise overlay on top of content. */
    body {
      background-image:
        linear-gradient(var(--line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
      background-size: 120px 120px;
    }

    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    select { font: inherit; }

    /* ============ UTILITIES ============ */
    .container {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 var(--gutter);
      position: relative;
    }

    .eyebrow {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(0.85rem, 0.95vw, 1rem);
      letter-spacing: 0.01em;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
    }
    .eyebrow::before {
      content: "";
      width: 28px; height: 1px;
      background: var(--ink);
      opacity: 0.5;
    }

    .num-tag {
      font-family: var(--font-mono);
      font-weight: 400;
      font-size: 0.82rem;
      color: var(--muted);
      letter-spacing: 0.02em;
    }

    .section-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 2rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: clamp(2rem, 5vw, 4rem);
    }
    .section-label h2 {
      font-family: var(--font-display);
      font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: clamp(1.75rem, 3.2vw, 2.75rem);
      letter-spacing: -0.025em;
      line-height: 1.05;
    }
    .section-label .meta {
      display: flex;
      align-items: baseline;
      gap: 1.25rem;
      flex-shrink: 0;
    }

    /* ============ TOP BAR ============ */
    .topbar {
      background: var(--ink);
      color: var(--paper);
      font-size: 0.82rem;
      padding: 0.55rem 0;
      letter-spacing: 0.01em;
      position: relative;
      z-index: 10;
    }
    .topbar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    .topbar .ticker-wrap { overflow: hidden; flex: 1; }
    .topbar .ticker {
      display: inline-flex;
      gap: 3rem;
      white-space: nowrap;
      animation: slide 44s linear infinite;
      padding-inline-start: 3rem;
    }
    .topbar .ticker span {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      opacity: 0.85;
    }
    .topbar .ticker span::after {
      content: "✚";
      color: var(--pulse);
      font-size: 0.7rem;
    }
    @keyframes slide {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    
    .topbar .contacts {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      flex-shrink: 0;
    }
    .topbar .lang-toggle {
      border: 1px solid rgba(255,255,255,0.25);
      padding: 0.28rem 0.75rem;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.05em;
      transition: all 0.3s var(--ease);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .topbar .lang-toggle:hover { background: var(--pulse); border-color: var(--pulse); }
    .topbar .lang-toggle .active { color: var(--pulse); }
    .topbar .lang-toggle:hover .active { color: var(--paper); }
    @media (max-width: 780px) {
      .topbar .contacts span:first-child { display: none; }
    }

    /* ============ HEADER ============ */
    header.site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: color-mix(in srgb, var(--bone) 88%, transparent);
      backdrop-filter: blur(20px) saturate(120%);
      -webkit-backdrop-filter: blur(20px) saturate(120%);
      border-bottom: 1px solid var(--line);
      color: var(--ink);
    }
    header .container {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 2rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      color: var(--ink);
    }
    .logo-img {
      width: 48px;
      height: 48px;
      object-fit: contain;
      transition: transform 0.5s var(--ease);
    }
    .logo:hover .logo-img { transform: rotate(-8deg) scale(1.05); }
    .logo-text {
      font-family: var(--font-display);
      font-weight: 400;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: 1.4rem;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .logo-text small {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 0.7rem;
      display: block;
      color: var(--muted);
      margin-top: 0.15rem;
      letter-spacing: 0.02em;
    }

    nav.primary {
      display: flex;
      justify-content: center;
      gap: clamp(1rem, 2vw, 2rem);
      font-weight: 500;
      font-size: 0.92rem;
      letter-spacing: 0.01em;
    }
    nav.primary a {
      position: relative;
      padding: 0.4rem 0;
      transition: color 0.25s var(--ease);
    }
    nav.primary a::after {
      content: "";
      position: absolute;
      left: 0; bottom: -2px;
      width: 0; height: 2px;
      background: var(--pulse);
      transition: width 0.3s var(--ease);
    }
    nav.primary a:hover { color: var(--pulse-deep); }
    nav.primary a:hover::after { width: 100%; }

    .header-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: var(--ink);
      color: var(--paper);
      padding: 0.75rem 1.3rem;
      border-radius: 999px;
      font-weight: 500;
      font-size: 0.92rem;
      transition: all 0.35s var(--ease);
      position: relative;
      overflow: hidden;
    }
    .header-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--pulse);
      transform: translateY(100%);
      transition: transform 0.35s var(--ease);
    }
    .header-cta span, .header-cta svg { position: relative; z-index: 1; }
    .header-cta:hover::before { transform: translateY(0); }
    .header-cta svg {
      width: 14px; height: 14px;
      transition: transform 0.35s var(--ease);
    }
    .header-cta:hover svg { transform: translateX(4px); }
    

    /* Language toggle inside nav */
    .nav-lang {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      color: var(--ink);
      cursor: pointer;
      transition: all 0.3s var(--ease);
      margin-inline-start: 0.5rem;
    }
    .nav-lang:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .nav-lang .active { color: var(--pulse); font-weight: 600; }
    .nav-lang:hover .active { color: var(--pulse); }
    .nav-lang .slash { opacity: 0.4; }

    /* Hero → Stats elegant separator */
    .section-divider {
      padding: clamp(2rem, 4vw, 3rem) 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }
    .section-divider .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .section-divider .left {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .section-divider .left::before {
      content: "";
      width: 40px;
      height: 1px;
      background: var(--pulse);
    }
    .section-divider .middle {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(1.1rem, 1.6vw, 1.35rem);
      color: var(--ink);
    }
    .section-divider .middle em { color: var(--pulse); }
    .section-divider .right {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      color: var(--muted);
    }
    .section-divider .right .pulse {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--pulse);
      box-shadow: 0 0 0 3px rgba(221, 83, 64, 0.2);
      animation: divider-pulse 1.8s ease-in-out infinite;
    }
    @keyframes divider-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.3); opacity: 0.7; }
    }

    .menu-toggle { display: none; }
    /* ============ MOBILE APP-LIKE LAYOUT ============ */
    /* Fixed bottom tab bar — visible only on small screens */
    .mobile-tabbar {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: rgba(253, 251, 245, 0.95);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-top: 1px solid var(--line);
      padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
      z-index: 100;
      box-shadow: 0 -10px 30px -10px rgba(20, 37, 46, 0.1);
    }
    .mobile-tabbar nav {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      max-width: 500px;
      margin: 0 auto;
    }
    .mobile-tab {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 3px; padding: 8px 4px;
      color: var(--muted);
      font-family: var(--font-body);
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      font-weight: 500;
      text-transform: uppercase;
      transition: color 0.2s var(--ease);
      position: relative;
    }
    .mobile-tab svg {
      width: 22px; height: 22px;
      stroke-width: 1.8;
      stroke: currentColor;
      fill: none;
      transition: transform 0.3s var(--ease);
    }
    .mobile-tab.active { color: var(--pulse); }
    .mobile-tab.active svg { transform: scale(1.08); }
    .mobile-tab.active::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 2px;
      background: var(--pulse);
      border-radius: 0 0 2px 2px;
    }
    /* FAB — Quote floating button in middle of tab bar */
    .mobile-tab.fab {
      margin-top: -28px;
    }
    .mobile-tab.fab .fab-inner {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: var(--pulse);
      color: var(--paper);
      display: grid; place-items: center;
      box-shadow: 0 8px 20px -4px rgba(221, 83, 64, 0.5);
      transition: transform 0.3s var(--ease);
    }
    .mobile-tab.fab:active .fab-inner { transform: scale(0.92); }
    .mobile-tab.fab svg { width: 22px; height: 22px; stroke: var(--paper); }
    .mobile-tab.fab::before { display: none; }

    @media (max-width: 780px) {
      .mobile-tabbar { display: block; }
      body { padding-bottom: 80px; }
      .mobile-tabbar .mobile-tab span { font-size: 0.56rem; }
    }

    /* Compact mobile header */
    @media (max-width: 780px) {
      header.site-header .container {
        padding-top: 0.75rem; padding-bottom: 0.75rem;
        grid-template-columns: auto 1fr auto !important;
      }
      .logo-img { width: 36px; height: 36px; }
      .logo-text { font-size: 1.1rem; }
      .logo-text small { display: none; }
      .header-cta { display: none !important; }
      .nav-lang { margin-inline-start: 0; padding: 5px 10px; font-size: 0.7rem; }
    }

    @media (max-width: 1024px) {
      nav.primary { display: none; }
      .menu-toggle {
        display: inline-flex;
        width: 44px; height: 44px;
        border: 1px solid var(--line);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
      }
      .menu-toggle span {
        display: block;
        width: 18px; height: 1.5px;
        background: var(--ink);
      }
      header .container { grid-template-columns: auto 1fr auto auto; }
      .header-cta { padding: 0.55rem 1rem; font-size: 0.82rem; }
      .header-cta > span { display: none; }
    }

    /* ============ HERO ============ */
    .hero {
      padding: clamp(3rem, 6vw, 6rem) 0 clamp(4rem, 7vw, 7rem);
      position: relative;
      overflow: hidden;
    }
    .hero .container {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: clamp(2rem, 4vw, 4rem);
      align-items: center;
    }
    @media (max-width: 960px) {
      .hero .container { grid-template-columns: 1fr; }
    }

    .hero-text .eyebrow {
      opacity: 0;
      animation: fadeUp 0.9s var(--ease) 0.1s forwards;
    }

    .hero-headline {
      font-family: var(--font-display);
      font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: clamp(3.75rem, 10vw, 10rem);
      line-height: 0.88;
      letter-spacing: -0.04em;
      margin: 1.2rem 0 1.5rem;
      color: var(--ink);
    }
    .hero-headline span {
      display: block;
      opacity: 0;
      transform: translateY(40px);
      animation: reveal 1s var(--ease) forwards;
    }
    .hero-headline span:nth-child(1) { animation-delay: 0.2s; }
    .hero-headline span:nth-child(2) {
      animation-delay: 0.45s;
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--pulse);
      letter-spacing: -0.02em;
    }
    .hero-headline .amp {
      font-family: var(--font-serif);
      font-style: italic;
      display: inline;
      color: var(--ink-soft);
      opacity: 0.6;
    }

    .hero-lead {
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      color: var(--ink-soft);
      max-width: 52ch;
      margin-bottom: 2.5rem;
      opacity: 0;
      animation: fadeUp 0.9s var(--ease) 0.7s forwards;
    }

    .hero-ctas {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 0.9s var(--ease) 0.9s forwards;
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      background: var(--pulse);
      color: var(--paper);
      padding: 1.05rem 1.9rem;
      font-weight: 500;
      font-size: 0.98rem;
      letter-spacing: 0.02em;
      border-radius: 999px;
      transition: all 0.35s var(--ease);
      box-shadow: 0 12px 30px -10px rgba(232, 86, 63, 0.5);
      position: relative;
      overflow: hidden;
    }
    .btn-primary::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--pulse-deep);
      border-radius: inherit;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s var(--ease);
    }
    .btn-primary > * { position: relative; z-index: 1; }
    .btn-primary:hover::before { transform: scaleX(1); transform-origin: left; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(232, 86, 63, 0.55); }
    .btn-primary svg { width: 16px; height: 16px; }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      padding: 1.05rem 1.9rem;
      font-weight: 500;
      font-size: 0.98rem;
      letter-spacing: 0.02em;
      border-radius: 999px;
      border: 1px solid var(--ink);
      color: var(--ink);
      transition: all 0.3s var(--ease);
    }
    .btn-ghost:hover { background: var(--ink); color: var(--paper); }
    .btn-ghost svg { width: 14px; height: 14px; }

    /* Hero visual — polaroid product cards */
    .hero-visual {
      position: relative;
      aspect-ratio: 1 / 1;
      opacity: 0;
      animation: fadeUp 1.2s var(--ease) 0.3s forwards;
    }

    .polaroid {
      position: absolute;
      background: var(--paper);
      padding: 10px 10px 34px;
      box-shadow:
        0 25px 50px -18px rgba(20, 37, 46, 0.22),
        0 6px 12px -6px rgba(20, 37, 46, 0.1);
      border: 1px solid rgba(20, 37, 46, 0.06);
      animation: polaroid-float 7s ease-in-out infinite;
      transition: transform 0.5s var(--ease);
      cursor: default;
    }
    .polaroid:hover { transform: rotate(var(--r, 0deg)) translateY(-8px) scale(1.02) !important; z-index: 10; }

    .polaroid .frame {
      aspect-ratio: 3 / 4;
      background: #ffffff;
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
    }
    .polaroid .frame img {
      width: 82%;
      height: 82%;
      object-fit: contain;
      position: relative;
      filter: drop-shadow(0 10px 14px rgba(20, 37, 46, 0.08));
    }

    .polaroid .caption {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 10px 3px 0;
      font-size: 0.66rem;
      line-height: 1.2;
    }
    .polaroid .caption .fig {
      font-family: var(--font-mono);
      letter-spacing: 0.15em;
      color: var(--muted);
      font-weight: 500;
      white-space: nowrap;
    }
    .polaroid .caption .name {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--ink);
      font-size: 0.82rem;
    }

    .polaroid .tag {
      position: absolute;
      top: -12px;
      right: -12px;
      background: var(--ink);
      color: var(--paper);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      font-weight: 500;
      padding: 5px 10px;
      text-transform: uppercase;
      box-shadow: 0 6px 14px -4px rgba(20, 37, 46, 0.25);
    }

    /* Three polaroids — side by side, no overlap, generous size */
    .polaroid.p1 { --r: -3deg; top: 12%; left: 0;   width: 32%; transform: rotate(-3deg); animation-delay: 0s; }
    .polaroid.p2 { --r: 2deg;  top: 4%;  left: 34%; width: 32%; transform: rotate(2deg);  animation-delay: -2.5s; }
    .polaroid.p3 { --r: -2deg; top: 12%; right: 0;  width: 32%; transform: rotate(-2deg); animation-delay: -5s; }

    @keyframes polaroid-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -10px; }
    }

    .editor-note {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 180px;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 0.78rem;
      color: var(--muted);
      line-height: 1.45;
      text-align: right;
    }
    .editor-note .label {
      display: block;
      font-family: var(--font-mono);
      font-style: normal;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      color: var(--ink);
      margin-bottom: 6px;
      text-transform: uppercase;
    }
    .editor-note .label::before { content: "— "; color: var(--pulse); }

    @media (max-width: 720px) {
      .polaroid.p1 { top: 22%; left: 0; width: 32%; }
      .polaroid.p2 { top: 16%; left: 34%; width: 32%; }
      .polaroid.p3 { top: 22%; right: 0; width: 32%; }
    }
    @media (max-width: 480px) {
      .hero-visual { aspect-ratio: 3/2; }
      .polaroid.p1 { top: 10%; width: 33%; }
      .polaroid.p2 { top: 4%; width: 34%; }
      .polaroid.p3 { top: 10%; width: 33%; }
    }

    @keyframes reveal { to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ============ STATS — editorial ============ */
    .stats-editorial {
      padding: clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1.5rem, 3vw, 3rem);
    }
    @media (max-width: 960px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; } }
    .stat-item { display: flex; flex-direction: column; }
    .stat-index {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      color: var(--muted);
      margin-bottom: 1rem;
      text-transform: uppercase;
    }
    .stat-index::before { content: "— "; opacity: 0.55; }
    .stat-value {
      font-family: var(--font-display);
      font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 25;
      font-size: clamp(4rem, 7vw, 7rem);
      line-height: 0.9;
      letter-spacing: -0.04em;
      color: var(--ink);
      display: flex;
      align-items: flex-start;
      gap: 0.02em;
      margin-bottom: 1.25rem;
    }
    .stat-value sup {
      font-size: 0.42em;
      color: var(--pulse);
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      line-height: 1;
      margin-top: 0.15em;
    }
    .stat-label {
      font-size: 0.92rem;
      color: var(--ink-soft);
      line-height: 1.5;
      max-width: 26ch;
    }

    /* ============ MARQUEE STRIP — product names ============ */
    .marquee-strip {
      background: var(--ink);
      color: var(--paper);
      padding: clamp(1.75rem, 2.8vw, 2.5rem) 0;
      overflow: hidden;
      position: relative;
      border-top: 1px solid rgba(20, 37, 46, 0.3);
      border-bottom: 1px solid rgba(20, 37, 46, 0.3);
    }
    .marquee-track {
      display: inline-flex;
      align-items: center;
      gap: clamp(2rem, 3vw, 3rem);
      white-space: nowrap;
      animation: marquee-flow 45s linear infinite;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(1.75rem, 3.8vw, 3.25rem);
      letter-spacing: -0.01em;
      line-height: 1.1;
    }
    .marquee-track .sep {
      color: var(--pulse);
      font-style: normal;
      font-size: 0.55em;
      font-family: var(--font-display);
      font-weight: 400;
    }
    .marquee-strip:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee-flow {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    

    /* ============ CATEGORIES — editorial grid ============ */
    .categories { padding: clamp(4rem, 8vw, 7rem) 0; }

    .cat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
      background: var(--paper);
    }
    @media (max-width: 860px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 540px) { .cat-grid { grid-template-columns: 1fr; } }

    .cat-card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: clamp(1.75rem, 2.5vw, 2.5rem);
      min-height: 320px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
      overflow: hidden;
      cursor: pointer;
    }
    /* Subtle hover — invert to ink */
    .cat-card:hover { background: var(--ink); color: var(--paper); }
    .cat-card:hover .cat-title em { color: var(--pulse); }
    .cat-card:hover .cat-arrow { background: var(--pulse); border-color: var(--pulse); color: var(--paper); transform: rotate(0deg) scale(1.1); }
    .cat-card:hover .cat-arrow svg { transform: translate(2px,-2px); }
    .cat-card:hover .cat-num, .cat-card:hover .cat-meta { color: rgba(251,247,234,0.55); }
    .cat-card:hover .cat-desc { color: rgba(251,247,234,0.8); }
    .cat-card:hover .badge { color: var(--pulse); }

    /* Sliding coral underline across title on hover */
    .cat-card::before {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 3px;
      background: var(--pulse);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.55s var(--ease);
    }
    .cat-card:hover::before { transform: scaleX(1); transform-origin: left; }

    /* Top row: number + arrow */
    .cat-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: auto;
      padding-bottom: 2rem;
    }
    .cat-num {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .cat-num::before { content: "— "; opacity: 0.55; }

    .cat-arrow {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid currentColor;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s var(--ease);
      opacity: 0.85;
    }
    .cat-arrow svg {
      width: 13px; height: 13px;
      transition: transform 0.4s var(--ease);
    }

    /* Body */
    .cat-body { display: flex; flex-direction: column; gap: 1rem; margin-top: auto; }
    .cat-title {
      font-family: var(--font-display);
      font-weight: 400;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: clamp(1.75rem, 2.8vw, 2.4rem);
      letter-spacing: -0.025em;
      line-height: 1;
      margin: 0;
    }
    .cat-title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--pulse);
      transition: color 0.4s var(--ease);
    }
    .cat-desc {
      color: var(--ink-soft);
      font-size: 0.95rem;
      max-width: 40ch;
      line-height: 1.55;
      transition: color 0.4s var(--ease);
    }
    .cat-meta {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-top: 0.75rem;
      padding-top: 1.25rem;
      border-top: 1px solid currentColor;
      border-top-color: var(--line);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      color: var(--muted);
      text-transform: uppercase;
      transition: color 0.4s var(--ease);
    }
    .cat-meta .sep { opacity: 0.35; }
    .cat-meta .badge { color: var(--pulse); font-weight: 500; transition: color 0.4s var(--ease); }

    /* CTA / "view all" special cell */
    .cat-card.is-cta {
      background: var(--ink); color: var(--paper);
    }
    .cat-card.is-cta:hover { background: var(--pulse); color: var(--paper); }
    .cat-card.is-cta:hover .cat-title em { color: var(--paper); }
    .cat-card.is-cta .cat-num { color: rgba(251,247,234,0.45); }
    .cat-card.is-cta .cat-title em { color: var(--pulse); }
    .cat-card.is-cta:hover .cat-title em { color: var(--ink); }
    .cat-card.is-cta .cat-desc { color: rgba(251,247,234,0.75); }
    .cat-card.is-cta .cat-meta { color: rgba(251,247,234,0.55); border-top-color: rgba(251,247,234,0.15); }
    .cat-card.is-cta:hover .cat-meta { color: rgba(20,37,46,0.6); border-top-color: rgba(20,37,46,0.18); }
    .cat-card.is-cta:hover .cat-arrow { background: var(--paper); border-color: var(--paper); color: var(--ink); }
    .cat-card.is-cta::before { display: none; }

    /* ---- animations still used by hero visuals ---- */
    @keyframes orbit       { to { transform: rotate(360deg); } }
    @keyframes breathe     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
    @keyframes pulse-dot   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }
    @keyframes drift       { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    .rotate-slow { transform-origin: center; transform-box: fill-box; animation: orbit 50s linear infinite; }
    .drift       { animation: drift 5s ease-in-out infinite; }

    /* ============ PRODUCTS ============ */
    .products {
      padding: clamp(4rem, 8vw, 7rem) 0;
      background: var(--paper);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .prod-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
    @media (max-width: 1100px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 780px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
    @media (max-width: 480px) { .prod-grid { grid-template-columns: 1fr; } }

    .prod-card {
      background: var(--bone);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 1rem;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: all 0.4s var(--ease);
    }
    .prod-card:hover {
      transform: translateY(-3px);
      border-color: var(--ink);
      box-shadow: 0 20px 40px -20px rgba(15, 42, 54, 0.25);
    }
    .prod-media {
      aspect-ratio: 1 / 1;
      background: var(--paper);
      border-radius: 8px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }
    .prod-media::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
      background-size: 18px 18px;
    }
    .prod-media img {
      width: 82%;
      height: 82%;
      object-fit: contain;
      position: relative;
      transition: transform 0.5s var(--ease);
      
    }
    .prod-card:hover .prod-media img { transform: scale(1.08) rotate(-3deg); }

    .prod-tag {
      position: absolute;
      top: 0.7rem;
      left: 0.7rem;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 0.75rem;
      color: var(--muted);
      background: var(--bone);
      padding: 0.22rem 0.6rem;
      border-radius: 99px;
    }
    .prod-fav {
      position: absolute;
      top: 0.7rem; right: 0.7rem;
      width: 32px; height: 32px;
      background: var(--bone);
      border: 1px solid var(--line);
      border-radius: 50%;
      display: grid;
      place-items: center;
      transition: all 0.3s var(--ease);
    }
    .prod-fav:hover { background: var(--pulse); border-color: var(--pulse); }
    .prod-fav:hover svg { stroke: var(--paper); }
    .prod-fav svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; }

    .prod-info { padding: 0 0.25rem; }
    .prod-info h3 {
      font-family: var(--font-display);
      font-weight: 400;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: 1.25rem;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 0.3rem;
    }
    .prod-info .prod-sub {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .prod-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 0.25rem 0.25rem;
      border-top: 1px solid var(--line);
    }
    .prod-price { display: flex; flex-direction: column; gap: 0.1rem; }
    .prod-price .label {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 0.72rem;
      color: var(--muted);
    }
    .prod-price .val {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 0.82rem;
      color: var(--ink);
      letter-spacing: 0.02em;
    }
    .prod-rfq {
      background: var(--ink);
      color: var(--paper);
      padding: 0.5rem 0.9rem;
      border-radius: 99px;
      font-size: 0.8rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: background 0.3s var(--ease);
      letter-spacing: 0.04em;
    }
    .prod-rfq:hover { background: var(--pulse); }
    .prod-rfq svg { width: 11px; height: 11px; }

    /* ============ ABOUT SECTION ============ */
    .about-section { padding: clamp(5rem, 9vw, 8rem) 0; }
    .about-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.25em;
      color: var(--pulse);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
    }
    .about-eyebrow::before {
      content: "";
      width: 36px;
      height: 1px;
      background: var(--pulse);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: stretch;
    }
    @media (max-width: 960px) { .about-grid { grid-template-columns: 1fr; } }

    /* ---- dark visual card ---- */
    .about-visual {
      position: relative;
      aspect-ratio: 1 / 1.15;
      border-radius: 20px;
      overflow: hidden;
      background:
        radial-gradient(circle at 80% 80%, rgba(221, 83, 64, 0.28), transparent 55%),
        radial-gradient(circle at 20% 20%, rgba(44, 62, 73, 0.4), transparent 60%),
        var(--ink);
      color: var(--paper);
    }
    .about-visual .visual-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(251, 247, 234, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251, 247, 234, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .about-visual .visual-glow {
      position: absolute;
      right: -20%;
      bottom: -20%;
      width: 80%;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(221, 83, 64, 0.35), transparent 65%);
      filter: blur(40px);
    }
    /* Custom SVG brand mark */
    .brand-mark {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 82%;
      max-width: 480px;
      height: auto;
      pointer-events: none;
      user-select: none;
    }
    .brand-spin {
      transform-origin: 170px 170px;
      animation: brand-orbit 60s linear infinite;
    }
    @keyframes brand-orbit { to { transform: rotate(360deg); } }
    .brand-pulse {
      transform-origin: 286px 76px;
      animation: brand-pulse 1.8s ease-in-out infinite;
    }
    @keyframes brand-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.4); opacity: 0.65; }
    }

    /* legacy placeholders kept hidden */
    .visual-mark, .visual-corner { display: none; }
    .mark-type {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      position: relative;
      z-index: 2;
    }
    .mark-word {
      font-family: var(--font-display);
      font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: clamp(4rem, 10vw, 8rem);
      line-height: 0.85;
      letter-spacing: -0.04em;
      color: rgba(251, 247, 234, 0.11);
      transition: color 1s var(--ease);
    }
    .mark-word.mark-top {
      transform: translateX(-8%);
    }
    .mark-word.mark-bot em {
      font-family: var(--font-serif);
      font-weight: 400;
      font-style: italic;
      color: rgba(221, 83, 64, 0.4);
    }
    .mark-word.mark-bot {
      transform: translateX(8%);
      margin-top: -0.1em;
    }
    .mark-logo {
      position: absolute;
      width: clamp(60px, 10vw, 90px);
      height: auto;
      top: calc(50% - 1.3rem);
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.9;
      filter: brightness(1.2) saturate(0.8);
      z-index: 3;
    }
    .mark-cross {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      font-size: clamp(14rem, 28vw, 22rem);
      color: rgba(251, 247, 234, 0.025);
      font-weight: 100;
      line-height: 1;
      z-index: 1;
      transition: transform 60s linear infinite;
      animation: mark-spin 120s linear infinite;
    }
    @keyframes mark-spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }
    .about-visual:hover .mark-word { color: rgba(251, 247, 234, 0.15); }
    .about-visual:hover .mark-word.mark-bot em { color: rgba(221, 83, 64, 0.6); }

    /* Corner labels */
    .visual-corner {
      position: absolute;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      color: rgba(251, 247, 234, 0.55);
      text-transform: uppercase;
      line-height: 1.4;
      z-index: 4;
    }
    .visual-corner.tl { top: 1.5rem; right: 1.5rem; }
    .visual-corner.tr { bottom: 50%; right: 1.5rem; display: none; }
    .visual-corner.br {
      bottom: 1.5rem; right: 1.5rem;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 0.92rem;
      letter-spacing: 0;
      text-transform: none;
      text-align: right;
      color: rgba(251, 247, 234, 0.7);
    }
    .visual-corner.br em { color: var(--pulse); font-style: italic; }

    /* keep existing rule aliased to avoid legacy styling glitches */
    .about-visual .visual-rx { display: none; }

    .visual-badge {
      position: absolute;
      background: rgba(251, 247, 234, 0.95);
      color: var(--ink);
      padding: 0.6rem 1.1rem;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      box-shadow:
        0 18px 36px -12px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(221, 83, 64, 0.35);
      backdrop-filter: blur(10px);
      animation: badge-float 6s ease-in-out infinite;
    }
    .visual-badge .dot {
      width: 7px; height: 7px;
      background: var(--pulse);
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(221, 83, 64, 0.25);
    }
    .visual-badge.b-topleft { top: 1.5rem; left: 1.5rem; animation-delay: 0s; }
    .visual-badge.b-center {
      top: 45%; left: 50%;
      transform: translate(-50%, -50%);
      animation-delay: -2s;
    }
    .visual-badge.b-bottomleft {
      bottom: 1.5rem; left: 1.5rem;
      animation-delay: -4s;
    }
    @keyframes badge-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -4px; }
    }
    .visual-badge.b-center { translate: 0 0; }
    @keyframes badge-float-c {
      0%, 100% { transform: translate(-50%, -50%); }
      50% { transform: translate(-50%, calc(-50% - 4px)); }
    }
    .visual-badge.b-center { animation-name: badge-float-c; }

    /* ---- content column ---- */
    .about-content { display: flex; flex-direction: column; }
    .about-headline {
      font-family: var(--font-display);
      font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: clamp(2.25rem, 4.5vw, 3.75rem);
      letter-spacing: -0.035em;
      line-height: 1.02;
      margin-bottom: 2rem;
    }
    .about-headline em {
      font-family: var(--font-serif);
      font-weight: 400;
      font-style: italic;
      color: var(--pulse);
      display: block;
    }
    .about-para {
      color: var(--ink-soft);
      font-size: 1rem;
      line-height: 1.7;
      max-width: 55ch;
      margin-bottom: 1.25rem;
    }

    /* ---- 2x2 features ---- */
    .feature-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: clamp(2rem, 3vw, 2.5rem);
      border-top: 1px solid var(--line);
    }
    @media (max-width: 540px) { .feature-grid { grid-template-columns: 1fr; } }
    .feature {
      padding: 1.5rem 1.5rem 1.5rem 0;
      border-bottom: 1px solid var(--line);
    }
    .feature:nth-child(2n) { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--line); padding-inline-end: 0; }
    .feature:nth-last-child(-n+2) { border-bottom: 0; }
    @media (max-width: 540px) {
      .feature, .feature:nth-child(2n) {
        padding: 1.5rem 0 !important;
        border-inline-start: 0 !important;
      }
      .feature:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
      .feature:last-child { border-bottom: 0; }
    }
    .feature-num {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      color: var(--pulse);
      margin-bottom: 0.75rem;
      display: block;
      text-transform: uppercase;
    }
    .feature-num::before { content: "— "; }
    .feature h3 {
      font-family: var(--font-display);
      font-weight: 400;
      font-variation-settings: "opsz" 144;
      font-size: 1.25rem;
      letter-spacing: -0.015em;
      margin-bottom: 0.5rem;
    }
    .feature p {
      font-size: 0.9rem;
      color: var(--muted);
      line-height: 1.55;
    }

    /* ============ JOURNAL PREVIEW ============ */
    .journal-preview { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    @media (max-width: 860px) { .journal-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
    .j-card {
      display: flex; flex-direction: column; gap: 1rem;
      padding: 1.5rem;
      background: var(--bone); border: 1px solid var(--line); border-radius: 14px;
      transition: all 0.35s var(--ease);
      cursor: pointer;
    }
    .j-card:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 20px 40px -20px rgba(20, 37, 46, 0.2); }
    .j-card:hover .j-title { color: var(--pulse-deep); }
    .j-card:hover .j-media img { transform: scale(1.06); }
    .j-media {
      aspect-ratio: 16/10; background: var(--paper); border-radius: 10px;
      display: grid; place-items: center; overflow: hidden; padding: 1.5rem;
      border: 1px solid var(--line);
    }
    .j-media img { max-width: 55%; max-height: 75%; object-fit: contain; transition: transform .5s var(--ease); filter: drop-shadow(0 15px 20px rgba(20,37,46,.12)); }
    .j-cat {
      font-family: var(--font-mono); font-size: 0.7rem;
      letter-spacing: 0.22em; color: var(--pulse); text-transform: uppercase;
    }
    .j-cat::before { content: "— "; }
    .j-title {
      font-family: var(--font-display); font-weight: 400;
      font-variation-settings: "opsz" 144;
      font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.02em;
      transition: color 0.3s var(--ease);
    }
    .j-excerpt { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }
    .j-byline {
      display: flex; align-items: center; gap: 0.6rem;
      font-size: 0.78rem; color: var(--muted);
      padding-top: 0.75rem; border-top: 1px solid var(--line);
      margin-top: auto;
    }
    .j-byline .author { color: var(--ink); font-weight: 500; }
    .j-byline .sep { opacity: 0.4; }
    .j-byline .mono { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; }

    /* ============ MANIFESTO QUOTE ============ */
    .manifesto {
      padding: clamp(4rem, 8vw, 7rem) 0;
      background: var(--paper);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      text-align: center;
    }
    .manifesto blockquote {
      font-family: var(--font-display);
      font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: clamp(1.75rem, 4vw, 3.25rem);
      line-height: 1.15;
      letter-spacing: -0.025em;
      max-width: 28ch;
      margin: 0 auto;
      color: var(--ink);
    }
    .manifesto blockquote em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--pulse);
    }
    .manifesto cite {
      display: inline-block;
      margin-top: 2rem;
      font-family: var(--font-mono);
      font-size: 0.82rem;
      color: var(--muted);
      letter-spacing: 0.1em;
      font-style: normal;
    }
    .manifesto cite::before {
      content: "— ";
      color: var(--pulse);
    }

    /* ============ QUOTE CTA ============ */
    .quote-cta {
      background: var(--ink);
      color: var(--paper);
      padding: clamp(3rem, 6vw, 5rem) 0;
      position: relative;
      overflow: hidden;
    }
    .quote-cta::before {
      content: "✚";
      position: absolute;
      font-size: 30rem;
      top: -5rem; right: -8rem;
      color: rgba(245, 240, 230, 0.04);
      font-weight: 900;
      line-height: 1;
    }
    .quote-cta .container {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 3rem;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 860px) { .quote-cta .container { grid-template-columns: 1fr; } }
    .quote-cta h2 {
      font-family: var(--font-display);
      font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: clamp(2rem, 5vw, 3.75rem);
      letter-spacing: -0.03em;
      line-height: 1.02;
      margin-bottom: 1rem;
    }
    .quote-cta h2 em {
      font-family: var(--font-serif);
      font-weight: 400;
      color: var(--pulse);
      font-style: italic;
    }
    .quote-cta p {
      font-size: 1.05rem;
      opacity: 0.8;
      max-width: 52ch;
    }
    .quote-cta-box {
      background: rgba(245, 240, 230, 0.05);
      border: 1px solid rgba(245, 240, 230, 0.15);
      padding: 1.75rem;
      border-radius: 14px;
      backdrop-filter: blur(10px);
    }
    .quote-cta-box strong {
      font-family: var(--font-display);
      font-weight: 400;
      font-variation-settings: "opsz" 144;
      font-size: 1.4rem;
      display: block;
      margin-bottom: 0.4rem;
      letter-spacing: -0.01em;
    }
    .quote-cta-box small {
      font-family: var(--font-serif);
      font-style: italic;
      opacity: 0.7;
      display: block;
      margin-bottom: 1.25rem;
    }
    .quote-cta-box .btn-primary { width: 100%; justify-content: center; }

    /* ============ FOOTER ============ */
    footer.site-footer {
      background: var(--bone);
      padding: clamp(3rem, 6vw, 5rem) 0 2rem;
      border-top: 1px solid var(--line);
    }
    .foot-top {
      display: grid;
      grid-template-columns: 1.3fr repeat(3, 1fr);
      gap: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid var(--line);
    }
    @media (max-width: 780px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
    .foot-brand .logo { margin-bottom: 1.25rem; }
    .foot-brand p {
      font-size: 0.92rem;
      color: var(--muted);
      max-width: 38ch;
      margin-bottom: 1.5rem;
    }
    .foot-news {
      display: flex;
      align-items: stretch;
      border: 1px solid var(--line);
      border-radius: 999px;
      overflow: hidden;
      max-width: 420px;
      background: var(--paper);
    }
    .foot-news input {
      flex: 1;
      background: none;
      border: 0;
      padding: 0.85rem 1.25rem;
      font: inherit;
      color: var(--ink);
      outline: none;
    }
    .foot-news button {
      background: var(--ink);
      color: var(--paper);
      padding: 0 1.3rem;
      font-weight: 500;
      font-size: 0.9rem;
      transition: background 0.3s var(--ease);
    }
    .foot-news button:hover { background: var(--pulse); }

    .foot-col h4 {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      font-size: 0.95rem;
      color: var(--muted);
      margin-bottom: 1.25rem;
    }
    .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
    .foot-col a {
      font-size: 0.92rem;
      transition: color 0.2s var(--ease);
    }
    .foot-col a:hover { color: var(--pulse); }

    .foot-bottom {
      padding-top: 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
      font-size: 0.85rem;
      color: var(--muted);
    }
    .foot-bottom .credits em {
      font-family: var(--font-serif);
      color: var(--ink);
      font-style: italic;
    }

    /* ============ MODAL (RFQ) ============ */
    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(15, 42, 54, 0.6);
      backdrop-filter: blur(8px);
      z-index: 200;
      display: grid;
      place-items: center;
      padding: 2rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s var(--ease);
    }
    .modal-backdrop.open { opacity: 1; pointer-events: auto; }
    .modal {
      background: var(--paper);
      border-radius: 18px;
      max-width: 560px;
      width: 100%;
      padding: clamp(1.75rem, 3vw, 2.5rem);
      position: relative;
      transform: translateY(20px) scale(0.98);
      transition: transform 0.3s var(--ease);
      max-height: 90vh;
      overflow-y: auto;
    }
    .modal-backdrop.open .modal { transform: translateY(0) scale(1); }
    .modal-close {
      position: absolute;
      top: 1rem; right: 1rem;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--bone);
      display: grid;
      place-items: center;
    }
    .modal-close:hover { background: var(--pulse); color: var(--paper); }
    .modal h3 {
      font-family: var(--font-display);
      font-weight: 400;
      font-variation-settings: "opsz" 144;
      font-size: 1.85rem;
      letter-spacing: -0.02em;
      margin-bottom: 0.3rem;
    }
    .modal .sub {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--muted);
      margin-bottom: 2rem;
    }
    .form-grid { display: grid; gap: 1rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
    .field label {
      display: block;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--muted);
      margin-bottom: 0.35rem;
    }
    .field input, .field textarea, .field select {
      width: 100%;
      padding: 0.85rem 1rem;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bone);
      font: inherit;
      color: var(--ink);
      transition: border-color 0.2s var(--ease);
    }
    .field input:focus, .field textarea:focus, .field select:focus {
      outline: none;
      border-color: var(--ink);
    }
    .field textarea { min-height: 90px; resize: vertical; }
    .modal .btn-primary { width: 100%; justify-content: center; margin-top: 0.5rem; }

    /* reveal on scroll */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    }
    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
      /* ------ IMAGE CONTAINERS — clean white, no tint ------ */
    .prod-media, .rel-card .rel-media, .main-media, .thumb { background:#ffffff !important; }
    .prod-media::before, .rel-card .rel-media::before, .main-media::before { display:none !important; }
    .prod-card img, .rel-card img, .main-media img, .thumb img, .hero-visual img { mix-blend-mode:normal !important; }
      /* ------ IMAGE SIZING — prevent crowding text ------ */
    .prod-media { aspect-ratio:1/1 !important; overflow:hidden !important; padding:1rem !important; box-sizing:border-box !important; }
    .prod-media img { width:80% !important; height:80% !important; object-fit:contain !important; max-width:80% !important; max-height:80% !important; }
    .rel-card .rel-media { aspect-ratio:1/1 !important; overflow:hidden !important; padding:1rem !important; }
    .rel-card .rel-media img { width:75% !important; height:75% !important; object-fit:contain !important; }
    .prod-card { gap:1.25rem !important; }
    .prod-info { padding-top:.25rem !important; }
  
    /* ============ GLOBAL MOBILE HARDENING ============ */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    * { min-width: 0; }

    @media (max-width: 780px) {
      :root { --gutter: 1rem; }
      body { font-size: 15px; }
      .container { padding: 0 1rem; }
      h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }

      .hero .container,
      .sheet .container,
      .about-grid,
      .intro-split .container,
      .portfolio .heading,
      .contact-main .container,
      .feature-strip .container,
      .quote-cta .container,
      .cta-strip .container,
      .foot-top { grid-template-columns: 1fr !important; }

      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .stats-grid,
      .feature-grid { grid-template-columns: 1fr 1fr !important; }

      .rel-grid { grid-template-columns: 1fr 1fr !important; }
      .form-row { grid-template-columns: 1fr !important; }

      .marquee-strip { overflow: hidden !important; max-width: 100vw; }
      .marquee-track { font-size: 1.5rem !important; }

      .hero-visual { aspect-ratio: 3/2 !important; }
      .polaroid { padding: 8px 8px 26px !important; }
      .polaroid .caption { font-size: 0.6rem !important; padding: 6px 2px 0 !important; }

      .about-visual { aspect-ratio: 1/1 !important; }
      .brand-mark { width: 90% !important; }

      .section-divider .container { flex-direction: column; align-items: flex-start; gap: .75rem; }
      .section-divider .middle { font-size: 1rem !important; }
    }
    @media (max-width: 520px) {
      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .feature-grid { grid-template-columns: 1fr !important; }
      .rel-grid { grid-template-columns: 1fr !important; }
      .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem 1rem !important; }
      .stat-value { font-size: 3.25rem !important; }
      .hero-headline { font-size: 3.5rem !important; }
      .page-head h1, .cat-hero h1, .journal-head h1 { font-size: 2.75rem !important; }
    }

    /* ============ MOBILE DRAWER MENU ============ */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      background: var(--bone);
      z-index: 250;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
    }
    
    .mobile-drawer.open { transform: translateX(0) !important; }

    .drawer-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 0 2rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 2rem;
    }
    .drawer-head .logo { display: flex; align-items: center; gap: 0.6rem; }
    .drawer-head .logo img { width: 38px; height: 38px; }
    .drawer-head .logo span { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 1.2rem; }
    .drawer-close {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--paper);
      display: grid; place-items: center;
      cursor: pointer;
    }
    .drawer-close svg { width: 18px; height: 18px; stroke: var(--ink); }

    .drawer-nav { display: flex; flex-direction: column; margin-bottom: 2rem; }
    .drawer-nav a {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 1.25rem 0.5rem;
      font-family: var(--font-display);
      font-weight: 400; font-variation-settings: "opsz" 144;
      font-size: 1.75rem;
      letter-spacing: -0.015em;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      transition: color 0.25s ease;
    }
    .drawer-nav a .num {
      font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.2em;
      color: var(--muted); font-weight: 500;
    }
    .drawer-nav a:hover, .drawer-nav a.current { color: var(--pulse); }

    .drawer-foot { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .drawer-foot .lang {
      display: flex; gap: 0.5rem; padding: 0.35rem;
      background: var(--paper); border: 1px solid var(--line);
      border-radius: 999px; align-self: flex-start;
    }
    .drawer-foot .lang button {
      padding: 0.5rem 1.25rem; border-radius: 999px;
      font-family: var(--font-mono); font-size: 0.78rem;
      letter-spacing: 0.1em; color: var(--muted);
      border: 0; background: transparent; cursor: pointer;
      transition: all 0.25s ease;
    }
    .drawer-foot .lang button.active { background: var(--ink); color: var(--paper); }
    .drawer-foot .quote-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      padding: 1rem 1.5rem;
      background: var(--pulse); color: var(--paper);
      border-radius: 999px; font-weight: 500;
    }
    .drawer-foot .contact-mini {
      font-family: var(--font-serif); font-style: italic;
      font-size: 0.85rem; color: var(--muted);
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1rem 0.25rem; border-top: 1px solid var(--line);
    }
    .drawer-foot .contact-mini a { color: var(--ink); font-style: normal; font-family: var(--font-body); font-size: 0.9rem; }

    @media (max-width: 1024px) {
      .menu-toggle {
        display: inline-flex !important;
        width: 44px; height: 44px;
        border: 1px solid var(--line); border-radius: 50%;
        align-items: center; justify-content: center;
        flex-direction: column; gap: 5px;
        background: var(--paper); cursor: pointer;
      }
      .menu-toggle span {
        display: block; width: 18px; height: 1.5px;
        background: var(--ink);
      }
      header .container { grid-template-columns: auto 1fr auto !important; }
      .header-cta { padding: 0.55rem 1rem !important; font-size: 0.82rem !important; }
    }
    @media (max-width: 540px) { .header-cta { display: none !important; } }
    @media (min-width: 1025px) { .menu-toggle { display: none !important; } }

  
    /* ================================================================ */
    /* APP-MODE — phones (<=780px) feel like a native mobile app        */
    /* ================================================================ */
    @media (max-width: 780px) {
      /* Clean paper bg, no grid overlay */
      body {
        background: var(--paper) !important;
        background-image: none !important;
        padding-bottom: 92px !important;
      }

      /* Compact app header */
      header.site-header, header {
        background: var(--paper) !important;
        border-bottom: 1px solid var(--line);
      }
      header .container {
        padding: 0.75rem 1rem !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.75rem !important;
      }
      .logo-img { width: 32px !important; height: 32px !important; }
      .logo-text { font-size: 1rem !important; letter-spacing: -0.015em; }
      .logo-text small { display: none !important; }
      .header-cta, .nav-lang, nav.primary, .back-btn { display: none !important; }
      .menu-toggle {
        width: 40px !important; height: 40px !important;
        border: 1px solid var(--line) !important;
        background: var(--paper) !important;
      }

      /* ---- HERO ---- */
      .hero { padding: 1.5rem 0 2rem !important; }
      .hero .container { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
      .hero-text .eyebrow { font-size: 0.78rem !important; }
      .hero-headline {
        font-size: 3.25rem !important;
        line-height: 0.92 !important;
        margin: 0.5rem 0 1rem !important;
      }
      .hero-lead { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }
      .hero-ctas { gap: 0.6rem !important; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-ghost {
        flex: 1;
        padding: 0.9rem 1.2rem !important;
        font-size: 0.88rem !important;
        justify-content: center;
      }

      /* Hero polaroids → horizontal snap carousel */
      .hero-visual {
        aspect-ratio: auto !important;
        height: 280px !important;
        position: relative;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        display: flex !important;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero-visual::-webkit-scrollbar { display: none; }
      .polaroid {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        flex: 0 0 68%;
        width: 68% !important;
        scroll-snap-align: center;
        transform: rotate(0deg) !important;
        animation: none !important;
      }
      .polaroid.p1 { transform: rotate(-2deg) !important; }
      .polaroid.p2 { transform: rotate(1deg) !important; }
      .polaroid.p3 { transform: rotate(-1deg) !important; }
      .polaroid .caption { font-size: 0.66rem !important; }

      /* ---- SECTION DIVIDER ---- */
      .section-divider { padding: 1.25rem 0 !important; }
      .section-divider .container {
        flex-direction: column; align-items: flex-start;
        gap: 0.5rem !important;
      }
      .section-divider .left, .section-divider .right { font-size: 0.7rem !important; }
      .section-divider .middle { font-size: 1rem !important; }

      /* ---- STATS CARDS ---- */
      .stats-editorial { padding: 1.5rem 0 !important; }
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .stat-item {
        background: var(--bone);
        padding: 1.25rem 1rem;
        border-radius: 16px;
        border: 1px solid var(--line);
      }
      .stat-index { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }
      .stat-value {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
      }
      .stat-label { font-size: 0.78rem !important; line-height: 1.4 !important; }

      /* ---- MARQUEE ---- */
      .marquee-strip { padding: 1.25rem 0 !important; }
      .marquee-track { font-size: 1.35rem !important; gap: 1.5rem !important; }

      /* ---- ABOUT SECTION (APP) ---- */
      .about-section { padding: 2.5rem 0 !important; }
      .about-eyebrow {
        margin-bottom: 1.25rem !important;
        font-size: 0.7rem !important;
      }
      .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .about-visual {
        aspect-ratio: 5/4 !important;
        border-radius: 20px !important;
      }
      .brand-mark { width: 75% !important; }
      .about-headline {
        font-size: 1.85rem !important;
        line-height: 1.05 !important;
        margin-bottom: 1rem !important;
      }
      .about-para { font-size: 0.92rem !important; margin-bottom: 0.75rem !important; }

      /* Feature mini-cards */
      .feature-grid {
        grid-template-columns: 1fr 1fr !important;
        border-top: 0 !important;
        gap: 0.6rem !important;
        margin-top: 1.25rem !important;
      }
      .feature {
        padding: 1rem !important;
        background: var(--bone);
        border: 1px solid var(--line) !important;
        border-inline-start: 1px solid var(--line) !important;
        border-radius: 12px;
      }
      .feature h3 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
      .feature p { font-size: 0.76rem !important; line-height: 1.45 !important; }
      .feature-num { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }

      /* ---- SECTION LABELS ---- */
      .section-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 1.25rem !important;
      }
      .section-label h2 { font-size: 1.5rem !important; line-height: 1.1 !important; }
      .section-label .meta {
        margin-top: 0.25rem !important;
        gap: 0.75rem !important;
        font-size: 0.75rem;
      }

      /* ---- CATEGORIES — horizontal snap rail ---- */
      .categories { padding: 1.5rem 0 !important; overflow: hidden; }
      .cat-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        border: 0 !important;
        background: transparent !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .cat-grid::-webkit-scrollbar { display: none; }
      .cat-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        background: var(--bone) !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        padding: 1.5rem !important;
        min-height: 260px !important;
        aspect-ratio: auto !important;
        grid-column: auto !important;
      }
      .cat-card.is-cta { background: var(--ink) !important; color: var(--paper) !important; }
      .cat-card::before { display: none !important; }
      .cat-card::after { display: none !important; }
      .cat-title { font-size: 1.5rem !important; }
      .cat-desc { font-size: 0.85rem !important; max-width: none !important; }

      /* ---- PRODUCTS — larger 2-col cards ---- */
      .products { padding: 2rem 0 !important; }
      .prod-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .prod-card {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 16px !important;
      }
      .prod-info { padding: 0 0.15rem !important; }
      .prod-info h3 { font-size: 0.95rem !important; line-height: 1.1 !important; }
      .prod-info .prod-sub { font-size: 0.72rem !important; line-height: 1.35 !important; }
      .prod-tag {
        font-size: 0.58rem !important;
        top: 0.45rem !important;
        left: 0.45rem !important;
        padding: 0.18rem 0.5rem !important;
      }
      .prod-fav {
        width: 28px !important; height: 28px !important;
        top: 0.45rem !important; right: 0.45rem !important;
      }
      .prod-foot { padding-top: 0.5rem !important; }
      .prod-price .label { font-size: 0.6rem !important; }
      .prod-price .val { font-size: 0.7rem !important; }
      .prod-rfq {
        padding: 0.38rem 0.7rem !important;
        font-size: 0.66rem !important;
      }

      /* ---- MANIFESTO ---- */
      .manifesto { padding: 2.5rem 0 !important; }
      .manifesto blockquote { font-size: 1.5rem !important; line-height: 1.2 !important; }

      /* ---- JOURNAL — horizontal snap rail ---- */
      .journal-preview { padding: 2rem 0 !important; overflow: hidden; }
      .journal-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .journal-grid::-webkit-scrollbar { display: none; }
      .j-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
        padding: 1rem !important;
        border-radius: 18px !important;
      }
      .j-title { font-size: 1.15rem !important; }
      .j-excerpt { font-size: 0.82rem !important; }

      /* ---- QUOTE CTA ---- */
      .quote-cta { padding: 2.5rem 0 !important; }
      .quote-cta .container { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
      .quote-cta h2 { font-size: 1.6rem !important; line-height: 1.1 !important; }
      .quote-cta p { font-size: 0.9rem !important; }
      .quote-cta-box { padding: 1.25rem !important; }

      /* ---- FOOTER COMPACT ---- */
      footer.site-footer { padding: 2rem 0 4rem !important; }
      .foot-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding-bottom: 1.5rem !important; }
      .foot-brand { grid-column: 1 / -1; }
      .foot-brand p { font-size: 0.82rem !important; }
      .foot-col h4 { font-size: 0.85rem !important; margin-bottom: 0.75rem !important; }
      .foot-col a, .foot-col li { font-size: 0.82rem !important; }
      .foot-bottom { font-size: 0.72rem !important; }

      /* ---- MODAL → BOTTOM SHEET ---- */
      .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
      }
      .modal {
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important;
        max-width: 100% !important;
        padding: 1.5rem 1.25rem 2rem !important;
        transform: translateY(100%) !important;
      }
      .modal-backdrop.open .modal { transform: translateY(0) !important; }
      .modal::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: var(--muted);
        border-radius: 2px;
        margin: 0 auto 1.25rem;
        opacity: 0.35;
      }
      .modal h3 { font-size: 1.35rem !important; }
      .modal .sub { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
      .field input, .field textarea, .field select {
        padding: 0.8rem 0.9rem !important;
        font-size: 16px !important; /* prevent iOS zoom */
      }

      /* ---- PAGE HEADINGS on inner pages ---- */
      .page-head { padding: 2rem 0 1.5rem !important; }
      .page-head h1 { font-size: 2.5rem !important; line-height: 1 !important; }
      .page-head .meta { margin-bottom: 1.25rem !important; font-size: 0.78rem !important; }
      .page-head .lead { font-size: 0.95rem !important; margin-top: 1rem !important; }

      .cat-hero { padding: 1.5rem 0 1.5rem !important; }
      .cat-hero .grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding-bottom: 1.25rem !important; }
      .cat-hero h1 { font-size: 2.75rem !important; }
      .cat-hero .desc { font-size: 0.9rem !important; }

      .journal-head { padding: 2rem 0 1.5rem !important; }
      .journal-head h1 { font-size: 2.5rem !important; }
      .journal-head .lead { font-size: 0.95rem !important; }

      /* Toolbar on category/shop → horizontal scroll chips */
      .toolbar, .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
        margin-bottom: 1rem !important;
      }
      .toolbar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
      .filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
      }
      .filter-chips::-webkit-scrollbar { display: none; }
      .chip { white-space: nowrap; flex-shrink: 0; }

      /* Featured article on blog page stacks cleanly */
      .featured-card { padding: 1rem !important; gap: 1rem !important; border-radius: 18px !important; }
      .featured-media { aspect-ratio: 4/3 !important; padding: 1.25rem !important; }
      .featured-info h2 { font-size: 1.5rem !important; }

      .articles-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .article-card { padding-bottom: 1.5rem !important; }

      /* Article reader page */
      .article-hero { padding: 1.5rem 0 2rem !important; }
      .article-hero h1 { font-size: 2.25rem !important; }
      .article-hero .excerpt { font-size: 1rem !important; }
      .article-hero .byline { padding: 0.75rem 1.25rem !important; font-size: 0.78rem !important; gap: 0.5rem !important; flex-wrap: wrap; justify-content: center; }
      .cover-frame { aspect-ratio: 3/2 !important; padding: 1.25rem !important; border-radius: 16px !important; }
      .article-body { font-size: 1rem !important; padding: 0 1rem clamp(2.5rem, 5vw, 4rem) !important; }
      .article-body p:first-of-type::first-letter { font-size: 3.5rem !important; }

      /* Hide cluttered parts on the hero */
      .editor-note { display: none !important; }

      /* Sheet on product page */
      .sheet { padding: 1rem 0 3rem !important; }
      .sheet .container { gap: 1.5rem !important; }
      .gallery { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .thumbs { flex-direction: row !important; overflow-x: auto; gap: 0.5rem; scrollbar-width: none; }
      .thumbs::-webkit-scrollbar { display: none; }
      .thumb { width: 64px !important; }
      .info h1 { font-size: 2.25rem !important; }
      .info .sub { font-size: 1.05rem !important; }
      .spec-grid { grid-template-columns: 1fr 1fr !important; }
      .spec { padding: 0.75rem 0.85rem !important; }
      .spec .v { font-size: 0.85rem !important; }
      .spec .v.num { font-size: 1.2rem !important; }
      .actions { border-radius: 16px !important; padding: 1rem !important; bottom: 100px !important; }
      .actions .note strong { font-size: 1rem !important; }
      .actions .note small { font-size: 0.72rem !important; }

      /* Contact page */
      .info-card { padding: 1.1rem !important; grid-template-columns: 42px 1fr auto !important; gap: 0.85rem !important; }
      .info-card .ico { width: 42px !important; height: 42px !important; }
      .info-card .v { font-size: 0.88rem !important; }
      .info-card .k { font-size: 0.72rem !important; }
      .contact-form { padding: 1.5rem 1.25rem !important; border-radius: 18px !important; position: static !important; }
      .map-frame { aspect-ratio: 3/4 !important; border-radius: 16px !important; }
      .map-overlay { max-width: calc(100% - 3rem) !important; padding: 1rem 1.25rem !important; }

      /* About page */
      .intro-art { aspect-ratio: 5/4 !important; border-radius: 18px !important; }
      .intro-text h2 { font-size: 1.75rem !important; }
      .intro-text .callout { padding: 1.1rem !important; font-size: 0.95rem !important; }
      .pillars { padding: 2rem 0 !important; }
      .pillar-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .pillar { padding: 1.5rem !important; min-height: auto !important; border-radius: 16px !important; }
      .pillar h3 { font-size: 1.4rem !important; }
      .pillar p { font-size: 0.88rem !important; }
      .pillar .big-letter { font-size: 5rem !important; }
      .portfolio { padding: 2rem 0 !important; }
      .portfolio .heading { grid-template-columns: 1fr !important; gap: 1rem !important; }
      .portfolio h2 { font-size: 1.75rem !important; }
      .portfolio-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: 1.25rem 0 !important; }
      .portfolio-row .p-title { font-size: 1.25rem !important; }
      .portfolio-row .p-desc { font-size: 0.85rem !important; }
      .timeline { padding: 2rem 0 !important; }
      .timeline-track { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .timeline-track::before { display: none !important; }
      .tl-year { font-size: 1.5rem !important; }
      .tl-label { font-size: 0.78rem !important; }
      .stats { padding: 2rem 0 !important; }
      .stats .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .stats .stat-num { font-size: 2.25rem !important; }
      .stats .stat-label { font-size: 0.78rem !important; }

      /* Pagination / buttons on category */
      .pagination { margin-top: 2rem !important; gap: 0.4rem !important; }
      .pagination button { min-width: 36px !important; height: 36px !important; font-size: 0.85rem !important; }

      /* Related card on product page */
      .rel-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
      .rel-card { padding: 0.75rem !important; border-radius: 14px !important; }
      .rel-card h3 { font-size: 0.95rem !important; }
      .rel-card p { font-size: 0.75rem !important; }

      /* CTA strips */
      .cta-strip { padding: 2rem 0 !important; }
      .cta-strip h2 { font-size: 1.5rem !important; }
    }

    /* Smaller phones */
    @media (max-width: 400px) {
      .hero-headline { font-size: 2.75rem !important; }
      .polaroid { flex: 0 0 78% !important; }
      .cat-card { flex: 0 0 88% !important; }
      .j-card { flex: 0 0 90% !important; }
    }

  
    /* Hamburger must sit in the far-right cell of header grid */
    @media (max-width: 1024px) {
      header .container {
        grid-template-columns: auto 1fr auto auto !important;
      }
      .menu-toggle {
        justify-self: end;
        grid-column: -1 !important;
      }
    }

/* ===== products.html ===== */
* { box-sizing:border-box; margin:0; padding:0; }
    body { background:var(--bone); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
    body::after {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
      background-image: linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
      background-size:120px 120px; opacity:.35;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    img, svg { display:block; max-width:100%; }
    .container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    /* HEADER */
    .topbar { background:var(--ink); color:var(--paper); font-size:.82rem; padding:.55rem 0; }
    .topbar .container { display:flex; justify-content:space-between; align-items:center; }
    .topbar .lang-toggle {
      border:1px solid rgba(255,255,255,.25); padding:.28rem .75rem; border-radius:999px;
      font-family:var(--font-mono); font-size:.78rem; display:inline-flex; align-items:center; gap:.4rem;
      transition:all .3s var(--ease);
    }
    .topbar .lang-toggle:hover { background:var(--pulse); border-color:var(--pulse); }
    .topbar .lang-toggle .active { color:var(--pulse); }
    .topbar .lang-toggle:hover .active { color:var(--paper); }

    header, header.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bone) 92%, transparent); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); color:var(--ink); }
    header .container { display:grid !important; grid-template-columns:auto 1fr auto auto; align-items:center; gap:2rem; padding:1rem var(--gutter); }
    .logo { display:flex; align-items:center; gap:.8rem; }
    .logo-img { width:44px; height:44px; object-fit:contain; }
    .logo-text { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.3rem; letter-spacing:-.02em; }
    nav.primary { display:flex; justify-content:center; align-items:center; gap:clamp(1rem,2vw,2rem); font-weight:500; font-size:.92rem; }
    nav.primary > a { position:relative; padding:.4rem 0; transition:color .25s var(--ease); color:var(--ink); }
    nav.primary > a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--pulse); transition:width .3s var(--ease); }
    nav.primary > a:hover, nav.primary > a.current { color:var(--pulse-deep); }
    nav.primary > a:hover::after, nav.primary > a.current::after { width:100%; }
    .header-cta { display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); padding:.75rem 1.3rem; border-radius:999px; font-weight:500; font-size:.92rem; transition:background .3s var(--ease); white-space:nowrap; }
    .header-cta:hover { background:var(--pulse); }
    .header-cta svg { width:14px; height:14px; }
    .menu-toggle { display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:var(--paper); cursor:pointer; }
    .menu-toggle span { display:block; width:18px; height:1.5px; background:var(--ink); }
    @media (max-width:1024px) { nav.primary { display:none !important; } .menu-toggle { display:inline-flex !important; } .header-cta > span { display:none; } .header-cta { padding:.55rem 1rem; } }
    @media (max-width:540px) { .header-cta { display:none !important; } header .container { grid-template-columns:auto 1fr auto !important; } }
    .back-btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-serif); font-style:italic; color:var(--muted); }
    .back-btn svg { width:16px; height:16px; transition:transform .3s var(--ease); }
    .back-btn:hover { color:var(--ink); }
    .back-btn:hover svg { transform:translateX(-4px); }

    /* PAGE HEAD */
    .page-head { padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); }
    .page-head .meta {
      display:flex; justify-content:space-between; align-items:center; gap:1rem;
      margin-bottom:2rem; font-size:.85rem; color:var(--muted); flex-wrap:wrap;
    }
    .breadcrumb a:hover { color:var(--pulse); }
    .breadcrumb .sep { margin:0 .5rem; opacity:.5; }
    .eyebrow {
      font-family:var(--font-serif); font-style:italic;
      display:inline-flex; align-items:center; gap:.6rem;
      color:var(--muted);
    }
    .eyebrow::before { content:""; width:28px; height:1px; background:var(--ink); opacity:.5; }
    .page-head h1 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(3rem,7vw,6rem); line-height:.95;
      letter-spacing:-.035em; max-width:16ch;
    }
    .page-head h1 em {
      font-family:var(--font-serif); font-style:italic;
      color:var(--pulse); display:block; font-size:.6em; margin-top:.4rem;
    }
    .page-head .sub { margin-top:1.5rem; max-width:55ch; color:var(--ink-soft); font-size:1.05rem; }

    /* TOOLBAR */
    .toolbar {
      display:flex; justify-content:space-between; align-items:center; gap:1rem;
      padding:1.25rem 0; flex-wrap:wrap;
      border-top:1px solid var(--line); border-bottom:1px solid var(--line);
      margin-bottom:2rem;
    }
    .filter-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
    .chip {
      padding:.5rem 1rem; border-radius:99px;
      border:1px solid var(--line); background:var(--paper);
      font-size:.85rem; cursor:pointer; transition:all .25s var(--ease);
      font-family:var(--font-body);
    }
    .chip.active, .chip:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .chip .cnt { opacity:.6; font-family:var(--font-mono); font-size:.75rem; margin-inline-start:.3rem; }
    .sort-select {
      padding:.55rem 1rem; border-radius:99px; border:1px solid var(--line);
      background:var(--paper); font-size:.85rem; color:var(--ink); cursor:pointer;
    }
    .result-count { font-family:var(--font-serif); font-style:italic; color:var(--muted); }
    .result-count em { font-family:var(--font-mono); color:var(--ink); font-style:normal; }

    /* GRID */
    .grid-sec { padding:0 0 clamp(4rem,8vw,7rem); }
    .prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    @media (max-width:1100px) { .prod-grid { grid-template-columns:repeat(3,1fr); } }
    @media (max-width:780px) { .prod-grid { grid-template-columns:repeat(2,1fr); gap:1rem; } }
    @media (max-width:480px) { .prod-grid { grid-template-columns:1fr; } }

    .prod-card {
      background:var(--paper); border:1px solid var(--line); border-radius:12px;
      padding:1rem; position:relative; display:flex; flex-direction:column; gap:1rem;
      transition:all .4s var(--ease);
    }
    .prod-card:hover { transform:translateY(-3px); border-color:var(--ink); box-shadow:0 20px 40px -20px rgba(15,42,54,.25); }
    .prod-media {
      aspect-ratio:1/1; background:var(--bone); border-radius:8px;
      display:grid; place-items:center; position:relative; overflow:hidden;
    }
    .prod-media::before {
      content:""; position:absolute; inset:0;
      background-image: linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
      background-size:18px 18px;
    }
    .prod-media img {
      width:82%; height:82%; object-fit:contain; position:relative;
      transition:transform .5s var(--ease); 
    }
    .prod-card:hover .prod-media img { transform:scale(1.08) rotate(-3deg); }
    .prod-tag {
      position:absolute; top:.7rem; left:.7rem;
      font-family:var(--font-serif); font-style:italic;
      font-size:.72rem; color:var(--muted);
      background:var(--paper); padding:.22rem .6rem; border-radius:99px;
    }
    .prod-fav {
      position:absolute; top:.7rem; right:.7rem;
      width:32px; height:32px; background:var(--paper);
      border:1px solid var(--line); border-radius:50%;
      display:grid; place-items:center; transition:all .3s var(--ease);
    }
    .prod-fav:hover { background:var(--pulse); border-color:var(--pulse); }
    .prod-fav:hover svg { stroke:var(--paper); }
    .prod-fav svg { width:14px; height:14px; stroke:var(--ink); fill:none; }

    .prod-info { padding:0 .25rem; }
    .prod-info h3 {
      font-family:var(--font-display); font-weight:400;
      font-variation-settings:"opsz" 144;
      font-size:1.2rem; letter-spacing:-.02em; line-height:1.15;
      margin-bottom:.3rem;
    }
    .prod-info .prod-sub { font-size:.85rem; color:var(--muted); }

    .prod-foot {
      display:flex; justify-content:space-between; align-items:center;
      padding:.75rem .25rem .25rem; border-top:1px solid var(--line);
    }
    .prod-price { display:flex; flex-direction:column; gap:.1rem; }
    .prod-price .label { font-family:var(--font-serif); font-style:italic; font-size:.72rem; color:var(--muted); }
    .prod-price .val { font-family:var(--font-mono); font-weight:500; font-size:.8rem; }
    .prod-rfq {
      background:var(--ink); color:var(--paper);
      padding:.5rem .9rem; border-radius:99px;
      font-size:.78rem; font-weight:500;
      display:inline-flex; align-items:center; gap:.4rem;
      transition:background .3s var(--ease); letter-spacing:.04em;
    }
    .prod-rfq:hover { background:var(--pulse); }
    .prod-rfq svg { width:11px; height:11px; }

    /* HIDDEN cards based on filter */
    .prod-card.hidden { display:none; }

    /* Empty state */
    .empty {
      padding:4rem 2rem; text-align:center;
      background:var(--paper); border:1px dashed var(--line); border-radius:12px;
      font-family:var(--font-serif); font-style:italic; color:var(--muted);
    }

    /* CTA STRIP */
    .cta-strip {
      background:var(--ink); color:var(--paper);
      padding:clamp(3rem,5vw,4rem) 0; position:relative; overflow:hidden;
    }
    .cta-strip::before {
      content:"✚"; position:absolute;
      font-size:20rem; top:-3rem; right:-5rem;
      color:rgba(245,240,230,.04); font-weight:900; line-height:1;
    }
    .cta-strip .container {
      display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center;
      position:relative; z-index:1;
    }
    @media (max-width:860px) { .cta-strip .container { grid-template-columns:1fr; } }
    .cta-strip h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(1.75rem,3vw,2.75rem); letter-spacing:-.02em; line-height:1.1;
    }
    .cta-strip h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .cta-strip p { opacity:.8; margin-top:.75rem; max-width:55ch; }
    .btn-primary {
      display:inline-flex; align-items:center; gap:.8rem;
      background:var(--pulse); color:var(--paper);
      padding:1rem 1.75rem; border-radius:999px;
      font-weight:500; transition:all .3s var(--ease);
      justify-self:start;
    }
    .btn-primary:hover { background:var(--paper); color:var(--ink); }
    .btn-primary svg { width:14px; height:14px; }

    .reveal { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
    .reveal.in { opacity:1; transform:translateY(0); }
      /* ------ IMAGE CONTAINERS — clean white, no tint ------ */
    .prod-media, .rel-card .rel-media, .main-media, .thumb { background:#ffffff !important; }
    .prod-media::before, .rel-card .rel-media::before, .main-media::before { display:none !important; }
    .prod-card img, .rel-card img, .main-media img, .thumb img, .hero-visual img { mix-blend-mode:normal !important; }
      /* ------ IMAGE SIZING — prevent crowding text ------ */
    .prod-media { aspect-ratio:1/1 !important; overflow:hidden !important; padding:1rem !important; box-sizing:border-box !important; }
    .prod-media img { width:80% !important; height:80% !important; object-fit:contain !important; max-width:80% !important; max-height:80% !important; }
    .rel-card .rel-media { aspect-ratio:1/1 !important; overflow:hidden !important; padding:1rem !important; }
    .rel-card .rel-media img { width:75% !important; height:75% !important; object-fit:contain !important; }
    .prod-card { gap:1.25rem !important; }
    .prod-info { padding-top:.25rem !important; }
  
    .nav-lang { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; cursor:pointer; margin-inline-start:.5rem; transition:all .3s var(--ease); }
    .nav-lang:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .nav-lang .active { color:var(--pulse); font-weight:600; }
    .nav-lang .slash { opacity:.4; }
      
    /* ============ MOBILE APP-LIKE LAYOUT ============ */
    .mobile-tabbar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(253, 251, 245, 0.95);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-top: 1px solid var(--line);
      padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
      z-index: 100;
      box-shadow: 0 -10px 30px -10px rgba(20, 37, 46, 0.1);
    }
    .mobile-tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 500px; margin: 0 auto; }
    .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; color: var(--muted); font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; position: relative; transition: color 0.2s var(--ease); }
    .mobile-tab svg { width: 22px; height: 22px; stroke-width: 1.8; stroke: currentColor; fill: none; transition: transform 0.3s var(--ease); }
    .mobile-tab.active { color: var(--pulse); }
    .mobile-tab.active svg { transform: scale(1.08); }
    .mobile-tab.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--pulse); border-radius: 0 0 2px 2px; }
    .mobile-tab.fab { margin-top: -28px; }
    .mobile-tab.fab .fab-inner { width: 52px; height: 52px; border-radius: 50%; background: var(--pulse); color: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 20px -4px rgba(221, 83, 64, 0.5); transition: transform 0.3s var(--ease); }
    .mobile-tab.fab:active .fab-inner { transform: scale(0.92); }
    .mobile-tab.fab svg { width: 22px; height: 22px; stroke: var(--paper); }
    .mobile-tab.fab::before { display: none; }
    @media (max-width: 780px) {
      .mobile-tabbar { display: block; }
      body { padding-bottom: 80px; }
    }
    @media (max-width: 780px) {
      header .container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
      .logo-img { width: 36px; height: 36px; }
      .logo-text { font-size: 1.1rem; }
      .logo-text small { display: none; }
      .header-cta { display: none !important; }
      .nav-lang { margin-inline-start: 0; padding: 5px 10px; font-size: 0.7rem; }
      .back-btn { display: none; }
    }

  
    /* ============ GLOBAL MOBILE HARDENING ============ */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    * { min-width: 0; }

    @media (max-width: 780px) {
      :root { --gutter: 1rem; }
      body { font-size: 15px; }
      .container { padding: 0 1rem; }
      h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }

      .hero .container,
      .sheet .container,
      .about-grid,
      .intro-split .container,
      .portfolio .heading,
      .contact-main .container,
      .feature-strip .container,
      .quote-cta .container,
      .cta-strip .container,
      .foot-top { grid-template-columns: 1fr !important; }

      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .stats-grid,
      .feature-grid { grid-template-columns: 1fr 1fr !important; }

      .rel-grid { grid-template-columns: 1fr 1fr !important; }
      .form-row { grid-template-columns: 1fr !important; }

      .marquee-strip { overflow: hidden !important; max-width: 100vw; }
      .marquee-track { font-size: 1.5rem !important; }

      .hero-visual { aspect-ratio: 3/2 !important; }
      .polaroid { padding: 8px 8px 26px !important; }
      .polaroid .caption { font-size: 0.6rem !important; padding: 6px 2px 0 !important; }

      .about-visual { aspect-ratio: 1/1 !important; }
      .brand-mark { width: 90% !important; }

      .section-divider .container { flex-direction: column; align-items: flex-start; gap: .75rem; }
      .section-divider .middle { font-size: 1rem !important; }
    }
    @media (max-width: 520px) {
      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .feature-grid { grid-template-columns: 1fr !important; }
      .rel-grid { grid-template-columns: 1fr !important; }
      .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem 1rem !important; }
      .stat-value { font-size: 3.25rem !important; }
      .hero-headline { font-size: 3.5rem !important; }
      .page-head h1, .cat-hero h1, .journal-head h1 { font-size: 2.75rem !important; }
    }

    /* ============ MOBILE DRAWER MENU ============ */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      background: var(--bone);
      z-index: 250;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
    }
    
    .mobile-drawer.open { transform: translateX(0) !important; }

    .drawer-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 0 2rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 2rem;
    }
    .drawer-head .logo { display: flex; align-items: center; gap: 0.6rem; }
    .drawer-head .logo img { width: 38px; height: 38px; }
    .drawer-head .logo span { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 1.2rem; }
    .drawer-close {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--paper);
      display: grid; place-items: center;
      cursor: pointer;
    }
    .drawer-close svg { width: 18px; height: 18px; stroke: var(--ink); }

    .drawer-nav { display: flex; flex-direction: column; margin-bottom: 2rem; }
    .drawer-nav a {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 1.25rem 0.5rem;
      font-family: var(--font-display);
      font-weight: 400; font-variation-settings: "opsz" 144;
      font-size: 1.75rem;
      letter-spacing: -0.015em;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      transition: color 0.25s ease;
    }
    .drawer-nav a .num {
      font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.2em;
      color: var(--muted); font-weight: 500;
    }
    .drawer-nav a:hover, .drawer-nav a.current { color: var(--pulse); }

    .drawer-foot { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .drawer-foot .lang {
      display: flex; gap: 0.5rem; padding: 0.35rem;
      background: var(--paper); border: 1px solid var(--line);
      border-radius: 999px; align-self: flex-start;
    }
    .drawer-foot .lang button {
      padding: 0.5rem 1.25rem; border-radius: 999px;
      font-family: var(--font-mono); font-size: 0.78rem;
      letter-spacing: 0.1em; color: var(--muted);
      border: 0; background: transparent; cursor: pointer;
      transition: all 0.25s ease;
    }
    .drawer-foot .lang button.active { background: var(--ink); color: var(--paper); }
    .drawer-foot .quote-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      padding: 1rem 1.5rem;
      background: var(--pulse); color: var(--paper);
      border-radius: 999px; font-weight: 500;
    }
    .drawer-foot .contact-mini {
      font-family: var(--font-serif); font-style: italic;
      font-size: 0.85rem; color: var(--muted);
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1rem 0.25rem; border-top: 1px solid var(--line);
    }
    .drawer-foot .contact-mini a { color: var(--ink); font-style: normal; font-family: var(--font-body); font-size: 0.9rem; }

    @media (max-width: 1024px) {
      .menu-toggle {
        display: inline-flex !important;
        width: 44px; height: 44px;
        border: 1px solid var(--line); border-radius: 50%;
        align-items: center; justify-content: center;
        flex-direction: column; gap: 5px;
        background: var(--paper); cursor: pointer;
      }
      .menu-toggle span {
        display: block; width: 18px; height: 1.5px;
        background: var(--ink);
      }
      header .container { grid-template-columns: auto 1fr auto !important; }
      .header-cta { padding: 0.55rem 1rem !important; font-size: 0.82rem !important; }
    }
    @media (max-width: 540px) { .header-cta { display: none !important; } }
    @media (min-width: 1025px) { .menu-toggle { display: none !important; } }

  
    /* ================================================================ */
    /* APP-MODE — phones (<=780px) feel like a native mobile app        */
    /* ================================================================ */
    @media (max-width: 780px) {
      /* Clean paper bg, no grid overlay */
      body {
        background: var(--paper) !important;
        background-image: none !important;
        padding-bottom: 92px !important;
      }

      /* Compact app header */
      header.site-header, header {
        background: var(--paper) !important;
        border-bottom: 1px solid var(--line);
      }
      header .container {
        padding: 0.75rem 1rem !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.75rem !important;
      }
      .logo-img { width: 32px !important; height: 32px !important; }
      .logo-text { font-size: 1rem !important; letter-spacing: -0.015em; }
      .logo-text small { display: none !important; }
      .header-cta, .nav-lang, nav.primary, .back-btn { display: none !important; }
      .menu-toggle {
        width: 40px !important; height: 40px !important;
        border: 1px solid var(--line) !important;
        background: var(--paper) !important;
      }

      /* ---- HERO ---- */
      .hero { padding: 1.5rem 0 2rem !important; }
      .hero .container { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
      .hero-text .eyebrow { font-size: 0.78rem !important; }
      .hero-headline {
        font-size: 3.25rem !important;
        line-height: 0.92 !important;
        margin: 0.5rem 0 1rem !important;
      }
      .hero-lead { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }
      .hero-ctas { gap: 0.6rem !important; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-ghost {
        flex: 1;
        padding: 0.9rem 1.2rem !important;
        font-size: 0.88rem !important;
        justify-content: center;
      }

      /* Hero polaroids → horizontal snap carousel */
      .hero-visual {
        aspect-ratio: auto !important;
        height: 280px !important;
        position: relative;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        display: flex !important;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero-visual::-webkit-scrollbar { display: none; }
      .polaroid {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        flex: 0 0 68%;
        width: 68% !important;
        scroll-snap-align: center;
        transform: rotate(0deg) !important;
        animation: none !important;
      }
      .polaroid.p1 { transform: rotate(-2deg) !important; }
      .polaroid.p2 { transform: rotate(1deg) !important; }
      .polaroid.p3 { transform: rotate(-1deg) !important; }
      .polaroid .caption { font-size: 0.66rem !important; }

      /* ---- SECTION DIVIDER ---- */
      .section-divider { padding: 1.25rem 0 !important; }
      .section-divider .container {
        flex-direction: column; align-items: flex-start;
        gap: 0.5rem !important;
      }
      .section-divider .left, .section-divider .right { font-size: 0.7rem !important; }
      .section-divider .middle { font-size: 1rem !important; }

      /* ---- STATS CARDS ---- */
      .stats-editorial { padding: 1.5rem 0 !important; }
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .stat-item {
        background: var(--bone);
        padding: 1.25rem 1rem;
        border-radius: 16px;
        border: 1px solid var(--line);
      }
      .stat-index { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }
      .stat-value {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
      }
      .stat-label { font-size: 0.78rem !important; line-height: 1.4 !important; }

      /* ---- MARQUEE ---- */
      .marquee-strip { padding: 1.25rem 0 !important; }
      .marquee-track { font-size: 1.35rem !important; gap: 1.5rem !important; }

      /* ---- ABOUT SECTION (APP) ---- */
      .about-section { padding: 2.5rem 0 !important; }
      .about-eyebrow {
        margin-bottom: 1.25rem !important;
        font-size: 0.7rem !important;
      }
      .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .about-visual {
        aspect-ratio: 5/4 !important;
        border-radius: 20px !important;
      }
      .brand-mark { width: 75% !important; }
      .about-headline {
        font-size: 1.85rem !important;
        line-height: 1.05 !important;
        margin-bottom: 1rem !important;
      }
      .about-para { font-size: 0.92rem !important; margin-bottom: 0.75rem !important; }

      /* Feature mini-cards */
      .feature-grid {
        grid-template-columns: 1fr 1fr !important;
        border-top: 0 !important;
        gap: 0.6rem !important;
        margin-top: 1.25rem !important;
      }
      .feature {
        padding: 1rem !important;
        background: var(--bone);
        border: 1px solid var(--line) !important;
        border-inline-start: 1px solid var(--line) !important;
        border-radius: 12px;
      }
      .feature h3 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
      .feature p { font-size: 0.76rem !important; line-height: 1.45 !important; }
      .feature-num { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }

      /* ---- SECTION LABELS ---- */
      .section-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 1.25rem !important;
      }
      .section-label h2 { font-size: 1.5rem !important; line-height: 1.1 !important; }
      .section-label .meta {
        margin-top: 0.25rem !important;
        gap: 0.75rem !important;
        font-size: 0.75rem;
      }

      /* ---- CATEGORIES — horizontal snap rail ---- */
      .categories { padding: 1.5rem 0 !important; overflow: hidden; }
      .cat-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        border: 0 !important;
        background: transparent !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .cat-grid::-webkit-scrollbar { display: none; }
      .cat-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        background: var(--bone) !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        padding: 1.5rem !important;
        min-height: 260px !important;
        aspect-ratio: auto !important;
        grid-column: auto !important;
      }
      .cat-card.is-cta { background: var(--ink) !important; color: var(--paper) !important; }
      .cat-card::before { display: none !important; }
      .cat-card::after { display: none !important; }
      .cat-title { font-size: 1.5rem !important; }
      .cat-desc { font-size: 0.85rem !important; max-width: none !important; }

      /* ---- PRODUCTS — larger 2-col cards ---- */
      .products { padding: 2rem 0 !important; }
      .prod-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .prod-card {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 16px !important;
      }
      .prod-info { padding: 0 0.15rem !important; }
      .prod-info h3 { font-size: 0.95rem !important; line-height: 1.1 !important; }
      .prod-info .prod-sub { font-size: 0.72rem !important; line-height: 1.35 !important; }
      .prod-tag {
        font-size: 0.58rem !important;
        top: 0.45rem !important;
        left: 0.45rem !important;
        padding: 0.18rem 0.5rem !important;
      }
      .prod-fav {
        width: 28px !important; height: 28px !important;
        top: 0.45rem !important; right: 0.45rem !important;
      }
      .prod-foot { padding-top: 0.5rem !important; }
      .prod-price .label { font-size: 0.6rem !important; }
      .prod-price .val { font-size: 0.7rem !important; }
      .prod-rfq {
        padding: 0.38rem 0.7rem !important;
        font-size: 0.66rem !important;
      }

      /* ---- MANIFESTO ---- */
      .manifesto { padding: 2.5rem 0 !important; }
      .manifesto blockquote { font-size: 1.5rem !important; line-height: 1.2 !important; }

      /* ---- JOURNAL — horizontal snap rail ---- */
      .journal-preview { padding: 2rem 0 !important; overflow: hidden; }
      .journal-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .journal-grid::-webkit-scrollbar { display: none; }
      .j-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
        padding: 1rem !important;
        border-radius: 18px !important;
      }
      .j-title { font-size: 1.15rem !important; }
      .j-excerpt { font-size: 0.82rem !important; }

      /* ---- QUOTE CTA ---- */
      .quote-cta { padding: 2.5rem 0 !important; }
      .quote-cta .container { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
      .quote-cta h2 { font-size: 1.6rem !important; line-height: 1.1 !important; }
      .quote-cta p { font-size: 0.9rem !important; }
      .quote-cta-box { padding: 1.25rem !important; }

      /* ---- FOOTER COMPACT ---- */
      footer.site-footer { padding: 2rem 0 4rem !important; }
      .foot-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding-bottom: 1.5rem !important; }
      .foot-brand { grid-column: 1 / -1; }
      .foot-brand p { font-size: 0.82rem !important; }
      .foot-col h4 { font-size: 0.85rem !important; margin-bottom: 0.75rem !important; }
      .foot-col a, .foot-col li { font-size: 0.82rem !important; }
      .foot-bottom { font-size: 0.72rem !important; }

      /* ---- MODAL → BOTTOM SHEET ---- */
      .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
      }
      .modal {
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important;
        max-width: 100% !important;
        padding: 1.5rem 1.25rem 2rem !important;
        transform: translateY(100%) !important;
      }
      .modal-backdrop.open .modal { transform: translateY(0) !important; }
      .modal::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: var(--muted);
        border-radius: 2px;
        margin: 0 auto 1.25rem;
        opacity: 0.35;
      }
      .modal h3 { font-size: 1.35rem !important; }
      .modal .sub { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
      .field input, .field textarea, .field select {
        padding: 0.8rem 0.9rem !important;
        font-size: 16px !important; /* prevent iOS zoom */
      }

      /* ---- PAGE HEADINGS on inner pages ---- */
      .page-head { padding: 2rem 0 1.5rem !important; }
      .page-head h1 { font-size: 2.5rem !important; line-height: 1 !important; }
      .page-head .meta { margin-bottom: 1.25rem !important; font-size: 0.78rem !important; }
      .page-head .lead { font-size: 0.95rem !important; margin-top: 1rem !important; }

      .cat-hero { padding: 1.5rem 0 1.5rem !important; }
      .cat-hero .grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding-bottom: 1.25rem !important; }
      .cat-hero h1 { font-size: 2.75rem !important; }
      .cat-hero .desc { font-size: 0.9rem !important; }

      .journal-head { padding: 2rem 0 1.5rem !important; }
      .journal-head h1 { font-size: 2.5rem !important; }
      .journal-head .lead { font-size: 0.95rem !important; }

      /* Toolbar on category/shop → horizontal scroll chips */
      .toolbar, .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
        margin-bottom: 1rem !important;
      }
      .toolbar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
      .filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
      }
      .filter-chips::-webkit-scrollbar { display: none; }
      .chip { white-space: nowrap; flex-shrink: 0; }

      /* Featured article on blog page stacks cleanly */
      .featured-card { padding: 1rem !important; gap: 1rem !important; border-radius: 18px !important; }
      .featured-media { aspect-ratio: 4/3 !important; padding: 1.25rem !important; }
      .featured-info h2 { font-size: 1.5rem !important; }

      .articles-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .article-card { padding-bottom: 1.5rem !important; }

      /* Article reader page */
      .article-hero { padding: 1.5rem 0 2rem !important; }
      .article-hero h1 { font-size: 2.25rem !important; }
      .article-hero .excerpt { font-size: 1rem !important; }
      .article-hero .byline { padding: 0.75rem 1.25rem !important; font-size: 0.78rem !important; gap: 0.5rem !important; flex-wrap: wrap; justify-content: center; }
      .cover-frame { aspect-ratio: 3/2 !important; padding: 1.25rem !important; border-radius: 16px !important; }
      .article-body { font-size: 1rem !important; padding: 0 1rem clamp(2.5rem, 5vw, 4rem) !important; }
      .article-body p:first-of-type::first-letter { font-size: 3.5rem !important; }

      /* Hide cluttered parts on the hero */
      .editor-note { display: none !important; }

      /* Sheet on product page */
      .sheet { padding: 1rem 0 3rem !important; }
      .sheet .container { gap: 1.5rem !important; }
      .gallery { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .thumbs { flex-direction: row !important; overflow-x: auto; gap: 0.5rem; scrollbar-width: none; }
      .thumbs::-webkit-scrollbar { display: none; }
      .thumb { width: 64px !important; }
      .info h1 { font-size: 2.25rem !important; }
      .info .sub { font-size: 1.05rem !important; }
      .spec-grid { grid-template-columns: 1fr 1fr !important; }
      .spec { padding: 0.75rem 0.85rem !important; }
      .spec .v { font-size: 0.85rem !important; }
      .spec .v.num { font-size: 1.2rem !important; }
      .actions { border-radius: 16px !important; padding: 1rem !important; bottom: 100px !important; }
      .actions .note strong { font-size: 1rem !important; }
      .actions .note small { font-size: 0.72rem !important; }

      /* Contact page */
      .info-card { padding: 1.1rem !important; grid-template-columns: 42px 1fr auto !important; gap: 0.85rem !important; }
      .info-card .ico { width: 42px !important; height: 42px !important; }
      .info-card .v { font-size: 0.88rem !important; }
      .info-card .k { font-size: 0.72rem !important; }
      .contact-form { padding: 1.5rem 1.25rem !important; border-radius: 18px !important; position: static !important; }
      .map-frame { aspect-ratio: 3/4 !important; border-radius: 16px !important; }
      .map-overlay { max-width: calc(100% - 3rem) !important; padding: 1rem 1.25rem !important; }

      /* About page */
      .intro-art { aspect-ratio: 5/4 !important; border-radius: 18px !important; }
      .intro-text h2 { font-size: 1.75rem !important; }
      .intro-text .callout { padding: 1.1rem !important; font-size: 0.95rem !important; }
      .pillars { padding: 2rem 0 !important; }
      .pillar-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .pillar { padding: 1.5rem !important; min-height: auto !important; border-radius: 16px !important; }
      .pillar h3 { font-size: 1.4rem !important; }
      .pillar p { font-size: 0.88rem !important; }
      .pillar .big-letter { font-size: 5rem !important; }
      .portfolio { padding: 2rem 0 !important; }
      .portfolio .heading { grid-template-columns: 1fr !important; gap: 1rem !important; }
      .portfolio h2 { font-size: 1.75rem !important; }
      .portfolio-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: 1.25rem 0 !important; }
      .portfolio-row .p-title { font-size: 1.25rem !important; }
      .portfolio-row .p-desc { font-size: 0.85rem !important; }
      .timeline { padding: 2rem 0 !important; }
      .timeline-track { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .timeline-track::before { display: none !important; }
      .tl-year { font-size: 1.5rem !important; }
      .tl-label { font-size: 0.78rem !important; }
      .stats { padding: 2rem 0 !important; }
      .stats .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .stats .stat-num { font-size: 2.25rem !important; }
      .stats .stat-label { font-size: 0.78rem !important; }

      /* Pagination / buttons on category */
      .pagination { margin-top: 2rem !important; gap: 0.4rem !important; }
      .pagination button { min-width: 36px !important; height: 36px !important; font-size: 0.85rem !important; }

      /* Related card on product page */
      .rel-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
      .rel-card { padding: 0.75rem !important; border-radius: 14px !important; }
      .rel-card h3 { font-size: 0.95rem !important; }
      .rel-card p { font-size: 0.75rem !important; }

      /* CTA strips */
      .cta-strip { padding: 2rem 0 !important; }
      .cta-strip h2 { font-size: 1.5rem !important; }
    }

    /* Smaller phones */
    @media (max-width: 400px) {
      .hero-headline { font-size: 2.75rem !important; }
      .polaroid { flex: 0 0 78% !important; }
      .cat-card { flex: 0 0 88% !important; }
      .j-card { flex: 0 0 90% !important; }
    }

  
    /* Hamburger must sit in the far-right cell of header grid */
    @media (max-width: 1024px) {
      header .container {
        grid-template-columns: auto 1fr auto auto !important;
      }
      .menu-toggle {
        justify-self: end;
        grid-column: -1 !important;
      }
    }

/* ===== product.html ===== */
* { box-sizing:border-box; margin:0; padding:0; }
    body {
      background-color:var(--bone); color:var(--ink);
      font-family:var(--font-body); font-weight:450; line-height:1.7;
      -webkit-font-smoothing:antialiased; overflow-x:hidden;
      background-image: linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
      background-size:120px 120px;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    img, svg { display:block; max-width:100%; }
    .container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    /* ===== header / topbar ===== */
    .topbar { background:var(--ink); color:var(--paper); font-size:.82rem; padding:.55rem 0; }
    .topbar .container { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
    .lang-toggle {
      border:1px solid rgba(255,255,255,.25); padding:.28rem .75rem; border-radius:999px;
      font-family:var(--font-mono); font-size:.78rem; display:inline-flex; align-items:center; gap:.4rem;
      transition:all .3s var(--ease);
    }
    .lang-toggle:hover { background:var(--pulse); border-color:var(--pulse); }
    .lang-toggle .active { color:var(--pulse); }
    .lang-toggle:hover .active { color:var(--paper); }

    header.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bone) 92%, transparent); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); color:var(--ink); }
    header .container { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:1rem var(--gutter); }
    .logo { display:flex; align-items:center; gap:.8rem; }
    .logo-img { width:44px; height:44px; object-fit:contain; transition:transform .5s var(--ease); }
    .logo:hover .logo-img { transform:rotate(-8deg); }
    .logo-text { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.35rem; letter-spacing:-.02em; line-height:1; }
    .logo-text small { font-family:var(--font-serif); font-style:italic; font-size:.68rem; display:block; color:var(--muted); margin-top:.15rem; }
    nav.primary { display:flex; justify-content:center; gap:clamp(1rem,2vw,2rem); font-weight:500; font-size:.92rem; }
    nav.primary a { position:relative; padding:.4rem 0; transition:color .25s var(--ease); }
    nav.primary a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--pulse); transition:width .3s var(--ease); }
    nav.primary a:hover { color:var(--pulse-deep); }
    nav.primary a:hover::after { width:100%; }
    .header-cta {
      display:inline-flex; align-items:center; gap:.6rem;
      background:var(--ink); color:var(--paper);
      padding:.75rem 1.3rem; border-radius:999px; font-weight:500; font-size:.92rem;
      transition:background .3s var(--ease);
    }
    .header-cta:hover { background:var(--pulse); }
    .header-cta svg { width:14px; height:14px; }
    @media (max-width:1024px) { nav.primary { display:none; } .header-cta > span { display:none; } .header-cta { padding:.55rem 1rem; } }

    /* ===== breadcrumb ===== */
    .breadcrumb { padding:1.5rem 0 0; font-size:.85rem; color:var(--muted); }
    .breadcrumb .sep { margin:0 .5rem; opacity:.5; }
    .breadcrumb a:hover { color:var(--pulse); }

    /* ===== product sheet ===== */
    .sheet { padding:2rem 0 5rem; }
    .sheet .container { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4.5rem); }
    @media (max-width:960px) { .sheet .container { grid-template-columns:1fr; } }

    .gallery { display:grid; grid-template-columns:88px 1fr; gap:1rem; }
    @media (max-width:540px) { .gallery { grid-template-columns:1fr; } .thumbs { flex-direction:row !important; overflow-x:auto; } }
    .thumbs { display:flex; flex-direction:column; gap:.75rem; }
    .thumb {
      aspect-ratio:1; width:88px; flex-shrink:0;
      border:1px solid var(--line); border-radius:10px;
      background:var(--paper); display:grid; place-items:center;
      padding:8px; cursor:pointer; transition:all .25s var(--ease); overflow:hidden;
    }
    .thumb.active { border-color:var(--ink); background:var(--ink); }
    .thumb img { width:100%; height:100%; object-fit:contain;  }
    .thumb.active img { filter:brightness(0) invert(0.96); mix-blend-mode:normal; }

    .main-media {
      aspect-ratio:1; background:var(--paper);
      border:1px solid var(--line); border-radius:20px;
      position:relative; overflow:hidden; display:grid; place-items:center;
    }
    .main-media::before {
      content:""; position:absolute; inset:0;
      background-image: radial-gradient(circle at center, var(--line) 1px, transparent 1.3px);
      background-size:22px 22px; opacity:.35;
    }
    .main-media img {
      width:72%; height:72%; object-fit:contain; position:relative;
      filter:drop-shadow(0 40px 50px rgba(20,37,46,.22));
       transition:transform .6s var(--ease);
    }
    .main-media:hover img { transform:scale(1.04); }
    .main-media .corner {
      position:absolute; top:1.25rem; left:1.25rem;
      font-family:var(--font-mono); font-size:.72rem;
      color:var(--muted); letter-spacing:.1em;
    }
    .main-media .lot {
      position:absolute; top:1.25rem; right:1.25rem;
      font-family:var(--font-mono); font-size:.72rem; color:var(--muted); letter-spacing:.1em;
    }
    .main-media .bottom-note {
      position:absolute; bottom:1.25rem; left:1.25rem; right:1.25rem;
      display:flex; justify-content:space-between; align-items:baseline;
      font-family:var(--font-serif); font-style:italic; color:var(--muted); font-size:.88rem;
    }

    /* ===== info column ===== */
    .info .tag {
      display:inline-block; font-family:var(--font-serif); font-style:italic;
      color:var(--pulse); margin-bottom:1rem; font-size:.95rem;
    }
    .info h1 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(2.5rem,5vw,4rem); line-height:.98;
      letter-spacing:-.035em; margin-bottom:.5rem;
    }
    .info .sub {
      font-family:var(--font-serif); font-style:italic;
      font-size:clamp(1.1rem,1.8vw,1.35rem); color:var(--ink-soft);
      margin-bottom:1.5rem;
    }
    .info .desc { color:var(--ink-soft); max-width:52ch; margin-bottom:2rem; font-size:1rem; }

    .spec-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:0;
      border:1px solid var(--line); border-radius:14px;
      overflow:hidden; margin-bottom:2rem; background:var(--paper);
    }
    .spec { padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
    .spec:nth-child(2n) { border-left:1px solid var(--line); }
    .spec:nth-last-child(-n+2) { border-bottom:0; }
    .spec .k { font-family:var(--font-serif); font-style:italic; font-size:.8rem; color:var(--muted); margin-bottom:.25rem; }
    .spec .v { font-weight:500; font-size:.95rem; }
    .spec .v.num {
      font-family:var(--font-display); font-weight:400;
      font-variation-settings:"opsz" 144;
      font-size:1.5rem; letter-spacing:-.02em;
    }
    .spec .v.num span { font-size:.55em; color:var(--muted); margin-left:.2em; }

    .ingredient-title {
      font-family:var(--font-display); font-weight:400;
      font-variation-settings:"opsz" 144; font-size:1.35rem;
      letter-spacing:-.01em; margin-bottom:1rem;
    }
    .ingredient-list { list-style:none; margin-bottom:2rem; border-top:1px solid var(--line); }
    .ingredient-list li {
      display:grid; grid-template-columns:auto 1fr auto;
      gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line);
      align-items:baseline;
    }
    .ingredient-list .n { font-family:var(--font-mono); color:var(--muted); font-size:.82rem; min-width:30px; }
    .ingredient-list .name { font-weight:500; }
    .ingredient-list .en { font-family:var(--font-serif); font-style:italic; color:var(--muted); font-size:.85rem; display:block; margin-top:.15rem; }
    .ingredient-list .dose { font-family:var(--font-mono); font-weight:500; color:var(--pulse); font-size:.9rem; }

    .actions {
      display:grid; grid-template-columns:1fr auto;
      gap:1rem; padding:1.5rem;
      background:var(--ink); color:var(--paper);
      border-radius:18px; position:sticky; bottom:1rem;
      box-shadow:0 30px 50px -30px rgba(20,37,46,.4); z-index:10;
    }
    @media (max-width:540px) { .actions { grid-template-columns:1fr; } }
    .actions .note { display:flex; flex-direction:column; gap:.25rem; }
    .actions .note small { font-family:var(--font-serif); font-style:italic; opacity:.7; font-size:.82rem; }
    .actions .note strong { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.2rem; letter-spacing:-.01em; }
    .btn-primary {
      display:inline-flex; align-items:center; gap:.6rem;
      background:var(--pulse); padding:1rem 1.9rem;
      border-radius:999px; font-weight:500;
      transition:all .3s var(--ease); justify-content:center;
    }
    .btn-primary:hover { background:var(--paper); color:var(--ink); transform:translateY(-1px); }
    .btn-primary svg { width:14px; height:14px; }

    /* ===== tabs ===== */
    .tabs-sec { padding:4rem 0; border-top:1px solid var(--line); }
    .tabs-head {
      display:flex; gap:2rem; border-bottom:1px solid var(--line);
      margin-bottom:2.5rem; overflow-x:auto;
    }
    .tab-btn {
      padding:1rem 0; font-weight:500; font-size:1rem; color:var(--muted);
      border-bottom:2px solid transparent; white-space:nowrap;
      transition:all .2s var(--ease);
    }
    .tab-btn.active { color:var(--ink); border-color:var(--pulse); }
    .tab-btn:hover { color:var(--ink); }
    .tab-panel { display:none; animation:fade .4s var(--ease); }
    .tab-panel.active { display:block; }
    @keyframes fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    .tab-panel h3 { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.5rem; letter-spacing:-.01em; margin-bottom:1rem; }
    .tab-panel p { max-width:70ch; margin-bottom:1rem; color:var(--ink-soft); }
    .tab-panel ul { padding-inline-start:1.5rem; color:var(--ink-soft); }
    .tab-panel li { margin-bottom:.5rem; }

    /* ===== related ===== */
    .related { padding:5rem 0; background:var(--paper); border-top:1px solid var(--line); }
    .related h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(1.75rem,3.5vw,2.75rem);
      letter-spacing:-.025em; margin-bottom:2rem;
    }
    .related h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .rel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    @media (max-width:960px) { .rel-grid { grid-template-columns:repeat(3,1fr); } }
    @media (max-width:780px) { .rel-grid { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:480px) { .rel-grid { grid-template-columns:1fr; } }
    .rel-card {
      background:var(--bone); border:1px solid var(--line); border-radius:12px;
      padding:1rem; transition:all .3s var(--ease);
    }
    .rel-card:hover { transform:translateY(-3px); border-color:var(--ink); box-shadow:0 20px 40px -20px rgba(20,37,46,.25); }
    .rel-card .rel-media {
      aspect-ratio:1; background:var(--paper); border-radius:8px;
      margin-bottom:1rem; display:grid; place-items:center; overflow:hidden;
    }
    .rel-card .rel-media img { width:78%; height:78%; object-fit:contain;  transition:transform .5s var(--ease); }
    .rel-card:hover .rel-media img { transform:scale(1.06); }
    .rel-card h3 { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.05rem; margin-bottom:.2rem; }
    .rel-card p { font-size:.82rem; color:var(--muted); }

    /* ===== modal ===== */
    .modal-backdrop { position:fixed; inset:0; background:rgba(20,37,46,.65); backdrop-filter:blur(8px); z-index:200; display:grid; place-items:center; padding:2rem; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
    .modal-backdrop.open { opacity:1; pointer-events:auto; }
    .modal { background:var(--paper); border-radius:18px; max-width:560px; width:100%; padding:clamp(1.75rem,3vw,2.5rem); position:relative; transform:translateY(20px) scale(.98); transition:transform .3s var(--ease); max-height:90vh; overflow-y:auto; }
    .modal-backdrop.open .modal { transform:translateY(0) scale(1); }
    .modal-close { position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%; background:var(--bone); display:grid; place-items:center; }
    .modal-close:hover { background:var(--pulse); color:var(--paper); }
    .modal h3 { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.75rem; letter-spacing:-.02em; margin-bottom:.3rem; }
    .modal .sub { font-family:var(--font-serif); font-style:italic; color:var(--muted); margin-bottom:2rem; }
    .form-grid { display:grid; gap:1rem; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    @media (max-width:480px) { .form-row { grid-template-columns:1fr; } }
    .field label { display:block; font-size:.8rem; font-weight:500; color:var(--muted); margin-bottom:.35rem; }
    .field input, .field textarea, .field select { width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--bone); font:inherit; color:var(--ink); }
    .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--ink); }
    .field textarea { min-height:90px; }
    .modal .btn-primary { width:100%; margin-top:.5rem; color:var(--paper); }
      /* ------ IMAGE CONTAINERS — clean white, no tint ------ */
    .prod-media, .rel-card .rel-media, .main-media, .thumb { background:#ffffff !important; }
    .prod-media::before, .rel-card .rel-media::before, .main-media::before { display:none !important; }
    .prod-card img, .rel-card img, .main-media img, .thumb img, .hero-visual img { mix-blend-mode:normal !important; }
      /* ------ IMAGE SIZING — prevent crowding text ------ */
    .prod-media { aspect-ratio:1/1 !important; overflow:hidden !important; padding:1rem !important; box-sizing:border-box !important; }
    .prod-media img { width:80% !important; height:80% !important; object-fit:contain !important; max-width:80% !important; max-height:80% !important; }
    .rel-card .rel-media { aspect-ratio:1/1 !important; overflow:hidden !important; padding:1rem !important; }
    .rel-card .rel-media img { width:75% !important; height:75% !important; object-fit:contain !important; }
    .prod-card { gap:1.25rem !important; }
    .prod-info { padding-top:.25rem !important; }
  
    .nav-lang { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; cursor:pointer; margin-inline-start:.5rem; transition:all .3s var(--ease); }
    .nav-lang:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .nav-lang .active { color:var(--pulse); font-weight:600; }
    .nav-lang .slash { opacity:.4; }
      
    /* ============ MOBILE APP-LIKE LAYOUT ============ */
    .mobile-tabbar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(253, 251, 245, 0.95);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-top: 1px solid var(--line);
      padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
      z-index: 100;
      box-shadow: 0 -10px 30px -10px rgba(20, 37, 46, 0.1);
    }
    .mobile-tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 500px; margin: 0 auto; }
    .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; color: var(--muted); font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; position: relative; transition: color 0.2s var(--ease); }
    .mobile-tab svg { width: 22px; height: 22px; stroke-width: 1.8; stroke: currentColor; fill: none; transition: transform 0.3s var(--ease); }
    .mobile-tab.active { color: var(--pulse); }
    .mobile-tab.active svg { transform: scale(1.08); }
    .mobile-tab.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--pulse); border-radius: 0 0 2px 2px; }
    .mobile-tab.fab { margin-top: -28px; }
    .mobile-tab.fab .fab-inner { width: 52px; height: 52px; border-radius: 50%; background: var(--pulse); color: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 20px -4px rgba(221, 83, 64, 0.5); transition: transform 0.3s var(--ease); }
    .mobile-tab.fab:active .fab-inner { transform: scale(0.92); }
    .mobile-tab.fab svg { width: 22px; height: 22px; stroke: var(--paper); }
    .mobile-tab.fab::before { display: none; }
    @media (max-width: 780px) {
      .mobile-tabbar { display: block; }
      body { padding-bottom: 80px; }
    }
    @media (max-width: 780px) {
      header .container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
      .logo-img { width: 36px; height: 36px; }
      .logo-text { font-size: 1.1rem; }
      .logo-text small { display: none; }
      .header-cta { display: none !important; }
      .nav-lang { margin-inline-start: 0; padding: 5px 10px; font-size: 0.7rem; }
      .back-btn { display: none; }
    }

  
    /* ============ GLOBAL MOBILE HARDENING ============ */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    * { min-width: 0; }

    @media (max-width: 780px) {
      :root { --gutter: 1rem; }
      body { font-size: 15px; }
      .container { padding: 0 1rem; }
      h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }

      .hero .container,
      .sheet .container,
      .about-grid,
      .intro-split .container,
      .portfolio .heading,
      .contact-main .container,
      .feature-strip .container,
      .quote-cta .container,
      .cta-strip .container,
      .foot-top { grid-template-columns: 1fr !important; }

      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .stats-grid,
      .feature-grid { grid-template-columns: 1fr 1fr !important; }

      .rel-grid { grid-template-columns: 1fr 1fr !important; }
      .form-row { grid-template-columns: 1fr !important; }

      .marquee-strip { overflow: hidden !important; max-width: 100vw; }
      .marquee-track { font-size: 1.5rem !important; }

      .hero-visual { aspect-ratio: 3/2 !important; }
      .polaroid { padding: 8px 8px 26px !important; }
      .polaroid .caption { font-size: 0.6rem !important; padding: 6px 2px 0 !important; }

      .about-visual { aspect-ratio: 1/1 !important; }
      .brand-mark { width: 90% !important; }

      .section-divider .container { flex-direction: column; align-items: flex-start; gap: .75rem; }
      .section-divider .middle { font-size: 1rem !important; }
    }
    @media (max-width: 520px) {
      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .feature-grid { grid-template-columns: 1fr !important; }
      .rel-grid { grid-template-columns: 1fr !important; }
      .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem 1rem !important; }
      .stat-value { font-size: 3.25rem !important; }
      .hero-headline { font-size: 3.5rem !important; }
      .page-head h1, .cat-hero h1, .journal-head h1 { font-size: 2.75rem !important; }
    }

    /* ============ MOBILE DRAWER MENU ============ */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      background: var(--bone);
      z-index: 250;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
    }
    
    .mobile-drawer.open { transform: translateX(0) !important; }

    .drawer-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 0 2rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 2rem;
    }
    .drawer-head .logo { display: flex; align-items: center; gap: 0.6rem; }
    .drawer-head .logo img { width: 38px; height: 38px; }
    .drawer-head .logo span { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 1.2rem; }
    .drawer-close {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--paper);
      display: grid; place-items: center;
      cursor: pointer;
    }
    .drawer-close svg { width: 18px; height: 18px; stroke: var(--ink); }

    .drawer-nav { display: flex; flex-direction: column; margin-bottom: 2rem; }
    .drawer-nav a {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 1.25rem 0.5rem;
      font-family: var(--font-display);
      font-weight: 400; font-variation-settings: "opsz" 144;
      font-size: 1.75rem;
      letter-spacing: -0.015em;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      transition: color 0.25s ease;
    }
    .drawer-nav a .num {
      font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.2em;
      color: var(--muted); font-weight: 500;
    }
    .drawer-nav a:hover, .drawer-nav a.current { color: var(--pulse); }

    .drawer-foot { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .drawer-foot .lang {
      display: flex; gap: 0.5rem; padding: 0.35rem;
      background: var(--paper); border: 1px solid var(--line);
      border-radius: 999px; align-self: flex-start;
    }
    .drawer-foot .lang button {
      padding: 0.5rem 1.25rem; border-radius: 999px;
      font-family: var(--font-mono); font-size: 0.78rem;
      letter-spacing: 0.1em; color: var(--muted);
      border: 0; background: transparent; cursor: pointer;
      transition: all 0.25s ease;
    }
    .drawer-foot .lang button.active { background: var(--ink); color: var(--paper); }
    .drawer-foot .quote-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      padding: 1rem 1.5rem;
      background: var(--pulse); color: var(--paper);
      border-radius: 999px; font-weight: 500;
    }
    .drawer-foot .contact-mini {
      font-family: var(--font-serif); font-style: italic;
      font-size: 0.85rem; color: var(--muted);
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1rem 0.25rem; border-top: 1px solid var(--line);
    }
    .drawer-foot .contact-mini a { color: var(--ink); font-style: normal; font-family: var(--font-body); font-size: 0.9rem; }

    @media (max-width: 1024px) {
      .menu-toggle {
        display: inline-flex !important;
        width: 44px; height: 44px;
        border: 1px solid var(--line); border-radius: 50%;
        align-items: center; justify-content: center;
        flex-direction: column; gap: 5px;
        background: var(--paper); cursor: pointer;
      }
      .menu-toggle span {
        display: block; width: 18px; height: 1.5px;
        background: var(--ink);
      }
      header .container { grid-template-columns: auto 1fr auto !important; }
      .header-cta { padding: 0.55rem 1rem !important; font-size: 0.82rem !important; }
    }
    @media (max-width: 540px) { .header-cta { display: none !important; } }
    @media (min-width: 1025px) { .menu-toggle { display: none !important; } }

  
    /* ================================================================ */
    /* APP-MODE — phones (<=780px) feel like a native mobile app        */
    /* ================================================================ */
    @media (max-width: 780px) {
      /* Clean paper bg, no grid overlay */
      body {
        background: var(--paper) !important;
        background-image: none !important;
        padding-bottom: 92px !important;
      }

      /* Compact app header */
      header.site-header, header {
        background: var(--paper) !important;
        border-bottom: 1px solid var(--line);
      }
      header .container {
        padding: 0.75rem 1rem !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.75rem !important;
      }
      .logo-img { width: 32px !important; height: 32px !important; }
      .logo-text { font-size: 1rem !important; letter-spacing: -0.015em; }
      .logo-text small { display: none !important; }
      .header-cta, .nav-lang, nav.primary, .back-btn { display: none !important; }
      .menu-toggle {
        width: 40px !important; height: 40px !important;
        border: 1px solid var(--line) !important;
        background: var(--paper) !important;
      }

      /* ---- HERO ---- */
      .hero { padding: 1.5rem 0 2rem !important; }
      .hero .container { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
      .hero-text .eyebrow { font-size: 0.78rem !important; }
      .hero-headline {
        font-size: 3.25rem !important;
        line-height: 0.92 !important;
        margin: 0.5rem 0 1rem !important;
      }
      .hero-lead { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }
      .hero-ctas { gap: 0.6rem !important; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-ghost {
        flex: 1;
        padding: 0.9rem 1.2rem !important;
        font-size: 0.88rem !important;
        justify-content: center;
      }

      /* Hero polaroids → horizontal snap carousel */
      .hero-visual {
        aspect-ratio: auto !important;
        height: 280px !important;
        position: relative;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        display: flex !important;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero-visual::-webkit-scrollbar { display: none; }
      .polaroid {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        flex: 0 0 68%;
        width: 68% !important;
        scroll-snap-align: center;
        transform: rotate(0deg) !important;
        animation: none !important;
      }
      .polaroid.p1 { transform: rotate(-2deg) !important; }
      .polaroid.p2 { transform: rotate(1deg) !important; }
      .polaroid.p3 { transform: rotate(-1deg) !important; }
      .polaroid .caption { font-size: 0.66rem !important; }

      /* ---- SECTION DIVIDER ---- */
      .section-divider { padding: 1.25rem 0 !important; }
      .section-divider .container {
        flex-direction: column; align-items: flex-start;
        gap: 0.5rem !important;
      }
      .section-divider .left, .section-divider .right { font-size: 0.7rem !important; }
      .section-divider .middle { font-size: 1rem !important; }

      /* ---- STATS CARDS ---- */
      .stats-editorial { padding: 1.5rem 0 !important; }
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .stat-item {
        background: var(--bone);
        padding: 1.25rem 1rem;
        border-radius: 16px;
        border: 1px solid var(--line);
      }
      .stat-index { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }
      .stat-value {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
      }
      .stat-label { font-size: 0.78rem !important; line-height: 1.4 !important; }

      /* ---- MARQUEE ---- */
      .marquee-strip { padding: 1.25rem 0 !important; }
      .marquee-track { font-size: 1.35rem !important; gap: 1.5rem !important; }

      /* ---- ABOUT SECTION (APP) ---- */
      .about-section { padding: 2.5rem 0 !important; }
      .about-eyebrow {
        margin-bottom: 1.25rem !important;
        font-size: 0.7rem !important;
      }
      .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .about-visual {
        aspect-ratio: 5/4 !important;
        border-radius: 20px !important;
      }
      .brand-mark { width: 75% !important; }
      .about-headline {
        font-size: 1.85rem !important;
        line-height: 1.05 !important;
        margin-bottom: 1rem !important;
      }
      .about-para { font-size: 0.92rem !important; margin-bottom: 0.75rem !important; }

      /* Feature mini-cards */
      .feature-grid {
        grid-template-columns: 1fr 1fr !important;
        border-top: 0 !important;
        gap: 0.6rem !important;
        margin-top: 1.25rem !important;
      }
      .feature {
        padding: 1rem !important;
        background: var(--bone);
        border: 1px solid var(--line) !important;
        border-inline-start: 1px solid var(--line) !important;
        border-radius: 12px;
      }
      .feature h3 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
      .feature p { font-size: 0.76rem !important; line-height: 1.45 !important; }
      .feature-num { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }

      /* ---- SECTION LABELS ---- */
      .section-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 1.25rem !important;
      }
      .section-label h2 { font-size: 1.5rem !important; line-height: 1.1 !important; }
      .section-label .meta {
        margin-top: 0.25rem !important;
        gap: 0.75rem !important;
        font-size: 0.75rem;
      }

      /* ---- CATEGORIES — horizontal snap rail ---- */
      .categories { padding: 1.5rem 0 !important; overflow: hidden; }
      .cat-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        border: 0 !important;
        background: transparent !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .cat-grid::-webkit-scrollbar { display: none; }
      .cat-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        background: var(--bone) !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        padding: 1.5rem !important;
        min-height: 260px !important;
        aspect-ratio: auto !important;
        grid-column: auto !important;
      }
      .cat-card.is-cta { background: var(--ink) !important; color: var(--paper) !important; }
      .cat-card::before { display: none !important; }
      .cat-card::after { display: none !important; }
      .cat-title { font-size: 1.5rem !important; }
      .cat-desc { font-size: 0.85rem !important; max-width: none !important; }

      /* ---- PRODUCTS — larger 2-col cards ---- */
      .products { padding: 2rem 0 !important; }
      .prod-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .prod-card {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 16px !important;
      }
      .prod-info { padding: 0 0.15rem !important; }
      .prod-info h3 { font-size: 0.95rem !important; line-height: 1.1 !important; }
      .prod-info .prod-sub { font-size: 0.72rem !important; line-height: 1.35 !important; }
      .prod-tag {
        font-size: 0.58rem !important;
        top: 0.45rem !important;
        left: 0.45rem !important;
        padding: 0.18rem 0.5rem !important;
      }
      .prod-fav {
        width: 28px !important; height: 28px !important;
        top: 0.45rem !important; right: 0.45rem !important;
      }
      .prod-foot { padding-top: 0.5rem !important; }
      .prod-price .label { font-size: 0.6rem !important; }
      .prod-price .val { font-size: 0.7rem !important; }
      .prod-rfq {
        padding: 0.38rem 0.7rem !important;
        font-size: 0.66rem !important;
      }

      /* ---- MANIFESTO ---- */
      .manifesto { padding: 2.5rem 0 !important; }
      .manifesto blockquote { font-size: 1.5rem !important; line-height: 1.2 !important; }

      /* ---- JOURNAL — horizontal snap rail ---- */
      .journal-preview { padding: 2rem 0 !important; overflow: hidden; }
      .journal-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .journal-grid::-webkit-scrollbar { display: none; }
      .j-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
        padding: 1rem !important;
        border-radius: 18px !important;
      }
      .j-title { font-size: 1.15rem !important; }
      .j-excerpt { font-size: 0.82rem !important; }

      /* ---- QUOTE CTA ---- */
      .quote-cta { padding: 2.5rem 0 !important; }
      .quote-cta .container { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
      .quote-cta h2 { font-size: 1.6rem !important; line-height: 1.1 !important; }
      .quote-cta p { font-size: 0.9rem !important; }
      .quote-cta-box { padding: 1.25rem !important; }

      /* ---- FOOTER COMPACT ---- */
      footer.site-footer { padding: 2rem 0 4rem !important; }
      .foot-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding-bottom: 1.5rem !important; }
      .foot-brand { grid-column: 1 / -1; }
      .foot-brand p { font-size: 0.82rem !important; }
      .foot-col h4 { font-size: 0.85rem !important; margin-bottom: 0.75rem !important; }
      .foot-col a, .foot-col li { font-size: 0.82rem !important; }
      .foot-bottom { font-size: 0.72rem !important; }

      /* ---- MODAL → BOTTOM SHEET ---- */
      .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
      }
      .modal {
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important;
        max-width: 100% !important;
        padding: 1.5rem 1.25rem 2rem !important;
        transform: translateY(100%) !important;
      }
      .modal-backdrop.open .modal { transform: translateY(0) !important; }
      .modal::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: var(--muted);
        border-radius: 2px;
        margin: 0 auto 1.25rem;
        opacity: 0.35;
      }
      .modal h3 { font-size: 1.35rem !important; }
      .modal .sub { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
      .field input, .field textarea, .field select {
        padding: 0.8rem 0.9rem !important;
        font-size: 16px !important; /* prevent iOS zoom */
      }

      /* ---- PAGE HEADINGS on inner pages ---- */
      .page-head { padding: 2rem 0 1.5rem !important; }
      .page-head h1 { font-size: 2.5rem !important; line-height: 1 !important; }
      .page-head .meta { margin-bottom: 1.25rem !important; font-size: 0.78rem !important; }
      .page-head .lead { font-size: 0.95rem !important; margin-top: 1rem !important; }

      .cat-hero { padding: 1.5rem 0 1.5rem !important; }
      .cat-hero .grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding-bottom: 1.25rem !important; }
      .cat-hero h1 { font-size: 2.75rem !important; }
      .cat-hero .desc { font-size: 0.9rem !important; }

      .journal-head { padding: 2rem 0 1.5rem !important; }
      .journal-head h1 { font-size: 2.5rem !important; }
      .journal-head .lead { font-size: 0.95rem !important; }

      /* Toolbar on category/shop → horizontal scroll chips */
      .toolbar, .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
        margin-bottom: 1rem !important;
      }
      .toolbar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
      .filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
      }
      .filter-chips::-webkit-scrollbar { display: none; }
      .chip { white-space: nowrap; flex-shrink: 0; }

      /* Featured article on blog page stacks cleanly */
      .featured-card { padding: 1rem !important; gap: 1rem !important; border-radius: 18px !important; }
      .featured-media { aspect-ratio: 4/3 !important; padding: 1.25rem !important; }
      .featured-info h2 { font-size: 1.5rem !important; }

      .articles-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .article-card { padding-bottom: 1.5rem !important; }

      /* Article reader page */
      .article-hero { padding: 1.5rem 0 2rem !important; }
      .article-hero h1 { font-size: 2.25rem !important; }
      .article-hero .excerpt { font-size: 1rem !important; }
      .article-hero .byline { padding: 0.75rem 1.25rem !important; font-size: 0.78rem !important; gap: 0.5rem !important; flex-wrap: wrap; justify-content: center; }
      .cover-frame { aspect-ratio: 3/2 !important; padding: 1.25rem !important; border-radius: 16px !important; }
      .article-body { font-size: 1rem !important; padding: 0 1rem clamp(2.5rem, 5vw, 4rem) !important; }
      .article-body p:first-of-type::first-letter { font-size: 3.5rem !important; }

      /* Hide cluttered parts on the hero */
      .editor-note { display: none !important; }

      /* Sheet on product page */
      .sheet { padding: 1rem 0 3rem !important; }
      .sheet .container { gap: 1.5rem !important; }
      .gallery { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .thumbs { flex-direction: row !important; overflow-x: auto; gap: 0.5rem; scrollbar-width: none; }
      .thumbs::-webkit-scrollbar { display: none; }
      .thumb { width: 64px !important; }
      .info h1 { font-size: 2.25rem !important; }
      .info .sub { font-size: 1.05rem !important; }
      .spec-grid { grid-template-columns: 1fr 1fr !important; }
      .spec { padding: 0.75rem 0.85rem !important; }
      .spec .v { font-size: 0.85rem !important; }
      .spec .v.num { font-size: 1.2rem !important; }
      .actions { border-radius: 16px !important; padding: 1rem !important; bottom: 100px !important; }
      .actions .note strong { font-size: 1rem !important; }
      .actions .note small { font-size: 0.72rem !important; }

      /* Contact page */
      .info-card { padding: 1.1rem !important; grid-template-columns: 42px 1fr auto !important; gap: 0.85rem !important; }
      .info-card .ico { width: 42px !important; height: 42px !important; }
      .info-card .v { font-size: 0.88rem !important; }
      .info-card .k { font-size: 0.72rem !important; }
      .contact-form { padding: 1.5rem 1.25rem !important; border-radius: 18px !important; position: static !important; }
      .map-frame { aspect-ratio: 3/4 !important; border-radius: 16px !important; }
      .map-overlay { max-width: calc(100% - 3rem) !important; padding: 1rem 1.25rem !important; }

      /* About page */
      .intro-art { aspect-ratio: 5/4 !important; border-radius: 18px !important; }
      .intro-text h2 { font-size: 1.75rem !important; }
      .intro-text .callout { padding: 1.1rem !important; font-size: 0.95rem !important; }
      .pillars { padding: 2rem 0 !important; }
      .pillar-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .pillar { padding: 1.5rem !important; min-height: auto !important; border-radius: 16px !important; }
      .pillar h3 { font-size: 1.4rem !important; }
      .pillar p { font-size: 0.88rem !important; }
      .pillar .big-letter { font-size: 5rem !important; }
      .portfolio { padding: 2rem 0 !important; }
      .portfolio .heading { grid-template-columns: 1fr !important; gap: 1rem !important; }
      .portfolio h2 { font-size: 1.75rem !important; }
      .portfolio-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: 1.25rem 0 !important; }
      .portfolio-row .p-title { font-size: 1.25rem !important; }
      .portfolio-row .p-desc { font-size: 0.85rem !important; }
      .timeline { padding: 2rem 0 !important; }
      .timeline-track { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .timeline-track::before { display: none !important; }
      .tl-year { font-size: 1.5rem !important; }
      .tl-label { font-size: 0.78rem !important; }
      .stats { padding: 2rem 0 !important; }
      .stats .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .stats .stat-num { font-size: 2.25rem !important; }
      .stats .stat-label { font-size: 0.78rem !important; }

      /* Pagination / buttons on category */
      .pagination { margin-top: 2rem !important; gap: 0.4rem !important; }
      .pagination button { min-width: 36px !important; height: 36px !important; font-size: 0.85rem !important; }

      /* Related card on product page */
      .rel-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
      .rel-card { padding: 0.75rem !important; border-radius: 14px !important; }
      .rel-card h3 { font-size: 0.95rem !important; }
      .rel-card p { font-size: 0.75rem !important; }

      /* CTA strips */
      .cta-strip { padding: 2rem 0 !important; }
      .cta-strip h2 { font-size: 1.5rem !important; }
    }

    /* Smaller phones */
    @media (max-width: 400px) {
      .hero-headline { font-size: 2.75rem !important; }
      .polaroid { flex: 0 0 78% !important; }
      .cat-card { flex: 0 0 88% !important; }
      .j-card { flex: 0 0 90% !important; }
    }

  
    /* Hamburger must sit in the far-right cell of header grid */
    @media (max-width: 1024px) {
      header .container {
        grid-template-columns: auto 1fr auto auto !important;
      }
      .menu-toggle {
        justify-self: end;
        grid-column: -1 !important;
      }
    }

/* ===== categories.html ===== */
* { box-sizing:border-box; margin:0; padding:0; }
    html, body { overflow-x:hidden; max-width:100vw; }
    body {
      background:var(--bone); color:var(--ink);
      font-family:var(--font-body); font-weight:450; line-height:1.7;
      -webkit-font-smoothing:antialiased;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    img, svg { display:block; max-width:100%; }
    .container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    header.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bone) 90%, transparent); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); color:var(--ink); }
    header .container { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:2rem; padding:1rem var(--gutter); }
    .logo { display:flex; align-items:center; gap:.8rem; }
    .logo-img { width:44px; height:44px; object-fit:contain; }
    .logo-text { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.3rem; letter-spacing:-.02em; }
    nav.primary { display:flex; justify-content:center; align-items:center; gap:clamp(1rem,2vw,2rem); font-weight:500; font-size:.92rem; }
    nav.primary > a { position:relative; padding:.4rem 0; transition:color .25s var(--ease); }
    nav.primary > a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--pulse); transition:width .3s var(--ease); }
    nav.primary > a:hover, nav.primary > a.current { color:var(--pulse-deep); }
    nav.primary > a:hover::after, nav.primary > a.current::after { width:100%; }
    .header-cta { display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); padding:.75rem 1.3rem; border-radius:999px; font-weight:500; font-size:.92rem; transition:background .3s var(--ease); }
    .header-cta:hover { background:var(--pulse); }
    .header-cta svg { width:14px; height:14px; }
    .menu-toggle { display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:var(--paper); cursor:pointer; justify-self:end; }
    .menu-toggle span { display:block; width:18px; height:1.5px; background:var(--ink); }
    @media (max-width:1024px) { nav.primary { display:none; } .menu-toggle { display:inline-flex; } header .container { grid-template-columns:auto 1fr auto auto; } .header-cta > span { display:none; } .header-cta { padding:.55rem 1rem; } }
    @media (max-width:540px) { .header-cta { display:none !important; } header .container { grid-template-columns:auto 1fr auto; } }

    /* HERO */
    .page-head { padding:clamp(3rem,6vw,6rem) 0 clamp(2rem,4vw,3.5rem); }
    .page-head .meta { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; font-size:.85rem; color:var(--muted); }
    .breadcrumb a:hover { color:var(--pulse); }
    .breadcrumb .sep { margin:0 .5rem; opacity:.5; }
    .eyebrow { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.22em; color:var(--pulse); text-transform:uppercase; display:inline-flex; align-items:center; gap:.6rem; }
    .eyebrow::before { content:""; width:36px; height:1px; background:var(--pulse); }
    .page-head h1 { font-family:var(--font-display); font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 0; font-size:clamp(3rem,7.5vw,7rem); line-height:.95; letter-spacing:-.04em; max-width:16ch; }
    .page-head h1 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); display:block; }
    .page-head .lead { max-width:55ch; margin-top:1.5rem; color:var(--ink-soft); font-size:clamp(1rem,1.2vw,1.15rem); }

    /* CATEGORIES GRID — same editorial grid as homepage */
    .cats-section { padding:clamp(2rem,4vw,3rem) 0 clamp(4rem,8vw,7rem); }
    .cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); background:var(--paper); }
    @media (max-width:860px) { .cat-grid { grid-template-columns:1fr 1fr; } }
    @media (max-width:540px) { .cat-grid { grid-template-columns:1fr; } }
    .cat-card { position:relative; display:flex; flex-direction:column; padding:clamp(1.75rem,2.5vw,2.5rem); min-height:320px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); color:var(--ink); transition:all .5s var(--ease); overflow:hidden; cursor:pointer; }
    .cat-card:hover { background:var(--ink); color:var(--paper); }
    .cat-card:hover .cat-title em { color:var(--pulse); }
    .cat-card:hover .cat-arrow { background:var(--pulse); border-color:var(--pulse); color:var(--paper); transform:rotate(0deg) scale(1.1); }
    .cat-card:hover .cat-num, .cat-card:hover .cat-meta { color:rgba(251,247,234,.55); }
    .cat-card:hover .cat-desc { color:rgba(251,247,234,.8); }
    .cat-card::before { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--pulse); transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease); }
    .cat-card:hover::before { transform:scaleX(1); transform-origin:left; }

    .cat-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:auto; padding-bottom:2rem; }
    .cat-num { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; transition:color .3s var(--ease); }
    .cat-num::before { content:"— "; opacity:.55; }
    .cat-arrow { width:38px; height:38px; border-radius:50%; border:1px solid currentColor; display:inline-flex; align-items:center; justify-content:center; transition:all .4s var(--ease); opacity:.85; }
    .cat-arrow svg { width:13px; height:13px; }
    .cat-body { display:flex; flex-direction:column; gap:1rem; margin-top:auto; }
    .cat-title { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144,"SOFT" 0; font-size:clamp(1.75rem,2.8vw,2.4rem); letter-spacing:-.025em; line-height:1; margin:0; }
    .cat-title em { font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--pulse); transition:color .4s var(--ease); }
    .cat-desc { color:var(--ink-soft); font-size:.95rem; max-width:40ch; line-height:1.55; transition:color .4s var(--ease); }
    .cat-meta { display:flex; align-items:center; gap:.6rem; margin-top:.75rem; padding-top:1.25rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; transition:color .4s var(--ease); }
    .cat-meta .sep { opacity:.35; }
    .cat-meta .badge { color:var(--pulse); font-weight:500; }
    .cat-card:hover .cat-meta { border-top-color:rgba(251,247,234,.15); }
    .cat-card.is-cta { background:var(--ink); color:var(--paper); }
    .cat-card.is-cta .cat-num { color:rgba(251,247,234,.45); }
    .cat-card.is-cta:hover { background:var(--pulse); }

    /* FOOTER */
    footer.site-footer { background:var(--bone); padding:clamp(3rem,6vw,5rem) 0 2rem; border-top:1px solid var(--line); }
    .foot-top { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }
    @media (max-width:780px) { .foot-top { grid-template-columns:1fr 1fr; gap:2rem; } }
    .foot-brand p { font-size:.92rem; color:var(--muted); max-width:38ch; margin-top:1.25rem; }
    .foot-col h4 { font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:.95rem; color:var(--muted); margin-bottom:1.25rem; }
    .foot-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
    .foot-col a { font-size:.92rem; }
    .foot-col a:hover { color:var(--pulse); }
    .foot-bottom { padding-top:2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
    .foot-bottom .credits em { font-family:var(--font-serif); color:var(--ink); font-style:italic; }
  
    /* ============ GLOBAL MOBILE HARDENING ============ */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    * { min-width: 0; }
    @media (max-width: 780px) {
      body { padding-bottom: 92px; }
      :root { --gutter: 1rem; }
      .container { padding: 0 1rem; }
      .cat-grid { grid-template-columns: 1fr !important; }
      .cat-card { min-height: 240px !important; }
      header .container { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
      .logo-img { width: 32px !important; height: 32px !important; }
      .logo-text { font-size: 1rem !important; }
      .header-cta { display: none !important; }
      .page-head { padding: 2rem 0 1.5rem !important; }
      .page-head h1 { font-size: 2.5rem !important; }
      .page-head .lead { font-size: 0.95rem !important; }
      .foot-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
      .foot-brand { grid-column: 1 / -1; }
    }

    /* ============ MOBILE DRAWER MENU ============ */
    .mobile-drawer {
      position: fixed; inset: 0;
      background: var(--bone); z-index: 250;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
      overflow-y: auto; display: flex; flex-direction: column;
      padding: 1.25rem;
    }
    .mobile-drawer.open { transform: translateX(0); }
    .drawer-head { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0 2rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
    .drawer-head .logo img { width:38px; height:38px; }
    .drawer-head .logo span { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.2rem; }
    .drawer-close { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:grid; place-items:center; cursor:pointer; }
    .drawer-close svg { width:18px; height:18px; stroke:var(--ink); }
    .drawer-nav { display:flex; flex-direction:column; margin-bottom:2rem; }
    .drawer-nav a { display:flex; align-items:baseline; justify-content:space-between; padding:1.25rem .5rem; font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.75rem; letter-spacing:-.015em; color:var(--ink); border-bottom:1px solid var(--line); transition:color .25s ease; }
    .drawer-nav a .num { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--muted); font-weight:500; }
    .drawer-nav a:hover, .drawer-nav a.current { color:var(--pulse); }
    .drawer-foot { margin-top:auto; padding-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
    .drawer-foot .quote-btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:1rem 1.5rem; background:var(--pulse); color:var(--paper); border-radius:999px; font-weight:500; }
    .drawer-foot .contact-mini { font-family:var(--font-serif); font-style:italic; font-size:.85rem; color:var(--muted); display:flex; flex-direction:column; gap:.35rem; padding:1rem .25rem; border-top:1px solid var(--line); }
    .drawer-foot .contact-mini a { color:var(--ink); font-style:normal; font-family:var(--font-body); font-size:.9rem; }

    /* ============ MOBILE TAB BAR ============ */
    .mobile-tabbar { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(253,251,245,.95); backdrop-filter:blur(20px); border-top:1px solid var(--line); padding:.5rem 0 max(.5rem, env(safe-area-inset-bottom)); z-index:100; box-shadow:0 -10px 30px -10px rgba(20,37,46,.1); }
    .mobile-tabbar nav { display:grid; grid-template-columns:repeat(5,1fr); max-width:500px; margin:0 auto; }
    .mobile-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; color:var(--muted); font-size:.62rem; letter-spacing:.08em; font-weight:500; text-transform:uppercase; position:relative; transition:color .2s ease; }
    .mobile-tab svg { width:22px; height:22px; stroke-width:1.8; stroke:currentColor; fill:none; }
    .mobile-tab.active { color:var(--pulse); }
    .mobile-tab.fab { margin-top:-28px; }
    .mobile-tab.fab .fab-inner { width:52px; height:52px; border-radius:50%; background:var(--pulse); color:var(--paper); display:grid; place-items:center; box-shadow:0 8px 20px -4px rgba(221,83,64,.5); }
    .mobile-tab.fab svg { width:22px; height:22px; stroke:var(--paper); }
    @media (max-width:780px) { .mobile-tabbar { display:block; } }

/* ===== category.html ===== */
* { box-sizing:border-box; margin:0; padding:0; }
    body {
      background-color:var(--bone); color:var(--ink);
      font-family:var(--font-body); font-weight:450; line-height:1.7;
      -webkit-font-smoothing:antialiased; overflow-x:hidden;
      background-image: linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
      background-size:120px 120px;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    img, svg { display:block; max-width:100%; }
    .container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    header { position:sticky; top:0; z-index:50; background:rgba(247,243,234,.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); }
    header .container { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:1rem var(--gutter); }
    .logo { display:flex; align-items:center; gap:.8rem; }
    .logo-img { width:44px; height:44px; object-fit:contain; }
    .logo-text { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.3rem; letter-spacing:-.02em; }
    nav.primary { display:flex; justify-content:center; align-items:center; gap:clamp(1rem,2vw,2rem); font-weight:500; font-size:.92rem; }
    nav.primary > a { position:relative; padding:.4rem 0; transition:color .25s var(--ease); }
    nav.primary > a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--pulse); transition:width .3s var(--ease); }
    nav.primary > a:hover { color:var(--pulse-deep); }
    nav.primary > a:hover::after { width:100%; }
    .nav-lang { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; cursor:pointer; margin-inline-start:.5rem; transition:all .3s var(--ease); }
    .nav-lang:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .nav-lang .active { color:var(--pulse); font-weight:600; }
    .nav-lang .slash { opacity:.4; }
    .header-cta { display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); padding:.75rem 1.3rem; border-radius:999px; font-weight:500; font-size:.92rem; transition:background .3s var(--ease); }
    .header-cta:hover { background:var(--pulse); }
    .header-cta svg { width:14px; height:14px; }
    @media (max-width:1024px) { nav.primary { display:none; } .header-cta > span { display:none; } .header-cta { padding:.55rem 1rem; } }

    .cat-hero { padding:clamp(3rem,6vw,6rem) 0 clamp(2rem,4vw,4rem); }
    .cat-hero .meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; font-size:.85rem; color:var(--muted); }
    .breadcrumb a:hover { color:var(--pulse); }
    .breadcrumb .sep { margin:0 .5rem; opacity:.5; }
    .eyebrow { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
    .eyebrow::before { content:"— "; color:var(--pulse); }

    .cat-hero .grid { display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:end; padding-bottom:2.5rem; border-bottom:1px solid var(--line); }
    @media (max-width:860px) { .cat-hero .grid { grid-template-columns:1fr; } }
    .cat-hero h1 { font-family:var(--font-display); font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 0; font-size:clamp(3rem,7.5vw,6.5rem); line-height:.92; letter-spacing:-.04em; }
    .cat-hero h1 em { font-family:var(--font-serif); font-weight:400; color:var(--pulse); font-style:italic; display:block; font-size:.55em; letter-spacing:-.02em; margin-top:.5rem; }
    .cat-hero .desc { max-width:42ch; color:var(--ink-soft); font-size:clamp(1rem,1.2vw,1.1rem); padding-bottom:.6rem; }

    .toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem 0; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:2rem; }
    .filter-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
    .chip { padding:.5rem 1rem; border-radius:99px; border:1px solid var(--line); background:var(--paper); font-size:.85rem; cursor:pointer; transition:all .25s var(--ease); font-family:var(--font-body); }
    .chip.active, .chip:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .sort-select { padding:.55rem 1rem; border-radius:99px; border:1px solid var(--line); background:var(--paper); font:inherit; font-size:.85rem; color:var(--ink); cursor:pointer; }
    .result-count { font-family:var(--font-mono); color:var(--muted); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; }
    .result-count em { color:var(--ink); font-style:normal; }

    .grid-sec { padding:0 0 clamp(4rem,8vw,7rem); }
    .prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    @media (max-width:1100px) { .prod-grid { grid-template-columns:repeat(3,1fr); } }
    @media (max-width:780px) { .prod-grid { grid-template-columns:repeat(2,1fr); gap:1rem; } }
    @media (max-width:480px) { .prod-grid { grid-template-columns:1fr; } }
    .prod-card { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1rem; display:flex; flex-direction:column; gap:1rem; transition:all .4s var(--ease); cursor:pointer; }
    .prod-card:hover { transform:translateY(-3px); border-color:var(--ink); box-shadow:0 20px 40px -20px rgba(20,37,46,.25); }
    .prod-media { aspect-ratio:1/1; background:#ffffff; border-radius:8px; display:grid; place-items:center; position:relative; overflow:hidden; padding:1rem; }
    .prod-media img { width:80%; height:80%; max-width:80%; max-height:80%; object-fit:contain; transition:transform .5s var(--ease); }
    .prod-card:hover .prod-media img { transform:scale(1.08) rotate(-3deg); }
    .prod-tag { position:absolute; top:.7rem; left:.7rem; font-family:var(--font-serif); font-style:italic; font-size:.72rem; color:var(--muted); background:var(--paper); padding:.22rem .6rem; border-radius:99px; }
    .prod-info h3 { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.2rem; letter-spacing:-.02em; line-height:1.15; margin-bottom:.3rem; }
    .prod-info .prod-sub { font-size:.85rem; color:var(--muted); }
    .prod-foot { display:flex; justify-content:space-between; align-items:center; padding:.75rem .25rem .25rem; border-top:1px solid var(--line); }
    .prod-price .label { font-family:var(--font-serif); font-style:italic; font-size:.72rem; color:var(--muted); display:block; }
    .prod-price .val { font-family:var(--font-mono); font-weight:500; font-size:.78rem; }
    .prod-rfq { background:var(--ink); color:var(--paper); padding:.5rem .9rem; border-radius:99px; font-size:.78rem; font-weight:500; display:inline-flex; align-items:center; gap:.4rem; letter-spacing:.04em; transition:background .3s var(--ease); }
    .prod-rfq:hover { background:var(--pulse); }
    .prod-rfq svg { width:11px; height:11px; }

    .empty { padding:4rem 2rem; text-align:center; background:var(--paper); border:1px dashed var(--line); border-radius:12px; font-family:var(--font-serif); font-style:italic; color:var(--muted); }

    .cta-strip { background:var(--ink); color:var(--paper); padding:clamp(3rem,5vw,4rem) 0; position:relative; overflow:hidden; }
    .cta-strip .container { display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center; }
    @media (max-width:860px) { .cta-strip .container { grid-template-columns:1fr; } }
    .cta-strip h2 { font-family:var(--font-display); font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 0; font-size:clamp(1.75rem,3vw,2.75rem); letter-spacing:-.02em; line-height:1.1; }
    .cta-strip h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .cta-strip p { opacity:.8; margin-top:.75rem; max-width:55ch; }
    .btn-primary { display:inline-flex; align-items:center; gap:.8rem; background:var(--pulse); color:var(--paper); padding:1rem 1.75rem; border-radius:999px; font-weight:500; transition:all .3s var(--ease); justify-self:start; }
    .btn-primary:hover { background:var(--paper); color:var(--ink); }
    .btn-primary svg { width:14px; height:14px; }
  
    /* ============ MOBILE APP-LIKE LAYOUT ============ */
    .mobile-tabbar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(253, 251, 245, 0.95);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-top: 1px solid var(--line);
      padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
      z-index: 100;
      box-shadow: 0 -10px 30px -10px rgba(20, 37, 46, 0.1);
    }
    .mobile-tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 500px; margin: 0 auto; }
    .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; color: var(--muted); font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; position: relative; transition: color 0.2s var(--ease); }
    .mobile-tab svg { width: 22px; height: 22px; stroke-width: 1.8; stroke: currentColor; fill: none; transition: transform 0.3s var(--ease); }
    .mobile-tab.active { color: var(--pulse); }
    .mobile-tab.active svg { transform: scale(1.08); }
    .mobile-tab.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--pulse); border-radius: 0 0 2px 2px; }
    .mobile-tab.fab { margin-top: -28px; }
    .mobile-tab.fab .fab-inner { width: 52px; height: 52px; border-radius: 50%; background: var(--pulse); color: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 20px -4px rgba(221, 83, 64, 0.5); transition: transform 0.3s var(--ease); }
    .mobile-tab.fab:active .fab-inner { transform: scale(0.92); }
    .mobile-tab.fab svg { width: 22px; height: 22px; stroke: var(--paper); }
    .mobile-tab.fab::before { display: none; }
    @media (max-width: 780px) {
      .mobile-tabbar { display: block; }
      body { padding-bottom: 80px; }
    }
    @media (max-width: 780px) {
      header .container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
      .logo-img { width: 36px; height: 36px; }
      .logo-text { font-size: 1.1rem; }
      .logo-text small { display: none; }
      .header-cta { display: none !important; }
      .nav-lang { margin-inline-start: 0; padding: 5px 10px; font-size: 0.7rem; }
      .back-btn { display: none; }
    }

  
    /* ============ GLOBAL MOBILE HARDENING ============ */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    * { min-width: 0; }

    @media (max-width: 780px) {
      :root { --gutter: 1rem; }
      body { font-size: 15px; }
      .container { padding: 0 1rem; }
      h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }

      .hero .container,
      .sheet .container,
      .about-grid,
      .intro-split .container,
      .portfolio .heading,
      .contact-main .container,
      .feature-strip .container,
      .quote-cta .container,
      .cta-strip .container,
      .foot-top { grid-template-columns: 1fr !important; }

      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .stats-grid,
      .feature-grid { grid-template-columns: 1fr 1fr !important; }

      .rel-grid { grid-template-columns: 1fr 1fr !important; }
      .form-row { grid-template-columns: 1fr !important; }

      .marquee-strip { overflow: hidden !important; max-width: 100vw; }
      .marquee-track { font-size: 1.5rem !important; }

      .hero-visual { aspect-ratio: 3/2 !important; }
      .polaroid { padding: 8px 8px 26px !important; }
      .polaroid .caption { font-size: 0.6rem !important; padding: 6px 2px 0 !important; }

      .about-visual { aspect-ratio: 1/1 !important; }
      .brand-mark { width: 90% !important; }

      .section-divider .container { flex-direction: column; align-items: flex-start; gap: .75rem; }
      .section-divider .middle { font-size: 1rem !important; }
    }
    @media (max-width: 520px) {
      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .feature-grid { grid-template-columns: 1fr !important; }
      .rel-grid { grid-template-columns: 1fr !important; }
      .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem 1rem !important; }
      .stat-value { font-size: 3.25rem !important; }
      .hero-headline { font-size: 3.5rem !important; }
      .page-head h1, .cat-hero h1, .journal-head h1 { font-size: 2.75rem !important; }
    }

    /* ============ MOBILE DRAWER MENU ============ */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      background: var(--bone);
      z-index: 250;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
    }
    
    .mobile-drawer.open { transform: translateX(0) !important; }

    .drawer-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 0 2rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 2rem;
    }
    .drawer-head .logo { display: flex; align-items: center; gap: 0.6rem; }
    .drawer-head .logo img { width: 38px; height: 38px; }
    .drawer-head .logo span { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 1.2rem; }
    .drawer-close {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--paper);
      display: grid; place-items: center;
      cursor: pointer;
    }
    .drawer-close svg { width: 18px; height: 18px; stroke: var(--ink); }

    .drawer-nav { display: flex; flex-direction: column; margin-bottom: 2rem; }
    .drawer-nav a {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 1.25rem 0.5rem;
      font-family: var(--font-display);
      font-weight: 400; font-variation-settings: "opsz" 144;
      font-size: 1.75rem;
      letter-spacing: -0.015em;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      transition: color 0.25s ease;
    }
    .drawer-nav a .num {
      font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.2em;
      color: var(--muted); font-weight: 500;
    }
    .drawer-nav a:hover, .drawer-nav a.current { color: var(--pulse); }

    .drawer-foot { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .drawer-foot .lang {
      display: flex; gap: 0.5rem; padding: 0.35rem;
      background: var(--paper); border: 1px solid var(--line);
      border-radius: 999px; align-self: flex-start;
    }
    .drawer-foot .lang button {
      padding: 0.5rem 1.25rem; border-radius: 999px;
      font-family: var(--font-mono); font-size: 0.78rem;
      letter-spacing: 0.1em; color: var(--muted);
      border: 0; background: transparent; cursor: pointer;
      transition: all 0.25s ease;
    }
    .drawer-foot .lang button.active { background: var(--ink); color: var(--paper); }
    .drawer-foot .quote-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      padding: 1rem 1.5rem;
      background: var(--pulse); color: var(--paper);
      border-radius: 999px; font-weight: 500;
    }
    .drawer-foot .contact-mini {
      font-family: var(--font-serif); font-style: italic;
      font-size: 0.85rem; color: var(--muted);
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1rem 0.25rem; border-top: 1px solid var(--line);
    }
    .drawer-foot .contact-mini a { color: var(--ink); font-style: normal; font-family: var(--font-body); font-size: 0.9rem; }

    @media (max-width: 1024px) {
      .menu-toggle {
        display: inline-flex !important;
        width: 44px; height: 44px;
        border: 1px solid var(--line); border-radius: 50%;
        align-items: center; justify-content: center;
        flex-direction: column; gap: 5px;
        background: var(--paper); cursor: pointer;
      }
      .menu-toggle span {
        display: block; width: 18px; height: 1.5px;
        background: var(--ink);
      }
      header .container { grid-template-columns: auto 1fr auto !important; }
      .header-cta { padding: 0.55rem 1rem !important; font-size: 0.82rem !important; }
    }
    @media (max-width: 540px) { .header-cta { display: none !important; } }
    @media (min-width: 1025px) { .menu-toggle { display: none !important; } }

  
    /* ================================================================ */
    /* APP-MODE — phones (<=780px) feel like a native mobile app        */
    /* ================================================================ */
    @media (max-width: 780px) {
      /* Clean paper bg, no grid overlay */
      body {
        background: var(--paper) !important;
        background-image: none !important;
        padding-bottom: 92px !important;
      }

      /* Compact app header */
      header.site-header, header {
        background: var(--paper) !important;
        border-bottom: 1px solid var(--line);
      }
      header .container {
        padding: 0.75rem 1rem !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.75rem !important;
      }
      .logo-img { width: 32px !important; height: 32px !important; }
      .logo-text { font-size: 1rem !important; letter-spacing: -0.015em; }
      .logo-text small { display: none !important; }
      .header-cta, .nav-lang, nav.primary, .back-btn { display: none !important; }
      .menu-toggle {
        width: 40px !important; height: 40px !important;
        border: 1px solid var(--line) !important;
        background: var(--paper) !important;
      }

      /* ---- HERO ---- */
      .hero { padding: 1.5rem 0 2rem !important; }
      .hero .container { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
      .hero-text .eyebrow { font-size: 0.78rem !important; }
      .hero-headline {
        font-size: 3.25rem !important;
        line-height: 0.92 !important;
        margin: 0.5rem 0 1rem !important;
      }
      .hero-lead { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }
      .hero-ctas { gap: 0.6rem !important; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-ghost {
        flex: 1;
        padding: 0.9rem 1.2rem !important;
        font-size: 0.88rem !important;
        justify-content: center;
      }

      /* Hero polaroids → horizontal snap carousel */
      .hero-visual {
        aspect-ratio: auto !important;
        height: 280px !important;
        position: relative;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        display: flex !important;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero-visual::-webkit-scrollbar { display: none; }
      .polaroid {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        flex: 0 0 68%;
        width: 68% !important;
        scroll-snap-align: center;
        transform: rotate(0deg) !important;
        animation: none !important;
      }
      .polaroid.p1 { transform: rotate(-2deg) !important; }
      .polaroid.p2 { transform: rotate(1deg) !important; }
      .polaroid.p3 { transform: rotate(-1deg) !important; }
      .polaroid .caption { font-size: 0.66rem !important; }

      /* ---- SECTION DIVIDER ---- */
      .section-divider { padding: 1.25rem 0 !important; }
      .section-divider .container {
        flex-direction: column; align-items: flex-start;
        gap: 0.5rem !important;
      }
      .section-divider .left, .section-divider .right { font-size: 0.7rem !important; }
      .section-divider .middle { font-size: 1rem !important; }

      /* ---- STATS CARDS ---- */
      .stats-editorial { padding: 1.5rem 0 !important; }
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .stat-item {
        background: var(--bone);
        padding: 1.25rem 1rem;
        border-radius: 16px;
        border: 1px solid var(--line);
      }
      .stat-index { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }
      .stat-value {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
      }
      .stat-label { font-size: 0.78rem !important; line-height: 1.4 !important; }

      /* ---- MARQUEE ---- */
      .marquee-strip { padding: 1.25rem 0 !important; }
      .marquee-track { font-size: 1.35rem !important; gap: 1.5rem !important; }

      /* ---- ABOUT SECTION (APP) ---- */
      .about-section { padding: 2.5rem 0 !important; }
      .about-eyebrow {
        margin-bottom: 1.25rem !important;
        font-size: 0.7rem !important;
      }
      .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .about-visual {
        aspect-ratio: 5/4 !important;
        border-radius: 20px !important;
      }
      .brand-mark { width: 75% !important; }
      .about-headline {
        font-size: 1.85rem !important;
        line-height: 1.05 !important;
        margin-bottom: 1rem !important;
      }
      .about-para { font-size: 0.92rem !important; margin-bottom: 0.75rem !important; }

      /* Feature mini-cards */
      .feature-grid {
        grid-template-columns: 1fr 1fr !important;
        border-top: 0 !important;
        gap: 0.6rem !important;
        margin-top: 1.25rem !important;
      }
      .feature {
        padding: 1rem !important;
        background: var(--bone);
        border: 1px solid var(--line) !important;
        border-inline-start: 1px solid var(--line) !important;
        border-radius: 12px;
      }
      .feature h3 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
      .feature p { font-size: 0.76rem !important; line-height: 1.45 !important; }
      .feature-num { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }

      /* ---- SECTION LABELS ---- */
      .section-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 1.25rem !important;
      }
      .section-label h2 { font-size: 1.5rem !important; line-height: 1.1 !important; }
      .section-label .meta {
        margin-top: 0.25rem !important;
        gap: 0.75rem !important;
        font-size: 0.75rem;
      }

      /* ---- CATEGORIES — horizontal snap rail ---- */
      .categories { padding: 1.5rem 0 !important; overflow: hidden; }
      .cat-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        border: 0 !important;
        background: transparent !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .cat-grid::-webkit-scrollbar { display: none; }
      .cat-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        background: var(--bone) !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        padding: 1.5rem !important;
        min-height: 260px !important;
        aspect-ratio: auto !important;
        grid-column: auto !important;
      }
      .cat-card.is-cta { background: var(--ink) !important; color: var(--paper) !important; }
      .cat-card::before { display: none !important; }
      .cat-card::after { display: none !important; }
      .cat-title { font-size: 1.5rem !important; }
      .cat-desc { font-size: 0.85rem !important; max-width: none !important; }

      /* ---- PRODUCTS — larger 2-col cards ---- */
      .products { padding: 2rem 0 !important; }
      .prod-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .prod-card {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 16px !important;
      }
      .prod-info { padding: 0 0.15rem !important; }
      .prod-info h3 { font-size: 0.95rem !important; line-height: 1.1 !important; }
      .prod-info .prod-sub { font-size: 0.72rem !important; line-height: 1.35 !important; }
      .prod-tag {
        font-size: 0.58rem !important;
        top: 0.45rem !important;
        left: 0.45rem !important;
        padding: 0.18rem 0.5rem !important;
      }
      .prod-fav {
        width: 28px !important; height: 28px !important;
        top: 0.45rem !important; right: 0.45rem !important;
      }
      .prod-foot { padding-top: 0.5rem !important; }
      .prod-price .label { font-size: 0.6rem !important; }
      .prod-price .val { font-size: 0.7rem !important; }
      .prod-rfq {
        padding: 0.38rem 0.7rem !important;
        font-size: 0.66rem !important;
      }

      /* ---- MANIFESTO ---- */
      .manifesto { padding: 2.5rem 0 !important; }
      .manifesto blockquote { font-size: 1.5rem !important; line-height: 1.2 !important; }

      /* ---- JOURNAL — horizontal snap rail ---- */
      .journal-preview { padding: 2rem 0 !important; overflow: hidden; }
      .journal-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .journal-grid::-webkit-scrollbar { display: none; }
      .j-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
        padding: 1rem !important;
        border-radius: 18px !important;
      }
      .j-title { font-size: 1.15rem !important; }
      .j-excerpt { font-size: 0.82rem !important; }

      /* ---- QUOTE CTA ---- */
      .quote-cta { padding: 2.5rem 0 !important; }
      .quote-cta .container { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
      .quote-cta h2 { font-size: 1.6rem !important; line-height: 1.1 !important; }
      .quote-cta p { font-size: 0.9rem !important; }
      .quote-cta-box { padding: 1.25rem !important; }

      /* ---- FOOTER COMPACT ---- */
      footer.site-footer { padding: 2rem 0 4rem !important; }
      .foot-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding-bottom: 1.5rem !important; }
      .foot-brand { grid-column: 1 / -1; }
      .foot-brand p { font-size: 0.82rem !important; }
      .foot-col h4 { font-size: 0.85rem !important; margin-bottom: 0.75rem !important; }
      .foot-col a, .foot-col li { font-size: 0.82rem !important; }
      .foot-bottom { font-size: 0.72rem !important; }

      /* ---- MODAL → BOTTOM SHEET ---- */
      .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
      }
      .modal {
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important;
        max-width: 100% !important;
        padding: 1.5rem 1.25rem 2rem !important;
        transform: translateY(100%) !important;
      }
      .modal-backdrop.open .modal { transform: translateY(0) !important; }
      .modal::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: var(--muted);
        border-radius: 2px;
        margin: 0 auto 1.25rem;
        opacity: 0.35;
      }
      .modal h3 { font-size: 1.35rem !important; }
      .modal .sub { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
      .field input, .field textarea, .field select {
        padding: 0.8rem 0.9rem !important;
        font-size: 16px !important; /* prevent iOS zoom */
      }

      /* ---- PAGE HEADINGS on inner pages ---- */
      .page-head { padding: 2rem 0 1.5rem !important; }
      .page-head h1 { font-size: 2.5rem !important; line-height: 1 !important; }
      .page-head .meta { margin-bottom: 1.25rem !important; font-size: 0.78rem !important; }
      .page-head .lead { font-size: 0.95rem !important; margin-top: 1rem !important; }

      .cat-hero { padding: 1.5rem 0 1.5rem !important; }
      .cat-hero .grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding-bottom: 1.25rem !important; }
      .cat-hero h1 { font-size: 2.75rem !important; }
      .cat-hero .desc { font-size: 0.9rem !important; }

      .journal-head { padding: 2rem 0 1.5rem !important; }
      .journal-head h1 { font-size: 2.5rem !important; }
      .journal-head .lead { font-size: 0.95rem !important; }

      /* Toolbar on category/shop → horizontal scroll chips */
      .toolbar, .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
        margin-bottom: 1rem !important;
      }
      .toolbar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
      .filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
      }
      .filter-chips::-webkit-scrollbar { display: none; }
      .chip { white-space: nowrap; flex-shrink: 0; }

      /* Featured article on blog page stacks cleanly */
      .featured-card { padding: 1rem !important; gap: 1rem !important; border-radius: 18px !important; }
      .featured-media { aspect-ratio: 4/3 !important; padding: 1.25rem !important; }
      .featured-info h2 { font-size: 1.5rem !important; }

      .articles-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .article-card { padding-bottom: 1.5rem !important; }

      /* Article reader page */
      .article-hero { padding: 1.5rem 0 2rem !important; }
      .article-hero h1 { font-size: 2.25rem !important; }
      .article-hero .excerpt { font-size: 1rem !important; }
      .article-hero .byline { padding: 0.75rem 1.25rem !important; font-size: 0.78rem !important; gap: 0.5rem !important; flex-wrap: wrap; justify-content: center; }
      .cover-frame { aspect-ratio: 3/2 !important; padding: 1.25rem !important; border-radius: 16px !important; }
      .article-body { font-size: 1rem !important; padding: 0 1rem clamp(2.5rem, 5vw, 4rem) !important; }
      .article-body p:first-of-type::first-letter { font-size: 3.5rem !important; }

      /* Hide cluttered parts on the hero */
      .editor-note { display: none !important; }

      /* Sheet on product page */
      .sheet { padding: 1rem 0 3rem !important; }
      .sheet .container { gap: 1.5rem !important; }
      .gallery { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .thumbs { flex-direction: row !important; overflow-x: auto; gap: 0.5rem; scrollbar-width: none; }
      .thumbs::-webkit-scrollbar { display: none; }
      .thumb { width: 64px !important; }
      .info h1 { font-size: 2.25rem !important; }
      .info .sub { font-size: 1.05rem !important; }
      .spec-grid { grid-template-columns: 1fr 1fr !important; }
      .spec { padding: 0.75rem 0.85rem !important; }
      .spec .v { font-size: 0.85rem !important; }
      .spec .v.num { font-size: 1.2rem !important; }
      .actions { border-radius: 16px !important; padding: 1rem !important; bottom: 100px !important; }
      .actions .note strong { font-size: 1rem !important; }
      .actions .note small { font-size: 0.72rem !important; }

      /* Contact page */
      .info-card { padding: 1.1rem !important; grid-template-columns: 42px 1fr auto !important; gap: 0.85rem !important; }
      .info-card .ico { width: 42px !important; height: 42px !important; }
      .info-card .v { font-size: 0.88rem !important; }
      .info-card .k { font-size: 0.72rem !important; }
      .contact-form { padding: 1.5rem 1.25rem !important; border-radius: 18px !important; position: static !important; }
      .map-frame { aspect-ratio: 3/4 !important; border-radius: 16px !important; }
      .map-overlay { max-width: calc(100% - 3rem) !important; padding: 1rem 1.25rem !important; }

      /* About page */
      .intro-art { aspect-ratio: 5/4 !important; border-radius: 18px !important; }
      .intro-text h2 { font-size: 1.75rem !important; }
      .intro-text .callout { padding: 1.1rem !important; font-size: 0.95rem !important; }
      .pillars { padding: 2rem 0 !important; }
      .pillar-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .pillar { padding: 1.5rem !important; min-height: auto !important; border-radius: 16px !important; }
      .pillar h3 { font-size: 1.4rem !important; }
      .pillar p { font-size: 0.88rem !important; }
      .pillar .big-letter { font-size: 5rem !important; }
      .portfolio { padding: 2rem 0 !important; }
      .portfolio .heading { grid-template-columns: 1fr !important; gap: 1rem !important; }
      .portfolio h2 { font-size: 1.75rem !important; }
      .portfolio-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: 1.25rem 0 !important; }
      .portfolio-row .p-title { font-size: 1.25rem !important; }
      .portfolio-row .p-desc { font-size: 0.85rem !important; }
      .timeline { padding: 2rem 0 !important; }
      .timeline-track { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .timeline-track::before { display: none !important; }
      .tl-year { font-size: 1.5rem !important; }
      .tl-label { font-size: 0.78rem !important; }
      .stats { padding: 2rem 0 !important; }
      .stats .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .stats .stat-num { font-size: 2.25rem !important; }
      .stats .stat-label { font-size: 0.78rem !important; }

      /* Pagination / buttons on category */
      .pagination { margin-top: 2rem !important; gap: 0.4rem !important; }
      .pagination button { min-width: 36px !important; height: 36px !important; font-size: 0.85rem !important; }

      /* Related card on product page */
      .rel-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
      .rel-card { padding: 0.75rem !important; border-radius: 14px !important; }
      .rel-card h3 { font-size: 0.95rem !important; }
      .rel-card p { font-size: 0.75rem !important; }

      /* CTA strips */
      .cta-strip { padding: 2rem 0 !important; }
      .cta-strip h2 { font-size: 1.5rem !important; }
    }

    /* Smaller phones */
    @media (max-width: 400px) {
      .hero-headline { font-size: 2.75rem !important; }
      .polaroid { flex: 0 0 78% !important; }
      .cat-card { flex: 0 0 88% !important; }
      .j-card { flex: 0 0 90% !important; }
    }

  
    /* Hamburger must sit in the far-right cell of header grid */
    @media (max-width: 1024px) {
      header .container {
        grid-template-columns: auto 1fr auto auto !important;
      }
      .menu-toggle {
        justify-self: end;
        grid-column: -1 !important;
      }
    }

/* ===== about.html ===== */
* { box-sizing:border-box; margin:0; padding:0; }
    body { background:var(--bone); color:var(--ink); font-family:var(--font-body); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
    body::before {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:1000;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.16 0 0 0 0 0.21 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
      opacity:.15; 
    }
    body::after {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:999;
      background-image: linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
      background-size:120px 120px; opacity:.4;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    img, svg { display:block; max-width:100%; }
    .container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); position:relative; }

    /* TOP BAR */
    .topbar { background:var(--ink); color:var(--paper); font-size:.82rem; padding:.55rem 0; }
    .topbar .container { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
    .topbar .lang-toggle {
      border:1px solid rgba(255,255,255,.25); padding:.28rem .75rem; border-radius:999px;
      font-family:var(--font-mono); font-size:.78rem; display:inline-flex; align-items:center; gap:.4rem;
      transition:all .3s var(--ease);
    }
    .topbar .lang-toggle:hover { background:var(--pulse); border-color:var(--pulse); }
    .topbar .lang-toggle .active { color:var(--pulse); }
    .topbar .lang-toggle:hover .active { color:var(--paper); }

    /* HEADER */
    header { position:sticky; top:0; z-index:50; background:rgba(245,240,230,.88); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); }
    header .container { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:1rem var(--gutter); }
    .logo { display:flex; align-items:center; gap:.8rem; }
    .logo-img { width:44px; height:44px; object-fit:contain; transition:transform .5s var(--ease); }
    .logo:hover .logo-img { transform:rotate(-8deg); }
    .logo-text { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.35rem; letter-spacing:-.02em; line-height:1; }
    .logo-text small { font-family:var(--font-serif); font-style:italic; font-size:.68rem; display:block; color:var(--muted); margin-top:.15rem; }

    nav.primary { display:flex; justify-content:center; gap:clamp(1rem,2vw,2rem); font-weight:500; font-size:.92rem; }
    nav.primary a { position:relative; padding:.4rem 0; transition:color .25s var(--ease); }
    nav.primary a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--pulse); transition:width .3s var(--ease); }
    nav.primary a:hover, nav.primary a.current { color:var(--pulse-deep); }
    nav.primary a:hover::after, nav.primary a.current::after { width:100%; }
    .header-cta {
      display:inline-flex; align-items:center; gap:.6rem;
      background:var(--ink); color:var(--paper);
      padding:.75rem 1.3rem; border-radius:999px;
      font-weight:500; font-size:.92rem;
      transition:background .3s var(--ease);
    }
    .header-cta:hover { background:var(--pulse); }
    .header-cta svg { width:14px; height:14px; }
    @media (max-width:1024px) { nav.primary { display:none; } .header-cta > span { display:none; } .header-cta { padding:.55rem 1rem; } }

    /* PAGE HEAD */
    .page-head { padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,5vw,5rem); position:relative; }
    .page-head .meta {
      display:flex; justify-content:space-between; align-items:center; gap:1rem;
      margin-bottom:2rem; font-size:.85rem; color:var(--muted);
      flex-wrap:wrap;
    }
    .breadcrumb a:hover { color:var(--pulse); }
    .breadcrumb .sep { margin:0 .5rem; opacity:.5; }
    .eyebrow {
      font-family:var(--font-serif); font-style:italic;
      display:inline-flex; align-items:center; gap:.6rem; color:var(--muted);
    }
    .eyebrow::before { content:""; width:28px; height:1px; background:var(--ink); opacity:.5; }

    .page-head h1 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(3rem,8vw,8rem); line-height:.92;
      letter-spacing:-.04em; margin-bottom:.5rem;
    }
    .page-head h1 em {
      font-family:var(--font-serif); font-style:italic;
      color:var(--pulse); display:block;
    }
    .page-head .lead {
      max-width:55ch; margin-top:2rem; color:var(--ink-soft);
      font-size:clamp(1.05rem,1.3vw,1.2rem);
    }

    /* INTRO SPLIT — img + story */
    .intro-split { padding:clamp(3rem,6vw,6rem) 0; border-top:1px solid var(--line); }
    .intro-split .container { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
    @media (max-width:960px) { .intro-split .container { grid-template-columns:1fr; } }

    .intro-art {
      aspect-ratio:4/5; border-radius:20px; overflow:hidden;
      position:relative; background:var(--ink); color:var(--paper);
      display:grid; place-items:center;
    }
    .intro-art::before {
      content:""; position:absolute; inset:0;
      background:
        radial-gradient(circle at 20% 80%, rgba(232,86,63,.25), transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(185,209,196,.18), transparent 50%);
    }
    .intro-art::after {
      content:""; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(245,240,230,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,240,230,.06) 1px, transparent 1px);
      background-size:40px 40px;
    }
    .intro-art .big-num {
      position:absolute; top:2rem; left:2rem;
      font-family:var(--font-mono); font-size:.85rem; color:rgba(251,247,238,.6);
      letter-spacing:.15em;
    }
    .intro-art .big-year {
      font-family:var(--font-display); font-weight:200;
      font-variation-settings:"opsz" 144, "SOFT" 40;
      font-size:clamp(8rem, 20vw, 15rem); line-height:.8;
      letter-spacing:-.06em; position:relative; z-index:1;
    }
    .intro-art .caption {
      position:absolute; bottom:2rem; left:2rem;
      font-family:var(--font-serif); font-style:italic;
      font-size:1rem; opacity:.75; max-width:65%;
    }

    .intro-text h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(2rem,4vw,3.25rem);
      letter-spacing:-.03em; line-height:1.05; margin-bottom:2rem;
    }
    .intro-text h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .intro-text p { color:var(--ink-soft); margin-bottom:1.25rem; max-width:55ch; }
    .intro-text .callout {
      margin-top:2rem; padding:1.5rem;
      background:var(--paper); border-left:3px solid var(--pulse);
      font-family:var(--font-serif); font-style:italic; font-size:1.05rem;
      color:var(--ink); border-radius:0 10px 10px 0;
    }

    /* PILLARS (3 cards — Mission, Vision, Values) */
    .pillars { padding:clamp(3rem,6vw,6rem) 0; }
    .pillars .section-label {
      display:flex; align-items:baseline; justify-content:space-between;
      gap:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line);
      margin-bottom:3rem;
    }
    .pillars h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(1.75rem,3vw,2.5rem); letter-spacing:-.025em; line-height:1.05;
    }
    .pillar-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
    }
    @media (max-width:860px) { .pillar-grid { grid-template-columns:1fr; } }

    .pillar {
      padding:2rem; border:1px solid var(--line); border-radius:14px;
      background:var(--paper); position:relative; overflow:hidden;
      min-height:260px; display:flex; flex-direction:column;
    }
    .pillar .pn {
      font-family:var(--font-mono); font-size:.82rem; color:var(--muted);
      margin-bottom:1rem;
    }
    .pillar h3 {
      font-family:var(--font-display); font-weight:400;
      font-variation-settings:"opsz" 144;
      font-size:1.75rem; letter-spacing:-.015em; margin-bottom:.75rem;
    }
    .pillar h3 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .pillar p { color:var(--ink-soft); font-size:.95rem; flex-grow:1; }
    .pillar .big-letter {
      position:absolute; top:1rem; right:1.5rem;
      font-family:var(--font-display); font-weight:200;
      font-size:8rem; line-height:1; color:var(--ink);
      opacity:.05; pointer-events:none;
    }

    /* PORTFOLIO MIX */
    .portfolio { padding:clamp(3rem,6vw,6rem) 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .portfolio .heading {
      display:grid; grid-template-columns:1fr 1.5fr; gap:3rem;
      margin-bottom:3rem;
    }
    @media (max-width:860px) { .portfolio .heading { grid-template-columns:1fr; } }
    .portfolio h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(2rem,4.5vw,3.5rem);
      letter-spacing:-.03em; line-height:1.02;
    }
    .portfolio h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .portfolio .heading p { color:var(--ink-soft); max-width:50ch; }

    .portfolio-list {
      display:grid; grid-template-columns:1fr; gap:0;
      border-top:1px solid var(--line);
    }
    .portfolio-row {
      display:grid; grid-template-columns:80px 1.2fr 2fr auto;
      gap:2rem; padding:2rem 0; border-bottom:1px solid var(--line);
      align-items:center; transition:all .3s var(--ease);
    }
    .portfolio-row:hover { padding-left:1rem; background:var(--bone); }
    @media (max-width:780px) { .portfolio-row { grid-template-columns:auto 1fr; gap:1rem; padding:1.5rem 0; } .portfolio-row .p-desc { grid-column:1 / -1; } .portfolio-row .p-cta { grid-column:1 / -1; margin-top:.5rem; } }

    .portfolio-row .p-num {
      font-family:var(--font-mono); font-size:.82rem; color:var(--muted);
    }
    .portfolio-row .p-title {
      font-family:var(--font-display); font-weight:400;
      font-variation-settings:"opsz" 144;
      font-size:1.65rem; letter-spacing:-.015em; line-height:1.1;
    }
    .portfolio-row .p-title em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .portfolio-row .p-desc { color:var(--ink-soft); font-size:.95rem; }
    .portfolio-row .p-cta {
      display:inline-flex; align-items:center; gap:.5rem;
      font-family:var(--font-serif); font-style:italic; color:var(--pulse);
      font-size:.95rem;
    }
    .portfolio-row .p-cta svg { width:14px; height:14px; transition:transform .3s var(--ease); }
    .portfolio-row:hover .p-cta svg { transform:translateX(4px); }

    /* TIMELINE */
    .timeline { padding:clamp(4rem,7vw,6rem) 0; }
    .timeline .heading { text-align:center; margin-bottom:4rem; }
    .timeline h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(2rem,4.5vw,3.5rem); letter-spacing:-.03em;
    }
    .timeline h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }

    .timeline-track {
      display:grid; grid-template-columns:repeat(4,1fr); gap:0;
      position:relative; max-width:1100px; margin:0 auto;
    }
    @media (max-width:780px) { .timeline-track { grid-template-columns:1fr 1fr; } }
    @media (max-width:480px) { .timeline-track { grid-template-columns:1fr; } }

    .timeline-track::before {
      content:""; position:absolute; top:14px; left:6%; right:6%;
      height:1px; background:var(--line);
    }
    .tl-item {
      text-align:center; padding:0 1rem; position:relative; z-index:1;
    }
    .tl-dot {
      width:28px; height:28px; border-radius:50%;
      background:var(--paper); border:2px solid var(--ink);
      margin:0 auto 1.5rem; position:relative;
    }
    .tl-item.active .tl-dot { background:var(--pulse); border-color:var(--pulse); box-shadow:0 0 0 6px rgba(232,86,63,.15); }
    .tl-year {
      font-family:var(--font-display); font-weight:400;
      font-variation-settings:"opsz" 144;
      font-size:1.85rem; letter-spacing:-.02em; margin-bottom:.3rem;
    }
    .tl-label {
      font-size:.9rem; color:var(--muted); max-width:22ch; margin:0 auto;
    }
    .tl-item.active .tl-label { color:var(--ink); font-weight:500; }

    /* STATS STRIP */
    .stats { padding:clamp(3rem,5vw,4rem) 0; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
    .stats::before { content:"✚"; position:absolute; font-size:30rem; top:-5rem; right:-8rem; color:rgba(251,247,238,.03); font-weight:900; line-height:1; }
    .stats-grid {
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:clamp(1rem,3vw,3rem); position:relative; z-index:1;
    }
    @media (max-width:780px) { .stats-grid { grid-template-columns:repeat(2,1fr); gap:2rem; } }
    .stat-num {
      font-family:var(--font-display); font-weight:200;
      font-variation-settings:"opsz" 144, "SOFT" 30;
      font-size:clamp(3rem,5vw,4.5rem); line-height:1;
      letter-spacing:-.04em; margin-bottom:.35rem;
    }
    .stat-num sup { font-size:.4em; color:var(--pulse); font-family:var(--font-mono); font-weight:400; }
    .stat-label { font-size:.9rem; opacity:.75; max-width:30ch; }

    /* CTA */
    .cta-strip {
      padding:clamp(3rem,6vw,5rem) 0; background:var(--paper); border-top:1px solid var(--line);
    }
    .cta-strip .container { display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:center; }
    @media (max-width:860px) { .cta-strip .container { grid-template-columns:1fr; } }
    .cta-strip h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(1.75rem,3.5vw,2.75rem);
      letter-spacing:-.025em; line-height:1.05;
    }
    .cta-strip h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .cta-strip p { color:var(--ink-soft); margin-top:.75rem; max-width:50ch; }
    .btn-primary {
      display:inline-flex; align-items:center; gap:.8rem;
      background:var(--pulse); color:var(--paper);
      padding:1.05rem 1.9rem; border-radius:999px;
      font-weight:500; transition:all .3s var(--ease);
      box-shadow:0 12px 30px -10px rgba(232,86,63,.5);
    }
    .btn-primary:hover { transform:translateY(-2px); background:var(--pulse-deep); }
    .btn-primary svg { width:14px; height:14px; }

    /* FOOTER */
    footer.site-footer { background:var(--bone); padding:clamp(3rem,6vw,5rem) 0 2rem; border-top:1px solid var(--line); }
    .foot-top { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }
    @media (max-width:780px) { .foot-top { grid-template-columns:1fr 1fr; gap:2rem; } }
    .foot-brand p { font-size:.92rem; color:var(--muted); max-width:38ch; margin-top:1.25rem; }
    .foot-col h4 { font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:.95rem; color:var(--muted); margin-bottom:1.25rem; }
    .foot-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
    .foot-col a { font-size:.92rem; transition:color .2s var(--ease); }
    .foot-col a:hover { color:var(--pulse); }
    .foot-bottom { padding-top:2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
    .foot-bottom .credits em { font-family:var(--font-serif); color:var(--ink); font-style:italic; }

    .reveal { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
    .reveal.in { opacity:1; transform:translateY(0); }
  
    .nav-lang { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; cursor:pointer; margin-inline-start:.5rem; transition:all .3s var(--ease); }
    .nav-lang:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .nav-lang .active { color:var(--pulse); font-weight:600; }
    .nav-lang .slash { opacity:.4; }
      
    /* ============ MOBILE APP-LIKE LAYOUT ============ */
    .mobile-tabbar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(253, 251, 245, 0.95);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-top: 1px solid var(--line);
      padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
      z-index: 100;
      box-shadow: 0 -10px 30px -10px rgba(20, 37, 46, 0.1);
    }
    .mobile-tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 500px; margin: 0 auto; }
    .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; color: var(--muted); font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; position: relative; transition: color 0.2s var(--ease); }
    .mobile-tab svg { width: 22px; height: 22px; stroke-width: 1.8; stroke: currentColor; fill: none; transition: transform 0.3s var(--ease); }
    .mobile-tab.active { color: var(--pulse); }
    .mobile-tab.active svg { transform: scale(1.08); }
    .mobile-tab.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--pulse); border-radius: 0 0 2px 2px; }
    .mobile-tab.fab { margin-top: -28px; }
    .mobile-tab.fab .fab-inner { width: 52px; height: 52px; border-radius: 50%; background: var(--pulse); color: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 20px -4px rgba(221, 83, 64, 0.5); transition: transform 0.3s var(--ease); }
    .mobile-tab.fab:active .fab-inner { transform: scale(0.92); }
    .mobile-tab.fab svg { width: 22px; height: 22px; stroke: var(--paper); }
    .mobile-tab.fab::before { display: none; }
    @media (max-width: 780px) {
      .mobile-tabbar { display: block; }
      body { padding-bottom: 80px; }
    }
    @media (max-width: 780px) {
      header .container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
      .logo-img { width: 36px; height: 36px; }
      .logo-text { font-size: 1.1rem; }
      .logo-text small { display: none; }
      .header-cta { display: none !important; }
      .nav-lang { margin-inline-start: 0; padding: 5px 10px; font-size: 0.7rem; }
      .back-btn { display: none; }
    }

  
    /* ============ GLOBAL MOBILE HARDENING ============ */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    * { min-width: 0; }

    @media (max-width: 780px) {
      :root { --gutter: 1rem; }
      body { font-size: 15px; }
      .container { padding: 0 1rem; }
      h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }

      .hero .container,
      .sheet .container,
      .about-grid,
      .intro-split .container,
      .portfolio .heading,
      .contact-main .container,
      .feature-strip .container,
      .quote-cta .container,
      .cta-strip .container,
      .foot-top { grid-template-columns: 1fr !important; }

      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .stats-grid,
      .feature-grid { grid-template-columns: 1fr 1fr !important; }

      .rel-grid { grid-template-columns: 1fr 1fr !important; }
      .form-row { grid-template-columns: 1fr !important; }

      .marquee-strip { overflow: hidden !important; max-width: 100vw; }
      .marquee-track { font-size: 1.5rem !important; }

      .hero-visual { aspect-ratio: 3/2 !important; }
      .polaroid { padding: 8px 8px 26px !important; }
      .polaroid .caption { font-size: 0.6rem !important; padding: 6px 2px 0 !important; }

      .about-visual { aspect-ratio: 1/1 !important; }
      .brand-mark { width: 90% !important; }

      .section-divider .container { flex-direction: column; align-items: flex-start; gap: .75rem; }
      .section-divider .middle { font-size: 1rem !important; }
    }
    @media (max-width: 520px) {
      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .feature-grid { grid-template-columns: 1fr !important; }
      .rel-grid { grid-template-columns: 1fr !important; }
      .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem 1rem !important; }
      .stat-value { font-size: 3.25rem !important; }
      .hero-headline { font-size: 3.5rem !important; }
      .page-head h1, .cat-hero h1, .journal-head h1 { font-size: 2.75rem !important; }
    }

    /* ============ MOBILE DRAWER MENU ============ */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      background: var(--bone);
      z-index: 250;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
    }
    
    .mobile-drawer.open { transform: translateX(0) !important; }

    .drawer-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 0 2rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 2rem;
    }
    .drawer-head .logo { display: flex; align-items: center; gap: 0.6rem; }
    .drawer-head .logo img { width: 38px; height: 38px; }
    .drawer-head .logo span { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 1.2rem; }
    .drawer-close {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--paper);
      display: grid; place-items: center;
      cursor: pointer;
    }
    .drawer-close svg { width: 18px; height: 18px; stroke: var(--ink); }

    .drawer-nav { display: flex; flex-direction: column; margin-bottom: 2rem; }
    .drawer-nav a {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 1.25rem 0.5rem;
      font-family: var(--font-display);
      font-weight: 400; font-variation-settings: "opsz" 144;
      font-size: 1.75rem;
      letter-spacing: -0.015em;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      transition: color 0.25s ease;
    }
    .drawer-nav a .num {
      font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.2em;
      color: var(--muted); font-weight: 500;
    }
    .drawer-nav a:hover, .drawer-nav a.current { color: var(--pulse); }

    .drawer-foot { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .drawer-foot .lang {
      display: flex; gap: 0.5rem; padding: 0.35rem;
      background: var(--paper); border: 1px solid var(--line);
      border-radius: 999px; align-self: flex-start;
    }
    .drawer-foot .lang button {
      padding: 0.5rem 1.25rem; border-radius: 999px;
      font-family: var(--font-mono); font-size: 0.78rem;
      letter-spacing: 0.1em; color: var(--muted);
      border: 0; background: transparent; cursor: pointer;
      transition: all 0.25s ease;
    }
    .drawer-foot .lang button.active { background: var(--ink); color: var(--paper); }
    .drawer-foot .quote-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      padding: 1rem 1.5rem;
      background: var(--pulse); color: var(--paper);
      border-radius: 999px; font-weight: 500;
    }
    .drawer-foot .contact-mini {
      font-family: var(--font-serif); font-style: italic;
      font-size: 0.85rem; color: var(--muted);
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1rem 0.25rem; border-top: 1px solid var(--line);
    }
    .drawer-foot .contact-mini a { color: var(--ink); font-style: normal; font-family: var(--font-body); font-size: 0.9rem; }

    @media (max-width: 1024px) {
      .menu-toggle {
        display: inline-flex !important;
        width: 44px; height: 44px;
        border: 1px solid var(--line); border-radius: 50%;
        align-items: center; justify-content: center;
        flex-direction: column; gap: 5px;
        background: var(--paper); cursor: pointer;
      }
      .menu-toggle span {
        display: block; width: 18px; height: 1.5px;
        background: var(--ink);
      }
      header .container { grid-template-columns: auto 1fr auto !important; }
      .header-cta { padding: 0.55rem 1rem !important; font-size: 0.82rem !important; }
    }
    @media (max-width: 540px) { .header-cta { display: none !important; } }
    @media (min-width: 1025px) { .menu-toggle { display: none !important; } }

  
    /* ================================================================ */
    /* APP-MODE — phones (<=780px) feel like a native mobile app        */
    /* ================================================================ */
    @media (max-width: 780px) {
      /* Clean paper bg, no grid overlay */
      body {
        background: var(--paper) !important;
        background-image: none !important;
        padding-bottom: 92px !important;
      }

      /* Compact app header */
      header.site-header, header {
        background: var(--paper) !important;
        border-bottom: 1px solid var(--line);
      }
      header .container {
        padding: 0.75rem 1rem !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.75rem !important;
      }
      .logo-img { width: 32px !important; height: 32px !important; }
      .logo-text { font-size: 1rem !important; letter-spacing: -0.015em; }
      .logo-text small { display: none !important; }
      .header-cta, .nav-lang, nav.primary, .back-btn { display: none !important; }
      .menu-toggle {
        width: 40px !important; height: 40px !important;
        border: 1px solid var(--line) !important;
        background: var(--paper) !important;
      }

      /* ---- HERO ---- */
      .hero { padding: 1.5rem 0 2rem !important; }
      .hero .container { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
      .hero-text .eyebrow { font-size: 0.78rem !important; }
      .hero-headline {
        font-size: 3.25rem !important;
        line-height: 0.92 !important;
        margin: 0.5rem 0 1rem !important;
      }
      .hero-lead { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }
      .hero-ctas { gap: 0.6rem !important; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-ghost {
        flex: 1;
        padding: 0.9rem 1.2rem !important;
        font-size: 0.88rem !important;
        justify-content: center;
      }

      /* Hero polaroids → horizontal snap carousel */
      .hero-visual {
        aspect-ratio: auto !important;
        height: 280px !important;
        position: relative;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        display: flex !important;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero-visual::-webkit-scrollbar { display: none; }
      .polaroid {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        flex: 0 0 68%;
        width: 68% !important;
        scroll-snap-align: center;
        transform: rotate(0deg) !important;
        animation: none !important;
      }
      .polaroid.p1 { transform: rotate(-2deg) !important; }
      .polaroid.p2 { transform: rotate(1deg) !important; }
      .polaroid.p3 { transform: rotate(-1deg) !important; }
      .polaroid .caption { font-size: 0.66rem !important; }

      /* ---- SECTION DIVIDER ---- */
      .section-divider { padding: 1.25rem 0 !important; }
      .section-divider .container {
        flex-direction: column; align-items: flex-start;
        gap: 0.5rem !important;
      }
      .section-divider .left, .section-divider .right { font-size: 0.7rem !important; }
      .section-divider .middle { font-size: 1rem !important; }

      /* ---- STATS CARDS ---- */
      .stats-editorial { padding: 1.5rem 0 !important; }
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .stat-item {
        background: var(--bone);
        padding: 1.25rem 1rem;
        border-radius: 16px;
        border: 1px solid var(--line);
      }
      .stat-index { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }
      .stat-value {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
      }
      .stat-label { font-size: 0.78rem !important; line-height: 1.4 !important; }

      /* ---- MARQUEE ---- */
      .marquee-strip { padding: 1.25rem 0 !important; }
      .marquee-track { font-size: 1.35rem !important; gap: 1.5rem !important; }

      /* ---- ABOUT SECTION (APP) ---- */
      .about-section { padding: 2.5rem 0 !important; }
      .about-eyebrow {
        margin-bottom: 1.25rem !important;
        font-size: 0.7rem !important;
      }
      .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .about-visual {
        aspect-ratio: 5/4 !important;
        border-radius: 20px !important;
      }
      .brand-mark { width: 75% !important; }
      .about-headline {
        font-size: 1.85rem !important;
        line-height: 1.05 !important;
        margin-bottom: 1rem !important;
      }
      .about-para { font-size: 0.92rem !important; margin-bottom: 0.75rem !important; }

      /* Feature mini-cards */
      .feature-grid {
        grid-template-columns: 1fr 1fr !important;
        border-top: 0 !important;
        gap: 0.6rem !important;
        margin-top: 1.25rem !important;
      }
      .feature {
        padding: 1rem !important;
        background: var(--bone);
        border: 1px solid var(--line) !important;
        border-inline-start: 1px solid var(--line) !important;
        border-radius: 12px;
      }
      .feature h3 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
      .feature p { font-size: 0.76rem !important; line-height: 1.45 !important; }
      .feature-num { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }

      /* ---- SECTION LABELS ---- */
      .section-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 1.25rem !important;
      }
      .section-label h2 { font-size: 1.5rem !important; line-height: 1.1 !important; }
      .section-label .meta {
        margin-top: 0.25rem !important;
        gap: 0.75rem !important;
        font-size: 0.75rem;
      }

      /* ---- CATEGORIES — horizontal snap rail ---- */
      .categories { padding: 1.5rem 0 !important; overflow: hidden; }
      .cat-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        border: 0 !important;
        background: transparent !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .cat-grid::-webkit-scrollbar { display: none; }
      .cat-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        background: var(--bone) !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        padding: 1.5rem !important;
        min-height: 260px !important;
        aspect-ratio: auto !important;
        grid-column: auto !important;
      }
      .cat-card.is-cta { background: var(--ink) !important; color: var(--paper) !important; }
      .cat-card::before { display: none !important; }
      .cat-card::after { display: none !important; }
      .cat-title { font-size: 1.5rem !important; }
      .cat-desc { font-size: 0.85rem !important; max-width: none !important; }

      /* ---- PRODUCTS — larger 2-col cards ---- */
      .products { padding: 2rem 0 !important; }
      .prod-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .prod-card {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 16px !important;
      }
      .prod-info { padding: 0 0.15rem !important; }
      .prod-info h3 { font-size: 0.95rem !important; line-height: 1.1 !important; }
      .prod-info .prod-sub { font-size: 0.72rem !important; line-height: 1.35 !important; }
      .prod-tag {
        font-size: 0.58rem !important;
        top: 0.45rem !important;
        left: 0.45rem !important;
        padding: 0.18rem 0.5rem !important;
      }
      .prod-fav {
        width: 28px !important; height: 28px !important;
        top: 0.45rem !important; right: 0.45rem !important;
      }
      .prod-foot { padding-top: 0.5rem !important; }
      .prod-price .label { font-size: 0.6rem !important; }
      .prod-price .val { font-size: 0.7rem !important; }
      .prod-rfq {
        padding: 0.38rem 0.7rem !important;
        font-size: 0.66rem !important;
      }

      /* ---- MANIFESTO ---- */
      .manifesto { padding: 2.5rem 0 !important; }
      .manifesto blockquote { font-size: 1.5rem !important; line-height: 1.2 !important; }

      /* ---- JOURNAL — horizontal snap rail ---- */
      .journal-preview { padding: 2rem 0 !important; overflow: hidden; }
      .journal-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .journal-grid::-webkit-scrollbar { display: none; }
      .j-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
        padding: 1rem !important;
        border-radius: 18px !important;
      }
      .j-title { font-size: 1.15rem !important; }
      .j-excerpt { font-size: 0.82rem !important; }

      /* ---- QUOTE CTA ---- */
      .quote-cta { padding: 2.5rem 0 !important; }
      .quote-cta .container { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
      .quote-cta h2 { font-size: 1.6rem !important; line-height: 1.1 !important; }
      .quote-cta p { font-size: 0.9rem !important; }
      .quote-cta-box { padding: 1.25rem !important; }

      /* ---- FOOTER COMPACT ---- */
      footer.site-footer { padding: 2rem 0 4rem !important; }
      .foot-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding-bottom: 1.5rem !important; }
      .foot-brand { grid-column: 1 / -1; }
      .foot-brand p { font-size: 0.82rem !important; }
      .foot-col h4 { font-size: 0.85rem !important; margin-bottom: 0.75rem !important; }
      .foot-col a, .foot-col li { font-size: 0.82rem !important; }
      .foot-bottom { font-size: 0.72rem !important; }

      /* ---- MODAL → BOTTOM SHEET ---- */
      .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
      }
      .modal {
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important;
        max-width: 100% !important;
        padding: 1.5rem 1.25rem 2rem !important;
        transform: translateY(100%) !important;
      }
      .modal-backdrop.open .modal { transform: translateY(0) !important; }
      .modal::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: var(--muted);
        border-radius: 2px;
        margin: 0 auto 1.25rem;
        opacity: 0.35;
      }
      .modal h3 { font-size: 1.35rem !important; }
      .modal .sub { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
      .field input, .field textarea, .field select {
        padding: 0.8rem 0.9rem !important;
        font-size: 16px !important; /* prevent iOS zoom */
      }

      /* ---- PAGE HEADINGS on inner pages ---- */
      .page-head { padding: 2rem 0 1.5rem !important; }
      .page-head h1 { font-size: 2.5rem !important; line-height: 1 !important; }
      .page-head .meta { margin-bottom: 1.25rem !important; font-size: 0.78rem !important; }
      .page-head .lead { font-size: 0.95rem !important; margin-top: 1rem !important; }

      .cat-hero { padding: 1.5rem 0 1.5rem !important; }
      .cat-hero .grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding-bottom: 1.25rem !important; }
      .cat-hero h1 { font-size: 2.75rem !important; }
      .cat-hero .desc { font-size: 0.9rem !important; }

      .journal-head { padding: 2rem 0 1.5rem !important; }
      .journal-head h1 { font-size: 2.5rem !important; }
      .journal-head .lead { font-size: 0.95rem !important; }

      /* Toolbar on category/shop → horizontal scroll chips */
      .toolbar, .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
        margin-bottom: 1rem !important;
      }
      .toolbar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
      .filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
      }
      .filter-chips::-webkit-scrollbar { display: none; }
      .chip { white-space: nowrap; flex-shrink: 0; }

      /* Featured article on blog page stacks cleanly */
      .featured-card { padding: 1rem !important; gap: 1rem !important; border-radius: 18px !important; }
      .featured-media { aspect-ratio: 4/3 !important; padding: 1.25rem !important; }
      .featured-info h2 { font-size: 1.5rem !important; }

      .articles-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .article-card { padding-bottom: 1.5rem !important; }

      /* Article reader page */
      .article-hero { padding: 1.5rem 0 2rem !important; }
      .article-hero h1 { font-size: 2.25rem !important; }
      .article-hero .excerpt { font-size: 1rem !important; }
      .article-hero .byline { padding: 0.75rem 1.25rem !important; font-size: 0.78rem !important; gap: 0.5rem !important; flex-wrap: wrap; justify-content: center; }
      .cover-frame { aspect-ratio: 3/2 !important; padding: 1.25rem !important; border-radius: 16px !important; }
      .article-body { font-size: 1rem !important; padding: 0 1rem clamp(2.5rem, 5vw, 4rem) !important; }
      .article-body p:first-of-type::first-letter { font-size: 3.5rem !important; }

      /* Hide cluttered parts on the hero */
      .editor-note { display: none !important; }

      /* Sheet on product page */
      .sheet { padding: 1rem 0 3rem !important; }
      .sheet .container { gap: 1.5rem !important; }
      .gallery { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .thumbs { flex-direction: row !important; overflow-x: auto; gap: 0.5rem; scrollbar-width: none; }
      .thumbs::-webkit-scrollbar { display: none; }
      .thumb { width: 64px !important; }
      .info h1 { font-size: 2.25rem !important; }
      .info .sub { font-size: 1.05rem !important; }
      .spec-grid { grid-template-columns: 1fr 1fr !important; }
      .spec { padding: 0.75rem 0.85rem !important; }
      .spec .v { font-size: 0.85rem !important; }
      .spec .v.num { font-size: 1.2rem !important; }
      .actions { border-radius: 16px !important; padding: 1rem !important; bottom: 100px !important; }
      .actions .note strong { font-size: 1rem !important; }
      .actions .note small { font-size: 0.72rem !important; }

      /* Contact page */
      .info-card { padding: 1.1rem !important; grid-template-columns: 42px 1fr auto !important; gap: 0.85rem !important; }
      .info-card .ico { width: 42px !important; height: 42px !important; }
      .info-card .v { font-size: 0.88rem !important; }
      .info-card .k { font-size: 0.72rem !important; }
      .contact-form { padding: 1.5rem 1.25rem !important; border-radius: 18px !important; position: static !important; }
      .map-frame { aspect-ratio: 3/4 !important; border-radius: 16px !important; }
      .map-overlay { max-width: calc(100% - 3rem) !important; padding: 1rem 1.25rem !important; }

      /* About page */
      .intro-art { aspect-ratio: 5/4 !important; border-radius: 18px !important; }
      .intro-text h2 { font-size: 1.75rem !important; }
      .intro-text .callout { padding: 1.1rem !important; font-size: 0.95rem !important; }
      .pillars { padding: 2rem 0 !important; }
      .pillar-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .pillar { padding: 1.5rem !important; min-height: auto !important; border-radius: 16px !important; }
      .pillar h3 { font-size: 1.4rem !important; }
      .pillar p { font-size: 0.88rem !important; }
      .pillar .big-letter { font-size: 5rem !important; }
      .portfolio { padding: 2rem 0 !important; }
      .portfolio .heading { grid-template-columns: 1fr !important; gap: 1rem !important; }
      .portfolio h2 { font-size: 1.75rem !important; }
      .portfolio-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: 1.25rem 0 !important; }
      .portfolio-row .p-title { font-size: 1.25rem !important; }
      .portfolio-row .p-desc { font-size: 0.85rem !important; }
      .timeline { padding: 2rem 0 !important; }
      .timeline-track { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .timeline-track::before { display: none !important; }
      .tl-year { font-size: 1.5rem !important; }
      .tl-label { font-size: 0.78rem !important; }
      .stats { padding: 2rem 0 !important; }
      .stats .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .stats .stat-num { font-size: 2.25rem !important; }
      .stats .stat-label { font-size: 0.78rem !important; }

      /* Pagination / buttons on category */
      .pagination { margin-top: 2rem !important; gap: 0.4rem !important; }
      .pagination button { min-width: 36px !important; height: 36px !important; font-size: 0.85rem !important; }

      /* Related card on product page */
      .rel-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
      .rel-card { padding: 0.75rem !important; border-radius: 14px !important; }
      .rel-card h3 { font-size: 0.95rem !important; }
      .rel-card p { font-size: 0.75rem !important; }

      /* CTA strips */
      .cta-strip { padding: 2rem 0 !important; }
      .cta-strip h2 { font-size: 1.5rem !important; }
    }

    /* Smaller phones */
    @media (max-width: 400px) {
      .hero-headline { font-size: 2.75rem !important; }
      .polaroid { flex: 0 0 78% !important; }
      .cat-card { flex: 0 0 88% !important; }
      .j-card { flex: 0 0 90% !important; }
    }

  
    /* Hamburger must sit in the far-right cell of header grid */
    @media (max-width: 1024px) {
      header .container {
        grid-template-columns: auto 1fr auto auto !important;
      }
      .menu-toggle {
        justify-self: end;
        grid-column: -1 !important;
      }
    }

/* ===== contact.html ===== */
* { box-sizing:border-box; margin:0; padding:0; }
    html, body { overflow-x:hidden; max-width:100vw; }
    body {
      background:var(--bone); color:var(--ink);
      font-family:var(--font-body); font-weight:450; line-height:1.7;
      -webkit-font-smoothing:antialiased;
      background-image: linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
      background-size:120px 120px;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    img, svg { display:block; max-width:100%; }
    .container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    /* Header */
    header.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bone) 92%, transparent); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); color:var(--ink); }
    header .container { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:2rem; padding:1rem var(--gutter); }
    .logo { display:flex; align-items:center; gap:.8rem; }
    .logo-img { width:44px; height:44px; object-fit:contain; }
    .logo-text { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.3rem; letter-spacing:-.02em; }
    nav.primary { display:flex; justify-content:center; align-items:center; gap:clamp(1rem,2vw,2rem); font-weight:500; font-size:.92rem; }
    nav.primary > a { position:relative; padding:.4rem 0; transition:color .25s var(--ease); }
    nav.primary > a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--pulse); transition:width .3s var(--ease); }
    nav.primary > a:hover, nav.primary > a.current { color:var(--pulse-deep); }
    nav.primary > a:hover::after, nav.primary > a.current::after { width:100%; }
    .header-cta { display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); padding:.75rem 1.3rem; border-radius:999px; font-weight:500; font-size:.92rem; transition:background .3s var(--ease); }
    .header-cta:hover { background:var(--pulse); }
    .header-cta svg { width:14px; height:14px; }
    .menu-toggle { display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:var(--paper); cursor:pointer; }
    .menu-toggle span { display:block; width:18px; height:1.5px; background:var(--ink); }
    @media (max-width:1024px) { nav.primary { display:none; } .menu-toggle { display:inline-flex; } .header-cta > span { display:none; } .header-cta { padding:.55rem 1rem; } }
    @media (max-width:540px) { .header-cta { display:none !important; } header .container { grid-template-columns:auto 1fr auto; } }

    /* Page Head */
    .page-head { padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); }
    .page-head .meta { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:2rem; font-size:.85rem; color:var(--muted); flex-wrap:wrap; }
    .breadcrumb a:hover { color:var(--pulse); }
    .breadcrumb .sep { margin:0 .5rem; opacity:.5; }
    .eyebrow { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.22em; color:var(--pulse); text-transform:uppercase; display:inline-flex; align-items:center; gap:.6rem; }
    .eyebrow::before { content:""; width:36px; height:1px; background:var(--pulse); }
    .page-head h1 { font-family:var(--font-display); font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 0; font-size:clamp(3rem,7vw,6.5rem); line-height:.95; letter-spacing:-.04em; }
    .page-head h1 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); display:block; }
    .page-head .lead { max-width:55ch; margin-top:1.5rem; color:var(--ink-soft); font-size:clamp(1rem,1.2vw,1.15rem); }

    /* Contact Main — 2 col split */
    .contact-main { padding:clamp(2rem,4vw,3rem) 0 clamp(4rem,7vw,6rem); }
    .contact-main .container { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(2rem,4vw,3.5rem); }
    @media (max-width:960px) { .contact-main .container { grid-template-columns:1fr; } }

    /* Info Stack */
    .info-stack { display:flex; flex-direction:column; gap:1rem; }
    .info-card { display:grid; grid-template-columns:48px 1fr auto; gap:1.25rem; align-items:center; padding:1.5rem; border:1px solid var(--line); border-radius:14px; background:var(--paper); transition:all .3s var(--ease); }
    .info-card:hover { border-color:var(--ink); transform:translateX(4px); box-shadow:0 15px 30px -20px rgba(20,37,46,.25); }
    .info-card .ico { width:48px; height:48px; border-radius:50%; background:var(--bone); display:grid; place-items:center; transition:all .3s var(--ease); }
    .info-card:hover .ico { background:var(--pulse); color:var(--paper); }
    .info-card .ico svg { width:20px; height:20px; }
    .info-card .k { font-family:var(--font-serif); font-style:italic; font-size:.82rem; color:var(--muted); margin-bottom:.2rem; }
    .info-card .v { font-family:var(--font-body); font-weight:500; font-size:1rem; }
    .info-card .v.mono { font-family:var(--font-mono); }
    .info-card .act { font-family:var(--font-serif); font-style:italic; color:var(--pulse); font-size:.9rem; white-space:nowrap; }

    /* Hours Card */
    .hours-card { padding:1.75rem; background:var(--ink); color:var(--paper); border-radius:14px; position:relative; overflow:hidden; }
    .hours-card::before { content:"⏱"; position:absolute; font-size:12rem; top:-3rem; right:-3rem; opacity:.05; }
    .hours-card h3 { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.35rem; margin-bottom:1.25rem; letter-spacing:-.01em; }
    .hours-card h3 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .hours-row { display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid rgba(251,247,234,.12); font-size:.95rem; }
    .hours-row:last-child { border-bottom:0; }
    .hours-row .day { opacity:.75; }
    .hours-row .time { font-family:var(--font-mono); font-size:.9rem; }
    .hours-row.closed .time { color:var(--pulse); }

    /* Contact Form */
    .contact-form { padding:clamp(1.75rem,3vw,2.5rem); border:1px solid var(--line); border-radius:18px; background:var(--paper); position:sticky; top:100px; align-self:start; }
    .contact-form h2 { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:clamp(1.75rem,2.8vw,2.25rem); letter-spacing:-.02em; margin-bottom:.3rem; }
    .contact-form h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .contact-form .sub { font-family:var(--font-serif); font-style:italic; color:var(--muted); margin-bottom:2rem; }
    .form-grid { display:grid; gap:1rem; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    @media (max-width:520px) { .form-row { grid-template-columns:1fr; } }
    .field label { display:block; font-size:.8rem; font-weight:500; color:var(--muted); margin-bottom:.35rem; }
    .field input, .field textarea, .field select { width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--bone); font:inherit; color:var(--ink); transition:border-color .2s var(--ease); }
    .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--ink); }
    .field textarea { min-height:120px; resize:vertical; }
    .btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; background:var(--pulse); color:var(--paper); padding:1.05rem 1.9rem; border-radius:999px; font-weight:500; transition:all .3s var(--ease); box-shadow:0 12px 30px -10px rgba(221,83,64,.5); width:100%; margin-top:.5rem; }
    .btn-primary:hover { transform:translateY(-2px); background:var(--pulse-deep); }
    .btn-primary svg { width:14px; height:14px; }

    /* Departments */
    .depts { padding:clamp(4rem,6vw,5rem) 0; }
    .depts-head { display:flex; justify-content:space-between; align-items:baseline; gap:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
    .depts-head h2 { font-family:var(--font-display); font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 0; font-size:clamp(1.75rem,3vw,2.5rem); letter-spacing:-.025em; }
    .depts-head h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .dept-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
    @media (max-width:860px) { .dept-grid { grid-template-columns:1fr; } }
    .dept { padding:2rem; border:1px solid var(--line); border-radius:14px; background:var(--paper); transition:all .3s var(--ease); }
    .dept:hover { border-color:var(--ink); transform:translateY(-3px); }
    .dept .dn { font-family:var(--font-mono); font-size:.82rem; color:var(--muted); margin-bottom:.75rem; letter-spacing:.1em; }
    .dept h3 { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.45rem; letter-spacing:-.015em; margin-bottom:.5rem; }
    .dept h3 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .dept p { font-size:.92rem; color:var(--muted); margin-bottom:1.25rem; }
    .dept a { font-family:var(--font-mono); font-size:.88rem; color:var(--ink); display:block; padding:.3rem 0; }
    .dept a:hover { color:var(--pulse); }

    /* Map */
    .map-sec { padding:clamp(3rem,5vw,4rem) 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .map-head { display:flex; justify-content:space-between; align-items:baseline; gap:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
    .map-head h2 { font-family:var(--font-display); font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 0; font-size:clamp(1.75rem,3vw,2.5rem); letter-spacing:-.025em; }
    .map-head h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .map-frame { border-radius:18px; overflow:hidden; aspect-ratio:21/9; border:1px solid var(--line); position:relative; background:var(--ink); }
    @media (max-width:780px) { .map-frame { aspect-ratio:4/3; } }
    .map-frame iframe { width:100%; height:100%; border:0; filter:grayscale(.2) contrast(.95); }
    .map-overlay { position:absolute; top:1.5rem; left:1.5rem; background:var(--paper); padding:1.25rem 1.5rem; border-radius:12px; max-width:320px; box-shadow:0 20px 40px -20px rgba(20,37,46,.3); }
    .map-overlay strong { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; display:block; font-size:1.1rem; letter-spacing:-.01em; margin-bottom:.3rem; }
    .map-overlay small { color:var(--muted); font-size:.88rem; display:block; margin-bottom:.75rem; }
    .map-overlay a { font-family:var(--font-serif); font-style:italic; color:var(--pulse); font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem; }
    .map-overlay a svg { width:12px; height:12px; }

    /* Footer */
    footer.site-footer { background:var(--bone); padding:clamp(3rem,6vw,5rem) 0 2rem; border-top:1px solid var(--line); }
    .foot-top { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }
    @media (max-width:780px) { .foot-top { grid-template-columns:1fr 1fr; gap:2rem; } }
    .foot-brand p { font-size:.92rem; color:var(--muted); max-width:38ch; margin-top:1.25rem; }
    .foot-col h4 { font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:.95rem; color:var(--muted); margin-bottom:1.25rem; }
    .foot-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
    .foot-col a { font-size:.92rem; }
    .foot-col a:hover { color:var(--pulse); }
    .foot-bottom { padding-top:2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
    .foot-bottom .credits em { font-family:var(--font-serif); color:var(--ink); font-style:italic; }

    /* Mobile */
    @media (max-width:780px) {
      body { padding-bottom:92px; }
      :root { --gutter:1rem; }
      .page-head h1 { font-size:2.75rem !important; }
      .info-card { padding:1rem; grid-template-columns:42px 1fr auto; gap:.75rem; }
      .info-card .ico { width:42px; height:42px; }
      .info-card .v { font-size:.88rem; }
      .contact-form { padding:1.5rem 1.25rem; border-radius:16px; position:static; }
      .map-overlay { max-width:calc(100% - 3rem); padding:1rem 1.25rem; }
      .dept-grid { grid-template-columns:1fr; }
      .logo-img { width:32px; height:32px; }
      .logo-text { font-size:1rem; }
      .foot-top { grid-template-columns:1fr 1fr; gap:1.5rem; }
      .foot-brand { grid-column:1 / -1; }
    }

    /* Mobile drawer */
    .mobile-drawer { position:fixed; inset:0; background:var(--bone); z-index:250; transform:translateX(100%); transition:transform .4s var(--ease); overflow-y:auto; display:flex; flex-direction:column; padding:1.25rem; }
    .mobile-drawer.open { transform:translateX(0); }
    .drawer-head { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0 2rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
    .drawer-head .logo img { width:38px; height:38px; }
    .drawer-head .logo span { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.2rem; }
    .drawer-close { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:grid; place-items:center; cursor:pointer; }
    .drawer-close svg { width:18px; height:18px; stroke:var(--ink); }
    .drawer-nav { display:flex; flex-direction:column; margin-bottom:2rem; }
    .drawer-nav a { display:flex; align-items:baseline; justify-content:space-between; padding:1.25rem .5rem; font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.75rem; color:var(--ink); border-bottom:1px solid var(--line); }
    .drawer-nav a.current { color:var(--pulse); }
    .drawer-nav a .num { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--muted); }
    .drawer-foot { margin-top:auto; padding-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
    .drawer-foot .quote-btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:1rem 1.5rem; background:var(--pulse); color:var(--paper); border-radius:999px; font-weight:500; }
    .drawer-foot .contact-mini { font-family:var(--font-serif); font-style:italic; font-size:.85rem; color:var(--muted); display:flex; flex-direction:column; gap:.35rem; padding:1rem .25rem; border-top:1px solid var(--line); }
    .drawer-foot .contact-mini a { color:var(--ink); font-style:normal; font-family:var(--font-body); font-size:.9rem; }

    /* Mobile Tab Bar */
    .mobile-tabbar { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(253,251,245,.95); backdrop-filter:blur(20px); border-top:1px solid var(--line); padding:.5rem 0 max(.5rem, env(safe-area-inset-bottom)); z-index:100; }
    .mobile-tabbar nav { display:grid; grid-template-columns:repeat(5,1fr); max-width:500px; margin:0 auto; }
    .mobile-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; color:var(--muted); font-size:.62rem; letter-spacing:.08em; font-weight:500; text-transform:uppercase; position:relative; }
    .mobile-tab svg { width:22px; height:22px; stroke-width:1.8; stroke:currentColor; fill:none; }
    .mobile-tab.active { color:var(--pulse); }
    .mobile-tab.active::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:24px; height:2px; background:var(--pulse); }
    .mobile-tab.fab { margin-top:-28px; }
    .mobile-tab.fab .fab-inner { width:52px; height:52px; border-radius:50%; background:var(--pulse); color:var(--paper); display:grid; place-items:center; box-shadow:0 8px 20px -4px rgba(221,83,64,.5); }
    .mobile-tab.fab svg { width:22px; height:22px; stroke:var(--paper); }
    .mobile-tab.fab::before { display:none; }
    @media (max-width:780px) { .mobile-tabbar { display:block; } }

/* ===== blog.html ===== */
* { box-sizing:border-box; margin:0; padding:0; }
    body {
      background-color:var(--bone); color:var(--ink);
      font-family:var(--font-body); font-weight:450; line-height:1.7;
      -webkit-font-smoothing:antialiased; overflow-x:hidden;
      background-image: linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
      background-size:120px 120px;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    img, svg { display:block; max-width:100%; }
    .container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    /* HEADER */
    header { position:sticky; top:0; z-index:50; background:rgba(247,243,234,.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); }
    header .container { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:1rem var(--gutter); }
    .logo { display:flex; align-items:center; gap:.8rem; }
    .logo-img { width:44px; height:44px; object-fit:contain; }
    .logo-text { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.3rem; letter-spacing:-.02em; }
    nav.primary { display:flex; justify-content:center; align-items:center; gap:clamp(1rem,2vw,2rem); font-weight:500; font-size:.92rem; }
    nav.primary > a { position:relative; padding:.4rem 0; transition:color .25s var(--ease); }
    nav.primary > a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--pulse); transition:width .3s var(--ease); }
    nav.primary > a:hover, nav.primary > a.current { color:var(--pulse-deep); }
    nav.primary > a:hover::after, nav.primary > a.current::after { width:100%; }
    .nav-lang { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; cursor:pointer; margin-inline-start:.5rem; transition:all .3s var(--ease); }
    .nav-lang:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .nav-lang .active { color:var(--pulse); font-weight:600; }
    .nav-lang .slash { opacity:.4; }
    .header-cta { display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); padding:.75rem 1.3rem; border-radius:999px; font-weight:500; font-size:.92rem; transition:background .3s var(--ease); }
    .header-cta:hover { background:var(--pulse); }
    .header-cta svg { width:14px; height:14px; }
    @media (max-width:1024px) { nav.primary { display:none; } .header-cta > span { display:none; } .header-cta { padding:.55rem 1rem; } }

    /* PAGE HEAD */
    .journal-head { padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5rem); }
    .journal-head .meta {
      display:flex; justify-content:space-between; align-items:center; gap:1rem;
      margin-bottom:2rem; font-size:.85rem; color:var(--muted); flex-wrap:wrap;
    }
    .eyebrow { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.22em; color:var(--pulse); text-transform:uppercase; display:inline-flex; align-items:center; gap:.6rem; }
    .eyebrow::before { content:""; width:36px; height:1px; background:var(--pulse); }

    .journal-head h1 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(3rem,7vw,7rem); line-height:.95;
      letter-spacing:-.04em; max-width:14ch;
    }
    .journal-head h1 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); display:block; }
    .journal-head .lead { max-width:55ch; margin-top:1.5rem; color:var(--ink-soft); font-size:clamp(1rem,1.2vw,1.15rem); }

    /* Featured article (hero card) */
    .featured {
      padding:0 0 clamp(3rem,5vw,4rem);
    }
    .featured-card {
      display:grid; grid-template-columns:1.2fr 1fr;
      gap:clamp(2rem,4vw,3.5rem);
      padding:clamp(1.5rem,3vw,2.5rem);
      border:1px solid var(--line);
      border-radius:18px;
      background:var(--paper);
      align-items:stretch;
      transition:all .4s var(--ease);
      cursor:pointer;
    }
    .featured-card:hover { box-shadow:0 30px 60px -30px rgba(20,37,46,.25); transform:translateY(-3px); border-color:var(--ink); }
    @media (max-width:860px) { .featured-card { grid-template-columns:1fr; } }

    .featured-media {
      background:var(--bone);
      border-radius:12px;
      aspect-ratio:4/3;
      display:grid; place-items:center;
      padding:2rem;
      position:relative;
      overflow:hidden;
    }
    .featured-media::before {
      content:""; position:absolute; inset:0;
      background-image: radial-gradient(circle at center, rgba(20,37,46,0.06) 1px, transparent 1.1px);
      background-size:18px 18px;
    }
    .featured-media img {
      max-width:60%; max-height:60%; object-fit:contain; position:relative;
      filter:drop-shadow(0 20px 30px rgba(20,37,46,.15));
    }
    .featured-badge {
      position:absolute;
      top:1rem; left:1rem;
      background:var(--pulse); color:var(--paper);
      padding:.3rem .75rem;
      border-radius:999px;
      font-family:var(--font-mono); font-size:.68rem;
      letter-spacing:.2em; font-weight:500;
      text-transform:uppercase;
    }

    .featured-info {
      display:flex; flex-direction:column; justify-content:center;
    }
    .featured-info .category {
      font-family:var(--font-mono); font-size:.72rem;
      letter-spacing:.2em; color:var(--pulse); text-transform:uppercase;
      margin-bottom:1rem;
    }
    .featured-info .category::before { content:"— "; }
    .featured-info h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(1.75rem,3.2vw,2.75rem); line-height:1.02;
      letter-spacing:-.025em; margin-bottom:1rem;
    }
    .featured-info h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .featured-info .excerpt { color:var(--ink-soft); max-width:52ch; margin-bottom:1.5rem; }
    .featured-info .byline {
      display:flex; align-items:center; gap:.8rem;
      font-size:.85rem; color:var(--muted);
      padding-top:1.25rem; border-top:1px solid var(--line);
      margin-top:auto;
    }
    .featured-info .byline .author { font-weight:500; color:var(--ink); }
    .featured-info .byline .sep { opacity:.4; }
    .featured-info .byline .mono { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; }

    /* Filter bar */
    .filter-bar {
      display:flex; align-items:center; gap:1rem;
      padding:1.25rem 0;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      margin-bottom:3rem;
      flex-wrap:wrap;
    }
    .filter-bar .label {
      font-family:var(--font-mono); font-size:.72rem;
      letter-spacing:.2em; color:var(--muted); text-transform:uppercase;
    }
    .chip { padding:.45rem 1rem; border-radius:99px; border:1px solid var(--line); background:var(--paper); font-size:.85rem; cursor:pointer; transition:all .25s var(--ease); }
    .chip.active, .chip:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }

    /* Articles grid */
    .articles-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:2rem;
      padding-bottom:clamp(4rem,7vw,6rem);
    }
    @media (max-width:960px) { .articles-grid { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:540px) { .articles-grid { grid-template-columns:1fr; } }

    .article-card {
      display:flex; flex-direction:column;
      gap:1.25rem;
      padding-bottom:2rem;
      border-bottom:1px solid var(--line);
      cursor:pointer;
      transition:all .35s var(--ease);
    }
    .article-card:hover .article-title { color:var(--pulse-deep); }
    .article-card:hover .article-media img { transform:scale(1.04); }
    .article-media {
      aspect-ratio:4/3;
      background:var(--paper);
      border-radius:12px;
      display:grid; place-items:center;
      padding:2rem;
      overflow:hidden;
      border:1px solid var(--line);
    }
    .article-media img {
      max-width:60%; max-height:60%; object-fit:contain;
      transition:transform .5s var(--ease);
      filter:drop-shadow(0 15px 20px rgba(20,37,46,.1));
    }
    .article-card .category {
      font-family:var(--font-mono); font-size:.7rem;
      letter-spacing:.2em; color:var(--pulse); text-transform:uppercase;
    }
    .article-card .category::before { content:"— "; }
    .article-title {
      font-family:var(--font-display); font-weight:400;
      font-variation-settings:"opsz" 144;
      font-size:1.4rem; line-height:1.15; letter-spacing:-.02em;
      transition:color .3s var(--ease);
    }
    .article-excerpt { color:var(--muted); font-size:.92rem; line-height:1.55; }
    .article-byline {
      display:flex; align-items:center; gap:.7rem;
      font-size:.78rem; color:var(--muted);
      padding-top:.75rem; border-top:1px solid var(--line);
      margin-top:auto;
    }
    .article-byline .author { color:var(--ink); font-weight:500; }
    .article-byline .sep { opacity:.4; }
    .article-byline .time { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; }

    /* Newsletter strip */
    .newsletter-strip {
      background:var(--ink); color:var(--paper);
      padding:clamp(3rem,5vw,4rem) 0;
      position:relative; overflow:hidden;
    }
    .newsletter-strip::before {
      content:"✚"; position:absolute;
      font-size:25rem; top:-5rem; right:-4rem;
      color:rgba(251,247,234,.04); font-weight:100; line-height:1;
    }
    .newsletter-strip .container {
      display:grid; grid-template-columns:1.3fr 1fr;
      gap:3rem; align-items:center;
      position:relative; z-index:1;
    }
    @media (max-width:860px) { .newsletter-strip .container { grid-template-columns:1fr; } }
    .newsletter-strip h2 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(1.75rem,3.5vw,2.75rem); letter-spacing:-.025em; line-height:1.05;
    }
    .newsletter-strip h2 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .newsletter-strip p { opacity:.75; margin-top:.75rem; max-width:50ch; }

    .news-form {
      display:flex; gap:.5rem;
      padding:.35rem;
      background:rgba(251,247,234,.08);
      border:1px solid rgba(251,247,234,.2);
      border-radius:999px;
      backdrop-filter:blur(10px);
    }
    .news-form input {
      flex:1; background:none; border:0;
      padding:.85rem 1.25rem;
      font:inherit; color:var(--paper);
      outline:none;
    }
    .news-form input::placeholder { color:rgba(251,247,234,.45); }
    .news-form button {
      background:var(--pulse); color:var(--paper);
      padding:.85rem 1.5rem; border-radius:999px;
      font-weight:500; font-size:.9rem;
      transition:background .3s var(--ease);
    }
    .news-form button:hover { background:var(--pulse-deep); }

    /* FOOTER */
    footer.site-footer { background:var(--bone); padding:clamp(3rem,6vw,5rem) 0 2rem; border-top:1px solid var(--line); }
    .foot-top { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }
    @media (max-width:780px) { .foot-top { grid-template-columns:1fr 1fr; gap:2rem; } }
    .foot-brand p { font-size:.92rem; color:var(--muted); max-width:38ch; margin-top:1.25rem; }
    .foot-col h4 { font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:.95rem; color:var(--muted); margin-bottom:1.25rem; }
    .foot-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
    .foot-col a { font-size:.92rem; }
    .foot-col a:hover { color:var(--pulse); }
    .foot-bottom { padding-top:2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
    .foot-bottom .credits em { font-family:var(--font-serif); color:var(--ink); font-style:italic; }
  
    /* ============ MOBILE APP-LIKE LAYOUT ============ */
    .mobile-tabbar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(253, 251, 245, 0.95);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-top: 1px solid var(--line);
      padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
      z-index: 100;
      box-shadow: 0 -10px 30px -10px rgba(20, 37, 46, 0.1);
    }
    .mobile-tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 500px; margin: 0 auto; }
    .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; color: var(--muted); font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; position: relative; transition: color 0.2s var(--ease); }
    .mobile-tab svg { width: 22px; height: 22px; stroke-width: 1.8; stroke: currentColor; fill: none; transition: transform 0.3s var(--ease); }
    .mobile-tab.active { color: var(--pulse); }
    .mobile-tab.active svg { transform: scale(1.08); }
    .mobile-tab.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--pulse); border-radius: 0 0 2px 2px; }
    .mobile-tab.fab { margin-top: -28px; }
    .mobile-tab.fab .fab-inner { width: 52px; height: 52px; border-radius: 50%; background: var(--pulse); color: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 20px -4px rgba(221, 83, 64, 0.5); transition: transform 0.3s var(--ease); }
    .mobile-tab.fab:active .fab-inner { transform: scale(0.92); }
    .mobile-tab.fab svg { width: 22px; height: 22px; stroke: var(--paper); }
    .mobile-tab.fab::before { display: none; }
    @media (max-width: 780px) {
      .mobile-tabbar { display: block; }
      body { padding-bottom: 80px; }
    }
    @media (max-width: 780px) {
      header .container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
      .logo-img { width: 36px; height: 36px; }
      .logo-text { font-size: 1.1rem; }
      .logo-text small { display: none; }
      .header-cta { display: none !important; }
      .nav-lang { margin-inline-start: 0; padding: 5px 10px; font-size: 0.7rem; }
      .back-btn { display: none; }
    }

  
    /* ============ GLOBAL MOBILE HARDENING ============ */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    * { min-width: 0; }

    @media (max-width: 780px) {
      :root { --gutter: 1rem; }
      body { font-size: 15px; }
      .container { padding: 0 1rem; }
      h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }

      .hero .container,
      .sheet .container,
      .about-grid,
      .intro-split .container,
      .portfolio .heading,
      .contact-main .container,
      .feature-strip .container,
      .quote-cta .container,
      .cta-strip .container,
      .foot-top { grid-template-columns: 1fr !important; }

      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .stats-grid,
      .feature-grid { grid-template-columns: 1fr 1fr !important; }

      .rel-grid { grid-template-columns: 1fr 1fr !important; }
      .form-row { grid-template-columns: 1fr !important; }

      .marquee-strip { overflow: hidden !important; max-width: 100vw; }
      .marquee-track { font-size: 1.5rem !important; }

      .hero-visual { aspect-ratio: 3/2 !important; }
      .polaroid { padding: 8px 8px 26px !important; }
      .polaroid .caption { font-size: 0.6rem !important; padding: 6px 2px 0 !important; }

      .about-visual { aspect-ratio: 1/1 !important; }
      .brand-mark { width: 90% !important; }

      .section-divider .container { flex-direction: column; align-items: flex-start; gap: .75rem; }
      .section-divider .middle { font-size: 1rem !important; }
    }
    @media (max-width: 520px) {
      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .feature-grid { grid-template-columns: 1fr !important; }
      .rel-grid { grid-template-columns: 1fr !important; }
      .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem 1rem !important; }
      .stat-value { font-size: 3.25rem !important; }
      .hero-headline { font-size: 3.5rem !important; }
      .page-head h1, .cat-hero h1, .journal-head h1 { font-size: 2.75rem !important; }
    }

    /* ============ MOBILE DRAWER MENU ============ */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      background: var(--bone);
      z-index: 250;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
    }
    
    .mobile-drawer.open { transform: translateX(0) !important; }

    .drawer-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 0 2rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 2rem;
    }
    .drawer-head .logo { display: flex; align-items: center; gap: 0.6rem; }
    .drawer-head .logo img { width: 38px; height: 38px; }
    .drawer-head .logo span { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 1.2rem; }
    .drawer-close {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--paper);
      display: grid; place-items: center;
      cursor: pointer;
    }
    .drawer-close svg { width: 18px; height: 18px; stroke: var(--ink); }

    .drawer-nav { display: flex; flex-direction: column; margin-bottom: 2rem; }
    .drawer-nav a {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 1.25rem 0.5rem;
      font-family: var(--font-display);
      font-weight: 400; font-variation-settings: "opsz" 144;
      font-size: 1.75rem;
      letter-spacing: -0.015em;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      transition: color 0.25s ease;
    }
    .drawer-nav a .num {
      font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.2em;
      color: var(--muted); font-weight: 500;
    }
    .drawer-nav a:hover, .drawer-nav a.current { color: var(--pulse); }

    .drawer-foot { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .drawer-foot .lang {
      display: flex; gap: 0.5rem; padding: 0.35rem;
      background: var(--paper); border: 1px solid var(--line);
      border-radius: 999px; align-self: flex-start;
    }
    .drawer-foot .lang button {
      padding: 0.5rem 1.25rem; border-radius: 999px;
      font-family: var(--font-mono); font-size: 0.78rem;
      letter-spacing: 0.1em; color: var(--muted);
      border: 0; background: transparent; cursor: pointer;
      transition: all 0.25s ease;
    }
    .drawer-foot .lang button.active { background: var(--ink); color: var(--paper); }
    .drawer-foot .quote-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      padding: 1rem 1.5rem;
      background: var(--pulse); color: var(--paper);
      border-radius: 999px; font-weight: 500;
    }
    .drawer-foot .contact-mini {
      font-family: var(--font-serif); font-style: italic;
      font-size: 0.85rem; color: var(--muted);
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1rem 0.25rem; border-top: 1px solid var(--line);
    }
    .drawer-foot .contact-mini a { color: var(--ink); font-style: normal; font-family: var(--font-body); font-size: 0.9rem; }

    @media (max-width: 1024px) {
      .menu-toggle {
        display: inline-flex !important;
        width: 44px; height: 44px;
        border: 1px solid var(--line); border-radius: 50%;
        align-items: center; justify-content: center;
        flex-direction: column; gap: 5px;
        background: var(--paper); cursor: pointer;
      }
      .menu-toggle span {
        display: block; width: 18px; height: 1.5px;
        background: var(--ink);
      }
      header .container { grid-template-columns: auto 1fr auto !important; }
      .header-cta { padding: 0.55rem 1rem !important; font-size: 0.82rem !important; }
    }
    @media (max-width: 540px) { .header-cta { display: none !important; } }
    @media (min-width: 1025px) { .menu-toggle { display: none !important; } }

  
    /* ================================================================ */
    /* APP-MODE — phones (<=780px) feel like a native mobile app        */
    /* ================================================================ */
    @media (max-width: 780px) {
      /* Clean paper bg, no grid overlay */
      body {
        background: var(--paper) !important;
        background-image: none !important;
        padding-bottom: 92px !important;
      }

      /* Compact app header */
      header.site-header, header {
        background: var(--paper) !important;
        border-bottom: 1px solid var(--line);
      }
      header .container {
        padding: 0.75rem 1rem !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.75rem !important;
      }
      .logo-img { width: 32px !important; height: 32px !important; }
      .logo-text { font-size: 1rem !important; letter-spacing: -0.015em; }
      .logo-text small { display: none !important; }
      .header-cta, .nav-lang, nav.primary, .back-btn { display: none !important; }
      .menu-toggle {
        width: 40px !important; height: 40px !important;
        border: 1px solid var(--line) !important;
        background: var(--paper) !important;
      }

      /* ---- HERO ---- */
      .hero { padding: 1.5rem 0 2rem !important; }
      .hero .container { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
      .hero-text .eyebrow { font-size: 0.78rem !important; }
      .hero-headline {
        font-size: 3.25rem !important;
        line-height: 0.92 !important;
        margin: 0.5rem 0 1rem !important;
      }
      .hero-lead { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }
      .hero-ctas { gap: 0.6rem !important; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-ghost {
        flex: 1;
        padding: 0.9rem 1.2rem !important;
        font-size: 0.88rem !important;
        justify-content: center;
      }

      /* Hero polaroids → horizontal snap carousel */
      .hero-visual {
        aspect-ratio: auto !important;
        height: 280px !important;
        position: relative;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        display: flex !important;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero-visual::-webkit-scrollbar { display: none; }
      .polaroid {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        flex: 0 0 68%;
        width: 68% !important;
        scroll-snap-align: center;
        transform: rotate(0deg) !important;
        animation: none !important;
      }
      .polaroid.p1 { transform: rotate(-2deg) !important; }
      .polaroid.p2 { transform: rotate(1deg) !important; }
      .polaroid.p3 { transform: rotate(-1deg) !important; }
      .polaroid .caption { font-size: 0.66rem !important; }

      /* ---- SECTION DIVIDER ---- */
      .section-divider { padding: 1.25rem 0 !important; }
      .section-divider .container {
        flex-direction: column; align-items: flex-start;
        gap: 0.5rem !important;
      }
      .section-divider .left, .section-divider .right { font-size: 0.7rem !important; }
      .section-divider .middle { font-size: 1rem !important; }

      /* ---- STATS CARDS ---- */
      .stats-editorial { padding: 1.5rem 0 !important; }
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .stat-item {
        background: var(--bone);
        padding: 1.25rem 1rem;
        border-radius: 16px;
        border: 1px solid var(--line);
      }
      .stat-index { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }
      .stat-value {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
      }
      .stat-label { font-size: 0.78rem !important; line-height: 1.4 !important; }

      /* ---- MARQUEE ---- */
      .marquee-strip { padding: 1.25rem 0 !important; }
      .marquee-track { font-size: 1.35rem !important; gap: 1.5rem !important; }

      /* ---- ABOUT SECTION (APP) ---- */
      .about-section { padding: 2.5rem 0 !important; }
      .about-eyebrow {
        margin-bottom: 1.25rem !important;
        font-size: 0.7rem !important;
      }
      .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .about-visual {
        aspect-ratio: 5/4 !important;
        border-radius: 20px !important;
      }
      .brand-mark { width: 75% !important; }
      .about-headline {
        font-size: 1.85rem !important;
        line-height: 1.05 !important;
        margin-bottom: 1rem !important;
      }
      .about-para { font-size: 0.92rem !important; margin-bottom: 0.75rem !important; }

      /* Feature mini-cards */
      .feature-grid {
        grid-template-columns: 1fr 1fr !important;
        border-top: 0 !important;
        gap: 0.6rem !important;
        margin-top: 1.25rem !important;
      }
      .feature {
        padding: 1rem !important;
        background: var(--bone);
        border: 1px solid var(--line) !important;
        border-inline-start: 1px solid var(--line) !important;
        border-radius: 12px;
      }
      .feature h3 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
      .feature p { font-size: 0.76rem !important; line-height: 1.45 !important; }
      .feature-num { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }

      /* ---- SECTION LABELS ---- */
      .section-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 1.25rem !important;
      }
      .section-label h2 { font-size: 1.5rem !important; line-height: 1.1 !important; }
      .section-label .meta {
        margin-top: 0.25rem !important;
        gap: 0.75rem !important;
        font-size: 0.75rem;
      }

      /* ---- CATEGORIES — horizontal snap rail ---- */
      .categories { padding: 1.5rem 0 !important; overflow: hidden; }
      .cat-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        border: 0 !important;
        background: transparent !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .cat-grid::-webkit-scrollbar { display: none; }
      .cat-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        background: var(--bone) !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        padding: 1.5rem !important;
        min-height: 260px !important;
        aspect-ratio: auto !important;
        grid-column: auto !important;
      }
      .cat-card.is-cta { background: var(--ink) !important; color: var(--paper) !important; }
      .cat-card::before { display: none !important; }
      .cat-card::after { display: none !important; }
      .cat-title { font-size: 1.5rem !important; }
      .cat-desc { font-size: 0.85rem !important; max-width: none !important; }

      /* ---- PRODUCTS — larger 2-col cards ---- */
      .products { padding: 2rem 0 !important; }
      .prod-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .prod-card {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 16px !important;
      }
      .prod-info { padding: 0 0.15rem !important; }
      .prod-info h3 { font-size: 0.95rem !important; line-height: 1.1 !important; }
      .prod-info .prod-sub { font-size: 0.72rem !important; line-height: 1.35 !important; }
      .prod-tag {
        font-size: 0.58rem !important;
        top: 0.45rem !important;
        left: 0.45rem !important;
        padding: 0.18rem 0.5rem !important;
      }
      .prod-fav {
        width: 28px !important; height: 28px !important;
        top: 0.45rem !important; right: 0.45rem !important;
      }
      .prod-foot { padding-top: 0.5rem !important; }
      .prod-price .label { font-size: 0.6rem !important; }
      .prod-price .val { font-size: 0.7rem !important; }
      .prod-rfq {
        padding: 0.38rem 0.7rem !important;
        font-size: 0.66rem !important;
      }

      /* ---- MANIFESTO ---- */
      .manifesto { padding: 2.5rem 0 !important; }
      .manifesto blockquote { font-size: 1.5rem !important; line-height: 1.2 !important; }

      /* ---- JOURNAL — horizontal snap rail ---- */
      .journal-preview { padding: 2rem 0 !important; overflow: hidden; }
      .journal-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .journal-grid::-webkit-scrollbar { display: none; }
      .j-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
        padding: 1rem !important;
        border-radius: 18px !important;
      }
      .j-title { font-size: 1.15rem !important; }
      .j-excerpt { font-size: 0.82rem !important; }

      /* ---- QUOTE CTA ---- */
      .quote-cta { padding: 2.5rem 0 !important; }
      .quote-cta .container { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
      .quote-cta h2 { font-size: 1.6rem !important; line-height: 1.1 !important; }
      .quote-cta p { font-size: 0.9rem !important; }
      .quote-cta-box { padding: 1.25rem !important; }

      /* ---- FOOTER COMPACT ---- */
      footer.site-footer { padding: 2rem 0 4rem !important; }
      .foot-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding-bottom: 1.5rem !important; }
      .foot-brand { grid-column: 1 / -1; }
      .foot-brand p { font-size: 0.82rem !important; }
      .foot-col h4 { font-size: 0.85rem !important; margin-bottom: 0.75rem !important; }
      .foot-col a, .foot-col li { font-size: 0.82rem !important; }
      .foot-bottom { font-size: 0.72rem !important; }

      /* ---- MODAL → BOTTOM SHEET ---- */
      .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
      }
      .modal {
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important;
        max-width: 100% !important;
        padding: 1.5rem 1.25rem 2rem !important;
        transform: translateY(100%) !important;
      }
      .modal-backdrop.open .modal { transform: translateY(0) !important; }
      .modal::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: var(--muted);
        border-radius: 2px;
        margin: 0 auto 1.25rem;
        opacity: 0.35;
      }
      .modal h3 { font-size: 1.35rem !important; }
      .modal .sub { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
      .field input, .field textarea, .field select {
        padding: 0.8rem 0.9rem !important;
        font-size: 16px !important; /* prevent iOS zoom */
      }

      /* ---- PAGE HEADINGS on inner pages ---- */
      .page-head { padding: 2rem 0 1.5rem !important; }
      .page-head h1 { font-size: 2.5rem !important; line-height: 1 !important; }
      .page-head .meta { margin-bottom: 1.25rem !important; font-size: 0.78rem !important; }
      .page-head .lead { font-size: 0.95rem !important; margin-top: 1rem !important; }

      .cat-hero { padding: 1.5rem 0 1.5rem !important; }
      .cat-hero .grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding-bottom: 1.25rem !important; }
      .cat-hero h1 { font-size: 2.75rem !important; }
      .cat-hero .desc { font-size: 0.9rem !important; }

      .journal-head { padding: 2rem 0 1.5rem !important; }
      .journal-head h1 { font-size: 2.5rem !important; }
      .journal-head .lead { font-size: 0.95rem !important; }

      /* Toolbar on category/shop → horizontal scroll chips */
      .toolbar, .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
        margin-bottom: 1rem !important;
      }
      .toolbar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
      .filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
      }
      .filter-chips::-webkit-scrollbar { display: none; }
      .chip { white-space: nowrap; flex-shrink: 0; }

      /* Featured article on blog page stacks cleanly */
      .featured-card { padding: 1rem !important; gap: 1rem !important; border-radius: 18px !important; }
      .featured-media { aspect-ratio: 4/3 !important; padding: 1.25rem !important; }
      .featured-info h2 { font-size: 1.5rem !important; }

      .articles-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .article-card { padding-bottom: 1.5rem !important; }

      /* Article reader page */
      .article-hero { padding: 1.5rem 0 2rem !important; }
      .article-hero h1 { font-size: 2.25rem !important; }
      .article-hero .excerpt { font-size: 1rem !important; }
      .article-hero .byline { padding: 0.75rem 1.25rem !important; font-size: 0.78rem !important; gap: 0.5rem !important; flex-wrap: wrap; justify-content: center; }
      .cover-frame { aspect-ratio: 3/2 !important; padding: 1.25rem !important; border-radius: 16px !important; }
      .article-body { font-size: 1rem !important; padding: 0 1rem clamp(2.5rem, 5vw, 4rem) !important; }
      .article-body p:first-of-type::first-letter { font-size: 3.5rem !important; }

      /* Hide cluttered parts on the hero */
      .editor-note { display: none !important; }

      /* Sheet on product page */
      .sheet { padding: 1rem 0 3rem !important; }
      .sheet .container { gap: 1.5rem !important; }
      .gallery { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .thumbs { flex-direction: row !important; overflow-x: auto; gap: 0.5rem; scrollbar-width: none; }
      .thumbs::-webkit-scrollbar { display: none; }
      .thumb { width: 64px !important; }
      .info h1 { font-size: 2.25rem !important; }
      .info .sub { font-size: 1.05rem !important; }
      .spec-grid { grid-template-columns: 1fr 1fr !important; }
      .spec { padding: 0.75rem 0.85rem !important; }
      .spec .v { font-size: 0.85rem !important; }
      .spec .v.num { font-size: 1.2rem !important; }
      .actions { border-radius: 16px !important; padding: 1rem !important; bottom: 100px !important; }
      .actions .note strong { font-size: 1rem !important; }
      .actions .note small { font-size: 0.72rem !important; }

      /* Contact page */
      .info-card { padding: 1.1rem !important; grid-template-columns: 42px 1fr auto !important; gap: 0.85rem !important; }
      .info-card .ico { width: 42px !important; height: 42px !important; }
      .info-card .v { font-size: 0.88rem !important; }
      .info-card .k { font-size: 0.72rem !important; }
      .contact-form { padding: 1.5rem 1.25rem !important; border-radius: 18px !important; position: static !important; }
      .map-frame { aspect-ratio: 3/4 !important; border-radius: 16px !important; }
      .map-overlay { max-width: calc(100% - 3rem) !important; padding: 1rem 1.25rem !important; }

      /* About page */
      .intro-art { aspect-ratio: 5/4 !important; border-radius: 18px !important; }
      .intro-text h2 { font-size: 1.75rem !important; }
      .intro-text .callout { padding: 1.1rem !important; font-size: 0.95rem !important; }
      .pillars { padding: 2rem 0 !important; }
      .pillar-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .pillar { padding: 1.5rem !important; min-height: auto !important; border-radius: 16px !important; }
      .pillar h3 { font-size: 1.4rem !important; }
      .pillar p { font-size: 0.88rem !important; }
      .pillar .big-letter { font-size: 5rem !important; }
      .portfolio { padding: 2rem 0 !important; }
      .portfolio .heading { grid-template-columns: 1fr !important; gap: 1rem !important; }
      .portfolio h2 { font-size: 1.75rem !important; }
      .portfolio-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: 1.25rem 0 !important; }
      .portfolio-row .p-title { font-size: 1.25rem !important; }
      .portfolio-row .p-desc { font-size: 0.85rem !important; }
      .timeline { padding: 2rem 0 !important; }
      .timeline-track { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .timeline-track::before { display: none !important; }
      .tl-year { font-size: 1.5rem !important; }
      .tl-label { font-size: 0.78rem !important; }
      .stats { padding: 2rem 0 !important; }
      .stats .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .stats .stat-num { font-size: 2.25rem !important; }
      .stats .stat-label { font-size: 0.78rem !important; }

      /* Pagination / buttons on category */
      .pagination { margin-top: 2rem !important; gap: 0.4rem !important; }
      .pagination button { min-width: 36px !important; height: 36px !important; font-size: 0.85rem !important; }

      /* Related card on product page */
      .rel-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
      .rel-card { padding: 0.75rem !important; border-radius: 14px !important; }
      .rel-card h3 { font-size: 0.95rem !important; }
      .rel-card p { font-size: 0.75rem !important; }

      /* CTA strips */
      .cta-strip { padding: 2rem 0 !important; }
      .cta-strip h2 { font-size: 1.5rem !important; }
    }

    /* Smaller phones */
    @media (max-width: 400px) {
      .hero-headline { font-size: 2.75rem !important; }
      .polaroid { flex: 0 0 78% !important; }
      .cat-card { flex: 0 0 88% !important; }
      .j-card { flex: 0 0 90% !important; }
    }

  
    /* Hamburger must sit in the far-right cell of header grid */
    @media (max-width: 1024px) {
      header .container {
        grid-template-columns: auto 1fr auto auto !important;
      }
      .menu-toggle {
        justify-self: end;
        grid-column: -1 !important;
      }
    }

/* ===== article.html ===== */
* { box-sizing:border-box; margin:0; padding:0; }
    body {
      background-color:var(--bone); color:var(--ink);
      font-family:var(--font-body); font-weight:450; line-height:1.75;
      -webkit-font-smoothing:antialiased; overflow-x:hidden;
    }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    img, svg { display:block; max-width:100%; }
    .container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    header { position:sticky; top:0; z-index:50; background:rgba(247,243,234,.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); }
    header .container { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:1rem var(--gutter); }
    .logo { display:flex; align-items:center; gap:.8rem; }
    .logo-img { width:44px; height:44px; object-fit:contain; }
    .logo-text { font-family:var(--font-display); font-weight:400; font-variation-settings:"opsz" 144; font-size:1.3rem; letter-spacing:-.02em; }
    nav.primary { display:flex; justify-content:center; align-items:center; gap:clamp(1rem,2vw,2rem); font-weight:500; font-size:.92rem; }
    nav.primary > a { position:relative; padding:.4rem 0; transition:color .25s var(--ease); }
    nav.primary > a.current { color:var(--pulse-deep); }
    .nav-lang { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; cursor:pointer; margin-inline-start:.5rem; transition:all .3s var(--ease); }
    .nav-lang:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .nav-lang .active { color:var(--pulse); font-weight:600; }
    .nav-lang .slash { opacity:.4; }
    .header-cta { display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); padding:.75rem 1.3rem; border-radius:999px; font-weight:500; font-size:.92rem; transition:background .3s var(--ease); }
    .header-cta:hover { background:var(--pulse); }
    .header-cta svg { width:14px; height:14px; }
    @media (max-width:1024px) { nav.primary { display:none; } .header-cta > span { display:none; } .header-cta { padding:.55rem 1rem; } }

    /* Breadcrumb */
    .breadcrumb { padding:1.5rem 0 0; font-size:.85rem; color:var(--muted); }
    .breadcrumb a:hover { color:var(--pulse); }
    .breadcrumb .sep { margin:0 .5rem; opacity:.5; }

    /* Article hero */
    .article-hero { padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,5vw,4rem); text-align:center; }
    .article-hero .category-tag {
      display:inline-block;
      font-family:var(--font-mono); font-size:.78rem;
      letter-spacing:.22em; color:var(--pulse);
      text-transform:uppercase; margin-bottom:2rem;
    }
    .article-hero .category-tag::before { content:"— "; }
    .article-hero h1 {
      font-family:var(--font-display); font-weight:300;
      font-variation-settings:"opsz" 144, "SOFT" 0;
      font-size:clamp(2.5rem,6vw,5.5rem); line-height:.98;
      letter-spacing:-.035em; max-width:18ch;
      margin:0 auto 1.5rem;
    }
    .article-hero h1 em { font-family:var(--font-serif); font-style:italic; color:var(--pulse); }
    .article-hero .excerpt {
      font-family:var(--font-serif); font-style:italic;
      font-size:clamp(1.15rem,1.8vw,1.5rem);
      color:var(--ink-soft); max-width:55ch;
      margin:0 auto 2.5rem;
      line-height:1.5;
    }
    .article-hero .byline {
      display:inline-flex; align-items:center; gap:.75rem;
      padding:1.25rem 2rem;
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:999px;
      font-size:.88rem;
      color:var(--muted);
    }
    .article-hero .byline .author { color:var(--ink); font-weight:500; }
    .article-hero .byline .role { font-family:var(--font-serif); font-style:italic; }
    .article-hero .byline .sep { opacity:.4; }
    .article-hero .byline .mono { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }

    /* Cover image */
    .cover-wrap {
      padding: 0 0 clamp(3rem,5vw,4rem);
    }
    .cover-frame {
      aspect-ratio: 2/1;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      display: grid; place-items: center;
      padding: 3rem;
      max-width: 900px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    .cover-frame::before {
      content: ""; position: absolute; inset: 0;
      background-image: radial-gradient(circle at center, rgba(20,37,46,0.06) 1px, transparent 1.1px);
      background-size: 20px 20px;
    }
    .cover-frame img { max-width: 45%; max-height: 90%; object-fit: contain; position: relative; filter: drop-shadow(0 30px 40px rgba(20,37,46,.18)); }
    .cover-frame .fig-label {
      position: absolute; bottom: 1rem; left: 1.5rem;
      font-family: var(--font-mono); font-size:.7rem; letter-spacing:.2em; color: var(--muted); text-transform: uppercase;
    }

    /* Article body */
    .article-body {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 var(--gutter) clamp(4rem,7vw,6rem);
      font-size: 1.1rem;
      line-height: 1.8;
      color: var(--ink);
    }
    .article-body p { margin-bottom: 1.75rem; }
    .article-body p:first-of-type::first-letter {
      font-family: var(--font-display);
      font-weight: 300;
      font-size: 5rem;
      float: left;
      line-height: 0.85;
      padding: 0.3rem 0.6rem 0 0;
      color: var(--pulse);
    }
    .article-body h3 {
      font-family: var(--font-display); font-weight: 400;
      font-variation-settings: "opsz" 144;
      font-size: clamp(1.5rem, 2.2vw, 1.85rem);
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin: 3rem 0 1rem;
    }
    .article-body em { font-family: var(--font-serif); font-style: italic; color: var(--pulse-deep); }
    .article-body blockquote {
      font-family: var(--font-serif); font-style: italic;
      font-size: clamp(1.3rem, 2vw, 1.6rem);
      border-left: 3px solid var(--pulse);
      padding: 0.5rem 0 0.5rem 1.5rem;
      margin: 2.5rem 0;
      color: var(--ink);
    }

    /* Tags + share */
    .article-meta-bottom {
      max-width: 720px; margin: 0 auto;
      padding: 2.5rem var(--gutter);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      display: flex; justify-content: space-between; align-items: center;
      gap: 2rem; flex-wrap: wrap;
    }
    .tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .tag {
      font-family: var(--font-mono); font-size: 0.72rem;
      letter-spacing: 0.15em; padding: 0.4rem 0.9rem;
      border: 1px solid var(--line); border-radius: 999px;
      color: var(--muted); text-transform: uppercase;
    }
    .share { display: flex; gap: 0.75rem; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; }
    .share a {
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid var(--line); display: grid; place-items: center;
      transition: all 0.3s var(--ease);
    }
    .share a:hover { background: var(--pulse); color: var(--paper); border-color: var(--pulse); }
    .share svg { width: 15px; height: 15px; }

    /* Related articles */
    .related-section {
      padding: clamp(4rem,7vw,6rem) 0;
      background: var(--paper);
      border-top: 1px solid var(--line);
    }
    .related-section h2 {
      font-family: var(--font-display); font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 0;
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      letter-spacing: -0.025em; margin-bottom: 2.5rem;
    }
    .related-section h2 em { font-family: var(--font-serif); font-style: italic; color: var(--pulse); }
    .related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
    @media (max-width:860px) { .related-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width:540px) { .related-grid { grid-template-columns: 1fr; } }
    .rel-card {
      display: flex; flex-direction: column; gap: 1rem;
      padding: 1.25rem;
      background: var(--bone); border: 1px solid var(--line); border-radius: 12px;
      transition: all .35s var(--ease);
    }
    .rel-card:hover { transform: translateY(-3px); border-color: var(--ink); }
    .rel-media { aspect-ratio: 4/3; background: var(--paper); border-radius: 8px; display: grid; place-items: center; padding: 1.25rem; overflow: hidden; }
    .rel-media img { max-width: 60%; max-height: 80%; object-fit: contain; }
    .rel-card .cat { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--pulse); text-transform: uppercase; }
    .rel-card .cat::before { content: "— "; }
    .rel-card h3 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.2; }

    footer.site-footer { background:var(--bone); padding:clamp(3rem,6vw,5rem) 0 2rem; border-top:1px solid var(--line); }
    .foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
    .foot-bottom .credits em { font-family:var(--font-serif); color:var(--ink); font-style:italic; }
  
    /* ============ MOBILE APP-LIKE LAYOUT ============ */
    .mobile-tabbar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(253, 251, 245, 0.95);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-top: 1px solid var(--line);
      padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
      z-index: 100;
      box-shadow: 0 -10px 30px -10px rgba(20, 37, 46, 0.1);
    }
    .mobile-tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 500px; margin: 0 auto; }
    .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; color: var(--muted); font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; position: relative; transition: color 0.2s var(--ease); }
    .mobile-tab svg { width: 22px; height: 22px; stroke-width: 1.8; stroke: currentColor; fill: none; transition: transform 0.3s var(--ease); }
    .mobile-tab.active { color: var(--pulse); }
    .mobile-tab.active svg { transform: scale(1.08); }
    .mobile-tab.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--pulse); border-radius: 0 0 2px 2px; }
    .mobile-tab.fab { margin-top: -28px; }
    .mobile-tab.fab .fab-inner { width: 52px; height: 52px; border-radius: 50%; background: var(--pulse); color: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 20px -4px rgba(221, 83, 64, 0.5); transition: transform 0.3s var(--ease); }
    .mobile-tab.fab:active .fab-inner { transform: scale(0.92); }
    .mobile-tab.fab svg { width: 22px; height: 22px; stroke: var(--paper); }
    .mobile-tab.fab::before { display: none; }
    @media (max-width: 780px) {
      .mobile-tabbar { display: block; }
      body { padding-bottom: 80px; }
    }
    @media (max-width: 780px) {
      header .container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
      .logo-img { width: 36px; height: 36px; }
      .logo-text { font-size: 1.1rem; }
      .logo-text small { display: none; }
      .header-cta { display: none !important; }
      .nav-lang { margin-inline-start: 0; padding: 5px 10px; font-size: 0.7rem; }
      .back-btn { display: none; }
    }

  
    /* ============ GLOBAL MOBILE HARDENING ============ */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    * { min-width: 0; }

    @media (max-width: 780px) {
      :root { --gutter: 1rem; }
      body { font-size: 15px; }
      .container { padding: 0 1rem; }
      h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }

      .hero .container,
      .sheet .container,
      .about-grid,
      .intro-split .container,
      .portfolio .heading,
      .contact-main .container,
      .feature-strip .container,
      .quote-cta .container,
      .cta-strip .container,
      .foot-top { grid-template-columns: 1fr !important; }

      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .stats-grid,
      .feature-grid { grid-template-columns: 1fr 1fr !important; }

      .rel-grid { grid-template-columns: 1fr 1fr !important; }
      .form-row { grid-template-columns: 1fr !important; }

      .marquee-strip { overflow: hidden !important; max-width: 100vw; }
      .marquee-track { font-size: 1.5rem !important; }

      .hero-visual { aspect-ratio: 3/2 !important; }
      .polaroid { padding: 8px 8px 26px !important; }
      .polaroid .caption { font-size: 0.6rem !important; padding: 6px 2px 0 !important; }

      .about-visual { aspect-ratio: 1/1 !important; }
      .brand-mark { width: 90% !important; }

      .section-divider .container { flex-direction: column; align-items: flex-start; gap: .75rem; }
      .section-divider .middle { font-size: 1rem !important; }
    }
    @media (max-width: 520px) {
      .prod-grid,
      .journal-grid,
      .articles-grid,
      .cat-grid,
      .feature-grid { grid-template-columns: 1fr !important; }
      .rel-grid { grid-template-columns: 1fr !important; }
      .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem 1rem !important; }
      .stat-value { font-size: 3.25rem !important; }
      .hero-headline { font-size: 3.5rem !important; }
      .page-head h1, .cat-hero h1, .journal-head h1 { font-size: 2.75rem !important; }
    }

    /* ============ MOBILE DRAWER MENU ============ */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      background: var(--bone);
      z-index: 250;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
    }
    
    .mobile-drawer.open { transform: translateX(0) !important; }

    .drawer-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 0 2rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 2rem;
    }
    .drawer-head .logo { display: flex; align-items: center; gap: 0.6rem; }
    .drawer-head .logo img { width: 38px; height: 38px; }
    .drawer-head .logo span { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 1.2rem; }
    .drawer-close {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--paper);
      display: grid; place-items: center;
      cursor: pointer;
    }
    .drawer-close svg { width: 18px; height: 18px; stroke: var(--ink); }

    .drawer-nav { display: flex; flex-direction: column; margin-bottom: 2rem; }
    .drawer-nav a {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 1.25rem 0.5rem;
      font-family: var(--font-display);
      font-weight: 400; font-variation-settings: "opsz" 144;
      font-size: 1.75rem;
      letter-spacing: -0.015em;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      transition: color 0.25s ease;
    }
    .drawer-nav a .num {
      font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.2em;
      color: var(--muted); font-weight: 500;
    }
    .drawer-nav a:hover, .drawer-nav a.current { color: var(--pulse); }

    .drawer-foot { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .drawer-foot .lang {
      display: flex; gap: 0.5rem; padding: 0.35rem;
      background: var(--paper); border: 1px solid var(--line);
      border-radius: 999px; align-self: flex-start;
    }
    .drawer-foot .lang button {
      padding: 0.5rem 1.25rem; border-radius: 999px;
      font-family: var(--font-mono); font-size: 0.78rem;
      letter-spacing: 0.1em; color: var(--muted);
      border: 0; background: transparent; cursor: pointer;
      transition: all 0.25s ease;
    }
    .drawer-foot .lang button.active { background: var(--ink); color: var(--paper); }
    .drawer-foot .quote-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      padding: 1rem 1.5rem;
      background: var(--pulse); color: var(--paper);
      border-radius: 999px; font-weight: 500;
    }
    .drawer-foot .contact-mini {
      font-family: var(--font-serif); font-style: italic;
      font-size: 0.85rem; color: var(--muted);
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1rem 0.25rem; border-top: 1px solid var(--line);
    }
    .drawer-foot .contact-mini a { color: var(--ink); font-style: normal; font-family: var(--font-body); font-size: 0.9rem; }

    @media (max-width: 1024px) {
      .menu-toggle {
        display: inline-flex !important;
        width: 44px; height: 44px;
        border: 1px solid var(--line); border-radius: 50%;
        align-items: center; justify-content: center;
        flex-direction: column; gap: 5px;
        background: var(--paper); cursor: pointer;
      }
      .menu-toggle span {
        display: block; width: 18px; height: 1.5px;
        background: var(--ink);
      }
      header .container { grid-template-columns: auto 1fr auto !important; }
      .header-cta { padding: 0.55rem 1rem !important; font-size: 0.82rem !important; }
    }
    @media (max-width: 540px) { .header-cta { display: none !important; } }
    @media (min-width: 1025px) { .menu-toggle { display: none !important; } }

  
    /* ================================================================ */
    /* APP-MODE — phones (<=780px) feel like a native mobile app        */
    /* ================================================================ */
    @media (max-width: 780px) {
      /* Clean paper bg, no grid overlay */
      body {
        background: var(--paper) !important;
        background-image: none !important;
        padding-bottom: 92px !important;
      }

      /* Compact app header */
      header.site-header, header {
        background: var(--paper) !important;
        border-bottom: 1px solid var(--line);
      }
      header .container {
        padding: 0.75rem 1rem !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.75rem !important;
      }
      .logo-img { width: 32px !important; height: 32px !important; }
      .logo-text { font-size: 1rem !important; letter-spacing: -0.015em; }
      .logo-text small { display: none !important; }
      .header-cta, .nav-lang, nav.primary, .back-btn { display: none !important; }
      .menu-toggle {
        width: 40px !important; height: 40px !important;
        border: 1px solid var(--line) !important;
        background: var(--paper) !important;
      }

      /* ---- HERO ---- */
      .hero { padding: 1.5rem 0 2rem !important; }
      .hero .container { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
      .hero-text .eyebrow { font-size: 0.78rem !important; }
      .hero-headline {
        font-size: 3.25rem !important;
        line-height: 0.92 !important;
        margin: 0.5rem 0 1rem !important;
      }
      .hero-lead { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }
      .hero-ctas { gap: 0.6rem !important; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-ghost {
        flex: 1;
        padding: 0.9rem 1.2rem !important;
        font-size: 0.88rem !important;
        justify-content: center;
      }

      /* Hero polaroids → horizontal snap carousel */
      .hero-visual {
        aspect-ratio: auto !important;
        height: 280px !important;
        position: relative;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        display: flex !important;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero-visual::-webkit-scrollbar { display: none; }
      .polaroid {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        flex: 0 0 68%;
        width: 68% !important;
        scroll-snap-align: center;
        transform: rotate(0deg) !important;
        animation: none !important;
      }
      .polaroid.p1 { transform: rotate(-2deg) !important; }
      .polaroid.p2 { transform: rotate(1deg) !important; }
      .polaroid.p3 { transform: rotate(-1deg) !important; }
      .polaroid .caption { font-size: 0.66rem !important; }

      /* ---- SECTION DIVIDER ---- */
      .section-divider { padding: 1.25rem 0 !important; }
      .section-divider .container {
        flex-direction: column; align-items: flex-start;
        gap: 0.5rem !important;
      }
      .section-divider .left, .section-divider .right { font-size: 0.7rem !important; }
      .section-divider .middle { font-size: 1rem !important; }

      /* ---- STATS CARDS ---- */
      .stats-editorial { padding: 1.5rem 0 !important; }
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .stat-item {
        background: var(--bone);
        padding: 1.25rem 1rem;
        border-radius: 16px;
        border: 1px solid var(--line);
      }
      .stat-index { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }
      .stat-value {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
      }
      .stat-label { font-size: 0.78rem !important; line-height: 1.4 !important; }

      /* ---- MARQUEE ---- */
      .marquee-strip { padding: 1.25rem 0 !important; }
      .marquee-track { font-size: 1.35rem !important; gap: 1.5rem !important; }

      /* ---- ABOUT SECTION (APP) ---- */
      .about-section { padding: 2.5rem 0 !important; }
      .about-eyebrow {
        margin-bottom: 1.25rem !important;
        font-size: 0.7rem !important;
      }
      .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .about-visual {
        aspect-ratio: 5/4 !important;
        border-radius: 20px !important;
      }
      .brand-mark { width: 75% !important; }
      .about-headline {
        font-size: 1.85rem !important;
        line-height: 1.05 !important;
        margin-bottom: 1rem !important;
      }
      .about-para { font-size: 0.92rem !important; margin-bottom: 0.75rem !important; }

      /* Feature mini-cards */
      .feature-grid {
        grid-template-columns: 1fr 1fr !important;
        border-top: 0 !important;
        gap: 0.6rem !important;
        margin-top: 1.25rem !important;
      }
      .feature {
        padding: 1rem !important;
        background: var(--bone);
        border: 1px solid var(--line) !important;
        border-inline-start: 1px solid var(--line) !important;
        border-radius: 12px;
      }
      .feature h3 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
      .feature p { font-size: 0.76rem !important; line-height: 1.45 !important; }
      .feature-num { font-size: 0.62rem !important; margin-bottom: 0.5rem !important; }

      /* ---- SECTION LABELS ---- */
      .section-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 1.25rem !important;
      }
      .section-label h2 { font-size: 1.5rem !important; line-height: 1.1 !important; }
      .section-label .meta {
        margin-top: 0.25rem !important;
        gap: 0.75rem !important;
        font-size: 0.75rem;
      }

      /* ---- CATEGORIES — horizontal snap rail ---- */
      .categories { padding: 1.5rem 0 !important; overflow: hidden; }
      .cat-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        border: 0 !important;
        background: transparent !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .cat-grid::-webkit-scrollbar { display: none; }
      .cat-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        background: var(--bone) !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        padding: 1.5rem !important;
        min-height: 260px !important;
        aspect-ratio: auto !important;
        grid-column: auto !important;
      }
      .cat-card.is-cta { background: var(--ink) !important; color: var(--paper) !important; }
      .cat-card::before { display: none !important; }
      .cat-card::after { display: none !important; }
      .cat-title { font-size: 1.5rem !important; }
      .cat-desc { font-size: 0.85rem !important; max-width: none !important; }

      /* ---- PRODUCTS — larger 2-col cards ---- */
      .products { padding: 2rem 0 !important; }
      .prod-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      .prod-card {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 16px !important;
      }
      .prod-info { padding: 0 0.15rem !important; }
      .prod-info h3 { font-size: 0.95rem !important; line-height: 1.1 !important; }
      .prod-info .prod-sub { font-size: 0.72rem !important; line-height: 1.35 !important; }
      .prod-tag {
        font-size: 0.58rem !important;
        top: 0.45rem !important;
        left: 0.45rem !important;
        padding: 0.18rem 0.5rem !important;
      }
      .prod-fav {
        width: 28px !important; height: 28px !important;
        top: 0.45rem !important; right: 0.45rem !important;
      }
      .prod-foot { padding-top: 0.5rem !important; }
      .prod-price .label { font-size: 0.6rem !important; }
      .prod-price .val { font-size: 0.7rem !important; }
      .prod-rfq {
        padding: 0.38rem 0.7rem !important;
        font-size: 0.66rem !important;
      }

      /* ---- MANIFESTO ---- */
      .manifesto { padding: 2.5rem 0 !important; }
      .manifesto blockquote { font-size: 1.5rem !important; line-height: 1.2 !important; }

      /* ---- JOURNAL — horizontal snap rail ---- */
      .journal-preview { padding: 2rem 0 !important; overflow: hidden; }
      .journal-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 -1rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .journal-grid::-webkit-scrollbar { display: none; }
      .j-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
        padding: 1rem !important;
        border-radius: 18px !important;
      }
      .j-title { font-size: 1.15rem !important; }
      .j-excerpt { font-size: 0.82rem !important; }

      /* ---- QUOTE CTA ---- */
      .quote-cta { padding: 2.5rem 0 !important; }
      .quote-cta .container { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
      .quote-cta h2 { font-size: 1.6rem !important; line-height: 1.1 !important; }
      .quote-cta p { font-size: 0.9rem !important; }
      .quote-cta-box { padding: 1.25rem !important; }

      /* ---- FOOTER COMPACT ---- */
      footer.site-footer { padding: 2rem 0 4rem !important; }
      .foot-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding-bottom: 1.5rem !important; }
      .foot-brand { grid-column: 1 / -1; }
      .foot-brand p { font-size: 0.82rem !important; }
      .foot-col h4 { font-size: 0.85rem !important; margin-bottom: 0.75rem !important; }
      .foot-col a, .foot-col li { font-size: 0.82rem !important; }
      .foot-bottom { font-size: 0.72rem !important; }

      /* ---- MODAL → BOTTOM SHEET ---- */
      .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
      }
      .modal {
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important;
        max-width: 100% !important;
        padding: 1.5rem 1.25rem 2rem !important;
        transform: translateY(100%) !important;
      }
      .modal-backdrop.open .modal { transform: translateY(0) !important; }
      .modal::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: var(--muted);
        border-radius: 2px;
        margin: 0 auto 1.25rem;
        opacity: 0.35;
      }
      .modal h3 { font-size: 1.35rem !important; }
      .modal .sub { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
      .field input, .field textarea, .field select {
        padding: 0.8rem 0.9rem !important;
        font-size: 16px !important; /* prevent iOS zoom */
      }

      /* ---- PAGE HEADINGS on inner pages ---- */
      .page-head { padding: 2rem 0 1.5rem !important; }
      .page-head h1 { font-size: 2.5rem !important; line-height: 1 !important; }
      .page-head .meta { margin-bottom: 1.25rem !important; font-size: 0.78rem !important; }
      .page-head .lead { font-size: 0.95rem !important; margin-top: 1rem !important; }

      .cat-hero { padding: 1.5rem 0 1.5rem !important; }
      .cat-hero .grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding-bottom: 1.25rem !important; }
      .cat-hero h1 { font-size: 2.75rem !important; }
      .cat-hero .desc { font-size: 0.9rem !important; }

      .journal-head { padding: 2rem 0 1.5rem !important; }
      .journal-head h1 { font-size: 2.5rem !important; }
      .journal-head .lead { font-size: 0.95rem !important; }

      /* Toolbar on category/shop → horizontal scroll chips */
      .toolbar, .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
        margin-bottom: 1rem !important;
      }
      .toolbar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
      .filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
      }
      .filter-chips::-webkit-scrollbar { display: none; }
      .chip { white-space: nowrap; flex-shrink: 0; }

      /* Featured article on blog page stacks cleanly */
      .featured-card { padding: 1rem !important; gap: 1rem !important; border-radius: 18px !important; }
      .featured-media { aspect-ratio: 4/3 !important; padding: 1.25rem !important; }
      .featured-info h2 { font-size: 1.5rem !important; }

      .articles-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      .article-card { padding-bottom: 1.5rem !important; }

      /* Article reader page */
      .article-hero { padding: 1.5rem 0 2rem !important; }
      .article-hero h1 { font-size: 2.25rem !important; }
      .article-hero .excerpt { font-size: 1rem !important; }
      .article-hero .byline { padding: 0.75rem 1.25rem !important; font-size: 0.78rem !important; gap: 0.5rem !important; flex-wrap: wrap; justify-content: center; }
      .cover-frame { aspect-ratio: 3/2 !important; padding: 1.25rem !important; border-radius: 16px !important; }
      .article-body { font-size: 1rem !important; padding: 0 1rem clamp(2.5rem, 5vw, 4rem) !important; }
      .article-body p:first-of-type::first-letter { font-size: 3.5rem !important; }

      /* Hide cluttered parts on the hero */
      .editor-note { display: none !important; }

      /* Sheet on product page */
      .sheet { padding: 1rem 0 3rem !important; }
      .sheet .container { gap: 1.5rem !important; }
      .gallery { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .thumbs { flex-direction: row !important; overflow-x: auto; gap: 0.5rem; scrollbar-width: none; }
      .thumbs::-webkit-scrollbar { display: none; }
      .thumb { width: 64px !important; }
      .info h1 { font-size: 2.25rem !important; }
      .info .sub { font-size: 1.05rem !important; }
      .spec-grid { grid-template-columns: 1fr 1fr !important; }
      .spec { padding: 0.75rem 0.85rem !important; }
      .spec .v { font-size: 0.85rem !important; }
      .spec .v.num { font-size: 1.2rem !important; }
      .actions { border-radius: 16px !important; padding: 1rem !important; bottom: 100px !important; }
      .actions .note strong { font-size: 1rem !important; }
      .actions .note small { font-size: 0.72rem !important; }

      /* Contact page */
      .info-card { padding: 1.1rem !important; grid-template-columns: 42px 1fr auto !important; gap: 0.85rem !important; }
      .info-card .ico { width: 42px !important; height: 42px !important; }
      .info-card .v { font-size: 0.88rem !important; }
      .info-card .k { font-size: 0.72rem !important; }
      .contact-form { padding: 1.5rem 1.25rem !important; border-radius: 18px !important; position: static !important; }
      .map-frame { aspect-ratio: 3/4 !important; border-radius: 16px !important; }
      .map-overlay { max-width: calc(100% - 3rem) !important; padding: 1rem 1.25rem !important; }

      /* About page */
      .intro-art { aspect-ratio: 5/4 !important; border-radius: 18px !important; }
      .intro-text h2 { font-size: 1.75rem !important; }
      .intro-text .callout { padding: 1.1rem !important; font-size: 0.95rem !important; }
      .pillars { padding: 2rem 0 !important; }
      .pillar-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
      .pillar { padding: 1.5rem !important; min-height: auto !important; border-radius: 16px !important; }
      .pillar h3 { font-size: 1.4rem !important; }
      .pillar p { font-size: 0.88rem !important; }
      .pillar .big-letter { font-size: 5rem !important; }
      .portfolio { padding: 2rem 0 !important; }
      .portfolio .heading { grid-template-columns: 1fr !important; gap: 1rem !important; }
      .portfolio h2 { font-size: 1.75rem !important; }
      .portfolio-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; padding: 1.25rem 0 !important; }
      .portfolio-row .p-title { font-size: 1.25rem !important; }
      .portfolio-row .p-desc { font-size: 0.85rem !important; }
      .timeline { padding: 2rem 0 !important; }
      .timeline-track { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .timeline-track::before { display: none !important; }
      .tl-year { font-size: 1.5rem !important; }
      .tl-label { font-size: 0.78rem !important; }
      .stats { padding: 2rem 0 !important; }
      .stats .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
      .stats .stat-num { font-size: 2.25rem !important; }
      .stats .stat-label { font-size: 0.78rem !important; }

      /* Pagination / buttons on category */
      .pagination { margin-top: 2rem !important; gap: 0.4rem !important; }
      .pagination button { min-width: 36px !important; height: 36px !important; font-size: 0.85rem !important; }

      /* Related card on product page */
      .rel-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
      .rel-card { padding: 0.75rem !important; border-radius: 14px !important; }
      .rel-card h3 { font-size: 0.95rem !important; }
      .rel-card p { font-size: 0.75rem !important; }

      /* CTA strips */
      .cta-strip { padding: 2rem 0 !important; }
      .cta-strip h2 { font-size: 1.5rem !important; }
    }

    /* Smaller phones */
    @media (max-width: 400px) {
      .hero-headline { font-size: 2.75rem !important; }
      .polaroid { flex: 0 0 78% !important; }
      .cat-card { flex: 0 0 88% !important; }
      .j-card { flex: 0 0 90% !important; }
    }

  
    /* Hamburger must sit in the far-right cell of header grid */
    @media (max-width: 1024px) {
      header .container {
        grid-template-columns: auto 1fr auto auto !important;
      }
      .menu-toggle {
        justify-self: end;
        grid-column: -1 !important;
      }
    }

/* Sub-categories on category card */
.cat-subs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 12px;
  padding: 10px 0 0;
  border-top: 1px dashed rgba(20,37,46,0.15);
}
.cat-sub-chip {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(219,83,64,0.08);
  color: var(--pulse-deep, #b53a24);
}

/* ============ Public site form success toast ============ */
.dp-toast-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20, 37, 46, 0.5);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease, ease);
  padding: 2rem;
}
.dp-toast-overlay.open { opacity: 1; pointer-events: auto; }
.dp-toast {
  background: var(--paper, #fdfbf5);
  border: 1px solid var(--line, rgba(20,37,46,.18));
  border-radius: 12px;
  padding: 2.2rem 2.4rem;
  max-width: 460px; width: 100%;
  box-shadow: 0 20px 60px rgba(20,37,46,.25);
  transform: translateY(12px) scale(.98);
  transition: transform 240ms var(--ease, ease);
  text-align: center;
}
.dp-toast-overlay.open .dp-toast { transform: translateY(0) scale(1); }
.dp-toast .ico {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-size: 28px;
  background: rgba(95, 125, 113, 0.15);
  color: var(--sage-deep, #5f7d71);
}
.dp-toast.error .ico { background: rgba(219, 83, 64, 0.12); color: var(--pulse-deep, #b53a24); }
.dp-toast h4 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: .6rem;
  color: var(--ink, #14252e);
  letter-spacing: -0.01em;
}
.dp-toast p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted, #5a544c);
  margin-bottom: 1.4rem;
}
.dp-toast .ref {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pulse, #db5340);
  margin-bottom: 1rem;
  display: block;
}
.dp-toast button {
  background: var(--ink, #14252e);
  color: var(--paper, #fdfbf5);
  border: 0;
  padding: .7rem 1.8rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background 180ms;
}
.dp-toast button:hover { background: var(--pulse, #db5340); }

/* ============ Home hero CTAs — refined polish ============ */
.hero-ctas {
  display: flex !important;
  gap: 0.85rem !important;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2.2rem;
}
.hero-ctas .btn-primary,
.hero-ctas .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: all 0.28s var(--ease, cubic-bezier(.2,.7,.2,1));
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  border: 1.5px solid transparent;
}
.hero-ctas .btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 8px 20px -8px rgba(20, 37, 46, 0.35);
  border-color: var(--ink);
}
.hero-ctas .btn-primary:hover {
  background: var(--pulse);
  border-color: var(--pulse);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(219, 83, 64, 0.45);
}
.hero-ctas .btn-primary svg { width: 14px; height: 14px; stroke-width: 2; }

.hero-ctas .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line, rgba(20,37,46,0.22));
}
.hero-ctas .btn-ghost:hover {
  border-color: var(--ink);
  background: rgba(20, 37, 46, 0.04);
}
.hero-ctas .btn-ghost svg {
  width: 13px; height: 13px; stroke-width: 2;
  opacity: 0.55;
  transition: all 0.25s var(--ease);
}
.hero-ctas .btn-ghost:hover svg { opacity: 1; transform: translateX(2px); }

@media (max-width: 640px) {
  .hero-ctas { gap: 0.6rem !important; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    padding: 0.8rem 1.25rem;
    font-size: 0.85rem;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ============ Hero CTAs — force side-by-side (override width:100% from earlier ============ */
.hero-left .hero-ctas,
section.hero .hero-ctas {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.85rem !important;
  margin-top: 2.2rem !important;
  width: auto !important;
}
.hero-left .hero-ctas > a,
section.hero .hero-ctas > a {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 520px) {
  .hero-left .hero-ctas > a,
  section.hero .hero-ctas > a {
    flex: 1 1 calc(50% - 0.5rem) !important;
    justify-content: center !important;
  }
}

/* ============ Pagination — site-themed ============ */
.dp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 3rem 0 0.8rem;
}
.dp-pager .pg-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line, rgba(20,37,46,0.22));
  border-radius: 6px;
  transition: all 0.2s var(--ease);
  text-decoration: none;
}
.dp-pager .pg-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.dp-pager .pg-btn.disabled {
  color: var(--muted, #5a544c);
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.dp-pager .pg-pages {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0.4rem;
}
.dp-pager .pg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.4rem;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: 4px;
  transition: all 0.2s var(--ease);
  text-decoration: none;
}
.dp-pager .pg-num:hover {
  background: rgba(20, 37, 46, 0.06);
}
.dp-pager .pg-num.current {
  background: var(--pulse, #db5340);
  color: var(--paper);
}
.dp-pager .pg-dots {
  color: var(--muted, #5a544c);
  padding: 0 0.25rem;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.8rem;
}
.dp-pager-meta {
  text-align: center;
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted, #5a544c);
  margin-bottom: 2.5rem;
}
/* Safety net: shrink any stray SVGs in pagination */
.dp-pager svg, nav[role="navigation"] svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
}
@media (max-width: 520px) {
  .dp-pager { gap: 0.3rem; }
  .dp-pager .pg-btn { padding: 0.5rem 0.75rem; font-size: 0.7rem; }
  .dp-pager .pg-num { min-width: 30px; height: 30px; font-size: 0.75rem; }
}

/* ============ Mega-menu dropdown in header ============ */
.site-header .primary .has-mega {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.site-header .primary .mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.site-header .primary .mega-trigger .chev {
  transition: transform 0.25s var(--ease);
  opacity: 0.7;
}
.site-header .primary .has-mega:hover .mega-trigger .chev,
.site-header .primary .has-mega:focus-within .mega-trigger .chev {
  transform: rotate(180deg);
  opacity: 1;
}

.mega-panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  transform: translateX(-50%) translateY(-6px);
  min-width: 720px;
  max-width: 92vw;
  background: var(--paper);
  border: 1px solid var(--line, rgba(20,37,46,0.18));
  border-radius: 12px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 20px 50px -10px rgba(20, 37, 46, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  z-index: 500;
}
.site-header .primary .has-mega:hover .mega-panel,
.site-header .primary .has-mega:focus-within .mega-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-panel::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0; right: 0;
  height: 18px;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.6rem 2rem;
}
.mega-col { display: flex; flex-direction: column; min-width: 0; }
.mega-col-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line-soft, rgba(20,37,46,0.08));
  margin-bottom: 0.65rem;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
.mega-col-title .ico {
  font-size: 1.05rem;
  flex-shrink: 0;
}
.mega-col-title:hover { color: var(--pulse); }

.mega-sub {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.mega-sub a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--muted, #5a544c);
  text-decoration: none;
  padding: 0.18rem 0;
  transition: all 0.16s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.mega-sub a::before {
  content: "—";
  color: var(--line, rgba(20,37,46,0.22));
  font-family: var(--font-mono);
}
.mega-sub a:hover { color: var(--pulse); }

.mega-col-more {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pulse);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.4rem;
}
.mega-col-more:hover { color: var(--pulse-deep); }

@media (max-width: 900px) {
  /* Mega-menu hides on mobile — users use the drawer */
  .site-header .primary .mega-panel { display: none; }
}

/* ============ Drawer sub-categories (mobile) ============ */
.drawer-nav .drawer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding: inherit;
  font: inherit;
  color: inherit;
}
.drawer-nav .drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-nav .drawer-group > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--muted);
  transition: transform 0.2s ease;
  padding-right: 0.6rem;
}
.drawer-nav .drawer-group[open] > summary::after { content: "−"; }
.drawer-subs {
  padding: 0.4rem 0 0.8rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-left: 1px solid var(--line, rgba(20,37,46,0.15));
  margin: 0.6rem 0 0.6rem 0.8rem;
}
.drawer-subs a {
  padding: 0.35rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
}
.drawer-subs a.sub-parent {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1rem;
  font-weight: 500;
  padding-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.drawer-subs a.sub-parent .ico { font-size: 1rem; }
.drawer-subs a.sub-child {
  color: var(--muted, #5a544c);
  padding-left: 1rem;
  font-size: 0.82rem;
}
.drawer-subs a:hover { color: var(--pulse); }

/* =========================================================
   FIX PACK — mobile drawer categories + about section safety
   ========================================================= */

/* Drawer: Categories <summary> must match other top-level links */
.drawer-nav .drawer-group {
  border-bottom: 1px solid var(--line);
}
.drawer-nav .drawer-group > summary {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  padding: 1.25rem 0.5rem !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 1.75rem !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  list-style: none !important;
  cursor: pointer !important;
  border-bottom: 0 !important;
}
.drawer-nav .drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-nav .drawer-group > summary .num {
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.drawer-nav .drawer-group > summary::after {
  content: "+";
  margin-left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--muted);
}
.drawer-nav .drawer-group[open] > summary::after { content: "−"; }

/* Drawer: subcategory items — clean, no oversized styling inherited */
.drawer-subs {
  padding: 0.3rem 0 0.8rem 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 1px solid var(--line);
  margin: 0.2rem 0 0.4rem 0.6rem;
}
.drawer-nav .drawer-subs a {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.8rem !important;
  border-bottom: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  font-variation-settings: normal !important;
}
.drawer-nav .drawer-subs a.sub-parent {
  font-size: 1rem !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.drawer-nav .drawer-subs a.sub-parent .ico { font-size: 1.05rem; }
.drawer-nav .drawer-subs a.sub-child {
  font-size: 0.85rem !important;
  color: var(--muted) !important;
  padding-left: 1.5rem !important;
}
.drawer-nav .drawer-subs a:hover { color: var(--pulse) !important; }

/* About section: earlier collapse to 1-column so the dark panel stops crowding the text */
@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .about-visual { aspect-ratio: 5/4 !important; max-width: 640px; margin-inline: auto; }
  .brand-mark { width: 72% !important; }
}

/* About section safety: prevent column overflow causing apparent overlap */
.about-grid { min-width: 0; }
.about-visual, .about-content { min-width: 0; }

/* FIX PACK v2 — highest specificity override for drawer Categories summary */
#mobileDrawer .drawer-nav details.drawer-group > summary,
#mobileDrawer .drawer-nav details.drawer-group > summary span {
  font-family: "Fraunces", "Instrument Serif", serif;
}
#mobileDrawer .drawer-nav details.drawer-group > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.25rem 0.5rem;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  gap: 0.75rem;
}
#mobileDrawer .drawer-nav details.drawer-group > summary > span:first-child {
  font-size: 1.75rem;
  font-family: "Fraunces", "Instrument Serif", serif;
  line-height: 1.1;
}
#mobileDrawer .drawer-nav details.drawer-group > summary > .num {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  margin-left: auto;
}
#mobileDrawer .drawer-nav details.drawer-group > summary::-webkit-details-marker,
#mobileDrawer .drawer-nav details.drawer-group > summary::marker { display: none; content: ""; }

/* =========================================================
   FIX PACK v3 — clean category cards inside drawer
   ========================================================= */
#mobileDrawer .drawer-nav .drawer-subs {
  padding: 0.75rem 0 1.25rem 0 !important;
  margin: 0 !important;
  border-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--paper);
  border-radius: 14px;
  margin-top: 0.6rem !important;
  overflow: hidden;
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link {
  display: grid !important;
  grid-template-columns: 40px 1fr auto auto !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.9rem 1rem !important;
  border-bottom: 1px solid var(--line-soft, rgba(20,37,46,0.08)) !important;
  border-top: 0 !important;
  font-family: var(--font-display), "Fraunces", serif !important;
  font-weight: 400 !important;
  font-size: 1.02rem !important;
  letter-spacing: -0.005em !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: background 0.2s var(--ease, ease), color 0.2s var(--ease, ease);
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link:last-child { border-bottom: 0 !important; }

#mobileDrawer .drawer-nav .drawer-subs .cat-link .cat-ico {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.02rem;
  line-height: 1;
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link .cat-name {
  font-size: 1.02rem;
  color: var(--ink);
  font-family: var(--font-display), "Fraunces", serif;
  font-weight: 400;
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link .cat-idx {
  font-family: var(--font-mono), "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  font-weight: 500;
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link .cat-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--muted);
  transition: transform 0.2s var(--ease, ease), color 0.2s var(--ease, ease);
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link:hover {
  background: var(--bone);
  color: var(--pulse) !important;
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link:hover .cat-name { color: var(--pulse); }
#mobileDrawer .drawer-nav .drawer-subs .cat-link:hover .cat-arrow {
  color: var(--pulse);
  transform: translateX(3px);
}

/* "View all" CTA row */
#mobileDrawer .drawer-nav .drawer-subs .cat-link.cat-all {
  background: var(--ink);
  color: var(--paper) !important;
  margin-top: 0.25rem;
  border-bottom: 0 !important;
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link.cat-all .cat-name { color: var(--paper); }
#mobileDrawer .drawer-nav .drawer-subs .cat-link.cat-all .cat-ico {
  background: rgba(251,247,234,0.1);
  border-color: rgba(251,247,234,0.2);
  color: var(--paper);
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link.cat-all .cat-arrow { color: var(--pulse); }
#mobileDrawer .drawer-nav .drawer-subs .cat-link.cat-all:hover {
  background: var(--pulse);
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link.cat-all:hover .cat-ico {
  background: rgba(251,247,234,0.15);
}

/* Nested subcategory style (if any) */
#mobileDrawer .drawer-nav .drawer-subs .cat-link.cat-child {
  padding-left: 2.25rem !important;
  font-size: 0.92rem !important;
  color: var(--muted) !important;
  background: transparent;
}
#mobileDrawer .drawer-nav .drawer-subs .cat-link.cat-child .cat-ico {
  width: 18px; height: 18px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.9rem;
}