/* Keystone Property Staging: BASE styles shared by every page.
   Owns: tokens, fonts, reset, type treatments, the Empty/Staged state (photo pairs, wash, tags), the plan
   drawing layer, .ph slots, top bar, buttons, section heads, team grid and the footer ending.
   Page-specific styles live in home.css (home) and pages.css (services/work/case study/about/quote). */

/* ---------- fonts (self-hosted, /fonts/) ---------- */
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito-sans.woff2) format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito-sans-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter.woff2) format("woff2"); }
/* metric-matched local fallbacks: text renders at once in these and barely moves when the web font swaps in. */
@font-face { font-family: "Nunito Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"); size-adjust: 100%; ascent-override: 101.1%; descent-override: 35.3%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"); size-adjust: 107.5%; ascent-override: 90.1%; descent-override: 22.4%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  --plaster: #efece6;       /* page background: bare wall */
  --paper: #f8f6f1;         /* raised surface, inputs, tags */
  --ink: #161513;           /* text, rules, buttons */
  --mute: #66625b;          /* secondary text on plaster/paper (5.2:1 on plaster) */
  --body2: #45423c;         /* softer body copy */
  --line: #d3cec4;          /* hairlines */
  --dark: #161513;          /* the ending */
  --fg-dark: #f3f1ec;       /* text on dark */
  --mute-dark: #a7a299;     /* secondary text on dark (7.2:1) */
  --line-dark: #37342f;
  /* painter's-tape blue: plan marks, inventory tags and the active side of the switch. Nothing else.
     White text on it is 5.8:1. On dark surfaces use --tape-lit (7.9:1 on --dark). */
  --tape: #2f5bd7;
  --tape-lit: #8fa8ff;
  --bad: #a3261b;
  --display: "Nunito Sans", "Nunito Sans Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font: "Inter", "Inter Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --pad: clamp(20px, 4vw, 56px); --max: 1640px; --nav: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --stw: 850;               /* statement weight; 200 in the Empty state */
}
/* reveal edge of a staged photo over its empty twin, in % across the photo (130% = fully staged) */
@property --a { syntax: "<percentage>"; inherits: true; initial-value: 130%; }
@property --a1 { syntax: "<percentage>"; inherits: true; initial-value: 130%; }
@property --a2 { syntax: "<percentage>"; inherits: true; initial-value: 130%; }
[data-state="empty"] { --stw: 200; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--nav) + 16px); }
html.lerp { scroll-behavior: auto; } /* JS wheel-lerp is active (fine pointers only) */
body { margin: 0; font-family: var(--font); font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--ink); background: var(--plaster); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; border-radius: 0; }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }
[data-theme="dark"] :focus-visible { outline-color: var(--tape-lit); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; }
.skip:focus { top: 12px; }
.wrap, .nav-in { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- type: three treatments ----------
   .st   statement. Heavy and tight; the <em> line is thin italic. In the Empty state the whole statement is thin.
   h2    section title. Modest, 600.
   .lbl  plan label. Inter 500, tabular figures, small. */
h1, h2, h3 { font-family: var(--display); }
.st { font-family: var(--display); font-weight: var(--stw); letter-spacing: -.045em; line-height: .94; text-wrap: balance; transition: font-weight .9s var(--ease); }
.st span, .st em { display: block; }
.st em { font-weight: 200; font-style: italic; letter-spacing: -.035em; }
h1.st { font-size: clamp(44px, 8.6vw, 136px); }
h2.st { font-size: clamp(40px, 7.4vw, 116px); }
h2 { font-weight: 600; font-size: clamp(21px, 1.9vw, 28px); letter-spacing: -.02em; line-height: 1.15; }
h3 { font-weight: 700; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; letter-spacing: -.015em; }
.lbl { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--mute); }
.rg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; max-width: 52ch; color: var(--body2); }
.small { font-size: 14px; color: var(--mute); }
[data-theme="dark"] { background: var(--dark); color: var(--fg-dark); }
[data-theme="dark"] .small, [data-theme="dark"] .lbl { color: var(--mute-dark); }

