/* =========================================================
   2S DEVELOPMENT — Design System
   Ivory / charcoal / sage / brass. Editorial, architectural, quiet.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --ivory:#F4F1E9;
  --stone:#E9E5DC;
  --ink:#1B1C19;
  --sage:#64705D;
  --sage-deep:#4F5A4A;
  --brass:#B09A6D;
  --line:#D9D4C9;
  --clay:#D9D7CB;

  --serif:'Playfair Display', Georgia, serif;
  --sans:'Manrope', Helvetica, Arial, sans-serif;
  --mono:'DM Mono', 'SFMono-Regular', Consolas, monospace;

  --ease-3: cubic-bezier(.22,.61,.36,1);
  --ease-4: cubic-bezier(.16,1,.3,1);

  --nav-h: 88px;
  --nav-h-compact: 64px;
  --gutter: 6vw;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--stone); }
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; padding:0; }
input,textarea{ font-family:inherit; color:inherit; background:none; border:none; outline:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- typography ---------- */
.eyebrow{
  font:500 10px/1.6 var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.h-display{
  font:400 clamp(46px,7.4vw,118px)/.9 var(--serif);
  letter-spacing:-.045em;
  margin:0;
}
.h-section{
  font:400 clamp(40px,5.2vw,84px)/.94 var(--serif);
  letter-spacing:-.04em;
  margin:0;
}
.h-mid{
  font:400 clamp(28px,3vw,44px)/1.05 var(--serif);
  letter-spacing:-.03em;
}
.split-line{ overflow:hidden; display:block; }
.split-line > span{ display:inline-block; will-change:transform; }

/* ---------- layout helpers ---------- */
.container{ padding-left:var(--gutter); padding-right:var(--gutter); }
.section{ position:relative; }
.rule{ border-top:1px solid var(--line); }
.rule-b{ border-bottom:1px solid var(--line); }

/* ==========================================================
   CUSTOM CURSOR
   ========================================================== */
.cursor{
  position:fixed; top:0; left:0; z-index:9999;
  width:14px; height:14px; border-radius:50%;
  background:var(--ink);
  pointer-events:none;
  transform:translate3d(-50%,-50%,0);
  mix-blend-mode:difference;
  will-change:transform, width, height;
  transition:width .35s var(--ease-4), height .35s var(--ease-4),
             background-color .35s var(--ease-4), border-color .35s var(--ease-4);
}
.cursor::after{
  content:attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ivory); opacity:0; transition:opacity .25s var(--ease-3);
  white-space:nowrap;
}
.cursor.is-label::after{ opacity:1; }
.cursor.is-view{ width:88px; height:88px; background:var(--ink); }
.cursor.is-explore{ width:96px; height:96px; background:var(--sage-deep); }
.cursor.is-link{ width:38px; height:38px; background:var(--brass); }
.cursor.is-hidden{ opacity:0; }
@media (hover:none), (pointer:coarse){
  .cursor{ display:none; }
}

/* ==========================================================
   PAGE TRANSITION OVERLAY
   ========================================================== */
.page-transition{
  position:fixed; inset:0; z-index:10000;
  background:var(--ink);
  transform:translateY(101%);
  pointer-events:none;
}
.page-transition .pt-mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font:400 20px var(--serif); letter-spacing:-.02em; color:var(--ivory); opacity:0;
  white-space:nowrap; max-width:92vw; text-align:center;
}
@media (max-width:420px){
  .page-transition .pt-mark{ font-size:16px; }
}

/* ==========================================================
   NAVIGATION
   ========================================================== */
.site-nav{
  /* z-index:985 — the persistent top nav (Services link, Menu
     toggle, My Project badge) must stay above content overlays like
     .product-panel/.product-panel-overlay (975/980, css/studio.css),
     which previously outranked it. A left-open product drawer could
     otherwise sit on top of the whole nav strip — including the
     Menu button — and physically block clicks on it, which is what
     made the Services menu appear to "disappear." Still below
     .fullscreen-menu (995) so opening that menu still visually and
     functionally takes over from the nav strip as intended. */
  position:fixed; top:0; left:0; right:0; z-index:985;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  color:var(--ivory);
  transition:height .5s var(--ease-4), background-color .5s var(--ease-4),
             color .5s var(--ease-4), transform .6s var(--ease-4), border-color .5s var(--ease-4);
  border-bottom:1px solid transparent;
}
.site-nav.is-compact{ height:var(--nav-h-compact); }
.site-nav.is-hidden{ transform:translateY(-100%); }
.site-nav.theme-dark{ color:var(--ink); }
.site-nav.theme-dark.is-scrolled{ background:rgba(244,241,233,.86); backdrop-filter:blur(6px); border-color:var(--line); }
.site-nav.theme-light{ color:var(--ivory); }
.site-nav.theme-light.is-scrolled{ border-color:rgba(244,241,233,.25); }

.nav-logo{
  font:500 13px/1 var(--mono); letter-spacing:-.03em; text-transform:uppercase;
  white-space:nowrap;
}
.nav-links{
  display:flex; gap:28px; align-items:center;
}
.nav-links a{
  font:10px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  position:relative; padding:4px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .45s var(--ease-4);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ right:0; }

.nav-right{ display:flex; align-items:center; gap:26px; }
.menu-toggle{
  font:10px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  display:flex; align-items:center; gap:8px;
}
.menu-toggle .plus{ font-family:var(--mono); font-size:12px; transition:transform .4s var(--ease-4); }
.menu-toggle[aria-expanded="true"] .plus{ transform:rotate(45deg); }

.nav-project-badge{
  font:10px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  display:flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid currentColor;
  white-space:nowrap; opacity:.92; transition:opacity .3s var(--ease-3);
}
.nav-project-badge:hover{ opacity:1; }
.nav-project-badge .npb-meta{ color:var(--brass); }
.nav-project-badge .npb-arrow{ transition:transform .35s var(--ease-4); }
.nav-project-badge:hover .npb-arrow{ transform:translateX(3px); }

@media (max-width:1024px){
  .nav-links{ display:none; }
  .nav-project-badge{ padding:8px 10px; }
  .nav-project-badge .npb-label{ display:none; }
}
@media (max-width:640px){
  .nav-project-badge{ display:none; }
}

/* ==========================================================
   FULLSCREEN MENU
   ========================================================== */
.fullscreen-menu{
  /* z-index:995 — deliberately above .product-panel (980) and
     .product-panel-overlay (975, see css/studio.css). Those two
     were previously higher than this menu, so a left-open product
     drawer (e.g. from "Shop the space"/"Shop this look") could sit
     on top of the entire nav bar and the Services/Menu controls,
     intercepting clicks and making the menu look like it "vanished."
     js/chrome.js and js/product-panel.js also now close each other
     defensively so the two overlay systems never fight for the same
     screen space regardless of z-index. */
  position:fixed; inset:0; z-index:995;
  /* Solid, fully opaque surface (not translucent) so menu text never
     reads against the page behind it — isolation guarantees no
     ancestor mix-blend-mode (e.g. the custom cursor) can bleed through
     onto this layer. backdrop-filter was removed here (final
     corrective pass, Aug 2026): over an already fully opaque
     background it has no visible effect, and some browsers render
     backdrop-filter inconsistently when combined with an animated
     clip-path, which was a plausible contributor to reported "menu
     background/text" rendering issues — removing it is strictly safer
     with zero visual cost. */
  background:var(--ink); color:var(--ivory);
  isolation:isolate;
  display:flex; flex-direction:column;
  padding:0 var(--gutter) 40px;
  clip-path:inset(0% 0% 100% 0%);
  pointer-events:none;
}
.fullscreen-menu.is-open{ pointer-events:auto; clip-path:inset(0% 0% 0% 0%); }
/* Belt-and-suspenders fallback matching this codebase's existing
   .no-gsap convention (see the process/hero sections below): if GSAP
   never loads at all, guarantee full readability with plain CSS
   rather than depending on any inline style JS would otherwise set. */
