:root{
    --paper: #EDE6D6;
    --paper-2: #E4DBC8;
    --ink: #211D18;
    --ink-soft: #4A443C;
    --wood: #6B4226;
    --wood-dark: #452911;
    --steel: #455055;
    --rust: #A6491F;
    --rust-dark: #833714;
    --line: rgba(33,29,24,0.16);
    --font-display: 'Fraunces', serif;
    --font-body: 'IBM Plex Sans', sans-serif;
  }

  :root:not([data-theme="light"]){
    /* default light values already set above; dark handled below */
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper: #1B1815;
      --paper-2: #221E19;
      --ink: #EDE6D6;
      --ink-soft: #C8BEAC;
      --wood: #C99A6E;
      --wood-dark: #8C5A34;
      --steel: #8FA3A8;
      --rust: #E07B45;
      --rust-dark: #C6612F;
      --line: rgba(237,230,214,0.16);
    }
  }
  :root[data-theme="dark"]{
    --paper: #1B1815;
    --paper-2: #221E19;
    --ink: #EDE6D6;
    --ink-soft: #C8BEAC;
    --wood: #C99A6E;
    --wood-dark: #8C5A34;
    --steel: #8FA3A8;
    --rust: #E07B45;
    --rust-dark: #C6612F;
    --line: rgba(237,230,214,0.16);
  }

  *{box-sizing:border-box;}
  html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(76px + env(safe-area-inset-top, 0px));
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    padding-top:env(safe-area-inset-top, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  img{max-width:100%;display:block;}

  a{color:inherit;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- NAV ---------- */
  header.site-nav{
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:50;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 32px;
    max-width:1180px;
    margin:0 auto;
  }
  .nav-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
  }
  .nav-brand img{
    height:38px;
    width:38px;
    object-fit:contain;
  }
  .nav-brand span{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.15rem;
    letter-spacing:0.01em;
  }
  nav.nav-links{
    display:flex;
    gap:28px;
    font-size:0.94rem;
    color:var(--ink-soft);
  }
  nav.nav-links a{
    text-decoration:none;
    transition:color .2s ease;
  }
  nav.nav-links a:hover{color:var(--rust);}
  .nav-cta{
    background:var(--ink);
    color:var(--paper);
    padding:10px 20px;
    border-radius:2px;
    text-decoration:none;
    font-size:0.9rem;
    font-weight:500;
    white-space:nowrap;
    transition:background .2s ease;
  }
  .nav-cta:hover{background:var(--rust-dark);}
  .nav-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px;}
  .nav-toggle svg{width:26px;height:26px;}

  @media (max-width:860px){
    nav.nav-links{
      position:absolute;
      top:100%;
      left:0;right:0;
      background:var(--paper);
      border-bottom:1px solid var(--line);
      flex-direction:column;
      padding:18px 32px;
      gap:16px;
      display:none;
    }
    nav.nav-links.open{display:flex;}
    .nav-toggle{display:block;}
    .nav-cta{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:88px 0 96px;
    position:relative;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
  }
  .eyebrow-mark{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--steel);
    font-size:0.82rem;
    letter-spacing:0.02em;
    margin-bottom:22px;
    font-weight:500;
  }
  .eyebrow-mark .dash{width:26px;height:1px;background:var(--steel);display:inline-block;}
  h1{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(2.3rem, 4.2vw, 3.4rem);
    line-height:1.08;
    margin:0 0 22px;
    letter-spacing:-0.01em;
  }
  h1 em{
    font-style:normal;
    color:var(--rust);
  }
  .hero-sub{
    font-size:1.13rem;
    line-height:1.55;
    color:var(--ink-soft);
    max-width:46ch;
    margin:0 0 18px;
  }
  .hero-support{
    font-size:0.98rem;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:48ch;
    margin:0 0 34px;
    border-left:2px solid var(--line);
    padding-left:16px;
  }
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:2px;
    text-decoration:none;
    font-size:0.95rem;
    font-weight:500;
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn-primary{
    background:var(--rust);
    color:#fff;
    border:1px solid var(--rust);
  }
  .btn-primary:hover{background:var(--rust-dark);border-color:var(--rust-dark);transform:translateY(-1px);}
  .btn-secondary{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
  }
  .btn-secondary:hover{border-color:var(--ink);transform:translateY(-1px);}

  /* joint animation */
  .joint-stage{
    position:relative;
    aspect-ratio:1/1;
    max-width:460px;
    margin:0 auto;
  }
  .joint-stage svg{width:100%;height:100%;overflow:visible;}
  .piece{
    opacity:0;
    transform:translateY(-60px);
    animation:drop 0.7s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes drop{
    to{opacity:1;transform:translateY(0);}
  }
  .joint-caption{
    text-align:center;
    margin-top:18px;
    font-size:0.82rem;
    color:var(--ink-soft);
    letter-spacing:0.01em;
  }
  @media (prefers-reduced-motion: reduce){
    .piece{animation:none;opacity:1;transform:none;}
  }

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;}
    .joint-stage{order:-1;max-width:320px;}
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:88px 0;}
  .section-alt{background:var(--paper-2);}
  .section-head{
    max-width:640px;
    margin:0 0 52px;
  }
  .section-head .eyebrow-mark{margin-bottom:14px;}
  h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    line-height:1.15;
    margin:0 0 14px;
    letter-spacing:-0.01em;
  }
  .section-head p{
    color:var(--ink-soft);
    font-size:1.03rem;
    line-height:1.6;
    margin:0;
  }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:0.4fr 0.6fr;
    gap:64px;
    align-items:start;
  }
  .about-grid .grain{
    border-left:3px solid var(--wood);
    padding-left:22px;
  }
  .about-grid .grain .stat{
    font-family:var(--font-display);
    font-size:2.6rem;
    font-weight:600;
    line-height:1;
    color:var(--wood-dark);
  }
  .about-grid .grain .stat-label{
    font-size:0.86rem;
    color:var(--ink-soft);
    margin-top:6px;
  }
  .about-grid .grain + .grain{margin-top:36px;}
  .about-copy p{
    font-size:1.05rem;
    line-height:1.7;
    color:var(--ink-soft);
    margin:0 0 20px;
  }
  .about-copy p:last-child{margin-bottom:0;}
  @media (max-width:800px){
    .about-grid{grid-template-columns:1fr;gap:36px;}
  }

  /* ---------- SERVICES (spec-sheet style) ---------- */
  .spec-list{border-top:1px solid var(--line);}
  .spec-row{
    display:grid;
    grid-template-columns:60px 1fr 1.4fr;
    gap:28px;
    padding:34px 0;
    border-bottom:1px solid var(--line);
    align-items:start;
  }
  .spec-icon{
    width:44px;height:44px;
    color:var(--steel);
  }
  .spec-icon svg{width:100%;height:100%;}
  .spec-name{
    font-family:var(--font-display);
    font-size:1.25rem;
    font-weight:600;
    line-height:1.3;
    padding-top:2px;
  }
  .spec-desc{
    color:var(--ink-soft);
    font-size:1rem;
    line-height:1.6;
    padding-top:2px;
  }
  @media (max-width:760px){
    .spec-row{grid-template-columns:44px 1fr;}
    .spec-desc{grid-column:2/3;}
  }

  /* ---------- VALUE PROPS ---------- */
  .value-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .value-card{
    background:var(--paper);
    padding:36px 28px;
  }
  .value-icon{
    width:34px;height:34px;
    color:var(--rust);
    margin-bottom:20px;
  }
  .value-icon svg{width:100%;height:100%;}
  .value-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.08rem;
    margin-bottom:10px;
  }
  .value-desc{
    color:var(--ink-soft);
    font-size:0.92rem;
    line-height:1.55;
  }
  @media (max-width:900px){
    .value-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .value-grid{grid-template-columns:1fr;}
  }

  /* ---------- PROJECTS ---------- */
  .project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .project-tile{
    position:relative;
    aspect-ratio:4/3;
    background:var(--paper);
    overflow:hidden;
    display:flex;
    align-items:flex-end;
  }
  .project-tile svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .project-tile .tile-label{
    position:relative;
    z-index:2;
    padding:18px 20px;
    color:#EDE6D6;
    font-size:0.92rem;
    font-weight:500;
    text-shadow:0 1px 6px rgba(0,0,0,0.35);
  }
  .project-tile .tile-tag{
    position:relative;
    z-index:2;
    display:block;
    font-size:0.74rem;
    color:rgba(237,230,214,0.75);
    margin-top:2px;
    font-weight:400;
  }
  @media (max-width:760px){
    .project-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:480px){
    .project-grid{grid-template-columns:1fr;}
  }

  /* ---------- CONTACT FORM ---------- */
  .contact-block{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:64px;
  }
  .contact-info h3{
    font-family:var(--font-display);
    font-size:1.3rem;
    font-weight:600;
    margin:0 0 22px;
  }
  .contact-info .line{
    display:block;
    text-decoration:none;
    color:var(--ink);
    font-size:1rem;
    margin-bottom:14px;
  }
  .contact-info a.line:hover{color:var(--rust);}
  .contact-info .addr{color:var(--ink-soft);}
  .form-field{margin-bottom:18px;}
  .form-field label{
    display:block;
    font-size:0.82rem;
    color:var(--ink-soft);
    margin-bottom:7px;
  }
  .form-field input, .form-field textarea{
    width:100%;
    padding:12px 14px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:2px;
    color:var(--ink);
    font-family:var(--font-body);
    font-size:0.96rem;
  }
  .form-field input:focus, .form-field textarea:focus{
    outline:none;
    border-color:var(--rust);
  }
  .form-field textarea{resize:vertical;min-height:110px;}
  .form-note{
    font-size:0.82rem;
    color:var(--ink-soft);
    margin-top:14px;
  }
  .form-status{
    font-size:0.9rem;
    margin-top:16px;
    min-height:1.2em;
  }
  .form-status-ok{color:#2E7D5B;}
  .form-status-error{color:var(--rust);}
  @media (max-width:800px){
    .contact-block{grid-template-columns:1fr;gap:40px;}
  }

  /* ---------- WHATSAPP FLOAT ---------- */
  .wa-float{
    position:fixed;
    right:22px;
    bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    z-index:60;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#2E7D5B;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 20px rgba(0,0,0,0.28);
    text-decoration:none;
    transition:transform .18s ease;
  }
  .wa-float:hover{transform:translateY(-2px) scale(1.03);}
  .wa-float svg{width:28px;height:28px;fill:#fff;}

  /* ---------- FOOTER (continued below) ---------- */
  footer{
    background:#211D18;
    color:#EDE6D6;
    padding:76px 0 32px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:48px;
    margin-bottom:56px;
  }
  .footer-brand img{height:auto;max-width:220px;margin-bottom:18px;}
  .footer-brand p{
    color:rgba(237,230,214,0.7);
    font-size:0.94rem;
    line-height:1.6;
    max-width:32ch;
  }
  .footer-col h3{
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.82rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:rgba(237,230,214,0.55);
    margin:0 0 18px;
  }
  .footer-col a, .footer-col .line{
    display:block;
    text-decoration:none;
    color:#EDE6D6;
    font-size:0.98rem;
    margin-bottom:12px;
    line-height:1.5;
  }
  .footer-col a:hover{color:#E07B45;}
  .footer-bottom{
    border-top:1px solid rgba(237,230,214,0.16);
    padding-top:24px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.82rem;
    color:rgba(237,230,214,0.55);
  }
  @media (max-width:760px){
    .footer-grid{grid-template-columns:1fr;gap:36px;}
  }

  ::selection{background:var(--rust);color:#fff;}

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