:root{
    --ink:#101010;
    --panel:#1A1A1A;
    --gold:#E0A526;
    --gold-deep:#B8811A;
    --paper:#F7F5F2;
    --gray:#8C8880;
    --line:rgba(255,255,255,.14);
    --maxw:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none!important;transition:none!important}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:400 17px/1.65 Karla,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:Oswald,Impact,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.01em;margin:0}
  a{color:inherit}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{
    font-family:Oswald,sans-serif;font-weight:500;font-size:13px;
    letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  }
  :focus-visible{outline:3px solid var(--gold);outline-offset:3px}

  /* ---- signature: the diagonal slash from the logo ---- */
  .slash{height:26px;background:var(--ink);position:relative}
  .slash::after{
    content:"";position:absolute;inset:0;
    background:var(--gold);
    clip-path:polygon(0 100%,100% 0,100% 100%);
  }
  .slash-up{background:var(--paper)}
  .slash-up::after{background:var(--ink);clip-path:polygon(0 0,100% 100%,0 100%)}

  /* ---- header ---- */
  header{background:var(--ink);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .bar{display:flex;align-items:center;gap:20px;padding:14px 0}
  .brand{font-family:Oswald,sans-serif;font-weight:700;font-size:20px;color:#fff;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;line-height:1.1}
  .brand span{color:var(--gold)}
  .brand small{display:block;font-size:9px;letter-spacing:.2em;color:var(--gray);font-weight:500}
  nav{margin-left:auto;display:flex;align-items:center;gap:26px}
  nav a{color:#EDEAE4;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.04em}
  nav a:hover{color:var(--gold)}
  .call{
    background:var(--gold);color:#101010;padding:11px 20px;border-radius:2px;
    font-family:Oswald,sans-serif;font-weight:700;letter-spacing:.06em;font-size:15px;
    text-decoration:none;white-space:nowrap;
  }
  .call:hover{background:#fff}
  @media(max-width:820px){nav a:not(.call){display:none}}

  /* ---- hero ---- */
  .hero{background:var(--ink);color:#fff;padding:76px 0 84px;position:relative;overflow:hidden}
  .hero::before{
    content:"";position:absolute;top:0;right:-14%;width:52%;height:100%;
    background:linear-gradient(180deg,rgba(224,165,38,.16),transparent 70%);
    transform:skewX(-13deg);pointer-events:none;
  }
  .hero .wrap{position:relative}
  .hero h1{font-size:clamp(40px,7.4vw,78px);line-height:.96;max-width:15ch}
  .hero h1 em{font-style:normal;color:var(--gold);display:block}
  .hero p{max-width:52ch;color:#CFCAC1;font-size:19px;margin:22px 0 34px}
  .btns{display:flex;flex-wrap:wrap;gap:14px}
  .btn{
    display:inline-block;padding:15px 30px;border-radius:2px;text-decoration:none;
    font-family:Oswald,sans-serif;font-weight:700;letter-spacing:.07em;font-size:16px;
  }
  .btn-gold{background:var(--gold);color:#101010}
  .btn-gold:hover{background:#fff}
  .btn-ghost{border:2px solid rgba(255,255,255,.35);color:#fff}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
  .badges{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:38px;color:var(--gray);font-size:14px;letter-spacing:.04em}
  .badges b{color:#fff;font-weight:600}

  /* ---- services ---- */
  .section{padding:78px 0}
  .head{max-width:60ch;margin-bottom:40px}
  .head h2{font-size:clamp(28px,4.2vw,44px);line-height:1.05;margin:10px 0 14px}
  .head p{color:#5A564F;margin:0}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;background:#DDD8D0;border:1px solid #DDD8D0}
  .card{background:var(--paper);padding:30px 26px 32px;transition:background .18s}
  .card:hover{background:#fff}
  .card h3{font-size:19px;letter-spacing:.03em;margin-bottom:9px}
  .card p{margin:0;font-size:15.5px;color:#5A564F;line-height:1.6}
  .card .rule{width:34px;height:4px;background:var(--gold);margin-bottom:18px}

  /* ---- before / after gallery ---- */
  .work{background:var(--panel);color:#EDEAE4}
  .work h2{color:#fff}
  .work .head p{color:#C6C1B8}
  .projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:30px}
  .projects-lg{grid-template-columns:1fr;gap:60px}
  /* Gallery breaks out of the text column so photos can run near-full-bleed.
     max-height keeps a single image inside the viewport on short screens. */
  .wrap-wide{max-width:1760px}
  .projects-lg .ba{aspect-ratio:16/10;max-height:84vh}
  .ba{
    --pos:50%;
    position:relative;aspect-ratio:4/3;overflow:hidden;
    border:1px solid var(--line);border-radius:2px;background:#000;
  }
  .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .ba .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
  .ba .tag{
    position:absolute;bottom:16px;z-index:2;pointer-events:none;
    font-family:Oswald,sans-serif;font-weight:700;font-size:15px;letter-spacing:.16em;
    background:rgba(0,0,0,.75);color:#fff;padding:9px 16px;border-radius:2px;
  }
  .ba .tag-b{left:16px}
  .ba .tag-a{right:16px;background:var(--gold);color:#101010}
  .ba .handle{
    position:absolute;top:0;bottom:0;left:var(--pos);width:4px;
    background:var(--gold);z-index:2;pointer-events:none;transform:translateX(-50%);
  }
  .ba .handle::after{
    content:"";position:absolute;top:50%;left:50%;width:62px;height:62px;
    transform:translate(-50%,-50%);border-radius:50%;
    background:var(--gold);border:3px solid #101010;
    box-shadow:0 2px 12px rgba(0,0,0,.5);
  }
  .ba input[type=range]{
    position:absolute;inset:0;z-index:3;width:100%;height:100%;
    margin:0;padding:0;background:none;border:0;opacity:0;cursor:col-resize;
  }
  .ba:focus-within{outline:3px solid var(--gold);outline-offset:3px}


  /* ---- about ---- */
  .about{background:var(--panel);color:#EDEAE4}
  .about h2{color:#fff}
  .cols{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
  @media(max-width:800px){.cols{grid-template-columns:1fr;gap:34px}}
  .about p{color:#C6C1B8}
  .stat{border-left:3px solid var(--gold);padding:4px 0 4px 18px;margin-bottom:26px}
  .stat b{display:block;font-family:Oswald,sans-serif;font-size:28px;color:#fff;line-height:1.2}
  .stat span{font-size:14.5px;color:var(--gray)}

  /* ---- process ---- */
  .steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
  .step{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
  .step::before{
    content:counter(s,decimal-leading-zero);
    font-family:Oswald,sans-serif;font-weight:700;font-size:15px;color:var(--gold-deep);
    letter-spacing:.1em;display:block;margin-bottom:8px;
  }
  .step h3{font-size:17px;margin-bottom:8px}
  .step p{margin:0;font-size:15.5px;color:#5A564F}

  /* ---- contact ---- */
  .contact{background:var(--ink);color:#fff}
  .contact h2{color:#fff}
  .contact .head p{color:#C6C1B8}
  form{display:grid;gap:14px}
  label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gray);font-family:Oswald,sans-serif}
  input,select,textarea{
    width:100%;padding:13px 14px;background:#000;color:#fff;
    border:1px solid var(--line);border-radius:2px;font:400 16px/1.5 Karla,sans-serif;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--gold)}
  textarea{min-height:118px;resize:vertical}
  .field{display:grid;gap:6px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:600px){.two{grid-template-columns:1fr}}
  button{
    background:var(--gold);color:#101010;border:0;border-radius:2px;padding:16px 28px;
    font-family:Oswald,sans-serif;font-weight:700;letter-spacing:.07em;font-size:16px;cursor:pointer;
    justify-self:start;
  }
  button:hover{background:#fff}
  .direct a{color:var(--gold);text-decoration:none;font-family:Oswald,sans-serif;font-size:26px;letter-spacing:.02em}
  .direct a:hover{text-decoration:underline}
  .direct div{margin-bottom:22px}
  .direct span{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:4px}

  footer{background:#000;color:var(--gray);padding:34px 0;font-size:14px}
  .foot{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
  .foot a{color:var(--gray);text-decoration:none}
  .foot a:hover{color:var(--gold)}
  .foot .sep{margin-left:auto}

/* ---- short hero for interior pages ---- */
.hero-short{padding:56px 0 60px}
.hero-short h1{font-size:clamp(34px,5.6vw,58px);line-height:1;margin-top:14px}
.hero-short p{max-width:54ch;margin:18px 0 0}

/* ---- link out to the full gallery ---- */
.more{margin:36px 0 0;text-align:center}
.more a{
  font-family:Oswald,sans-serif;font-weight:700;letter-spacing:.07em;font-size:17px;
  color:var(--gold);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:3px;
}
.more a:hover{border-bottom-color:var(--gold)}

/* ---- dark-on-light button, for pages with a light CTA band ---- */
.btn-dark{border:2px solid var(--ink);color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:#fff}

nav a[aria-current=page]{color:var(--gold)}