.no-gsap .fm-nav a, .no-gsap .fm-side > *{ opacity:1 !important; transform:none !important; }
.fm-top{
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
}
.fm-close{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em;
  display:flex; align-items:center; gap:10px;
}
.fm-close .x{ display:inline-block; transition:transform .5s var(--ease-4); font-size:14px; }
.fullscreen-menu.is-open .fm-close .x{ transform:rotate(90deg); }

.fm-body{
  flex:1; display:flex; align-items:center; justify-content:space-between; gap:6vw;
  flex-wrap:wrap;
}
/* gap:6px — defensive breathing room between stacked menu rows. The
   rows previously relied only on the 1.1 line-height for separation;
   an explicit gap guarantees adjacent rows never visually touch
   (glyph descenders, differing font-metric rendering across browsers)
   regardless of exactly how each row's own animated reveal settles. */
.fm-nav{ display:flex; flex-direction:column; gap:6px; }
.fm-nav a{
  font:400 clamp(38px,7vw,96px)/1.1 var(--serif); letter-spacing:-.045em;
  overflow:hidden; position:relative;
  display:flex; align-items:baseline; gap:18px;
}
.fm-nav a .fm-index{
  font:10px var(--mono); color:var(--brass); letter-spacing:.1em; transform:translateY(-6px);
}
.fm-nav a .fm-word{ display:inline-block; }
.fm-nav a:hover .fm-word{ color:var(--brass); }
.fm-side{
  max-width:280px; display:flex; flex-direction:column; gap:22px;
}
.fm-side p{ font-size:14px; line-height:1.6; color:#f4f1e9c9; }
.fm-side .eyebrow{ color:var(--brass); }
.fm-sublinks{ display:flex; flex-direction:column; gap:11px; }
.fm-sublinks a{
  font:11px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:#f4f1e9c9;
  transition:color .3s var(--ease-3);
}
.fm-sublinks a:hover{ color:var(--brass); }

.fm-footer{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top:1px solid #ffffff2e; padding-top:18px; margin-top:24px;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:#f4f1e9a8;
}
.fm-footer a:hover{ color:var(--ivory); }

@media (max-width:700px){
  .fm-body{ align-items:flex-start; padding-top:20px; }
  .fm-side{ display:none; }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  color:var(--ivory);
}
.hero-media{
  position:absolute; inset:-8% -4%;
  will-change:transform;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,8,.18) 0%, rgba(10,10,8,.12) 40%, rgba(8,8,6,.62) 100%);
}
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) 9vh;
}
.hero-heading{
  font:400 clamp(52px,8.6vw,146px)/.86 var(--serif); letter-spacing:-.05em;
  max-width:900px;
}
.hero-sub{
  margin-top:22px; max-width:460px;
  font:12px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.04em;
  opacity:0;
}
.hero-cta{
  margin-top:38px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; opacity:0;
}
.hero-btn{
  font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em;
  padding:16px 26px; border:1px solid var(--ivory); color:var(--ivory);
  display:inline-flex; align-items:center; gap:10px; transition:background .35s var(--ease-3), color .35s var(--ease-3);
}
.hero-btn .arrow{ transition:transform .35s var(--ease-4); }
.hero-btn:hover .arrow{ transform:translateX(3px); }
.hero-btn.is-primary{ background:var(--ivory); color:var(--ink); }
.hero-btn.is-primary:hover{ background:var(--brass); border-color:var(--brass); }
.hero-btn.is-ghost{ border-color:rgba(244,241,233,.5); }
.hero-btn.is-ghost:hover{ background:rgba(244,241,233,.12); border-color:var(--ivory); }
.hero-scroll{
  position:absolute; right:var(--gutter); bottom:8vh; z-index:2;
  width:112px; height:112px; border:1px solid rgba(244,241,233,.55); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font:9px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.08em;
  color:var(--ivory); opacity:0;
  animation:spin 26s linear infinite;
}
.hero-scroll span{ display:block; animation:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:700px){
  .hero-scroll{ display:none; }
  .hero-content{ padding-bottom:12vh; }
}

/* ==========================================================
   SECTION HEADERS (shared)
   ========================================================== */
.section-head{
  padding:120px var(--gutter) 0;
}
.section-head .eyebrow{ color:var(--sage); display:block; margin-bottom:22px; }
.section-head.on-dark .eyebrow{ color:var(--brass); }
/* Homepage repositioning (Aug 2026): a short supporting line under a
   section heading, reused by Projects/Services/Network — same family
   as .about-copy p, one step lighter since it's a secondary line. */
.section-head p{ margin-top:20px; max-width:480px; font:15px/1.6 var(--sans); color:#5a5b54; }

/* ==========================================================
   PROJECTS
   ========================================================== */
.projects-section{ background:var(--ivory); padding-bottom:40px; }
.projects-filter{
  display:flex; justify-content:space-between; align-items:center;
  margin:46px var(--gutter) 0; padding:14px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
}
.project-list{ padding:0 var(--gutter); margin-top:10px; }
.project-row{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:6vw;
  align-items:center; padding:64px 0; border-bottom:1px solid var(--line);
  cursor:pointer;
}
.project-row:first-child{ padding-top:44px; }
.project-row:nth-child(even){ grid-template-columns:1.1fr 0.9fr; }
.project-row:nth-child(even) .project-figure{ order:2; }
.project-row:nth-child(even) .project-info{ order:1; text-align:right; align-items:flex-end; }

.project-figure{
  position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--clay);
}
.project-figure img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); transition:transform 1.1s var(--ease-4);
}
.project-row:hover .project-figure img{ transform:scale(1.0); }
.project-figure .pf-frame{
  position:absolute; inset:14px; border:1px solid rgba(244,241,233,.0);
  transition:border-color .5s var(--ease-3);
  pointer-events:none;
}

.project-info{ display:flex; flex-direction:column; gap:16px; }
.project-index{ font:10px var(--mono); color:var(--brass); letter-spacing:.1em; }
.project-name{
  font:400 clamp(34px,4.2vw,64px)/1 var(--serif); letter-spacing:-.03em;
  transition:transform .5s var(--ease-4), color .5s var(--ease-3);
}
.project-row:hover .project-name{ transform:translateX(10px); color:var(--sage); }
.project-row:nth-child(even):hover .project-name{ transform:translateX(-10px); }
.project-meta{
  display:flex; gap:18px; flex-wrap:wrap;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
}
.project-row:nth-child(even) .project-meta{ justify-content:flex-end; }
.project-view{
  display:inline-flex; align-items:center; gap:8px;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease-3), transform .4s var(--ease-3);
}
.project-row:hover .project-view{ opacity:1; transform:translateY(0); }
.project-view .arrow{ display:inline-block; transition:transform .4s var(--ease-4); }
.project-row:hover .project-view .arrow{ transform:translate(3px,-3px); }
.project-shop{
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--brass);
}
.project-shop .arrow{ display:inline-block; transition:transform .4s var(--ease-4); }
.project-row:hover .project-shop .arrow{ transform:translateX(3px); }

@media (max-width:900px){
  .project-row, .project-row:nth-child(even){
    grid-template-columns:1fr; gap:22px; padding:38px 0;
  }
  .project-row:nth-child(even) .project-figure{ order:0; }
  .project-row:nth-child(even) .project-info{ order:0; text-align:left; align-items:flex-start; }
  .project-row:nth-child(even) .project-meta{ justify-content:flex-start; }
  .project-view{ opacity:1; transform:none; }
}

/* ==========================================================
   ABOUT
   ========================================================== */
