:root{
    --ink:#15161a;
    --ink-soft:#2b2d33;
    --steel:#5b5f68;
    --steel-light:#9a9da4;
    --paper:#f4f2ee;
    --paper-dim:#e9e6df;
    --white:#ffffff;
    --rust:#d15a2b;
    --rust-deep:#a8431d;
    --amber:#e8963f;
    --line:#d8d4cb;
    --maxw:1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Archivo', sans-serif;
    font-weight:500;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  h1,h2,h3,h4{font-family:'Archivo Expanded', sans-serif; font-weight:800; letter-spacing:-0.01em; color:var(--ink);}
  .serif{font-family:'Source Serif 4', serif; font-weight:400;}

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

  /* ===== Header ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(244,242,238,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    max-width:var(--maxw); margin:0 auto; padding:18px 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{height:38px; width:auto; display:block;}
  nav.links{display:flex; gap:34px; font-size:14.5px; font-weight:600;}
  nav.links a{text-decoration:none; position:relative; padding:4px 0;}
  nav.links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--rust); transition:width .25s ease;}
  nav.links a:hover::after{width:100%;}
  .nav-cta{
    background:var(--ink); color:var(--white); font-weight:700; font-size:14px;
    padding:10px 20px; text-decoration:none; white-space:nowrap;
  }
  .nav-cta:hover{background:var(--rust);}
  .menu-btn{display:none; background:none; border:none; cursor:pointer; width:30px; height:22px; position:relative;}
  .menu-btn span{position:absolute; left:0; right:0; height:2px; background:var(--ink); transition:.25s;}
  .menu-btn span:nth-child(1){top:0;} .menu-btn span:nth-child(2){top:10px;} .menu-btn span:nth-child(3){top:20px;}
  .menu-btn.open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
  .menu-btn.open span:nth-child(2){opacity:0;}
  .menu-btn.open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

  .mobile-menu{
    display:none; flex-direction:column;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
    border-top:1px solid var(--line);
  }
  .mobile-menu.open{max-height:320px;}
  .mobile-menu a{
    padding:16px 32px; text-decoration:none; font-weight:600; font-size:15px;
    border-bottom:1px solid var(--line);
  }

  /* ===== Hero ===== */
  .hero{
    position:relative; overflow:hidden;
    background:var(--ink);
    color:var(--white);
    padding:96px 0 0;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:0;
  }
  .hero-bg img{
    width:100%; height:100%; object-fit:cover; opacity:0.55;
  }
  .hero-bg::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(100deg, var(--ink) 28%, rgba(21,22,26,0.75) 55%, rgba(21,22,26,0.35) 100%);
  }
  .hero-grid{
    max-width:var(--maxw); margin:0 auto; padding:0 32px 90px;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:50px; align-items:end;
    position:relative; z-index:2;
  }
  .hero-eyebrow{
    display:flex; align-items:center; gap:10px;
    font-size:13.5px; font-weight:700; color:var(--amber); margin-bottom:26px;
  }
  .hero-eyebrow .dash{width:26px; height:2px; background:var(--amber);}
  .hero h1{
    font-size:clamp(40px, 5.4vw, 68px);
    line-height:0.98;
    color:var(--white);
    max-width:11ch;
  }
  .hero h1 em{font-style:normal; color:var(--rust);}
  .hero-sub{
    margin-top:26px; max-width:46ch; color:#c7c8cc; font-size:17.5px; font-weight:500; line-height:1.6;
  }
  .hero-actions{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--rust); color:var(--white); text-decoration:none; font-weight:700; font-size:15px;
    padding:15px 26px; display:inline-flex; align-items:center; gap:10px; transition:background .2s;
  }
  .btn-primary:hover{background:var(--rust-deep);}
  .btn-ghost{
    border:1px solid #4a4c53; color:var(--white); text-decoration:none; font-weight:700; font-size:15px;
    padding:15px 26px; display:inline-flex; align-items:center; transition:border-color .2s, background .2s;
  }
  .btn-ghost:hover{border-color:var(--white); background:rgba(255,255,255,.06);}

  .hero-panel{
    border:1px solid #35373d; padding:30px 28px; background:rgba(255,255,255,0.02);
  }
  .hero-panel .label{font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--steel-light); margin-bottom:16px;}
  .hero-panel ul{list-style:none;}
  .hero-panel li{
    display:flex; align-items:baseline; gap:12px; padding:11px 0; border-top:1px solid #2c2e33; font-size:15px; color:#d9dadd; font-weight:500;
  }
  .hero-panel li:first-child{border-top:none;}
  .hero-panel li .num{font-family:'Archivo Expanded'; font-weight:800; color:var(--rust); font-size:15px; flex:none;}

  .hero-diagram{
    position:absolute; top:0; right:-8%; bottom:0; width:56%;
    opacity:0.9; z-index:1; pointer-events:none;
  }

  /* ===== Marquee strip ===== */
  .strip{
    background:var(--rust); color:var(--white); overflow:hidden; white-space:nowrap;
    border-top:1px solid #b8501f;
  }
  .strip-track{display:inline-flex; align-items:center; padding:12px 0; animation:scroll 26s linear infinite;}
  .strip-track span{padding:0 28px; font-size:13.5px; font-weight:700; letter-spacing:.03em; display:inline-flex; align-items:center; gap:10px;}
  .strip-track span::after{content:"•"; margin-left:28px; opacity:.6;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ===== Section basics ===== */
  section{padding:96px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .kicker{font-size:13.5px; font-weight:700; color:var(--rust); margin-bottom:14px; display:flex; align-items:center; gap:10px;}
  .kicker .dash{width:26px; height:2px; background:var(--rust);}
  .section-head h2{font-size:clamp(30px, 3.6vw, 44px); line-height:1.06;}
  .section-head p{margin-top:18px; font-size:16.5px; color:var(--steel); max-width:56ch;}

  /* ===== About ===== */
  .about{background:var(--white); border-bottom:1px solid var(--line);}
  .about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
  .about-figure{
    position:relative; aspect-ratio:4/5; background:var(--ink);
    display:flex; align-items:flex-end; padding:26px;
    overflow:hidden;
  }
  .about-figure img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.85;
  }
  .about-figure::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(13,14,17,.88), rgba(13,14,17,.15) 60%);
  }
  .about-figure .tag{position:relative; z-index:2;}
  .about-figure .tag{color:var(--white); font-family:'Archivo Expanded'; font-weight:800; font-size:15px;}
  .about-figure .tag small{display:block; font-family:'Archivo'; font-weight:500; color:var(--steel-light); font-size:13px; margin-top:6px;}
  .about-copy p{font-size:16.5px; color:var(--ink-soft); margin-bottom:20px; max-width:58ch;}
  .about-copy p:last-child{margin-bottom:0;}
  .about-copy .lede{font-family:'Source Serif 4'; font-size:22px; line-height:1.5; color:var(--ink); font-weight:400;}
  .stat-row{display:flex; gap:44px; margin-top:38px; padding-top:32px; border-top:1px solid var(--line); flex-wrap:wrap;}
  .stat b{display:block; font-family:'Archivo Expanded'; font-size:34px; color:var(--rust); font-weight:800;}
  .stat span{font-size:13px; color:var(--steel); font-weight:600;}

  /* ===== Vision/Mission/Goal ===== */
  .vmg{background:var(--paper-dim);}
  .vmg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .vmg-card{background:var(--paper-dim); padding:40px 34px;}
  .vmg-card .idx{font-family:'Archivo Expanded'; font-weight:800; font-size:13px; color:var(--rust); margin-bottom:22px;}
  .vmg-card h3{font-size:21px; margin-bottom:14px;}
  .vmg-card p{color:var(--steel); font-size:15.5px;}

  /* ===== Services ===== */
  .services{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .svc-list{display:flex; flex-direction:column;}
  .svc-row{
    display:grid; grid-template-columns:80px 1fr 1.3fr; gap:32px;
    padding:44px 0; border-top:1px solid var(--line); align-items:start;
  }
  .svc-row:last-child{border-bottom:1px solid var(--line);}
  .svc-num{font-family:'Archivo Expanded'; font-weight:800; font-size:15px; color:var(--steel-light); padding-top:4px;}
  .svc-name h3{font-size:24px; line-height:1.15;}
  .svc-name .domain{margin-top:10px; font-size:13.5px; font-weight:700; color:var(--rust);}
  .svc-items{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:11px 26px;}
  .svc-items li{
    font-size:15px; color:var(--ink-soft); font-weight:500; display:flex; gap:10px; align-items:flex-start;
  }
  .svc-items li::before{
    content:""; width:6px; height:6px; background:var(--rust); margin-top:8px; flex:none;
  }

  /* ===== Why choose ===== */
  .why{background:var(--ink); color:var(--white);}
  .why .kicker{color:var(--amber);}
  .why .kicker .dash{background:var(--amber);}
  .why .section-head h2{color:var(--white);}
  .why .section-head p{color:#b6b7bc;}
  .why-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:#2a2b30; border:1px solid #2a2b30;}
  .why-card{background:var(--ink); padding:32px 22px; min-height:190px; display:flex; flex-direction:column; justify-content:space-between;}
  .why-card .n{font-family:'Archivo Expanded'; font-weight:800; color:var(--rust); font-size:14px;}
  .why-card h4{color:var(--white); font-size:16.5px; margin:20px 0 10px; line-height:1.2;}
  .why-card p{color:#a6a8ad; font-size:13.8px;}

  /* ===== Projects ===== */
  .projects{background:var(--paper);}
  .proj-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-bottom:2px;}
  .proj-tile{
    aspect-ratio:3/4; position:relative; overflow:hidden;
    display:flex; align-items:flex-end; padding:20px;
  }
  .proj-tile img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.75; z-index:0;
  }
  .proj-tile span{color:var(--white); font-size:13.5px; font-weight:700; position:relative; z-index:2;}
  .proj-tile::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(10,10,12,.85), rgba(10,10,12,.15) 55%);}
  .proj-tile.t1{background:linear-gradient(155deg,#2b2e33,#101114 75%);}
  .proj-tile.t2{background:linear-gradient(155deg,#3a2216,#161311 75%);}
  .proj-tile.t3{background:linear-gradient(155deg,#1c2733,#0d1216 75%);}
  .proj-tile.t4{background:linear-gradient(155deg,#33251a,#131110 75%);}
  .proj-pipes{position:absolute; inset:0; z-index:1; opacity:.35; background-image:repeating-linear-gradient(100deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 22px);}
  .proof-row{
    display:grid; grid-template-columns:repeat(4,1fr); background:var(--ink); color:var(--white);
  }
  .proof{padding:30px 26px; border-left:1px solid #2a2b30;}
  .proof:first-child{border-left:none;}
  .proof svg{width:26px; height:26px; margin-bottom:14px; stroke:var(--rust);}
  .proof span{font-size:14px; font-weight:700; display:block;}

  /* ===== Clients ===== */
  .clients{background:var(--white); border-top:1px solid var(--line);}
  .client-grid{
    display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line);
  }
  .client-cell{
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:26px 18px; display:flex; flex-direction:column; justify-content:center; gap:8px; min-height:110px;
  }
  .client-grid .client-cell:nth-child(5n){border-right:none;}
  .client-cell .cname{font-family:'Archivo Expanded'; font-weight:800; font-size:14.5px; color:var(--ink);}
  .client-cell .cfull{font-size:12px; color:var(--steel); font-weight:500;}

  /* ===== Contact / CTA ===== */
  .cta{background:var(--rust); color:var(--white); text-align:left;}
  .cta-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center;}
  .cta h2{color:var(--white); font-size:clamp(28px,3.4vw,42px); line-height:1.1; max-width:14ch;}
  .cta p{margin-top:18px; color:#ffe3d5; font-size:16.5px; max-width:48ch;}
  .cta-actions{margin-top:32px; display:flex; gap:16px; flex-wrap:wrap;}
  .btn-white{background:var(--white); color:var(--rust-deep); font-weight:700; font-size:15px; padding:15px 26px; text-decoration:none;}
  .btn-white:hover{background:#fff0e8;}
  .btn-outline-white{border:1px solid rgba(255,255,255,.55); color:var(--white); font-weight:700; font-size:15px; padding:15px 26px; text-decoration:none;}
  .btn-outline-white:hover{background:rgba(255,255,255,.12);}
  .contact-card{background:rgba(0,0,0,0.16); padding:34px; border:1px solid rgba(255,255,255,.18);}
  .contact-card .row{display:flex; gap:16px; padding:16px 0; border-top:1px solid rgba(255,255,255,.2);}
  .contact-card .row:first-child{border-top:none; padding-top:0;}
  .contact-card .row svg{width:20px; height:20px; flex:none; margin-top:2px; stroke:var(--white); fill:none;}
  .contact-card .row div{font-size:14.5px; font-weight:600; line-height:1.5;}
  .contact-card .row small{display:block; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:#ffdccb; margin-bottom:3px;}

  /* ===== Footer ===== */
  footer{background:var(--ink); color:#9c9ea4; padding:44px 0; font-size:13.5px;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .foot-brand{display:flex; align-items:center; gap:10px;}
  .foot-brand img{height:26px; width:auto; display:block; filter:brightness(0) invert(1);}
  .foot-links{display:flex; gap:26px;}
  .foot-links a{text-decoration:none;}
  .foot-links a:hover{color:var(--white);}

  /* ===== Responsive ===== */
  @media (max-width: 980px){
    nav.links{display:none;}
    .menu-btn{display:block;}
    .mobile-menu{display:flex;}
    .hero-grid{grid-template-columns:1fr; gap:36px;}
    .hero-diagram{display:none;}
    .about-grid{grid-template-columns:1fr;}
    .vmg-grid{grid-template-columns:1fr;}
    .svc-row{grid-template-columns:1fr; gap:14px;}
    .svc-items{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .proj-strip{grid-template-columns:repeat(2,1fr);}
    .proof-row{grid-template-columns:repeat(2,1fr);}
    .proof:nth-child(3){border-left:none;}
    .client-grid{grid-template-columns:repeat(2,1fr);}
    .client-grid .client-cell:nth-child(5n){border-right:1px solid var(--line);}
    .client-grid .client-cell:nth-child(2n){border-right:none;}
    .cta-grid{grid-template-columns:1fr;}
    section{padding:64px 0;}
  }
  @media (max-width: 560px){
    .wrap{padding:0 20px;}
    .hero-grid{padding:0 20px 60px;}
    .stat-row{gap:28px;}
  }

/* ===== Multi-page additions ===== */
nav.links a.active{color:var(--rust);}
nav.links a.active::after{width:100%;}
.mobile-menu a.active{color:var(--rust);}

.page-banner{
  background:var(--ink); color:var(--white); padding:64px 0 54px;
}
.page-banner .kicker{color:var(--amber);}
.page-banner .kicker .dash{background:var(--amber);}
.page-banner h1{color:var(--white); font-size:clamp(30px,4vw,46px); line-height:1.05; max-width:18ch;}
.page-banner p{margin-top:16px; color:#c7c8cc; font-size:16.5px; max-width:56ch;}