:root, [data-theme="light"] { --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --color-bg: #FAF8F5; --color-surface: #F7F3EE; --color-surface-2: #EFE9E1; --color-surface-offset: #E8E6E3; --color-border: rgba(42,42,42,0.14); --color-divider: rgba(42,42,42,0.10); --color-text: #2A2A2A; --color-text-muted: #5F6661; --color-text-faint: #7F867F; --color-text-inverse: #FAF8F5; --color-primary: #1B3A2D; --color-primary-hover: #2D5E48; --color-primary-highlight: #D4E8DE; --color-accent: #B08D6E; --shadow-sm: 0 1px 2px rgba(27,58,45,0.06); --shadow-md: 0 8px 24px rgba(27,58,45,0.08); --shadow-lg: 0 18px 40px rgba(27,58,45,0.12); --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; --font-display: 'DM Sans', sans-serif; --font-body: 'Inter', sans-serif; --transition: 180ms cubic-bezier(0.16,1,0.3,1); --content: 1200px; }
    [data-theme="dark"] { --color-bg: #111613; --color-surface: #18201b; --color-surface-2: #1f2a24; --color-surface-offset: #253229; --color-border: rgba(250,248,245,0.12); --color-divider: rgba(250,248,245,0.08); --color-text: #F0ECE6; --color-text-muted: #C7CCC8; --color-text-faint: #93A097; --color-text-inverse: #111613; --color-primary: #4A8068; --color-primary-hover: #D4E8DE; --color-primary-highlight: rgba(212,232,222,0.12); --color-accent: #D1B08C; --shadow-sm: 0 1px 2px rgba(0,0,0,0.24); --shadow-md: 0 8px 24px rgba(0,0,0,0.30); --shadow-lg: 0 18px 40px rgba(0,0,0,0.38); }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{min-height:100vh;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6} img,svg{display:block;max-width:100%;height:auto} a{text-decoration:none;color:inherit} button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
    .skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;background:var(--color-primary);color:var(--color-text-inverse);padding:.75rem 1rem;border-radius:var(--radius-md);z-index:1000} .container{width:min(calc(100% - 2rem), var(--content));margin-inline:auto}.section{padding:clamp(var(--space-12), 8vw, var(--space-24)) 0}
    .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:var(--text-xs);font-weight:700;color:var(--color-accent)} .section-title{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.05;max-width:16ch}.section-copy{max-width:65ch;color:var(--color-text-muted)}
    header{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--color-bg) 88%,transparent);border-bottom:1px solid var(--color-divider)} .nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:78px}.brand{display:flex;align-items:center;gap:.9rem;font-family:var(--font-display);font-weight:700} .brand-mark{width:42px;height:42px;border-radius:12px;background:var(--color-primary);color:var(--color-text-inverse);display:grid;place-items:center;box-shadow:var(--shadow-sm)} .nav-links{display:flex;gap:var(--space-5);flex-wrap:wrap}.nav-links a{font-size:var(--text-sm);color:var(--color-text-muted)}.nav-links a:hover{color:var(--color-primary)} .nav-actions{display:flex;align-items:center;gap:.75rem}.theme-toggle{width:44px;height:44px;border-radius:999px;border:1px solid var(--color-border);display:grid;place-items:center;background:var(--color-surface)}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.1rem;border-radius:var(--radius-full);font-weight:600;transition:all var(--transition)} .btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{border:1px solid var(--color-border);background:var(--color-surface)}
    .hero{padding:clamp(var(--space-12),7vw,var(--space-24)) 0 var(--space-16)} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-10);align-items:stretch}.hero-copy{display:flex;flex-direction:column;gap:var(--space-6)} .hero h1{font-family:var(--font-display);font-size:var(--text-2xl);line-height:.95;letter-spacing:-.04em;max-width:11ch}
    .hero-panel{background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);border-radius:var(--radius-xl);padding:clamp(var(--space-8),4vw,var(--space-12));color:var(--color-text-inverse);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-8);box-shadow:var(--shadow-lg);min-height:420px;position:relative;overflow:hidden} .hero-panel::after{content:"";position:absolute;right:-12%;bottom:-18%;width:260px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, rgba(212,232,222,.24), rgba(212,232,222,0))}
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)} .stat{padding-top:var(--space-4);border-top:1px solid rgba(250,248,245,.18)} .stat strong{display:block;font-family:var(--font-display);font-size:var(--text-lg)} .stat span{font-size:var(--text-sm);color:rgba(250,248,245,.8)}
    .grid-2{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-8);align-items:start} .story-card,.product-card,.info-card,.contact-card,.cta-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)} .story-card,.info-card,.contact-card,.cta-panel{padding:var(--space-8)}
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-8)} .feature{padding:var(--space-5);background:var(--color-surface-2);border-radius:var(--radius-lg)} .feature strong{display:block;margin-bottom:.35rem;font-family:var(--font-display)} .feature p{color:var(--color-text-muted);font-size:var(--text-sm)}
    .products-head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-6);margin-bottom:var(--space-8)} .product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)} .product-card{overflow:hidden}
    .product-photo{aspect-ratio: 4/3; background:linear-gradient(135deg,#d8ddd7,#f4efe8); border-bottom:1px solid var(--color-border); display:grid; place-items:center; padding:1rem}.product-photo svg{width:100%;height:100%;max-width:280px;max-height:180px;color:var(--color-primary)}
    .product-content{padding:var(--space-6);display:grid;gap:var(--space-4)} .product-type{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);font-weight:700} .product-content h3,.info-card h3,.contact-card h3,.cta-panel h3{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.1}.product-content ul{display:grid;gap:.6rem}.product-content li{list-style:none;color:var(--color-text-muted);font-size:var(--text-sm);padding-top:.6rem;border-top:1px solid var(--color-divider)}
    .cta-panel{margin-top:var(--space-8);display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2))}
    .about-grid,.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)} .contact-list{display:grid;gap:.8rem;list-style:none;margin-top:var(--space-4)} .contact-list strong{display:block;color:var(--color-text)}
    .footer{padding:var(--space-12) 0;border-top:1px solid var(--color-divider);margin-top:var(--space-12)} .footer-row{display:flex;justify-content:space-between;gap:var(--space-4);align-items:center;flex-wrap:wrap} .footer p{color:var(--color-text-muted);font-size:var(--text-sm)}
    @media (max-width: 980px){.hero-grid,.grid-2,.product-grid,.about-grid,.contact-grid,.features,.cta-panel{grid-template-columns:1fr;display:grid}.products-head,.nav{align-items:flex-start}.nav{flex-wrap:wrap;padding:.85rem 0}.nav-links{order:3;width:100%;padding-top:.25rem}.hero-panel{min-height:auto}.hero-stats{grid-template-columns:1fr}} @media (max-width: 640px){.nav-actions{width:100%;justify-content:space-between}.btn{width:100%}}
  
    .catalogue-panel {
      background: linear-gradient(180deg, rgba(27,58,45,0.04), rgba(27,58,45,0.01));
      border-top: 1px solid rgba(27,58,45,0.08);
      border-bottom: 1px solid rgba(27,58,45,0.08);
    }

    .catalogue-shell {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 24px;
      align-items: start;
    }

    .catalogue-intro-card,
    .catalogue-page-card {
      background: #fff;
      border-radius: 24px;
      border: 1px solid rgba(27,58,45,0.12);
      padding: 24px;
      box-shadow: 0 10px 30px rgba(27,58,45,0.06);
    }

    .catalogue-list {
      margin-top: 16px;
      display: grid;
      gap: 10px;
      padding-left: 18px;
      color: var(--color-text-muted);
    }

    .catalogue-gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .catalogue-page-card img {
      width: 100%;
      border-radius: 18px;
      margin-bottom: 16px;
      object-fit: cover;
      background: #f2ece4;
    }

    .catalogue-page-card.text-only {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    @media (max-width: 900px) {
      .catalogue-shell,
      .catalogue-gallery {
        grid-template-columns: 1fr;
      }
    }


    .focal-logo {
      transform: scale(1.08);
    }

    .hero-logo-lockup {
      position: relative;
      width: 132px;
      height: 132px;
      margin-bottom: 22px;
      display: grid;
      place-items: center;
    }

    .hero-logo-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle at center, rgba(176,141,110,0.16), rgba(176,141,110,0.04) 58%, transparent 70%);
      border: 1px solid rgba(176,141,110,0.35);
      box-shadow: 0 20px 50px rgba(27,58,45,0.16);
    }

    .hero-logo-lockup .brand-mark,
    .hero-copy > .brand-mark,
    .hero-copy .focal-logo {
      position: relative;
      z-index: 2;
      width: 86px;
      height: 86px;
      color: var(--color-bronze);
      background: rgba(255,255,255,0.82);
      border-radius: 50%;
      padding: 16px;
      box-shadow: 0 12px 30px rgba(27,58,45,0.18);
    }

    .hero-copy h1 {
      max-width: 11ch;
    }

    .hero {
      background:
        radial-gradient(circle at top left, rgba(176,141,110,0.10), transparent 34%),
        linear-gradient(135deg, rgba(27,58,45,0.05), rgba(74,128,104,0.04));
    }

    .site-header {
      backdrop-filter: blur(12px);
    }


    .configurator-card {
      margin-top: 28px;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 24px;
      background: linear-gradient(135deg, rgba(27,58,45,0.06), rgba(176,141,110,0.08));
      border: 1px solid rgba(27,58,45,0.12);
      border-radius: 28px;
      padding: 28px;
    }

    .configurator-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .configurator-grid label {
      display: grid;
      gap: 8px;
      font-size: 0.95rem;
      color: var(--color-text-muted);
    }

    .configurator-grid select {
      border: 1px solid rgba(27,58,45,0.16);
      border-radius: 14px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.92);
      color: var(--color-charcoal);
    }

    .configurator-output {
      display: grid;
      gap: 16px;
    }

    .configurator-visual,
    .configurator-result {
      background: #fff;
      border-radius: 22px;
      border: 1px solid rgba(27,58,45,0.12);
      box-shadow: 0 10px 30px rgba(27,58,45,0.06);
    }

    .configurator-visual {
      overflow: hidden;
      min-height: 240px;
    }

    .configurator-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .configurator-result {
      padding: 20px;
    }

    .configurator-result ul {
      margin-top: 14px;
      padding-left: 18px;
      color: var(--color-text-muted);
      display: grid;
      gap: 8px;
    }

    @media (max-width: 900px) {
      .configurator-card,
      .configurator-grid {
        grid-template-columns: 1fr;
      }
    }


    .contact-hem-style {
      background: linear-gradient(180deg, rgba(27,58,45,0.06), rgba(176,141,110,0.05));
    }

    .contact-shell {
      display: grid;
      gap: 28px;
    }

    .contact-intro {
      max-width: 760px;
    }

    .contact-card-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr 1fr;
      gap: 20px;
    }

    .contact-panel {
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(27,58,45,0.12);
      border-radius: 26px;
      padding: 28px;
      box-shadow: 0 14px 36px rgba(27,58,45,0.08);
      min-height: 100%;
    }

    .contact-panel.primary {
      background: linear-gradient(135deg, rgba(27,58,45,0.94), rgba(45,94,72,0.92));
      color: #faf8f5;
    }

    .contact-panel.primary a,
    .contact-panel.primary p,
    .contact-panel.primary .contact-label {
      color: #faf8f5;
    }

    .contact-panel a {
      display: inline-block;
      font-size: clamp(1.3rem, 2vw, 2rem);
      font-weight: 700;
      line-height: 1.2;
      color: var(--color-green);
      margin: 6px 0 14px;
      word-break: break-word;
    }

    .contact-panel h3 {
      font-size: 1.35rem;
      margin-top: 4px;
      margin-bottom: 12px;
    }

    .contact-label {
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.78rem;
      color: var(--color-text-muted);
      margin-bottom: 10px;
    }

    .contact-panel ul {
      padding-left: 18px;
      display: grid;
      gap: 10px;
      color: var(--color-text-muted);
    }

    @media (max-width: 960px) {
      .contact-card-grid {
        grid-template-columns: 1fr;
      }
    }


    .contact-editorial {
      background: #d9d4ca;
      color: #2a2a2a;
    }

    .contact-editorial-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 56px;
      align-items: start;
    }

    .contact-brand-column,
    .contact-form-column {
      min-width: 0;
    }

    .contact-brand-lockup {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 34px;
    }

    .contact-brand-logo {
      width: 78px;
      height: 78px;
      color: #b08d6e;
      flex: 0 0 auto;
    }

    .contact-brand-name {
      letter-spacing: 0.18em;
      font-size: 1.05rem;
      color: #b08d6e;
      margin-bottom: 6px;
    }

    .contact-brand-sub {
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 0.7rem;
      color: rgba(42,42,42,0.55);
    }

    .contact-brand-column h2 {
      font-family: var(--font-display, serif);
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1.16;
      max-width: 10ch;
      margin-bottom: 28px;
    }

    .contact-divider {
      width: 66px;
      height: 2px;
      background: #b08d6e;
      margin: 0 0 28px;
    }

    .contact-brand-column > p,
    .contact-meta p {
      max-width: 34ch;
      color: rgba(42,42,42,0.72);
      font-size: 1.02rem;
    }

    .contact-meta {
      margin-top: 30px;
      display: grid;
      gap: 10px;
    }

    .contact-meta a {
      color: #b08d6e;
    }

    .contact-form-title {
      font-family: var(--font-display, serif);
      font-size: clamp(2rem, 3.6vw, 3.2rem);
      margin-bottom: 28px;
    }

    .contact-form {
      display: grid;
      gap: 20px;
    }

    .contact-form label {
      display: grid;
      gap: 10px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 0.78rem;
      color: rgba(42,42,42,0.72);
    }

    .contact-form input,
    .contact-form textarea {
      border: 1px solid rgba(176,141,110,0.55);
      background: rgba(255,255,255,0.38);
      border-radius: 6px;
      padding: 18px 18px;
      font-size: 1rem;
      color: #2a2a2a;
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: rgba(42,42,42,0.45);
    }

    .contact-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
      padding: 16px 28px;
      background: #2c2a25;
      color: #f6f1ea;
      border-radius: 0;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 0.84rem;
      width: fit-content;
      min-width: 270px;
    }

    @media (max-width: 980px) {
      .contact-editorial-grid {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .contact-submit {
        width: 100%;
      }
    }


    .brand {
      display: inline-flex;
      align-items: center;
    }

    .site-logo {
      width: clamp(168px, 20vw, 250px);
      height: auto;
      display: block;
    }

    .contact-logo-image {
      width: min(100%, 340px);
      height: auto;
      display: block;
    }

    .contact-brand-lockup {
      margin-bottom: 28px;
    }


    .brand-with-logo {
      min-width: 220px;
      display: flex;
      align-items: center;
    }

    .site-logo {
      width: 240px !important;
      max-width: 42vw;
      min-width: 180px;
      height: auto !important;
      object-fit: contain;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      filter: none !important;
    }

    .site-header .brand-mark,
    .hero .brand-mark,
    .contact-brand-logo {
      display: none !important;
    }

    .contact-brand-lockup {
      display: block !important;
      margin-bottom: 28px;
    }

    .contact-logo-image {
      width: 320px !important;
      max-width: 100%;
      height: auto !important;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      object-fit: contain;
    }


    .nav {
      display: grid !important;
      grid-template-columns: auto 1fr auto !important;
      align-items: center !important;
      gap: 24px !important;
    }
    .brand-with-logo {
      display: block !important;
      width: 260px !important;
      min-width: 220px !important;
      flex: none !important;
    }
    .brand-with-logo span, .brand-mark { display:none !important; }
    .site-logo {
      display: block !important;
      width: 100% !important;
      max-width: 260px !important;
      height: auto !important;
      background: transparent !important;
      object-fit: contain !important;
    }
    .nav-links {
      display: flex !important;
      justify-content: center !important;
      gap: 28px !important;
      flex-wrap: wrap !important;
    }
    .nav-actions { display:flex !important; align-items:center !important; gap:12px !important; }
    .hero-grid {
      display: grid !important;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr) !important;
      gap: 56px !important;
      align-items: end !important;
    }
    .hero-copy {
      display: block !important;
      padding-top: 72px !important;
      max-width: 680px !important;
    }
    .hero-copy h1 {
      font-size: clamp(3.4rem, 8vw, 6.2rem) !important;
      line-height: 0.92 !important;
      letter-spacing: -0.05em !important;
      max-width: 7ch !important;
      margin: 10px 0 20px !important;
      position: static !important;
    }
    .hero-copy p { max-width: 54ch !important; }
    .hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-top:24px; }
    .hero-panel {
      margin-top: 140px !important;
      align-self: end !important;
      position: relative !important;
      z-index: 1 !important;
    }
    .contact-brand-lockup {
      display:block !important;
      width:100% !important;
      margin-bottom:32px !important;
    }
    .contact-logo-image {
      display:block !important;
      width: min(360px, 100%) !important;
      height:auto !important;
      background: transparent !important;
      object-fit: contain !important;
    }
    @media (max-width: 900px) {
      .nav { grid-template-columns: 1fr !important; }
      .nav-links { justify-content: flex-start !important; }
      .nav-actions { justify-content: flex-start !important; flex-wrap:wrap !important; }
      .hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
      .hero-panel { margin-top: 12px !important; }
      .hero-copy h1 { max-width: 9ch !important; font-size: clamp(2.8rem, 14vw, 4.6rem) !important; }
    }


    .product-grid-fixed { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:20px !important; }
    .product-card-fixed { overflow:hidden; border-radius:28px; background:#fff; border:1px solid rgba(27,58,45,.12); box-shadow:0 12px 30px rgba(27,58,45,.06); }
    .actual-product-shot { padding:0 !important; aspect-ratio: 1 / 1; background:#ece5dc; overflow:hidden; }
    .actual-product-shot img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; opacity:1 !important; }
    .product-copy { padding:24px; }
    .configurator-card { margin-top:28px; }
    @media (max-width: 900px) { .product-grid-fixed { grid-template-columns:1fr !important; } }


    .configurator-actions { margin-top: 18px; display:flex; }
    .configurator-go { min-width: 140px; }


    .container {
      width: min(1320px, calc(100% - 96px)) !important;
      margin-inline: auto !important;
    }

    .section {
      padding-block: clamp(88px, 10vw, 144px) !important;
    }

    .hero {
      padding-top: 32px !important;
      padding-bottom: 72px !important;
    }

    .hero-grid,
    .contact-editorial-grid,
    .catalogue-shell,
    .product-grid-fixed {
      gap: 32px !important;
    }

    @media (max-width: 900px) {
      .container {
        width: min(100%, calc(100% - 40px)) !important;
      }

      .section {
        padding-block: clamp(64px, 8vw, 88px) !important;
      }
    }


    .container {
      width: min(1200px, calc(100% - 160px)) !important;
      margin-inline: auto !important;
    }

    body {
      padding-inline: 0 !important;
    }

    .section {
      padding-block: clamp(104px, 12vw, 176px) !important;
    }

    .hero {
      padding-top: 56px !important;
      padding-bottom: 96px !important;
    }

    @media (max-width: 1100px) {
      .container {
        width: min(100%, calc(100% - 80px)) !important;
      }
    }

    @media (max-width: 768px) {
      .container {
        width: min(100%, calc(100% - 40px)) !important;
      }
      .section {
        padding-block: clamp(80px, 10vw, 112px) !important;
      }
    }


    .container {
      width: min(1040px, calc(100% - 220px)) !important;
      margin-inline: auto !important;
    }

    .hero-copy,
    .intro-copy,
    .contact-panel,
    .about-copy,
    .product-copy,
    .section-heading {
      max-width: 62ch !important;
    }

    @media (max-width: 1440px) {
      .container {
        width: min(980px, calc(100% - 200px)) !important;
      }
    }

    @media (max-width: 1280px) {
      .container {
        width: min(920px, calc(100% - 180px)) !important;
      }
    }

    @media (max-width: 1100px) {
      .container {
        width: min(860px, calc(100% - 140px)) !important;
      }
    }

    @media (max-width: 900px) {
      .container {
        width: min(100%, calc(100% - 72px)) !important;
      }
    }

    @media (max-width: 768px) {
      .container {
        width: min(100%, calc(100% - 40px)) !important;
      }
    }


    body {
      padding-inline: 32px !important;
    }

    @media (min-width: 1280px) {
      body {
        padding-inline: 64px !important;
      }
    }

    @media (max-width: 768px) {
      body {
        padding-inline: 20px !important;
      }
    }


    html, body {
      overflow-x: hidden !important;
    }

    body {
      margin: 0 !important;
      padding-inline: 0 !important;
    }

    .container,
    header .container,
    main .container,
    footer .container,
    .hero,
    .section,
    .contact-editorial,
    .catalogue-shell,
    .contact-shell,
    .contact-editorial-grid,
    .hero-grid {
      padding-left: max(28px, env(safe-area-inset-left)) !important;
      padding-right: max(28px, env(safe-area-inset-right)) !important;
      box-sizing: border-box !important;
    }

    @media (min-width: 1024px) {
      .container,
      header .container,
      main .container,
      footer .container,
      .hero,
      .section,
      .contact-editorial,
      .catalogue-shell,
      .contact-shell,
      .contact-editorial-grid,
      .hero-grid {
        padding-left: 48px !important;
        padding-right: 48px !important;
      }
    }


    :root, [data-theme="light"] {
      --color-text-muted: #454b47 !important;
      --color-text-faint: #5a605c !important;
      --color-primary-highlight: #b9d0c5 !important;
      --color-accent: #8f6f55 !important;
    }

    [data-theme="dark"] {
      --color-text: #f3efe8 !important;
      --color-text-muted: #ddd6cb !important;
      --color-text-faint: #c3bbb0 !important;
      --color-text-inverse: #111614 !important;
      --color-primary-highlight: #dbe8e1 !important;
      --color-accent: #d2b08c !important;
    }

    .section-copy,
    .product-copy p,
    .info-card p,
    .contact-panel p,
    .contact-panel ul,
    .configurator-result ul,
    .catalogue-note,
    .stat span,
    .eyebrow,
    .contact-label,
    .hero p,
    p[style*="rgba(250,248,245,.82)"],
    [style*="color:#D4E8DE"],
    [style*="color:rgba(250,248,245,.82)"],
    [style*="color:rgba(250,248,245,.8)"] {
      color: var(--color-text-muted) !important;
    }

    .contact-panel.primary,
    .contact-panel.primary p,
    .contact-panel.primary li,
    .contact-panel.primary .contact-label,
    .hero-panel,
    .hero-panel p,
    .hero-panel .eyebrow,
    .hero-panel .stat span {
      color: rgba(250, 248, 245, 0.96) !important;
    }

    .contact-panel a,
    a[style*="#B08D6E"],
    [style*="color: #B08D6E"],
    [style*="color:#B08D6E"] {
      color: var(--color-accent) !important;
      font-weight: 600 !important;
    }


    [data-theme="dark"] {
      --color-bg: #0f1411 !important;
      --color-surface: #18211b !important;
      --color-surface-2: #202a23 !important;
      --color-surface-offset: #28342d !important;
      --color-text: #fffaf2 !important;
      --color-text-muted: #f0e8dc !important;
      --color-text-faint: #ddd2c3 !important;
      --color-divider: rgba(255,250,242,0.16) !important;
      --color-border: rgba(255,250,242,0.18) !important;
      --color-primary: #5f9d80 !important;
      --color-primary-hover: #8bb7a2 !important;
      --color-primary-highlight: #edf6f1 !important;
      --color-accent: #e0bf98 !important;
    }

    [data-theme="dark"] body,
    [data-theme="dark"] p,
    [data-theme="dark"] li,
    [data-theme="dark"] .section-copy,
    [data-theme="dark"] .product-copy p,
    [data-theme="dark"] .info-card p,
    [data-theme="dark"] .contact-panel p,
    [data-theme="dark"] .contact-panel ul,
    [data-theme="dark"] .catalogue-note,
    [data-theme="dark"] .configurator-result ul,
    [data-theme="dark"] .stat span,
    [data-theme="dark"] .contact-label,
    [data-theme="dark"] .eyebrow {
      color: var(--color-text-muted) !important;
    }

    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] strong,
    [data-theme="dark"] .section-title,
    [data-theme="dark"] .brand,
    [data-theme="dark"] .nav a,
    [data-theme="dark"] .product-copy h3,
    [data-theme="dark"] .contact-panel h3 {
      color: var(--color-text) !important;
    }

    [data-theme="dark"] .story-card,
    [data-theme="dark"] .product-card,
    [data-theme="dark"] .info-card,
    [data-theme="dark"] .contact-card,
    [data-theme="dark"] .cta-panel,
    [data-theme="dark"] .configurator-card,
    [data-theme="dark"] .configurator-result,
    [data-theme="dark"] .contact-panel {
      background: #1b241e !important;
      border-color: rgba(255,250,242,0.16) !important;
    }

    [data-theme="dark"] .hero-panel,
    [data-theme="dark"] .contact-panel.primary {
      background: linear-gradient(160deg, #214232 0%, #2d5e48 100%) !important;
      color: #fffaf2 !important;
    }

    [data-theme="dark"] .hero-panel p,
    [data-theme="dark"] .hero-panel .eyebrow,
    [data-theme="dark"] .hero-panel .stat span,
    [data-theme="dark"] .contact-panel.primary p,
    [data-theme="dark"] .contact-panel.primary li,
    [data-theme="dark"] .contact-panel.primary .contact-label,
    [data-theme="dark"] .contact-panel.primary a {
      color: rgba(255,250,242,0.96) !important;
    }

    [data-theme="dark"] a,
    [data-theme="dark"] .contact-panel a {
      color: var(--color-accent) !important;
    }


    .contact-editorial,
    .contact-editorial * {
      color: #2f2f2f !important;
    }

    .contact-editorial .contact-copy p,
    .contact-editorial .contact-meta p,
    .contact-editorial .contact-form-title,
    .contact-editorial .contact-form label,
    .contact-editorial .contact-form input,
    .contact-editorial .contact-form textarea {
      color: #2f2f2f !important;
    }

    .contact-editorial .contact-meta a,
    .contact-editorial .contact-divider {
      color: #7a5a43 !important;
      border-color: #7a5a43 !important;
      background: #7a5a43 !important;
    }

    .catalogue-panel,
    .catalogue-panel * {
      color: #2f2f2f !important;
    }

    .catalogue-panel .eyebrow,
    .catalogue-panel a,
    .catalogue-panel .catalogue-note {
      color: #7a5a43 !important;
    }

    [data-theme="dark"] .contact-editorial,
    [data-theme="dark"] .contact-editorial * {
      color: #f5efe6 !important;
    }

    [data-theme="dark"] .contact-editorial .contact-meta a,
    [data-theme="dark"] .contact-editorial .contact-divider {
      color: #e3c19c !important;
      border-color: #e3c19c !important;
      background: #e3c19c !important;
    }

    [data-theme="dark"] .catalogue-panel,
    [data-theme="dark"] .catalogue-panel * {
      color: #f5efe6 !important;
    }

    [data-theme="dark"] .catalogue-panel .eyebrow,
    [data-theme="dark"] .catalogue-panel a,
    [data-theme="dark"] .catalogue-panel .catalogue-note {
      color: #e3c19c !important;
    }


    .contact-editorial {
      background: #d9d4ca !important;
      color: #222222 !important;
    }

    .contact-brand-column h2,
    .contact-brand-column > p,
    .contact-meta p,
    .contact-form-title,
    .contact-form label,
    .contact-form input,
    .contact-form textarea,
    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: #222222 !important;
      opacity: 1 !important;
    }

    .contact-meta a,
    .contact-brand-name,
    .contact-divider {
      color: #6f4e37 !important;
      background: #6f4e37 !important;
      border-color: #6f4e37 !important;
    }

    .contact-brand-sub {
      color: #4a4a4a !important;
    }

    .catalogue-panel {
      background: #f2efea !important;
      color: #222222 !important;
    }

    .catalogue-intro-card,
    .catalogue-page-card,
    .catalogue-panel .section-heading,
    .catalogue-panel p,
    .catalogue-panel li,
    .catalogue-panel h2,
    .catalogue-panel h3 {
      color: #222222 !important;
      opacity: 1 !important;
    }

    .catalogue-list {
      color: #222222 !important;
    }

    .catalogue-panel .eyebrow,
    .catalogue-panel a,
    .catalogue-panel .catalogue-note {
      color: #6f4e37 !important;
    }

    [data-theme="dark"] .contact-editorial {
      background: #1a211d !important;
      color: #f7f1e8 !important;
    }

    [data-theme="dark"] .contact-brand-column h2,
    [data-theme="dark"] .contact-brand-column > p,
    [data-theme="dark"] .contact-meta p,
    [data-theme="dark"] .contact-form-title,
    [data-theme="dark"] .contact-form label,
    [data-theme="dark"] .contact-form input,
    [data-theme="dark"] .contact-form textarea,
    [data-theme="dark"] .contact-form input::placeholder,
    [data-theme="dark"] .contact-form textarea::placeholder {
      color: #f7f1e8 !important;
      opacity: 1 !important;
    }

    [data-theme="dark"] .contact-meta a,
    [data-theme="dark"] .contact-brand-name,
    [data-theme="dark"] .contact-divider {
      color: #ddb78f !important;
      background: #ddb78f !important;
      border-color: #ddb78f !important;
    }

    [data-theme="dark"] .contact-brand-sub {
      color: #d6c9ba !important;
    }

    [data-theme="dark"] .catalogue-panel {
      background: #161c18 !important;
      color: #f7f1e8 !important;
    }

    [data-theme="dark"] .catalogue-intro-card,
    [data-theme="dark"] .catalogue-page-card {
      background: #1d2520 !important;
      border-color: rgba(247,241,232,0.14) !important;
    }

    [data-theme="dark"] .catalogue-panel .section-heading,
    [data-theme="dark"] .catalogue-panel p,
    [data-theme="dark"] .catalogue-panel li,
    [data-theme="dark"] .catalogue-panel h2,
    [data-theme="dark"] .catalogue-panel h3,
    [data-theme="dark"] .catalogue-list {
      color: #f7f1e8 !important;
      opacity: 1 !important;
    }

    [data-theme="dark"] .catalogue-panel .eyebrow,
    [data-theme="dark"] .catalogue-panel a,
    [data-theme="dark"] .catalogue-panel .catalogue-note {
      color: #ddb78f !important;
    }


    .contact-meta a {
      color: #6f4e37 !important;
      background: transparent !important;
      -webkit-text-fill-color: #6f4e37 !important;
      text-decoration: none !important;
      opacity: 1 !important;
    }

    [data-theme="dark"] .contact-meta a {
      color: #f7f1e8 !important;
      background: transparent !important;
      -webkit-text-fill-color: #f7f1e8 !important;
      text-decoration: none !important;
      opacity: 1 !important;
      font-weight: 500 !important;
    }

    [data-theme="dark"] .contact-meta p {
      color: #f7f1e8 !important;
    }


    .contact-meta a,
    .contact-meta a:hover,
    .contact-meta a:focus,
    .contact-meta a:active {
      background: none !important;
      background-color: transparent !important;
      box-shadow: none !important;
      outline: none !important;
      border: 0 !important;
      text-decoration: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
    }

    [data-theme="dark"] .contact-meta a,
    [data-theme="dark"] .contact-meta a:hover,
    [data-theme="dark"] .contact-meta a:focus,
    [data-theme="dark"] .contact-meta a:active {
      background: none !important;
      background-color: transparent !important;
      box-shadow: none !important;
      outline: none !important;
      border: 0 !important;
      text-decoration: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
    }


    .contact-meta a,
    .contact-meta a:hover,
    .contact-meta a:focus,
    .contact-meta a:active {
      background: none !important;
      background-color: transparent !important;
      -webkit-text-fill-color: inherit !important;
      color: inherit !important;
    }

    .contact-meta {
      color: inherit !important;
    }

    .contact-meta p {
      color: inherit !important;
    }

    .contact-editorial .contact-meta p,
    .contact-editorial .contact-meta a {
      color: #f7f1e8 !important;
    }

    .contact-editorial .contact-meta a {
      text-decoration: underline !important;
    }

    [data-theme="light"] .contact-editorial .contact-meta p,
    [data-theme="light"] .contact-editorial .contact-meta a {
      color: #2a2a2a !important;
    }


    #full-catalogue { scroll-margin-top: 120px; }

    .catalogue-full-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }
    .catalogue-family-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      padding: 28px;
      box-shadow: var(--shadow-sm);
    }
    .catalogue-family-tag {
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: var(--text-xs);
      color: var(--color-accent);
      margin-bottom: 14px;
      font-weight: 700;
    }
    .catalogue-family-card h3 {
      margin-bottom: 14px;
      font-size: clamp(1.4rem, 2vw, 2rem);
    }
    .catalogue-family-list {
      display: grid;
      gap: 10px;
      padding-left: 18px;
    }
    .catalogue-family-list li {
      color: var(--color-text);
    }
    @media (max-width: 900px) {
      .catalogue-full-grid { grid-template-columns: 1fr; }
    }
      .catalogue-summary-card p:last-child {
        max-width: none;
      }
    }
      .catalogue-summary-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px;
      }
    }
      .catalogue-summary-box {
        min-height: 200px;
        padding: 16px;
        gap: 10px;
      }
      .catalogue-summary-box h3 {
        font-size: 1rem;
        max-width: none;
      }
      .catalogue-summary-box p:last-child {
        font-size: 0.9rem;
        max-width: none;
      }
    }
      .catalogue-summary-box {
        min-height: 0;
        padding: 22px 22px;
      }
    }


    .catalogue-summary-wrap {
      display: grid;
      gap: 28px;
    }
    .catalogue-summary-intro {
      max-width: 820px;
    }
    .catalogue-summary-intro h2 {
      max-width: 22ch;
      margin-bottom: 14px;
    }
    .catalogue-summary-intro p:last-child {
      max-width: 60ch;
      color: var(--color-text-muted);
    }


    #catalogue-summary .catalogue-summary-grid.outlined-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(320px, 420px));
      justify-content: center;
      align-items: stretch;
      gap: 32px;
      width: min(100%, 920px);
      margin: 0 auto;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card {
      width: 100%;
      min-height: 420px;
      padding: 32px 34px;
      border-radius: 32px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 0;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card .series-label {
      font-size: 0.95rem;
      letter-spacing: 0.18em;
      line-height: 1.35;
      margin-bottom: 28px;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card h3 {
      font-size: clamp(2.1rem, 2vw, 2.8rem);
      line-height: 1.1;
      max-width: 11ch;
      margin: 0 0 24px;
      text-wrap: balance;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card .catalogue-family-list {
      margin: 0;
      padding-left: 1.15rem;
      max-width: 16ch;
      display: grid;
      gap: 10px;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card .catalogue-family-list li {
      font-size: 1rem;
      line-height: 1.45;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: normal;
    }
    @media (max-width: 980px) {
      #catalogue-summary .catalogue-summary-grid.outlined-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        width: 100%;
      }
      #catalogue-summary .catalogue-summary-card.outlined-card {
        min-height: 380px;
        padding: 28px;
      }
      #catalogue-summary .catalogue-summary-card.outlined-card h3 {
        font-size: clamp(1.8rem, 3vw, 2.3rem);
        max-width: 10ch;
      }
    }
    @media (max-width: 700px) {
      #catalogue-summary .catalogue-summary-grid.outlined-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
      }
      #catalogue-summary .catalogue-summary-card.outlined-card {
        min-height: 0;
      }
    }


    /* ============================================================
       FINAL LAYOUT & SPACING OVERRIDES (no content changes)
       Fixes: text overlap, cramped container, narrow stat columns,
       awkward one-word-per-line headings, configurator balance,
       contact heading wrapping, submit button contrast,
       section anchor offset, mobile padding.
       ============================================================ */

    /* 1. Consolidated container — overrides all earlier conflicting rules */
    .container,
    header .container,
    main .container,
    footer .container {
      width: 100% !important;
      max-width: 1240px !important;
      margin-inline: auto !important;
      padding-inline: clamp(20px, 4vw, 48px) !important;
      box-sizing: border-box !important;
    }
    /* Sections and grids: apply horizontal padding to the section itself
       so children without a .container wrapper (#products, #contact) are inset too.
       Inner .container elements reset their own padding to 0 to avoid double indent. */
    .hero,
    .section,
    .contact-editorial {
      padding-left: clamp(20px, 4vw, 48px) !important;
      padding-right: clamp(20px, 4vw, 48px) !important;
    }
    .hero > .container,
    .section > .container,
    .contact-editorial > .container,
    footer > .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .hero-grid,
    .contact-shell,
    .contact-editorial-grid,
    .catalogue-shell {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    /* Center the inner wrappers of sections that don't use .container */
    #products > .section-heading,
    #products > .product-grid-fixed,
    #products > .configurator-card,
    #products > .catalogue-cta,
    #contact > .contact-editorial-grid {
      max-width: 1240px;
      margin-inline: auto;
      width: 100%;
    }
    footer.footer {
      padding-left: clamp(20px, 4vw, 48px) !important;
      padding-right: clamp(20px, 4vw, 48px) !important;
    }
    body { padding-inline: 0 !important; }

    /* 2. Vertical section rhythm — consistent, not excessive */
    .section {
      padding-block: clamp(72px, 9vw, 120px) !important;
    }
    .hero {
      padding-top: clamp(48px, 6vw, 96px) !important;
      padding-bottom: clamp(64px, 8vw, 104px) !important;
    }

    /* 3. Anchor offset so sticky header never covers section titles */
    #top, #about, #products, #catalogue-summary, #full-catalogue, #contact, #configurator {
      scroll-margin-top: 110px;
    }

    /* 4. Header / nav tidy up */
    header { z-index: 50; }
    .nav {
      gap: clamp(16px, 2vw, 32px) !important;
      padding-block: 12px;
    }
    .nav-links { gap: clamp(16px, 2vw, 28px) !important; }

    /* 5. HERO — fix H1 clipping and column balance */
    .hero-grid {
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr) !important;
      gap: clamp(32px, 5vw, 64px) !important;
      align-items: stretch !important;
    }
    .hero-copy {
      padding-top: 8px !important;
      max-width: none !important;
      min-width: 0 !important;
    }
    .hero-copy h1 {
      font-size: clamp(2rem, 5.2vw, 4.4rem) !important;
      line-height: 1.04 !important;
      letter-spacing: -0.02em !important;
      max-width: 16ch !important;
      margin: 12px 0 20px !important;
      overflow-wrap: normal !important;
      word-break: keep-all !important;
      hyphens: none !important;
    }
    @media (max-width: 900px) {
      .hero-copy h1 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        max-width: 20ch !important;
        line-height: 1.1 !important;
      }
    }
    @media (max-width: 500px) {
      .hero-copy h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important;
        max-width: none !important;
      }
    }
    .hero-copy p { max-width: 56ch !important; }
    .hero-panel {
      margin-top: 0 !important;
      min-width: 0 !important;
      min-height: 0 !important;
      padding: clamp(28px, 3.2vw, 44px) !important;
    }
    .hero-panel h2 {
      font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
      max-width: none !important;
    }

    /* 6. HERO stats — widen columns, avoid text overflow */
    .hero-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: clamp(16px, 2vw, 24px) !important;
    }
    .hero-stats .stat {
      min-width: 0 !important;
    }
    .hero-stats .stat strong {
      font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
      line-height: 1.15 !important;
      word-break: normal;
    }
    .hero-stats .stat span {
      font-size: 0.82rem !important;
      line-height: 1.45 !important;
    }
    @media (max-width: 640px) {
      .hero-stats { grid-template-columns: 1fr !important; }
    }

    /* 7. ABOUT — better card grid */
    .about-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: clamp(20px, 2.4vw, 32px) !important;
    }
    .about-grid .info-card { min-width: 0; padding: clamp(24px, 2.4vw, 36px) !important; }
    .about-grid .info-card h3 { margin-bottom: 12px; }
    @media (max-width: 800px) {
      .about-grid { grid-template-columns: 1fr !important; }
    }

    /* 8. Section heading spacing — consistent top margin for each section's intro */
    .section .section-heading {
      margin-bottom: clamp(28px, 3.6vw, 48px);
      max-width: 760px;
    }
    .section-heading h2 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3.4vw, 2.75rem);
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-top: 6px;
      margin-bottom: 12px;
    }
    .section-heading p { color: var(--color-text-muted); max-width: 60ch; }
    .section-title { max-width: 22ch !important; }
    #about h2.section-title {
      font-size: clamp(1.8rem, 3.4vw, 2.75rem);
      line-height: 1.12;
      margin-top: 6px;
    }
    #about > .container > div:first-child { margin-bottom: clamp(24px, 3vw, 40px) !important; }

    /* 9. PRODUCT GRID — consistent gaps, no overlap */
    .product-grid-fixed {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: clamp(16px, 2vw, 28px) !important;
    }
    .product-card-fixed { min-width: 0; }
    .product-copy { padding: clamp(20px, 2vw, 28px) !important; }
    .product-copy h3 { margin: 4px 0 8px; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
    .product-copy p { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.55; }
    @media (max-width: 900px) {
      .product-grid-fixed { grid-template-columns: 1fr !important; }
    }

    /* 10. CONFIGURATOR — rebalance columns and move Go button out of options grid */
    .configurator-card {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
      gap: clamp(20px, 2.6vw, 36px) !important;
      padding: clamp(24px, 2.6vw, 36px) !important;
      align-items: stretch !important;
    }
    .configurator-copy { min-width: 0; display: flex; flex-direction: column; }
    .configurator-copy h3 { margin: 6px 0 10px; font-size: clamp(1.25rem, 2vw, 1.6rem); }
    .configurator-copy > p { color: var(--color-text-muted); margin-bottom: 4px; }
    .configurator-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 14px !important;
      margin-top: 18px !important;
    }
    /* Pull the Go button out of the 2-col options grid so it sits on its own row */
    .configurator-actions {
      grid-column: 1 / -1;
      margin-top: 18px !important;
    }
    .configurator-output {
      min-width: 0;
      display: grid;
      grid-template-rows: minmax(220px, auto) auto;
      gap: 16px;
    }
    .configurator-visual { min-height: 220px; max-height: 340px; }
    .configurator-visual img { height: 100%; }
    @media (max-width: 900px) {
      .configurator-card { grid-template-columns: 1fr !important; }
      .configurator-grid { grid-template-columns: 1fr !important; }
    }

    /* 11. CATALOGUE CTA row (below configurator) — balanced, no huge empty area */
    .catalogue-cta {
      margin-top: clamp(28px, 3.2vw, 44px) !important;
      padding: clamp(24px, 2.6vw, 36px) !important;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: clamp(20px, 3vw, 40px);
      align-items: center;
    }
    .catalogue-cta h3 { margin: 6px 0 8px; font-size: clamp(1.25rem, 2vw, 1.6rem); }
    .catalogue-cta p { color: var(--color-text-muted); max-width: 52ch; }
    .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    @media (max-width: 900px) {
      .catalogue-cta { grid-template-columns: 1fr !important; }
    }

    /* 12. CATALOGUE SUMMARY — let cards fill the full container width */
    #catalogue-summary .catalogue-summary-wrap { gap: clamp(32px, 4vw, 48px); }
    #catalogue-summary .catalogue-summary-intro h2 {
      max-width: 22ch !important;
      font-size: clamp(1.8rem, 3.4vw, 2.6rem);
      line-height: 1.12;
    }
    #catalogue-summary .catalogue-summary-intro p:last-child { max-width: 60ch !important; }
    #catalogue-summary .catalogue-summary-grid.outlined-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      width: 100% !important;
      gap: clamp(16px, 2vw, 28px) !important;
      margin: 0 !important;
      justify-content: initial !important;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card {
      min-height: auto !important;
      padding: clamp(20px, 2vw, 28px) !important;
      border-radius: 22px !important;
      min-width: 0;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card .catalogue-family-tag {
      margin-bottom: 14px;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card h3 {
      font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important;
      line-height: 1.25 !important;
      max-width: none !important;
      margin: 0 0 16px !important;
      text-wrap: balance;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card .catalogue-family-list {
      max-width: none !important;
      gap: 8px !important;
    }
    #catalogue-summary .catalogue-summary-card.outlined-card .catalogue-family-list li {
      font-size: 0.92rem !important;
      line-height: 1.45 !important;
    }
    .catalogue-summary-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
    @media (max-width: 1100px) {
      #catalogue-summary .catalogue-summary-grid.outlined-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 600px) {
      #catalogue-summary .catalogue-summary-grid.outlined-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* 13. FULL CATALOGUE grid — 3 cols on wide screens, better rhythm */
    .catalogue-full-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: clamp(16px, 2vw, 28px) !important;
    }
    .catalogue-family-card {
      padding: clamp(22px, 2.2vw, 32px) !important;
      min-width: 0;
    }
    .catalogue-family-card h3 {
      font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important;
      margin-bottom: 14px !important;
      line-height: 1.25;
      text-wrap: balance;
    }
    .catalogue-family-list li { font-size: 0.95rem; line-height: 1.5; }
    @media (max-width: 1000px) {
      .catalogue-full-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }
    @media (max-width: 640px) {
      .catalogue-full-grid { grid-template-columns: 1fr !important; }
    }

    /* 14. CONTACT — fix heading wrapping and form contrast */
    .contact-editorial-grid {
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
      gap: clamp(32px, 4.4vw, 64px) !important;
      align-items: start !important;
    }
    .contact-brand-column, .contact-form-column { min-width: 0; }
    .contact-brand-column h2 {
      max-width: 18ch !important;
      font-size: clamp(1.8rem, 3.6vw, 3rem) !important;
      line-height: 1.14 !important;
      margin-bottom: 24px !important;
      text-wrap: balance;
    }
    .contact-brand-column > p { max-width: 48ch !important; font-size: 1rem; }
    .contact-form-title {
      font-size: clamp(1.8rem, 3.4vw, 2.8rem) !important;
      margin-bottom: 24px !important;
    }
    .contact-form { gap: 18px !important; }
    .contact-form label { gap: 8px !important; }
    .contact-form input, .contact-form textarea {
      padding: 14px 16px !important;
      background: rgba(255,255,255,0.65) !important;
    }
    .contact-submit {
      background: #2c2a25 !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      opacity: 1 !important;
      padding: 16px 28px !important;
      letter-spacing: 0.18em !important;
      font-size: 0.84rem !important;
      text-transform: uppercase;
      border-radius: 4px !important;
    }
    .contact-submit:hover { background: #1a1916 !important; }
    .contact-editorial .contact-submit,
    .contact-editorial .contact-submit * {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }
    @media (max-width: 900px) {
      .contact-editorial-grid { grid-template-columns: 1fr !important; }
    }

    /* 15. Footer — clean row */
    .footer-row {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .footer p { max-width: 60ch; }

    /* 16. Global safety: ensure no horizontal overflow */
    html, body { overflow-x: hidden; }
    img { max-width: 100%; height: auto; }

    /* 17. Buttons — consistent min-height and no squish */
    .btn {
      white-space: nowrap;
      padding-inline: clamp(18px, 1.6vw, 24px) !important;
    }

    /* 18. Ensure dark-mode readability on contact form */
    [data-theme="dark"] .contact-form input,
    [data-theme="dark"] .contact-form textarea {
      background: rgba(255,255,255,0.08) !important;
      border-color: rgba(221,183,143,0.5) !important;
      color: #f7f1e8 !important;
    }
    [data-theme="dark"] .contact-form input::placeholder,
    [data-theme="dark"] .contact-form textarea::placeholder {
      color: rgba(247,241,232,0.55) !important;
    }

    /* 19. Configurator dropdowns — strong readable contrast
       (the original rule used an undefined CSS variable, so text rendered faint). */
    .configurator-grid label {
      color: #2a2a2a !important;
      font-weight: 500 !important;
    }
    .configurator-grid label > span {
      color: #2a2a2a !important;
      font-weight: 600 !important;
      font-size: 0.92rem !important;
      letter-spacing: 0.01em !important;
    }
    .configurator-grid select {
      color: #1a1a1a !important;
      -webkit-text-fill-color: #1a1a1a !important;
      background-color: #ffffff !important;
      background-image: linear-gradient(45deg, transparent 50%, #1B3A2D 50%),
                        linear-gradient(135deg, #1B3A2D 50%, transparent 50%) !important;
      background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55% !important;
      background-size: 6px 6px, 6px 6px !important;
      background-repeat: no-repeat !important;
      border: 1px solid rgba(27,58,45,0.35) !important;
      font-weight: 500 !important;
      font-size: 1rem !important;
      padding-right: 44px !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      cursor: pointer;
    }
    .configurator-grid select:hover {
      border-color: rgba(27,58,45,0.6) !important;
    }
    .configurator-grid select:focus {
      outline: 2px solid #1B3A2D !important;
      outline-offset: 2px !important;
      border-color: #1B3A2D !important;
    }
    .configurator-grid select option {
      color: #1a1a1a !important;
      background-color: #ffffff !important;
      font-weight: 500 !important;
    }
    /* Dark mode dropdowns */
    [data-theme="dark"] .configurator-grid label,
    [data-theme="dark"] .configurator-grid label > span {
      color: #f5efe6 !important;
    }
    [data-theme="dark"] .configurator-grid select {
      color: #f5efe6 !important;
      -webkit-text-fill-color: #f5efe6 !important;
      background-color: #1f2a24 !important;
      background-image: linear-gradient(45deg, transparent 50%, #d2b08c 50%),
                        linear-gradient(135deg, #d2b08c 50%, transparent 50%) !important;
      border-color: rgba(245,239,230,0.35) !important;
    }
    [data-theme="dark"] .configurator-grid select option {
      color: #f5efe6 !important;
      background-color: #1f2a24 !important;
    }
    [data-theme="dark"] .configurator-grid select:focus {
      outline-color: #d2b08c !important;
      border-color: #d2b08c !important;
    }

    /* 21. Full-width hero banner photo above all text */
    .hero-banner {
      width: 100%;
      height: clamp(280px, 42vw, 520px);
      background-image: url('./hero-house.jpg');
      background-size: cover;
      background-position: center 40%;
      background-repeat: no-repeat;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      margin-bottom: clamp(32px, 5vw, 64px);
    }
    @media (max-width: 720px) {
      .hero-banner {
        height: clamp(220px, 55vw, 320px);
        border-radius: 16px;
        margin-bottom: 28px;
      }
    }
    /* Restore solid-green panel (photo is now the banner, not the panel) */
    .hero-panel {
      background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    }
    [data-theme="dark"] .hero-panel {
      background: linear-gradient(160deg, #0f2c21 0%, #153628 100%) !important;
    }

    /* 20. Mobile polish — fix hero H1 breaking and nav stacking */
    @media (max-width: 720px) {
      /* Force hero to single column on mobile */
      .hero-grid,
      .container.hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }
      .hero-copy,
      .hero-panel {
        min-width: 0 !important;
        max-width: 100% !important;
      }

      /* Hero H1: full-width natural wrapping */
      .hero-copy h1,
      .hero h1 {
        max-width: none !important;
        width: 100% !important;
        font-size: clamp(2.2rem, 8vw, 3rem) !important;
        line-height: 1.05 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
        hyphens: none !important;
      }
      .hero-copy p {
        max-width: none !important;
      }

      /* Nav: compact single-row layout */
      .container.nav {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: .75rem !important;
        min-height: 64px !important;
        padding-top: .6rem !important;
        padding-bottom: .6rem !important;
      }
      .brand.brand-with-logo {
        flex: 0 0 auto !important;
        order: 1 !important;
      }
      .site-logo {
        max-height: 44px !important;
        width: auto !important;
      }
      .nav-actions {
        order: 2 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
        gap: .5rem !important;
      }
      .nav-actions .btn {
        width: auto !important;
        padding: .55rem 1rem !important;
        font-size: .85rem !important;
        white-space: nowrap !important;
      }
      .theme-toggle {
        width: 40px !important;
        height: 40px !important;
      }
      .nav-links {
        order: 3 !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 1.25rem !important;
        padding-top: .2rem !important;
        border-top: 1px solid var(--color-divider) !important;
        margin-top: .25rem !important;
        padding-top: .6rem !important;
      }

      /* Tighten hero vertical padding on phone */
      .hero {
        padding-block: clamp(32px, 8vw, 56px) !important;
      }
    }

    /* Very narrow devices: shrink the consultation button label */
    @media (max-width: 380px) {
      .nav-actions .btn {
        font-size: .78rem !important;
        padding: .5rem .75rem !important;
      }
      .nav-links {
        gap: 1rem !important;
        font-size: .85rem !important;
      }
    }