.about-section{ background:var(--clay); padding:130px 0 90px; overflow:hidden; }
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:5vw;
  align-items:end; padding:0 var(--gutter);
}
.about-copy .h-section{ margin-bottom:30px; }
.about-copy p{
  font:16px/1.6 var(--sans); max-width:420px; color:#3c3d38;
}
.about-figure{ position:relative; overflow:hidden; aspect-ratio:3/4; }
.about-figure img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.about-stats{
  display:flex; gap:8vw; margin-top:80px; padding:0 var(--gutter);
  flex-wrap:wrap;
}
.about-stat b{ display:block; font:400 clamp(30px,3vw,48px)/1 var(--serif); }
.about-stat span{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:50px; }
  .about-figure{ order:-1; aspect-ratio:4/3; }
  .about-stats{ gap:12vw; }
}

/* ==========================================================
   SERVICES
   ========================================================== */
.services-section{ background:var(--ivory); padding:130px 0 100px; }
.services-list{ margin:56px var(--gutter) 0; border-top:1px solid var(--line); }
/* Homepage repositioning (Aug 2026): groups the same service rows
   conceptually into Create / Build / Complete (spec section 8) — one
   small label above each cluster, no new row component. */
.services-group-label{
  padding:34px 0 0; font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--brass);
}
.services-group-label:first-child{ padding-top:26px; }
/* Final refinement (Aug 2026): one subtle sub-category line per group
   (spec section 3) — same quiet, dot-separated small-caps treatment
   as .network-tags, sized to sit directly under the group label
   rather than compete with it. */
.services-group-tags{
  margin-top:8px; max-width:640px;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage);
}
.service-row{
  position:relative;
  display:flex; align-items:center; gap:36px;
  padding:34px 0; border-bottom:1px solid var(--line);
  transition:padding .5s var(--ease-4);
}
.service-row .sr-index{ font:11px var(--mono); color:var(--sage); width:34px; flex:none; }
.service-row .sr-name{
  font:400 clamp(28px,4vw,54px)/1 var(--serif); letter-spacing:-.03em;
  transition:transform .5s var(--ease-4);
}
.service-row .sr-desc{
  margin-left:auto; text-align:right;
  font:10px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage);
  max-width:220px;
}
.service-row .sr-thumb{
  position:absolute; right:calc(var(--gutter) + 250px); top:50%;
  width:180px; height:120px; overflow:hidden;
  transform:translateY(-50%) scale(.92); opacity:0;
  transition:opacity .45s var(--ease-3), transform .45s var(--ease-3);
  pointer-events:none;
}
.service-row .sr-thumb img{ width:100%; height:100%; object-fit:cover; }
.service-row:hover{ padding-left:14px; }
.service-row:hover .sr-name{ transform:translateX(14px); color:var(--sage); }
.service-row:hover .sr-thumb{ opacity:1; transform:translateY(-50%) scale(1); }

@media (max-width:900px){
  .service-row{ flex-wrap:wrap; gap:10px; padding:26px 0; }
  .service-row .sr-desc{ margin-left:0; text-align:left; order:3; width:100%; }
  .service-row .sr-thumb{ display:none; }
  .service-row:hover{ padding-left:0; }
  .service-row:hover .sr-name{ transform:none; }
}

/* ==========================================================
   NETWORK — "the 2S Network" (added Aug 2026, homepage
   repositioning). Same visual family as About/Services: ivory
   background, section-head + short copy, no new card component.
   ========================================================== */