/* inline arrow icon (build.mjs: arrow()). Sized in em so it follows text. */
.arr { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; vertical-align: -.12em; transition: transform .3s var(--ease); }
.arr.ne { transform: rotate(-45deg); }
.arr.back { transform: scaleX(-1); margin: 0 .35em 0 0; }
.link { text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; font-weight: 500; white-space: nowrap; }
.link .arr:not(.back) { margin-left: .35em; }
.link:hover .arr:not(.back) { transform: translateX(4px); }
.link:hover .arr.back { transform: scaleX(-1) translateX(4px); }

/* ---------- section scaffold: one grid, one padding ---------- */
.sec { padding: clamp(64px, 10vh, 120px) 0; }
.sec-head { display: grid; grid-template-columns: 4fr 6fr auto; gap: 12px 32px; align-items: baseline; border-top: 1.5px solid var(--ink); padding-top: 16px; margin-bottom: clamp(32px, 5vh, 56px); }
.sec-head p { color: var(--body2); max-width: 54ch; }
.sec-head .link { justify-self: end; }
[data-theme="dark"] .sec-head { border-color: var(--fg-dark); }

/* ---------- plan drawing layer ---------- */
.plan, .amap, .picto, .foot, .marks { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; overflow: visible; }
.plan .wall, .amap .wall { stroke-width: 2.5; }
.plan .thin, .amap .thin { stroke-width: .8; }
.tp { stroke: var(--tape); }
[data-theme="dark"] .tp { stroke: var(--tape-lit); }
.plan text, .amap text { fill: currentColor; stroke: none; font: 500 12px var(--font); font-variant-numeric: tabular-nums; }
.amap rect.tp { fill: var(--tape-lit); }
.amap .lake { font-style: italic; opacity: .6; }
.picto { width: 64px; height: 64px; }
/* lines draw on when the SVG scrolls into view (base.js adds .in). Every shape has pathLength="1".
   Shapes are matched by tag: Chrome does not restyle on a class change through an [pathLength] selector. */
.js .draw :is(path, rect, circle, ellipse, line, polyline, polygon) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .draw.in :is(path, rect, circle, ellipse, line, polyline, polygon) { stroke-dashoffset: 0; animation: draw 1.5s var(--ease-out) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } }
.js .draw text { opacity: 0; transition: opacity .6s .7s; }
.js .draw.in text { opacity: 1; }

