/* =========================================================================
   KHASHAB / inner pages: collections, portfolio, villas, studio, consultation
   ========================================================================= */

/* ---- 404 ------------------------------------------------------------------- */
.notfound { min-height: 88vh; display: grid; align-items: center; padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-7); }
.notfound .eyebrow { color: var(--walnut); margin-bottom: var(--s-3); }
.notfound .h1 { color: var(--oxblood); max-width: 12ch; margin-bottom: var(--s-4); }
.notfound .h1 em { color: var(--walnut); }
.notfound .lead { color: var(--ink-2); margin-bottom: var(--s-5); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; color: var(--oxblood); }

/* ---- page header over a photograph ------------------------------------------ */
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 78vh; height: 78svh; min-height: 520px;
  display: flex; align-items: flex-end;
  background: var(--night); color: var(--cream);
}
.phero__media { position: absolute; inset: -6% 0; z-index: -2; }
.phero__media img, .phero__media .ph { width: 100%; height: 100%; object-fit: cover; }
.phero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 14, 10, .55) 0%, rgba(20, 14, 10, 0) 24%),
    linear-gradient(0deg, rgba(20, 14, 10, .85) 0%, rgba(20, 14, 10, .35) 40%, rgba(20, 14, 10, 0) 70%);
}
.phero__content { padding-bottom: clamp(2.5rem, 7vh, 5rem); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--s-4); font-size: .78rem; letter-spacing: .06em; color: rgba(255, 245, 225, .7); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.crumbs a:hover { color: var(--cream); }
.phero__eyebrow { color: var(--walnut-soft); margin-bottom: var(--s-2); }
.phero__title { font: 400 var(--t-hero)/.92 var(--f-display); letter-spacing: -.02em; max-width: 14ch; }
.phero__title em { font-style: italic; color: var(--walnut-soft); }
.phero__line { margin-top: var(--s-3); font: italic 400 var(--t-3)/1.2 var(--f-display); color: rgba(255, 245, 225, .86); }

/* ---- intro: the lead on the grid, facts in the margin ------------------------ */
.pintro { padding: var(--s-7) 0; }
.pintro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
.pintro__lead { grid-column: 1 / span 8; font: 400 var(--t-2)/1.15 var(--f-display); color: var(--oxblood); letter-spacing: -.01em; }
.pintro__lead em { color: var(--walnut); }
.pintro__aside { grid-column: 10 / span 3; padding-top: .6rem; }
.pintro__aside .eyebrow { color: var(--walnut); margin-bottom: var(--s-2); }
.pintro__aside .villa__items { flex-direction: column; gap: .6rem; }
.pintro__sub { margin-top: var(--s-4); }
.pfacts { margin: 0; }
.pfacts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-2); padding: .7rem 0; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.pfacts div:last-child { border-bottom: 1px solid var(--rule); }
.pfacts dt { font: 500 var(--t-label)/1.8 var(--f-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--walnut); }
.pfacts dd { margin: 0; color: var(--ink); }
.pfacts a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 899.98px) {
  .pintro__lead, .pintro__aside { grid-column: 1 / -1; }
  .pintro__aside { margin-top: var(--s-5); }
}