.network-section{ background:var(--ivory); padding:130px 0 110px; }
.network-copy{ margin:0 var(--gutter); max-width:520px; font:16px/1.6 var(--sans); color:#3c3d38; }
.network-tags{
  margin:34px var(--gutter) 0; padding-top:22px; border-top:1px solid var(--line);
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
  max-width:760px;
}
/* .network-media (a full-width Vendor Network photo) was removed from
   this section in the Aug 2026 corrective pass — "The right people.
   The right place to start." returns to its original, image-free
   design. The same photo now lives on the Vendor Network service row
   thumbnail and service page instead (see js/data.js's
   IMG.svcVendorNetwork). */
.network-why{ display:flex; gap:8vw; flex-wrap:wrap; margin:64px var(--gutter) 0; }
.network-why .nw-item{ max-width:220px; }
.network-why .nw-item b{ display:block; font:400 22px var(--serif); letter-spacing:-.01em; margin-bottom:10px; }
.network-why .nw-item span{ font:13px/1.55 var(--sans); color:var(--sage); }
.network-ctas{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin:58px var(--gutter) 0; }
.network-cta{
  font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
}
.network-cta .arrow{ display:inline-block; transition:transform .4s var(--ease-4); }
.network-cta:hover .arrow{ transform:translateX(3px); }
.network-cta.is-subtle{ color:var(--sage); }
@media (max-width:900px){
  .network-why{ gap:10vw 12vw; }
}

/* ==========================================================
   PROCESS — pinned horizontal signature section
   ========================================================== */
.process-section{
  background:var(--sage); color:var(--ivory);
  overflow:hidden;
}
.process-pin{ height:100vh; position:relative; display:flex; flex-direction:column; }
.process-head{ padding:70px var(--gutter) 0; }
.process-head .eyebrow{ color:#f4f1e9b0; }
.process-track-wrap{ flex:1; display:flex; align-items:center; overflow:hidden; }
.process-track{
  display:flex; gap:6vw; padding:0 var(--gutter); will-change:transform;
}
.process-step{
  flex:0 0 min(70vw,560px); border-top:1px solid rgba(244,241,233,.45); padding-top:20px;
}
.process-step b{
  display:block; font:11px var(--mono); letter-spacing:.08em; margin-bottom:8vh; color:var(--brass);
}
.process-step p{ font:400 clamp(24px,2.6vw,38px)/1.25 var(--serif); letter-spacing:-.01em; max-width:420px; }
.process-progress{
  height:1px; background:rgba(244,241,233,.3); margin:0 var(--gutter) 60px; position:relative;
}
.process-progress i{
  position:absolute; left:0; top:0; height:1px; width:0%; background:var(--ivory);
}

@media (max-width:900px){
  .process-pin{ height:auto; padding:80px 0; }
  .process-track-wrap{ overflow:visible; }
  .process-track{ flex-direction:column; transform:none !important; gap:56px; }
  .process-step{ flex:none; }
  .process-progress{ display:none; }
}

/* "Your vision. Our network. Your choice." + the no-client-fee
   explanation, after the 6-step track. Restrained on purpose — the
   spec calls for the fee disclosure to be transparent but NOT
   dominate the section, so it's set well below the step copy's type
   scale and kept to a single short paragraph. */
.process-summary{
  padding:70px var(--gutter) 90px; border-top:1px solid rgba(244,241,233,.18);
  text-align:center;
}
.process-summary-tagline{
  font:400 clamp(22px,2.4vw,34px)/1.3 var(--serif); letter-spacing:-.01em;
  max-width:640px; margin:0 auto;
}
.process-summary-fee{
  max-width:560px; margin:34px auto 0;
}
.psf-eyebrow{
  display:block; font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--brass);
  margin-bottom:12px;
}
.process-summary-fee p{
  font:14px/1.65 var(--sans); color:#f4f1e9b8; margin:0;
}
@media (max-width:700px){
  .process-summary{ padding:56px var(--gutter) 70px; }
}
/* No GSAP/ScrollTrigger available (blocked network, ad-blocker) —
   fall back to a simple readable vertical sequence at any width. */
.no-gsap .process-pin{ height:auto; padding:80px 0; }
.no-gsap .process-track-wrap{ overflow:visible; }
.no-gsap .process-track{ flex-direction:column; transform:none !important; gap:56px; }
.no-gsap .process-step{ flex:none; }
.no-gsap .process-progress{ display:none; }
.no-gsap .hero-sub, .no-gsap .hero-cta, .no-gsap .hero-scroll{ opacity:1; }

/* ==========================================================
   JOURNAL
   ========================================================== */
.journal-section{ background:var(--ivory); padding:130px 0 100px; }
.journal-list{ margin-top:50px; border-top:1px solid var(--line); }
.journal-item{ border-bottom:1px solid var(--line); }
.journal-row{
  display:grid; grid-template-columns:120px 1fr 220px; gap:32px; align-items:center;
  padding:30px var(--gutter);
}
.journal-row .jr-num{ font:11px var(--mono); color:var(--brass); }
.journal-row .jr-title{
  font:400 clamp(20px,2.4vw,32px)/1.2 var(--serif); letter-spacing:-.02em;
  transition:transform .45s var(--ease-4), color .4s var(--ease-3);
}
.journal-row:hover .jr-title{ transform:translateX(10px); color:var(--sage); }
.journal-row .jr-meta{
  text-align:right; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
}
.jr-shop-toggle{
  margin:0 var(--gutter) 26px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
  display:inline-flex; align-items:center; gap:8px;
}
.jr-shop-toggle:hover, .jr-shop-toggle.is-open{ color:var(--brass); }
.jr-shop-toggle .arrow{ display:inline-block; transition:transform .35s var(--ease-4); }
.jr-shop-toggle.is-open .arrow{ transform:rotate(90deg); }
.jr-shop-strip{
  display:none; flex-wrap:wrap; gap:12px; margin:0 var(--gutter) 26px;
}
.jr-shop-strip.is-open{ display:flex; }
.jr-shop-chip{
  border:1px solid var(--line); padding:12px 16px; display:flex; flex-direction:column; gap:4px; text-align:left;
  transition:border-color .3s var(--ease-3);
}
.jr-shop-chip:hover{ border-color:var(--ink); }
.jsc-name{ font:400 14px var(--serif); }
.jsc-price{ font:10px var(--mono); color:var(--sage); }
@media (max-width:900px){
  .journal-row{ grid-template-columns:1fr; gap:8px; padding:24px var(--gutter); }
  .journal-row .jr-meta{ text-align:left; }
  .journal-row:hover .jr-title{ transform:none; }
}

/* ==========================================================
   CONTACT
   ========================================================== */
.contact-section{
  position:relative; min-height:100vh; color:var(--ivory); overflow:hidden;
  display:flex; align-items:flex-end;
}
.contact-media{ position:absolute; inset:-6%; }
.contact-media img{ width:100%; height:100%; object-fit:cover; }
.contact-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,8,6,.72) 0%, rgba(8,8,6,.42) 55%, rgba(8,8,6,.2) 100%);
}
.contact-inner{
  position:relative; z-index:2; width:100%;
  padding:120px var(--gutter) 70px;
  display:grid; grid-template-columns:1fr 1fr; gap:6vw;
}
.contact-copy .h-section{ max-width:520px; }
.contact-copy .eyebrow{ color:var(--brass); display:block; margin-bottom:24px; }
.contact-info{ margin-top:56px; display:flex; flex-direction:column; gap:8px; font:12px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:#f4f1e9c9; }
.contact-info a:hover{ color:var(--ivory); }
.contact-social{ margin-top:26px; display:flex; gap:20px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; }

.contact-form{ align-self:end; max-width:480px; }
.contact-lede{ margin:18px 0 0; max-width:440px; font:15px/1.6 var(--sans); color:#f4f1e9c9; }
.field{
  border-bottom:1px solid rgba(244,241,233,.35);
  padding:16px 0; margin-bottom:6px;
  display:flex; align-items:center; gap:12px;
  transition:border-color .4s var(--ease-3);
}
.field:focus-within{ border-color:var(--ivory); }
.field label{ position:absolute; opacity:0; pointer-events:none; }
.field input, .field textarea, .field select{
  width:100%; font:15px/1.4 var(--sans); color:var(--ivory); resize:none;
  background:transparent; border:none; outline:none; appearance:none; -webkit-appearance:none;
}
.field input::placeholder, .field textarea::placeholder{ color:#f4f1e9a0; }
.field select{ cursor:pointer; }
.field select:invalid, .field select option[value=""]{ color:#8a8a80; }
.field select option{ color:#111; }
.field .fnum{ font:10px var(--mono); color:var(--brass); flex:none; }

/* ---------------- property location autocomplete (Google Places) ----
   Reuses the same /api/places/autocomplete + /api/places/details proxy
   as the Client Portal Profile's address field — this is just a dark-
   theme skin matching the contact form's own palette, not a second
   integration. ---------------- */
.field-location{ position:relative; }
.cf-location-suggestions{
  position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:20;
  background:#141410; border:1px solid rgba(244,241,233,.35);
  max-height:240px; overflow-y:auto;
}
.cf-location-suggestion{
  display:block; width:100%; text-align:left; padding:12px 14px; border:none; background:none; cursor:pointer;
  font:13px var(--sans); color:var(--ivory); border-bottom:1px solid rgba(244,241,233,.18);
}
.cf-location-suggestion:last-child{ border-bottom:none; }
.cf-location-suggestion:hover, .cf-location-suggestion.is-active{ background:rgba(244,241,233,.08); }
.cf-location-suggestion .cfls-secondary{ display:block; font-size:11px; color:#f4f1e9a0; margin-top:2px; }
.cf-location-detail{
  margin:-2px 0 6px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--brass);
  opacity:0; height:0; overflow:hidden; transition:opacity .3s var(--ease-3);
}
.cf-location-detail.is-visible{ opacity:1; height:auto; }

/* Final refinement (Aug 2026): "What do you need?" — a compact set of
   togglable pills rather than a native multi-select, so 18 options
   stay light and scannable instead of reading as a big checkbox form.
   Same mono/uppercase idiom as .network-tags, just interactive. */
.field-multi{ align-items:flex-start; flex-direction:column; gap:14px; }
.field-multi .field-multi-label{ font:15px/1.4 var(--sans); color:var(--ivory); }
.pill-group{ display:flex; flex-wrap:wrap; gap:8px; }
.pill-opt{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:#f4f1e9c9;
  padding:8px 14px; border:1px solid rgba(244,241,233,.35); background:transparent;
  transition:border-color .3s var(--ease-3), color .3s var(--ease-3), background-color .3s var(--ease-3);
}
.pill-opt:hover{ border-color:var(--ivory); color:var(--ivory); }
.pill-opt.is-selected{ background:var(--ivory); border-color:var(--ivory); color:var(--ink); }

/* Final refinement (Aug 2026): the name/email/phone step reads as one
   grouped "06" rather than three separately-numbered fields, matching
   the spec's 6-step framing without inventing a new field component. */
.field-group{ align-items:flex-start; border-bottom:none; padding-bottom:0; }
.field-group-inputs{ flex:1; display:flex; flex-direction:column; gap:14px; }
.field-group-inputs .subfield{ border-bottom:1px solid rgba(244,241,233,.35); padding-bottom:10px; transition:border-color .4s var(--ease-3); }
.field-group-inputs .subfield:focus-within{ border-color:var(--ivory); }
.field-group-inputs .subfield label{ position:absolute; opacity:0; pointer-events:none; }
.field-group-inputs .subfield input{
  width:100%; font:15px/1.4 var(--sans); color:var(--ivory); background:transparent; border:none; outline:none;
}
.field-group-inputs .subfield input::placeholder{ color:#f4f1e9a0; }

.form-submit{
  margin-top:30px; display:inline-flex; align-items:center; gap:14px;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em;
  padding:16px 0; position:relative; background:none; border:none; cursor:pointer; color:var(--ivory);
}
.form-submit .btn-line{ position:relative; width:64px; height:1px; background:rgba(244,241,233,.5); overflow:hidden; }
.form-submit .btn-line i{ position:absolute; inset:0; background:var(--ivory); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-4); }
.form-submit:hover .btn-line i{ transform:scaleX(1); }
.form-note{ margin-top:18px; font:11px var(--mono); color:var(--brass); opacity:0; height:0; overflow:hidden; transition:opacity .4s var(--ease-3); }
.form-note.is-visible{ opacity:1; height:auto; }

/* Final refinement (Aug 2026): premium confirmation state (spec
   section 2) shown in place of the form after submit — same
   brass/ivory palette as the rest of the section, no new component
   family. Hidden by default; .is-visible toggled by js/sections.js. */
.form-confirm{ display:none; }
.form-confirm.is-visible{ display:block; }
.form-confirm .fc-eyebrow{
  display:block; font:20px var(--serif); color:var(--ivory); margin-bottom:14px; letter-spacing:.01em;
}
.form-confirm .fc-copy{ font:15px/1.6 var(--sans); color:#f4f1e9c9; max-width:420px; }
.form-confirm .fc-id{
  margin-top:24px; padding-top:18px; border-top:1px solid rgba(244,241,233,.35);
  display:flex; align-items:baseline; gap:12px;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:#f4f1e9c9;
}
.form-confirm .fc-id b{ font:400 22px var(--serif); letter-spacing:.02em; color:var(--brass); text-transform:none; }
.form-confirm .fc-note{ margin-top:16px; font:12px/1.6 var(--sans); color:#f4f1e9a0; max-width:420px; }

@media (max-width:900px){
  .contact-inner{ grid-template-columns:1fr; gap:60px; padding-top:150px; }
  .pill-group{ gap:6px; }
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{
  background:var(--ink); color:#f4f1e9a8;
  padding:26px var(--gutter);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em;
}
.site-footer a:hover{ color:var(--ivory); }

/* ==========================================================
   REVEAL UTILITIES (generic, JS-driven via GSAP)
   ========================================================== */
/* Base state is fully visible — GSAP applies the hidden "from" state
   itself (see js/lib.js) so the page degrades gracefully if the
   animation libraries fail to load. */
.reveal-mask{ overflow:hidden; }
.reveal-img{ overflow:hidden; }

/* Graceful fallback if a photograph can't load (e.g. offline preview) */
.img-fallback{
  background:linear-gradient(155deg, var(--clay) 0%, var(--line) 45%, var(--brass) 150%);
  position:relative;
}
.img-fallback::after{
  content:'2S';
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:400 13px var(--mono); letter-spacing:.2em; color:var(--ink); opacity:.35;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
}

/* ==========================================================
   PROJECT DETAIL — magazine layout
   ========================================================== */
.pd-hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden; color:var(--ivory);
}
.pd-hero-media{ position:absolute; inset:-8% -4%; will-change:transform; }
.pd-hero-media img{ width:100%; height:100%; object-fit:cover; }
.pd-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,6,.15), rgba(8,8,6,.65)); }
.pd-hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) 8vh;
}
.pd-hero-content .eyebrow{ color:var(--brass); margin-bottom:20px; }
.pd-hero-content h1{ font:400 clamp(56px,9vw,150px)/.86 var(--serif); letter-spacing:-.05em; }

.pd-back{
  position:fixed; top:calc(var(--nav-h) + 14px); left:var(--gutter); z-index:120;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ivory);
  display:flex; align-items:center; gap:8px; mix-blend-mode:difference;
  opacity:1; transition:opacity .4s var(--ease-3);
}
/* Past the hero, a fixed "all projects" link would sit on top of
   every section's eyebrow label (SCOPE OF WORK, MATERIALS, etc.)
   at the same screen position — hide it once the reader scrolls
   that far (see wireBackLinkFade in js/project-detail.js). */
.pd-back.is-hidden{ opacity:0; pointer-events:none; }

.pd-intro{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:6vw;
  padding:130px var(--gutter) 100px; background:var(--ivory);
}
.pd-intro-text p{ font:19px/1.7 var(--sans); max-width:440px; color:#33342f; }
.pd-facts{
  border-top:1px solid var(--line); margin-top:44px; padding-top:20px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  font:10px/1.7 var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage);
}
.pd-intro-figure{ position:relative; overflow:hidden; aspect-ratio:3/4; align-self:start; }
.pd-intro-figure img{ width:100%; height:112%; object-fit:cover; }

.pd-full-image{ position:relative; overflow:hidden; height:88vh; }
.pd-full-image img{ width:100%; height:118%; object-fit:cover; will-change:transform; }

.pd-statline{
  background:var(--clay); padding:110px var(--gutter);
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.pd-stat b{ display:block; font:400 clamp(40px,4.6vw,72px)/1 var(--serif); }
.pd-stat span{ display:block; margin-top:12px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }

.pd-detail-block{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--ivory);
}
.pd-detail-block .pd-db-figure{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.pd-detail-block .pd-db-figure img{ width:100%; height:112%; object-fit:cover; }
.pd-detail-block .pd-db-copy{
  padding:8vw 6vw; align-self:center;
}
.pd-detail-block .pd-db-copy .eyebrow{ color:var(--sage); margin-bottom:22px; }
.pd-detail-block .pd-db-copy h3{ font:400 clamp(30px,3.4vw,50px)/1.1 var(--serif); letter-spacing:-.03em; max-width:420px; }
.pd-detail-block.is-reverse{ direction:rtl; }
.pd-detail-block.is-reverse > *{ direction:ltr; }

.pd-quote{
  padding:140px var(--gutter); text-align:center; background:var(--sage); color:var(--ivory);
}
.pd-quote blockquote{
  font:400 clamp(30px,4vw,58px)/1.25 var(--serif); letter-spacing:-.02em; max-width:900px; margin:0 auto;
}
.pd-quote cite{ display:block; margin-top:28px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; font-style:normal; color:var(--brass); }

.pd-closing-image{ position:relative; overflow:hidden; height:70vh; }
.pd-closing-image img{ width:100%; height:118%; object-fit:cover; }

.pd-shop{ padding:120px var(--gutter) 40px; background:var(--ivory); }
.pd-shop .studio-actions{ margin-top:50px; max-width:760px; }
.mp-view-btn{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); white-space:nowrap; }
.mp-view-btn:hover{ color:var(--ink); }

.pd-next{
  padding:80px var(--gutter) 90px; background:var(--ivory);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.pd-next .eyebrow{ color:var(--sage); margin-bottom:14px; display:block; }
.pd-next a{ font:400 clamp(32px,4.4vw,64px)/1 var(--serif); letter-spacing:-.03em; }
.pd-next a:hover{ color:var(--sage); }

/* ---------- project story (challenge / vision / transformation) ---------- */
.pd-story{
  padding:120px var(--gutter); background:var(--clay);
  display:grid; grid-template-columns:repeat(3,1fr); gap:6vw;
}
.pd-story-item .eyebrow{ color:var(--brass); margin-bottom:18px; display:block; }
.pd-story-item p{ font:400 22px/1.5 var(--serif); letter-spacing:-.01em; max-width:380px; }

/* ---------- before/after scenes (room-by-room transformation) ---------- */
.pd-scenes{ padding:120px var(--gutter) 100px; background:var(--ink); color:var(--ivory); }
.pd-scenes-head{ max-width:640px; margin-bottom:70px; }
.pd-scenes-head .eyebrow{ color:var(--brass); margin-bottom:18px; display:block; }
.pd-scenes-head h2{ font:400 clamp(34px,4.2vw,58px)/1.1 var(--serif); letter-spacing:-.03em; }
.pd-ba-scene{ margin-top:70px; }
.pd-ba-scene:first-child{ margin-top:0; }
.pd-ba-scene .pd-ba-label{
  display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage);
  margin-bottom:16px;
}
.pd-ba-scene .before-after{ margin-top:0; background:var(--clay); }

/* ---------- scope of work / materials ---------- */
.pd-scope{ padding:100px var(--gutter); background:var(--ivory); display:grid; grid-template-columns:1fr 1fr; gap:6vw; }
.pd-scope-block .eyebrow{ color:var(--sage); margin-bottom:24px; display:block; }
.pd-scope-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pd-scope-item{
  border:1px solid var(--line); padding:10px 16px;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink);
}
.pd-scope-block.is-materials .pd-scope-item{ border-color:var(--brass); color:#5a4a2d; }

/* ---------- project budget (reuses .budget-hero/.budget-list from
   css/studio.css, the same components the Project Studio wizard's
   budget step uses — one budget component, not a duplicate) ---------- */
.pd-budget{ padding:100px var(--gutter) 110px; background:var(--ivory); }
.pd-budget .eyebrow{ color:var(--sage); margin-bottom:0; display:block; }
.pd-budget .budget-hero{ margin-top:24px; }

/* ---------- vendors used in this project ---------- */
.pd-vendors{ padding:100px var(--gutter) 110px; background:var(--clay); }
.pd-vendors .eyebrow{ color:var(--sage); margin-bottom:30px; display:block; }
.pd-vendors-list{ border-top:1px solid var(--line); }
.pd-vendor-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.pd-vendor-row .pv-name{ font:400 22px var(--serif); letter-spacing:-.02em; }
.pd-vendor-row .pv-meta{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.pd-vendor-row .pv-link{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); white-space:nowrap; }
.pd-vendor-row .pv-link:hover{ color:var(--ink); }

/* ---------- project gallery ---------- */
.pd-gallery{ padding:100px var(--gutter) 120px; background:var(--ivory); }
.pd-gallery .eyebrow{ color:var(--sage); margin-bottom:30px; display:block; }
.pd-gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pd-gallery-item{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.pd-gallery-item img{ width:100%; height:100%; object-fit:cover; }
.pd-gallery-item .pg-cat{
  position:absolute; left:14px; bottom:14px; font:10px var(--mono); text-transform:uppercase;
  letter-spacing:.08em; color:var(--ivory); background:rgba(27,28,25,.6); padding:7px 12px;
}
.pd-gallery-item:nth-child(3n+1){ grid-column:span 2; aspect-ratio:16/9; }

@media (max-width:900px){
  .pd-intro, .pd-detail-block{ grid-template-columns:1fr; gap:40px; }
  .pd-detail-block{ gap:26px; }
  .pd-detail-block.is-reverse{ direction:ltr; }
  .pd-detail-block .pd-db-copy{ padding:0 var(--gutter); }
  .pd-full-image{ height:56vh; }
  .pd-statline{ grid-template-columns:1fr 1fr; padding:70px var(--gutter); row-gap:40px; }
  .pd-closing-image{ height:50vh; }
  .pd-story{ grid-template-columns:1fr; gap:50px; padding:80px var(--gutter); }
  .pd-scenes{ padding:80px var(--gutter) 70px; }
  .pd-scope{ grid-template-columns:1fr; gap:50px; padding:70px var(--gutter); }
  .pd-gallery-grid{ grid-template-columns:1fr; }
  .pd-gallery-item:nth-child(3n+1){ grid-column:span 1; aspect-ratio:4/5; }
}

/* ==========================================================
   VENDOR NETWORK — directory (vendors.html) + vendor detail
   (vendors/<id>/index.html). Same editorial language as the
   project pages: ivory/clay/ink, mono uppercase labels, square
   bordered chips — no cards-with-shadows SaaS look.
   ========================================================== */
.vendors-hero{ padding:180px var(--gutter) 60px; background:var(--ivory); }
.vendors-hero .eyebrow{ color:var(--sage); display:block; margin-bottom:22px; }
.vendors-hero h1{ font:400 clamp(48px,7vw,104px)/.94 var(--serif); letter-spacing:-.04em; max-width:15ch; }
.vendors-hero p{ margin-top:28px; max-width:48ch; font:16px/1.7 var(--sans); color:var(--ink); opacity:.78; }

.vendor-filter{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  padding:26px var(--gutter) 40px; background:var(--ivory); border-top:1px solid var(--line);
}
.vendor-filter button{
  border:1px solid var(--line); background:none; padding:9px 15px; cursor:pointer;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink);
  transition:border-color .3s var(--ease-3), color .3s var(--ease-3), background-color .3s var(--ease-3);
}
.vendor-filter button:hover{ border-color:var(--brass); }
.vendor-filter button.is-active{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }
/* Service Area filter (Bug 5, 2S Development Vendor Network/Vendor Card
   bug-fix set) — same bordered/mono/uppercase language as the category
   buttons above so it reads as native to this row, not a bolted-on
   control from elsewhere. */
.vendor-area-select{
  margin-left:auto; border:1px solid var(--line); background:var(--ivory); padding:9px 15px; cursor:pointer;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink);
  transition:border-color .3s var(--ease-3);
}
.vendor-area-select:hover{ border-color:var(--brass); }

