/* ============ tokens ============ */
  :root{
    --bone:#F5F1EA;
    --cream:#EFE9DE;
    --paper:#FBF8F3;
    --ink:#23211E;
    --ink-soft:#3E3A33;
    --muted:#6B655C;
    --faint:#8A8272;
    --steel:#2E2C28;
    --steel-deep:#1E1C19;
    --brand:#FF5A00;
    --brand-deep:#E24E00;
    --brand-tint:#F4C6A8;
    --hair:#E1D9CA;
    --hair-strong:#D8CDB9;

    --font-display:'Zilla Slab','Georgia',serif;
    --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

    --fs-eyebrow:.75rem;
    --fs-sm:.875rem;
    --fs-base:1rem;
    --fs-lg:1.0625rem;
    --fs-h3:1.1875rem;
    --fs-h2:clamp(1.75rem, 1.2rem + 2.1vw, 2.3rem);
    --fs-h1:clamp(2.05rem, 1.4rem + 2.7vw, 2.9rem);
    --fs-lead:clamp(1.2rem, 1rem + .95vw, 1.55rem);

    --maxw:1200px;
    --gutter:clamp(20px, 5vw, 48px);
    --section-y:clamp(60px, 3.5rem + 4vw, 108px);
    --radius:2px;
  }

  /* ============ base ============ */
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--bone);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:var(--fs-base);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.16;
    margin:0;
    text-wrap:balance;
  }
  p{margin:0;}
  ul{margin:0;padding:0;list-style:none;}
  img{max-width:100%;display:block;}
  a{color:var(--brand);text-decoration:none;}
  a:hover{color:var(--brand-deep);}
  :focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
  [id]{scroll-margin-top:92px;}
  [hidden]{display:none !important;}

  .skip{
    position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);
    padding:10px 16px;z-index:100;
  }
  .skip:focus{left:8px;top:8px;}

  /* ============ layout primitives ============ */
  .band{width:100%;}
  .inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
  .section{padding-block:var(--section-y);}

  .eyebrow{
    font-size:var(--fs-eyebrow);
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--brand);
    margin:0;
  }
  .lead{
    font-family:var(--font-display);
    font-weight:500;
    font-size:var(--fs-lead);
    line-height:1.5;
    color:var(--ink-soft);
    text-wrap:pretty;
  }

  .btn{
    display:inline-flex;align-items:center;gap:.55em;
    font-family:var(--font-body);
    font-size:var(--fs-sm);
    font-weight:600;
    letter-spacing:.03em;
    padding:.95em 1.6em;
    border:1px solid transparent;
    border-radius:var(--radius);
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    transition:background-color .18s ease, color .18s ease, border-color .18s ease;
  }
  .btn--solid,.btn--brand{background:var(--brand);color:#fff;}
  .btn--solid:hover,.btn--brand:hover{background:var(--brand-deep);color:#fff;}

  .arrow-link{
    display:inline-flex;align-items:center;gap:.5em;
    font-weight:600;font-size:var(--fs-sm);letter-spacing:.03em;
    border-bottom:1px solid var(--brand);
    padding-bottom:2px;
  }
  .arrow-link svg{transition:transform .18s ease;}
  .arrow-link:hover svg{transform:translateX(3px);}

  .mark{flex-shrink:0;display:block;}

  /* ============ utility strip ============ */
  .util{
    background:var(--steel);
    color:#E9E1D2;
    font-size:.78rem;
    letter-spacing:.04em;
    text-align:center;
    padding:11px var(--gutter);
  }

  /* ============ header ============ */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:var(--bone);
    border-bottom:1px solid var(--hair);
    transition:box-shadow .2s ease;
  }
  .site-header.is-scrolled{box-shadow:0 6px 24px -18px rgba(35,33,30,.55);}
  .header-row{
    display:flex;align-items:center;justify-content:space-between;
    min-height:76px;padding-block:8px;gap:20px;
  }
  .brand{display:inline-flex;align-items:center;}
  .brand__logo{height:80px;width:auto;transition:height .2s ease;}
  .site-header.is-scrolled .brand__logo{height:50px;}
  .footer-logo{height:100px;width:auto;}
  .brand span{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:.15em;
    color:var(--ink);
  }
  .menu{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);}
  .menu a{
    color:var(--ink-soft);
    font-size:.84rem;
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .menu a:not(.btn):hover{color:var(--brand);}
  .menu a[aria-current="page"]{color:var(--brand);font-weight:600;}
  .menu .btn{padding:.7em 1.15em;}
  .nav-toggle{
    display:none;
    background:none;border:1px solid var(--hair-strong);
    color:var(--ink);
    font-family:var(--font-body);font-size:.8rem;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    padding:.6em .9em;border-radius:var(--radius);cursor:pointer;
  }

  /* ============ hero (home) + page hero ============ */
  .hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px;
    background:var(--bone);
  }
  .hero__panel{
    position:relative;
    min-height:min(82vh,680px);
    display:flex;
    isolation:isolate;
    overflow:hidden;
  }
  .hero__img{
    position:absolute;inset:0;z-index:-2;
    width:100%;height:100%;
    object-fit:cover;
  }
  .hero__panel--home .hero__img{object-position:50% 60%;}
  .hero__panel--ranch .hero__img{object-position:64% 50%;}
  .hero__img--drawing{filter:invert(1) hue-rotate(180deg);opacity:.5;object-position:50% 50%;}
  .hero__ph{
    background:#3B3731;
    display:grid;place-items:start end;
    padding:22px;
    color:#8F8778;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  }
  .hero__scrim{
    position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top, rgba(24,22,19,.92) 2%, rgba(24,22,19,.58) 40%, rgba(24,22,19,.05) 76%);
  }
  .hero__body{
    align-self:flex-end;
    padding:clamp(28px,3vw,44px) clamp(24px,3vw,48px);
    color:#F1EBDD;
  }
  .hero__eyebrow{
    font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;
    font-weight:600;margin:0 0 .7em;color:var(--brand);
  }
  .hero__title{
    font-size:clamp(1.55rem,1.1rem + 1.5vw,2rem);
    color:#F7F2E7;
    margin-bottom:.5em;
  }
  .hero__text{
    font-size:var(--fs-sm);
    line-height:1.6;
    color:#D3CBBA;
    max-width:42ch;
    margin-bottom:1.1em;
  }
  .hero__body .arrow-link{color:#F1EBDD;border-color:var(--brand);}

  .page-hero{
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;align-items:flex-end;
    min-height:clamp(380px,46vw,540px);
    background:var(--steel);
  }
  .page-hero .hero__scrim{background:linear-gradient(to top, rgba(24,22,19,.9) 4%, rgba(24,22,19,.55) 42%, rgba(24,22,19,.12) 80%);}
  .page-hero__body{width:100%;padding-block:clamp(32px,4vw,56px);color:#F1EBDD;}
  .crumb{font-size:.78rem;letter-spacing:.06em;color:#C9C0AE;margin-bottom:1.1em;}
  .crumb a{color:#E6DECB;}
  .crumb a:hover{color:#fff;}
  .page-hero h1{font-size:var(--fs-h1);color:#F7F2E7;max-width:20ch;margin-bottom:.45em;}
  .page-hero .sub{font-size:var(--fs-lg);line-height:1.6;color:#D8D0BF;max-width:58ch;margin-bottom:1.5em;}

  /* ============ promise ============ */
  .promise .inner{max-width:860px;text-align:center;}
  .promise .eyebrow{margin-bottom:1em;}
  .promise .lead{font-size:var(--fs-lead);color:var(--ink);}

  /* ============ what we build ============ */
  .build{background:var(--cream);}
  .section-head{text-align:center;max-width:640px;margin:0 auto clamp(36px,4vw,52px);}
  .section-head .eyebrow{margin-bottom:.8em;}
  .section-head h2{font-size:var(--fs-h2);}

  .tiles{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(16px,1.6vw,24px);
  }
  .tile{
    background:var(--paper);
    border:1px solid var(--hair-strong);
    padding:clamp(22px,2vw,30px);
    transition:border-color .18s ease, transform .18s ease;
  }
  .tile:hover{border-color:var(--brand-tint);transform:translateY(-2px);}
  .tile--link{display:block;color:inherit;}
  .tile--link:hover{color:inherit;border-color:var(--brand);}
  .tile__icon{color:var(--brand);margin-bottom:.9em;}
  .tile h3{font-size:var(--fs-h3);margin-bottom:.4em;color:var(--ink);}
  .tile p{font-size:var(--fs-sm);line-height:1.6;color:var(--muted);}
  .tile__more{display:inline-block;margin-top:.9em;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--brand);}

  /* ============ featured ============ */
  .featured .inner{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:clamp(28px,4vw,56px);
    align-items:center;
  }
  .featured__img{
    width:100%;height:100%;
    min-height:clamp(280px,34vw,430px);
    object-fit:cover;object-position:50% 55%;
  }
  .featured h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,1.85rem);margin:.5em 0 .6em;}
  .featured p{font-size:var(--fs-lg);line-height:1.65;color:var(--muted);margin-bottom:1.4em;}
  .featured .meta{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 1em;}
  .placeholder-note{color:var(--faint);}

  /* ============ why / points ============ */
  .why{border-top:1px solid var(--hair);}
  .why-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(24px,3vw,40px);
  }
  .why-col{border-top:2px solid var(--brand);padding-top:1.1em;}
  .why-col h3{font-size:var(--fs-h3);margin-bottom:.5em;}
  .why-col p{font-size:var(--fs-sm);line-height:1.65;color:var(--muted);}

  /* ============ service pages ============ */
  .svc-intro .inner{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:clamp(28px,5vw,72px);
    align-items:start;
  }
  .svc-intro h2{font-size:var(--fs-h2);margin:.5em 0 .7em;}
  .svc-intro .copy p{font-size:var(--fs-lg);line-height:1.7;color:var(--muted);}
  .checks{
    background:var(--paper);
    border:1px solid var(--hair-strong);
    padding:clamp(24px,3vw,36px);
  }
  .checks h3{font-size:var(--fs-h3);margin-bottom:1em;}
  .checks li{
    display:flex;gap:.8em;align-items:baseline;
    padding:.7em 0;border-top:1px solid var(--hair);
    font-size:.95rem;color:var(--ink-soft);
  }
  .checks li:first-child{border-top:0;padding-top:0;}
  .checks li::before{
    content:"";flex:none;width:.5rem;height:.5rem;background:var(--brand);
    transform:translateY(-.08em);
  }
  .draft-note{margin-top:1.1em;font-size:.75rem;color:var(--faint);}

  .svc-gallery{background:var(--cream);}
  .svc-gallery:has(.gallery--empty){display:none;}
  .gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:clamp(190px,21vw,270px);
    grid-auto-flow:dense;
    gap:clamp(10px,1.2vw,16px);
  }
  .shot{position:relative;margin:0;overflow:hidden;background:#DDD3C1;}
  .shot:nth-child(6n+1){grid-column:span 2;}
  .shot.shot--video{grid-column:span 1;grid-row:span 2;}
  .shot video{width:100%;height:100%;object-fit:cover;display:block;background:#1E1C19;}
  .shot img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .35s ease;}
  .shot:hover img{transform:scale(1.03);}
  .shot figcaption{
    position:absolute;left:0;right:0;bottom:0;
    padding:26px 14px 11px;
    font-size:.8rem;letter-spacing:.02em;color:#F7F2E7;
    background:linear-gradient(to top, rgba(24,22,19,.75), rgba(24,22,19,0));
    pointer-events:none;
  }
  .shot__ph{
    width:100%;height:100%;
    display:grid;place-content:center;text-align:center;padding:1.2rem;
    border:1px dashed #C7B9A0;
    color:#8A6A4A;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;line-height:1.8;
  }

  .related-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(16px,1.6vw,24px);
  }
  .rel{
    display:block;color:inherit;
    background:var(--paper);border:1px solid var(--hair-strong);
    padding:clamp(20px,2vw,28px);
    transition:border-color .18s ease;
  }
  .rel:hover{color:inherit;border-color:var(--brand);}
  .rel h3{font-size:var(--fs-h3);margin-bottom:.4em;color:var(--ink);}
  .rel p{font-size:var(--fs-sm);line-height:1.6;color:var(--muted);}
  .rel span{display:inline-block;margin-top:.8em;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--brand);}

  .lightbox{
    position:fixed;inset:0;z-index:200;
    background:rgba(20,18,15,.92);
    display:flex;align-items:center;justify-content:center;
    padding:4vw;
  }
  .lightbox img{max-width:100%;max-height:100%;object-fit:contain;}
  .lightbox button{
    position:absolute;top:12px;right:18px;
    background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;
  }

  /* ============ quote ============ */
  .quote{background:var(--steel);color:#EFE7D8;}
  .quote .inner{max-width:820px;text-align:center;}
  .quote blockquote{margin:0;}
  .quote p{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.3rem,1.05rem + 1.1vw,1.65rem);
    line-height:1.5;
    color:#F5EFE2;
  }
  .quote cite{
    display:block;
    margin-top:1.3em;
    font-style:normal;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:#B9AE99;
  }

  /* ============ cta ============ */
  .cta{background:var(--steel);color:#E9E1D2;}
  .cta .inner{
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(24px,4vw,48px);flex-wrap:wrap;
  }
  .cta h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,1.8rem);color:#F7F2E7;}
  .cta p{margin-top:.5em;color:#C4BCAD;font-size:var(--fs-sm);max-width:46ch;}

  /* ============ footer ============ */
  .site-footer{background:var(--steel-deep);color:#B7AE9C;padding-block:clamp(48px,6vw,64px) 26px;}
  .footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1.3fr;
    gap:clamp(28px,4vw,40px);
  }
  .footer-brand{display:flex;align-items:center;gap:10px;}
  .footer-brand span{
    font-family:var(--font-display);font-weight:700;
    letter-spacing:.15em;color:#F1EBDD;font-size:1rem;
  }
  .footer-grid p{font-size:.84rem;line-height:1.6;margin-top:.9em;max-width:32ch;}
  .footer-h{
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:#8C8371;font-weight:600;margin-bottom:.9em;
  }
  .site-footer a{
    color:#B7AE9C;display:block;line-height:2.05;font-size:.84rem;
    font-variant-numeric:tabular-nums;
  }
  .site-footer a:hover{color:#E6DECB;}
  .footer-bottom{
    max-width:var(--maxw);margin:clamp(32px,4vw,44px) auto 0;
    padding:20px var(--gutter) 0;
    border-top:1px solid #34302A;
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-size:.72rem;letter-spacing:.04em;color:#8C8371;
  }

  /* ============ responsive ============ */
  @media (max-width:1080px){
    .nav-toggle{display:inline-flex;}
    .menu{
      display:none;
      position:absolute;left:0;right:0;top:100%;
      flex-direction:column;align-items:stretch;
      gap:0;
      background:var(--bone);
      border-bottom:1px solid var(--hair);
      padding:8px var(--gutter) 18px;
    }
    .site-header.is-open .menu{display:flex;}
    .menu a{padding:12px 0;border-bottom:1px solid var(--hair);font-size:.95rem;}
    .menu .btn{margin-top:12px;justify-content:center;}
  }
  @media (max-width:940px){
    .hero{grid-template-columns:1fr;}
    .hero__panel{min-height:min(62vh,460px);}
    .tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
    .featured .inner,.svc-intro .inner{grid-template-columns:1fr;}
    .featured__img{min-height:clamp(240px,52vw,340px);}
    .why-grid,.related-grid{grid-template-columns:1fr;}
    .why-grid{gap:0;}
    .why-col{border-top:1px solid var(--hair);padding-top:1.2em;padding-bottom:1.2em;}
    .why-col:first-child{border-top:2px solid var(--brand);}
    .gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
    .shot:nth-child(6n+1){grid-column:auto;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .tiles{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .cta .inner{flex-direction:column;align-items:flex-start;}
    .util{font-size:.72rem;}
    .brand__logo{height:60px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
  }