/* ---- what we make ------------------------------------------------------------ */
.pmake { padding: 0 0 var(--s-7); }
.pmake__title { color: var(--walnut); margin-bottom: var(--s-3); }
.pmake__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
.pmake__list li { padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.pmake__list .h2 { font-size: var(--t-3); color: var(--oxblood); margin-bottom: .5rem; }
.pmake__list p { color: var(--ink-2); max-width: 36em; }
@media (max-width: 699.98px) { .pmake__list { grid-template-columns: 1fr; } }

/* ---- the catalog's options, drawn ------------------------------------------- */
.popts { background: var(--paper-2); padding: var(--s-7) 0; }
.popts__title { color: var(--walnut); margin-bottom: var(--s-5); }
.opt { display: grid; gap: var(--s-5) var(--s-4); margin: 0; }
.opt--3, .opt--closets, .opt--list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt__draw { width: 100%; height: auto; margin-bottom: var(--s-3); overflow: visible; }
.opt__draw rect, .opt__draw path { fill: none; stroke: var(--oxblood); stroke-width: 1.4; }
.opt__draw .opt__bed { fill: var(--paper); stroke: var(--walnut); }
.opt__draw .opt__floor { stroke: var(--walnut); stroke-width: 1; }
.opt__draw .opt__dots circle { fill: var(--oxblood); }
.opt__draw text { font: 500 11px var(--f-text); letter-spacing: .12em; fill: var(--walnut); text-anchor: middle; }
.opt__num { font: 400 var(--t-3)/1 var(--f-display); color: var(--walnut); margin-bottom: .4rem; }
.opt .h3 { color: var(--oxblood); margin-bottom: .4rem; }
.opt p { color: var(--ink-2); font-size: var(--t-small); }
.opt--closets figure { display: grid; grid-template-rows: 13rem auto; }
.opt--closets .opt__draw { height: 100%; width: 100%; margin-bottom: var(--s-3); }
.opt--doors { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opt__door { position: relative; aspect-ratio: 9 / 20; overflow: hidden; background: var(--espresso); box-shadow: 0 1px 0 var(--rule), 0 24px 40px -24px rgba(45, 39, 34, .5); }
.opt__door img, .opt__door .ph { width: 100%; height: 100%; object-fit: cover; }
.opt__handle { position: absolute; right: 14%; top: 42%; width: 4px; height: 22%; border-radius: 2px; background: linear-gradient(90deg, #2A1D15, #6B5140 60%, #2A1D15); }
.opt__name { margin-top: var(--s-2); font: 500 var(--t-small)/1.4 var(--f-text); color: var(--ink); }
.opt--list li { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.opt--table { grid-template-columns: 1fr; gap: 0; max-width: 52rem; }
.opt--table div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-3); padding: 1rem 0; border-top: 1px solid var(--rule); }
.opt--table dt { font: 400 var(--t-3)/1.2 var(--f-display); color: var(--oxblood); }
.opt--table dd { margin: 0; align-self: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 899.98px) {
  .opt--3, .opt--closets, .opt--list { grid-template-columns: 1fr; }
  .opt--doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opt--table div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---- detail photo + materials ---------------------------------------------------- */
.pdetail { padding: var(--s-7) 0; }
.pdetail__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
.pdetail__fig { grid-column: 1 / span 6; }
.pdetail__img { overflow: hidden; background: var(--espresso); }
.pdetail__img img, .pdetail__img .ph { width: 100%; height: 100%; object-fit: cover; }
.pdetail__fig figcaption { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-2); max-width: 32em; }
.pdetail__grid .pmats { grid-column: 8 / span 5; }
.pmats__title { color: var(--walnut); margin-bottom: var(--s-3); }
.pmats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.pdetail__grid .pmats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pmats .swatch__img { aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.pmats .swatch__img img, .pmats .swatch__img .ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.pmats .swatch figcaption { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: .82rem; }
.pmats .swatch figcaption b { font-weight: 600; color: var(--ink); }
.pmats .swatch figcaption span { color: var(--ink-2); }
.materials__hw { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem; margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--t-small); color: var(--ink); }
.materials__hw .eyebrow { color: var(--walnut); }
@media (max-width: 899.98px) {
  .pdetail__fig, .pdetail__grid .pmats { grid-column: 1 / -1; }
  .pdetail__grid .pmats { margin-top: var(--s-5); }
  .pmats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- project cards ------------------------------------------------------------ */
.prelated { padding: var(--s-7) 0; border-top: 1px solid var(--rule); }
.prelated__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-2); margin-bottom: var(--s-5); color: var(--oxblood); }
.prelated__head .h2 em { color: var(--walnut); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.pcard { display: block; }
.pcard__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.pcard__img img, .pcard__img .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
.pcard:hover .pcard__img img, .pcard:focus-visible .pcard__img img { transform: scale(1.06); }
.pcard figcaption { display: grid; gap: .35rem; padding-top: var(--s-2); }
.pcard .h3 { color: var(--oxblood); }
.pcard:hover .h3 { font-style: italic; }
.pcard__meta { font: 500 var(--t-label)/1.5 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--walnut); }
@media (max-width: 899.98px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .pgrid { grid-template-columns: 1fr; } }

/* ---- next page link ------------------------------------------------------------- */
.pnext { padding: var(--s-6) 0; }
.pnext a { display: grid; gap: .5rem; padding: var(--s-5) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--oxblood); }
.pnext .eyebrow { color: var(--walnut); }
.pnext__name { font: 400 var(--t-1)/1 var(--f-display); letter-spacing: -.015em; transition: transform var(--d-base) var(--ease-out); }
.pnext__line { color: var(--ink-2); font-size: var(--t-small); }
.pnext a:hover .pnext__name, .pnext a:focus-visible .pnext__name { font-style: italic; transform: translateX(.3em); }

/* ---- the closing invitation ---------------------------------------------------- */
.pband { background: var(--espresso); color: var(--cream); padding: var(--s-7) 0; }
.pband__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: end; }
.pband__inner > div:first-child { grid-column: 1 / span 6; }
.pband .eyebrow { color: var(--walnut-soft); margin-bottom: var(--s-2); }
.pband .h1 em { color: var(--walnut-soft); }
.pband__side { grid-column: 8 / span 5; color: rgba(255, 245, 225, .82); }
.pband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.pband .btn--light { --btn-hover-bg: var(--oxblood); }
.pband .link-u { color: var(--cream); }
@media (max-width: 899.98px) {
  .pband__inner > div:first-child, .pband__side { grid-column: 1 / -1; }
  .pband__side { margin-top: var(--s-4); }
}