.vendor-count{ padding:0 var(--gutter) 24px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); background:var(--ivory); }

.vendor-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.vendor-card{
  background:var(--ivory); padding:44px 34px; display:flex; flex-direction:column; gap:16px; min-height:290px;
  text-decoration:none; color:inherit;
}
.vendor-card .vc-mark{ font:400 27px var(--serif); letter-spacing:-.02em; color:var(--ink); }
.vendor-card .vc-meta{ display:flex; flex-direction:column; gap:4px; }
.vendor-card .vc-cat{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--brass); }
.vendor-card .vc-loc{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.vendor-card .vc-desc{ font:14px/1.6 var(--sans); color:var(--ink); opacity:.72; flex:1; }
.vendor-card .vc-cta{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
.vendor-card:hover .vc-cta{ color:var(--brass); }

.vendors-empty{ grid-column:1/-1; padding:90px var(--gutter) 140px; text-align:center; font:16px var(--sans); color:var(--sage); background:var(--ivory); }

/* ---------- vendor detail page ---------- */
.vd-hero{ padding:180px var(--gutter) 70px; background:var(--ivory); border-bottom:1px solid var(--line); }
.vd-hero .eyebrow{ color:var(--sage); display:block; margin-bottom:22px; }
.vd-hero h1{ font:400 clamp(44px,7vw,96px)/.96 var(--serif); letter-spacing:-.04em; }
.vd-hero .vd-facts{ display:flex; flex-wrap:wrap; gap:8vw; margin-top:44px; }
.vd-hero .vd-fact span{ display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:8px; }
.vd-hero .vd-fact b{ font:400 20px var(--serif); letter-spacing:-.01em; }

.vd-about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:6vw; padding:100px var(--gutter); background:var(--clay); }
.vd-about .eyebrow{ color:var(--sage); margin-bottom:24px; display:block; }
.vd-about p{ font:22px/1.6 var(--serif); letter-spacing:-.01em; }

.vd-provide{ padding:100px var(--gutter); background:var(--ivory); }
.vd-provide .eyebrow{ color:var(--sage); margin-bottom:30px; display:block; }
.vd-provide-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px 6vw; }
.vd-provide-list div{ padding:22px 0; border-top:1px solid var(--line); font:16px/1.5 var(--sans); }

