:root{
    --bg: #F7F5F0;
    --paper: #FCFBF8;
    --ink: #15211D;
    --ink-soft: #4A544F;
    --teal: #306802;
    --teal-deep: #306802;
    --brass: #B08A34;
    --line: #DBD5C6;
    --line-strong: #C7BFAC;
    --red: #9C3B2E;
    --radius: 3px;
    --max: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3, .display{
    font-family:'Space Grotesk', sans-serif;
    color:var(--ink);
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    color:var(--ink-soft);
    letter-spacing:0.02em;
  }
  a{color:inherit;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  /* subtle blueprint grid backdrop */
  .grid-bg{
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity:0.35;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
    pointer-events:none;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(247,245,240,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0;
  }
  .wordmark{
    display:flex; align-items:center;
    text-decoration:none;
  }
  .wordmark img{
    height:36px; width:auto; max-width:none;
    display:block;
    opacity:0; transform:translateY(-6px);
    animation: logoIn .8s ease forwards, logoGlow 4.5s ease-in-out infinite 1.2s;
    transition: transform .25s ease;
  }
  .wordmark:hover img{ transform:scale(1.045); }
  @keyframes logoIn{ to{ opacity:1; transform:translateY(0); } }
  @keyframes logoGlow{
    0%,100%{ filter:drop-shadow(0 0 0 rgba(176,138,52,0)); }
    50%{ filter:drop-shadow(0 0 5px rgba(176,138,52,0.4)); }
  }
  @media (prefers-reduced-motion: reduce){
    .wordmark img{ animation:none; opacity:1; }
  }
  @media (max-width:480px){ .wordmark img{ height:30px; } }
  nav.links{ display:flex; gap:32px; }
  nav.links a{
    font-size:0.92rem; text-decoration:none; color:var(--ink-soft);
    position:relative; padding:4px 0;
    transition:color .2s ease;
  }
  nav.links a:hover{ color:var(--ink); }
  nav.links a::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--teal); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  nav.links a:hover::after{ transform:scaleX(1); }
  .nav-cta{
    font-size:0.86rem; font-weight:500; text-decoration:none;
    background:var(--ink); color:var(--paper);
    padding:10px 18px; border-radius:var(--radius);
    transition:background .2s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{ background:var(--teal-deep); }
  .menu-btn{ display:none; background:none; border:none; cursor:pointer; padding:6px; z-index:60; position:relative; }
  .menu-btn span{
    display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;
    transition:transform .2s ease, opacity .2s ease;
  }
  .menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-btn.open span:nth-child(2){ opacity:0; }
  .menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-menu{
    display:none;
    flex-direction:column;
    border-top:1px solid var(--line);
    background:var(--paper);
  }
  .mobile-menu a{
    padding:16px 28px; text-decoration:none; color:var(--ink);
    font-size:0.98rem; border-bottom:1px solid var(--line);
  }
  .mobile-menu.open{ display:flex; }

  @media (max-width:860px){
    nav.links{ display:none; }
    .menu-btn{ display:block; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative; overflow:hidden;
    padding:96px 0 72px;
    border-bottom:1px solid var(--line);
  }
  .hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
  }
  @media (max-width:920px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero{ padding:64px 0 48px; }
  }
  .hero-tag{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem;
    color:var(--teal-deep); border:1px solid var(--line-strong);
    padding:6px 12px; border-radius:20px; margin-bottom:26px;
    background:var(--paper);
  }
  .hero-tag .pip{ width:6px; height:6px; border-radius:50%; background:var(--teal); }
  h1.headline{
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    font-weight:600; line-height:1.06;
    max-width:14ch;
  }
  .hero p.lede{
    margin-top:22px; font-size:1.08rem; color:var(--ink-soft);
    max-width:46ch;
  }
  .hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.94rem; font-weight:500; text-decoration:none;
    padding:13px 22px; border-radius:var(--radius);
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn-primary{ background:var(--teal); color:#fff; }
  .btn-primary:hover{ background:var(--teal-deep); transform:translateY(-1px); }
  .btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--ink); }

  .hero-stats{
    display:flex; gap:34px; margin-top:48px; flex-wrap:wrap;
  }
  .stat b{
    font-family:'Space Grotesk',sans-serif; font-size:1.7rem; font-weight:700; display:block;
  }
  .stat span{ font-size:0.82rem; color:var(--ink-soft); }

  /* hero illustration: line-art molar with draw-in animation */
  .hero-art{ position:relative; }
  .measure-label{
    font-family:'IBM Plex Mono', monospace; font-size:0.68rem; fill:var(--ink-soft);
  }

  /* ---------- about ---------- */
  .about-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  }
  @media (max-width:920px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
  .about-art{
    border:1px solid var(--line); border-radius:6px; background:var(--paper);
    padding:20px; display:flex; justify-content:center;
  }
  .route-svg{ width:100%; max-width:320px; height:auto; }
  .route-line{
    fill:none; stroke:var(--teal); stroke-width:2.5; stroke-linecap:round;
    stroke-dasharray:6 10;
    animation:flow 5s linear infinite;
  }
  .route-line.branch{ stroke:var(--brass); }
  .node circle{ fill:var(--ink); }
  .node circle.node-main{
    fill:var(--teal);
    animation:pulse 2.6s ease-in-out infinite;
  }
  .node-label{
    font-family:'Space Grotesk', sans-serif; font-size:12px; font-weight:600; fill:var(--ink);
  }
  .node-sub{
    font-family:'IBM Plex Mono', monospace; font-size:9.5px; fill:var(--ink-soft);
  }
  @keyframes flow{ to{ stroke-dashoffset:-160; } }
  @keyframes pulse{
    0%, 100%{ r:9; opacity:1; }
    50%{ r:12; opacity:0.7; }
  }
  @media (prefers-reduced-motion: reduce){
    .route-line{ animation:none; }
    .node circle.node-main{ animation:none; }
  }

  /* ---------- brand strip ---------- */
  .brand-strip{
    border-bottom:1px solid var(--line);
    padding:30px 0;
    background:var(--paper);
  }
  .brand-row{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:22px 40px;
  }
  .brand-row .label{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--ink-soft);
    white-space:nowrap;
  }
  .brand-marks{ display:flex; gap:38px; flex-wrap:wrap; align-items:center; }
  .brand-marks span{
    font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.05rem;
    color:var(--ink-soft); opacity:0.75; transition:opacity .2s ease, color .2s ease;
  }
  .brand-marks span:hover{ opacity:1; color:var(--ink); }
  .brand-marks img {
    height: 48px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
  }
  /* ---------- section shell ---------- */
  section{ padding:88px 0; position:relative; }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; margin-bottom:52px; flex-wrap:wrap;
    border-bottom:1px solid var(--line); padding-bottom:24px;
  }
  .section-head .ref{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--brass); margin-bottom:10px; display:block;}
  .section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); font-weight:600; max-width:20ch; }
  .section-head p{ color:var(--ink-soft); max-width:36ch; font-size:0.98rem; }

  /* ---------- product catalog grid ---------- */
  .catalog{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  @media (max-width:920px){ .catalog{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .catalog{ grid-template-columns:1fr; } }
  .catalog-item{
    background:var(--paper); padding:34px 28px;
    transition:background .25s ease;
  }
  .catalog-item:hover{ background:#fff; }
  .catalog-item .ref{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--brass);
    display:block; margin-bottom:16px;
  }
  .catalog-item h3{ font-size:1.15rem; font-weight:600; margin-bottom:10px; }
  .catalog-item p{ font-size:0.92rem; color:var(--ink-soft); margin:0 0 14px; }
  .catalog-item .tags{ display:flex; gap:8px; flex-wrap:wrap; }
  .catalog-item .tags span{
    font-family:'IBM Plex Mono', monospace; font-size:0.66rem; color:var(--ink-soft);
    border:1px solid var(--line-strong); padding:3px 8px; border-radius:12px;
  }

  /* ---------- distribution / why section ---------- */
  .why{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;
  }
  @media (max-width:920px){ .why{ grid-template-columns:1fr; gap:40px; } }
  .why-list{ display:flex; flex-direction:column; }
  .why-row{
    display:grid; grid-template-columns:56px 1fr; gap:20px;
    padding:26px 0; border-top:1px solid var(--line);
  }
  .why-row:last-child{ border-bottom:1px solid var(--line); }
  .why-row .num{ font-family:'IBM Plex Mono', monospace; color:var(--brass); font-size:0.85rem; padding-top:2px; }
  .why-row h4{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.05rem; margin-bottom:6px; }
  .why-row p{ color:var(--ink-soft); font-size:0.93rem; margin:0; max-width:50ch; }

  .map-card{
    border:1px solid var(--line-strong); border-radius:var(--radius);
    padding:30px; background:var(--paper);
    position:relative; overflow:hidden;
  }
  .map-card h3{ font-size:1.1rem; margin-bottom:20px; }
  .city-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:13px 0; border-top:1px solid var(--line); font-size:0.92rem;
  }
  .city-row:first-of-type{ border-top:none; }
  .city-row .city{ font-weight:500; }
  .city-row .eta{ font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color:var(--teal-deep); }

  /* ---------- process strip (real sequence -> numbered ok) ---------- */
  .process{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  @media (max-width:760px){ .process{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .process{ grid-template-columns:1fr; } }
  .step{ background:var(--paper); padding:28px 24px; }
  .step .n{ font-family:'IBM Plex Mono', monospace; color:var(--brass); font-size:0.8rem; }
  .step h4{ font-family:'Space Grotesk', sans-serif; font-size:1rem; font-weight:600; margin:10px 0 8px; }
  .step p{ font-size:0.88rem; color:var(--ink-soft); margin:0; }

  /* ---------- testimonial / trust ---------- */
  .trust{
    background:var(--ink); color:var(--paper); border-radius:6px;
    padding:56px 48px; display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px;
  }
  @media (max-width:860px){ .trust{ grid-template-columns:1fr; padding:40px 26px; } }
  .trust blockquote{
    margin:0; font-family:'Space Grotesk', sans-serif; font-size:1.35rem; font-weight:500;
    line-height:1.4; max-width:34ch;
  }
  .trust cite{ display:block; margin-top:0; font-style:normal; font-size:0.86rem; color:#B9C4C1; }
  .trust-meta{ display:flex; flex-direction:column; justify-content:center; gap:18px; }
  .trust-meta .row{ display:flex; justify-content:space-between; border-top:1px solid #2A3733; padding-top:14px; }
  .trust-meta .row:first-child{ border-top:none; padding-top:0; }
  .trust-meta .row b{ font-family:'Space Grotesk',sans-serif; font-size:1.3rem; }
  .trust-meta .row span{ font-size:0.78rem; color:#9FADA9; text-align:right; max-width:16ch; }

  /* ---------- contact ---------- */
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:64px;
  }
  @media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }
  .field{ margin-bottom:18px; }
  .field label{ display:block; font-size:0.8rem; color:var(--ink-soft); margin-bottom:7px; }
  .field input, .field textarea, .field select{
    width:100%; padding:12px 14px; border:1px solid var(--line-strong);
    border-radius:var(--radius); background:var(--paper); font-family:inherit; font-size:0.94rem;
    color:var(--ink); transition:border-color .2s ease;
  }
  .field input:focus, .field textarea:focus, .field select:focus{
    outline:none; border-color:var(--teal);
  }
  .field textarea{ resize:vertical; min-height:110px; }
  .submit-btn{
    background:var(--teal); color:#fff; border:none; padding:14px 26px;
    border-radius:var(--radius); font-size:0.95rem; font-weight:500; cursor:pointer;
    font-family:inherit; transition:background .2s ease;
  }
  .submit-btn:hover{ background:var(--teal-deep); }

  .contact-info{ display:flex; flex-direction:column; gap:0; }
  .info-row{ padding:22px 0; border-top:1px solid var(--line); }
  .info-row:first-child, .media + .info-row{ border-top:none; }
  .info-row .k{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--brass); display:block; margin-bottom:6px; }
  .info-row .v{ font-size:1.02rem; }

  footer{
    border-top:1px solid var(--line); padding:36px 0; margin-top:20px;
  }
  .foot-row{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:16px;
  }
  .foot-row .mono{ font-size:0.75rem; }

  /* reveal on scroll — single subtle treatment */
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- photo media (all real images use this wrapper) ---------- */
  .media{
    position:relative; overflow:hidden; border-radius:6px;
    background:var(--line); aspect-ratio: var(--ar, 4/3);
  }
  .media img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    transform:scale(1.14); opacity:0;
    transition: transform 1.3s cubic-bezier(.16,.84,.44,1), opacity 1s ease;
  }
  .media.in img{ opacity:1; transform:scale(1); }
  .media.in:hover img{ transform:scale(1.06); }
  @media (prefers-reduced-motion: reduce){
    .media img{ transition:opacity .4s ease; transform:none !important; }
  }

  /* ---------- hero slideshow: continuous Ken-Burns zoom + crossfade ---------- */
  .hero-slideshow{
    position:relative; overflow:hidden; border-radius:6px;
    aspect-ratio:4/5; width:100%; background:transparent;
  }
  .hero-slideshow img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:center;
    opacity:0;
    animation: heroSlide 15s infinite;
  }
  .hero-slideshow img:nth-child(1){ animation-delay:0s; }
  .hero-slideshow img:nth-child(2){ animation-delay:-5s; }
  .hero-slideshow img:nth-child(3){ animation-delay:-10s; }
  @keyframes heroSlide{
    0%     { opacity:0; transform:scale(1.02); }
    4%     { opacity:1; }
    28%    { opacity:1; transform:scale(1.14); }
    33%    { opacity:0; transform:scale(1.14); }
    100%   { opacity:0; }
  }
  @media (max-width:920px){ .hero-slideshow{ aspect-ratio:4/3; } }
  @media (prefers-reduced-motion: reduce){
    .hero-slideshow img{ animation:none; opacity:0; transform:none; }
    .hero-slideshow img:first-child{ opacity:1; }
  }


  /* gallery */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  }
  .gallery-grid .media:first-child{ grid-column:span 2; grid-row:span 2; }
  @media (max-width:920px){
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
    .gallery-grid .media:first-child{ grid-column:span 2; grid-row:span 1; }
  }
  @media (max-width:560px){
    .gallery-grid{ grid-template-columns:1fr; }
    .gallery-grid .media:first-child{ grid-column:span 1; }
  }

  /* catalog card photo */
  .catalog-item{ padding:0; display:flex; flex-direction:column; }
  .catalog-body{ padding:26px 26px 30px; }

  /* avatar on testimonial */
  .cite-row{ display:flex; align-items:center; gap:14px; margin-top:22px; }
  .avatar{
    width:50px; height:50px; border-radius:50%; object-fit:cover; flex-shrink:0;
    border:2px solid rgba(255,255,255,0.18);
  }