/* ---- portfolio -------------------------------------------------------------------- */
.pf { padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-7); }
.pf__head, .colls--page .colls__head { margin-bottom: var(--s-5); }
.pf__head .eyebrow { color: var(--walnut); margin-bottom: var(--s-3); }
.pf__head .h1 { color: var(--oxblood); }
.pf__head .h1 em { color: var(--walnut); }
.pf__head .lead { color: var(--ink-2); margin-top: var(--s-3); }
.pf__filters { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pf__filters fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border: 0; margin: 0; padding: 0; }
.pf__filters legend { float: left; width: 7.5rem; color: var(--walnut); padding: 0; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem;
  border: 1px solid var(--rule); font-size: .82rem; color: var(--ink);
  transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast);
}
.chip:hover span { border-color: var(--walnut); }
.chip input:checked + span { background: var(--oxblood); border-color: var(--oxblood); color: var(--cream); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.pf__count { margin-bottom: var(--s-3); font-size: var(--t-small); color: var(--ink-2); min-height: 1.5em; }
.pgrid__item[hidden] { display: none; }
.pf__empty { padding: var(--s-5) 0; color: var(--ink-2); }
.colls--page { padding-top: calc(var(--header-h) + var(--s-6)); }

/* ---- project gallery ------------------------------------------------------------ */
.pgal { padding: 0 0 var(--s-5); }
.pgal__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.pgal__fig { overflow: hidden; background: var(--paper-2); }
.pgal__fig img, .pgal__fig .ph { width: 100%; height: 100%; object-fit: cover; }
.pgal__fig.is-wide { grid-column: span 8; aspect-ratio: 16 / 10; }
.pgal__fig.is-tall { grid-column: span 4; aspect-ratio: 4 / 5; }
.pgal__grid--1 .pgal__fig.is-wide { grid-column: 1 / -1; }
.pgal__grid--1 .pgal__fig.is-tall { grid-column: 4 / span 6; }
@media (max-width: 699.98px) { .pgal__fig.is-wide, .pgal__fig.is-tall, .pgal__grid--1 .pgal__fig.is-tall { grid-column: 1 / -1; } }

/* ---- villas: all collections + the sequence ------------------------------------------ */
.pall { padding: 0 0 var(--s-7); }
.pall__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-4); }
.pall__list a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); color: var(--oxblood); }
.pall__list span { font: 400 1rem/1 var(--f-display); color: var(--walnut); }
.pall__list b { font: 400 var(--t-3)/1.1 var(--f-display); }
.pall__list a:hover b { font-style: italic; }
.psteps { background: var(--paper-2); padding: var(--s-7) 0; }
.psteps__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
.psteps__title { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-5)); color: var(--oxblood); }
.psteps__title em { color: var(--walnut); }
.psteps__list { grid-column: 7 / span 6; }
.psteps__list li { display: grid; grid-template-columns: 4rem 1fr; gap: var(--s-2); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.psteps__num { font: 400 var(--t-2)/.9 var(--f-display); color: var(--walnut); }
.psteps__list .h3 { color: var(--oxblood); margin-bottom: .4rem; }
.psteps__list p { color: var(--ink-2); }
@media (max-width: 899.98px) {
  .pall__list { grid-template-columns: 1fr 1fr; }
  .psteps__title, .psteps__list { grid-column: 1 / -1; position: static; }
  .psteps__title { margin-bottom: var(--s-4); }
}

/* ---- studio: the chain, vision & mission ---------------------------------------- */
.pchain { padding: 0 0 var(--s-7); }
.pchain__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.pchain__img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--espresso); margin-bottom: var(--s-2); }
.pchain__img img { width: 100%; height: 100%; object-fit: cover; }
.pchain .h3 { color: var(--oxblood); margin-bottom: .4rem; }
.pchain p { color: var(--ink-2); font-size: var(--t-small); }
.pvm { background: var(--paper-2); padding: var(--s-7) 0; }
.pvm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.pvm .eyebrow { color: var(--walnut); margin-bottom: var(--s-2); }
.pvm__text { font: 400 var(--t-3)/1.3 var(--f-display); color: var(--oxblood); }
@media (max-width: 899.98px) {
  .pchain__list { grid-template-columns: 1fr 1fr; }
  .pvm__grid { grid-template-columns: 1fr; }
}

