:root{
    --bg:#F6F2E8;
    --bg-alt:#EDE7D5;
    --paper:#FFFDF8;
    --ink:#1F241E;
    --ink-soft:#4B5346;
    --line:rgba(31,36,30,.16);
    --forest:#1E3B2A;
    --forest-deep:#12261A;
    --leaf:#7FB544;
    --leaf-soft:#A9CE7A;
    --gold:#C8A24A;
    --panel:#F4EEDD;
    --serif-display:"Playfair Display", Georgia, "Times New Roman", serif;
    --serif-body:"Merriweather", Georgia, "Times New Roman", serif;
    --nav-h:78px;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#141912; --bg-alt:#1A2116; --paper:#1D2419;
      --ink:#EEEADC; --ink-soft:#BDC4B1; --line:rgba(238,234,220,.16);
    }
  }
  :root[data-theme="dark"]{
    --bg:#141912; --bg-alt:#1A2116; --paper:#1D2419;
    --ink:#EEEADC; --ink-soft:#BDC4B1; --line:rgba(238,234,220,.16);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px));}
  body{
    min-height:100%; margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--serif-body); font-weight:300; line-height:1.85; font-size:1rem;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  p{margin:0 0 1.1em; color:var(--ink-soft);}
  h1,h2,h3,h4{font-family:var(--serif-display); font-weight:400; margin:0; line-height:1.15;}
  :focus-visible{outline:2px solid var(--leaf); outline-offset:3px;}
  .container{width:100%; max-width:1180px; margin:0 auto; padding:0 28px;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-block; font-family:var(--serif-body); font-size:.78rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer;
    padding:15px 30px; border:2px solid var(--leaf); background:var(--leaf); color:#12261A;
    border-radius:0; transition:background .2s ease,color .2s ease,border-color .2s ease;
  }
  .btn:hover{background:transparent; color:var(--leaf);}
  .btn.btn-outline{background:transparent; color:var(--leaf);}
  .btn.btn-outline:hover{background:var(--leaf); color:#12261A;}
  .btn.btn-light{background:transparent; color:#F6F2E8; border-color:rgba(246,242,232,.55);}
  .btn.btn-light:hover{background:#F6F2E8; color:var(--forest); border-color:#F6F2E8;}

  /* ---------- Hero ---------- */
  #home{
    position:relative; overflow:hidden; color:#F6F2E8;
    min-height:560px; height:calc(100svh - var(--nav-h) - env(safe-area-inset-top,0px));
    background:
      radial-gradient(900px 600px at 82% 40%, rgba(127,181,68,.28), transparent 62%),
      radial-gradient(700px 500px at 8% 100%, rgba(200,162,74,.16), transparent 60%),
      linear-gradient(160deg, #1E3B2A 0%, #12261A 100%);
  }
  #home .container{height:100%; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
  .hero-text h1{font-size:clamp(3.6rem,9vw,7rem); font-weight:700; letter-spacing:-.02em; color:#F6F2E8;}
  .hero-text h2{font-size:clamp(1.15rem,2.2vw,1.6rem); font-style:italic; color:#D9DFC9; margin-top:14px; max-width:26ch;}
  .hero-text h2 span{color:var(--gold);}
  .hero-text p{color:#B7C2A8; max-width:46ch; margin-top:22px; font-size:.95rem;}
  .hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;}
  .hero-slides{position:relative; height:min(100%,520px); display:flex; align-items:center; justify-content:center;}
  .slide{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    opacity:0; transition:opacity .9s ease; pointer-events:none;
  }
  .slide.active{opacity:1; pointer-events:auto;}
  .slide .frame{
    width:min(300px,62%); aspect-ratio:3/4; max-height:76%; background:var(--panel); border-radius:3px;
    display:flex; align-items:center; justify-content:center; padding:14px;
    box-shadow:0 30px 50px rgba(0,0,0,.35);
  }
  .photo{
    width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
    -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
            mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
  }
  .slide figcaption{font-family:var(--serif-display); font-style:italic; color:#E6EBD8; font-size:1.05rem; text-align:center;}
  .hero-dots{position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; gap:10px; z-index:3;}
  .dot{width:11px; height:11px; border-radius:50%; border:2px solid rgba(246,242,232,.7); background:transparent; padding:0; cursor:pointer;}
  .dot.active{background:var(--leaf); border-color:var(--leaf);}

  /* ---------- Sticky nav ---------- */
  .js-sticky{position:sticky; top:env(safe-area-inset-top,0px); z-index:100;}
  .main-nav{
    height:var(--nav-h); background:#F6F2E8; border-bottom:1px solid rgba(31,36,30,.14);
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }
  .main-nav .container{height:100%; max-width:1280px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;}
  .menu-1,.menu-2{display:flex; gap:34px;}
  .menu-1{justify-content:flex-end;}
  .menu-2{justify-content:flex-start;}
  .main-nav a.nl{
    font-family:var(--serif-body); font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    text-decoration:none; color:#1F241E; padding:6px 0; border-bottom:2px solid transparent;
  }
  .main-nav a.nl:hover,.main-nav a.nl.active{border-bottom-color:var(--leaf);}
  .logo{display:block; line-height:0;}
  .logo img{height:54px; width:auto;}
  .nav-toggle{display:none; background:none; border:0; padding:10px; cursor:pointer; justify-self:end;}
  .nav-toggle i{display:block; width:24px; height:2px; background:#1F241E; margin:5px 0; transition:transform .2s ease, opacity .2s ease;}
  .nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-menu{display:none; background:#F6F2E8; border-bottom:1px solid rgba(31,36,30,.14);}
  .mobile-menu a{display:block; padding:14px 28px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:#1F241E; border-top:1px solid rgba(31,36,30,.1);}

  /* ---------- Section heading ---------- */
  .fh{text-align:center; max-width:720px; margin:0 auto 64px;}
  .fh h2{font-size:clamp(2rem,4vw,2.9rem); position:relative; padding-bottom:22px; color:var(--ink);}
  .fh h2::after{content:""; position:absolute; left:50%; bottom:0; width:56px; height:3px; background:var(--leaf); transform:translateX(-50%);}
  .fh p{margin-top:22px;}
  .fh.on-dark h2{color:#F6F2E8;}
  .fh.on-dark p{color:#C5CFB6;}

  /* ---------- About ---------- */
  #about{display:grid; grid-template-columns:1fr 1fr; min-height:620px; background:var(--bg);}
  #about .about-img{background:var(--panel); display:flex; align-items:center; justify-content:center; padding:48px;}
  #about .about-img .photo{max-height:560px;}
  #about .about-img .photo,.tile.img .photo{height:auto; width:auto; max-width:100%;}
  #about .about-text{padding:80px clamp(28px,6vw,90px); display:flex; flex-direction:column; justify-content:center;}
  #about h2{font-size:clamp(2rem,3.6vw,2.8rem); margin-bottom:26px; color:var(--ink);}
  #about p{max-width:58ch;}
  .firstcharacter{float:left; font-family:var(--serif-display); font-size:4.2rem; line-height:.8; padding:8px 12px 0 0; color:var(--gold); font-weight:700;}
  #about .btn-row{margin-top:18px;}

  /* ---------- Sayings ---------- */
  #sayings{background:var(--forest); color:#F6F2E8; padding:80px 0; text-align:center;}
  .sayings{position:relative; max-width:820px; margin:0 auto; min-height:150px;}
  .saying{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transition:opacity .7s ease;}
  .saying.active{opacity:1;}
  .saying p.q{font-family:var(--serif-display); font-style:italic; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.4; color:#F6F2E8; margin:0;}
  .saying p.a{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--leaf-soft); margin:18px 0 0; font-weight:700;}

  /* ---------- Featured mosaic ---------- */
  #products{padding:110px 0 0; background:var(--bg);}
  .grid{display:grid; grid-template-columns:repeat(3,1fr);}
  .col{display:grid; grid-template-rows:1fr 1fr;}
  .tile{position:relative; min-height:380px;}
  .tile.img{background:var(--panel); display:flex; align-items:center; justify-content:center; padding:30px;}
  .tile.img .photo{max-height:340px;}
  .tile.txt{z-index:2; background:var(--forest); color:#F6F2E8; padding:44px 38px; display:flex; flex-direction:column; justify-content:center;}
  .col:nth-child(2) .tile.txt{background:#2A5238;}
  .col:nth-child(3) .tile.txt{background:var(--forest-deep);}
  .tile.txt h3{font-size:1.6rem; color:#F6F2E8; margin-bottom:8px;}
  .tile.txt .spec{display:inline-block; font-family:var(--serif-display); font-style:italic; font-size:1.25rem; color:var(--gold); margin-bottom:14px;}
  .tile.txt p{color:#C9D3BC; font-size:.9rem; line-height:1.75; margin:0;}
  .tile.txt::after{content:""; position:absolute; left:50%; width:0; height:0; border:14px solid transparent; transform:translateX(-50%);}
  .col .tile.txt.arrow-up::after{top:-28px; border-bottom-color:var(--tile-bg);}
  .col .tile.txt.arrow-down::after{bottom:-28px; border-top-color:var(--tile-bg);}
  .col:nth-child(1) .tile.txt{--tile-bg:var(--forest);}
  .col:nth-child(2) .tile.txt{--tile-bg:#2A5238;}
  .col:nth-child(3) .tile.txt{--tile-bg:var(--forest-deep);}

  /* ---------- Promise (parallax) ---------- */
  #promise{
    position:relative; padding:110px 0; color:#F6F2E8; background-attachment:fixed;
    background:
      radial-gradient(800px 500px at 15% 20%, rgba(127,181,68,.22), transparent 60%),
      radial-gradient(700px 500px at 90% 90%, rgba(200,162,74,.16), transparent 60%),
      linear-gradient(180deg,#12261A,#1E3B2A);
    background-attachment:fixed;
  }
  .promise-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:40px;}
  .promise-item{text-align:center;}
  .promise-item svg{width:56px; height:56px; stroke:var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin:0 auto 20px;}
  .promise-item h3{font-size:1.35rem; color:#F6F2E8; margin-bottom:12px;}
  .promise-item p{color:#C5CFB6; font-size:.88rem; line-height:1.75; margin:0;}

  /* ---------- Specifications ---------- */
  #specs{padding:110px 0; background:var(--bg);}
  .spec-cols{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
  .spec-block h3{font-size:1.7rem; padding-bottom:14px; margin-bottom:6px; border-bottom:2px solid var(--leaf); color:var(--ink);}
  .spec-block ul{list-style:none; margin:0; padding:0;}
  .spec-block li{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
  .spec-desc{display:flex; align-items:center; gap:20px;}
  .spec-desc figure{margin:0; width:84px; height:84px; flex:none; border-radius:50%; background:var(--panel); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px;}
  .spec-desc figure img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;}
  .spec-desc h4{font-size:1.2rem; color:var(--ink); margin-bottom:4px;}
  .spec-desc p{margin:0; font-size:.86rem; line-height:1.6;}
  .spec-size{font-family:var(--serif-display); font-style:italic; font-size:1.2rem; color:var(--gold); white-space:nowrap;}
  .spec-cta{margin-top:36px; padding:34px; background:var(--forest); color:#F6F2E8;}
  .spec-cta h4{font-size:1.4rem; color:#F6F2E8; margin-bottom:10px;}
  .spec-cta p{color:#C5CFB6; font-size:.9rem; margin-bottom:20px;}

  /* ---------- Offices ---------- */
  #sourcing{
    padding:110px 0; color:#F6F2E8; position:relative;
    background:
      radial-gradient(700px 480px at 85% 10%, rgba(127,181,68,.2), transparent 60%),
      linear-gradient(200deg,#1E3B2A,#0F2016);
    background-attachment:fixed;
  }
  .office-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
  .office{background:rgba(246,242,232,.07); border:1px solid rgba(246,242,232,.18); padding:34px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;}
  .office.hq{background:rgba(127,181,68,.16); border-color:var(--leaf);}
  .office h3{font-size:1.5rem; color:#F6F2E8;}
  .office .meta{font-style:italic; color:var(--gold); font-size:.88rem; margin-bottom:16px;}
  .office .btn{padding:11px 20px; font-size:.68rem;}

  /* ---------- Contact ---------- */
  #contact{padding:110px 0; background:var(--bg);}
  .contact-cols{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
  .contact-cols h3{font-size:1.7rem; margin-bottom:24px; color:var(--ink);}
  .contact-info{list-style:none; margin:0; padding:0;}
  .contact-info li{display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.95rem;}
  .contact-info b{min-width:92px; font-family:var(--serif-display); font-weight:400; font-style:italic; color:var(--gold); font-size:1.05rem;}
  .field{margin-bottom:16px;}
  .field label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  .field input,.field select,.field textarea{
    width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper);
    border:1px solid var(--line); border-radius:0; padding:14px 16px;
  }
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--leaf); outline:none; box-shadow:0 0 0 3px rgba(127,181,68,.25);}
  .field textarea{resize:vertical; min-height:130px;}
  .form-note{font-size:.82rem; margin-top:14px;}

  /* ---------- Footer ---------- */
  footer{background:var(--forest-deep); color:#B7C2A8; text-align:center; padding:56px 0 calc(40px + env(safe-area-inset-bottom,0px));}
  footer p{color:#B7C2A8; font-size:.85rem; margin:0 0 10px;}
  footer a{color:var(--leaf-soft);}

  /* ---------- Reveal ---------- */
  .to-animate{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
  .to-animate.in{opacity:1; transform:none;}

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .promise-grid{grid-template-columns:1fr 1fr; gap:48px 30px;}
    .office-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:820px){
    :root{--nav-h:68px;}
    #home{height:auto; min-height:0; padding:44px 0 74px;}
    #home .container{grid-template-columns:1fr; gap:34px; text-align:center;}
    .hero-text h2,.hero-text p{margin-left:auto; margin-right:auto;}
    .hero-cta{justify-content:center;}
    .hero-slides{height:400px; order:-1;}
    .slide .frame{width:min(230px,60%);}
    .main-nav .container{grid-template-columns:auto 1fr;}
    .menu-1,.menu-2{display:none;}
    .nav-toggle{display:block;}
    .logo img{height:46px;}
    .mobile-menu.open{display:block;}
    #about{grid-template-columns:1fr;}
    #about .about-img{padding:36px;}
    #about .about-text{padding:56px 28px;}
    .grid{grid-template-columns:1fr;}
    .col{grid-template-rows:auto auto;}
    .tile{min-height:320px;}
    .tile.txt::after{display:none;}
    .spec-cols,.contact-cols{grid-template-columns:1fr; gap:48px;}
    #promise,#sourcing{background-attachment:scroll;}
    .container{padding:0 20px;}
  }
  @media (max-width:560px){
    .promise-grid,.office-grid{grid-template-columns:1fr;}
    .spec-block li{flex-direction:column; align-items:flex-start; gap:8px;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}
    .to-animate{opacity:1; transform:none;}
  }

.office-grid{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.office-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.office-grid{grid-template-columns:1fr;}}
.contact-info a{color:var(--leaf);}