:root{
    --charcoal:#1C1E1B;
    --steel:#3D4A52;
    --concrete:#8B8D89;
    --paper:#F3F1EB;
    --amber:#D98A2B;
    --line: rgba(28,30,27,0.12);
    box-sizing:border-box;
    padding-top: env(safe-area-inset-top,0px);
    padding-bottom: env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:inherit; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top: calc(72px + env(safe-area-inset-top,0px));}
  body{
    font-family:'Inter', sans-serif;
    background:var(--paper);
    color:var(--charcoal);
    line-height:1.55;
    background: var(--paper);
  }
  h1,h2,h3,.brand{font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:0.01em;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
  .container{overflow-x:hidden;}

  /* Header */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(28,30,27,0.96);
    backdrop-filter:blur(6px);
    padding-top: env(safe-area-inset-top,0px);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
  .brand{color:var(--paper); font-size:1.25rem; text-transform:uppercase; letter-spacing:0.04em;}
  .brand span{color:var(--amber);}
  nav.links{display:flex; gap:28px;}
  nav.links a{color:var(--concrete); font-size:0.92rem; font-weight:500; transition:color .2s;}
  nav.links a:hover{color:var(--paper);}
  .nav-cta{background:var(--amber); color:var(--charcoal); padding:9px 18px; border-radius:2px; font-weight:600; font-size:0.9rem;}
  .menu-btn{display:none; background:none; border:none; color:var(--paper); font-size:1.6rem; cursor:pointer;}

  /* Hero */
  .hero{
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px),
      linear-gradient(180deg, var(--charcoal), #14201f 120%);
    color:var(--paper);
    padding:100px 0 90px;
    border-bottom:6px solid var(--amber);
  }
  .hero .wrap{display:grid; grid-template-columns:1.15fr 0.85fr; gap:50px; align-items:end;}
  .eyebrow{color:var(--amber); font-weight:600; font-size:0.95rem; margin-bottom:14px;}
  .hero h1{font-size:clamp(2.3rem, 5vw, 3.6rem); line-height:1.08; margin-bottom:18px;}
  .hero p.lead{color:#CFD4D0; font-size:1.08rem; max-width:52ch; margin-bottom:28px;}
  .stat-row{display:flex; gap:40px; margin-bottom:32px; flex-wrap:wrap;}
  .stat-row .num{font-family:'Oswald'; font-size:2.1rem; color:var(--amber); line-height:1;}
  .stat-row .lbl{font-size:0.85rem; color:var(--concrete); margin-top:4px;}
  .btn-row{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{display:inline-block; padding:13px 26px; font-weight:600; font-size:0.95rem; border-radius:2px; border:1px solid transparent; transition:transform .15s, background .2s;}
  .btn-primary{background:var(--amber); color:var(--charcoal);}
  .btn-primary:hover{background:#c17c22;}
  .btn-outline{border-color:rgba(243,241,235,0.35); color:var(--paper);}
  .btn-outline:hover{border-color:var(--paper);}
  .hero-card{
    background:rgba(243,241,235,0.06); border:1px solid rgba(243,241,235,0.15);
    padding:26px; border-radius:4px;
  }
  .hero-card h3{color:var(--paper); font-size:1rem; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.05em;}
  .hero-card ul{list-style:none; color:#CFD4D0; font-size:0.95rem;}
  .hero-card li{padding:8px 0; border-top:1px solid rgba(243,241,235,0.1);}
  .hero-card li:first-child{border-top:none;}

  section{padding:80px 0;}
  .section-head{max-width:640px; margin-bottom:44px;}
  .section-head .kicker{color:var(--amber); font-weight:600; font-size:0.9rem; margin-bottom:8px;}
  .section-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:14px;}
  .section-head p{color:var(--steel); font-size:1.02rem;}

  /* About */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  .about-grid p{color:var(--steel); margin-bottom:16px;}
  .about-figures{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .fig{background:var(--charcoal); color:var(--paper); padding:26px 20px; border-left:4px solid var(--amber);}
  .fig .n{font-family:'Oswald'; font-size:2rem; color:var(--amber);}
  .fig .l{font-size:0.85rem; color:var(--concrete); margin-top:6px;}

  /* Services */
  .services{background:#EAE6DB;}
  .service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
  .service{background:var(--paper); padding:34px 30px;}
  .service h3{font-size:1.25rem; margin-bottom:10px;}
  .service p{color:var(--steel); margin-bottom:14px; font-size:0.96rem;}
  .service ul{list-style:none; font-size:0.92rem; color:var(--charcoal);}
  .service li{padding:5px 0 5px 18px; position:relative;}
  .service li::before{content:""; position:absolute; left:0; top:13px; width:8px; height:2px; background:var(--amber);}
  .service.wide{grid-column:1/-1; display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap;}
  .service.wide > div{flex:1; min-width:240px;}
  .flow{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:0.9rem; color:var(--steel); font-weight:500;}
  .flow span.step{background:var(--charcoal); color:var(--paper); padding:6px 12px; border-radius:2px;}
  .flow span.arrow{color:var(--amber);}

  /* Why choose */
  .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .why-card{padding:26px 0; border-top:3px solid var(--amber);}
  .why-card h3{font-size:1.1rem; margin-bottom:8px;}
  .why-card p{color:var(--steel); font-size:0.95rem;}

  /* Process */
  .process{background:var(--charcoal); color:var(--paper);}
  .process .section-head h2{color:var(--paper);}
  .process .section-head p{color:var(--concrete);}
  .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative;}
  .step-item{padding:0 16px 0 0; position:relative;}
  .step-item .idx{font-family:'Oswald'; font-size:2.2rem; color:var(--amber); margin-bottom:10px;}
  .step-item h3{font-size:1rem; margin-bottom:8px;}
  .step-item p{color:var(--concrete); font-size:0.88rem;}
  .step-item:not(:last-child)::after{
    content:""; position:absolute; top:22px; right:-2px; width:16px; border-top:2px dashed rgba(243,241,235,0.3);
  }

  /* Projects / gallery */
  .gallery-tag{display:inline-block; background:var(--amber); color:var(--charcoal); font-size:0.75rem; font-weight:600; padding:4px 10px; border-radius:2px; margin-bottom:10px;}
  .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .shot{aspect-ratio:4/3; border-radius:3px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:14px; color:#fff; font-size:0.85rem; font-weight:600;}
  .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
  .shot span{position:relative; z-index:3;}
  .shot::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05)); z-index:2;}
  /* Fallback pattern, visible behind the img until a real photo is placed at that path */
  .shot.s1::after,.shot.s2::after,.shot.s3::after,.shot.s4::after{content:""; position:absolute; inset:0; z-index:0;}
  .shot.s1::after{background:repeating-linear-gradient(45deg,#5c5f5a,#5c5f5a 12px,#6b6e68 12px,#6b6e68 24px);}
  .shot.s2::after{background:repeating-linear-gradient(45deg,#8B8D89,#8B8D89 12px,#9a9c96 12px,#9a9c96 24px);}
  .shot.s3::after{background:repeating-linear-gradient(-45deg,#3D4A52,#3D4A52 12px,#4b5a63 12px,#4b5a63 24px);}
  .shot.s4::after{background:repeating-linear-gradient(-45deg, #D98A2B33, #D98A2B33 10px, #c17c2233 10px, #c17c2233 20px), linear-gradient(#1C1E1B,#1C1E1B);}
  .upload-note{grid-column:1/-1; font-size:0.85rem; color:var(--steel); border:1px dashed var(--line); padding:14px 16px; border-radius:3px;}

  /* Development */
  .dev{background:var(--steel); color:var(--paper);}
  .dev .wrap{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
  .dev h2{color:var(--paper); font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:16px;}
  .dev p{color:#DCE1DE; margin-bottom:22px;}

  /* CTA */
  .cta-final{background:var(--paper); text-align:center;}
  .cta-final h2{font-size:clamp(1.8rem,3.5vw,2.6rem); max-width:680px; margin:0 auto 14px;}
  .cta-final p{color:var(--steel); max-width:540px; margin:0 auto 30px;}
  .cta-final .btn-row{justify-content:center;}

  /* Contact */
  .contact{background:var(--charcoal); color:var(--paper);}
  .contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
  .contact h2{color:var(--paper); font-size:1.9rem; margin-bottom:16px;}
  .contact p{color:var(--concrete); margin-bottom:24px;}
  .contact-item{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid rgba(243,241,235,0.12);}
  .contact-item:first-child{border-top:none;}
  .contact-item .ic{width:38px; height:38px; border-radius:50%; background:var(--amber); color:var(--charcoal); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}
  .contact-item .lbl{font-size:0.8rem; color:var(--concrete); margin-bottom:2px;}
  .contact-item .val{font-size:1.05rem; font-weight:500;}
  form.quick{background:rgba(243,241,235,0.05); border:1px solid rgba(243,241,235,0.15); padding:26px; border-radius:4px;}
  form.quick label{display:block; font-size:0.85rem; color:var(--concrete); margin-bottom:6px; margin-top:14px;}
  form.quick label:first-child{margin-top:0;}
  form.quick input, form.quick textarea{
    width:100%; padding:11px 12px; background:rgba(243,241,235,0.08); border:1px solid rgba(243,241,235,0.2);
    color:var(--paper); border-radius:2px; font-family:inherit; font-size:0.95rem;
  }
  form.quick textarea{resize:vertical; min-height:80px;}
  form.quick button{margin-top:18px; width:100%; padding:13px; background:var(--amber); color:var(--charcoal); font-weight:600; border:none; border-radius:2px; cursor:pointer; font-size:0.95rem;}
  form.quick button:hover{background:#c17c22;}
  .form-msg{margin-top:12px; font-size:0.88rem; color:var(--amber); display:none;}

  /* Footer */
  footer{background:#14150F; color:var(--concrete); padding:36px 0 24px; font-size:0.85rem;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-bottom:20px; border-bottom:1px solid rgba(243,241,235,0.1); margin-bottom:20px;}
  .foot-links{display:flex; gap:22px; flex-wrap:wrap;}
  .foot-links a{color:var(--concrete); transition:color .2s;}
  .foot-links a:hover{color:var(--paper);}
  .foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#6d6f68;}

  /* Legal modal */
  .modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
  .modal-overlay.open{display:flex;}
  .modal{background:var(--paper); max-width:640px; width:100%; max-height:80vh; overflow-y:auto; border-radius:4px; padding:34px; position:relative;}
  .modal h2{font-size:1.4rem; margin-bottom:16px;}
  .modal h3{font-size:1rem; margin:18px 0 8px;}
  .modal p, .modal li{color:var(--steel); font-size:0.92rem; margin-bottom:8px;}
  .modal ul{padding-left:20px;}
  .modal-close{position:absolute; top:18px; right:18px; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--steel); line-height:1;}

  @media (max-width:860px){
    .nav{padding:14px 20px;}
    nav.links{position:fixed; top:64px; left:0; right:0; background:var(--charcoal); flex-direction:column; padding:20px; gap:0; transform:translateY(-150%); transition:transform .25s; border-bottom:2px solid var(--amber);}
    nav.links.open{transform:translateY(0);}
    nav.links a{padding:12px 0; border-bottom:1px solid rgba(243,241,235,0.08); width:100%;}
    .nav-cta{display:none;}
    .menu-btn{display:block;}
    .hero .wrap{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr; gap:30px;}
    .service-grid{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr 1fr; row-gap:26px;}
    .step-item::after{display:none;}
    .gallery-grid{grid-template-columns:1fr 1fr;}
    .dev .wrap{grid-template-columns:1fr;}
    .contact .wrap{grid-template-columns:1fr;}
    .foot-row{flex-direction:column; align-items:flex-start;}
  }
  @media (max-width:480px){
    .gallery-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .stat-row{gap:26px;}
  }