:root{
    --ink:#1c1840;          /* deep brand navy, for text */
    --navy:#262161;         /* exact logo navy */
    --ink-soft:#5a5680;
    --paper:#f6f5f1;
    --paper-warm:#eceaf2;   /* cool paper to sit under navy */
    --accent:#b8923f;       /* refined gold accent */
    --accent-deep:#9a7730;
    --line:#dcd9e6;
    --gold:#c9a64e;
    --display:"Space Grotesk", sans-serif;
    --body:"Archivo", system-ui, sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-0.02em}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
  .accent{color:var(--accent)}

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:#f6f5f1;
    border-bottom:1px solid transparent;
    transition:border-color .3s, background .3s;
  }
  header.nav.scrolled{border-color:var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
  .logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-0.03em;color:var(--navy)}
  .logo .logo-svg{height:46px;width:auto;display:block}
  .logo span{color:var(--navy)}
  .foot-logo{color:var(--paper)}
  .foot-logo span{color:var(--paper)}
  .foot-logo .logo-svg{opacity:.95}
  .foot-logo .logo-svg .cls-1{fill:#f6f5f1 !important}
  .foot-logo .logo-svg .cls-2,.foot-logo .logo-svg .cls-3{stroke:#f6f5f1 !important}
  .nav-links{display:flex;gap:34px;align-items:center}
  .nav-links a{font-size:.83rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;position:relative;padding:4px 0}
  .nav-links a:not(.cta)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .3s}
  .nav-links a:not(.cta):hover::after{width:100%}
  .nav-links a.cta{background:var(--ink);color:var(--paper);padding:11px 26px;border-radius:2px;font-size:.78rem;transition:background .25s ease, transform .25s ease, box-shadow .25s ease;text-indent:.04em;will-change:transform}
  .nav-links a.cta:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 8px 20px rgba(184,146,63,.35)}
  .nav-links a.cta:active{transform:translateY(0);box-shadow:0 3px 8px rgba(184,146,63,.3)}
  .burger{display:none;position:relative;width:34px;height:30px;cursor:pointer;background:none;border:none;padding:0}
  .burger span{position:absolute;left:4px;width:26px;height:2px;background:var(--ink);border-radius:2px;transition:transform .45s cubic-bezier(.68,-0.3,.32,1.3), width .45s ease, opacity .25s ease, top .45s ease, left .45s ease}
  .burger span:nth-child(1){top:7px}
  .burger span:nth-child(2){top:14px}
  .burger span:nth-child(3){top:21px}
  /* morph into a roof: top two lines peak into ∧, middle fades, bottom = baseline */
  .burger.open span:nth-child(1){top:5px;left:0;width:18px;transform:rotate(-32deg);transform-origin:right center;background:var(--navy)}
  .burger.open span:nth-child(2){top:5px;left:16px;width:18px;transform:rotate(32deg);transform-origin:left center;background:var(--navy)}
  .burger.open span:nth-child(3){top:24px;width:24px;left:5px;background:var(--navy)}

  /* ---------- HERO ---------- */
  .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:74px;overflow:hidden}
  .hero-bg{position:absolute;inset:0;background:
      linear-gradient(115deg, rgba(28,24,64,0.94) 0%, rgba(28,24,64,0.74) 48%, rgba(28,24,64,0.32) 100%),
      url("/assets/images/hero-bg.jpg") center/cover;
  }
  .hero-grain{position:absolute;inset:0;opacity:.06;background-image:url("/assets/images/noise-pattern.svg");pointer-events:none}
  .hero-content{position:relative;z-index:2;color:var(--paper);max-width:760px}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:26px;opacity:0;animation:rise .8s .1s forwards}
  .eyebrow::before{content:"";flex:none;width:38px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left center;animation:drawline 1s cubic-bezier(.16,1,.3,1) .5s forwards}
  @keyframes drawline{to{transform:scaleX(1)}}
  .hero h1{font-size:clamp(2.8rem,7vw,5.6rem);color:var(--paper);margin-bottom:24px}
  .hero h1 .l{display:block;opacity:0;animation:rise .9s forwards}
  .hero h1 .l:nth-child(1){animation-delay:.2s}
  .hero h1 .l:nth-child(2){animation-delay:.34s}
  .hero h1 .l:nth-child(3){animation-delay:.48s}
  .hero h1 em{font-style:normal;font-weight:500;color:var(--gold)}
  .hero p{font-size:1.18rem;max-width:520px;color:rgba(244,240,232,.82);margin-bottom:38px;opacity:0;animation:rise .9s .62s forwards}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:rise .9s .76s forwards}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:2px;font-weight:600;font-size:.9rem;transition:.25s;cursor:pointer}
  .btn-primary{background:var(--accent);color:#fff}
  .btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px)}
  .btn-ghost{border:1px solid rgba(244,240,232,.4);color:var(--paper)}
  .btn-ghost:hover{border-color:var(--paper);background:rgba(244,240,232,.08)}
  .hero-meta{position:absolute;bottom:34px;left:0;right:0;z-index:2;display:flex;justify-content:center;text-align:center;gap:46px;color:rgba(244,240,232,.7);font-size:.8rem;letter-spacing:.05em;opacity:0;animation:rise 1s .9s forwards}
  .hero-meta b{display:block;font-family:var(--display);font-size:1.7rem;color:var(--gold);font-weight:600}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

  /* ---------- SECTION SHELL ---------- */
  section{padding:110px 0;position:relative}
  /* offset anchor scroll so the fixed header doesn't cover section tops */
  section[id]{scroll-margin-top:20px}
  .sec-head{margin-bottom:60px;max-width:640px}
  .sec-tag{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:18px}
  .sec-tag::before{content:"";width:60px;height:2.5px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
  .sec-tag.drawn::before{transform:scaleX(1)}
  /* trailing line: runs from after the words off the right edge of the page, grows on scroll */
  .sec-tag--line{white-space:nowrap;flex-wrap:nowrap;width:fit-content;max-width:100%;position:relative}
  .sec-tag--line::before{transform:scaleX(1)!important;flex:none}
  .trail-svg{
    position:absolute;left:calc(100% + 8px);top:50%;
    height:64px;width:var(--trailw, 0px);overflow:visible;
    transform:translateY(-56px);will-change:contents;pointer-events:none;
  }
  .trail-svg path{
    fill:none;stroke:var(--accent);stroke-width:2.5;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .sec-head h2{font-size:clamp(2rem,4.5vw,3.3rem)}
  .sec-head p{margin-top:18px;font-size:1.08rem;color:var(--ink-soft)}

  /* ---------- SERVICES ---------- */
  #services{background:var(--paper-warm)}
  /* hairline frame + separators drawn per-cell, so a partial last row ends cleanly with no empty boxes */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .svc{background:var(--paper-warm);padding:42px 34px;transition:.3s;position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .svc:hover{background:var(--ink);color:var(--paper)}
  .svc-num{font-family:var(--display);font-size:.9rem;color:var(--accent);font-weight:600;margin-bottom:22px}
  .svc:hover .svc-num{color:var(--gold)}
  .svc h3{font-size:1.5rem;margin-bottom:14px}
  .svc p{font-size:.96rem;color:var(--ink-soft);transition:.3s}
  .svc:hover p{color:rgba(244,240,232,.78)}
  .svc-icon{width:46px;height:46px;margin-bottom:24px;stroke:var(--accent);stroke-width:1.4;fill:none}
  .svc:hover .svc-icon{stroke:var(--gold)}

  /* ---------- GALLERY ---------- */
  .gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px}
  .gal-item{position:relative;overflow:hidden;background:var(--paper-warm);border:1px solid var(--line)}
  .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block}
  .gal-item:hover img{transform:scale(1.06)}
  .gal-item.tall{grid-row:span 2}
  .gal-item.wide{grid-column:span 2}
  .gal-cap{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(transparent,rgba(21,20,15,.85));color:var(--paper);font-size:.85rem;font-weight:600;letter-spacing:.03em;opacity:0;transform:translateY(10px);transition:.3s}
  .gal-item:hover .gal-cap{opacity:1;transform:translateY(0)}
  .gal-ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink-soft);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:20px;border:1px dashed var(--line)}

  /* ---------- ABOUT ---------- */
  #about{background:var(--ink);color:var(--paper)}
  .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
  #about .sec-tag{color:var(--gold)}
  #about .sec-tag::before{background:var(--gold)}
  #about h2{color:var(--paper);font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:26px}
  #about p{color:rgba(244,240,232,.78);margin-bottom:20px;font-size:1.05rem}
  .about-points{margin-top:34px;display:grid;gap:18px}
  .about-point{display:flex;gap:16px;align-items:flex-start}
  .about-point .dot{flex:none;width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--display);font-size:.95rem}
  .about-point b{font-family:var(--display);font-weight:600}
  .about-img{position:relative;aspect-ratio:1/1;background:url("/assets/images/about-owner.jpg") center/cover}
  .about-badge{position:absolute;bottom:0;left:0;background:var(--accent);color:#fff;padding:16px 20px;max-width:168px}
  .about-badge b{font-family:var(--display);font-size:1.9rem;display:block;line-height:1}
  .about-badge span{font-size:.72rem;letter-spacing:.05em;opacity:.9}

  /* ---------- CONTACT ---------- */
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px}
  .contact-info h2{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:22px}
  .contact-info p{color:var(--ink-soft);margin-bottom:34px;font-size:1.06rem}
  .ci-row{display:flex;gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
  .ci-row:last-child{border-bottom:1px solid var(--line)}
  .ci-row svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:none}
  .ci-row .lbl{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
  .ci-row .val{font-family:var(--display);font-size:1.15rem;font-weight:600}
  form{background:var(--paper-warm);border:1px solid var(--line);padding:40px}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px;font-weight:600}
  .field input,.field select,.field textarea{
    width:100%;padding:14px 16px;border:1px solid var(--line);background:var(--paper);
    font-family:var(--body);font-size:.98rem;color:var(--ink);border-radius:2px;transition:border-color .2s
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
  .field textarea{resize:vertical;min-height:120px}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .hp{position:absolute;left:-9999px}
  form .btn-primary{width:100%;justify-content:center;border:none;font-size:1rem}

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink);color:rgba(244,240,232,.6);padding:46px 0;border-top:1px solid rgba(244,240,232,.12)}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
  .foot-inner .logo{color:var(--paper)}
  .foot-lic{font-size:.82rem;letter-spacing:.04em}
  .foot-links{display:flex;gap:24px;font-size:.82rem}
  .foot-links a:hover{color:var(--gold)}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:900px){
    .nav-links{position:fixed;inset:74px 0 auto 0;background:var(--paper);flex-direction:column;padding:30px 28px;gap:22px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .4s;align-items:flex-start}
    .nav-links.open{transform:translateY(0)}
    .burger{display:flex}
    .hero{display:block;min-height:auto;padding:120px 0 70px}
    .hero-content{max-width:none}
    .svc-grid{grid-template-columns:1fr}
    .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
    .gal-item.wide{grid-column:span 2}
    .about-grid,.contact-grid{grid-template-columns:1fr;gap:46px}
    .about-img{max-width:420px;justify-self:center;width:100%}
    .hero-meta{position:static;margin-top:44px;animation:none;opacity:1}
    section{padding:80px 0}
  }
  @media(max-width:520px){
    .field-row{grid-template-columns:1fr}
    .gal-grid{grid-template-columns:1fr;grid-auto-rows:220px}
    .gal-item.wide{grid-column:span 1}
    .eyebrow{align-items:flex-start;letter-spacing:.14em;font-size:.72rem;gap:8px;line-height:1.5}
    .eyebrow::before{margin-top:.6em;width:24px}
    .hero-meta{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:18px 28px;margin-top:44px;width:100%}
    .hero-meta b{font-size:1.35rem}
    .hero-meta>div{flex:1 1 auto;min-width:90px}
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    .sec-tag::before{transform:scaleX(1)!important}
    .eyebrow::before{transform:scaleX(1)!important}
  }