/* ---- consultation -------------------------------------------------------------- */
.pconsult { padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-8); }
.pconsult__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
.pconsult__intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.pconsult__intro .eyebrow { color: var(--walnut); margin-bottom: var(--s-3); }
.pconsult__intro .h1 { color: var(--oxblood); margin-bottom: var(--s-3); }
.pconsult__intro .h1 em { color: var(--walnut); }
.pconsult__intro .lead { color: var(--ink-2); margin-bottom: var(--s-4); }
.pconsult__steps li { display: flex; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--rule); }
.pconsult__steps li:last-child { border-bottom: 1px solid var(--rule); }
.pconsult__steps span { font: 400 1.05rem/1.5 var(--f-display); color: var(--walnut); }
.pconsult__direct { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-2); }
.pconsult__direct .link-u { color: var(--oxblood); }

.pform { grid-column: 7 / span 6; display: grid; gap: var(--s-4); }
.pform__field { display: grid; gap: .5rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.pform label, .pform legend { font-size: .9rem; font-weight: 500; color: var(--ink); padding: 0; }
.pform__opt { font-weight: 400; color: var(--ink-2); font-size: .8rem; margin-left: .4rem; }
.pform input[type="text"], .pform input[type="tel"], .pform select, .pform textarea {
  width: 100%; min-height: 52px; padding: .8rem 0;
  font: 400 1rem/1.4 var(--f-text); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--walnut); border-radius: 0;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.pform textarea { resize: vertical; min-height: 7rem; }
.pform select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--walnut) 50%) right .6rem center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--walnut) 50%) right .2rem center / 6px 6px no-repeat; padding-right: 2rem; cursor: pointer; }
.pform input:focus, .pform select:focus, .pform textarea:focus { outline: none; border-bottom-color: var(--oxblood); box-shadow: 0 1px 0 var(--oxblood); }
.pform input:focus-visible, .pform select:focus-visible, .pform textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.pform__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pform__err { min-height: 0; font-size: .82rem; color: #9A2A14; }
.pform__err:empty { display: none; }
.pform__err:not(:empty)::before { content: "! "; font-weight: 700; }
.has-error input, .has-error select { border-bottom-color: #9A2A14; }
.pform__summary { padding: var(--s-3); border: 1px solid #9A2A14; background: rgba(154, 42, 20, .05); font-size: var(--t-small); }
.pform__summary ul { margin-top: .4rem; list-style: disc; padding-left: 1.2rem; }
.pform__summary a { color: #9A2A14; text-decoration: underline; }
.pform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pform__submit { justify-self: start; }
.pform__note { font-size: .8rem; color: var(--ink-2); margin-top: calc(-1 * var(--s-2)); }
@media (max-width: 899.98px) {
  .pconsult__intro, .pform { grid-column: 1 / -1; position: static; }
  .pform { margin-top: var(--s-6); }
  .pform__submit { width: 100%; }
}

/* =========================================================================
   Collection pages, visual first
   ========================================================================= */
.cintro { padding: var(--s-7) 0 var(--s-5); }
.cintro__lead { font: 400 var(--t-1)/1.02 var(--f-display); letter-spacing: -.015em; color: var(--oxblood); max-width: 16ch; }
.cfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.cfacts li { display: flex; flex-direction: column-reverse; gap: .35rem; padding: var(--s-3) var(--s-2) 0 0; }
.cfacts li + li { padding-left: var(--s-3); border-left: 1px solid var(--rule); }
.cfacts b { font: 400 var(--t-3)/1.1 var(--f-display); color: var(--oxblood); font-weight: 400; }
.cfacts span { font: 500 var(--t-label)/1.4 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--walnut); }
@media (max-width: 699.98px) {
  .cfacts { grid-template-columns: 1fr 1fr; }
  .cfacts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .cfacts li:nth-child(n+3) { border-top: 1px solid var(--rule); margin-top: var(--s-3); }
}

/* what we make: architectural elevations that draw themselves in */
.cmake { padding: var(--s-5) 0 var(--s-7); }
.cmake__title { color: var(--walnut); margin-bottom: var(--s-4); }
.cmake__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cmake__grid--3 { --cols: 3; }
.cmake__grid--5 { --cols: 5; }
.cmake__item { display: grid; align-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-3) var(--s-3); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); transition: background-color var(--d-base) var(--ease-out); }
.cmake__item:hover { background: var(--paper-2); }
.cmake__name { font: 400 var(--t-3)/1.1 var(--f-display); color: var(--oxblood); }
.dw { width: 100%; height: auto; overflow: visible; }
.dw .dw__o { fill: none; stroke: var(--oxblood); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.dw .dw__d { fill: none; stroke: var(--walnut); stroke-width: 1; stroke-linecap: round; transition: opacity .9s var(--ease-out) .5s; }
.dw .dw__floor { fill: none; stroke: var(--walnut); stroke-width: 1; opacity: .55; }
.dw .dw__dots circle { fill: var(--oxblood); }
.dw .dw__glow circle { fill: var(--walnut-soft); stroke: var(--oxblood); stroke-width: .8; }
/* drawn in once the item scrolls into view (pages.js adds .is-drawn) */
.has-motion .cmake__item .dw__o { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out); }
.has-motion .cmake__item .dw__d, .has-motion .cmake__item .dw__dots, .has-motion .cmake__item .dw__glow { opacity: 0; transition: opacity .9s var(--ease-out) .7s; }
.has-motion .cmake__item.is-drawn .dw__o { stroke-dashoffset: 0; }
.has-motion .cmake__item.is-drawn .dw__d, .has-motion .cmake__item.is-drawn .dw__dots, .has-motion .cmake__item.is-drawn .dw__glow { opacity: 1; }
@media (max-width: 1099.98px) { .cmake__grid--4, .cmake__grid--5 { --cols: 3; } }
@media (max-width: 699.98px) { .cmake__grid { --cols: 2 !important; } .cmake__item { padding: var(--s-3) var(--s-2) var(--s-2); } }

/* a full-width photograph between the drawings and the options */
.cband { position: relative; margin: 0; height: 82vh; height: 82svh; min-height: 460px; overflow: hidden; background: var(--night); }
.cband__img { position: absolute; inset: -8% 0; }
.cband__img img, .cband__img .ph { width: 100%; height: 100%; object-fit: cover; }
.cband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 14, 10, .6), transparent 40%); pointer-events: none; }
.cband__cap { position: absolute; left: 0; right: 0; bottom: var(--s-4); z-index: 1; }
.cband__cap span { font: italic 400 var(--t-3)/1.2 var(--f-display); color: var(--cream); }
.popts .opt p { font-size: .82rem; letter-spacing: .02em; }