.vd-products{ padding:100px var(--gutter); background:var(--ivory); }
.vd-products .eyebrow{ color:var(--sage); margin-bottom:30px; display:block; }
.vd-products-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; }
.vd-product{ display:flex; flex-direction:column; gap:10px; }
.vd-product .vp-figure{ aspect-ratio:4/5; overflow:hidden; background:var(--stone); }
.vd-product .vp-figure img{ width:100%; height:100%; object-fit:cover; }
.vd-product .vp-name{ font:400 18px var(--serif); letter-spacing:-.01em; }
.vd-product .vp-price{ font:11px var(--mono); letter-spacing:.04em; color:var(--sage); }

.vd-projects{ padding:100px var(--gutter) 120px; background:var(--clay); }
.vd-projects .eyebrow{ color:var(--sage); margin-bottom:30px; display:block; }
.vd-projects-list{ border-top:1px solid var(--line); }
.vd-project-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
}
.vd-project-row .vpr-name{ font:400 22px var(--serif); letter-spacing:-.02em; }
.vd-project-row .vpr-meta{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.vd-project-row .vpr-link{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); white-space:nowrap; }
.vd-project-row:hover .vpr-link{ color:var(--ink); }

.vd-contact{ padding:110px var(--gutter) 130px; background:var(--ink); color:var(--ivory); text-align:center; }
.vd-contact .eyebrow{ color:var(--brass); display:block; margin-bottom:22px; }
.vd-contact h2{ font:400 clamp(34px,5vw,60px)/1.1 var(--serif); letter-spacing:-.02em; max-width:20ch; margin:0 auto; }
.vd-contact-links{ margin-top:40px; display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
.vd-contact-links a{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ivory); border-bottom:1px solid #f4f1e94d; padding-bottom:4px; }
.vd-contact-links a:hover{ border-color:var(--brass); color:var(--brass); }

@media (max-width:900px){
  .vendors-hero{ padding:140px var(--gutter) 40px; }
  .vendor-filter{ padding:20px var(--gutter) 30px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .vendor-filter button{ flex:0 0 auto; white-space:nowrap; }
  .vendor-grid{ grid-template-columns:1fr; }
  .vd-hero{ padding:140px var(--gutter) 50px; }
  .vd-hero .vd-facts{ gap:10vw 12vw; }
  .vd-about{ grid-template-columns:1fr; gap:40px; padding:70px var(--gutter); }
  .vd-provide{ padding:70px var(--gutter); }
  .vd-provide-list{ grid-template-columns:1fr; }
  .vd-products{ padding:70px var(--gutter); }
  .vd-products-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .vd-projects{ padding:70px var(--gutter) 90px; }
  .vd-contact{ padding:80px var(--gutter) 100px; }
  .vd-contact-links{ gap:24px; }
}

/* Tablet band only — the max-width:900px block below already
   forces both grids to a single column on mobile, but it's
   declared earlier in the file, so without this range qualifier
   this rule (declared later) would win the cascade at mobile
   widths too and silently override that 1-column rule. */
@media (min-width:901px) and (max-width:1180px){
  .vendor-grid{ grid-template-columns:1fr 1fr; }
  .vd-products-grid{ grid-template-columns:1fr 1fr; }
}


/* =========================================================
   OWNER'S REPRESENTATION & PROJECT OVERSIGHT — the 10th service
   (/services/owners-representation/). Namespaced `.or-` exactly as
   `.pd-` and `.vd-` namespace the project and vendor detail pages.

   Everything here is built from the existing tokens (--ivory/--ink/
   --sage/--brass/--line/--clay, --serif/--sans/--mono, --gutter,
   --ease-4) and the existing section rhythm, so this page reads as
   the same site rather than a second design language. It reuses
   .pd-hero-media/.pd-hero-scrim/.pd-hero-content for the hero and
   .eyebrow/.reveal-up throughout; only the package cards, decision
   grid and pricing blocks are new, because nothing equivalent
   existed. Breakpoints match the file's existing 900px / 700px
   bands. ========================================================= */

/* ---------- hero ---------- */
/* color:var(--ivory) is set here for the same reason .pd-hero sets
   it: the hero's children (h1 above all) inherit it, and without it
   the serif headline renders in the page's default ink on a dark
   photographic hero. */
.or-hero{ position:relative; min-height:82vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); color:var(--ivory); }
.or-hero .pd-hero-content h1{ font:400 clamp(48px,7.4vw,116px)/.92 var(--serif); letter-spacing:-.045em; }
.or-hero-sub{ margin-top:26px; max-width:520px; font:400 18px/1.6 var(--sans); color:#f4f1e9d9; }
.or-hero-ctas{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }

/* Button: the site has no shared button primitive outside the portal
   (.pe-btn lives in css/project.css and is scoped to the wizard), so
   this mirrors that same mono/uppercase/1px-border language rather
   than inventing a rounded SaaS button. */
.or-btn{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.12em;
  padding:16px 30px; border:1px solid #f4f1e966; color:var(--ivory);
  transition:background .4s var(--ease-4), color .4s var(--ease-4), border-color .4s var(--ease-4);
}
.or-btn:hover{ background:var(--ivory); border-color:var(--ivory); color:var(--ink); }
.or-btn.is-primary{ background:var(--ivory); border-color:var(--ivory); color:var(--ink); }
.or-btn.is-primary:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }

/* Section head + heading scale shared by every .or- section. */
.or-h2{ font:400 clamp(30px,4vw,58px)/1.08 var(--serif); letter-spacing:-.035em; max-width:16ch; }
.or-section-head{ max-width:760px; margin-bottom:60px; }
.or-section-head .eyebrow{ color:var(--sage); display:block; margin-bottom:20px; }

/* ---------- value proposition + process flow ---------- */
.or-value{ padding:120px var(--gutter) 100px; background:var(--ivory); display:grid; grid-template-columns:1fr 1fr; gap:6vw 8vw; align-items:start; }
.or-value-head .eyebrow{ color:var(--sage); display:block; margin-bottom:20px; }
.or-value-copy p{ font:17px/1.75 var(--sans); color:#33342f; max-width:46ch; }
.or-value-copy p + p{ margin-top:20px; }
.or-flow{ grid-column:1 / -1; margin-top:26px; padding-top:34px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 0; list-style:none; }
.or-flow-step{ flex:1 1 0; min-width:120px; display:flex; flex-direction:column; gap:10px; position:relative; padding-right:18px; }
.or-flow-step:not(:last-child)::after{
  content:'→'; position:absolute; right:2px; top:26px;
  font:12px var(--mono); color:var(--brass);
}
.or-flow-n{ font:10px var(--mono); letter-spacing:.1em; color:var(--brass); }
.or-flow-name{ font:400 20px var(--serif); letter-spacing:-.01em; color:var(--ink); }

/* ---------- the four packages ---------- */
.or-packages{ padding:110px var(--gutter); background:var(--clay); scroll-margin-top:var(--nav-h); }
/* stretch (not start) so all four cards share a row height and the
   pushed-to-base toggles align, however uneven the copy is. */
.or-package-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }
.or-package{
  background:var(--ivory); border:1px solid var(--line); padding:30px 26px 26px;
  display:flex; flex-direction:column; scroll-margin-top:calc(var(--nav-h) + 20px);
  transition:border-color .4s var(--ease-4);
}
.or-package:hover, .or-package.is-open{ border-color:var(--ink); }
.or-package-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:20px; }
.or-package-index{ font:10px var(--mono); letter-spacing:.1em; color:var(--sage); }
/* "Most comprehensive" — a quiet brass hairline, never a loud badge. */
.or-package-label{
  font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em;
  color:#5a4a2d; border:1px solid var(--brass); padding:4px 9px; white-space:nowrap;
}
.or-package-name{ margin-top:20px; font:400 27px/1.15 var(--serif); letter-spacing:-.02em; }
.or-package-price{ margin-top:14px; font:400 17px/1.35 var(--sans); color:var(--ink); }
.or-package-pricenote{ display:block; margin-top:7px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }
.or-package-line{ margin-top:18px; font:14px/1.6 var(--sans); color:#4a4b45; }
.or-package-sublabel{ display:block; margin-top:26px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }
.or-package-includes{ margin-top:14px; list-style:none; display:flex; flex-direction:column; gap:7px; }
.or-package-includes li{ position:relative; padding-left:15px; font:13px/1.5 var(--sans); color:#33342f; }
.or-package-includes li::before{ content:''; position:absolute; left:0; top:8px; width:5px; height:1px; background:var(--brass); }
.or-package-value{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font:400 16px/1.45 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.or-package-bestfor p{ margin-top:12px; font:12.5px/1.6 var(--sans); color:var(--sage); }
/* The toggle sits last and is pushed to the card's base so all four
   buttons line up regardless of copy length. */
.or-package-toggle{
  margin-top:auto; padding:26px 0 2px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; border-top:1px solid var(--line); width:100%; cursor:pointer; text-align:left;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--ink);
}
/* The "Best for" block absorbs the slack instead of the toggle, so
   cards of different copy length still end on an aligned action row. */
.or-package-bestfor{ margin-bottom:8px; }
.or-package-toggle:hover{ color:var(--sage); }
.or-toggle-icon{ font:14px var(--mono); color:var(--brass); transition:transform .4s var(--ease-4); }
.or-package-toggle[aria-expanded="true"] .or-toggle-icon{ transform:rotate(45deg); }
.or-package-detail{ padding-top:22px; }
.or-package-detail[hidden]{ display:none; }
.or-package-scope{ margin-top:14px; list-style:none; display:flex; flex-direction:column; gap:11px; }
.or-package-scope li{ position:relative; padding-left:15px; font:13px/1.6 var(--sans); color:#33342f; }
.or-package-scope li::before{ content:''; position:absolute; left:0; top:9px; width:5px; height:1px; background:var(--sage); }
.or-package-examples{ margin-top:14px; font:13px/1.65 var(--sans); color:var(--sage); }
.or-package-start{
  margin-top:26px; display:inline-block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:6px;
}
.or-package-start:hover{ color:var(--sage); border-color:var(--sage); }
.or-package-start .arrow{ display:inline-block; transition:transform .4s var(--ease-4); }
.or-package-start:hover .arrow{ transform:translateX(3px); }

/* ---------- which service is right for me ---------- */
.or-decision{ padding:110px var(--gutter); background:var(--ivory); }
.or-decision-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }
.or-decision-card{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:34px 4px; border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease-4), color .4s var(--ease-4);
}
.or-decision-card:nth-child(odd){ padding-right:5vw; }
.or-decision-card:nth-child(even){ padding-left:5vw; border-left:1px solid var(--line); }
.or-decision-card:hover{ padding-left:14px; }
.or-decision-card:nth-child(even):hover{ padding-left:calc(5vw + 14px); }
.or-decision-q{ font:400 clamp(19px,2vw,25px)/1.3 var(--serif); letter-spacing:-.015em; color:var(--ink); max-width:22ch; }
.or-decision-a{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); white-space:nowrap; }
.or-decision-card:hover .or-decision-a{ color:var(--brass); }
.or-decision-a .arrow{ display:inline-block; transition:transform .4s var(--ease-4); }
.or-decision-card:hover .or-decision-a .arrow{ transform:translateX(3px); }

