/* Hallmark · macrostructure: editorial-ledger
       Wide / narrow / full-bleed rhythm; one feature plate + index band
       instead of repeated equal card grids; a single accent used once. */

    /* ============================================================
       WEFTAVA — design tokens
       Natural Editorial Trade: materials first, specs as elements.
       ============================================================ */
    :root {
      /* Surfaces */
      --paper: #FAF8F4;
      --sand: #E8E0D2;
      --ink-block: #1C1916;

      /* Text */
      --ink: #14110E;
      --coffee: #4A443D;
      --muted: #6B6357;

      /* Accents — deliberately rationed.
         Ratio: paper+sand 85% / ink 10% / terracotta 3% / sage 2% */
      --terracotta: #A9552F;   /* CTA only. Appears ONCE per page. */
      --terracotta-dark: #8F4526;  /* CTA hover */
      --terracotta-press: #7A3A20; /* CTA active */
      --on-accent: #FFFFFF;        /* text on accent fills */
      --chip-raffia: #D9C79E;
      --chip-paper: #DCD7CB;
      --fibre: #C08A3E;        /* fibre swatches / table emphasis only */
      --sage: #7A8A6E;         /* factual status markers only */

      /* Rules */
      --rule: rgba(20, 17, 14, 0.10);
      --rule-strong: rgba(20, 17, 14, 0.22);

      /* Type */
      --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
      --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

      --fs-cap: 13px;
      --fs-table: 15px;
      --fs-body: 17px;
      --fs-sub: 21px;
      --fs-h2: clamp(28px, 3.1vw, 40px);
      --fs-h1: clamp(38px, 5.2vw, 68px);

      /* Spacing — 8px base, six steps only */
      --sp-1: 8px;
      --sp-2: 16px;
      --sp-3: 24px;
      --sp-4: 40px;
      --sp-5: 72px;
      --sp-6: 120px;

      --site-max-width: 1360px;
      --header-height: 76px;
    }

    /* ============================================================
       Reset & base
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.65;
      font-weight: 400;
      overflow-x: clip !important;  /* platform injects its own body overflow rule on save */
    }
    /*height: auto is required: HTML width/height attributes map to low-priority CSS, and without it height pins the image (this once pushed the /about column to 1000px tall).*/
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
    h1, h2, h3, p { margin: 0; }
    hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

    .container {
      width: 100%;
      max-width: var(--site-max-width);
      margin: 0 auto;
      padding: 0 48px;
    }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--terracotta);
      outline-offset: 3px;
    }

    /* ============================================================
       Header
       ============================================================ */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
    }
    .header-inner {
      height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
    }
    .brand-mark { display: flex; flex-direction: column; line-height: 1.1; }
    .brand-name {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink);
    }
    .brand-sub {
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--muted);
    }
    .header-nav {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }
    .nav-link {
      font-size: 15px;
      color: var(--coffee);
      padding: 6px 0;
      border-bottom: 1px solid transparent;
      transition: color .18s ease, border-color .18s ease;
    }
    .nav-link:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }

    .btn-header-cta {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      border: 1.5px solid var(--ink);
      border-radius: 2px;
      padding: 10px 20px;
      transition: background-color .18s ease, color .18s ease;
    }
    .btn-header-cta:hover { background: var(--ink); color: var(--paper); }

    .mobile-menu-btn {
      display: none;
      background: none;
      border: 0;
      cursor: pointer;
      color: var(--ink);
      padding: 8px;
      margin-right: -8px;
    }
    .mobile-nav-cta-box { display: none; }

    /* ============================================================
       Buttons & links
       ============================================================ */
    .btn-primary {
      display: inline-block;
      background: var(--terracotta);
      color: var(--on-accent);
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      padding: 18px 34px;
      border-radius: 2px;
      transition: background-color .18s ease;
    }
    .btn-primary:hover { background: var(--terracotta-dark); }

    .btn-secondary {
      display: inline-block;
      border: 1.5px solid var(--ink);
      color: var(--ink);
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      padding: 17px 32px;
      border-radius: 2px;
      transition: background-color .18s ease, color .18s ease;
    }
    .btn-secondary:hover { background: var(--ink); color: var(--paper); }

    .link-plain {
      font-size: 16px;
      color: var(--coffee);
      border-bottom: 1px solid var(--rule-strong);
      padding-bottom: 2px;
      transition: color .18s ease, border-color .18s ease;
    }
    .link-plain:hover { color: var(--ink); border-bottom-color: var(--ink); }

    /* Interaction states — active feedback + disabled affordance */
    .btn-primary:active,
    .btn-secondary:active,
    .btn-header-cta:active,
    .btn-drawer-cta:active {
      transform: translateY(1px);
    }
    .btn-primary:active { background: var(--terracotta-press); }
    .btn-primary:disabled,
    .btn-secondary:disabled,
    .btn-header-cta:disabled,
    .btn-drawer-cta:disabled,
    .btn-primary[aria-disabled="true"] {
      opacity: .45;
      cursor: not-allowed;
      pointer-events: none;
      transform: none;
    }

    /* ============================================================
       Section rhythm — wide / narrow / full / mid / narrow / mid / full
       ============================================================ */
    .section { padding: var(--sp-6) 0; }
    .section--sand { background: var(--sand); }

    .sec-title {
      font-family: var(--font-display);
      font-size: var(--fs-h2);
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: var(--ink);
    }
    .sec-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--sp-4);
      margin-bottom: var(--sp-4);
    }

    /* ============================================================
       ① HERO — asymmetric: copy left 40%, vertical fibre plate right 55%
       ============================================================ */
    .hero {
      position: relative;
      overflow: hidden;
      padding-top: var(--sp-4);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 40fr 55fr;
      gap: 5%;
      align-items: start;
    }
    .hero-copy { padding-bottom: var(--sp-4); }

    .hero-title {
      font-family: var(--font-display);
      font-size: var(--fs-h1);
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--ink);
      max-width: 12ch;
      margin-bottom: var(--sp-3);
    }
    .hero-lead {
      font-size: var(--fs-body);
      color: var(--coffee);
      max-width: 42ch;
      margin-bottom: var(--sp-4);
    }
    .hero-actions {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      flex-wrap: wrap;
    }

    .hero-media {
      position: relative;
      /* The plate runs past the section's lower edge — it pushes the layout open */
      margin-bottom: calc(var(--sp-5) * -1);
    }
    .hero-media img {
      width: 100%;
      /*Height cap: a portrait crop in a 55% column grows to ~960px, filling the whole first screen and leaving a large gap below. Switched to a controlled height; the image still overflows the block's lower edge, so the open-bottom effect is kept.*/
      height: clamp(340px, 42vh, 500px);
      object-fit: cover;
      object-position: 62% 42%;
    }

    /* Fibre index bar — an anchor, not decoration */
    .fibre-index {
      display: flex;
      gap: var(--sp-5);
      padding: var(--sp-3) 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      margin-top: var(--sp-3);
    }
    .fibre-index a {
      display: flex;
      align-items: center;
      gap: var(--sp-1);
      font-size: var(--fs-cap);
      letter-spacing: 0.04em;
      color: var(--coffee);
      white-space: nowrap;
      transition: color .18s ease;
    }
    .fibre-index li { flex: none; }
    /*Hide the scrollbar on horizontal-scroll containers - on mobile the grey bar is more distracting than the content.*/
    .fibre-index, .sil-index, .cmp-wrap {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .fibre-index::-webkit-scrollbar,
    .sil-index::-webkit-scrollbar,
    .cmp-wrap::-webkit-scrollbar { display: none; height: 0; }
    .fibre-index a:hover { color: var(--ink); }
    .fibre-chip {
      width: 12px;
      height: 12px;
      border-radius: 1px;
      flex: none;
    }
    .chip-raffia { background: var(--chip-raffia); }
    .chip-straw  { background: var(--fibre); }
    .chip-paper  { background: var(--chip-paper); }

    /* ============================================================
       ② ROLE — narrow centred column, typography only
       ============================================================ */
    .role-inner {
      max-width: 620px;
      margin: 0 auto;
    }
    .role-statement {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.3vw, 30px);
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: var(--sp-3);
    }
    .role-paths {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-4);
      margin-top: var(--sp-3);
    }
    .role-paths a {
      font-size: var(--fs-body);
      color: var(--ink);
      border-bottom: 1px solid var(--rule-strong);
      padding-bottom: 3px;
      transition: border-color .18s ease, color .18s ease;
    }
    .role-paths a:hover { border-bottom-color: var(--terracotta); color: var(--terracotta); }

    .role-three {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-4);
      margin-top: var(--sp-4);
      text-align: left;
    }
    .role-item { border-top: 2px solid var(--rule-strong); padding-top: var(--sp-2); }
    .role-link {
      display: inline-block;
      font-size: var(--fs-body);
      font-weight: 600;
      color: var(--ink);
      border-bottom: 1px solid var(--rule-strong);
      padding-bottom: 2px;
      margin-bottom: var(--sp-1);
      transition: color .18s ease, border-color .18s ease;
    }
    .role-link:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
    .role-item p { font-size: var(--fs-table); color: var(--coffee); line-height: 1.55; }

    /* ============================================================
       ③ MATERIALS — full width, table semantics
       ============================================================ */
    .fibre-grid { display: grid; grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-3);
      margin-top: var(--sp-4);
    }
    .fibre {
      border-top: 2px solid var(--rule-strong);
      padding-top: var(--sp-2);
    }
    .fibre img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      margin-bottom: var(--sp-2);
    }
    .fibre-name {
      font-size: var(--fs-cap);
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--ink);
      margin-bottom: var(--sp-1);
    }
    .fibre dl { font-size: var(--fs-table); }
    .fibre dt {
      font-size: 11px;
      letter-spacing: 0.05em;
      color: var(--muted);
      margin-top: var(--sp-2);
    }
    .fibre dd { color: var(--coffee); line-height: 1.5; margin-top: 2px; }

    /* ============================================================
       ④ SILHOUETTES — one large plate + horizontal index band
       ============================================================ */
    .sil-grid {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: var(--sp-4);
      align-items: start;
    }
    /*Compact stacking: space-between stretched 5 items to 500px with ~60px gaps, which read as empty. Height is now content-driven.*/
    .sil-index { display: flex; flex-direction: column; }
    .sil-feature img {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-height: 420px;
      object-fit: cover;
    }
    .sil-feature figcaption {
      margin-top: var(--sp-2);
      font-size: var(--fs-cap);
      color: var(--coffee);
    }
    .sil-feature .sil-name {
      font-size: var(--fs-sub);
      font-weight: 600;
      color: var(--ink);
      margin-right: var(--sp-1);
    }
    .sil-index { border-top: 1px solid var(--rule-strong); }
    .sil-index li { border-bottom: 1px solid var(--rule); }
    .sil-index a {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--sp-2);
      padding: var(--sp-3) 0;
      transition: color .18s ease;
    }
    .sil-index a:hover { color: var(--terracotta); }
    .sil-index .sil-label { font-size: var(--fs-sub); font-weight: 500; color: inherit; }
    .sil-index .sil-note { font-size: var(--fs-table); color: var(--muted); text-align: right; }

    /* ============================================================
       ⑤ HOW WE WORK — sticky title + numbered sequence
       ============================================================ */
    /*This section is type-only by design (narrow body + sidebar) with no images. 120px top and bottom padding, plus a left column 135px shorter than the right, made it read as empty. Padding is reduced to 72px here and the left column's top aligns with the right column's first line.*/
    .how { padding: var(--sp-5) 0; }
    .how-grid {
      display: grid;
      grid-template-columns: 1fr 1.7fr;
      gap: var(--sp-5);
      align-items: start;
    }
    .how-copy { position: sticky; top: calc(var(--header-height) + var(--sp-4)); }
    .how-copy .sec-title { margin-bottom: var(--sp-2); }
    .how-copy p { color: var(--coffee); max-width: 34ch; margin-bottom: var(--sp-3); }
    .how-steps { counter-reset: step; }
    .how-steps li {
      counter-increment: step;
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: var(--sp-2);
      padding: var(--sp-3) 0;
      border-top: 1px solid var(--rule);
    }
    .how-steps li:last-child { border-bottom: 1px solid var(--rule); }
    .how-steps li::before {
      content: counter(step, decimal-leading-zero);
      font-family: var(--font-display);
      font-size: var(--fs-sub);
      color: var(--muted);
    }
    .how-step-title { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
    .how-step-body { font-size: var(--fs-table); color: var(--coffee); margin-top: 4px; }

    /* ============================================================
       ⑥ FOR WHOM — unequal 2:1:1
       ============================================================ */
    .whom-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: var(--sp-4);
      /*center: the left column holds an image (470px) and the two right columns are text-only (183px), so start would pile all 287px at the bottom right. Centring spreads the space above and below so the three columns read as one group rather than full-left, empty-right.*/
      align-items: center;
    }
    .whom-wide img {
      width: 100%;
      /*Was 4:3, which came out 544px tall in a 2fr column against 109px for the two right columns, leaving the whole lower half empty. Changed to 3:2 so the three columns are closer in height.*/
      aspect-ratio: 16 / 10;
      object-fit: cover;
      margin-bottom: var(--sp-2);
    }
    .whom-grid h3 {
      font-family: var(--font-display);
      font-size: var(--fs-sub);
      font-weight: 500;
      line-height: 1.25;
      color: var(--ink);
      margin-bottom: var(--sp-1);
    }
    .whom-grid p { font-size: var(--fs-table); color: var(--coffee); }
    .whom-markets {
      margin-top: var(--sp-2);
      padding-top: var(--sp-2);
      border-top: 1px solid var(--rule);
    }

    /* ============================================================
       ⑦ INQUIRY — the only dark block, the only primary CTA
       ============================================================ */
    .inquiry {
      background: var(--ink-block);
      color: var(--paper);
      padding: var(--sp-6) 0;
    }
    .inquiry-inner { max-width: 860px; }
    .inquiry h2 {
      font-family: var(--font-display);
      font-size: var(--fs-h2);
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin-bottom: var(--sp-3);
    }
    /*This used to be four underlined <span>s that looked like empty inputs, so buyers assumed the form was broken. Replaced with one clear sentence; no more form-like appearance (2026-10-12).*/
    .inquiry-fields {
      margin-bottom: var(--sp-4);
      font-size: var(--fs-table);
      color: rgba(250, 248, 244, 0.72);
      max-width: 58ch;
    }
    .inquiry-note {
      margin-top: var(--sp-3);
      font-size: var(--fs-cap);
      color: rgba(250, 248, 244, 0.60);
      max-width: 62ch;
    }
    .status-flag {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--sage);
      border: 1px solid var(--sage);
      border-radius: 2px;
      padding: 2px 8px;
      vertical-align: middle;
      margin-left: var(--sp-1);
      white-space: nowrap;
    }

    /* ============================================================
       Footer
       ============================================================ */
    .site-footer {
      background: var(--paper);
      border-top: 1px solid var(--rule);
      padding: var(--sp-5) 0 var(--sp-3);
    }
    .footer-top-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: var(--sp-4);
      padding-bottom: var(--sp-4);
    }
    .footer-col-brand .brand-name { display: block; margin-bottom: var(--sp-2); }
    .footer-desc {
      font-size: var(--fs-table);
      color: var(--coffee);
      max-width: 38ch;
      margin-bottom: var(--sp-2);
    }
    .footer-contact { font-size: var(--fs-table); color: var(--coffee); line-height: 1.9; }
    .footer-contact a { border-bottom: 1px solid transparent; }
    .footer-contact a:hover { border-bottom-color: var(--rule-strong); }
    .footer-address { font-size: var(--fs-cap); color: var(--muted); margin-top: var(--sp-2); max-width: 30ch; }
    .footer-col-title {
      font-size: var(--fs-cap);
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--ink);
      margin-bottom: var(--sp-2);
    }
    .footer-links-list li { margin-bottom: 10px; }
    .footer-links-list a {
      font-size: var(--fs-table);
      color: var(--coffee);
      transition: color .18s ease;
    }
    .footer-links-list a:hover { color: var(--ink); }
    .footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
    .footer-legal a { color: var(--muted); border-bottom: 1px solid transparent; }
    .footer-legal a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }

    .footer-bottom-bar {
      display: flex;
      justify-content: space-between;
      gap: var(--sp-2);
      flex-wrap: wrap;
      padding-top: var(--sp-3);
      border-top: 1px solid var(--rule);
      font-size: var(--fs-cap);
      color: var(--muted);
    }

    /* ============================================================
       One-time load choreography — hero only, once, 120ms offset.
       No per-section scroll reveal (deliberately removed).
       ============================================================ */
    @keyframes hero-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }
    .hero-copy > * { animation: hero-in .7s ease both; }
    .hero-copy > *:nth-child(2) { animation-delay: .12s; }
    .hero-copy > *:nth-child(3) { animation-delay: .18s; }
    .hero-media { animation: hero-in .8s ease both; animation-delay: .06s; }
    .fibre-index { animation: hero-in .7s ease both; animation-delay: .24s; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ============================================================
       Responsive — mobile is a different composition, not a scale-down
       ============================================================ */
    @media (max-width: 900px) {
      .container { padding: 0 20px; }
      .header-nav {
        display: none;
        position: fixed;
        inset: var(--header-height) 0 0 0;
        background: var(--paper);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--sp-4) 20px;
        overflow-y: auto;
      }
      .header-nav.is-open { display: flex; }
      .header-nav .nav-link {
        font-size: 24px;
        padding: var(--sp-2) 0;
        width: 100%;
        border-bottom: 1px solid var(--rule);
      }
      .mobile-nav-cta-box { display: block; margin-top: var(--sp-4); }
      .btn-drawer-cta {
        display: inline-block;
        background: var(--terracotta);
        color: var(--on-accent);
        font-weight: 600;
        padding: 16px 28px;
        border-radius: 2px;
      }
      .mobile-nav-contacts {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: var(--sp-3);
        font-size: var(--fs-table);
        color: var(--coffee);
      }
      .header-actions .btn-header-cta { display: none; }
      .mobile-menu-btn { display: block; }

      .section { padding: var(--sp-5) 0; }
      .hero { padding-top: var(--sp-4); }

      .hero-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
      .hero-copy { padding-bottom: 0; order: 1; }
      .hero-media { order: 2; margin-bottom: 0; }
      .hero-media img { height: clamp(200px, 30vh, 280px); object-position: 62% 45%; }
      .hero-title { max-width: 100%; }
      .hero-actions .btn-secondary { width: 100%; text-align: center; }

      /*No horizontal scroll on mobile: four fibre names plus swatches do not fit in 390px, and scrolling truncated PAPER STRAW. Changed to a 2x2 grid so everything is visible at once.*/
      .fibre-index {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2) var(--sp-3);
        overflow-x: visible;
        margin-top: var(--sp-3);
      }

      .fibre-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-2); }

      .sil-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
      /*No horizontal scroll on mobile: 62%-wide items broke the caption text. Changed to a full-width vertical list.*/
      .sil-index { display: block; overflow-x: visible; border-top: 1px solid var(--rule-strong); }
      .sil-index li { width: auto; border-bottom: 1px solid var(--rule); }
      .sil-index a { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
      .sil-index .sil-note { text-align: right; }

      .how-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
      .how-copy { position: static; }
      .how-steps li { grid-template-columns: 40px 1fr; }

      .role-three { grid-template-columns: 1fr; gap: var(--sp-3); }
      .whom-grid { grid-template-columns: 1fr; gap: var(--sp-4); }

      .inquiry { padding: var(--sp-5) 0; }
      .inquiry .btn-primary { width: 100%; text-align: center; }

      .footer-top-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
      .footer-col-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 480px) {
      .fibre-grid { grid-template-columns: 1fr; }
      .footer-top-grid { grid-template-columns: 1fr; }
      .sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
    }

