:root{
    --ink:#0a0d10;
    --surface:#12171b;
    --surface-2:#191f24;
    --line: rgba(160,200,210,0.14);
    --green:#12c468;
    --blue:#2072d6;
    --teal:#17b8a0;
    --ice:#7fd0ea;
    --ice-dim:#5fa6bd;
    --paper:#f2f6f5;
    --paper-dim:#c7d3d2;
    --off:#0e1316;
    --grad: linear-gradient(115deg, var(--green) 0%, var(--teal) 45%, var(--blue) 100%);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk', sans-serif;
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  section{position:relative;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
    html{scroll-behavior:auto;}
  }

  /* ---------- corner ticks (blueprint signature) ---------- */
  .ticks{position:relative;}
  .ticks::before,.ticks::after{
    content:"";position:absolute;width:14px;height:14px;
    border:1.5px solid var(--ice-dim); opacity:.55;
  }
  .ticks::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
  .ticks::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(10,13,16,0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    max-width:1180px;margin:0 auto;padding:16px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .brand img{width:34px;height:34px;}
  .brand span{font-family:'Space Grotesk';font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--ice);}
  .brand span em{font-style:normal;color:var(--ice);}
  nav.links{display:flex;gap:34px;align-items:center;}
  nav.links a{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px;
    text-transform:uppercase; letter-spacing:.09em; color:var(--paper-dim);
    transition:color .2s;
  }
  nav.links a:hover{color:var(--ice);}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:2px;
    background:var(--grad); color:#04120c;
    font-family:'IBM Plex Mono',monospace; font-size:12.5px;
    text-transform:uppercase; letter-spacing:.09em; font-weight:500;
    border:none; cursor:pointer;
  }
  .btn.ghost{
    background:transparent; color:var(--ice); border:1px solid var(--ice-dim);
  }
  .navBtn{display:none;}
  @media (max-width:880px){
    nav.links{display:none;}
    .navBtn{
      display:flex; align-items:center; justify-content:center;
      width:38px; height:38px; background:transparent; border:1px solid var(--line);
      border-radius:2px; cursor:pointer; margin-right:12px;
    }
    .navBtn svg{width:18px;height:18px; color:var(--ice);}
    .btn.nav-quote-desktop{display:none;}
  }
  .mobile-menu{
    display:none; position:fixed; top:67px; left:0; right:0; z-index:99;
    background:var(--ink); border-bottom:1px solid var(--line);
    flex-direction:column; padding:8px 32px 24px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{
    padding:16px 0; border-bottom:1px solid var(--line);
    font-family:'IBM Plex Mono'; font-size:13px; text-transform:uppercase; letter-spacing:.09em;
    color:var(--paper-dim);
  }
  .mobile-menu a:last-child{border-bottom:none;}
  .mobile-menu .btn{margin-top:18px; justify-content:center;}

  /* ---------- hero ---------- */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:150px 0 100px;
    background:
      radial-gradient(ellipse 900px 500px at 78% 8%, rgba(23,184,160,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 10% 90%, rgba(32,114,214,0.14), transparent 60%),
      var(--ink);
    overflow:hidden;
  }
  .blueprint-grid{
    position:absolute; inset:0; z-index:0; opacity:.35;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image: radial-gradient(ellipse 900px 600px at 60% 30%, black, transparent 75%);
  }
  .hero-inner{position:relative; z-index:2;}
  .eyebrow{
    display:flex; align-items:center; gap:12px;
    color:var(--ice-dim); font-size:12px; margin-bottom:26px;
  }
  .eyebrow .dash{width:32px;height:1px;background:var(--ice-dim);}
  h1.headline{
    font-size:clamp(42px, 7vw, 92px);
    line-height:0.98; font-weight:700; color:var(--paper);
    max-width:920px;
  }
  h1.headline .accent{
    background:var(--grad);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-sub{
    max-width:520px; margin-top:28px; font-size:17px; line-height:1.65;
    color:var(--paper-dim);
  }
  .hero-cta{display:flex; gap:16px; margin-top:42px; flex-wrap:wrap;}
  .hero-meta{
    margin-top:90px; display:flex; gap:0; flex-wrap:wrap;
    border-top:1px solid var(--line);
  }
  .hero-meta div{
    flex:1; min-width:150px; padding:20px 24px 0 0; border-right:1px solid var(--line);
  }
  .hero-meta div:last-child{border-right:none;}
  .hero-meta .num{font-family:'Space Grotesk'; font-size:28px; font-weight:600; color:var(--ice);}
  .hero-meta .lbl{font-family:'IBM Plex Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--paper-dim); margin-top:6px;}

  /* diagonal crossing beam motif, echoes the logo mark */
  .beam-mark{
    position:absolute; right:-40px; top:120px; width:420px; height:420px; z-index:1;
    opacity:.9; pointer-events:none;
  }
  @media (max-width:1000px){ .beam-mark{display:none;} }

  /* ---------- marquee strip ---------- */
  .strip{
    background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:16px 0; overflow:hidden; white-space:nowrap;
  }
  .strip-track{display:inline-flex; gap:48px; animation:scroll 28s linear infinite;}
  .strip-track span{
    font-family:'IBM Plex Mono'; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em;
    color:var(--ice-dim); display:inline-flex; align-items:center; gap:48px;
  }
  .strip-track span::after{content:"◆"; color:var(--teal); font-size:8px; margin-left:48px;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- section heads ---------- */
  .head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
    margin-bottom:52px; flex-wrap:wrap;
  }
  .head .eyebrow{margin-bottom:16px;}
  .head h2{font-size:clamp(30px,4vw,46px); font-weight:600; max-width:560px;}
  .head p{color:var(--paper-dim); max-width:360px; font-size:15px; line-height:1.6;}

  section.dark{padding:120px 0;}

  /* ---------- services ---------- */
  .svc-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  @media (max-width:880px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .svc-grid{grid-template-columns:1fr;} }
  .svc-card{
    background:var(--surface); padding:38px 30px; position:relative;
    transition:background .25s;
  }
  .svc-card:hover{background:var(--surface-2);}
  .svc-card .ico{width:38px;height:38px; margin-bottom:26px; color:var(--ice);}
  .svc-card h3{font-size:19px; font-weight:600; margin-bottom:10px;}
  .svc-card p{font-size:14px; color:var(--paper-dim); line-height:1.6; margin-bottom:18px;}
  .svc-card .go{
    font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ice-dim);
  }
  .svc-card .idx{
    position:absolute; top:30px; right:30px; font-family:'IBM Plex Mono'; font-size:11px; color:var(--ice-dim); opacity:.6;
  }

  /* ---------- projects / instagram scroll ---------- */
  section.projects{background:var(--surface); padding:120px 0 110px;}
  .ig-note{
    display:flex; align-items:center; gap:10px; margin-top:6px;
    font-family:'IBM Plex Mono'; font-size:12px; color:var(--ice-dim);
  }
  .ig-note svg{width:16px;height:16px;}
  .scroller-wrap{position:relative;}
  .scroller{
    display:flex; gap:18px; overflow-x:auto; padding:6px 32px 26px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .scroller::-webkit-scrollbar{height:6px;}
  .scroller::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
  .pcard{
    flex:0 0 280px; scroll-snap-align:start;
    aspect-ratio:4/5; border-radius:2px; overflow:hidden; position:relative;
    background:var(--surface-2); border:1px solid var(--line);
  }
  .pcard .ph{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:
      linear-gradient(160deg, rgba(18,196,104,0.20), rgba(32,114,214,0.20)),
      repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px);
  }
  .pcard .ph svg{width:44px;height:44px; opacity:.55; color:var(--ice);}
  .pcard .cap{
    position:absolute; left:0; right:0; bottom:0; padding:16px;
    background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  }
  .pcard .cap .t{font-family:'Space Grotesk'; font-size:14px; font-weight:600;}
  .pcard .cap .s{font-family:'IBM Plex Mono'; font-size:10px; color:var(--ice-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:4px;}
  .scroll-fade{position:absolute; top:0; bottom:26px; width:80px; pointer-events:none; z-index:2;}
  .scroll-fade.l{left:0; background:linear-gradient(90deg, var(--surface), transparent);}
  .scroll-fade.r{right:0; background:linear-gradient(-90deg, var(--surface), transparent);}

  /* ---------- team ---------- */
  .team-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:760px){ .team-grid{grid-template-columns:1fr;} }
  .team-card{background:var(--surface); padding:44px;}
  .team-card .avatar{
    width:64px;height:64px;border-radius:50%;
    background:var(--grad); display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk'; font-weight:700; font-size:22px; color:#04120c; margin-bottom:24px;
    overflow:hidden;
  }
  .team-card .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .team-card h3{font-size:22px; font-weight:600;}
  .team-card .role{font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; color:var(--ice-dim); letter-spacing:.08em; margin:8px 0 20px;}
  .team-card p{font-size:14.5px; color:var(--paper-dim); line-height:1.7;}
  .origin{padding:60px 0 0; max-width:760px;}
  .origin .eyebrow{margin-bottom:18px;}
  .origin p{font-size:16px; line-height:1.8; color:var(--paper-dim);}

  /* ---------- reviews ---------- */
  section.reviews{
    background:var(--paper); color:var(--off); padding:90px 0;
  }
  .rev-inner{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
  .stars{color:#e8a20b; font-size:22px; letter-spacing:3px;}
  .rev-inner h3{font-size:26px; font-weight:600; margin-top:10px;}
  .rev-links{display:flex; gap:14px;}
  .rev-links a{
    padding:12px 22px; border:1px solid rgba(14,19,22,0.2); border-radius:2px;
    font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  }
  .rev-links a:hover{background:var(--off); color:var(--paper);}

  /* ---------- contact / footer ---------- */
  footer{background:var(--ink); padding:100px 0 40px; border-top:1px solid var(--line);}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:70px;}
  @media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }
  .foot-grid h4{
    font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ice-dim); margin-bottom:18px;
  }
  .foot-grid a, .foot-grid p{
    display:block; font-size:14.5px; color:var(--paper-dim); margin-bottom:10px; line-height:1.6;
  }
  .foot-grid a:hover{color:var(--ice);}
  .foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:20px;}
  .foot-brand img{width:38px;height:38px;}
  .foot-brand span{font-family:'Space Grotesk'; font-weight:700; font-size:19px; color:var(--ice);}
  .foot-tag{font-size:14px; color:var(--paper-dim); max-width:280px; line-height:1.6;}
  .foot-bottom{
    border-top:1px solid var(--line); padding-top:26px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-family:'IBM Plex Mono'; font-size:11px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.06em;
  }

  ::selection{background:var(--teal); color:#04120c;}

  /* ============================================================
     SERVICE PAGE (house-renovations.html, kitchen-renovation.html, etc.)
     ============================================================ */
  .svc-hero{
    padding:150px 0 90px;
    background:
      radial-gradient(ellipse 800px 460px at 85% 0%, rgba(23,184,160,0.16), transparent 60%),
      var(--ink);
    border-bottom:1px solid var(--line);
  }
  .breadcrumb{
    font-family:'IBM Plex Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ice-dim); margin-bottom:22px; display:flex; align-items:center; gap:8px;
  }
  .breadcrumb a:hover{color:var(--ice);}
  .breadcrumb .sep{opacity:.5;}
  .svc-hero h1{
    font-size:clamp(38px,6vw,68px); font-weight:700; max-width:760px; line-height:1.02;
  }
  .svc-hero .lede{
    max-width:600px; margin-top:24px; font-size:17px; line-height:1.7; color:var(--paper-dim);
  }
  .svc-hero .hero-cta{margin-top:36px;}

  .svc-body{padding:100px 0;}
  .svc-body-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:70px; align-items:start;}
  @media (max-width:900px){ .svc-body-grid{grid-template-columns:1fr; gap:50px;} }
  .svc-body-grid h2{font-size:clamp(26px,3.4vw,34px); font-weight:600; margin-bottom:22px;}
  .svc-body-grid .copy p{font-size:15.5px; line-height:1.8; color:var(--paper-dim); margin-bottom:18px;}

  .feature-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
  .feature-list li{
    display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);
    font-size:14.5px; color:var(--paper-dim); line-height:1.6;
  }
  .feature-list li .mark{
    flex:0 0 auto; width:20px; height:20px; margin-top:2px;
    color:var(--ice);
  }
  .feature-list li b{color:var(--paper); font-weight:600;}
  .side-card{
    background:var(--surface); border:1px solid var(--line); padding:34px; position:sticky; top:110px;
  }
  .side-card .eyebrow{margin-bottom:14px;}
  .side-card h3{font-size:20px; font-weight:600; margin-bottom:14px;}
  .side-card p{font-size:14px; color:var(--paper-dim); line-height:1.7; margin-bottom:24px;}
  .side-card .btn{width:100%; justify-content:center; margin-bottom:10px;}
  .side-card .btn.ghost{width:100%; justify-content:center;}

  .related{background:var(--surface); padding:90px 0; border-top:1px solid var(--line);}
  .related h2{font-size:24px; font-weight:600; margin-bottom:34px;}
  .related-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:900px){ .related-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .related-grid{grid-template-columns:1fr;} }
  .related-grid a{
    background:var(--ink); padding:26px 22px; font-family:'Space Grotesk'; font-weight:600; font-size:15px;
    display:flex; align-items:center; justify-content:space-between; transition:background .2s;
  }
  .related-grid a:hover{background:var(--surface-2); color:var(--ice);}
  .related-grid a svg{width:16px;height:16px; opacity:.6;}

  .cta-band{
    background:var(--grad); padding:70px 0; text-align:center;
  }
  .cta-band h2{font-size:clamp(26px,3.6vw,38px); font-weight:700; color:#04120c; margin-bottom:24px;}
  .cta-band .btn{background:#04120c; color:var(--ice);}
  .cta-band .btn.ghost{background:transparent; border:1px solid rgba(4,18,12,0.4); color:#04120c;}
  .cta-band .hero-cta{justify-content:center; display:flex;}

  /* ---------- quote form ---------- */
  section.quote{background:var(--ink); padding:120px 0; border-top:1px solid var(--line);}
  .quote-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start;}
  @media (max-width:880px){ .quote-grid{grid-template-columns:1fr; gap:48px;} }
  .quote-intro h2{font-size:clamp(28px,3.6vw,40px); font-weight:600; margin:16px 0 18px; max-width:380px;}
  .quote-intro p{font-size:15px; line-height:1.7; color:var(--paper-dim); max-width:380px;}
  .quote-hours{
    display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--ice-dim);
    margin-top:24px; font-family:'IBM Plex Mono'; letter-spacing:.02em;
  }
  .quote-hours svg{width:18px;height:18px; color:var(--ice); flex:0 0 auto;}
  .quote-direct{display:flex; flex-direction:column; gap:14px; margin-top:20px;}
  .quote-direct a{
    display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--paper-dim);
  }
  .quote-direct a:hover{color:var(--ice);}
  .quote-direct a svg{width:18px;height:18px; color:var(--ice); flex:0 0 auto;}

  .quote-form{
    background:var(--surface); border:1px solid var(--line); padding:42px;
    display:flex; flex-direction:column; gap:22px;
  }
  @media (max-width:520px){ .quote-form{padding:28px;} }
  .hp-field{position:absolute; left:-9999px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
  @media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
  .field{display:flex; flex-direction:column; gap:8px;}
  .field label{
    font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ice-dim);
  }
  .field input, .field select, .field textarea{
    background:var(--ink); border:1px solid var(--line); color:var(--paper);
    font-family:'Inter'; font-size:14.5px; padding:12px 14px; border-radius:2px;
    outline:none; transition:border-color .2s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--teal);
  }
  .field textarea{resize:vertical; min-height:100px;}
  .field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd0ea' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px;}
  .quote-form .btn{align-self:flex-start; border:none;}