/* ---------- what 2S actually does ---------- */
.or-capabilities{ padding:110px var(--gutter); background:var(--clay); }
.or-cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.or-cap{ background:var(--clay); padding:32px 26px 34px; }
.or-cap-name{ display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--brass); }
.or-cap p{ margin-top:14px; font:14px/1.6 var(--sans); color:#33342f; }

/* ---------- project types ---------- */
.or-types{ padding:110px var(--gutter); background:var(--ivory); }
.or-types-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.or-type{ border:1px solid var(--line); padding:30px 26px 34px; transition:border-color .4s var(--ease-4); }
.or-type:hover{ border-color:var(--ink); }
.or-type-name{ display:block; font:400 22px var(--serif); letter-spacing:-.02em; color:var(--ink); }
.or-type p{ margin-top:12px; font:13.5px/1.6 var(--sans); color:var(--sage); }

/* ---------- how it works ---------- */
.or-how{ padding:120px var(--gutter); background:var(--ink); color:var(--ivory); }
.or-how .or-section-head .eyebrow{ color:#f4f1e9a6; }
.or-how .or-h2{ color:var(--ivory); }
.or-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px 30px; list-style:none; }
.or-step-n{ display:block; font:10px var(--mono); letter-spacing:.12em; color:var(--brass); }
.or-step-title{ margin-top:18px; font:400 24px/1.2 var(--serif); letter-spacing:-.02em; color:var(--ivory); }
.or-step p{ margin-top:12px; font:13.5px/1.65 var(--sans); color:#f4f1e9a6; }
.or-how-closing{ margin-top:70px; padding-top:36px; border-top:1px solid #f4f1e926; font:400 clamp(20px,2.4vw,30px)/1.35 var(--serif); letter-spacing:-.02em; color:var(--ivory); max-width:30ch; }

/* ---------- pricing ---------- */
.or-pricing{ padding:110px var(--gutter); background:var(--ivory); }
.or-pricing-copy{ margin-top:24px; font:16px/1.7 var(--sans); color:#33342f; max-width:56ch; }
.or-pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.or-pricing-model{ border-top:1px solid var(--ink); padding:26px 0 0; }
.or-pricing-name{ display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--ink); }
.or-pricing-model p{ margin-top:14px; font:14px/1.65 var(--sans); color:var(--sage); max-width:34ch; }
.or-pricing-note{ margin-top:48px; font:400 clamp(18px,2vw,24px)/1.4 var(--serif); letter-spacing:-.02em; color:var(--ink); max-width:34ch; }

/* ---------- scope clarification (deliberately understated) ---------- */
.or-scopenote{ padding:70px var(--gutter); background:var(--clay); border-top:1px solid var(--line); }
.or-scopenote-title{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--sage); }
.or-scopenote p{ margin-top:16px; font:13px/1.75 var(--sans); color:#4a4b45; max-width:74ch; }

/* ---------- final CTA ---------- */
.or-final{ padding:130px var(--gutter); background:var(--ink); color:var(--ivory); }
.or-final-h{ font:400 clamp(32px,4.6vw,66px)/1.05 var(--serif); letter-spacing:-.04em; max-width:18ch; }
.or-final-copy{ margin-top:26px; font:17px/1.7 var(--sans); color:#f4f1e9c9; max-width:50ch; }
.or-final .or-hero-ctas{ margin-top:44px; }

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .or-package-grid{ grid-template-columns:repeat(2,1fr); }
  .or-cap-grid{ grid-template-columns:repeat(2,1fr); }
  .or-steps{ grid-template-columns:repeat(2,1fr); }
  .or-types-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .or-hero{ min-height:74vh; }
  .or-value{ grid-template-columns:1fr; gap:34px; padding:80px var(--gutter) 70px; }
  .or-section-head{ margin-bottom:40px; }
  .or-flow{ margin-top:8px; padding-top:28px; gap:18px 0; }
  /* Two-per-row keeps the six-step flow readable instead of six
     cramped columns; the connector arrow is dropped since the
     reading order is now vertical-ish rather than a single line. */
  .or-flow-step{ flex:0 0 50%; min-width:0; padding-right:12px; }
  .or-flow-step:not(:last-child)::after{ content:none; }
  .or-packages, .or-decision, .or-capabilities, .or-types, .or-pricing{ padding:80px var(--gutter); }
  .or-how{ padding:80px var(--gutter); }
  .or-final{ padding:90px var(--gutter); }
  /* Packages stack vertically; price stays directly under the name so
     it is still visible without expanding anything. */
  .or-package-grid{ grid-template-columns:1fr; gap:16px; }
  .or-cap-grid{ grid-template-columns:1fr; }
  .or-types-grid{ grid-template-columns:1fr; }
  .or-steps{ grid-template-columns:1fr; gap:34px; }
  .or-pricing-grid{ grid-template-columns:1fr; gap:28px; }
  .or-decision-grid{ grid-template-columns:1fr; }
  .or-decision-card{ padding:26px 0; }
  .or-decision-card:nth-child(odd){ padding-right:0; }
  .or-decision-card:nth-child(even){ padding-left:0; border-left:0; }
  .or-decision-card:nth-child(even):hover{ padding-left:14px; }
  .or-how-closing{ margin-top:46px; }
  .or-scopenote{ padding:56px var(--gutter); }
}

@media (max-width:700px){
  .or-hero-ctas{ gap:10px; }
  .or-btn{ padding:15px 24px; }
  .or-package{ padding:26px 22px 22px; }
  .or-package-name{ font-size:24px; }
}