/* =========================================================
     DESIGN TOKENS — change these to re-skin the entire site
  ========================================================= */
  :root{
    /* ---- Color palette ---- */
    --ink:        #171512;   /* near-black, primary text & dark sections */
    --ink-soft:   #4a453f;   /* secondary text on light backgrounds */
    --bone:       #EDE7DB;   /* warm paper background */
    --bone-dim:   #E1D9C8;   /* slightly deeper paper, for panels */
    --paper:      #FAF8F3;   /* lightest surface, cards on bone */
    --ember:      #8C2F1B;   /* deep rust/ember accent — primary brand color */
    --ember-dim:  #6E2415;   /* darker ember for hover states */
    --steel:      #4A5560;   /* cool structural gray-blue, secondary accent */
    --brass:      #B08D3F;   /* muted brass, used sparingly for detail marks */
    --line:       rgba(23,21,18,0.14); /* hairline rule color */

    /* ---- Typography ---- */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Work Sans', -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* ---- Layout ---- */
    --maxw: 1180px;
    --gutter: clamp(20px, 5vw, 64px);
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  body{
    background: var(--bone);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight:400;
    line-height:1.55;
    -webkit-font-smoothing: antialiased;
  }

  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

  ::selection{ background: var(--ember); color: var(--bone); }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--ember);
    outline-offset: 3px;
  }

  /* ---------- Eyebrow / label style (production timecode feel) ---------- */
  .eyebrow{
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ember);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom: 18px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px;
    background: var(--ember);
    display:inline-block;
  }

  h1,h2,h3{
    font-family: var(--font-display);
    font-weight:500;
    letter-spacing: -0.01em;
    line-height:1.05;
  }

  /* ============ HEADER / NAV ============ */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(237,231,219,0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px var(--gutter);
    max-width: var(--maxw); margin:0 auto;
  }
  .brand{
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    font-weight: 600;
    text-decoration:none;
  }
  .brand span{ color: var(--ember); }
  .navlinks{
    display:flex; gap: 34px; list-style:none;
    font-size: 0.88rem;
    letter-spacing:0.02em;
  }
  .navlinks a{ text-decoration:none; position:relative; padding-bottom:4px; }
  .navlinks a::after{
    content:""; position:absolute; left:0; right:0; bottom:0;
    height:1px; background: var(--ember);
    transform: scaleX(0); transform-origin:left;
    transition: transform 0.25s ease;
  }
  .navlinks a:hover::after{ transform: scaleX(1); }
  .nav-cta{
    font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase;
    border:1px solid var(--ink); padding: 10px 20px;
    text-decoration:none; white-space:nowrap;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-cta:hover{ background: var(--ink); color: var(--bone); }
  .navtoggle{ display:none; }

  @media (max-width: 820px){
    .navlinks{ display:none; }
    .nav-cta{ padding: 8px 14px; font-size:0.74rem; }
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    padding: 96px var(--gutter) 60px;
    max-width: var(--maxw); margin:0 auto;
    display:grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 60px;
    align-items:end;
  }
  .hero h1{
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
    max-width: 14ch;
  }
  .hero h1 em{
    font-style: italic;
    color: var(--ember);
    font-weight:400;
  }
  .hero-sub{
    margin-top: 26px;
    max-width: 46ch;
    color: var(--ink-soft);
    font-size: 1.08rem;
  }
  .hero-actions{
    margin-top: 34px;
    display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  }
  .btn-primary{
    background: var(--ink); color: var(--bone);
    text-decoration:none;
    padding: 15px 28px;
    font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
    display:inline-block;
    transition: background 0.2s ease;
  }
  .btn-primary:hover{ background: var(--ember); }
  .btn-ghost{
    text-decoration:none;
    font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
    border-bottom:1px solid var(--ink);
    padding-bottom: 3px;
  }

  /* Signature element: a hand-drawn site-plan diagram that traces
     itself in on load — evokes laying out a floor plan for a room */
  .siteplan{
    align-self:end;
  }
  .siteplan svg{ width:100%; height:auto; }
  .siteplan-path{
    fill:none;
    stroke: var(--ink);
    stroke-width:1.2;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: draw 2.6s ease forwards 0.4s;
  }
  .siteplan-dot{
    fill: var(--ember);
    opacity:0;
    animation: fadein 0.6s ease forwards 2.4s;
  }
  .siteplan-label{
    font-family: var(--font-mono);
    font-size: 8px;
    fill: var(--ink-soft);
    opacity:0;
    animation: fadein 0.6s ease forwards 2.6s;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @keyframes fadein{ to{ opacity:1; } }

  .hero-ticker{
    max-width: var(--maxw); margin: 10px auto 0; padding: 0 var(--gutter);
  }
  .ticker-line{
    border-top:1px solid var(--line);
    padding-top:14px;
    font-family: var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.08em;
    color: var(--ink-soft);
    display:flex; gap:36px; flex-wrap:wrap;
    text-transform:uppercase;
  }
  .ticker-line b{ color:var(--ink); font-weight:500; }

  @media (max-width: 900px){
    .hero{ grid-template-columns:1fr; }
    .siteplan{ max-width:280px; opacity:0.85; }
  }

  /* ============ SECTION shared ============ */
  section{ padding: 100px var(--gutter); }
  .section-inner{ max-width: var(--maxw); margin:0 auto; }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap: 30px; margin-bottom: 56px; flex-wrap:wrap;
  }
  .section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
  .section-head p{ max-width:38ch; color:var(--ink-soft); }

  /* ============ CAPABILITIES ============ */
  .capabilities{ background: var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .cap-grid{
    display:grid; grid-template-columns: repeat(4,1fr); gap:1px;
    background: var(--line);
    border:1px solid var(--line);
  }
  .cap-card{
    background: var(--paper);
    padding: 34px 28px;
    min-height: 260px;
    display:flex; flex-direction:column; justify-content:space-between;
    transition: background 0.25s ease;
  }
  .cap-card:hover{ background: var(--bone); }
  .cap-num{ font-family:var(--font-mono); font-size:0.75rem; color: var(--ember); }
  .cap-card h3{ font-size:1.28rem; margin:18px 0 10px; font-weight:500; }
  .cap-card p{ font-size:0.92rem; color: var(--ink-soft); }

  @media (max-width:900px){ .cap-grid{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width:560px){ .cap-grid{ grid-template-columns: 1fr;} }

  /* ============ PROCESS / RUN OF SHOW ============ */
  .runofshow{ background: var(--ink); color: var(--bone); }
  .runofshow .eyebrow{ color: var(--brass); }
  .runofshow .eyebrow::before{ background: var(--brass); }
  .runofshow .section-head p{ color: rgba(237,231,219,0.65); }
  .row{
    display:grid; grid-template-columns: 140px 1fr 1.4fr;
    gap: 24px; padding: 28px 0; align-items:baseline;
    border-top:1px solid rgba(237,231,219,0.16);
  }
  .row:last-child{ border-bottom:1px solid rgba(237,231,219,0.16); }
  .row time{ font-family:var(--font-mono); font-size:0.78rem; color: var(--brass); letter-spacing:0.04em; }
  .row h3{ font-size:1.35rem; font-weight:500; }
  .row p{ color: rgba(237,231,219,0.68); font-size:0.94rem; max-width:52ch; }

  @media (max-width:760px){
    .row{ grid-template-columns:1fr; gap:8px; }
  }

  /* ============ WORK / PORTFOLIO ============ */
  .work-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.work-card{ text-decoration:none; color:inherit; display:block; }

.work-thumb{
  aspect-ratio: 4/5;
  background: linear-gradient(150deg, var(--steel), var(--ink) 70%);
  position:relative;
  overflow:hidden;
  margin-bottom:16px;
}

/* FIX: Removed the "REPLACE WITH PHOTO" text overlay completely so images can be seen */
.work-thumb img{ 
  position: absolute;
  top: 0;
  left: 0;
  width:100%; 
  height:100%; 
  object-fit:cover; 
  z-index: 1; /* Ensures your images sit on top of the gradient backgrounds */
}

.work-card:nth-child(2) .work-thumb{ background: linear-gradient(150deg, var(--ember), var(--ink-soft) 75%); }
.work-card:nth-child(3) .work-thumb{ background: linear-gradient(150deg, var(--brass), var(--ink) 75%); }
.work-meta .eyebrow{ margin-bottom:8px; }
.work-card h3{ font-size:1.3rem; font-weight:500; margin-bottom:6px; }
.work-card p{ color:var(--ink-soft); font-size:0.9rem; }

@media (max-width:900px){ .work-grid{ grid-template-columns:1fr; } }


  /* ============ TESTIMONIAL ============ */
  .testimonial{ background: var(--bone-dim); }
  .testi-inner{ max-width: 820px; margin:0 auto; text-align:center; }
  .testimonial blockquote{
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height:1.4;
    color: var(--ink);
  }
  .testimonial cite{
    display:block; margin-top:28px;
    font-style:normal; font-family: var(--font-mono);
    font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase;
    color: var(--ember);
  }

  /* ============ ABOUT ============ */
  .about{ background: var(--paper); }
  .about-grid{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items:center;
  }
  .about-photo{
    aspect-ratio: 3/4;
    background: linear-gradient(160deg, var(--bone-dim), var(--steel) 120%);
    position:relative;
  }
  .about-photo::after{
    content:"REPLACE WITH FOUNDER PHOTO";
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em;
    color: rgba(23,21,18,0.4); text-align:center; padding:20px;
  }
  .about-copy p{ margin-bottom:18px; color: var(--ink-soft); font-size:1.02rem; }
  .about-copy p:first-of-type{ color: var(--ink); font-size:1.15rem; }
  .about-stats{ display:flex; gap:40px; margin-top:32px; }
  .about-stats div b{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--ember); }
  .about-stats div span{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }

  @media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }

  /* ============ CONTACT / CTA ============ */
  .contact{ background: var(--ink); color: var(--bone); text-align:center; }
  .contact .eyebrow{ justify-content:center; color: var(--brass); }
  .contact .eyebrow::before{ background: var(--brass); }
  .contact h2{ font-size: clamp(2.1rem, 5vw, 3.6rem); max-width:18ch; margin:0 auto 24px; }
  .contact p{ color: rgba(237,231,219,0.65); max-width:50ch; margin:0 auto 36px; }
  .contact-form{
    max-width: 560px; margin: 0 auto; text-align:left;
    display:grid; gap:16px;
  }
  .contact-form label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color: rgba(237,231,219,0.6); display:block; margin-bottom:6px; }
  .contact-form input, .contact-form textarea{
    width:100%; background:transparent; border:none;
    border-bottom:1px solid rgba(237,231,219,0.3);
    color: var(--bone); font-family:var(--font-body); font-size:1rem;
    padding: 10px 2px; transition: border-color 0.2s ease;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{ color: rgba(237,231,219,0.35); }
  .contact-form input:focus, .contact-form textarea:focus{ border-color: var(--brass); }
  .contact-form button{
    margin-top:10px; justify-self:start;
    background: var(--brass); color: var(--ink); border:none;
    padding: 15px 30px; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
    cursor:pointer; transition: background 0.2s ease;
  }
  .contact-form button:hover{ background: #cba653; }
  .contact-direct{ margin-top:40px; font-family:var(--font-mono); font-size:0.85rem; }
  .contact-direct a{ color: var(--brass); text-decoration:none; }

  /* ============ FOOTER ============ */
  footer{ background: var(--bone); padding: 40px var(--gutter) 30px; border-top:1px solid var(--line); }
  .footer-inner{
    max-width: var(--maxw); margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:16px;
    font-size:0.82rem; color: var(--ink-soft);
  }
  .footer-social{ display:flex; gap:20px; list-style:none; }
  .footer-social a{ text-decoration:none; color: var(--ink-soft); }
  .footer-social a:hover{ color: var(--ember); }

  /* ---------- scroll reveal ---------- */
  .reveal{ opacity:0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in{ opacity:1; transform:none; }

  /* =========================================================
     SERVICES PAGE — additional components
  ========================================================= */

  /* ---- Page hero (shorter hero used on interior pages) ---- */
  .page-hero{
    padding: 80px var(--gutter) 50px;
    max-width: var(--maxw); margin:0 auto;
  }
  .page-hero h1{
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    max-width: 16ch;
  }
  .page-hero p{
    margin-top:20px; max-width:56ch; color: var(--ink-soft); font-size:1.05rem;
  }

  /* ---- Detailed service rows (alternating image / copy) ---- */
  .service-detail{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px;
    align-items:center;
    padding: 64px 0;
    border-top: 1px solid var(--line);
  }
  .service-detail:last-child{ border-bottom: 1px solid var(--line); }
  .service-detail.flip{ direction: rtl; }
  .service-detail.flip > *{ direction: ltr; }
  .service-visual{
    aspect-ratio: 4/3;
    background: linear-gradient(150deg, var(--steel), var(--ink) 75%);
    position:relative;
  }
  .service-detail:nth-of-type(2) .service-visual{ background: linear-gradient(150deg, var(--ember), var(--ink-soft) 75%); }
  .service-detail:nth-of-type(3) .service-visual{ background: linear-gradient(150deg, var(--brass), var(--ink) 75%); }
  .service-detail:nth-of-type(4) .service-visual{ background: linear-gradient(150deg, var(--ink-soft), var(--steel) 75%); }
  .service-visual::after{
    content:"REPLACE WITH PHOTO";
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.08em;
    color: rgba(237,231,219,0.45); text-align:center; padding:20px;
  }
  .service-copy .cap-num{ font-family:var(--font-mono); font-size:0.75rem; color: var(--ember); }
  .service-copy h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 14px 0 14px; }
  .service-copy > p{ color: var(--ink-soft); margin-bottom:20px; max-width:52ch; }
  .service-list{ list-style:none; display:grid; gap:10px; }
  .service-list li{
    font-size:0.94rem; color: var(--ink);
    padding-left: 22px; position:relative;
  }
  .service-list li::before{
    content:"—"; position:absolute; left:0; color: var(--ember);
  }

  @media (max-width: 820px){
    .service-detail, .service-detail.flip{ grid-template-columns:1fr; direction:ltr; }
  }

  /* ---- Pricing / package tiers ---- */
  .pricing{ background: var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .pricing-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
  }
  .price-card{
    background: var(--paper); padding: 40px 32px;
    display:flex; flex-direction:column;
  }
  .price-card.featured{ background: var(--ink); color: var(--bone); }
  .price-card.featured .price-tag,
  .price-card.featured h3{ color: var(--bone); }
  .price-card.featured .service-list li{ color: rgba(237,231,219,0.85); }
  .price-card.featured .service-list li::before{ color: var(--brass); }
  .price-tag{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--ember); margin-bottom:6px; }
  .price-card h3{ font-size:1.5rem; margin-bottom:6px; }
  .price-from{ font-family: var(--font-display); font-size:1.9rem; margin-bottom:18px; }
  .price-from span{ font-family: var(--font-body); font-size:0.85rem; color: var(--ink-soft); }
  .price-card.featured .price-from span{ color: rgba(237,231,219,0.65); }
  .price-card .service-list{ margin-bottom: 28px; flex:1; }
  .price-card .btn-ghost{ align-self:flex-start; }
  .price-card.featured .btn-ghost{ border-color: var(--bone); }

  @media (max-width: 900px){ .pricing-grid{ grid-template-columns:1fr; } }

  /* ---- FAQ ---- */
  .faq-list{ max-width: 820px; }
  .faq-item{
    border-top: 1px solid var(--line);
    padding: 24px 0;
  }
  .faq-item:last-child{ border-bottom: 1px solid var(--line); }
  .faq-item summary{
    cursor:pointer; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    font-family: var(--font-display); font-size:1.15rem; font-weight:500;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+"; font-family: var(--font-mono); font-size:1.3rem; color: var(--ember);
    flex-shrink:0; transition: transform 0.2s ease;
  }
  .faq-item[open] summary::after{ content:"–"; }
  .faq-item p{ margin-top:14px; color: var(--ink-soft); max-width:64ch; }