/* ---------- image slots ---------- */
.ph { position: relative; overflow: hidden; background: var(--line); aspect-ratio: 4 / 3; }
.ph::after { content: attr(data-label); position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: var(--mute); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: 1; }
.ph:has(img)::after { display: none; }
.ph.full { position: absolute; inset: 0; aspect-ratio: auto; }
/* pair: the empty room sits under the staged one; the staged photo is masked by a feathered edge at --a */
.ph.pair { --a: 130%; transition: --a 1.4s var(--ease); }
.ph.pair .a img { z-index: 2; -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--a) - 22%), transparent var(--a)); mask-image: linear-gradient(100deg, #000 calc(var(--a) - 22%), transparent var(--a)); }
[data-state="empty"] .ph.pair, [data-state="staged"] .ph.pair.peeking { --a: 0%; }
[data-state="empty"] .ph.pair.peeking { --a: 130%; }
/* wash: a room photo with no empty twin goes pale and colourless in the Empty state */
.ph.wash img { transition: filter 1.1s var(--ease), opacity 1.1s var(--ease); }
[data-state="empty"] .ph.wash { background: var(--paper) !important; outline: 1px solid var(--line); outline-offset: -1px; }
[data-state="empty"] .ph.wash img { filter: grayscale(1) contrast(.7) brightness(1.15); opacity: .42; }
/* press-and-hold compare */
.peek { position: absolute; z-index: 4; left: 12px; bottom: 12px; min-height: 40px; padding: 0 14px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.peek::after { content: attr(data-before); }
[data-state="empty"] .peek::after { content: attr(data-after); }
.peek:active, .peeking .peek { background: var(--ink); color: var(--paper); }
html:not(.js) .peek { display: none; }
/* overlay box matching the photo itself (not its cropped frame); base.js sizes it. Holds tape marks and tags. */
.fit { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.marks { width: 100%; height: 100%; stroke: var(--tape); stroke-width: 5; }
/* inventory tags */
.tags { transition: opacity .5s .9s, visibility 0s .9s; }
[data-state="empty"] .tags, .peeking .tags, html:not(.js) .tags { opacity: 0; visibility: hidden; transition-delay: 0s; }
.tg { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: auto; display: grid; place-items: center; }
.tg i { width: 13px; height: 13px; background: var(--tape); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(22, 21, 19, .25); transition: transform .25s var(--ease); }
.tg span { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); background: var(--paper); color: var(--ink); font-size: 12.5px; line-height: 1.3; font-weight: 400; padding: 7px 10px; white-space: nowrap; text-align: left; border-left: 3px solid var(--tape); opacity: 0; visibility: hidden; transition: opacity .2s; font-variant-numeric: tabular-nums; }
.tg.r span { left: auto; right: 34px; border-left: 0; border-right: 3px solid var(--tape); }
.tg b { font-weight: 600; margin-right: 6px; }
.tg:hover, .tg:focus-visible, .tg.on { z-index: 2; }
.tg:hover i, .tg:focus-visible i, .tg.on i { transform: scale(1.35); }
.tg:hover span, .tg:focus-visible span, .tg.on span { opacity: 1; visibility: visible; }
/* text that belongs to one state */
[data-state="empty"] .when-staged, [data-state="staged"] .when-empty, html:not([data-state]) .when-empty { display: none; }

/* ---------- top bar ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--nav); background: var(--plaster); border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; transition: transform .35s var(--ease); }
.nav.hide { transform: translateY(-101%); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; line-height: 0; }
.wordmark { height: 22px; width: auto; overflow: visible; }
.wordmark .mk { fill: currentColor; }
.wordmark text { font-family: var(--font); font-weight: 600; font-size: 14.5px; fill: currentColor; }
.links { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.links a { text-decoration: none; padding: 8px 10px; }
.links a:not(.cta):hover, .links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.links .m { display: none; }
.nav-end { display: flex; align-items: center; gap: 22px; }
.tel { text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.lang { text-decoration: none; font-size: 13px; letter-spacing: .04em; border-bottom: 1.5px solid currentColor; }
.cta { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 14px; font-weight: 600; padding: 11px 16px; white-space: nowrap; }
.cta:hover { background: #2e2b27; }
.cta:hover .arr { transform: translateX(3px); }
/* Empty | Staged switch */
.sw { display: none; border: 1.5px solid var(--ink); }
.js .sw { display: inline-flex; }
.sw button { padding: 7px 12px; font-size: 13px; font-weight: 500; line-height: 1.2; min-height: 32px; transition: background .25s, color .25s; }
.sw button[aria-pressed="true"] { background: var(--tape); color: #fff; }
.burger { display: none; }

/* ---------- buttons: ink rectangle, plain arrow ---------- */
.pill { display: inline-flex; align-items: center; gap: 14px; padding: 15px 20px; background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s, color .2s; }
.pill:hover { background: #2e2b27; }
.pill:hover .arr { transform: translateX(4px); }
.pill.light { background: var(--fg-dark); color: var(--ink); border-color: var(--fg-dark); }
.pill.light:hover { background: #fff; }
.pill.outline { background: transparent; color: var(--ink); }
.pill.outline:hover { background: var(--ink); color: var(--paper); }
.pill.sm { font-size: 14px; padding: 10px 14px; }

/* ---------- reveal (base.js adds .in; gated on .js so no-JS shows everything) ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }

/* marker list: a small tape square per line */
.ticks li { position: relative; padding: 7px 0 7px 22px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .82em; width: 8px; height: 8px; border: 1.5px solid var(--tape); }

/* ---------- team: one even row, names on one baseline ---------- */
.team { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.team li { display: flex; flex-direction: column; }
.team .ph { aspect-ratio: 4 / 5; margin-bottom: 12px; }
.team b { font-weight: 600; font-size: 15px; }
.team span { font-size: 14px; color: var(--mute); }

/* ---------- the ending (footer on every page) ---------- */
.footer { padding: clamp(72px, 12vh, 140px) 0 28px; font-size: 15px; }
.end-row { display: flex; align-items: center; gap: 18px 32px; flex-wrap: wrap; margin-top: clamp(32px, 5vh, 56px); }
.end-call { font-size: 18px; }
.end-call .tel { font-weight: 600; border-bottom: 1.5px solid currentColor; }
.end-sub { color: var(--mute-dark); margin-left: auto; }
.area { display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: center; margin-top: clamp(64px, 10vh, 120px); padding-top: 40px; padding-bottom: 40px; background: linear-gradient(var(--line-dark), var(--line-dark)) 50% 0 / calc(100% - 2 * var(--pad)) 1px no-repeat; }
.amap { width: 100%; max-width: 620px; height: auto; color: var(--mute-dark); }
.amap text { fill: var(--fg-dark); font-size: 11px; }
.area h2, .fgrid h2 { font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--mute-dark); margin-bottom: 16px; }
.area-list { columns: 2; column-gap: 32px; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; }
.area-copy p { color: var(--mute-dark); margin-top: 20px; max-width: 36ch; }
.fgrid { display: grid; grid-template-columns: 6fr 2fr 3fr; gap: 40px; padding-top: 40px; background: linear-gradient(var(--line-dark), var(--line-dark)) 50% 0 / calc(100% - 2 * var(--pad)) 1px no-repeat; }
.fgrid > div > a { display: block; text-decoration: none; padding: 3px 0; }
.fgrid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fgrid p { color: #cbc7bf; max-width: 32ch; }
.fgrid .logo { display: inline-flex; margin-bottom: 14px; }
.fgrid .wordmark { height: 26px; }
.fbar { display: flex; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; margin-top: 56px; padding-top: 20px; background: linear-gradient(var(--line-dark), var(--line-dark)) 50% 0 / calc(100% - 2 * var(--pad)) 1px no-repeat; font-size: 13px; color: var(--mute-dark); }

/* ---------- page transitions (View Transitions API; browsers without support just navigate) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .nav-end .tel { display: none; } .nav-in { gap: 20px; } }
@media (max-width: 1000px) {
  .team { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fgrid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --nav: 56px; }
  .nav-in { gap: 10px; }
  .nav-end { display: none; }
  .sw { margin-left: auto; }
  .sw button { min-height: 44px; }
  .burger { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; margin-right: -10px; }
  .burger i { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .3s; }
  .burger[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
  .links { margin: 0; }
  .js .links { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--nav)); overflow-y: auto; background: var(--plaster); flex-direction: column; align-items: flex-start; gap: 0; padding: 28px var(--pad) 40px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .js .links.open { opacity: 1; visibility: visible; }
  .js .links a { font-family: var(--display); font-size: 38px; font-weight: 800; letter-spacing: -.035em; padding: 6px 0; }
  .js .links .m { display: inline-flex; }
  .js .links .tel { font-family: var(--font); font-size: 18px; font-weight: 500; letter-spacing: 0; margin-top: 28px; min-height: 44px; align-items: center; }
  .js .links .lang { font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: .04em; min-height: 44px; align-items: center; border: 0; text-decoration: underline; text-underline-offset: 5px; }
  .js .links .cta { font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: 0; margin-top: 16px; padding: 16px 22px; }
  html:not(.js) .links a:not(.m) { padding: 8px 6px; }
}
@media (max-width: 800px) {
  body { font-size: 16px; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .link { justify-self: start; }
  .area { grid-template-columns: 1fr; gap: 28px; }
  .end-sub { margin-left: 0; width: 100%; }
  .tg span { white-space: normal; width: max-content; max-width: 170px; }
  .amap text { font-size: 15px; }
}
@media (max-width: 600px) {
  .team { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .js .rv, .st, .ph.pair, .ph.wash img, .nav, .tags, .arr, .js .draw text { transition: none; }
  .js .draw.in :is(path, rect, circle, ellipse, line, polyline, polygon) { animation: none; }
  .js .rv { opacity: 1; transform: none; }
  .js .draw :is(path, rect, circle, ellipse, line, polyline, polygon) { stroke-dashoffset: 0; }
  .js .draw text { opacity: 1; }
}