@media (max-width: 1024px) {
  img { max-width: 100% !important; }
  [style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  *, *::before, *::after { box-sizing: border-box; }
  body { overflow-x: hidden; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display: flex"] { max-width: 100% !important; flex-wrap: wrap !important; }
  img { max-width: 100% !important; }
  video { max-width: 100% !important; }
}

/*============================================================================
   WEFTAVA correction layer · 2026-10-14
   ----------------------------------------------------------------------------
   Why this layer exists (measured on the real render):
     1. The platform REPLACES inner-page header/footer with shared blocks, but the
        class names those blocks use (.main-nav / .nav-list / .footer-column-nav ...)
        had NO rules at all in base_css, so inner-page navigation collapsed into a
        vertical list of text (measured 168px tall).
     2. base_css loads AFTER in-page styles and wins where they conflict.
     3. base_css's `.site-footer { background: var(--paper) }` overrode the page's
        dark background while the text stayed #fff - white on white, invisible footer.
   This layer is appended to the end of base_css (later wins in the same sheet) and
   fixes the whole site in one pass.
   ==========================================================================*/

/*-- (1) Align tokens with the craft set --*/
:root {
  /*-- Surfaces --*/
  --canvas: #FAF8F5;
  --card-bg: #FFFFFF;
  --surface-warm: #F4EFEA;
  --surface-dark: #141312;
  /*-- Text --*/
  --ink: #141312;
  --ink-soft: #383430;
  --muted: #6B655D;
  --muted-light: #948C81;
  /*-- Accent --*/
  --terracotta: #B85336;
  --terracotta-hover: #9E432A;
  --terracotta-active: #853721;
  --brass: #A88243;
  --brass-tint: #F7F2E7;
  /*-- Rules --*/
  --border-subtle: rgba(20, 19, 18, 0.08);
  --border-medium: rgba(20, 19, 18, 0.15);
  --border-dark:   rgba(20, 19, 18, 0.85);
  /*-- Type scale --*/
  --fs-micro: 11px;
  --fs-caption: 13px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h3: clamp(20px, 2vw, 24px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-h1: clamp(38px, 4.8vw, 62px);
  /*-- Layout --*/
  --header-height: 84px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-subtle: 0 4px 20px rgba(20, 19, 18, 0.05);
  --shadow-card: 0 10px 32px rgba(20, 19, 18, 0.08);
  /*-- Legacy aliases (so references like var(--paper) keep resolving inside base_css) --*/
  --paper: #FAF8F5;
  --sand: #F4EFEA;
  --ink-block: #141312;
  --coffee: #383430;
  --rule: rgba(20, 19, 18, 0.08);
  --rule-strong: rgba(20, 19, 18, 0.15);
  --on-accent: #FFFFFF;
  --terracotta-dark: #9E432A;
  --terracotta-press: #853721;
  --fs-cap: 13px; --fs-table: 15px; --fs-sub: 21px;
}

/*-- (2) Footer background fix (the old rule used near-white var(--paper), which made the white text invisible) --*/
.site-footer {
  background: var(--surface-dark);
}

/*-- (3) Shared header/footer styles (extracted from home.html, includes the @media (max-width:960px) mobile drawer) --*/
/* ============================================================
       SITE HEADER & UNIFIED NAVIGATION (FIXED RUNNING-INTO ISSUE)
       ============================================================ */
    .site-header {
      position: relative;
      z-index: 100;
      background: rgba(250, 248, 245, 0.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border-subtle);
      height: var(--header-height);
    }
    .header-inner {
      height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand-group {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-shrink: 0;
    }
    .brand-logo-text {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--ink);
    }
    .brand-descriptor {
      font-size: var(--fs-micro);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--brass);
      font-weight: 600;
    }

    /* Fixed Desktop Nav: clear spacing and no wrapping overlap */
    .main-nav {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .nav-list {
      display: flex;
      align-items: center;
      gap: clamp(18px, 2.2vw, 36px);
      white-space: nowrap;
    }
    .nav-link {
      font-size: 15px;
      font-weight: 500;
      color: var(--ink-soft);
      padding: 8px 0;
      position: relative;
      transition: color 0.2s ease;
    }
    .nav-link:hover {
      color: var(--ink);
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--brass);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease;
    }
    .nav-link:hover::after { transform: scaleX(1); }

    .header-cta-group {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .btn-nav-inquiry {
      background: var(--ink);
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 500;
      padding: 10px 22px;
      border-radius: var(--radius-sm);
      letter-spacing: 0.02em;
      transition: background 0.2s ease, transform 0.15s ease;
      white-space: nowrap;
    }
    .btn-nav-inquiry:hover {
      background: var(--brass);
      transform: translateY(-1px);
    }

    .mobile-menu-btn {
      display: none;
      background: none;
      border: 1px solid var(--border-medium);
      padding: 8px 14px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border-radius: var(--radius-sm);
      color: var(--ink);
    }

/* ============================================================
       SITE FOOTER
       ============================================================ */
    .site-footer {
      background: var(--surface-dark);
      color: #FFFFFF;
      padding: 80px 0 32px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .footer-columns-row {
      display: grid;
      grid-template-columns: 1.5fr repeat(3, 1fr);
      gap: 48px;
      margin-bottom: 64px;
    }
    .footer-col-brand h4 {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 12px;
      letter-spacing: 0.04em;
    }
    .footer-col-brand p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.6;
      max-width: 320px;
      margin-bottom: 20px;
    }
    .footer-column-nav h5 {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--brass);
      margin-bottom: 20px;
    }
    .footer-column-nav ul {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-column-nav a {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      transition: color 0.2s ease;
    }
    .footer-column-nav a:hover { color: #FFFFFF; text-decoration: underline; }

    .footer-legal-bar {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
    }
    .footer-legal-links-list {
      display: flex;
      gap: 24px;
    }
    .footer-legal-links-list a:hover { color: #FFFFFF; }

@media (max-width: 960px) {
  .container {
    padding: 0 28px;
  }
  .main-nav {
    display: none;
  }
  body.nav-open .main-nav,
      .main-nav.is-open {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(250, 248, 245, 0.98);
    border-bottom: 2px solid var(--brass, #C5A880);
    box-shadow: 0 16px 36px rgba(20, 19, 18, 0.16);
    padding: 20px 24px 28px;
    z-index: 1000;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  body.nav-open .main-nav .nav-list,
      .main-nav.is-open .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body.nav-open .main-nav .nav-link,
      .main-nav.is-open .nav-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    display: block;
  }
  .mobile-menu-btn {
    display: block;
  }
  .footer-columns-row {
    grid-template-columns: 1fr 1fr; gap: 40px;
  }
}
@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
  .btn-nav-inquiry {
    display: none;
  }
  .footer-columns-row {
    grid-template-columns: 1fr; gap: 32px;
  }
  .footer-legal-bar {
    flex-direction: column; align-items: flex-start;
  }
}
@media (max-width: 390px) {
  .container {
    padding: 0 16px;
  }
}

/*============================================================
   WEFTAVA REDESIGN · base.css appended 2026-10-15 (handoff)
   Overrides / fills in .atelier-* .site-header .mobile-nav-* .btn-terracotta etc.
   ============================================================*/

/* ============================================================
   WEFTAVA ATELIER — CORE DESIGN SYSTEM (assets/css/base.css)
   Natural Editorial Trade — Craft, Material & Development
   ============================================================ */

:root {
  /* Surfaces */
  --color-paper: #FAF8F4;
  --color-paper-soft: #F4EFEA;
  --color-paper-warm: #EFE8DE;
  --color-card: #FFFFFF;
  --color-ink-block: #181614;

  /* Text & Inks */
  --color-ink: #14110E;
  --color-ink-soft: #38332E;
  --color-muted: #6B6358;
  --color-subtle: #968D81;

  /* Accents */
  --color-terracotta: #A9552F;
  --color-terracotta-hover: #8F4526;
  --color-terracotta-active: #78381D;
  --color-terracotta-subtle: #F6EDE8;

  /* Material & Status Tints */
  --color-raffia: #D9C79E;
  --color-jute: #A9834E;
  --color-straw: #DCD7CB;
  --color-sage: #566A4A;
  --color-brass: #A88243;

  /* Borders & Dividers */
  --border-hairline: rgba(20, 17, 14, 0.08);
  --border-light: rgba(20, 17, 14, 0.15);
  --border-dark: #14110E;

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Modular Spacing */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 36px;
  --sp-5: 64px;
  --sp-6: 100px;

  /* Layout Containers */
  --site-max-width: 1320px;
  --site-text-width: 760px;
  --header-height: 80px;
  --radius-sm: 2px;
  --radius-md: 4px;
}

/* Global Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Links & Media */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Layout Container */
.container {
  width: 100%;
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

.container-narrow {
  width: 100%;
  max-width: var(--site-text-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}

/* Typography Classes */
.font-display {
  font-family: var(--font-display);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-2);
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: var(--color-terracotta);
}

.lead-text {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  font-weight: 300;
}

/* Site Header & Navigation */
.site-header {
  position: relative;
  z-index: 10;
  background-color: rgba(250, 248, 244, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-hairline);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

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

.brand-mark {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  line-height: 1;
}

.brand-sub {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 3px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-soft);
  position: relative;
  padding: 6px 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--color-ink);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-terracotta);
}

.header-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile Nav Toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-light);
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-ink);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.mobile-nav-menu {
  display: none;
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--border-light);
  padding: var(--sp-3) var(--sp-4);
}

.mobile-nav-menu.open {
  display: block;
}

.mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-nav-list a {
  font-size: 16px;
  font-weight: 500;
  display: block;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-hairline);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-terracotta {
  background-color: var(--color-terracotta);
  color: #FFFFFF;
  border-color: var(--color-terracotta);
}

.btn-terracotta:hover {
  background-color: var(--color-terracotta-hover);
  border-color: var(--color-terracotta-hover);
  color: #FFFFFF;
}

.btn-terracotta:active {
  background-color: var(--color-terracotta-active);
  transform: translateY(1px);
}

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

.btn-outline:hover {
  background-color: var(--color-ink);
  color: #FFFFFF;
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-ink-soft);
  padding: 8px 14px;
}

