/* v2-studio.css - pages rebuilt from the lerws-ai-studio prototype (Ed,
   2026-09-22: "replace them with the local projects page and contact page").
   Loaded after v2-pages.css and v2-mega.css, and only by the pages that use it:
   /work/, /contact/, /start-project/ and /about/. The rules are the prototype's own, lifted from the
   running prototype and kept under its class names so the two stay easy to
   compare. Deliberate differences:
   - --page-gutter is the live --gutter, so the content lines up with the live
     nav and footer that frame these pages;
   - icons come from the site sprite (public-site/AGENTS.md icon policy) and the
     stars are the site's rating-star.svg as a mask, not inline SVG;
   - the prototype's .contact-card is .contact-way here and its .info-card is
     .page-card, because v2-pages.css still styles older components with
     those two names. */

:root{--ler-orange:#dd3d06; --radius-card:3vmin; --page-gutter:var(--gutter);
  --section-pad:clamp(72px,11vh,150px); --work-stage:#f5f5f5;}

/* ---- the page frame ---------------------------------------------------------- */
.page-view,.contact-view{line-height:1.5;}
.page-view{background:#000;}
.page-section{--c-ink:#15120f; --c-dim:#15120f66; --c-mid:#15120f9e; --c-line:#15120f1f;
  --card-bg:var(--work-stage); --card-line:transparent;
  padding:var(--section-pad) var(--page-gutter); color:#15120f; background:#fff;}
.page-section[data-ground="black"]{--c-ink:var(--paper); --c-dim:#f9f5f357; --c-mid:#f9f5f39e;
  --c-line:#ffffff24; --card-bg:#ffffff0f; --card-line:#ffffff1a; color:var(--paper); background:#000;}
.page-section--first{padding-top:calc(88px + clamp(40px,7vh,88px));}
.page-inner,.showcase-inner{max-width:1344px; margin-inline:auto;}
.page-section a:not(.action-link):focus-visible{outline:2px solid; outline-offset:3px; border-radius:4px;}

/* centred head: eyebrow, two-tone title, one short line */
.showcase-head{display:grid; justify-items:center; gap:20px; margin-bottom:clamp(40px,4.44vw,64px);
  text-align:center;}
.showcase-eyebrow{margin:0; color:#726c66; font-size:clamp(15px,1.11vw,16px); line-height:1.4;
  letter-spacing:-0.02em;}
.showcase-title{margin:0; font-size:80px; font-weight:400; line-height:1.1; letter-spacing:-0.03em;
  text-wrap:balance;}
.showcase-title-muted{display:block; color:rgba(21,18,15,.5);}
.page-section[data-ground="black"] .showcase-eyebrow,
.contact-ways .showcase-eyebrow{color:rgba(249,245,243,.58);}
.page-section[data-ground="black"] .showcase-title-muted,
.contact-ways .showcase-title-muted{color:rgba(249,245,243,.5);}
.page-head-lead{max-width:46ch; margin:0; color:var(--c-mid); font-size:clamp(16px,1.25vw,18px);
  line-height:1.55; text-wrap:balance;}
@media (max-width:767px){
  .showcase-title{font-size:36px; letter-spacing:-0.02em;}
}
@media (max-width:700px){
  .page-section--first{padding-top:120px;}
}

/* rise-and-fade entrance, once (v2-studio.js sets data-rise). Nothing is hidden
   without script, and a block already on screen never animates. */
[data-rise="pending"]{opacity:0; transform:translateY(36px);}
[data-rise="pending"]:focus-within{opacity:1; transform:none;}
[data-rise="in"]{transition:opacity .95s cubic-bezier(.215,.61,.355,1), transform .95s cubic-bezier(.215,.61,.355,1);}

/* ---- action link (the prototype's pill button) ----------------------------- */
.action-link{--action-bg:var(--ler-orange); --action-ink:#fff; --action-hover:#c63404; --action-hover-ink:#fff;
  --action-border:#ffffff1f; position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:170px; min-height:56px; padding:16px 28px; border:1px solid var(--action-border); border-radius:999px;
  background:var(--action-bg); color:var(--action-ink); font-family:inherit; font-size:16px; font-weight:500; line-height:1.25;
  text-align:center; text-decoration:none; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:background-color .24s, color .24s, border-color .24s, box-shadow .24s, transform .24s cubic-bezier(.22,1,.36,1);}
.action-link[data-tone="dark"]{--action-bg:#15120f; --action-hover:#34302c;}
.action-link[data-tone="light"]{--action-bg:#f6f1eb; --action-ink:#15120f; --action-hover:#fff; --action-hover-ink:#15120f;
  --action-border:transparent;}
.action-link[data-tone="outline"]{--action-bg:#17131040; --action-border:#ffffff70; --action-hover:#f6f1eb;
  --action-hover-ink:#15120f;}
/* on a light ground the outline pill turns ink */
.page-section[data-ground="white"] .action-link[data-tone="outline"],
.page-section[data-ground="stone"] .action-link[data-tone="outline"]{--action-bg:transparent; --action-ink:#15120f;
  --action-border:#cfc8c0; --action-hover:#15120f; --action-hover-ink:#fff;}
.page-section[data-ground="white"] .action-link[data-tone="outline"]:focus-visible,
.page-section[data-ground="stone"] .action-link[data-tone="outline"]:focus-visible{outline-color:#15120f;}
.action-link-icon{flex:none; width:16px; height:16px; margin-left:8px;}
.action-link[data-compact="true"]{min-width:0; min-height:46px; padding:12px 22px; font-size:14px;}
.action-link-label{display:block;}
.action-link:focus-visible{outline:2px solid #ff9d74; outline-offset:4px;}
.action-link[data-tone="dark"]:focus-visible{outline-color:#15120f;}
@media (hover:hover) and (pointer:fine){
  .action-link:is(:hover,:focus-visible){background:var(--action-hover); color:var(--action-hover-ink);
    border-color:transparent; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2);}
}
.action-link:active{transform:translateY(1px); box-shadow:none;}
@media (prefers-reduced-motion:reduce){
  .action-link{transition:none;}
  .action-link:is(:hover,:focus-visible,:active){transform:none;}
}

/* ---- project cards (shared by /work/; the homepage's are .fwork__*) --------- */
.featured-work-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(44px,5.5vw,96px) clamp(18px,2.2vw,34px); margin:0; padding:0; list-style:none;}
.featured-work-item{min-width:0;}
.featured-work-card{display:block; color:inherit; text-decoration:none;}
.featured-work-card:focus-visible{outline:2px solid var(--ler-orange); outline-offset:6px; border-radius:4px;}
.featured-work-shot{position:relative; display:block; overflow:hidden; border-radius:var(--radius-card); background:#17100d;}
.featured-work-item[data-size="tall"] .featured-work-shot{aspect-ratio:4/3;}
.featured-work-item[data-size="short"] .featured-work-shot{aspect-ratio:16/10;}
.featured-work-poster{display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.featured-work-badge{position:absolute; top:clamp(12px,1.3vw,18px); left:clamp(12px,1.3vw,18px); z-index:2;
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:var(--paper); color:#15120f; font-size:13px; line-height:1; letter-spacing:-0.01em;
  white-space:nowrap; pointer-events:none;}
.featured-work-arrow{flex:none; width:16px; height:16px;}
.featured-work-body{display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(16px,2.4vw,40px); padding:clamp(14px,1.6vw,22px) 0 0;}
.featured-work-line{min-width:0; font-size:clamp(17px,1.75vw,26px); line-height:1.32; letter-spacing:-0.02em;
  text-wrap:pretty;}
.featured-work-name{display:inline; margin:0; font-size:inherit; font-weight:400; line-height:inherit;
  letter-spacing:inherit; color:rgba(249,245,243,.58);}
.featured-work-sep{color:rgba(249,245,243,.58);}
.featured-work-desc{color:var(--paper);}
.featured-work-stars{flex:none; display:inline-flex; gap:3px; padding-top:.34em;}
.featured-work-star{display:block; width:15px; height:15px; background:var(--ler-orange);
  -webkit-mask:url('/assets/brand/rating-star.svg') center / contain no-repeat;
  mask:url('/assets/brand/rating-star.svg') center / contain no-repeat;}
@media (hover:hover) and (pointer:fine){
  .featured-work-card:is(:hover,:focus-visible) .featured-work-poster{transform:scale(1.04);}
}
@media (max-width:900px){
  .featured-work-grid{grid-template-columns:minmax(0,1fr); row-gap:clamp(32px,7vw,48px);}
  .featured-work-item[data-size="tall"] .featured-work-shot,
  .featured-work-item[data-size="short"] .featured-work-shot{aspect-ratio:16/10;}
  .featured-work-body{flex-wrap:wrap; gap:10px 18px;}
}
@media (max-width:560px){
  .featured-work-badge{padding:8px 13px; font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .featured-work-poster{transition:none;}
  .featured-work-card:is(:hover,:focus-visible) .featured-work-poster{transform:none;}
}

/* ---- /work/: filters and the three-up grid --------------------------------- */
.work-page-grid{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:clamp(36px,4vw,64px);}
.work-page-grid .featured-work-item[data-size] .featured-work-shot{aspect-ratio:16/10;}
.work-page-grid .featured-work-line{font-size:clamp(16px,1.2vw,19px);}
.work-page-grid .featured-work-star{width:12px; height:12px;}
.work-page-grid .featured-work-item[hidden]{display:none;}
.work-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 clamp(40px,5vw,72px);}
.work-filter{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; background:none; color:var(--paper);
  font:inherit; font-size:14px; line-height:1; cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s;}
.work-filter-count{color:rgba(249,245,243,.5); font-size:13px;}
.work-filter[aria-pressed="true"]{border-color:var(--paper); background:var(--paper); color:#15120f;}
.work-filter[aria-pressed="true"] .work-filter-count{color:rgba(21,18,15,.55);}
.work-filter:focus-visible{outline:2px solid var(--paper); outline-offset:3px;}
@media (hover:hover) and (pointer:fine){
  .work-filter[aria-pressed="false"]:hover{border-color:rgba(255,255,255,.5);}
}
@media (max-width:1100px){
  .work-page-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
  .work-filters{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(-1 * var(--page-gutter)); padding:2px var(--page-gutter) 6px;}
  .work-filters::-webkit-scrollbar{display:none;}
  .work-filter{flex:0 0 auto;}
  .work-page-grid{grid-template-columns:minmax(0,1fr);}
  .work-page-grid .featured-work-line{font-size:17px;}
}
@media (prefers-reduced-motion:reduce){
  .work-filter{transition:none;}
}

/* ---- /contact/: the opening and the three ways in --------------------------- */
.contact-view{background:#000;}
.contact-ways{padding:calc(88px + clamp(40px,7vh,88px)) var(--page-gutter) var(--section-pad);
  background:#000; color:var(--paper);}
.contact-head-lead{max-width:46ch; margin:0; color:rgba(249,245,243,.72); font-size:clamp(16px,1.25vw,18px);
  line-height:1.55; text-wrap:balance;}
@media (max-width:700px){ .contact-ways{padding-top:120px;} }
.contact-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}

/* the photo card, as the homepage's engagement cards */
.engagement-card{position:relative; overflow:hidden; border-radius:10px; background:#1b1b1b; cursor:pointer;}
.engagement-card::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,0) 72%),
    linear-gradient(rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 48%, rgba(0,0,0,.6) 100%);}
.engagement-card-content{position:absolute; inset:32px; z-index:1; display:flex; flex-direction:column;
  justify-content:space-between; align-items:flex-start; color:#fff;}
.engagement-card-title{margin:0; font-size:32px; font-weight:400; line-height:1; letter-spacing:-0.02em;}
.contact-way{aspect-ratio:4/5;}
.contact-way-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.contact-way::after{background:linear-gradient(rgba(0,0,0,.66) 0%, rgba(0,0,0,.22) 30%, rgba(0,0,0,0) 44%,
  rgba(0,0,0,0) 50%, rgba(0,0,0,.85) 100%);}
.contact-way .engagement-card-title{line-height:1.08; text-wrap:balance;}
.contact-way-muted{color:rgba(255,255,255,.74);}
.contact-way--direct{cursor:default;}
.contact-way-reach{display:grid; justify-items:start; gap:2px;}
.contact-way-big{color:#fff; font-size:clamp(20px,1.6vw,26px); line-height:1.3; letter-spacing:-0.02em;
  text-decoration:none;}
.contact-way-big:hover{text-decoration:underline 1px; text-underline-offset:5px;}
.contact-way-alt{display:flex; flex-wrap:wrap; gap:0 18px; margin:8px 0 0; font-size:14px;}
.contact-way-alt a{display:inline-block; padding-block:6px; color:rgba(255,255,255,.82);
  text-decoration:underline rgba(255,255,255,.4); text-underline-offset:4px;}
.contact-way-alt a:hover{color:#fff;}
.contact-way a:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:2px;}

/* the outlined pill: a black fill rises, the label rolls up to a copy of itself
   and the arrow slides through */
.engagement-btn{position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center;
  gap:8px; padding:12px 28px; border:1px solid #fff; border-radius:999px; color:#fff; font-size:16px;
  line-height:1.4; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap;}
.engagement-btn:focus-visible{outline:2px solid #fff; outline-offset:3px;}
.engagement-btn-fill{position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit;}
.engagement-btn-fill > span{position:absolute; inset:0; background:#000; border-radius:50% 50% 0 0;
  transform:translateY(101%);
  transition:transform .5s cubic-bezier(.4,0,0,1), border-radius .5s cubic-bezier(.4,0,0,1);}
.engagement-btn-roll{display:grid; height:1.4em; overflow:hidden;}
/* a 20px slot, as the prototype, holding the sprite arrow at the prototype arrow size */
.engagement-btn-icon{display:grid; justify-items:center; width:20px; height:14px; overflow:hidden;}
.engagement-btn-icon .site-icon{width:14px; height:14px;}
.engagement-btn-roll > span,.engagement-btn-icon .site-icon{transition:transform .8s cubic-bezier(.16,1,.3,1);}
.engagement-btn:focus-visible .engagement-btn-fill > span{border-radius:0; transform:translateY(0);}
@media (hover:hover){
  .engagement-btn:hover .engagement-btn-fill > span{border-radius:0; transform:translateY(0);}
  .engagement-btn:hover .engagement-btn-roll > span,
  .engagement-btn:hover .engagement-btn-icon .site-icon{transform:translateY(-100%);}
}
@media (max-width:991px){
  .engagement-card-content{inset:20px;}
  .engagement-card-title{font-size:28px;}
  .contact-cards{grid-template-columns:minmax(0,1fr);}
  .contact-way{aspect-ratio:3/2;}
  .contact-way-photo{object-position:50% 32%;}
}
@media (max-width:767px){ .engagement-card-title{font-size:28px;} }
@media (max-width:560px){ .contact-way{aspect-ratio:4/5;} }
@media (max-width:479px){ .engagement-btn{padding:10px 20px;} }
@media (prefers-reduced-motion:reduce){
  .engagement-btn-fill > span,.engagement-btn-roll > span,.engagement-btn-icon .site-icon{transition:none;}
}

/* The three titles below that carry a max-width are written .page-main .x:
   v2-pages.css clears every heading max-width inside .page-main under 860px
   with a selector that would otherwise outrank theirs. */

/* ---- /contact/: why reach out (laid out like the homepage's services list) -- */
.capabilities-section{--c-ink:var(--paper); --c-dim:#f9f5f357; --c-mid:#f9f5f394; --c-line:#ffffff24;
  padding:clamp(24px,3vw,56px) var(--page-gutter) var(--section-pad); background:#000; color:var(--c-ink);}
.contact-why.capabilities-section{padding-top:0;}
.capabilities-head{margin-bottom:clamp(40px,4.2vw,80px);}
.page-main .capabilities-title{max-width:20ch; margin:0; font-size:clamp(40px,4.17vw,80px); font-weight:400; line-height:1.1;
  letter-spacing:-0.03em; text-wrap:balance;}
.capabilities-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;
  gap:clamp(20px,1.7vw,32px);}
.capabilities-list{margin:0; padding:0; list-style:none;}
.capabilities-item{position:relative;}
.capabilities-rule{position:absolute; inset:0 0 auto; height:2px; overflow:hidden; background:var(--c-line);}
.capabilities-num{color:var(--c-dim); font-size:clamp(22px,1.46vw,28px); line-height:1.2;
  font-variant-numeric:lining-nums;}
.capabilities-card{position:relative; overflow:hidden; aspect-ratio:656/460; border-radius:clamp(16px,1.6vw,28px);
  background:#0b0b0b;}
.contact-why-row{display:flex; align-items:baseline; gap:clamp(12px,.9vw,18px); margin:0;
  padding:clamp(24px,1.8vw,34px) 0;}
.contact-why-text{color:var(--c-ink); font-size:clamp(22px,1.46vw,28px); line-height:1.25; letter-spacing:-0.015em;
  text-wrap:pretty;}
.contact-why-card{margin:0;}
.contact-why-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 28%;}
@media (max-width:1000px){
  .capabilities-body{grid-template-columns:minmax(0,1fr);}
  .capabilities-card{order:-1; aspect-ratio:16/10;}
}
@media (max-width:640px){
  .page-main .capabilities-title{max-width:none; font-size:clamp(34px,9vw,44px);}
}

/* ---- /contact/: what clients are saying ------------------------------------ */
.engagement-section{padding:var(--section-pad) var(--page-gutter); background:#fff; color:#15120f;}
.engagement-voices{display:grid; grid-template-columns:315px minmax(0,1fr); margin-top:clamp(40px,4.44vw,64px);}
.contact-reviews .engagement-voices{margin-top:0;}
.engagement-voices-head{display:grid; align-content:start; justify-items:start; gap:16px; padding-right:24px;}
.page-main .engagement-voices-title{max-width:11ch; margin:0; font-size:28px; font-weight:400; line-height:1.2;
  letter-spacing:-0.01em;}
.engagement-marquee{min-width:0; overflow:auto hidden; overscroll-behavior-x:contain; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);}
.engagement-marquee::-webkit-scrollbar{display:none;}
.engagement-marquee:focus-visible{outline:2px solid #15120f; outline-offset:2px; border-radius:8px;}
@media (hover:hover) and (pointer:fine){
  .engagement-marquee{cursor:grab;}
  .engagement-marquee[data-dragging]{cursor:grabbing; user-select:none;}
}
.engagement-track{position:relative; display:flex; width:max-content;}
.engagement-group{display:flex; gap:32px; margin:0; padding:0 32px 0 0; list-style:none;}
.engagement-review{display:grid; align-content:start; flex:0 0 374px; width:374px; padding:16px 20px;
  border-radius:8px; background:#f7f7f7; color:#000;}
.engagement-review-quote{margin:0;}
.engagement-review-quote p{margin:0; font-size:16px; line-height:1.4; letter-spacing:-0.01em;}
.engagement-review-meta{display:flex; align-items:center; gap:8px; margin-top:16px;}
.engagement-review-avatar{display:grid; place-items:center; width:20px; height:20px; border-radius:999px;
  background:#15120f; color:#fff; font-size:8px; line-height:1; letter-spacing:.02em;}
.engagement-review-stars{display:inline-flex; color:#000;}
.engagement-review-star{display:block; width:13px; height:12px; background:currentColor;
  -webkit-mask:url('/assets/brand/rating-star.svg') center / contain no-repeat;
  mask:url('/assets/brand/rating-star.svg') center / contain no-repeat;}
@media (max-width:767px){
  .engagement-voices{grid-template-columns:minmax(0,1fr); gap:24px;}
  .engagement-voices-head{justify-items:center; padding-right:0; text-align:center;}
  .page-main .engagement-voices-title{max-width:none;}
}
@media (max-width:479px){ .page-main .engagement-voices-title{font-size:25px;} }
@media (prefers-reduced-motion:reduce){
  .engagement-marquee{-webkit-mask-image:none; mask-image:none;}
  .engagement-group[aria-hidden="true"]{display:none;}
}

/* ---- /contact/: FAQ (the homepage's, questions included) ------------------- */
.faq-section{padding:var(--section-pad) var(--page-gutter); background:var(--work-stage); color:#15120f;
  scroll-margin-top:clamp(88px,12vh,130px);}
.faq-section__inner{display:grid; gap:clamp(34px,5vh,62px); max-width:1440px; margin-inline:auto;}
.faq-section__head{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); align-items:end;
  gap:clamp(18px,3vw,64px);}
.faq-section__intro{display:grid; gap:clamp(12px,1.6vh,20px);}
.faq-section__eyebrow{margin:0; color:#726c66; font-size:13px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase;}
.page-main .faq-section__title{max-width:16ch; margin:0; font-size:clamp(34px,4.2vw,68px); font-weight:400; line-height:1.03;
  letter-spacing:-0.04em; text-wrap:balance;}
.faq-section__lead{max-width:46ch; margin:0; color:#625c56; font-size:clamp(16px,1.2vw,20px); line-height:1.55;}
.faq-section__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;
  gap:clamp(12px,1.4vw,20px);}
.faq-section__column{display:grid; align-content:start; gap:clamp(12px,1.4vw,20px); margin:0; padding:0;
  list-style:none;}
.faq-section__item{margin:0;}
.faq-section__details{padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,28px); border:1px solid #e4ded6;
  border-radius:18px; background:#fff; transition:border-color .24s, box-shadow .24s;}
.faq-section__details[open]{border-color:#d9d2c8; box-shadow:0 10px 30px rgba(21,18,9,.04);}
.faq-section__summary{display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(14px,2vw,26px);
  font-size:clamp(16px,1.15vw,19px); font-weight:500; line-height:1.35; letter-spacing:-0.012em;
  list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.faq-section__summary::-webkit-details-marker{display:none;}
.faq-section__summary::marker{content:"";}
.faq-section__summary:focus-visible{outline:2px solid var(--ler-orange); outline-offset:6px; border-radius:10px;}
.faq-section__question{display:block; min-width:0; overflow-wrap:break-word; text-wrap:pretty;}
.faq-section__icon{display:grid; place-items:center; flex:none; width:34px; height:34px; margin-top:-2px;
  border:1px solid #e0dad2; border-radius:999px; color:#15120f;
  transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .24s, color .24s, border-color .24s;}
/* the sprite has no plus: its x, turned 45 degrees, is one, and turns back
   into an x when the card opens and the circle rotates */
.faq-section__icon .site-icon{display:block; width:18px; height:18px; transform:rotate(45deg);}
.faq-section__details[open] .faq-section__icon{transform:rotate(45deg); border-color:#15120f; background:#15120f;
  color:var(--paper);}
.faq-section__answer{max-width:56ch; margin:clamp(12px,1.4vh,18px) 0 0; color:#625c56;
  font-size:clamp(15px,1.05vw,17px); line-height:1.6; overflow-wrap:break-word;}
.faq-section__ask{display:flex; flex-wrap:wrap;}
.faq-section__ask .action-link{max-width:100%; white-space:normal;}
@media (max-width:900px){
  .faq-section__head{grid-template-columns:minmax(0,1fr); align-items:start; gap:clamp(14px,2.4vh,22px);}
  .page-main .faq-section__title{max-width:20ch;}
  .faq-section__grid{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){ .faq-section__details,.faq-section__icon{transition:none;} }

/* ---- /contact/: where to find me ------------------------------------------- */
.contact-social{padding:0 var(--page-gutter) clamp(56px,9vh,110px); background:var(--work-stage); color:#15120f;}
.contact-social-inner{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:20px 40px; max-width:1440px; margin-inline:auto; padding-top:clamp(32px,4vh,48px);
  border-top:1px solid #e0dad3;}
.contact-social-title{margin:0; font-size:clamp(22px,1.8vw,28px); font-weight:400; line-height:1.2;
  letter-spacing:-0.02em;}
.contact-social-list{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none;}
.contact-social-link{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px;
  border:1px solid #e0dad2; border-radius:999px; background:#fff; color:#15120f; font-size:15px; line-height:1;
  text-decoration:none; transition:background-color .24s, color .24s, border-color .24s;}
.contact-social-link .site-icon{width:18px; height:18px;}
.contact-social-link:hover{border-color:#15120f; background:#15120f; color:var(--paper);}
.contact-social-link:focus-visible{outline:2px solid #15120f; outline-offset:3px;}
@media (max-width:560px){ .contact-social-inner{justify-content:flex-start;} }
@media (prefers-reduced-motion:reduce){ .contact-social-link{transition:none;} }

/* ---- /start-project/: the brief form ----------------------------------------
   The prototype's form card on the live form. Everything the live scripts need
   is kept on the markup: lerws-booking.js draws the calendar days (.bk-cal__*)
   and start times (.bk-chip) into the data-booking-* hooks, lerws-spx-steps.js
   moves between the two [data-spx-pane] steps, and v2-pages.js sends it
   (data-protected-form). The rules below dress those in the prototype's style. */
.one-form{--one-field-bg:#fff; --one-field-line:#15120f73; --one-on-ink:#fff; display:grid;
  gap:clamp(24px,2.2vw,32px); min-width:0; padding:clamp(22px,3vw,44px); border:1px solid var(--card-line);
  border-radius:16px; background:var(--card-bg); color:var(--c-ink);}
.page-section[data-ground="black"] .one-form{--one-field-bg:#00000073; --one-field-line:#fff6; --one-on-ink:#000;
  color-scheme:dark;}
.one-form--steps{gap:0; max-width:960px; margin-inline:auto; padding:0;}
.one-step{display:grid; gap:18px; min-width:0; padding:clamp(22px,3vw,44px);}
/* the steps show one at a time: display:grid would otherwise beat [hidden] */
.one-step[hidden]{display:none;}
.one-step:not([hidden]) + .one-step{border-top:1px solid var(--c-line);}
.one-step-label{display:flex; align-items:baseline; gap:12px; margin:0; color:var(--c-mid); font-size:15px; line-height:1.4;}
.one-step-num{color:var(--c-dim); font-variant-numeric:tabular-nums;}
.one-form-title{margin:0; font-size:clamp(26px,2.2vw,38px); font-weight:400; line-height:1.15; letter-spacing:-0.025em;
  text-wrap:balance;}
.one-form-title:focus{outline:none;}
.one-form-lead{max-width:60ch; margin:0; color:var(--c-mid); font-size:16px; line-height:1.55; text-wrap:pretty;}
.one-form-lead b{color:var(--c-ink); font-weight:500;}
.one-form-aside{margin:0; color:var(--c-mid); font-size:15px; line-height:1.55;}
.one-inline-link{color:var(--c-ink); text-decoration:underline 1px; text-underline-offset:4px;}
.one-fields{display:grid; gap:22px; min-width:0;}
.one-row{display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:22px 16px;}
.one-row[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.one-field{display:grid; gap:10px; min-width:0; margin:0; padding:0; border:0;}
.one-label{margin:0; padding:0; color:var(--c-ink); font-size:15px; line-height:1.4;}
.one-hint{color:var(--c-mid); font-size:13px;}
.one-input{width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--one-field-line); border-radius:10px;
  background:var(--one-field-bg); color:var(--c-ink); font:inherit; font-size:16px; line-height:1.4;
  transition:border-color .2s;}
.one-textarea{min-height:140px; resize:vertical;}
.one-input:focus-visible{border-color:var(--c-ink); outline:2px solid var(--c-ink); outline-offset:2px;}
.one-choice{display:block;}
.one-choice > legend{margin-bottom:10px;}
.one-pills{display:flex; flex-wrap:wrap; gap:8px;}
.one-pill{position:relative; display:inline-flex;}
.one-pill input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;}
.one-pill span{display:inline-flex; align-items:center; min-height:44px; padding:10px 18px;
  border:1px solid var(--one-field-line); border-radius:999px; background:var(--one-field-bg); color:var(--c-ink);
  font-size:15px; line-height:1.2; pointer-events:none; transition:background-color .2s, color .2s, border-color .2s;}
.one-pill input:checked + span{border-color:var(--c-ink); background:var(--c-ink); color:var(--one-on-ink);}
.one-pill input:focus-visible + span{outline:2px solid var(--c-ink); outline-offset:2px;}
.one-submit{display:grid; justify-items:start; gap:16px; padding-top:6px;}
.one-back{padding:6px 0; border:0; background:none; color:var(--c-mid); font:inherit; font-size:15px;
  text-decoration:underline 1px; text-underline-offset:4px; cursor:pointer;}
.one-back:hover{color:var(--c-ink);}
.one-back:focus-visible{outline:2px solid var(--c-ink); outline-offset:3px; border-radius:4px;}
.one-submit .form-status{margin:0; color:var(--c-mid); font-size:15px;}
.one-submit .form-status:empty{display:none;}
.one-submit .form-status.is-success{color:#8fd9a8;}
.one-submit .form-status.is-error{color:#ffb7a4;}
/* the spam trap stays out of sight here whatever else is loaded */
.one-form .sp-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;}

/* the time picker: calendar beside the start times */
.one-picker{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start;
  gap:clamp(20px,2.4vw,36px);}
.one-picker-days,.one-picker-times{display:grid; align-content:start; gap:12px; min-width:0;}
.one-cal{padding:12px 14px 14px; border:1px solid var(--one-field-line); border-radius:12px; background:var(--one-field-bg);}
.one-cal-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;}
.one-cal-title{font-size:16px;}
.one-cal-nav{display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid transparent;
  border-radius:999px; background:none; color:var(--c-ink); font:inherit; cursor:pointer;}
.one-cal-nav .site-icon{width:16px; height:16px;}
.one-cal-nav:focus-visible{outline:2px solid var(--c-ink); outline-offset:2px;}
.one-cal-nav:disabled{color:var(--c-dim); cursor:default;}
.one-cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px;}
/* the cells lerws-booking.js draws, in the prototype's cell style: a day with
   open times is outlined, the chosen one filled */
.one-cal .bk-cal__dow{display:grid; place-items:center; height:28px; padding:0; color:var(--c-mid); font-size:12px;
  letter-spacing:0;}
.one-cal .bk-cal__day{display:grid; place-items:center; aspect-ratio:1/1; min-height:32px; padding:0;
  border:1px solid transparent; border-radius:999px; background:none; color:var(--c-dim); font:inherit; font-size:14px;
  font-variant-numeric:tabular-nums; cursor:default;}
.one-cal .bk-cal__day.is-available{border-color:var(--one-field-line); background:none; color:var(--c-ink); cursor:pointer;}
.one-cal .bk-cal__day.is-today{font-weight:500;}
.one-cal .bk-cal__day.is-selected,
.one-cal .bk-cal__day.is-available.is-selected{border-color:var(--c-ink); background:var(--c-ink); color:var(--one-on-ink);}
.one-cal .bk-cal__day:focus-visible{outline:2px solid var(--c-ink); outline-offset:2px; box-shadow:none;}
.one-picker-times .bk-times__title{margin:0; color:var(--c-mid); font-size:14px;}
.one-picker-times .bk-times{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px;}
.one-picker-times .bk-chip > span{display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 10px;
  border:1px solid var(--one-field-line); border-radius:999px; background:var(--one-field-bg); color:var(--c-ink);
  font-size:14px; transition:background-color .2s, color .2s, border-color .2s;}
.one-picker-times .bk-chip:has(input:checked) > span{border-color:var(--c-ink); background:var(--c-ink); color:var(--one-on-ink);}
.one-picker-times .bk-chip input:focus-visible ~ span{outline:2px solid var(--c-ink); outline-offset:2px; box-shadow:none;}
.one-picker-status{margin:0; padding:14px 16px; border:1px dashed var(--one-field-line); border-radius:12px;
  color:var(--c-mid); font-size:15px; line-height:1.5;}
.one-picker-status:empty{display:none;}
.one-picker-status.is-error{border-color:#ffb7a499; color:#ffb7a4;}

/* booked: lerws-booking.js puts its confirmation at the top of the form and
   marks it .is-booked; only the confirmation shows until "Book another time" */
.one-form.is-booked > [data-spx-pane]{display:none;}
.one-form .bk-confirm{margin:0; padding:clamp(22px,3vw,44px);}
.one-form .bk-confirm__icon{background:rgba(221,61,6,.16); color:#ff8a4c;}
.one-form .bk-confirm h3{color:var(--c-ink);}
.one-form .bk-confirm__head p,.one-form .bk-confirm dt,.one-form .bk-confirm__foot{color:var(--c-mid);}
.one-form .bk-confirm dl{border-color:var(--c-line);}
.one-form .bk-confirm dd{color:var(--c-ink);}
.one-form .bk-confirm__foot a{color:#ff9d74;}
.one-form .bk-confirm .btn{display:inline-flex; align-items:center; min-height:46px; margin-top:18px; padding:12px 22px;
  border:1px solid #ffffff70; border-radius:999px; background:transparent; color:var(--paper); font:inherit;
  font-size:14px; cursor:pointer;}
.one-form .bk-confirm .btn:hover{background:var(--paper); color:#15120f;}

@media (hover:hover) and (pointer:fine){
  .one-input:hover,.one-pill input:hover + span,.one-picker-times .bk-chip:hover > span{border-color:var(--c-mid);}
  .one-cal-nav:hover:not(:disabled){border-color:var(--one-field-line);}
  .one-cal .bk-cal__day.is-available:hover{border-color:var(--c-ink); background:none;}
}
@media (max-width:700px){
  .one-row[data-cols="2"],.one-picker{grid-template-columns:minmax(0,1fr);}
  .one-step{padding:20px;}
  .one-submit,.one-submit .action-link{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .one-input,.one-pill span,.one-picker-times .bk-chip > span{transition:none;}
}

/* ---- /about/: founder, figures, principles, fit ------------------------------
   The prototype's page parts (page-parts.tsx: PageHead, the split, StatsRow,
   SectionTitle, InfoCards). The opening buttons, the two desk photos and the
   "Who this suits" lists are the live page's, set in the same parts. */
.page-section[data-ground="stone"]{--card-bg:#fff; --card-line:#e4ded6; background:var(--work-stage);}
.page-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;}
.showcase-head .page-actions{justify-content:center;}
.page-actions--after{margin-top:clamp(32px,3vw,48px);}
.page-title{display:grid; justify-items:start; gap:16px;}
.page-title-eyebrow{margin:0; color:var(--c-mid); font-size:clamp(15px,.94vw,18px); line-height:1.4; letter-spacing:-0.02em;}

/* the founder: portrait beside the story */
.page-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center;
  gap:clamp(32px,5vw,96px); margin-top:clamp(24px,3vw,48px);}
.page-split-photo{margin:0; overflow:hidden; border-radius:16px; background:#1b1b1b;}
.page-split-photo img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%;}
.page-split-copy{display:grid; gap:18px; max-width:60ch;}
.page-split-title{margin:0 0 6px; font-size:clamp(34px,3.4vw,60px); font-weight:400; line-height:1.08; letter-spacing:-0.03em;
  text-wrap:balance;}
.page-split-copy > p:not(.page-title-eyebrow){margin:0; color:var(--c-mid); font-size:clamp(16px,1.15vw,18px); line-height:1.6;
  text-wrap:pretty;}

/* the figures */
.page-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:clamp(56px,7vw,110px) 0 0;
  padding:clamp(28px,3vw,44px) 0 0; border-top:1px solid var(--c-line); list-style:none;}
.page-stat{display:grid; align-content:start; gap:6px; min-width:0; padding:0 clamp(14px,1.4vw,24px);
  border-left:1px solid var(--c-line);}
.page-stat:first-child{padding-left:0; border-left:0;}
.page-stat-num{font-size:clamp(38px,3.4vw,60px); line-height:1.1; letter-spacing:-0.035em; white-space:nowrap;}
.page-stat-label{color:var(--c-mid); font-size:clamp(14px,1vw,17px); line-height:1.4;}

/* cards: the principles, and the two fit lists */
.info-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none;}
.info-cards[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.info-cards[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr));}
.info-cards-item{display:flex; min-width:0;}
.page-card{position:relative; display:flex; flex:1 1 0%; flex-direction:column; gap:12px; padding:clamp(24px,2.2vw,34px);
  border:1px solid var(--card-line); border-radius:16px; background:var(--card-bg); color:var(--c-ink); text-decoration:none;}
.info-card-title{margin:0; font-size:clamp(22px,1.7vw,28px); font-weight:400; line-height:1.2; letter-spacing:-0.02em;
  text-wrap:balance;}
.info-card-text{margin:0; color:var(--c-mid); font-size:15px; line-height:1.55; text-wrap:pretty;}

/* the live page's two desk photos, as a pair of cards under the principles */
.page-photo-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px;}
.page-photo{margin:0; overflow:hidden; border-radius:16px; background:var(--card-bg);}
.page-photo img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;}

.page-reviews{margin-top:clamp(56px,7vw,110px);}
.page-reviews .engagement-voices{margin-top:0;}

/* who this suits: a ruled list in each card, a check or a cross per line */
.fit-list{display:grid; margin:4px 0 0; padding:0; list-style:none;}
.fit-list li{display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-top:1px solid var(--c-line);
  color:var(--c-ink); font-size:16px; line-height:1.5; text-wrap:pretty;}
.fit-list-icon{flex:none; width:18px; height:18px; margin-top:3px;}
.fit-list--yes .fit-list-icon{color:var(--ler-orange);}
.fit-list--no .fit-list-icon{color:var(--c-mid);}

@media (max-width:1100px){ .info-cards[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:991px){ .info-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:900px){
  .page-split{grid-template-columns:minmax(0,1fr);}
  .page-split-photo{max-width:520px;}
}
@media (max-width:700px){
  .info-cards,.info-cards[data-cols="2"],.info-cards[data-cols="4"]{grid-template-columns:minmax(0,1fr);}
  .page-stats{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px;}
  .page-stat:nth-child(2n+1){padding-left:0; border-left:0;}
  .page-photo-pair{grid-template-columns:minmax(0,1fr);}
}

/* ---- /projects/<slug>/: case studies ------------------------------------------
   The prototype's case study (case-study-view.tsx, case-parts.tsx): the black
   head with the cover under it, then one band per live section, alternating
   grounds, ending on the "Next project" card. The prototype's case-* classes
   are cs-* here: v2-pages.css still carries the old case template's .case-*
   rules for the pages not rebuilt yet, and they would reach into these. */
.page-section--flush{padding-top:0;}
.page-title-lead{max-width:54ch; margin:0; color:var(--c-mid); font-size:clamp(16px,1.2vw,18px); line-height:1.55; text-wrap:pretty;}
.action-link-stack{display:grid; align-items:center; min-width:0; text-align:left;}
.action-link-stack > *{grid-area:1 / 1;}
.num-row{display:flex; align-items:baseline; gap:clamp(12px,.9vw,18px); padding:clamp(22px,1.8vw,32px) 0;}
.num-row-copy{display:grid; gap:6px; min-width:0;}
.num-row-title{margin:0; color:var(--c-ink); font-size:clamp(22px,1.46vw,28px); font-weight:400; line-height:1.25;
  letter-spacing:-0.015em; text-wrap:pretty;}
.num-row-text{margin:0; color:var(--c-mid); font-size:clamp(15px,.9vw,17px); line-height:1.5;}
.cs-cover{max-width:1200px; margin:0 auto; overflow:hidden; border-radius:clamp(16px,1.6vw,28px); background:#111;}
.cs-cover img{display:block; width:100%; height:auto;}
.cs-intro{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; gap:clamp(24px,5vw,96px);}
.cs-intro .page-title{margin-bottom:0;}
.page-main .cs-intro .capabilities-title,.page-main .cs-process .capabilities-title,
.page-main .cs-stack .capabilities-title{max-width:18ch;
  font-size:clamp(34px,3.2vw,56px); line-height:1.08;}
.cs-copy{display:grid; gap:18px; max-width:62ch; padding-top:.35em;}
.cs-copy > p{margin:0; color:var(--c-mid); font-size:clamp(17px,1.25vw,20px); line-height:1.6; text-wrap:pretty;}
.cs-copy .num-rows{grid-template-columns:minmax(0,1fr);}
.cs-copy .num-row-title{font-size:clamp(19px,1.35vw,24px); line-height:1.35;}
.cs-shot{margin:clamp(48px,6vw,96px) 0 0;}
.cs-shot img{display:block; width:100%; height:auto; border:1px solid var(--c-line); border-radius:16px;}
.cs-caption{margin:12px 0 0; color:var(--c-mid); font-size:14px; line-height:1.5; text-wrap:pretty;}
.cs-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:clamp(48px,6vw,96px) 0 0;}
.cs-pair[data-portrait="true"]{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);}
.cs-panel{--pad:clamp(16px,3vw,48px); position:relative; display:grid; place-items:center; margin:0; padding:var(--pad);
  overflow:hidden; border:1px solid var(--card-line); border-radius:16px; background:var(--card-bg);}
.cs-panel img{display:block; width:100%; height:auto;}
.cs-panel[data-fitted="true"] img{position:absolute; top:var(--pad); left:var(--pad); width:calc(100% - 2 * var(--pad));
  height:calc(100% - 2 * var(--pad)); object-fit:contain;}
.cs-rail{display:flex; align-items:flex-start; gap:16px; margin:clamp(40px,5vw,72px) 0 0; padding:0; list-style:none;}
.cs-rail-item{flex:1 1 0; min-width:0;}
.cs-rail[data-kind="phones"] .cs-rail-item{flex:0 1 340px;}
.cs-frame{position:relative; margin:0; overflow:hidden; border:1px solid var(--c-line); border-radius:16px; background:var(--card-bg);}
.cs-rail[data-kind="phones"] .cs-frame{border-radius:24px;}
.cs-frame img{display:block; width:100%; height:auto;}
.cs-brand{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:clamp(48px,6vw,96px) 0 0;}
.cs-brand-figure{margin:0;}
.cs-tile{display:grid; place-items:center; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--c-line); border-radius:16px; background:#fff;}
.cs-tile img{display:block; width:62%; height:auto;}
.cs-lockups{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:16px 0 0; padding:0; list-style:none;}
.cs-lockups .cs-tile{aspect-ratio:1/1;}
.cs-tile[data-icon="true"] img{width:34%;}
.cs-type{margin:clamp(48px,6vw,96px) 0 0; padding:clamp(28px,3vw,44px) 0 0; border-top:1px solid var(--c-line);}
.cs-type-label{margin:0; color:var(--c-mid); font-size:15px; line-height:1.4;}
.cs-type-line{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 clamp(20px,4vw,64px); margin:18px 0 0; color:var(--c-ink);
  font-size:clamp(40px,8vw,128px); line-height:1.08; letter-spacing:-0.03em; overflow-wrap:anywhere;}
.cs-type-line span{min-width:0;}
.cs-palette{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:clamp(28px,3vw,44px) 0 0; padding:0; list-style:none;}
.cs-swatch{display:flex; align-items:flex-end; min-width:0; min-height:clamp(96px,10vw,150px); padding:14px; border:1px solid var(--c-line);
  border-radius:14px; font-size:13px; line-height:1.2; letter-spacing:.02em; font-variant-numeric:tabular-nums;}
.page-card .cs-palette{margin-top:8px;}
.page-card .cs-swatch{min-height:clamp(88px,7vw,120px); padding:12px;}
.cs-process{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; gap:clamp(24px,5vw,96px);}
.cs-intro + .cs-process{margin-top:clamp(80px,10vw,160px);}
.cs-process .page-title{margin-bottom:0;}
.cs-steps{margin:0; padding:0; list-style:none;}
.cs-steps .num-row-text{max-width:56ch;}
.cs-next-wrap{margin-top:clamp(80px,10vw,160px);}
.cs-next{position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr) auto; align-items:center;
  gap:clamp(20px,3vw,48px); padding:clamp(12px,1.2vw,18px); border:1px solid var(--card-line); border-radius:20px;
  background:var(--card-bg); color:var(--c-ink); text-decoration:none; transition:border-color .24s;}
.cs-next[data-poster="false"]{grid-template-columns:minmax(0,1fr) auto; padding:clamp(24px,2.6vw,40px);}
.cs-next-shot{display:block; aspect-ratio:16/10; overflow:hidden; border-radius:12px; background:#17100d;}
.cs-next-shot img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.cs-next-copy{display:grid; gap:10px; min-width:0;}
.cs-next-label{color:var(--c-mid); font-size:15px; line-height:1.4;}
.cs-next-name{font-size:clamp(30px,3.2vw,56px); line-height:1.08; letter-spacing:-0.03em; text-wrap:balance;}
.cs-next-desc{color:var(--c-mid); font-size:clamp(16px,1.2vw,19px); line-height:1.5; text-wrap:pretty;}
.cs-next-arrow{width:28px; height:28px; margin-right:clamp(4px,1.4vw,24px); color:var(--c-mid); transition:transform .24s, color .24s;}
.page-section .cs-next:focus-visible{outline:2px solid var(--c-ink); outline-offset:4px; border-radius:20px;}
@media (hover:hover) and (pointer:fine){
  .cs-next:hover{border-color:var(--c-mid);}
  .cs-next:hover .cs-next-shot img{transform:scale(1.03);}
  .cs-next:hover .cs-next-arrow{color:var(--c-ink); transform:translateX(4px);}
}
@media (max-width:900px){
  .cs-intro,.cs-process{grid-template-columns:minmax(0,1fr);}
  .cs-intro{gap:24px;}
  .cs-process{gap:16px;}
  .cs-copy{padding-top:0;}
  .cs-rail{margin-inline:calc(-1 * var(--page-gutter)); padding:0 var(--page-gutter) 10px; overflow-x:auto;
    overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--page-gutter); scrollbar-width:thin;}
  .cs-rail-item,.cs-rail[data-kind="phones"] .cs-rail-item{flex:0 0 min(42vw,320px); scroll-snap-align:start;}
  .cs-rail[data-kind="phones"] .cs-rail-item{flex-basis:min(40vw,300px);}
}
@media (max-width:800px){
  .cs-next,.cs-next[data-poster="false"]{grid-template-columns:minmax(0,1fr) auto;}
  .cs-next-shot{grid-column:1 / -1;}
}
@media (max-width:700px){
  .cs-pair,.cs-pair[data-portrait="true"],.cs-brand{grid-template-columns:minmax(0,1fr);}
  .cs-panel[data-fitted="true"]{aspect-ratio:4/5;}
  .cs-lockups{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cs-palette{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .cs-swatch,.page-card .cs-swatch{min-height:84px; padding:10px; font-size:12px;}
  .cs-rail-item{flex-basis:74vw;}
  .cs-rail[data-kind="phones"] .cs-rail-item{flex-basis:62vw;}
}
@media (prefers-reduced-motion:reduce){
  .cs-next,.cs-next-shot img,.cs-next-arrow{transition:none;}
  .cs-next:hover .cs-next-shot img,.cs-next:hover .cs-next-arrow{transform:none;}
}
/* the other band kinds: detail cards, colour and type cues, process phases,
   tags, the gallery, and the tech stack */
.cs-step-phase{margin:0; color:var(--c-mid); font-size:14px; line-height:1.4;}
.cs-tags{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none;}
.cs-tags li{padding:10px 18px; border:1px solid var(--c-line); border-radius:999px; color:var(--c-ink); font-size:15px; line-height:1.3;}
.cs-tags--small{gap:6px; margin-top:8px;}
.cs-tags--small li{padding:5px 12px; color:var(--c-mid); font-size:13px;}
.cs-stack{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(48px,6vw,110px);}
.cs-stack .page-title{margin-bottom:clamp(24px,2.4vw,40px);}
.cs-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none;}
.cs-cards-item{display:flex; min-width:0;}
.cs-cards-item[data-wide="true"]{grid-column:1 / -1;}
.cs-card-lede{margin:0; color:var(--c-ink); font-size:clamp(17px,1.3vw,20px); line-height:1.5; text-wrap:pretty;}
.cs-card-list{margin:4px 0 0; padding:0; list-style:none;}
.cs-card-list li{padding:12px 0; border-top:1px solid var(--c-line); color:var(--c-mid); font-size:15px; line-height:1.5;}
.cs-cues{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.cs-cue-type{margin:0; color:var(--c-ink); font-size:clamp(24px,2.2vw,36px); line-height:1.2; letter-spacing:-0.02em; text-wrap:balance;}
.cs-gallery{margin:0; padding:0; list-style:none; columns:260px 3; column-gap:16px;}
.cs-gallery-item{margin:0 0 clamp(24px,3vw,40px); break-inside:avoid;}
.cs-gallery-figure{margin:0;}
@media (max-width:1000px){ .cs-cues{grid-template-columns:minmax(0,1fr);} }
@media (max-width:900px){ .cs-stack{grid-template-columns:minmax(0,1fr);} }
@media (max-width:800px){ .cs-cards{grid-template-columns:minmax(0,1fr);} }
@media (max-width:700px){ .cs-tags li{font-size:14px;} }

/* ---- /services/: the hub and the service pages ----------------------------------
   The prototype's service pages (service-detail-view.tsx, detail-parts.tsx,
   services-view.tsx): full, compact and category layouts. */
.info-card--link{padding-right:clamp(56px,4.4vw,72px); transition:border-color .24s, background-color .24s;}
.info-card-links{margin:auto 0 0; padding:14px 0 0; list-style:none;}
.info-card-links a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0;
  border-top:1px solid var(--c-line); color:var(--c-ink); font-size:17px; line-height:1.3; text-decoration:none;}
.info-card-links .page-arrow{flex:none; width:16px; height:16px; color:var(--c-mid); transition:transform .24s, color .24s;}
.info-card-more{align-self:flex-start; margin-top:6px; color:var(--c-ink); font-size:14px;
  text-decoration:underline 1px; text-underline-offset:5px;}
.info-card-arrow{position:absolute; top:clamp(24px,2.2vw,34px); right:clamp(22px,2vw,30px); width:20px; height:20px;
  color:var(--c-mid); transition:transform .24s, color .24s;}
@media (hover:hover) and (pointer:fine){
  .info-card--link:hover{border-color:var(--c-mid);}
  .info-card--link:hover .info-card-arrow,.info-card-links a:hover .page-arrow{color:var(--c-ink); transform:translate(3px,-3px);}
  .info-card-links a:hover{text-decoration:underline 1px; text-underline-offset:5px;}
}
.num-rows-photo{margin:0;}
.num-rows-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
@media (prefers-reduced-motion:reduce){
  .info-card--link,.info-card-arrow,.info-card-links .page-arrow{transition:none;}
}
.det-intro{margin-top:clamp(8px,2vw,32px);}
.det-intro .capabilities-head{margin-bottom:clamp(28px,3vw,48px);}
.page-main .det-intro .capabilities-title{max-width:24ch; font-size:clamp(30px,3.4vw,60px);}
.det-follow{margin-top:clamp(56px,7vw,110px);}
.det-tags{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; list-style:none;}
.det-tag{padding:8px 14px; border-radius:999px; background:var(--c-line); color:var(--c-ink); font-size:14px; line-height:1.3;}
.det-cover-copy{display:grid; gap:clamp(24px,2.4vw,36px); min-width:0;}
.det-cover-copy .page-split-title{margin:0;}
@media (min-width:901px){ .det-cover .info-cards{grid-template-columns:minmax(0,1fr);} }
@media (max-width:640px){
  .page-main .det-intro .capabilities-title{max-width:none; font-size:26px;}
  .det-tag{font-size:13px;}
}

/* ---- live content the prototype left out, kept in its parts ------------------
   Ed, 2026-09-22: keep the live pages' information. The client quote, the
   related projects and the figures become one black "proof" band before the
   FAQ (the projects are the /work/ page's own cards); the services hub's four
   outcomes become cards, each with its picture. */
.page-quote{max-width:1100px; margin:0 0 clamp(56px,7vw,110px);}
.page-quote-text{margin:0;}
.page-quote-text p{margin:0; color:var(--c-ink); font-size:clamp(28px,3vw,52px); line-height:1.15; letter-spacing:-0.03em;
  text-wrap:balance;}
.page-quote-meta{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:clamp(20px,2vw,32px);
  padding-top:clamp(16px,1.6vw,24px); border-top:1px solid var(--c-line); color:var(--c-mid); font-size:15px;}
.page-quote-avatar{display:grid; place-items:center; width:36px; height:36px; border-radius:999px; background:var(--c-ink);
  color:var(--one-on-ink,#000); font-size:12px; letter-spacing:.02em;}
.page-section[data-ground="black"] .page-quote-avatar{background:var(--paper); color:#15120f;}
.page-quote-stars{display:inline-flex; gap:3px; margin-left:auto;}
.page-quote-star{display:block; width:15px; height:15px; background:var(--ler-orange);
  -webkit-mask:url('/assets/brand/rating-star.svg') center / contain no-repeat;
  mask:url('/assets/brand/rating-star.svg') center / contain no-repeat;}
.page-proof-head{margin-bottom:clamp(28px,3vw,48px);}
.page-stats[data-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr));}
.page-card-media{margin:calc(-1 * clamp(24px,2.2vw,34px)) calc(-1 * clamp(24px,2.2vw,34px)) 4px; overflow:hidden;
  aspect-ratio:4/3; border-radius:16px 16px 0 0; background:var(--c-line);}
.page-card-media img{display:block; width:100%; height:100%; object-fit:cover;}
@media (max-width:700px){
  .page-stats[data-count="5"]{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-quote-stars{margin-left:0;}
}

/* ---- /industries/: the results-driven layout ---------------------------------
   The prototype's industry pages (industry-showcase-view.tsx): service chips, a
   wide rendered loop, the loop cards, the problem, the solution, the real work
   and one next step. The loops play only while on screen (v2-studio.js).
   The prototype's "Numbers that speak" band is left out here: its figures are
   marked sample/placeholder in the prototype (Ed, 2026-09-22, chose to publish
   the rest of this layout without them). */
.info-card-num{color:var(--c-dim); font-size:15px; font-variant-numeric:tabular-nums;}
.det-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin:clamp(-28px,-2vw,-16px) 0 clamp(32px,4vw,56px); padding:0; list-style:none;}
.det-chip{padding:9px 16px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:rgba(249,245,243,.78);
  font-size:14px; line-height:1;}
.det-band{margin:0;}
.det-band-frame{position:relative; overflow:hidden; border-radius:clamp(14px,1.6vw,24px); background:#0b0b0b;}
.det-band-frame[data-loop]{aspect-ratio:1280/496; border-radius:0; background:none;}
.det-band-loop,.det-loop-card-video{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;}
.det-band-video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;}
/* where the prototype has an unrendered loop, the live page's own picture */
.det-band-photo{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;}
.det-band-caption{margin:12px 2px 0; color:var(--c-mid); font-size:14px;}
.det-band-caption a{color:inherit; text-decoration:underline 1px; text-underline-offset:4px;}
.det-band-caption a:hover{color:var(--c-ink);}
.det-loop-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 16px; padding:0; list-style:none;}
.det-loop-card{display:grid; align-content:start; gap:10px; padding:clamp(18px,1.6vw,24px);
  border:1px solid var(--card-line); border-radius:16px; background:var(--card-bg);}
.det-loop-card-art{position:relative; overflow:hidden; aspect-ratio:1/1;}
.det-loop-card-title{margin:0; font-size:clamp(19px,1.4vw,23px); font-weight:400; line-height:1.25; letter-spacing:-0.02em;}
.det-loop-card-text{margin:0; color:var(--c-mid); font-size:15px; line-height:1.55;}
.det-statement,.det-problem-title{max-width:18ch; margin:14px 0 0; color:var(--c-mid); font-size:clamp(34px,4.2vw,76px);
  font-weight:400; line-height:1.06; letter-spacing:-0.035em; text-wrap:balance;}
.det-problem-title{max-width:none;}
.det-problem-title > span{display:block;}
.det-problem-ink{color:var(--c-ink);}
.det-problem-points{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px clamp(20px,2.6vw,44px);
  margin:clamp(36px,4.4vw,64px) 0 0; padding:clamp(24px,2.4vw,36px) 0 0; border-top:1px solid var(--c-line); list-style:none;}
.det-problem-points li{min-width:0; color:var(--c-ink); font-size:clamp(17px,1.4vw,20px); line-height:1.35;
  letter-spacing:-0.01em; text-wrap:pretty;}
.det-solution-points{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,36px);
  margin:clamp(32px,4vw,56px) 0 0; padding:0; list-style:none;}
.det-solution-points h3{margin:0 0 6px; font-size:clamp(19px,1.4vw,23px); font-weight:400; line-height:1.25; letter-spacing:-0.02em;}
.det-solution-points p{margin:0; color:var(--c-mid); font-size:15px; line-height:1.55;}
.det-solution-actions{margin-top:clamp(32px,4vw,56px);}
/* an industry page has no lead, so the live page's buttons sit under the chips;
   they are outside the centred head, so they centre themselves here */
.det-head-actions{justify-content:center; margin:clamp(26px,3vw,38px) 0 clamp(36px,4.4vw,64px);}
.det-proof-grid{margin-top:clamp(8px,1vw,16px);}
.det-reviews{margin-top:0;}
@media (max-width:1200px){
  .det-problem-points{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px;}
}
@media (max-width:991px){ .det-loop-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:700px){
  .det-chips{justify-content:flex-start;}
  .det-loop-cards,.det-solution-points,.det-problem-points{grid-template-columns:minmax(0,1fr);}
  .det-problem-points{row-gap:14px;}
  .det-problem-points li{font-size:17px;}
  .det-statement{max-width:none;}
  .det-band-video{aspect-ratio:4/3;}
  .det-band-frame[data-loop]{aspect-ratio:16/9;}
}

/* ---- the article pages: blog posts, resources guides, legal documents --------
   The prototype's article view (art-*): the centred title on black with the
   byline and the picture, the article in a readable column on white, then the
   related posts. Restored from the live pages and restyled to match: the
   author box, the share row, and the related posts' own pictures (shown with
   the blog index's own card, .art-post, instead of the prototype's text-only
   link cards, so nothing that is on the live page is lost). */
.art-opening .showcase-title{max-width:22ch; font-size:clamp(34px,5vw,72px);}
.art-opening--index .showcase-title{max-width:none; font-size:clamp(36px,5.6vw,80px);}
.art-opening .page-head:last-child{margin-bottom:0;}
.art-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; margin:0; color:var(--c-mid);
  font-size:14px; line-height:1.4;}
.art-meta-item{display:inline-flex; align-items:center;}
.art-dot{flex:0 0 auto; width:3px; height:3px; margin:0 10px; border-radius:50%; background:currentcolor;}
.art-byline{justify-content:center; margin:calc(-1 * clamp(8px,1.4vw,24px)) 0 clamp(36px,4.4vw,64px);
  font-size:15px;}
.art-byline-avatar{flex:0 0 auto; width:32px; height:32px; margin-right:12px; border-radius:50%; object-fit:cover;}
/* the index cards name their author, as the live index does */
.art-meta-avatar{flex:0 0 auto; width:20px; height:20px; margin-right:8px; border-radius:50%; object-fit:cover;}
.art-figure{overflow:hidden; max-width:1100px; margin:0 auto; border-radius:16px; background:var(--card-bg);}
.art-figure img{display:block; width:100%; height:auto;}
.art-body{padding-top:clamp(56px,8vw,110px);}
.art-column{--art-text:#15120fcc; max-width:68ch; margin-inline:auto; font-size:clamp(17px,1.2vw,19px);}
.art-prose{color:var(--art-text); font-size:1em; line-height:1.7; overflow-wrap:break-word;}
.art-prose > *{margin:0;}
.art-prose > * + *{margin-top:1.1em;}
.art-prose p,.art-prose li{text-wrap:pretty;}
.art-prose h2,.art-prose h3,.art-prose h4{color:var(--c-ink); font-weight:400; text-wrap:balance;}
.art-prose h2{margin-top:2.2em; font-size:clamp(26px,2.1vw,34px); line-height:1.2; letter-spacing:-0.02em;}
.art-prose h3{margin-top:1.8em; font-size:clamp(21px,1.5vw,24px); line-height:1.3; letter-spacing:-0.015em;}
.art-prose h4{margin-top:1.6em; font-size:1em; line-height:1.4;}
.art-prose h2 + *,.art-prose h3 + *,.art-prose h4 + *{margin-top:.6em;}
.art-prose .art-intro{color:var(--c-ink); font-size:clamp(20px,1.6vw,24px); line-height:1.5; letter-spacing:-0.01em;}
.art-prose ul,.art-prose ol{padding-left:1.3em;}
.art-prose ul{list-style:outside;}
.art-prose ol{list-style:decimal;}
.art-prose li + li{margin-top:.5em;}
.art-prose li::marker{color:var(--c-dim);}
.art-prose strong{color:var(--c-ink); font-weight:400;}
.art-prose a{color:var(--c-ink); text-decoration:underline 1px rgba(21,18,15,.35); text-underline-offset:.22em;
  transition:text-decoration-color .2s;}
.art-prose li > a:only-child{display:inline-block; padding-block:7px;}
.art-prose blockquote{padding-left:1.2em; border-left:2px solid var(--c-line); color:var(--c-ink);}
.art-prose img{display:block; max-width:100%; height:auto; border-radius:12px;}
.art-prose figcaption{margin-top:.6em; color:var(--c-mid); font-size:14px; line-height:1.5;}
.art-prose hr{margin-block:2.4em; border:0; border-top:1px solid var(--c-line);}
.art-prose .art-table{overflow-x:auto; border:1px solid var(--c-line); border-radius:12px;}
.art-prose .art-notice,.art-prose .art-panel{padding:clamp(18px,2vw,26px); border-radius:12px;
  background:var(--work-stage); font-size:16px; line-height:1.6;}
.art-prose .art-notice{color:var(--c-ink);}
.art-prose .art-notice + h2{margin-top:1.8em;}
.art-prose .art-panel{display:grid; gap:12px;}
.art-prose .art-panel h3{margin:0 0 4px;}
.art-callout{display:grid; justify-items:start; gap:12px; margin-top:clamp(48px,6vw,80px);
  padding:clamp(28px,3vw,44px); border-radius:16px; background:var(--work-stage);}
.art-callout-title{margin:0; color:var(--c-ink); font-size:clamp(26px,2.1vw,34px); font-weight:400;
  line-height:1.2; letter-spacing:-0.02em; text-wrap:balance;}
.art-callout-text{margin:0; color:var(--c-mid); font-size:17px; line-height:1.6; text-wrap:pretty;}
.art-callout .art-actions{margin-top:12px;}
.art-column > .art-actions{margin-top:clamp(40px,5vw,64px);}
.art-posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(40px,4.4vw,72px) clamp(18px,2vw,32px); margin:0; padding:0; list-style:none;}
.art-post{display:flex; min-width:0;}
.art-post-card{display:flex; flex:1; flex-direction:column; gap:18px; color:var(--c-ink); text-decoration:none;}
.art-post-shot{overflow:hidden; aspect-ratio:16/9; border-radius:16px; background:var(--card-bg);}
.art-post-img{display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.art-post-body{display:grid; align-content:start; gap:10px;}
.art-post-title{margin:0; font-size:clamp(20px,1.5vw,26px); font-weight:400; line-height:1.25;
  letter-spacing:-0.02em; text-wrap:balance;}
.art-post-text{margin:0; color:var(--c-mid); font-size:15px; line-height:1.55; text-wrap:pretty;}
.art-post[data-featured]{grid-column:1 / -1;}
.art-post[data-featured] .art-post-card{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  align-items:center; gap:clamp(24px,3.6vw,64px);}
.art-post[data-featured] .art-post-body{gap:14px;}
.art-post[data-featured] .art-post-title{font-size:clamp(28px,2.8vw,48px); line-height:1.12; letter-spacing:-0.03em;}
.art-post[data-featured] .art-post-text{font-size:clamp(16px,1.2vw,18px);}
.art-note{margin:20px 0 0; color:var(--c-mid); font-size:16px; line-height:1.5;}
.art-note a{display:inline-flex; align-items:center; min-height:44px; color:var(--c-ink);
  text-decoration:underline 1px; text-underline-offset:5px;}
.art-tools{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:clamp(32px,4vw,56px);
  padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--c-line);}
.art-tools-label{margin:0; color:var(--c-mid); font-size:15px; line-height:1.4;}
.art-tools-list{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.art-tool{padding:8px 14px; border:1px solid var(--c-line); border-radius:999px; color:var(--c-ink);
  font-size:14px; line-height:1.2;}

/* restored from the live article: the author box and the share row, at the end
   of the column (the live page calls them .author-bio and .bshare, both of
   which v2-pages.css already styles its own way) */
.art-author{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:clamp(16px,2vw,24px);
  margin-top:clamp(40px,5vw,64px); padding-top:clamp(28px,3.4vw,44px); border-top:1px solid var(--c-line);}
.art-author-photo{overflow:hidden; width:clamp(56px,6vw,72px); aspect-ratio:1; border-radius:50%;
  background:var(--card-bg);}
.art-author-photo img{display:block; width:100%; height:100%; object-fit:cover;}
.art-author-name{margin:0; color:var(--c-ink); font-size:clamp(18px,1.3vw,20px); line-height:1.3;
  letter-spacing:-0.02em;}
.art-author-role{display:inline-block; margin-top:2px; color:var(--c-mid); font-size:14px; line-height:1.4;
  text-decoration:underline 1px rgba(21,18,15,.3); text-underline-offset:.22em;}
.art-author-role:hover{color:var(--c-ink); text-decoration-color:currentcolor;}
.art-author-text{margin:10px 0 0; color:var(--c-mid); font-size:15px; line-height:1.6; text-wrap:pretty;}
.art-share{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:clamp(24px,2.6vw,36px);}
.art-share-label{margin:0; color:var(--c-mid); font-size:14px; line-height:1.4;}
.art-share-links{display:flex; gap:8px;}
.art-share-links a{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--c-line); border-radius:50%; color:var(--c-mid); transition:color .2s, border-color .2s;}
.art-share-links a:hover{color:var(--c-ink); border-color:var(--c-ink);}
.art-share-links .site-icon{width:17px; height:17px;}
/* the resources author box also carries Ed's own links */
.art-author-social{display:flex; gap:8px; margin-top:14px;}
.art-author-social a{display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--c-line);
  border-radius:50%; color:var(--c-mid); transition:color .2s, border-color .2s;}
.art-author-social a:hover{color:var(--c-ink); border-color:var(--c-ink);}
.art-author-social svg{width:16px; height:16px;}
/* the resources hub's four "where to start" columns, kept from the live page */
.res-cols{margin-bottom:clamp(40px,4.4vw,64px);}
.res-list{display:grid; gap:4px; margin:10px 0 0; padding:0; color:var(--c-mid); font-size:15px;
  line-height:1.55; list-style:none;}
/* the resources pages' topic links, as the prototype's chips */
a.art-tool{text-decoration:none; transition:color .2s, border-color .2s;}
a.art-tool:hover{color:var(--ler-orange); border-color:var(--ler-orange);}
@media (hover:hover) and (pointer:fine){
  .art-prose a:hover{text-decoration-color:currentcolor;}
  .art-post-card:hover .art-post-img{transform:scale(1.04);}
  .art-post-card:hover .art-post-title{text-decoration:underline 1px; text-underline-offset:6px;}
}
@media (max-width:1100px){
  .art-posts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .art-post[data-featured] .art-post-card{grid-template-columns:minmax(0,1fr); align-items:start;}
}
@media (max-width:700px){
  .art-posts{grid-template-columns:minmax(0,1fr);}
  .art-figure,.art-post-shot{border-radius:12px;}
  .art-byline{flex-direction:column; gap:10px; font-size:14px;}
  .art-byline-dot{display:none;}
  .art-callout .action-link,.art-column > .art-actions .action-link{white-space:normal;}
  .art-author{grid-template-columns:minmax(0,1fr); gap:14px;}
}
@media (prefers-reduced-motion:reduce){
  .art-post-img,.art-prose a{transition:none;}
  .art-post-card:hover .art-post-img{transform:none;}
}

/* ---- the one-off pages: growth audit, support, meet, process, search,
   affiliates and the thank-you page ------------------------------------------
   The prototype's one-* form and page furniture, on top of the set /start-project/
   already uses. The live forms keep their own action, method, reCAPTCHA keys,
   hidden fields and data-* hooks; only the dress is the prototype's. The range
   slider is driven by v2-studio.js (--one-fill), not by v2-pages.js's older
   data-range handler. */
.one-after-head{margin-top:clamp(16px,3vw,48px);}
.one-after-head .capabilities-head{margin-bottom:clamp(28px,3vw,48px);}
.one-after-head .capabilities-title{max-width:24ch; font-size:clamp(30px,3.4vw,60px);}
.one-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start;
  gap:clamp(32px,5vw,96px); margin-top:clamp(8px,2vw,32px);}
.one-aside{display:grid; justify-items:start; gap:18px; min-width:0; max-width:52ch;}
.one-aside .page-actions{margin-top:0;}
.one-aside-title{margin:0; font-size:clamp(30px,2.8vw,48px); font-weight:400; line-height:1.1;
  letter-spacing:-0.03em; text-wrap:balance;}
.one-aside-note{margin:0; color:var(--c-mid); font-size:15px; line-height:1.6; text-wrap:pretty;}
.one-aside-note strong{color:var(--c-ink); font-weight:400;}
.one-checks{display:grid; gap:10px; margin:4px 0 0; padding:0; list-style:none;}
.one-check{display:flex; align-items:flex-start; gap:12px; color:var(--c-ink);
  font-size:clamp(16px,1.1vw,18px); line-height:1.45;}
.one-check-icon{flex:0 0 auto; width:20px; height:20px; margin-top:.12em; color:var(--c-mid);}
.one-assurance{display:flex; align-items:center; gap:16px; width:100%; margin-top:10px; padding-top:22px;
  border-top:1px solid var(--c-line);}
.one-assurance-photo{flex:0 0 auto; width:56px; height:56px; border-radius:999px; background:#1b1b1b;
  object-fit:cover;}
.one-form-head{display:grid; gap:10px;}
.one-form-head .page-title-eyebrow{margin:0;}
.one-select{position:relative;}
.one-select .one-input{appearance:none; padding-right:44px; cursor:pointer;}
.one-select-chevron{position:absolute; top:50%; right:16px; width:16px; height:16px; color:var(--c-mid);
  pointer-events:none; transform:translateY(-50%);}
.one-consent{display:flex; align-items:flex-start; gap:12px; min-height:44px; color:var(--c-mid);
  font-size:14px; line-height:1.5; cursor:pointer;}
.one-consent input{flex:0 0 auto; width:20px; height:20px; margin:1px 0 0; accent-color:var(--ler-orange);
  cursor:pointer;}
.one-range{gap:6px;}
.one-range-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.one-range-value{color:var(--c-ink); font-size:clamp(20px,1.6vw,26px); letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;}
.one-range-input{--one-fill:0%; appearance:none; width:100%; height:44px; margin:0; background:none;
  cursor:pointer;}
.one-range-input::-webkit-slider-runnable-track{height:4px; border-radius:999px;
  background:linear-gradient(to right, var(--c-ink) var(--one-fill), var(--c-line) var(--one-fill));}
.one-range-input::-webkit-slider-thumb{appearance:none; width:24px; height:24px; margin-top:-10px; border:0;
  border-radius:999px; background:var(--c-ink);}
.one-range-input::-moz-range-track{height:4px; border-radius:999px;
  background:linear-gradient(to right, var(--c-ink) var(--one-fill), var(--c-line) var(--one-fill));}
.one-range-input::-moz-range-thumb{width:24px; height:24px; border:0; border-radius:999px; background:var(--c-ink);}
.one-range-input:focus-visible{outline:none;}
.one-range-input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--c-ink); outline-offset:3px;}
.one-range-input:focus-visible::-moz-range-thumb{outline:2px solid var(--c-ink); outline-offset:3px;}
.one-range-ends{display:flex; justify-content:space-between; color:var(--c-mid); font-size:13px;}
.one-notice{display:flex; align-items:flex-start; gap:10px; margin:0; padding:14px 16px;
  border:1px solid var(--c-line); border-radius:12px; color:var(--c-mid); font-size:15px; line-height:1.5;
  text-wrap:pretty;}
.one-notice a{color:var(--c-ink); text-decoration:underline 1px; text-underline-offset:3px; white-space:nowrap;}
.one-notice-icon{flex:0 0 auto; width:20px; height:20px; margin-top:1px; color:var(--c-ink);}
.one-submit-button:disabled{opacity:.45; cursor:not-allowed;}
.one-submit-button:disabled:hover{border-color:var(--action-border); background:var(--action-bg);
  color:var(--action-ink); box-shadow:none; transform:none;}
.one-cal-dow{display:grid; place-items:center; height:28px; color:var(--c-mid); font-size:12px;}
.one-cal-day{display:grid; place-items:center; aspect-ratio:1; min-height:32px; padding:0; border:0;
  border-radius:999px; background:none; color:var(--c-dim); font-size:14px; font-variant-numeric:tabular-nums;}
.page-section[data-ground="black"] .one-search-form{color-scheme:dark;}
.one-search-form{position:relative; max-width:720px; margin:0 auto;}
.one-search-icon{position:absolute; top:50%; left:22px; width:22px; height:22px; color:var(--c-mid);
  pointer-events:none; transform:translateY(-50%);}
.one-search-input{width:100%; min-height:60px; padding:14px 22px 14px 58px; border:1px solid var(--c-mid);
  border-radius:999px; background:var(--card-bg); color:var(--c-ink); font-size:18px; line-height:1.3;}
.one-search-input::placeholder{color:var(--c-mid);}
.one-search-input:focus-visible{border-color:var(--c-ink); outline:2px solid var(--c-ink); outline-offset:3px;}
.one-search-status{max-width:720px; margin:18px auto clamp(32px,4vw,56px); color:var(--c-mid);
  font-size:15px; line-height:1.5; text-align:center;}
.one-search-count{color:var(--c-ink);}
.one-search-results .info-card-title{font-size:clamp(20px,1.5vw,24px);}
.one-search-path{margin-top:auto; padding-top:6px; color:var(--c-mid); font-size:13px; overflow-wrap:anywhere;}
.one-search-more{display:flex; justify-content:center; margin-top:clamp(32px,4vw,48px);}
.one-search-more .action-link{cursor:pointer;}
.one-path-label{margin:0; color:var(--c-mid); font-size:14px; line-height:1.4;}
.one-path .one-checks{margin:4px 0 6px;}
.one-path .one-check{font-size:15px;}
.one-cta .capabilities-head{margin-bottom:0;}
.one-text-links{display:flex; flex-wrap:wrap; gap:4px 24px; margin:20px 0 0; padding:0; list-style:none;}
.one-text-links a{display:inline-flex; align-items:center; min-height:44px; color:var(--c-ink);
  font-size:15px; text-decoration:underline 1px; text-underline-offset:5px;}
.one-portal{overflow:hidden; padding-bottom:0;}
.one-portal-figure{display:flex; justify-content:flex-end; margin:0 calc(50% - 50vw) 0 0;}
.one-portal-figure img{flex:0 0 auto; width:80%; max-width:none; height:auto; display:block;}
.one-reviews-band .page-reviews{margin-top:0;}
.one-thanks{min-height:min(820px,78svh);}
.one-head-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
@media (max-width:1000px){
  .one-split{grid-template-columns:minmax(0,1fr);}
  .one-aside{max-width:62ch;}
}
@media (max-width:900px){ .one-portal-figure img{width:92%;} }
@media (max-width:700px){
  .one-submit-button{width:100%;}
  .one-search-input{font-size:16px;}
}
@media (max-width:640px){ .one-after-head .capabilities-title{max-width:none; font-size:28px;} }
@media (max-width:600px){
  .one-portal-figure{justify-content:center; margin-left:calc(50% - 50vw);}
  .one-portal-figure img{width:170%; transform:translateX(11%);}
}

/* the live /process/ video testimonial and client logos, and the live
   /affiliates/ comparison, workspace illustration and quote, kept when the
   prototype has no place for them. The video keeps the live data-tvid hooks
   (v2-pages.js plays it); its old styles lived in v2-stepcar.css, which these
   pages no longer load, so the figure is dressed here. */
.one-proof{display:grid; gap:clamp(28px,3.4vw,48px);}
@media (min-width:1001px){
  /* the client video sits beside the client cards, not above an empty half */
  .one-proof{grid-template-columns:minmax(300px,1fr) minmax(0,2fr); align-items:start;}
  .one-proof .one-clients{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.tvid{position:relative; overflow:hidden; aspect-ratio:4/5; max-width:420px; border-radius:clamp(14px,1.6vw,24px);
  background:#0b0b0b;}
.tvid__media{display:block; width:100%; height:100%; object-fit:cover;}
.tvid__scrim{position:absolute; inset:auto 0 0; height:52%; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);}
.tvid__foot{position:absolute; inset:auto 0 0; display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; padding:clamp(16px,2vw,22px);}
.tvid__name{margin:0; color:#fff; font-size:clamp(17px,1.3vw,20px); line-height:1.25; letter-spacing:-0.02em;}
.tvid__role{margin:2px 0 0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.4;}
.tvid__toggle{display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; padding:0;
  border:1px solid rgba(255,255,255,.4); border-radius:999px; background:rgba(0,0,0,.35); color:#fff;
  cursor:pointer; transition:background .2s, border-color .2s;}
.tvid__toggle:hover{background:rgba(0,0,0,.6); border-color:#fff;}
.tvid__toggle svg{width:18px; height:18px; fill:currentColor; stroke:none;}
.tvid__pause,.tvid.is-playing .tvid__play{display:none;}
.tvid.is-playing .tvid__pause{display:block;}
.one-clients{margin-top:0;}
.one-client{align-content:start; gap:14px;}
.one-client-logo{display:flex; align-items:center; min-height:44px; margin:0;}
.one-client-logo img{width:auto; max-width:150px; max-height:36px; opacity:.85;}
.one-compare{overflow-x:auto; border:1px solid var(--c-line); border-radius:12px;}
.one-compare table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.55;}
.one-compare th,.one-compare td{padding:14px 18px; border-bottom:1px solid var(--c-line); text-align:left;
  vertical-align:top;}
.one-compare thead th{color:var(--c-ink); font-weight:400; white-space:nowrap;}
.one-compare tbody th{color:var(--c-ink); font-weight:400;}
.one-compare td{color:var(--c-mid);}
.one-compare tr:last-child th,.one-compare tr:last-child td{border-bottom:0;}
@media (max-width:700px){
  .tvid{max-width:none;}
  .one-compare table{min-width:620px;}
}
/* the live /process/ step cards' phase label and key points, kept on the
   prototype's numbered list */
.num-row-step{margin:0 0 4px;}
.num-row-keys{margin-top:14px;}
.num-row-keys .art-tool{padding:6px 12px; font-size:13px;}

/* /search/: v2-search.js writes the live result cards into the prototype's
   page, so those cards are dressed here as the prototype's own cards (the
   v2-pages.css versions are built for the old light search page) */
.one-search-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,28px);}
.one-search-grid .search-result-card{display:flex; flex-direction:column; gap:14px; padding:0; border:0;
  border-radius:0; background:none; color:var(--c-ink); text-decoration:none;}
.one-search-grid .search-result-card__media{overflow:hidden; aspect-ratio:16/9; border-radius:16px;
  background:var(--card-bg);}
.one-search-grid .search-result-card__media img{display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.one-search-grid .search-result-card__body{display:grid; gap:8px;}
.one-search-grid .search-result-card__meta{margin:0; color:var(--c-mid); font-size:13px; line-height:1.3;
  letter-spacing:.06em; text-transform:uppercase;}
.one-search-grid .search-result-card h2{margin:0; color:var(--c-ink); font-size:clamp(19px,1.4vw,23px);
  font-weight:400; line-height:1.25; letter-spacing:-0.02em; text-wrap:balance;}
.one-search-grid .search-result-card p:not(.search-result-card__meta){margin:0; color:var(--c-mid);
  font-size:15px; line-height:1.55; text-wrap:pretty;}
.one-search-grid .search-empty{grid-column:1 / -1; color:var(--c-mid);}
.one-search-grid .search-empty h2{margin:0 0 8px; color:var(--c-ink); font-size:clamp(22px,1.8vw,28px);
  font-weight:400;}
.one-search-pages{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:clamp(32px,4vw,56px);}
.one-search-pages a,.one-search-pages span{display:grid; place-items:center; min-width:40px; height:40px;
  padding:0 12px; border:1px solid var(--c-line); border-radius:999px; color:var(--c-mid); font-size:15px;
  text-decoration:none;}
.one-search-pages a:hover{border-color:var(--c-ink); color:var(--c-ink);}
.one-search-pages [aria-current="page"]{border-color:var(--c-ink); background:var(--c-ink);
  color:var(--c-paper, #fff);}
.page-section[data-ground="black"] .one-search-pages [aria-current="page"]{background:var(--paper); color:#15120f;}
@media (hover:hover) and (pointer:fine){
  .one-search-grid .search-result-card:hover .search-result-card__media img{transform:scale(1.04);}
  .one-search-grid .search-result-card:hover h2{text-decoration:underline 1px; text-underline-offset:6px;}
}
@media (max-width:1100px){ .one-search-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:700px){ .one-search-grid{grid-template-columns:minmax(0,1fr);} }