:root{
    --bg:#F6F3EC;
    --bg-panel:#EFEAE0;
    --ink:#1B1712;
    --ink-soft:#5A5347;
    --ink-faint:#8B8375;
    --gold:#AD8A45;
    --gold-light:#D9BD7E;
    --gold-deep:#8C6C2E;
    --night:#0D0B08;
    --night-soft:#17140F;
    --line:rgba(27,23,18,0.12);
    --line-night:rgba(217,189,126,0.18);
    --radius:2px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Manrope',sans-serif;
    margin:0;
    color:var(--ink);
    font-weight:600;
    letter-spacing:-0.01em;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
  .night{background:var(--night);color:#EDE7D9;}
  .night h1,.night h2,.night h3,.night h4{color:#F5F0E4;}
  .night p{color:#C9C1AF;}
  section{padding:120px 0;}
  @media (max-width:768px){ section{padding:72px 0;} .wrap{padding:0 22px;} }

  /* ---------- micro components ---------- */
  .kicker{
    display:flex;align-items:center;gap:12px;
    font-size:13px;color:var(--gold-deep);
    margin-bottom:22px;font-weight:600;
  }
  .night .kicker{color:var(--gold-light);}
  .kicker::before{content:"";width:28px;height:1px;background:currentColor;display:block;}
  h2.headline{
    font-size:clamp(30px,4vw,46px);
    line-height:1.12;
    max-width:14ch;
  }
  .sub{
    font-size:18px;color:var(--ink-soft);
    max-width:52ch;margin-top:18px;line-height:1.65;
  }
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 28px;
    font-family:'Manrope',sans-serif;font-weight:600;font-size:14.5px;
    border-radius:var(--radius);
    cursor:pointer;border:1px solid transparent;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-gold{background:var(--gold);color:#100D08;}
  .btn-gold:hover{background:var(--gold-light);}
  .btn-line{border-color:currentColor;color:inherit;background:transparent;}
  .night .btn-line{border-color:rgba(237,231,217,0.4);}
  .night .btn-line:hover{border-color:var(--gold-light);color:var(--gold-light);}
  .btn-line:hover{border-color:var(--ink);}
  .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
  .icon{width:17px;height:17px;flex:none;}

  /* ---------- nav ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    background:rgba(13,11,8,0.0);
    transition:background .4s ease, border-color .4s ease, padding .3s ease;
    padding:22px 0;
    border-bottom:1px solid transparent;
  }
  header.scrolled{background:rgba(13,11,8,0.92);backdrop-filter:blur(10px);border-color:var(--line-night);padding:14px 0;}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;}
  .brandmark{display:flex;align-items:center;gap:10px;color:#F5F0E4;}
  .brandmark img{height:34px;width:34px;object-fit:contain;}
  .brandmark span{font-family:'Manrope';font-weight:700;font-size:15px;letter-spacing:0.01em;color:#F5F0E4;}
  nav.links{display:flex;gap:34px;font-size:14px;color:#D8D0BE;}
  nav.links a{opacity:.85;transition:opacity .2s;}
  nav.links a:hover{opacity:1;color:var(--gold-light);}
  .nav-cta{display:flex;gap:10px;align-items:center;}
  .nav-call{color:#F5F0E4;font-size:14px;display:flex;align-items:center;gap:8px;}
  @media (max-width:900px){ nav.links{display:none;} }

  /* ---------- hero ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    padding-top:140px;overflow:hidden;
  }
  .hero-grid{
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;width:100%;
  }
  .hero-eyebrow{color:var(--gold-light);font-size:13px;font-weight:600;letter-spacing:.01em;margin-bottom:26px;display:flex;gap:12px;align-items:center;}
  .hero-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;}
  .hero h1{
    font-size:clamp(40px,5.6vw,72px);
    line-height:1.04;
    font-weight:700;
    max-width:11ch;
  }
  .hero h1 em{font-style:normal;color:var(--gold-light);}
  .hero .lede{
    margin-top:26px;font-size:19px;color:#C9C1AF;max-width:42ch;line-height:1.7;
  }
  .hero .btn-row{margin-top:40px;}
  .trust-line{
    margin-top:56px;padding-top:26px;border-top:1px solid var(--line-night);
    display:flex;gap:28px;flex-wrap:wrap;font-size:13px;color:#9E9683;font-family:'Manrope';font-weight:500;
  }
  .hero-art{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .hero-art svg{width:100%;max-width:520px;}

  /* ---------- intro / trust ---------- */
  .intro{display:grid;grid-template-columns:0.85fr 1.15fr;gap:80px;align-items:start;}
  .intro p.sub{margin-top:20px;}
  .trust-points{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;}
  .trust-points div{
    padding-top:18px;border-top:1px solid var(--line);font-family:'Manrope';font-weight:600;font-size:15px;
  }
  @media (max-width:860px){ .intro{grid-template-columns:1fr;gap:40px;} }

  /* ---------- services (bento) ---------- */
  .bento{
    margin-top:64px;display:grid;grid-template-columns:repeat(6,1fr);gap:22px;
  }
  .service-card{
    position:relative;border:1px solid var(--line);padding:30px 28px;
    background:var(--bg-panel);overflow:hidden;min-height:220px;
    display:flex;flex-direction:column;justify-content:flex-end;
    transition:border-color .3s;
  }
  .service-card:hover{border-color:var(--gold);}
  .service-card .num{
    position:absolute;top:24px;right:28px;font-family:'Manrope';font-size:13px;color:var(--ink-faint);
  }
  .service-card h4{font-size:19px;margin-bottom:10px;}
  .service-card p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.55;}
  .service-card.large{grid-column:span 3;min-height:300px;}
  .service-card.med{grid-column:span 3;}
  .service-card.dark{background:var(--night);border-color:var(--night);}
  .service-card.dark h4{color:#F5F0E4;}
  .service-card.dark p{color:#B7AF9C;}
  .service-card.dark .num{color:#6E6858;}
  @media (max-width:860px){
    .bento{grid-template-columns:1fr 1fr;}
    .service-card.large,.service-card.med{grid-column:span 2;}
  }
  @media (max-width:560px){
    .bento{grid-template-columns:1fr;}
    .service-card.large,.service-card.med{grid-column:span 1;}
  }

  /* ---------- why ---------- */
  .why{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;}
  .why-list{border-top:1px solid var(--line-night);}
  .why-row{
    display:grid;grid-template-columns:60px 1fr;gap:20px;
    padding:26px 0;border-bottom:1px solid var(--line-night);
  }
  .why-row .n{font-family:'Manrope';color:var(--gold-light);font-size:14px;padding-top:3px;}
  .why-row h4{font-size:17px;color:#F0EADD;margin-bottom:6px;}
  .why-row p{margin:0;color:#ABA391;font-size:14.5px;}
  @media (max-width:860px){.why{grid-template-columns:1fr;gap:40px;}}

  /* ---------- process ---------- */
  .process-row{
    margin-top:64px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  }
  .process-step{
    padding:0 24px 0 0;border-left:1px solid var(--line);
    padding-left:24px;position:relative;
  }
  .process-step:first-child{border-left:none;padding-left:0;}
  .process-step .pn{font-family:'Manrope';font-size:14px;color:var(--gold-deep);font-weight:700;margin-bottom:18px;display:block;}
  .process-step h4{font-size:17px;margin-bottom:10px;}
  .process-step p{margin:0;font-size:14px;color:var(--ink-soft);}
  @media (max-width:900px){
    .process-row{grid-template-columns:1fr;gap:30px;}
    .process-step{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:24px;}
    .process-step:first-child{border-top:none;padding-top:0;}
  }

  /* ---------- gallery ---------- */
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;}
  .filter-btn{
    font-family:'Manrope';font-size:13px;font-weight:600;padding:9px 18px;
    border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink-soft);
    transition:all .25s;
  }
  .filter-btn.active,.filter-btn:hover{border-color:var(--gold);color:var(--ink);background:var(--bg-panel);}
  .gallery-grid{
    margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  }
  .gallery-item{
    aspect-ratio:4/3;border:1px solid var(--line);position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--bg-panel),#E4DDCE);
    display:flex;align-items:flex-end;padding:18px;
  }
  .gallery-item svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
  .gallery-item span{position:relative;font-family:'Manrope';font-weight:600;font-size:14px;color:var(--ink);background:rgba(246,243,236,0.88);padding:6px 12px;}
  @media (max-width:860px){.gallery-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}}

  /* ---------- before/after ---------- */
  .ba-wrap{margin-top:56px;border:1px solid var(--line);position:relative;aspect-ratio:16/7;overflow:hidden;background:#111;}
  .ba-before,.ba-after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#F5F0E4;font-family:'Manrope';}
  .ba-before{background:linear-gradient(135deg,#2b2620,#181410);}
  .ba-after{background:linear-gradient(135deg,#3a2f1c,#1c1710);clip-path:inset(0 50% 0 0);}
  .ba-handle{
    position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold-light);
    cursor:ew-resize;
  }
  .ba-handle::after{
    content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:38px;height:38px;background:var(--gold-light);color:#100D08;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:15px;
  }
  .ba-label{position:absolute;bottom:18px;font-size:12px;letter-spacing:.04em;color:#D8D0BE;font-family:'Manrope';}

  /* ---------- featured project ---------- */
  .feature{
    display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-night);
  }
  .feature-visual{background:linear-gradient(160deg,#171310,#0D0B08);position:relative;min-height:420px;}
  .feature-body{padding:56px;}
  .feature-body h3{font-size:clamp(24px,3vw,32px);line-height:1.2;color:#F5F0E4;max-width:14ch;}
  .feature-meta{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;}
  .feature-meta div{border-top:1px solid var(--line-night);padding-top:12px;}
  .feature-meta .k{font-size:11.5px;color:#8B836E;font-family:'Manrope';font-weight:600;letter-spacing:.03em;}
  .feature-meta .v{font-size:15px;color:#EDE7D9;margin-top:6px;font-family:'Manrope';font-weight:500;}
  @media (max-width:860px){.feature{grid-template-columns:1fr;} .feature-visual{min-height:260px;} .feature-body{padding:38px 30px;}}

  /* ---------- testimonials ---------- */
  .testi-grid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
  .testi{background:var(--bg);padding:38px 34px;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;}
  .testi .mark{font-family:'Manrope';font-size:44px;color:var(--gold);line-height:1;margin-bottom:10px;}
  .testi p.quote{font-size:16.5px;color:var(--ink);line-height:1.6;flex:1;}
  .testi .who{margin-top:24px;font-family:'Manrope';font-weight:700;font-size:14px;}
  .testi .role{font-size:13px;color:var(--ink-faint);margin-top:2px;}
  @media (max-width:860px){.testi-grid{grid-template-columns:1fr;}}

  /* ---------- areas ---------- */
  .area-tags{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;}
  .area-tags span{
    font-family:'Manrope';font-size:14px;font-weight:500;padding:10px 18px;
    border:1px solid var(--line);color:var(--ink-soft);
  }
  .area-tags span.hub{border-color:var(--gold);color:var(--ink);font-weight:700;}

  /* ---------- faq ---------- */
  .faq-list{margin-top:50px;border-top:1px solid var(--line);max-width:820px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:'Manrope';font-size:17px;font-weight:600;color:var(--ink);
  }
  .faq-q .plus{font-size:20px;color:var(--gold);transition:transform .3s;flex:none;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .faq-a p{margin:0 0 24px;color:var(--ink-soft);font-size:15px;max-width:70ch;line-height:1.65;}

  /* ---------- final CTA ---------- */
  .final-cta{position:relative;text-align:left;overflow:hidden;}
  .final-cta .wrap{position:relative;z-index:2;}
  .final-cta h2{font-size:clamp(32px,5vw,54px);max-width:16ch;color:#F5F0E4;line-height:1.1;}
  .final-cta .sub{color:#C9C1AF;}
  .final-cta .btn-row{margin-top:40px;}
  .final-cta .contact-strip{margin-top:56px;display:flex;flex-wrap:wrap;gap:38px;border-top:1px solid var(--line-night);padding-top:28px;}
  .contact-strip a{display:flex;align-items:center;gap:10px;font-family:'Manrope';font-weight:600;font-size:14.5px;color:#EDE7D9;}
  .contact-strip a:hover{color:var(--gold-light);}
  .final-cta .bg-art{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:52%;opacity:.14;z-index:1;}

  /* ---------- lead form ---------- */
  #lead{background:var(--bg-panel);}
  .form-shell{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;}
  .form-note{align-self:start;}
  .form-note ul{list-style:none;padding:0;margin:30px 0 0;}
  .form-note li{padding:14px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-soft);display:flex;gap:12px;}
  .form-note li:first-child{border-top:none;}
  .form-note li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:8px;flex:none;}
  form.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  form.lead-form .full{grid-column:1/-1;}
  .field label{display:block;font-family:'Manrope';font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:8px;letter-spacing:.02em;}
  .field input,.field select,.field textarea{
    width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--bg);
    font-family:'Inter';font-size:14.5px;color:var(--ink);border-radius:var(--radius);
    transition:border-color .25s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
  form.lead-form textarea{resize:vertical;min-height:90px;}
  .form-submit{margin-top:6px;}
  @media (max-width:860px){.form-shell{grid-template-columns:1fr;gap:36px;} form.lead-form{grid-template-columns:1fr;}}

  /* ---------- footer ---------- */
  footer{padding:80px 0 30px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;}
  .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
  .footer-brand img{height:38px;width:38px;object-fit:contain;}
  .footer-brand span{font-family:'Manrope';font-weight:700;font-size:16px;color:#F5F0E4;}
  footer p{color:#9E9683;font-size:14px;max-width:32ch;}
  footer h5{font-family:'Manrope';font-size:13px;color:#EDE7D9;margin-bottom:18px;letter-spacing:.02em;}
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
  footer ul a{color:#ABA391;font-size:14.5px;transition:color .2s;}
  footer ul a:hover{color:var(--gold-light);}
  .footer-bottom{
    margin-top:70px;padding-top:26px;border-top:1px solid var(--line-night);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
    font-size:13px;color:#786F5C;
  }
  .socials{display:flex;gap:16px;}
  .socials a{width:34px;height:34px;border:1px solid var(--line-night);display:flex;align-items:center;justify-content:center;color:#ABA391;transition:all .25s;}
  .socials a:hover{border-color:var(--gold);color:var(--gold-light);}
  @media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

  /* ---------- floating CTAs ---------- */
  .float-wa{
    position:fixed;bottom:26px;right:26px;z-index:60;
    width:58px;height:58px;border-radius:50%;background:#1E9E56;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
  }
  .float-wa svg{width:28px;height:28px;fill:#fff;}
  .sticky-cta{
    position:fixed;bottom:0;left:0;right:0;z-index:59;
    background:var(--night);border-top:1px solid var(--line-night);
    display:none;padding:14px 20px;align-items:center;justify-content:space-between;gap:14px;
  }
  .sticky-cta span{color:#EDE7D9;font-family:'Manrope';font-weight:600;font-size:14px;}
  @media (max-width:768px){
    .sticky-cta{display:flex;}
    .float-wa{bottom:86px;width:52px;height:52px;}
    body{padding-bottom:70px;}
  }

  ::selection{background:var(--gold-light);color:#100D08;}

/* image handling added for the file-based version */
.gallery-item{position:relative;}
.gallery-item .gi-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gallery-item span{z-index:2;}
.feature-visual svg{position:relative;z-index:2;}
.feature-visual::after{content:"";position:absolute;inset:0;background:rgba(13,11,8,0.55);z-index:1;}