.btn-ghost:hover {
  color: var(--color-terracotta);
}

/* Fact Badges & Meta Chips */
.fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  background-color: var(--color-paper-warm);
  border-radius: 2px;
  color: var(--color-ink-soft);
}

.fact-chip.verified {
  background-color: rgba(107, 124, 96, 0.12);
  color: var(--color-sage);
}

/* Spec Tables */
.spec-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-light);
  background-color: var(--color-card);
  border-radius: var(--radius-sm);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.spec-table th, .spec-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-hairline);
}

.spec-table th {
  background-color: var(--color-paper-soft);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  text-transform: uppercase;
}

.spec-table tr:last-child td {
  border-bottom: none;
}

/* Form Styling */
.b2b-form {
  background-color: var(--color-card);
  padding: var(--sp-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.form-group {
  margin-bottom: var(--sp-3);
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-ink);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  background-color: var(--color-paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  transition: border-color 0.2s ease, outline 0.2s ease;
}

.form-control:focus {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 1px;
  background-color: #FFFFFF;
}

/* Site Footer */
.site-footer {
  margin-top: auto;
  background-color: var(--color-ink-block);
  color: #EDE8E2;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-top: 1px solid var(--border-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.footer-col h4,
.footer-col .footer-col-title {
  color: #FFFFFF;
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: #B0A99F;
  font-size: 14px;
}

.footer-links a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: #8C847A;
}

/* Focus Visible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }
  .desktop-nav {
    gap: 18px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 70px;
    --sp-5: 48px;
    --sp-6: 64px;
  }
  .desktop-nav, .header-cta-group {
    display: none;
  }
  .mobile-nav-toggle {
    display: block;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}


    /*-- GEO direct-answer block --*/
    .section-faq-block { padding: var(--sp-5) 0; border-top: 1px solid var(--border-hairline); }
    .section-faq-block h2 { margin-bottom: var(--sp-3); }
    .faq-list { max-width: 100%; }
    .faq-item { border-bottom: 1px solid var(--border-hairline); }
    .faq-item summary {
      cursor: pointer; list-style: none; position: relative;
      padding: 18px 40px 18px 0;
      font-family: var(--font-display); font-size: 18px; font-weight: 500;
      color: var(--color-ink); line-height: 1.4;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      font-family: var(--font-body); font-size: 20px; color: var(--color-terracotta);
    }
    .faq-item[open] summary::after { content: "\2013"; }
    .faq-item summary:hover { color: var(--color-terracotta); }
    .faq-answer { padding: 0 40px 20px 0; color: var(--color-ink-soft); line-height: 1.7; font-size: 15px; }

/* ===== NAV FIT FIX 2026-10-23 ===== */
.desktop-nav .nav-link { white-space: nowrap !important; }
@media (min-width: 1201px) {
  .desktop-nav { gap: 16px !important; }
  .desktop-nav .nav-link { font-size: 14px !important; }
}
@media (max-width: 1200px) {
  .desktop-nav, .header-cta-group { display: none !important; }
  .mobile-nav-toggle { display: block !important; }
}
/* ===== END NAV FIT FIX ===== */

    /* ============================================================
       2026-10-28 · P1 可读性 / 对比度补丁（追加，最后加载）
       ============================================================ */

    /* --- 1. 字号：内容文字 13→14，说明文字 12→13 --- */
    .prod-specs-list,
    .term-card ul,
    .stage-deliverables,
    .stage-duration,
    .element-body p,
    .mat-bullet-list,
    .silhouette-meta,
    .beyond-card p,
    .shape-card-footer,
    .section-header-compact span,
    .form-label { font-size: 14px !important; }

    .craft-step p,
    .hero-caption,
    .panoramic-caption,
    .fact-chip,
    .footer-bottom,
    .element-specs,
    .hero-eyebrow,
    .trust-lbl,
    .silhouette-footer,
    .beyond-cta,
    .hero-spec-item .lbl { font-size: 13px !important; }

    /* --- 2. 对比度（WCAG AA） --- */
    /* 平台注入的语言切换器：0.75 透明白压 #2563eb = 3.61 */
    #w-floating-actions .w-lang-opt { color: #FFFFFF !important; }
    /* 页脚小字：内联 #787066 压 #181614 = 3.70 */
    .footer-col p[style*="font-size: 12px"] { color: #A89F92 !important; }
    /* products 页自带 :root 把 --muted 改成 #7A7267，强制回深色令牌 */
    :root { --muted: #6B6357 !important; }

    /* --- 3. 首页六道工序：桌面 6 列 → 3 列（原 138px 宽）--- */
    @media (min-width: 769px) {
      .craft-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    }

    /* --- 4. 手机端浮动工具条：缩小并贴边，减少遮挡 --- */
    @media (max-width: 480px) {
      .w-fab { right: 6px !important; bottom: 10px !important; gap: 6px !important; }
      .w-fab-btn { width: 36px !important; height: 36px !important; }
      .w-fab-btn svg { width: 17px !important; height: 17px !important; }
      .w-lang-opt { padding: 8px 12px !important; }
    }

    /* --- 2026-10-28 P1 修正 ②  --- */
    /* 工序图只按 width 属性渲染（200px），加 width:100% 才会撑满列宽 */
    .craft-step img { width: 100% !important; height: auto !important; }
    /* 语言切换「当前项」白字 + 20% 白底压蓝 = 3.62，把激活底色压深 */
    #w-floating-actions .w-lang-opt.w-lang-act { background: rgba(0,0,0,0.28) !important; color: #FFFFFF !important; }

    /* ============================================================
       2026-10-28 · P2 视觉修正 ① 内联小灰字统一（47 处 / 22 页）
       只命中「同时写了 12/13px 和 --color-muted」的内联元素，
       不碰继承字号或未写颜色的元素。
       ============================================================ */
    [style*="font-size:12px"][style*="--color-muted"],
    [style*="font-size:13px"][style*="--color-muted"] {
      font-size: 14px !important;
      color: var(--color-ink-soft) !important;
    }
    [style*="font-size:14px"][style*="--color-muted"] {
      color: var(--color-ink-soft) !important;
    }

    /* ============================================================
       2026-10-28 · P2 视觉修正 ② main 直属的孤立段落对齐到容器
       （原写法掉在 .container 之外，贴页面左边缘）
       ============================================================ */
    main > p[style*="margin-top:var(--sp-2)"] {
      max-width: var(--site-max-width);
      margin-left: auto;
      margin-right: auto;
      padding-left: 48px;
      padding-right: 48px;
    }
    @media (max-width: 900px) {
      main > p[style*="margin-top:var(--sp-2)"] {
        padding-left: 20px;
        padding-right: 20px;
      }
    }

    /* --- P2 修正 ③：内联写法带空格的变体（font-size: 12px）--- */
    [style*="font-size: 12px"][style*="--color-muted"],
    [style*="font-size: 13px"][style*="--color-muted"] {
      font-size: 14px !important;
      color: var(--color-ink-soft) !important;
    }
    [style*="font-size: 14px"][style*="--color-muted"] {
      color: var(--color-ink-soft) !important;
    }

    /* --- P2 修正 ④：孤立块 box-sizing，使左边缘与 .container 内容对齐 --- */
    main > p[style*="margin-top:var(--sp-2)"] {
      box-sizing: border-box;
      width: 100%;
    }

    /* --- P2 修正 ⑤：孤立块改用与 .container 相同的变量对齐 --- */
    main > p[style*="margin-top:var(--sp-2)"] {
      box-sizing: border-box;
      width: 100%;
      max-width: var(--site-max-width);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--sp-4);
      padding-right: var(--sp-4);
    }
    @media (max-width: 900px) {
      main > p[style*="margin-top:var(--sp-2)"] {
        padding-left: 20px;
        padding-right: 20px;
      }
    }

    /* ============================================================
       2026-10-28 · P2-3 "Who we serve" 卡片可点击
       ============================================================ */
    .who-card {
      transition: border-color .18s ease, background-color .18s ease;
    }
    .who-card:hover {
      border-color: var(--color-ink-soft) !important;
      background-color: var(--color-paper-soft);
    }
    .who-card-link {
      display: block;
      color: inherit;
      text-decoration: none;
    }
    .who-card .who-arrow {
      display: inline-block;
      margin-top: 10px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-ink-soft);
      transition: transform .18s ease;
    }
    .who-card:hover .who-arrow { transform: translateX(4px); }

    /* ============================================================
       2026-10-28 · P2-4 "Who we serve" 标题右侧配图
       ============================================================ */
    .who-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
      gap: var(--sp-4);
      align-items: center;
    }
    .who-figure { margin: 0; }
    .who-figure img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      object-position: center 45%;
    }
    @media (max-width: 900px) {
      .who-head {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
        align-items: start;
      }
      .who-figure img { height: 200px; }
    }
/* ===== 2026-10-30 P0 移动端导航修复 ===== */
/* 平台注入的死按钮（点了没反应） */
header .w-nav-toggle { display: none !important; }
/* 抽屉默认隐藏，.open 才显示（原站缺少这条，导致菜单常驻展开 154px 关不掉） */
.mobile-nav-menu { display: none; }
.mobile-nav-menu.open { display: block; }

/* ===== 2026-10-30 P1 商品卡防抖（3 行，覆盖德语/波兰语长词） ===== */
.prod-details h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
}
.prod-specs-list {
  margin-top: auto;
}