:root{
    --charcoal:#1a1918;
    --quarry:#6b6862;
    --quarry-light:#948f86;
    --limewash:#f0ebe1;
    --paper:#faf7f1;
    --rust:#a8542e;
    --rust-dark:#7e3d1f;
    --lichen:#6b7353;
    --line: rgba(26,25,24,0.12);
    --radius: 2px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    width:100%;
    max-width:100%;
  }
  body{
    background:var(--paper);
    color:var(--charcoal);
    font-family:'Archivo',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
    max-width:100%;
    position:relative;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--rust);
    font-weight:500;
  }
  h1,h2,h3,h4{
    font-family:'Fraunces',serif;
    font-weight:600;
    line-height:1.05;
    letter-spacing:-0.01em;
    max-width:100%;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 40px;
  }
  @media (max-width:720px){ .wrap{padding:0 22px;} }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:transparent;
    border-bottom:0.5px solid transparent;
    transition:background .35s ease, border-color .35s ease;
  }
  header.scrolled:not(.solid-nav){
    background:rgba(250,247,241,0.8);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
  }
  header.solid-nav{
    background:rgba(26,25,24,0.95);
    backdrop-filter:blur(8px);
    border-bottom-color:rgba(255,255,255,0.1);
  }
  header.menu-open{
    background:var(--paper);
    border-bottom-color:var(--line);
  }
  header.menu-open ~ .hero .hero-badge{ visibility:hidden; }

  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 40px;
    max-width:1180px; margin:0 auto;
  }
  @media (max-width:720px){ .nav{ padding-left:22px; padding-right:22px; } }
  .logo{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:19px;
    letter-spacing:-0.01em;
    display:flex; align-items:center; gap:10px;
    flex:none;
  }
  .logo .mark{
    height:76px; width:auto; flex:none; display:block;
    margin-left:-8px;
    filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,0.35));
    transition:filter .35s ease;
  }
  @media (min-width:721px){
    header:not(.solid-nav) .nav{ padding-top:14px; padding-bottom:14px; }
    header:not(.solid-nav) .logo .mark{ height:84px; margin-left:-9px; }
    header:not(.solid-nav) .navlinks{ margin-top:5px; gap:40px; }
  }

  /* ---------- NAV ACTIONS (Call + Text Us + Menu) ---------- */
  .nav-actions{ display:flex; align-items:center; gap:14px; }
  @media (max-width:820px){ .nav-actions{ gap:10px; } }
  .text-us-nav{ display:none; }
  @media (max-width:820px){
    .text-us-nav{
      display:flex; align-items:center; gap:6px; flex:none; white-space:nowrap;
      margin-left:6px;
      background:var(--rust); color:var(--paper);
      font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;
      letter-spacing:.05em; text-transform:uppercase;
      padding:10px 14px; border-radius:5px;
      text-decoration:none;
      transition:background .2s ease, transform .2s ease;
    }
    .text-us-nav:hover, .text-us-nav:active{ background:var(--rust-dark); transform:scale(.97); }
    .text-us-nav svg{ width:15px; height:15px; flex-shrink:0; }
  }
  .call-us-nav{ display:none; }
  @media (max-width:820px){
    .call-us-nav{
      display:flex; align-items:center; gap:6px; flex:none; white-space:nowrap;
      background:rgba(255,255,255,0.16);
      border:1.5px solid rgba(255,255,255,0.55);
      color:var(--paper);
      font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;
      letter-spacing:.05em; text-transform:uppercase;
      padding:9px 14px; border-radius:5px;
      text-decoration:none;
      transition:background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
    }
    .call-us-nav:hover, .call-us-nav:active{ background:rgba(255,255,255,0.28); transform:scale(.97); }
    .call-us-nav svg{ width:16px; height:16px; flex-shrink:0; }
    header.scrolled:not(.solid-nav) .call-us-nav, header.menu-open .call-us-nav{
      background:rgba(26,25,24,0.06); border-color:rgba(26,25,24,0.35); color:var(--charcoal);
    }
    header.scrolled:not(.solid-nav) .call-us-nav:hover, header.menu-open .call-us-nav:hover{ background:rgba(26,25,24,0.12); }
    header.solid-nav .call-us-nav{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.3); }
    header.solid-nav .call-us-nav:hover{ background:rgba(255,255,255,0.16); }
  }
  @media (max-width:480px){
    .nav{ padding-top:8px; padding-bottom:8px; padding-left:16px; padding-right:16px; }
    .logo .mark{ height:54px; margin-left:-6px; }
    .nav-actions{ gap:6px; }
    .call-us-nav, .text-us-nav{
      font-size:11px; letter-spacing:.04em; gap:5px;
      padding:7px 10px; border-radius:4px;
    }
    .call-us-nav{ padding:6px 10px; }
    .text-us-nav{ margin-left:2px; }
    .call-us-nav svg, .text-us-nav svg{ width:13px; height:13px; }
  }
  @media (max-width:380px){
    .logo .mark{ height:46px; }
    .nav-actions{ gap:5px; }
    .call-us-nav, .text-us-nav{ padding-left:8px; padding-right:8px; }
  }
  header.scrolled:not(.solid-nav) .logo .mark, header.menu-open .logo .mark{ filter:none; }
  .navlinks{ display:flex; gap:38px; align-items:center; }
  .navlinks a{
    font-size:12px;
    font-weight:500;
    letter-spacing:0.03em;
    text-transform:uppercase;
    position:relative;
    padding-bottom:4px;
    color:var(--paper);
    text-shadow:0 1px 3px rgba(0,0,0,0.35);
    transition:color .35s ease, text-shadow .35s ease;
  }
  header.scrolled:not(.solid-nav) .navlinks a{ color:var(--charcoal); text-shadow:none; }
  header.solid-nav .navlinks a{ text-shadow:none; }
  .navlinks a::after{
    content:"";
    position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--rust);
    transition:width .25s ease;
  }
  .navlinks a:hover::after{ width:100%; }
  .navlinks .cta{
    background:var(--charcoal);
    color:var(--paper);
    padding:10px 18px;
    border-radius:var(--radius);
    text-shadow:none;
  }
  header.scrolled:not(.solid-nav) .navlinks .cta{ color:var(--paper); }
  header.solid-nav .navlinks .cta{ background:var(--rust); }
  .navlinks .cta::after{ display:none; }
  .navlinks .cta:hover{ background:var(--rust); }
  header.solid-nav .navlinks .cta:hover{ background:var(--rust-dark); }
  .navtoggle{
    display:none;
    background:none; border:none; cursor:pointer;
    color:var(--paper);
    text-shadow:0 1px 3px rgba(0,0,0,0.35);
    transition:color .35s ease, text-shadow .35s ease;
  }
  header.scrolled:not(.solid-nav) .navtoggle, header.menu-open .navtoggle{ color:var(--charcoal); text-shadow:none; border-left-color:var(--line); }
  header.solid-nav .navtoggle{ text-shadow:none; border-left-color:rgba(255,255,255,0.18); }
  @media (max-width:820px){
    .navlinks{ display:none; }
    .navtoggle{
      display:block; font-family:'JetBrains Mono',monospace; font-size:13px;
      letter-spacing:.08em; text-transform:uppercase; padding:10px 4px 10px 16px;
      border-left:3px solid rgba(255,255,255,0.35);
    }
    .navlinks.nav-open{
      display:flex; flex-direction:column; align-items:stretch; gap:0;
      position:absolute; top:100%; left:0; right:0;
      background:var(--paper);
      border-bottom:1px solid var(--line);
      padding:0 40px 12px;
      max-height:calc(100vh - 60px);
      overflow-y:auto;
    }
    .navlinks.nav-open a{
      width:100%;
      padding:11px 0;
      border-bottom:1px solid var(--line);
      color:var(--charcoal) !important;
      text-shadow:none !important;
      font-size:13.5px;
    }
    .navlinks.nav-open a::after{ display:none; }
    .navlinks.nav-open a:last-child{ border-bottom:none; }
    .navlinks.nav-open .cta{
      margin-top:12px; text-align:center; padding:12px 0;
      color:var(--paper) !important;
    }
  }
  @media (max-width:480px){
    .navtoggle{ font-size:11px; padding:8px 2px 8px 10px; border-left-width:2px; }
    .navlinks.nav-open{ padding-left:16px; padding-right:16px; }
  }
  @media (max-width:380px){ .navtoggle{ padding-left:8px; } }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  @media (max-width:720px){ .hero{ min-height:75vh; } }
  .hero-slideshow{ position:absolute; inset:0; overflow:hidden; }
  .hero-track{
    display:flex; width:100%; height:100%;
    transition:transform 1.1s cubic-bezier(.65,0,.35,1);
  }
  .hero-img{
    flex:0 0 100%; width:100%; height:100%;
    object-fit:cover; display:block;
    filter:saturate(0.92) contrast(1.03);
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(26,25,24,0.56) 0%, rgba(26,25,24,0.48) 40%, rgba(26,25,24,0.97) 100%);
  }
  .hero-content{
    position:relative; z-index:2;
    width:100%;
    padding:0 40px 76px;
    max-width:1180px;
    margin:0 auto;
  }
  .hero-eyebrow{
    color:var(--limewash);
    display:flex; align-items:center; gap:10px;
    margin-bottom:22px;
  }
  .hero-eyebrow .rule{ width:34px; height:1px; background:var(--rust); }
  .hero-badge{
    display:flex; flex-direction:row; align-items:center; gap:10px;
    position:absolute; z-index:4;
    color:var(--limewash);
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    line-height:1.6;
  }
  .hero-badge-flag{
    width:28px; height:auto; flex:none; display:block;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(240,235,225,0.35);
  }
  @media (max-width:720px){
    .hero-content{ padding:0 22px 96px; }
    .hero-badge{
      left:22px; bottom:36px;
      text-align:left;
    }
  }
  @media (min-width:721px){
    .hero-badge{
      left:max(40px, calc((100vw - 1180px) / 2 + 40px)); bottom:74px;
      gap:16px;
      text-align:left;
    }
    .hero-badge-flag{ width:46px; }
  }
  .hero h1{
    color:var(--paper);
    font-size:clamp(46px, 8vw, 108px);
    font-weight:600;
  }
  .hero h1 .course{
    display:block;
    opacity:0;
    transform:translateY(28px);
    animation:settle .8s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .hero h1 .course:nth-child(1){ animation-delay:.05s; }
  .hero h1 .course:nth-child(2){ animation-delay:.18s; color:var(--limewash); font-style:italic; font-weight:500;}
  .hero h1 .course:nth-child(3){ animation-delay:.31s; }
  @keyframes settle{ to{ opacity:1; transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){
    .hero h1 .course{ animation:none; opacity:1; transform:none; }
  }
  .hero-sub{
    color:var(--limewash);
    max-width:480px;
    font-size:16px;
    line-height:1.6;
    margin-top:22px;
    opacity:0.88;
  }
  .hero-actions{
    display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
    padding:14px 24px;
    border-radius:var(--radius);
    border:1px solid transparent;
    transition:all .2s ease;
  }
  .btn-primary{ background:var(--rust); color:var(--paper); }
  .btn-primary:hover{ background:var(--rust-dark); }
  .btn-ghost{ border-color:rgba(240,235,225,0.4); color:var(--limewash); }
  .btn-ghost:hover{ border-color:var(--limewash); background:rgba(240,235,225,0.08); }

  .hero-nav{
    position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index:5;
    display:flex; gap:10px;
  }
  .hero-nav-btn{
    width:32px; height:32px; border-radius:50%;
    background:rgba(26,25,24,0.35); border:1px solid rgba(240,235,225,0.35);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0; opacity:0.7;
    transition:opacity .25s ease, background .25s ease, border-color .25s ease;
  }
  .hero-nav-btn:hover{ opacity:1; background:rgba(26,25,24,0.6); border-color:var(--paper); }
  .hero-nav-btn svg{ width:13px; height:13px; }
  @media (max-width:720px){
    .hero-nav{ display:none; }
  }

  .hero-scroll{
    position:absolute; right:40px; bottom:36px; z-index:2;
    writing-mode:vertical-rl;
    color:var(--limewash);
    font-family:'JetBrains Mono',monospace;
    font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
    opacity:.75;
  }
  .hero-scroll .stem{
    width:1px; height:32px; background:var(--limewash); opacity:.5;
    animation:stemBounce 1.8s ease-in-out infinite;
  }
  @keyframes stemBounce{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(5px); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-scroll .stem{ animation:none; }
  }
  @media (max-width:720px){ .hero-scroll{ display:none; } }

  /* ---------- SECTION SHELL ---------- */
  section{ padding:118px 0; position:relative; }
  @media (max-width:720px){ section{ padding:78px 0; } }

  /* ---------- RUGGED SECTION EDGE ---------- */
  .rugged-top{
    margin-top:-32px;
    clip-path: polygon(
      0% 8px,
      20% 8px, 24% 32px,
      76% 32px, 80% 8px,
      100% 8px,
      100% 100%,
      0% 100%
    );
  }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:40px; margin-bottom:64px;
  }
  .section-head h2{ font-size:clamp(30px,4vw,46px); max-width:560px; }
  .section-head p{ max-width:320px; color:var(--quarry); font-size:14.5px; line-height:1.6; padding-bottom:6px; }
  @media (max-width:820px){ .section-head{ flex-direction:column; align-items:flex-start; gap:18px; } }

  /* ---------- PHILOSOPHY / CROSS-SECTION SIGNATURE ---------- */
  .philosophy{ background:var(--charcoal); color:var(--limewash); }
  .philosophy .eyebrow{ color:var(--rust); }
  .phil-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
  }
  @media (max-width:900px){ .phil-grid{ grid-template-columns:1fr; gap:46px; } }
  .phil-grid h2{
    color:var(--paper);
    font-size:clamp(28px,3.6vw,40px);
    margin:14px 0 22px;
  }
  .phil-grid p{
    font-size:15px; line-height:1.75; color:rgba(240,235,225,0.72);
    margin-bottom:16px; max-width:480px;
  }
  .phil-grid p strong{ color:var(--limewash); font-weight:600; }

  .diagram-box{
    background:rgba(240,235,225,0.03);
    border:1px solid rgba(240,235,225,0.14);
    border-radius:6px;
    padding:26px 26px 18px;
  }
  .diagram-caption{
    display:flex; justify-content:space-between;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
    color:rgba(240,235,225,0.5);
    margin-top:14px;
    border-top:1px solid rgba(240,235,225,0.12);
    padding-top:14px;
  }
  .diagram-caption span.hl{ color:var(--rust); }

  /* ---------- SERVICES : simple blurbs ---------- */
  .services{ background:var(--paper); padding-top:104px; padding-bottom:104px; }
  .services .section-head{ margin-bottom:55px; }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0 42px;
  }
  @media (max-width:860px){ .service-grid{ grid-template-columns:1fr; gap:26px; } }
  .service-card{ text-align:left; }
  .service-card:not(:first-child){ border-left:1px solid var(--line); padding-left:42px; }
  @media (max-width:860px){
    .service-card:not(:first-child){ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:26px; }
  }
  .service-visual{
    margin-bottom:-17px;
    height:167px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .service-visual img{
    width:167px; height:167px; object-fit:contain;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .service-card:hover .service-visual img{ transform:translateY(-2px); }
  .service-card:first-child .service-visual img{ width:178px; height:178px; }
  .service-num{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:.1em;
    color:var(--rust); margin-bottom:8px;
  }
  .service-card h3{
    font-size:20px; margin-bottom:8px;
  }
  .service-card p{
    color:var(--quarry); font-size:14px; line-height:1.6; max-width:280px;
  }
  @media (max-width:860px){
    .service-card{ text-align:center; }
    .service-card p{ margin-left:auto; margin-right:auto; }
  }

  /* ---------- AREAS WE SERVE ---------- */
  .areas-served{
    margin-top:68px;
  }
  .areas-head{ max-width:560px; margin-bottom:28px; }
  .areas-head h2{ font-size:clamp(24px,2.6vw,32px); margin-bottom:10px; }
  .areas-head p{ color:var(--quarry); font-size:14.5px; line-height:1.6; }
  .areas-list{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .areas-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 18px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:13.5px;
    color:var(--quarry);
    transition:border-color .25s ease, color .25s ease, background .25s ease;
  }
  .areas-chip:hover{ border-color:var(--quarry-light); color:var(--charcoal); }
  .areas-chip-home{
    border-color:var(--rust);
    color:var(--rust);
    font-weight:600;
    background:rgba(168,84,46,0.06);
  }
  .areas-chip-home:hover{ border-color:var(--rust); color:var(--rust); }
  .areas-home-tag{
    font-family:'JetBrains Mono',monospace;
    font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--paper);
    background:var(--rust);
    padding:3px 7px;
    border-radius:999px;
  }

  /* ---------- PORTFOLIO ---------- */
  .portfolio{ background:var(--limewash); }
  .port-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:56px 28px;
  }
  @media (max-width:720px){ .port-grid{ grid-template-columns:1fr; } }
  .port-item{ text-align:center; }
  .port-card{
    position:relative;
    aspect-ratio:16/11;
    border-radius:4px;
    overflow:hidden;
    background:var(--quarry);
    margin-bottom:14px;
  }
  .port-card .compare{
    position:absolute; inset:0;
    cursor:ew-resize; touch-action:pan-y;
    -webkit-user-select:none; user-select:none;
  }
  .port-card .compare-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
    -webkit-user-drag:none; user-select:none; pointer-events:none;
  }
  .port-card .compare-after{ z-index:1; }
  .port-card .compare-before{
    z-index:2;
    clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0);
  }
  .compare-handle{
    position:absolute; top:0; bottom:0; left:var(--pos, 50%); width:2px;
    background:var(--paper); transform:translateX(-50%); z-index:3; pointer-events:none;
    box-shadow:0 0 0 1px rgba(26,25,24,0.25);
  }
  .compare-handle .grip{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:34px; height:34px; border-radius:50%;
    background:var(--paper); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(26,25,24,0.35);
  }
  .compare-handle .grip svg{ width:15px; height:15px; }
  .compare-label{
    position:absolute; z-index:3;
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--paper);
    background:rgba(26,25,24,0.55); padding:4px 8px; border-radius:2px;
    pointer-events:none;
  }
  .compare-label.before{ top:16px; left:16px; }
  .compare-label.after{ bottom:18px; right:20px; }
  .port-scrim{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(0deg, rgba(26,25,24,0.86) 0%, rgba(26,25,24,0.05) 55%);
  }
  .port-tag{
    position:absolute; left:20px; bottom:18px; z-index:2; pointer-events:none;
    text-align:left;
  }
  .port-tag .loc-eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--rust); margin-bottom:4px; display:block;
  }
  .port-tag h4{ color:var(--paper); font-size:19px; font-weight:600; }
  .port-link{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px;
    background:rgba(26,25,24,0.06);
    border-radius:3px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--charcoal);
    transition:background .25s ease, color .25s ease;
  }
  .port-link::after{ content:"→"; transition:transform .25s ease; }
  .port-link:hover{ background:var(--rust); color:var(--paper); }
  .port-link:hover::after{ transform:translateX(3px); }
  .port-index{
    position:absolute; top:16px; right:18px; z-index:2; pointer-events:none;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:rgba(240,235,225,0.8);
  }
  .port-more{
    text-align:center; margin-top:52px;
  }

  /* ---------- PORTFOLIO / PROJECT PAGES ---------- */
  .page-intro{
    padding-top:168px;
    padding-bottom:64px;
    background:var(--paper);
  }
  .page-intro h1{ font-size:clamp(36px,5vw,58px); max-width:700px; margin-bottom:18px; }
  .page-intro p{ color:var(--quarry); font-size:16px; max-width:560px; line-height:1.7; }

  .back-link{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--quarry); margin-bottom:26px;
    transition:color .25s ease;
  }
  .back-link:hover{ color:var(--rust); }
  .back-link::before{ content:"\2190"; }

  .project-hero{
    padding-top:168px;
    padding-bottom:0;
    background:var(--paper);
  }
  .project-hero h1{ font-size:clamp(34px,5vw,54px); max-width:760px; margin-bottom:16px; }
  .project-sub{ color:var(--quarry); font-size:16px; max-width:560px; line-height:1.65; }

  .project-visual{ padding-top:44px; background:var(--paper); }
  .project-visual .port-card{
    aspect-ratio:16/9;
    border-radius:6px;
    margin-bottom:0;
  }
  @media (max-width:720px){
    .project-visual{ padding-bottom:0; }
    .project-body{ padding-top:40px; }
  }

  .project-body{ background:var(--paper); }
  .project-grid{
    display:grid; grid-template-columns:1.6fr 1fr; gap:64px;
  }
  @media (max-width:820px){ .project-grid{ grid-template-columns:1fr; gap:40px; } }
  .project-content h2{ font-size:24px; margin-bottom:16px; }
  .project-content p{ color:var(--quarry); font-size:15px; line-height:1.75; margin-bottom:18px; max-width:560px; }
  .placeholder-note{
    display:block;
    font-style:italic; font-size:13px; line-height:1.6;
    color:var(--quarry-light);
    border-left:2px dashed var(--line);
    padding-left:14px; margin-bottom:22px; max-width:520px;
  }
  .project-facts{
    background:var(--limewash); border-radius:6px; padding:28px;
    height:fit-content;
  }
  .project-facts h3{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--quarry); margin-bottom:20px;
  }
  .project-facts dl{ display:grid; grid-template-columns:auto 1fr; gap:12px 16px; margin-bottom:26px; }
  .project-facts dt{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--rust);
  }
  .project-facts dd{ font-size:14px; color:var(--charcoal); }
  .project-facts .btn{ width:100%; justify-content:center; }

  .project-gallery{ background:var(--paper); padding-top:0; }
  .project-gallery h2{ font-size:20px; margin-bottom:24px; }
  .gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .gallery-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; display:block; cursor:pointer; transition:opacity .25s ease; }
  .gallery-grid img:hover{ opacity:0.88; }
  @media (max-width:640px){ .gallery-grid{ grid-template-columns:1fr; } }

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:1000;
    background:rgba(10,9,8,0.94);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .lightbox.is-open{
    opacity:1; visibility:visible;
    transition:opacity .3s ease, visibility 0s linear 0s;
  }
  .lightbox-img-wrap{
    position:relative;
    width:min(1100px, 88vw);
    height:min(80vh, 82vh);
    display:flex; align-items:center; justify-content:center;
  }
  .lightbox-img{
    max-width:100%; max-height:100%;
    object-fit:contain;
    border-radius:4px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .lightbox-close{
    position:absolute; top:24px; right:24px; z-index:2;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,0.08); border:1px solid rgba(240,235,225,0.25);
    color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:20px; line-height:1;
    transition:background .25s ease;
  }
  .lightbox-close:hover{ background:rgba(255,255,255,0.18); }
  .lightbox-nav-btn{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:48px; height:48px; border-radius:50%;
    background:rgba(255,255,255,0.08); border:1px solid rgba(240,235,225,0.25);
    color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .25s ease;
  }
  .lightbox-nav-btn:hover{ background:rgba(255,255,255,0.18); }
  .lightbox-nav-btn.prev{ left:16px; }
  .lightbox-nav-btn.next{ right:16px; }
  .lightbox-nav-btn svg{ width:20px; height:20px; }
  .lightbox-counter{
    position:absolute; bottom:-38px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em;
    color:rgba(240,235,225,0.65);
  }
  @media (max-width:640px){
    .lightbox-img-wrap{ width:92vw; height:70vh; }
    .lightbox-nav-btn{ width:40px; height:40px; }
    .lightbox-nav-btn.prev{ left:8px; }
    .lightbox-nav-btn.next{ right:8px; }
    .lightbox-close{ top:14px; right:14px; }
  }

  /* ---------- EDITORIAL ---------- */
  .editorial{ background:var(--paper); padding-top:24px; }
  .editorial-filters{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:48px;
    padding-bottom:36px;
    border-bottom:1px solid var(--line);
  }
  .filter-chip{
    font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    padding:9px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--quarry);
    background:transparent;
    cursor:pointer;
    transition:border-color .25s ease, color .25s ease, background .25s ease;
  }
  .filter-chip:hover{ border-color:var(--quarry-light); color:var(--charcoal); }
  .filter-chip.is-active{
    border-color:var(--rust);
    background:var(--rust);
    color:var(--paper);
  }
  .filter-chip.is-active:hover{ color:var(--paper); }
  .editorial-featured{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:40px;
    align-items:center;
    margin-bottom:56px;
    padding-bottom:56px;
    border-bottom:1px solid var(--line);
  }
  @media (max-width:820px){ .editorial-featured{ grid-template-columns:1fr; gap:24px; } }
  .editorial-featured.is-hidden{ display:none; }
  .editorial-featured-media{ overflow:hidden; border-radius:8px; }
  .editorial-featured-media img{
    width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .editorial-featured:hover .editorial-featured-media img{ transform:scale(1.03); }
  .editorial-featured-label{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--rust); font-weight:600; display:block; margin-bottom:14px;
  }
  .editorial-featured-body h2{ font-size:clamp(24px,2.8vw,34px); margin-bottom:14px; line-height:1.15; }
  .editorial-featured-body p{ color:var(--quarry); font-size:15.5px; line-height:1.7; margin-bottom:18px; max-width:480px; }

  .editorial-meta{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
  .editorial-meta .editorial-tag{ margin-bottom:0; }
  .editorial-date{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em;
    color:var(--quarry-light);
  }
  .editorial-date::before{ content:"\00b7"; margin-right:8px; }

  .editorial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px 28px;
  }
  @media (max-width:980px){ .editorial-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .editorial-grid{ grid-template-columns:1fr; } }
  .editorial-card{ display:block; }
  .editorial-card.is-hidden{ display:none; }
  .editorial-empty{
    color:var(--quarry); font-size:14.5px; text-align:center; padding:40px 0;
  }
  .editorial-card img{
    width:100%; aspect-ratio:4/3; object-fit:cover;
    border-radius:6px; margin-bottom:16px;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .editorial-card:hover img{ transform:scale(1.03); }
  .editorial-tag{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--rust); margin-bottom:8px; display:block;
  }
  .editorial-card h3{ font-size:17.5px; line-height:1.3; margin-bottom:8px; }
  .editorial-card p{ color:var(--quarry); font-size:13.5px; line-height:1.6; margin-bottom:12px; max-width:none; }
  .editorial-read{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--charcoal);
  }
  .editorial-read::after{ content:"→"; transition:transform .25s ease; }
  .editorial-card:hover .editorial-read::after{ transform:translateX(3px); }

  .article-hero{ padding-top:168px; padding-bottom:0; background:var(--paper); }
  .article-hero h1{ font-size:clamp(32px,5vw,52px); max-width:760px; margin-bottom:4px; }
  .article-image{ padding-top:40px; padding-bottom:0; background:var(--paper); }
  .article-image img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; display:block; }
  .article-body{ padding-top:40px; background:var(--paper); }
  .article-content{ max-width:680px; margin:0 auto; }
  .article-content h2{ font-size:22px; margin:40px 0 14px; }
  .article-content h2:first-child{ margin-top:0; }
  .article-content p{ color:var(--quarry); font-size:16px; line-height:1.8; margin-bottom:22px; }
  .article-content .placeholder-note{ max-width:none; margin-bottom:32px; }
  .article-content .legal-note{
    display:block; font-style:italic; font-size:13.5px; line-height:1.6;
    color:var(--quarry-light); border-left:2px dashed var(--line);
    padding-left:14px; margin-bottom:32px; max-width:none;
  }
  /* Note boxes: written as a "quote" in the CMS editor */
  .article-content blockquote, .project-content blockquote{
    font-style:italic; font-size:13.5px; line-height:1.6;
    color:var(--quarry-light); border-left:2px dashed var(--line);
    padding-left:14px; margin:0 0 32px;
  }
  .article-content blockquote p, .project-content blockquote p{ font-size:inherit; color:inherit; line-height:inherit; margin-bottom:8px; }
  .article-content blockquote p:last-child, .project-content blockquote p:last-child{ margin-bottom:0; }
  .article-content h3{ font-size:18px; margin:32px 0 12px; }
  .article-content img{ width:100%; height:auto; border-radius:6px; margin:8px 0 22px; display:block; }
  .article-content a, .project-content a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
  .article-content ol{ margin:0 0 22px; padding-left:22px; }
  .article-content ol li{ color:var(--quarry); font-size:16px; line-height:1.8; margin-bottom:12px; }
  .article-content ul{ margin:0 0 22px; padding-left:22px; }
  .article-content li{ color:var(--quarry); font-size:16px; line-height:1.8; margin-bottom:12px; }
  .article-content li strong{ color:var(--charcoal); }

  /* ---------- ABOUT / CTA STRIP ---------- */
  .about{
    background:var(--paper);
  }
  .about-page{ padding-top:24px; }
  .about-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start;
  }
  @media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
  .about h2{ font-size:clamp(28px,3.6vw,42px); margin:14px 0 20px; }
  .about p{ font-size:15.5px; line-height:1.75; color:var(--quarry); max-width:480px; margin-bottom:14px;}
  .stat-row{
    display:flex; gap:34px; margin-top:30px; flex-wrap:wrap;
  }
  .stat{ }
  .stat b{ font-family:'Fraunces',serif; font-size:30px; font-weight:600; display:block; color:var(--rust); }
  .stat span{ font-size:12px; color:var(--quarry); letter-spacing:.02em; }
  .about-photo{
    position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/5;
  }
  .about-photo img{ width:100%; height:100%; object-fit:cover; object-position:right center; }
  .about-photo-doc{
    border-radius:0; overflow:visible; aspect-ratio:auto;
    background:none;
  }
  .about-photo-doc img{
    width:100%; height:auto; aspect-ratio:1086/1448; object-fit:initial;
    box-shadow:0 18px 40px rgba(26,25,24,0.18);
    transform:rotate(2deg);
  }
  @media (max-width:900px){
    .about-photo-doc img{ transform:none; }
  }

  /* ---------- TESTIMONIALS ---------- */
  .testimonials{
    margin-top:80px;
    padding-top:52px;
    border-top:1px solid var(--line);
  }
  .testimonials-head{ max-width:560px; margin-bottom:32px; }
  .testimonials-head h3{ font-size:clamp(22px,2.4vw,28px); margin-top:10px; }
  .testimonial-carousel{
    display:flex; align-items:center; gap:20px;
  }
  .testimonial-viewport{
    flex:1;
    overflow:hidden;
  }
  .testimonial-track{
    display:flex; gap:28px;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .testimonial-card{
    flex:0 0 calc((100% - 56px) / 3);
    background:var(--limewash);
    border-radius:6px;
    padding:28px;
  }
  .stars{
    color:var(--rust); font-size:14px; letter-spacing:2px; margin-bottom:14px;
  }
  .testimonial-card p{
    font-size:14.5px; line-height:1.7; color:var(--charcoal); margin-bottom:18px;
  }
  .testimonial-name{
    display:block;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em;
    color:var(--quarry);
  }
  .testimonial-name a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
  .testimonial-name a:hover{ color:var(--rust); }
  /* Long reviews are clamped; script.js adds a "Read more" toggle when a quote is cut off. */
  .testimonial-card p{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7;
    overflow:hidden;
  }
  .testimonial-card.is-expanded p{ display:block; overflow:visible; }
  .testimonial-track.has-expanded{ align-items:flex-start; }
  .testimonial-more{
    display:block; background:none; border:0; padding:0; margin:-8px 0 16px; cursor:pointer;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em;
    color:var(--rust); text-decoration:underline; text-underline-offset:3px;
  }
  .testimonial-more:hover{ color:var(--rust-dark); }
  .testimonials-source{
    margin-top:22px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em;
    color:var(--quarry);
  }
  .testimonials-source a{ color:var(--rust); text-underline-offset:3px; }
  .testimonials-source a:hover{ color:var(--rust-dark); }
  .testimonial-nav-btn{
    flex:none;
    width:36px; height:36px; border-radius:50%;
    background:transparent; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0;
    transition:background .25s ease, border-color .25s ease, opacity .25s ease;
  }
  .testimonial-nav-btn:hover{ background:var(--limewash); border-color:var(--quarry-light); }
  .testimonial-nav-btn svg{ width:14px; height:14px; }
  .testimonial-nav-btn:disabled{ opacity:0.3; cursor:default; }
  .testimonial-nav-btn:disabled:hover{ background:transparent; border-color:var(--line); }
  @media (max-width:900px){
    .testimonial-card{ flex-basis:100%; }
  }
  @media (max-width:640px){ .testimonial-carousel{ gap:10px; } }

  /* ---------- OUR APPROACH ---------- */
  .approach{ background:var(--limewash); }
  .approach-grid{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center;
  }
  @media (max-width:900px){ .approach-grid{ grid-template-columns:1fr; gap:40px; } }
  .approach-photo{
    position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/5;
  }
  .approach-photo img{ width:100%; height:100%; object-fit:cover; }
  .approach h2{ font-size:clamp(28px,3.6vw,42px); margin:14px 0 34px; max-width:520px; }
  .approach-steps{
    list-style:none;
    display:flex; flex-direction:column; gap:26px;
  }
  .approach-steps li{
    display:flex; gap:20px; align-items:flex-start;
  }
  .approach-num{
    flex:none;
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em;
    color:var(--rust);
    padding-top:3px;
  }
  .approach-steps h3{ font-size:17px; margin-bottom:6px; }
  .approach-steps p{ font-size:14px; line-height:1.65; color:var(--quarry); max-width:420px; }

  /* ---------- FAQ ---------- */
  .faq{ background:var(--limewash); }
  .faq-list{
    max-width:760px;
    border-top:1px solid var(--line);
  }
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-item summary{
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:22px 0;
    cursor:pointer;
    list-style:none;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-q{
    font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--charcoal);
  }
  .faq-icon{
    position:relative; width:14px; height:14px; flex:none;
  }
  .faq-icon::before, .faq-icon::after{
    content:""; position:absolute; background:var(--rust);
  }
  .faq-icon::before{
    top:50%; left:0; width:14px; height:1.6px; transform:translateY(-50%);
  }
  .faq-icon::after{
    left:50%; top:0; width:1.6px; height:14px; transform:translateX(-50%);
    transition:transform .3s ease;
  }
  .faq-item[open] .faq-icon::after{ transform:translateX(-50%) scaleY(0); }
  .faq-item p{
    padding:0 0 24px;
    max-width:620px;
    color:var(--quarry); font-size:14.5px; line-height:1.65;
  }

  /* ---------- FINAL CTA ---------- */
  .cta-band{
    background:var(--charcoal);
    color:var(--limewash);
    text-align:center;
    padding:120px 0;
  }
  .cta-band h2{
    color:var(--paper);
    font-size:clamp(32px,5.5vw,64px);
    max-width:760px; margin:0 auto 26px;
  }
  .cta-band p{ color:rgba(240,235,225,0.65); max-width:460px; margin:0 auto 36px; font-size:15px; line-height:1.6; }
  .cta-band .btn-primary{ padding:16px 32px; }
  .cta-alt{
    margin-top:20px; font-size:14px; color:rgba(240,235,225,0.65); line-height:1.9;
  }
  .cta-alt-or{
    display:block;
    margin:8px 0;
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em;
    color:rgba(240,235,225,0.4);
  }
  .cta-alt a{ color:var(--limewash); text-decoration:underline; text-underline-offset:2px; }
  .cta-alt a:hover{ color:var(--paper); }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--charcoal);
    border-top:1px solid rgba(240,235,225,0.12);
    padding:52px 0 34px;
    color:rgba(240,235,225,0.6);
  }
  .foot-grid{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;
    padding-bottom:34px; margin-bottom:26px;
    border-bottom:1px solid rgba(240,235,225,0.12);
  }
  .foot-logo{ font-family:'Fraunces',serif; font-size:20px; color:var(--paper); font-weight:600; }
  @media (max-width:720px){ .foot-logo{ display:none; } }
  .foot-links{ display:flex; gap:44px; flex-wrap:wrap; }
  .foot-col h5{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--rust); margin-bottom:12px; font-weight:500;
  }
  .foot-col a, .foot-col div{ display:block; font-size:13.5px; margin-bottom:8px; color:rgba(240,235,225,0.72); }
  .foot-col a:hover{ color:var(--paper); }
  .foot-bottom{
    display:flex; justify-content:space-between; font-size:12px; color:rgba(240,235,225,0.4);
    flex-wrap:wrap; gap:10px;
  }

  ::selection{ background:var(--rust); color:var(--paper); }

 /* ---------- BENEFITS : photo cards ---------- */