/* =========================================================================
   Studio & factory: the brand story
   ========================================================================= */
.sstory { padding: var(--s-7) 0; }
.sstory__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: center; }
.sstory__num { grid-column: 1 / span 5; font: 400 clamp(8rem, 4rem + 16vw, 19rem)/.8 var(--f-display); letter-spacing: -.04em; color: var(--oxblood); }
.sstory__text { grid-column: 7 / span 6; }
.sstory__text .eyebrow { color: var(--walnut); margin-bottom: var(--s-3); }
.sstory__lead { font: 400 var(--t-2)/1.12 var(--f-display); color: var(--oxblood); margin-bottom: var(--s-3); }
.sstory__lead em { color: var(--walnut); }
.sstory__text > p:last-child { color: var(--ink-2); max-width: 34em; }
.swhy, .schain { padding: var(--s-7) 0; }
.swhy { background: var(--paper-2); }
.swhy__head { margin-bottom: var(--s-6); }
.swhy__head .eyebrow { color: var(--walnut); margin-bottom: var(--s-3); }
.swhy__head .h1 { color: var(--oxblood); max-width: 14ch; }
.swhy__head .h1 em { color: var(--walnut); }
.swhy__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.swhy__grid li { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.swhy__grid li:not(:nth-child(3n + 1)) { padding-left: var(--s-4); border-left: 1px solid var(--rule); }
.swhy__icon { width: 44px; height: 44px; margin-bottom: var(--s-3); fill: none; stroke: var(--oxblood); stroke-width: 1.3; stroke-linejoin: round; }
.swhy__grid .h3 { color: var(--oxblood); margin-bottom: .4rem; }
.swhy__grid p { color: var(--ink-2); font-size: var(--t-small); }
.sdeliver { padding: 0 0 var(--s-7); }
.sdeliver__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); }
.sdeliver__grid .eyebrow { grid-column: 1 / span 3; color: var(--walnut); padding-top: 1rem; }
.sdeliver__list { grid-column: 4 / span 9; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
.sdeliver__list li { padding: .9rem 0; border-top: 1px solid var(--rule); font: 400 var(--t-3)/1.2 var(--f-display); color: var(--oxblood); }
.svision { background: var(--espresso); color: var(--cream); padding: var(--s-7) 0; }
.svision__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: end; }
.svision__grid > div { grid-column: 1 / span 7; }
.svision .eyebrow { color: var(--walnut-soft); margin-bottom: var(--s-3); }
.svision .h2 em { color: var(--walnut-soft); }
.svision__grid > p { grid-column: 9 / span 4; color: rgba(255, 245, 225, .8); }
.ssign { padding: var(--s-8) 0; text-align: center; }
.ssign .eyebrow { color: var(--walnut); margin-bottom: var(--s-4); }
.ssign__lines { font: 400 var(--t-1)/1.05 var(--f-display); color: var(--oxblood); letter-spacing: -.015em; }
.ssign__lines em { color: var(--walnut); }
.ssign__foot { margin-top: var(--s-4); color: var(--ink-2); }
@media (max-width: 899.98px) {
  .sstory__num, .sstory__text, .sdeliver__grid .eyebrow, .sdeliver__list, .svision__grid > div, .svision__grid > p { grid-column: 1 / -1; }
  .sstory__num { margin-bottom: var(--s-4); }
  .svision__grid > p { margin-top: var(--s-3); }
  .swhy__grid { grid-template-columns: 1fr 1fr; }
  .swhy__grid li, .swhy__grid li:not(:nth-child(3n + 1)) { padding: var(--s-3) var(--s-2) var(--s-3) 0; border-left: 0; }
  .swhy__grid li:nth-child(even) { padding-left: var(--s-3); border-left: 1px solid var(--rule); }
}
@media (max-width: 559.98px) {
  .swhy__grid, .sdeliver__list { grid-template-columns: 1fr; }
  .swhy__grid li:nth-child(even) { padding-left: 0; border-left: 0; }
}