/* ---------- tokens: light ---------- */
  :root{
    --paper:#FFFFFF;
    --text:#231F20;          /* logo dark  */
    --muted:#706D6E;         /* logo shade */
    --rule:#E4E3E3;
    --wash:#F7F7F6;
    --chip:#FFFFFF;
    --brass:#9A7A4C;
    --timber:#B09068;
    --panel:#231F20;         /* dark bands + solid buttons */
    --panel-text:#FFFFFF;
    --panel-muted:#C9C7C7;
    --navbg:rgba(255,255,255,.94);
    --art-filter:none;
    --photo-filter:none;
    --photo-radius:16px;
    --field-radius:12px;
  }
  /* ---------- tokens: dark ---------- */
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#141314;
      --text:#EDECEC;
      --muted:#9A9899;
      --rule:#2E2C2D;
      --wash:#1B1A1B;
      --chip:#211F21;
      --brass:#B79463;       /* lifted so gold still reads on dark */
      --timber:#C9A87E;
      --panel:#0D0C0D;
      --panel-text:#F2F1F1;
      --panel-muted:#A3A1A1;
      --navbg:rgba(20,19,20,.94);
      /* the drawing is line art on transparent — invert it, then restore hue */
      --art-filter:invert(1) hue-rotate(180deg);
      --photo-filter:brightness(.88) contrast(1.02);
    }
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  section[id]{ scroll-margin-top:80px; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
  body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:'Roboto',Helvetica,Arial,sans-serif;
    font-weight:400; font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ max-width:100%; }
  a{ color:inherit; }
  h1,h2,h3{ font-weight:300; line-height:1.14; margin:0; letter-spacing:-0.015em; }
  h1{ font-size:3.4rem; }
  h2{ font-size:2.3rem; }
  h3{ font-size:1.2rem; font-weight:500; letter-spacing:0; }
  p{ margin:0; }

  .wrap{ max-width:1140px; width:92%; margin-left:auto; margin-right:auto; }
  .row{ font-size:0; }
  .row > *{ font-size:17px; }

  .tick{ margin-bottom:1.3rem; line-height:1; }
  .tick i{
    display:inline-block; vertical-align:middle;
    width:52px; height:1px; background:var(--brass); margin-right:.75rem;
  }
  .tick span{
    display:inline-block; vertical-align:middle;
    font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
    color:var(--muted); font-weight:500;
  }

  /* ---------- nav ---------- */
  .nav{
    position:-webkit-sticky; position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--rule); background:var(--navbg);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
            backdrop-filter:saturate(160%) blur(10px);
  }
  .nav-in{ height:68px; line-height:68px; font-size:0; white-space:nowrap; }
  .brand{
    display:inline-block; vertical-align:middle; line-height:1.2;
    font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
    font-weight:700; text-decoration:none;
  }
  .brand em{ font-style:normal; font-weight:300; color:var(--muted); }
  .nav-right{ display:inline-block; vertical-align:middle; float:right; line-height:1.2; }
  .nav-right a.lnk{
    display:inline-block; font-size:.82rem; text-decoration:none; color:var(--muted);
    margin-right:1.6rem; border-bottom:1px solid transparent; padding-bottom:2px;
  }
  .nav-right a.lnk:hover,.nav-right a.lnk:focus-visible{
    color:var(--text); border-bottom-color:var(--timber);
  }
  .nav-call{
    display:inline-block; font-size:.82rem; font-weight:700; text-decoration:none;
    padding:.55rem 1rem; border:1px solid var(--text);
  }
  .nav-call:hover,.nav-call:focus-visible{ background:var(--text); color:var(--paper); }

  /* ---------- hero ---------- */
  .hero{ padding:3.5rem 0 4rem; }
  .hero-copy{ display:inline-block; vertical-align:middle; width:46%; padding-right:3%; }
  .hero-art{ display:inline-block; vertical-align:middle; width:54%; }
  .hero-art svg{ display:block; width:100%; height:auto; filter:var(--art-filter); }
  .lede{ color:var(--muted); font-size:1.06rem; margin-top:1.2rem; }
  .hero-cta{ margin-top:2rem; }
  .btn{
    display:inline-block; text-decoration:none; font-weight:700; font-size:.92rem;
    padding:.85rem 1.5rem; border:1px solid var(--text); margin-right:.7rem;
    border-radius:var(--field-radius);
  }
  .btn-solid{ background:var(--text); color:var(--paper); }
  .btn-solid:hover,.btn-solid:focus-visible{
    background:var(--timber); border-color:var(--timber); color:#231F20;
  }
  .btn-line:hover,.btn-line:focus-visible{ background:var(--wash); }
  .hero-meta{
    margin-top:2.1rem; padding-top:1.1rem; border-top:1px solid var(--rule);
    font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  }
  .hero-meta span{ margin-right:1.5rem; }

  .hero-art .ln-strong{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:draw 1.5s cubic-bezier(.4,0,.2,1) .25s forwards;
  }
  .hero-art image{ opacity:0; animation:settle .9s ease 1.5s forwards; }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @keyframes settle{ from{ opacity:0; } to{ opacity:1; } }
  @media (prefers-reduced-motion:reduce){
    .hero-art .ln-strong{ stroke-dashoffset:0; animation:none; }
    .hero-art image{ opacity:1; animation:none; }
  }

  /* ---------- bands ---------- */
  .band{ padding:4.5rem 0; }
  .band-wash{
    background:var(--wash);
    border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  }

  /* ---------- services ---------- */
  .svc-list{ margin-top:2.4rem; }
  .svc{ padding:1.8rem 0; border-top:1px solid var(--rule); font-size:0; }
  .svc:last-child{ border-bottom:1px solid var(--rule); }
  .svc-mark{ display:inline-block; vertical-align:top; width:8%; }
  .svc-mark svg{ width:34px; height:39px; }
  .svc-mark polygon{ fill:none; stroke:var(--brass); stroke-width:1.3; }
  .svc-body{ display:inline-block; vertical-align:top; width:92%; font-size:17px; }
  .svc-body p{ color:var(--muted); margin-top:.45rem; max-width:34rem; }
  .svc-body ul{ list-style:none; padding:0; margin:.9rem 0 0; font-size:0; }
  .svc-body li{
    display:inline-block; font-size:.78rem; color:var(--muted);
    border:1px solid var(--rule); padding:.25rem .6rem; margin:0 .45rem .45rem 0;
    background:var(--chip);
  }

  /* ---------- work ---------- */
  .work-grid{ margin-top:2.4rem; font-size:0; }
  .work-grid figure{ display:inline-block; vertical-align:top; width:32%; margin:0 2% 0 0; }
  .work-grid figure:last-child{ margin-right:0; }
  .shot{
    width:100%; padding-top:75%; background-size:cover; background-position:center;
    background-color:var(--wash); filter:var(--photo-filter);
    border-radius:var(--photo-radius); overflow:hidden;
  }
  .work-more{ margin-top:2rem; }

  /* ---------- legal pages ---------- */
  .legal{ max-width:44rem; }
  .legal h2{
    font-size:1.05rem; font-weight:500; margin-top:2.4rem;
    padding-top:1.4rem; border-top:1px solid var(--rule);
  }
  .legal p{ margin-top:.9rem; color:var(--muted); line-height:1.7; }
  .legal ul{ margin-top:.9rem; padding-left:1.1rem; color:var(--muted); line-height:1.7; }
  .legal li{ margin-bottom:.5rem; }
  .legal b{ color:var(--text); font-weight:500; }
  .work-grid figcaption{
    margin-top:.7rem; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
    color:var(--muted);
  }
  .work-grid figcaption b{ color:var(--text); font-weight:500; }


  /* ---------- project map ---------- */
  .map-lede{ color:var(--muted); margin-top:.9rem; max-width:38rem; }
  .map-frame{
    position:relative; margin-top:2rem; padding-top:56%;
    border:1px solid var(--rule); background:var(--wash);
  }
  #hexmap{ position:absolute; top:0; left:0; width:100%; height:100%; }
  .map-fallback{
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:2rem; color:var(--muted); font-size:.9rem;
  }
  .map-fallback code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em;
    border:1px solid var(--rule); padding:.05rem .3rem; background:var(--chip);
  }
  .map-frame.is-live .map-fallback{ display:none; }

  /* pin — a hexagon, not a teardrop */
  .pin{ width:22px; height:25px; cursor:pointer; transform:translateY(2px); }
  .pin svg{ display:block; width:100%; height:100%; overflow:visible; }
  .pin .pin-shell{ fill:var(--paper); stroke:var(--brass); stroke-width:1.4;
                   transition:fill .15s ease, stroke .15s ease; }
  .pin .pin-core{ fill:var(--brass); transition:fill .15s ease; }
  .pin:hover .pin-shell,.pin.is-active .pin-shell{ fill:var(--timber); stroke:var(--text); }
  .pin:hover .pin-core,.pin.is-active .pin-core{ fill:var(--text); }
  .pin[data-type="solar"]   .pin-core{ fill:#C08A3E; }
  .pin[data-type="adu"]     .pin-core{ fill:#6E8B7B; }
  .pin[data-type="remodel"] .pin-core{ fill:#8A6E9B; }

  /* cluster bubble */
  .pin-cluster{
    width:40px; height:46px; cursor:pointer;
    font-size:.78rem; font-weight:700; color:var(--paper);
  }
  .pin-cluster svg{ display:block; width:100%; height:100%; }
  .pin-cluster .pin-shell{ fill:var(--text); stroke:var(--brass); stroke-width:1.4; }
  .pin-cluster text{ fill:var(--paper); font-weight:700; font-size:14px;
                     font-family:'Roboto',sans-serif; }

  /* detail strip replaces Google's info window entirely */
  .map-detail{
    margin-top:1.1rem; padding:1rem 1.2rem; min-height:3.4rem;
    border:1px solid var(--rule); background:var(--chip);
  }
  .map-detail-hint{ color:var(--muted); font-size:.9rem; }
  .map-detail b{ font-weight:500; }
  .map-detail .meta{
    display:block; margin-top:.25rem; color:var(--muted);
    font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  }
  .map-key{ list-style:none; padding:0; margin:1.1rem 0 0; font-size:0; }
  .map-key li{
    display:inline-block; font-size:.75rem; color:var(--muted); margin:0 1.4rem .4rem 0;
  }
  .map-key i{
    display:inline-block; width:9px; height:9px; margin-right:.45rem;
    background:var(--brass); vertical-align:middle;
    -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
            clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  }
  .map-key li[data-type="solar"] i{ background:#C08A3E; }
  .map-key li[data-type="adu"] i{ background:#6E8B7B; }
  .map-key li[data-type="remodel"] i{ background:#8A6E9B; }
  @media (max-width:700px){ .map-frame{ padding-top:110%; } }

  /* ---------- proof ---------- */
  .proof-grid{ margin-top:2.2rem; font-size:0; }
  .proof{ display:inline-block; vertical-align:top; width:30.6%; margin-right:4%; font-size:17px; }
  .proof:last-child{ margin-right:0; }
  .proof h3{ font-weight:300; font-size:1.7rem; letter-spacing:-.02em; }
  .proof p{ color:var(--muted); margin-top:.5rem; font-size:.95rem; }

  /* ---------- estimate ---------- */
  .est{
    background:var(--panel); color:var(--panel-text); padding:4.5rem 0;
    border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  }
  .est h2{ color:var(--panel-text); }
  .est p{ color:var(--panel-muted); margin-top:1rem; max-width:34rem; }
  .est .tick span{ color:var(--panel-muted); }
  .est-copy{ display:inline-block; vertical-align:top; width:42%; padding-right:4%; }
  .est-form{ display:inline-block; vertical-align:top; width:58%; }
  .est .num{
    font-size:2.1rem; font-weight:700; letter-spacing:-.01em; text-decoration:none;
    display:inline-block; line-height:1.1; color:var(--panel-text); margin-top:1.6rem;
  }
  .est .num:hover,.est .num:focus-visible{ color:var(--timber); }
  .est small.hours{
    display:block; color:var(--panel-muted); font-size:.75rem;
    letter-spacing:.13em; text-transform:uppercase; margin-top:.5rem;
  }

  /* ---------- footer ---------- */
  .foot{ padding:2.4rem 0; font-size:.84rem; color:var(--muted); }
  .foot span,.foot a{ display:inline-block; margin-right:2rem; }
  .foot a{ text-decoration:none; }
  .foot a:hover{ color:var(--text); }
  .foot .lic{ float:right; margin-right:0; }

  :focus-visible{ outline:2px solid var(--timber); outline-offset:3px; }

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    h1{ font-size:2.3rem; }
    h2{ font-size:1.8rem; }
    .hero{ padding:2rem 0 2.5rem; }
    .hero-copy,.hero-art{ display:block; width:100%; padding-right:0; }
    .hero-art{ margin-bottom:1.5rem; }
    .band{ padding:3rem 0; }
    .work-grid figure{ display:block; width:100%; margin:0 0 1.6rem 0; }
    .proof{ display:block; width:100%; margin:0 0 1.4rem 0; }
    .est-copy,.est-form{ display:block; width:100%; padding-right:0; }
    .est-form{ margin-top:2rem; }
    .est .num{ font-size:1.8rem; }
    .nav-right a.lnk{ display:none; }
    .foot span,.foot a{ display:block; margin:0 0 .4rem 0; }
    .foot .lic{ float:none; }
  }
  @media (max-width:560px){
    .svc-mark{ width:14%; }
    .svc-body{ width:86%; }
    .svc-mark svg{ width:26px; height:30px; }
    .btn{ display:block; text-align:center; margin:0 0 .6rem 0; }
  }

  /* ---------- additions ---------- */
  .nav-right a.lnk.is-here{ color:var(--text); border-bottom-color:var(--brass); }
  .svc h3 a{ text-decoration:none; border-bottom:1px solid transparent; }
  .svc h3 a:hover,.svc h3 a:focus-visible{ border-bottom-color:var(--timber); }

  /* reviews: quotes set light, attribution as the microline */
  .rev-grid{ margin-top:2.2rem; font-size:0; }
  .rev{ display:inline-block; vertical-align:top; width:30.6%; margin-right:4%; font-size:17px; }
  .rev:last-child{ margin-right:0; }
  .rev blockquote{ margin:0; font-weight:300; font-size:1.18rem; line-height:1.5; }
  .rev blockquote::before{
    content:""; display:block; width:52px; height:1px; background:var(--brass); margin-bottom:1.1rem;
  }
  .rev cite{
    display:block; margin-top:1rem; font-style:normal; font-size:.72rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  }
  .rev cite b{ color:var(--text); font-weight:500; }
  .rev-links{
    margin-top:2.2rem; padding-top:1.1rem; border-top:1px solid var(--rule);
    font-size:.92rem; color:var(--muted);
  }
  .rev-links a{ text-decoration:none; border-bottom:1px solid var(--timber); }
  .rev-links a:hover,.rev-links a:focus-visible{ color:var(--text); }
  .rev-score{ color:var(--text); font-weight:500; }

  /* areas we serve, under the map */
  .areas{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--rule); font-size:0; }
  .area{ display:inline-block; vertical-align:top; width:31%; margin:0 3.5% 1.2rem 0; font-size:17px; }
  .area:nth-child(3n){ margin-right:0; }
  .area h3{
    font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--brass); font-weight:500; margin-bottom:.35rem;
  }
  .area p{ font-size:.9rem; color:var(--muted); line-height:1.7; }

  /* estimate form, on the dark band */
  .form-row{ font-size:0; }
  .form-row > *{ font-size:17px; }
  .field{ display:inline-block; vertical-align:top; width:48%; margin:0 4% 1rem 0; }
  .field:nth-child(2n){ margin-right:0; }
  .field.full{ width:100%; margin-right:0; }
  .field label{
    display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--panel-muted); margin-bottom:.4rem;
  }
  .field input,.field select,.field textarea{
    width:100%; background:transparent; color:var(--panel-text);
    border:1px solid rgba(255,255,255,.28); border-radius:var(--field-radius);
    padding:.7rem .8rem; font:inherit; font-size:.95rem;
    -webkit-appearance:none; appearance:none;
  }
  .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--timber); }
  .field textarea{ min-height:5.5rem; resize:vertical; }
  .field select option{ color:#231F20; }
  .btn-form{
    display:inline-block; background:var(--panel-text); color:var(--panel);
    border:1px solid var(--panel-text); font-family:inherit; font-weight:700;
    font-size:.92rem; padding:.85rem 1.5rem; cursor:pointer;
    border-radius:var(--field-radius);
  }
  .btn-form:hover,.btn-form:focus-visible{ background:var(--timber); border-color:var(--timber); color:#231F20; }
  .form-note{ margin-top:.8rem; font-size:.78rem; color:var(--panel-muted); }
  .hp{ position:absolute; left:-9999px; }

  /* interior pages */
  .page-hero{ padding:3.5rem 0 3rem; border-bottom:1px solid var(--rule); }
  .page-hero h1{ font-size:2.9rem; max-width:20ch; }
  .page-hero .lede{ max-width:38rem; }
  .steps{ margin-top:2.2rem; }
  .step{ padding:1.4rem 0; border-top:1px solid var(--rule); font-size:0; }
  .step:last-child{ border-bottom:1px solid var(--rule); }
  .step-n{
    display:inline-block; vertical-align:top; width:8%;
    font-size:1.5rem; font-weight:300; color:var(--brass); line-height:1.3;
  }
  .step-body{ display:inline-block; vertical-align:top; width:92%; font-size:17px; }
  .step-body p{ color:var(--muted); margin-top:.3rem; max-width:34rem; }
  .faq{ margin-top:2.2rem; }
  .faq details{ border-top:1px solid var(--rule); padding:1rem 0; }
  .faq details:last-child{ border-bottom:1px solid var(--rule); }
  .faq summary{ cursor:pointer; font-weight:500; list-style:none; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::before{ content:"+"; display:inline-block; width:1.4rem; color:var(--brass); font-weight:300; }
  .faq details[open] summary::before{ content:"\2212"; }
  .faq p{ color:var(--muted); margin-top:.6rem; padding-left:1.4rem; max-width:34rem; }

  /* footer page links: the only navigation on phones */
  .foot-nav{ margin-bottom:1.1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--rule); }
  .foot-social{ margin:.9rem 0 .2rem; }
  .foot-legal{ margin:.8rem 0 .2rem; }
  .foot-legal a{ margin-right:1.4rem; font-size:.8rem; }
  .foot-social a{
    display:inline-block; margin:0 .5rem .5rem 0; padding:.4rem .9rem;
    border:1px solid var(--rule); border-radius:999px;
    font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
    text-decoration:none; color:var(--muted);
    transition:color .15s ease, border-color .15s ease;
  }
  .foot-social a:hover,.foot-social a:focus-visible{ color:var(--text); border-color:var(--brass); }
  .foot .lic{ float:none; display:block; margin-top:.6rem; }
  .foot-nav a{ margin-right:1.4rem; }

  @media (max-width:900px){
    .rev{ display:block; width:100%; margin:0 0 1.8rem 0; }
    .area{ width:48%; margin-right:4%; }
    .area:nth-child(3n){ margin-right:4%; }
    .area:nth-child(2n){ margin-right:0; }
    .page-hero h1{ font-size:2.1rem; }
    .step-n{ width:14%; }
    .step-body{ width:86%; }
  }
  @media (max-width:560px){
    .field{ display:block; width:100%; margin-right:0; }
    .area{ display:block; width:100%; margin-right:0; }
    .foot-nav a{ display:inline-block; margin:0 1.1rem .5rem 0; }
  }

  /* ---------- portfolio ---------- */
  .port-intro{ color:var(--muted); margin-top:.9rem; max-width:38rem; }
  .theme-lede{ color:var(--muted); margin-top:.9rem; max-width:38rem; }

  .filters{ margin-top:1.8rem; font-size:0; }
  .filters button{
    display:inline-block; font:inherit; font-size:.75rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); cursor:pointer;
    border:1px solid var(--rule); background:var(--chip);
    padding:.4rem .8rem; margin:0 .5rem .5rem 0;
    transition:color .15s ease, border-color .15s ease;
  }
  .filters button:hover{ color:var(--text); border-color:var(--timber); }
  .filters button.is-on{ color:var(--text); border-color:var(--brass); }
  .filters .n{ color:var(--muted); margin-left:.35rem; letter-spacing:.06em; }
  .filters button.is-on .n{ color:var(--brass); }

  .trade-block{ padding-top:2.6rem; }
  .trade-block:first-child{ padding-top:0; }

  /* swipeable strip: one photo at a time on phones, next one peeking */
  .tiles{
    margin-top:1.8rem; font-size:0; white-space:nowrap;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:.2rem;
  }
  .tiles::-webkit-scrollbar{ width:0; height:0; display:none; }
  .tile{
    display:inline-block; vertical-align:top; white-space:normal;
    width:86%; margin:0 3% 0 0; scroll-snap-align:center;
  }
  .tile:last-child{ margin-right:0; }

  /* dots */
  .dots{
    margin:.85rem 0 2.2rem; text-align:center; font-size:0; line-height:0;
  }
  /* uses --text so it reads white on the dark theme and ink on the light one */
  .dots button{
    display:inline-block; width:7px; height:7px; padding:0; margin:0 4px 6px;
    border-radius:50%; cursor:pointer; opacity:.32;
    border:1px solid var(--text); background:var(--text);
    transition:opacity .15s ease, transform .15s ease;
  }
  .dots button.is-on{ opacity:1; transform:scale(1.35); }
  /* the faded edge dot: there are more photos this way */
  .dots button.is-edge{ opacity:.14; transform:scale(.72); }
  .dots button:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
  .tile-btn{
    display:block; width:100%; padding:0; border:0; background:none;
    cursor:zoom-in; line-height:0;
  }
  .tile .shot{
    display:block; width:100%; padding-top:75%;
    border-radius:var(--photo-radius); overflow:hidden;
    background-size:cover; background-position:center;
    background-color:var(--wash); filter:var(--photo-filter);
    transition:opacity .2s ease;
  }
  .tile-btn:hover .shot{ opacity:.88; }
  .tiles figcaption{
    margin-top:.7rem; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
    color:var(--muted); line-height:1.5;
  }
  .tiles figcaption b{ color:var(--text); font-weight:500; }

  /* ---------- lightbox ---------- */
  .lb{ display:none; }
  .lb.is-open{
    display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:200;
    background:rgba(20,19,20,.96); text-align:center;
  }
  .lb-stage{
    position:absolute; top:3.5rem; left:3.5rem; right:3.5rem; bottom:5rem;
    text-align:center;
  }
  .lb-stage img{
    max-width:100%; max-height:100%; width:auto; height:auto;
    vertical-align:middle; border:1px solid rgba(255,255,255,.14);
    border-radius:var(--photo-radius);
  }
  .lb-stage:after{ content:""; display:inline-block; height:100%; vertical-align:middle; }
  .lb-cap{
    position:absolute; left:0; right:0; bottom:1.6rem;
    color:#EDECEC; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  }
  .lb-n{ color:#9A9899; }
  .lb button{
    position:absolute; background:none; border:0; color:#EDECEC; cursor:pointer;
    font:inherit; line-height:1; padding:.6rem .9rem;
  }
  .lb button:hover{ color:var(--timber); }
  .lb button{ z-index:2; }  /* stay tappable above the photo on phones */
  .lb-close{ top:.8rem; right:1rem; font-size:2.2rem; }
  .lb-prev,.lb-next{ top:50%; margin-top:-2rem; font-size:3rem; }
  .lb-prev{ left:.4rem; }
  .lb-next{ right:.4rem; }

  /* wider screens: show the next couple of photos alongside */
  @media (min-width:901px){
    .tile{ width:46%; margin-right:2.5%; }
  }
  @media (min-width:1200px){
    .tile{ width:31.5%; margin-right:2.2%; }
  }
  @media (max-width:900px){
    .lb-stage{ top:3rem; left:1rem; right:1rem; bottom:4.5rem; }
    .lb-prev,.lb-next{ font-size:2.2rem; }
  }

  /* ---------- before / after slides ----------
     One slide = one project: the before and the after side by side on
     wider screens, stacked on phones. Inline-block rather than flex, same
     old-WebKit floor as the rest of the file. */
  .ba-pair{ font-size:0; line-height:0; }
  .ba-shot{
    position:relative; display:block; width:100%; margin:0 0 .5rem;
  }
  .ba-shot .shot{ padding-top:72%; }
  .ba-shot.is-after{ margin-bottom:0; }
  .ba-tag{
    position:absolute; top:.7rem; left:.7rem; line-height:1;
    font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
    color:#fff; background:rgba(20,19,20,.66);
    padding:.42rem .62rem .38rem; border-radius:999px;
  }
  .ba-shot.is-after .ba-tag{ background:rgba(154,122,76,.92); }
  .ba figcaption{ margin-top:.8rem; }
  .ba-n{ color:var(--muted); margin-left:.5rem; letter-spacing:.06em; }
  .ba-badge{
    display:inline-block; vertical-align:1px; margin-left:.6rem;
    font-size:.6rem; letter-spacing:.16em; color:var(--brass);
    border:1px solid var(--brass); border-radius:999px; padding:.18rem .5rem .14rem;
  }
  /* strip widths for pair slides override the single-photo widths above */
  .ba-strip .tile{ width:88%; margin-right:3%; }
  .ba-strip .tile:last-child{ margin-right:0; }

  @media (min-width:700px){
    .ba-shot{ display:inline-block; vertical-align:top; width:49%; margin:0 2% 0 0; }
    .ba-shot.is-after{ margin-right:0; }
    .ba-shot .shot{ padding-top:125%; }
    .ba-strip .tile{ width:82%; margin-right:2.5%; }
  }
  @media (min-width:1200px){
    .ba-strip .tile{ width:48.7%; margin-right:2.6%; }
  }

  /* ---------- mobile menu ----------
     Under 900px the nav links are hidden, so a <details> menu takes over.
     No JavaScript: the browser opens and closes it. Hidden on desktop. */
  .nav-menu{ display:none; vertical-align:middle; margin-right:.7rem; }
  .nav-menu summary{
    display:inline-block; list-style:none; cursor:pointer; user-select:none;
    font-size:.82rem; font-weight:500; padding:.55rem .9rem;
    border:1px solid var(--rule); color:var(--text);
  }
  .nav-menu summary::-webkit-details-marker{ display:none; }
  .nav-menu summary:before{
    content:""; display:inline-block; vertical-align:middle; width:14px; height:10px;
    margin:-2px .5rem 0 0;
    border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    background:linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat;
  }
  .nav-menu[open] summary{ border-color:var(--brass); }
  .nav-sheet{
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--rule);
    box-shadow:0 14px 28px rgba(0,0,0,.08);
    padding:.4rem 0 1rem; white-space:normal; line-height:1.2;
  }
  .nav-sheet a{
    display:block; padding:.95rem 1.5rem; font-size:1rem; text-decoration:none;
    color:var(--text); border-top:1px solid var(--rule);
  }
  .nav-sheet a:first-child{ border-top:0; }
  .nav-sheet a.is-here{ color:var(--brass); }
  .nav-sheet a:last-child{ color:var(--brass); font-weight:500; }
  @media (max-width:900px){
    .nav-menu{ display:inline-block; }
  }
  /* 7 links get tight between 901 and 1080px: pull the gaps in */
  @media (min-width:901px) and (max-width:1080px){
    .nav-right a.lnk{ margin-right:1.05rem; }
  }

  /* ---------- manuals listing: animated render -> blueprint cards ----------
     Uses the site's variables: --rule --paper --text --muted --brass --timber.
     Replaces the old .man-card / .man-thumb svg rules. */
  .man-group{ margin:2.6rem 0 1.2rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:500; border-top:1px solid var(--rule); padding-top:1rem; }
  .man-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
  @media (max-width:900px){ .man-grid{ grid-template-columns:1fr; gap:22px; } }
  
  .man-card{ display:flex; flex-direction:column; border:1px solid var(--rule); color:inherit; text-decoration:none; background:var(--paper); transition:border-color .2s ease; }
  .man-card:hover{ border-color:var(--timber); }
  .man-thumb{ position:relative; aspect-ratio:1200/792; max-width:100%; overflow:hidden; background:#f4f2ee; border-bottom:1px solid var(--rule); }
  .man-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .man-thumb .mt-bp{ --p:0; clip-path:polygon(0 0, calc(var(--p) * 140% - 20%) 0, calc(var(--p) * 140% - 40%) 100%, 0 100%); }
  .man-thumb canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .man-badge{ position:absolute; left:12px; top:12px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; background:var(--text); color:var(--paper); padding:5px 8px; z-index:2; }
  .man-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .man-body h3{ margin:0; font-size:19px; font-weight:500; text-wrap:balance; }
  .man-body p{ margin:0; color:var(--muted); font-size:15px; }
  .man-meta{ margin-top:auto; padding-top:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); font-weight:500; font-variant-numeric:tabular-nums; }
  
  /* neutralise the older inline-block card rules if any remain in the stylesheet */
  .man-grid{ font-size:inherit; margin-top:0; }
  .man-card{ width:auto; margin:0; font-size:17px; }
  .man-thumb{ padding-top:0; background:#f4f2ee; }
  @media (max-width:900px){ .man-card{ width:auto; margin:0; } }

  /* ---------- nav alignment + narrow phones ----------
     The right-hand group is floated, so vertical-align never applied to it
     and it sat at the top of the bar. Give it the bar's line box and let
     each item centre on it. */
  .nav-right{ line-height:68px; }
  .nav-right a.lnk,.nav-call,.nav-menu{ vertical-align:middle; line-height:1.2; }
  @media (max-width:560px){
    .brand{ font-size:.7rem; letter-spacing:.15em; }
    .nav-call{ padding:.5rem .75rem; font-size:.78rem; }
    .nav-menu{ margin-right:.5rem; }
  }
  @media (max-width:430px){
    /* icon-only menu button; the label stays for screen readers via aria-label */
    .nav-menu summary{ font-size:0; padding:.62rem .7rem; }
    .nav-menu summary:before{ margin:0; }
  }
  @media (max-width:380px){
    .brand{ font-size:.64rem; letter-spacing:.11em; }
    .nav-call{ padding:.48rem .6rem; font-size:.74rem; }
    .nav-menu{ margin-right:.4rem; }
  }