.benefits{ background:var(--limewash); }
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:860px){ .benefit-grid{ grid-template-columns:1fr; gap:20px; } }
.benefit-card{
  position:relative;
  background:var(--charcoal);
  aspect-ratio:4/5;
  border-radius:8px;
  overflow:hidden;
}
.benefit-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(0.85) brightness(0.9);
}
.benefit-card:hover img{ filter:saturate(1) brightness(1); }
.benefit-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,25,24,0) 35%, rgba(26,25,24,0.92) 100%);
}
.benefit-num{
  position:absolute; top:22px; left:24px; z-index:2;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:rgba(240,235,225,0.7); letter-spacing:.1em;
}
.benefit-body{
  position:absolute; left:24px; right:24px; bottom:24px; z-index:2;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.benefit-card:hover .benefit-body{ transform:translateY(-6px); }
.benefit-body h3{
  color:var(--paper); font-size:23px; font-weight:600; margin-bottom:8px;
}
.benefit-body p{
  color:rgba(240,235,225,0.78); font-size:13.5px; line-height:1.55;
}
.benefit-card.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.4s ease-out, transform 1.4s ease-out;
}
.benefit-card.reveal:nth-child(2){ transition-delay:.1s; }
.benefit-card.reveal:nth-child(3){ transition-delay:.2s; }
@media (min-width:861px){
  .benefit-card.reveal:nth-child(1){ transform:translateX(24px); }
  .benefit-card.reveal:nth-child(3){ transform:translateX(-24px); }
}
.benefit-card.reveal.in-view{ opacity:1; transform:none; }

/* ---------- ROI CHART ---------- */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.roi{ background:var(--charcoal); color:var(--limewash); }
.roi .section-head p{ color:rgba(240,235,225,0.65); }
.roi-chart{
  display:flex; flex-direction:column; gap:20px;
  max-width:820px; margin-top:8px;
}
.roi-row{
  display:grid;
  grid-template-columns:190px 1fr 56px;
  align-items:center;
  gap:16px;
}
.roi-label{
  font-size:14px; color:var(--paper);
}
.roi-bar-track{
  position:relative;
  height:12px;
  background:rgba(240,235,225,0.14);
  border-radius:4px;
  overflow:hidden;
}
.roi-bar{
  position:absolute; inset:0 auto 0 0;
  height:100%;
  border-radius:4px;
  background:var(--quarry-light);
  width:var(--w);
}
.roi-row:hover .roi-bar{ filter:brightness(1.15); }
.roi-bar{ transition:filter .2s ease; }
.roi-chart.roi-animate .roi-bar{
  width:0;
  transition:filter .2s ease, width 1.1s cubic-bezier(.2,.7,.2,1);
}
.roi-chart.roi-animate.in-view .roi-row:nth-child(1) .roi-bar{ width:var(--w); transition-delay:0s; }
.roi-chart.roi-animate.in-view .roi-row:nth-child(2) .roi-bar{ width:var(--w); transition-delay:.08s; }
.roi-chart.roi-animate.in-view .roi-row:nth-child(3) .roi-bar{ width:var(--w); transition-delay:.16s; }
.roi-chart.roi-animate.in-view .roi-row:nth-child(4) .roi-bar{ width:var(--w); transition-delay:.24s; }
.roi-chart.roi-animate.in-view .roi-row:nth-child(5) .roi-bar{ width:var(--w); transition-delay:.32s; }
.roi-chart.roi-animate.in-view .roi-row:nth-child(6) .roi-bar{ width:var(--w); transition-delay:.4s; }
.roi-chart.roi-animate.in-view .roi-row:nth-child(7) .roi-bar{ width:var(--w); transition-delay:.48s; }
.roi-chart.roi-animate.in-view .roi-row:nth-child(8) .roi-bar{ width:var(--w); transition-delay:.56s; }
.roi-value{
  font-family:'JetBrains Mono',monospace; font-size:13px;
  color:rgba(240,235,225,0.75); text-align:right;
}
.roi-featured .roi-label{ font-weight:600; color:var(--paper); }
.roi-featured .roi-value{ font-weight:600; color:var(--paper); }
.roi-featured .roi-bar{ background:var(--rust); }
.roi-example{
  margin:28px 0 8px;
  padding:24px 28px;
  border:1px solid rgba(240,235,225,0.14);
  border-radius:6px;
  max-width:560px;
}
.roi-example-label{
  display:block;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rust); margin-bottom:10px;
}
.roi-example p{
  font-size:14.5px; line-height:1.7; color:rgba(240,235,225,0.8);
}
.roi-example strong{ color:var(--paper); font-weight:600; }
.roi-note{
  margin-top:16px;
  font-size:12px; line-height:1.6;
  color:rgba(240,235,225,0.5);
  max-width:520px;
}
@media (max-width:640px){
  .roi-row{ grid-template-columns:1fr; gap:6px; }
  .roi-value{ text-align:left; }
}