/* Ambiyence Studio & Build: the website. Headings in Bodoni Moda, in sentence case (v1.1.0; the logo keeps its own
   Cinzel); reading text in Hanken Grotesk. Slate, paper and bronze. */
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda-normal-400-600-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda-italic-400-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* Times sized to Bodoni's width and line box, so nothing moves when the web font arrives */
@font-face{font-family:"Bodoni fb";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("Tinos");size-adjust:114.3%;ascent-override:98.43%;descent-override:35%;line-gap-override:0%}
@font-face{font-family:"Bodoni fb";font-style:italic;src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic"),local("Tinos Italic");size-adjust:107.35%;ascent-override:104.8%;descent-override:37.26%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-normal-400-600-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken fb";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:101.04%;ascent-override:98.97%;descent-override:29.69%;line-gap-override:0%}
@font-face{font-family:"Hanken fb";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:94.53%;ascent-override:105.79%;descent-override:31.74%;line-gap-override:0%}

:root{
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h27.5M23 1l5.5 5-5.5 5'/%3E%3C/svg%3E");
  --ink:#16232A;--ink-2:#1F3039;--paper:#F3EEE6;--card:#F8F4EE;--paper-2:#E8E0D3;--line:#D8CDBC;
  --text:#1B282F;--muted:#3A464C;--bronze-d:#7F5527;--bronze-l:#CDA46E;--on-ink:#EDE6DA;--on-ink-2:#CBD2D4;
  --brand:"Bodoni Moda","Bodoni fb",Georgia,serif;
  --sans:"Hanken Grotesk","Hanken fb",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:20px;--sec:clamp(80px,11vw,152px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* reading text a touch heavier and larger than a default 400 at 16px, which looked faint on laptops
   (Ashish, 4 Nov: "i want the font more kinda visible"; v1.3.0) */
body{margin:0;background:var(--paper);color:var(--text);font:450 1.0625rem/1.65 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  font-optical-sizing:none}  /* Bodoni Moda has an optical-size axis (6-96). Left on auto, a 76px heading gets the display cut, whose
                                hairlines vanish on laptops and over photos (Ashish, 4 Nov: "lines are as if they are cut off").
                                "none" keeps the text cut (opsz 11): the same letters with solid thin strokes. */
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--brand);font-weight:var(--b-wt);line-height:1.12;margin:0;letter-spacing:-.005em;text-wrap:balance}
/* With the text cut (body, above) the hairlines hold by themselves, so the old fine outline is gone; dark ink on
   paper still gets a touch more weight than light text on slate */
:root,.calc{--b-wt:520}
.hero,.phero,.close,.cost,.band,.foot,.process{--b-wt:480}
h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08}
h3{font-size:1.35rem;font-weight:var(--b-wt);line-height:1.25}
h1 i,h2 i{font-style:italic;color:inherit}
p{margin:0 0 1em}
ol,ul{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
@media (min-width:760px){:root{--gut:40px}body{font-size:1.125rem}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:30}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--bronze-d);outline-offset:3px}
.small{font-size:.92rem;color:var(--muted)}

/* labels */
.eyebrow,.label,.no,.wk,.tb dt,.kv dt,.slot-l{font:600 .82rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.eyebrow{color:var(--bronze-d);margin-bottom:22px;font-size:.8125rem;letter-spacing:.2em}
.eyebrow::before{content:"";display:inline-block;width:32px;height:1px;margin-right:14px;vertical-align:.3em;background:currentColor;opacity:.7}
.sec-head{max-width:680px;margin-bottom:clamp(44px,6vw,72px)}
.sec-head h2{margin-bottom:22px}
.sec-head p:not(.eyebrow){color:var(--muted);font-size:1.06em;max-width:36em}

/* wordmark (from the card) */
.wm{display:block;font:600 1.5rem/1 var(--brand);letter-spacing:.03em}
.brand .logo{display:block;height:42px;width:auto;object-fit:contain;object-position:left center}
@media (min-width:480px){.brand .logo{height:52px}}
.foot .logo{display:block;width:100%;max-width:280px;height:auto}
.wm-sub{display:block;margin-top:6px;font:600 .64rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-d)}

/* buttons: words only, in small tracked capitals, like the labels (v1.6.0; they were sentence case with an icon).
   The right padding is shorter by the tracking after the last letter, so the word sits in the middle. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 calc(30px - .18em) 0 30px;border:1px solid transparent;border-radius:0;
  font:600 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn .ic{flex:none}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-line{border-color:rgba(205,164,110,.55);color:var(--on-ink)}
.btn-line:hover{border-color:var(--bronze-l);color:#fff}
.btn-line-dark{border-color:var(--ink);color:var(--ink)}
.btn-line-dark:hover{color:var(--paper)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-sm{min-height:40px;padding:0 calc(18px - .18em) 0 18px;font-size:.6875rem}

/* gaps still to confirm: preview only, build.py --launch refuses while any is left */
.pv{display:flex;align-items:center;height:38px;background:var(--paper-2);border-bottom:1px dashed var(--bronze-d);font-size:.86rem;color:var(--text)}
.pv .wrap{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv span{color:var(--muted)}
@media (max-width:639px){.pv span{display:none}}  /* one line, a fixed height: the hero is sized from it */
.todo{display:inline;padding:.05em .45em;border:1px dashed rgba(127,85,39,.7);border-radius:2px;background:rgba(205,164,110,.14);
  color:var(--bronze-d);font:500 .8em/1.5 var(--sans);letter-spacing:.01em;font-style:normal;text-transform:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:help}
.todo-block{display:block;padding:18px 20px;font-size:.95rem;line-height:1.5}
.todo-block small{display:block;margin-top:4px;font-size:.82rem;color:var(--muted)}
.hero .todo,.foot .todo{color:var(--bronze-l);border-color:rgba(205,164,110,.55);background:rgba(205,164,110,.08)}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{text-decoration:none;color:var(--ink);margin-right:auto}
.nav{display:none;gap:34px}
.nav a{font:600 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--text);padding:8px 0;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--bronze-d)}
/* phones: the call button is a fine handset in a thin circle; the menu is two hairlines and the word (v1.6.0) */
.top-call span{display:none}
.top-call{width:44px;min-height:44px;padding:0;border-color:rgba(22,35,42,.4);border-radius:50%;color:var(--ink)}
.top-call .ic{width:19px;height:19px}
.top-call:hover{color:var(--paper);border-color:var(--ink)}
.menu-btn{display:none;gap:12px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:600 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.menu-btn::before{content:"";width:24px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:height .3s ease}
.top.open .menu-btn::before{height:1px;border-bottom:0}
.js .menu-btn{display:inline-flex;align-items:center}
.nav a[aria-current]{border-color:var(--bronze-d);color:var(--bronze-d)}
/* the Services menu: a panel on desktop, a plain list inside the phone menu */
.dd-btn{display:none;align-items:center;gap:9px;min-height:68px;padding:0;border:0;background:none;font:600 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text);cursor:pointer}
.dd-btn::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.dd-panel .label{color:var(--bronze-d)}
@media (max-width:899px){
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:4px var(--gut) 12px;max-height:calc(100vh - 110px);overflow-y:auto;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -24px rgba(22,35,42,.5)}
  .top.open .nav{display:flex}
  .top.open~.dock{display:none}
  .nav a{display:block;padding:15px 0;font:var(--b-wt) 1.4rem/1.2 var(--brand);font-optical-sizing:none;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--line)}
  .nav>a:last-child{border-bottom:0}
  .dd-panel .label{margin:16px 0 0}
}
@media (min-width:900px){
  .nav{display:flex;align-items:center}.js .menu-btn{display:none}
  .top-call span{display:inline}.top-call .ic{display:none}
  .top-call{width:auto;min-height:40px;padding:0 calc(20px - .18em) 0 20px;border-radius:0;border-color:var(--ink)}
  .top-call:hover{color:var(--paper)}
  .dd{position:relative}
  .dd-btn{display:inline-flex}
  .dd-panel{display:none;position:absolute;top:100%;left:-28px;width:460px;grid-template-columns:1fr 1fr;gap:0 36px;padding:22px 28px 24px;background:var(--paper);border:1px solid var(--line);box-shadow:0 26px 40px -30px rgba(22,35,42,.55)}
  .dd:hover .dd-panel,.dd.open .dd-panel,html:not(.js) .dd:focus-within .dd-panel{display:grid}
  .dd-panel a{display:block;width:max-content;padding:8px 0;font:var(--b-wt) 1.15rem/1.3 var(--brand);font-optical-sizing:none;letter-spacing:0;text-transform:none}
  .dd-panel .label{margin:0 0 8px}
}

/* hero: one picture fills the first screen, whatever its size, with the words on it.
   69px is the sticky header (68px + its border); the preview banner adds 38px until launch. */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:calc(100vh - 69px);min-height:calc(100svh - 69px);
  background:var(--ink);color:var(--on-ink);padding:clamp(72px,12vh,160px) 0 clamp(32px,6vh,72px);overflow:hidden}
.pv~main .hero{min-height:calc(100vh - 107px);min-height:calc(100svh - 107px)}
@media (max-width:899px){.hero{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}  /* clear of the phone bar */
.hero-in{position:relative;width:100%}
.hero-copy{max-width:660px}
.hero-media{position:absolute;inset:0;z-index:-1;margin:0}
.hero-media picture,.hero-media img{display:block;width:100%;height:100%}
.hero-media img{object-fit:cover}
@media (orientation:portrait) and (min-width:600px){.hero-media img{object-position:50% 0}}  /* tablets: hero-tall is cut a lot top and bottom; keep its room (the top), lose floor */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(22,35,42,.94) 0%,rgba(22,35,42,.8) 46%,rgba(22,35,42,.2) 76%,rgba(22,35,42,.35) 100%)}
@media (min-width:900px){.hero-media::after{background:linear-gradient(to right,rgba(22,35,42,.8) 0%,rgba(22,35,42,.5) 34%,rgba(22,35,42,0) 60%),
  linear-gradient(to top,rgba(22,35,42,.6) 0%,rgba(22,35,42,0) 38%)}}
@media (min-width:900px) and (max-width:1279px){.hero-media::after{background:linear-gradient(to right,rgba(22,35,42,.84) 0%,rgba(22,35,42,.6) 42%,rgba(22,35,42,0) 72%),
  linear-gradient(to top,rgba(22,35,42,.6) 0%,rgba(22,35,42,0) 38%)}}  /* small laptops: the words reach further into the picture */
.hero-media figcaption{position:absolute;z-index:1;top:16px;right:var(--gut);margin:0;padding:6px 11px 6px 12px;border:0;background:rgba(22,35,42,.74);
  color:var(--on-ink);font-size:.6875rem;letter-spacing:.16em}
@media (prefers-reduced-motion:no-preference){.hero-media img{animation:hero-in 16s ease-out both}}
@keyframes hero-in{from{transform:scale(1.06)}to{transform:none}}
/* until the picture arrives: the line drawing, faint, on slate */
.hero-media .slot-in{position:absolute;inset:0;aspect-ratio:auto;height:100%;border:0;background:var(--ink);color:var(--bronze-l)}
.hero-media .slot-in .draw{position:absolute;top:8%;left:50%;width:min(86vw,420px);transform:translateX(-50%);opacity:.22}
@media (min-width:900px){.hero-media .slot-in .draw{top:50%;left:auto;right:6%;width:min(40vw,560px);transform:translateY(-50%);opacity:.3}}
.hero-media .slot-l{top:16px;bottom:auto;left:auto;right:var(--gut);text-align:right;color:var(--on-ink-2)}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.02;letter-spacing:-.015em;color:var(--paper)}
@media (min-width:900px){.hero h1{max-width:8em}}  /* three short lines on the dark side, not one long line over the bright room */
.hero-media:not(.slot)~.hero-in h1{text-shadow:0 2px 24px rgba(10,18,22,.35)}  /* on a picture only; on plain slate it smudges */
.kicker{display:block;margin-bottom:26px;font:600 .8125rem/1.35 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-l)}
.lede{max-width:30em;margin:28px 0 36px;font-size:1.15rem;color:var(--on-ink-2)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.more.more-light{color:var(--paper);border-color:rgba(243,238,230,.45)}
@media (max-width:480px){.cta .btn{width:100%}}
.tb{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:48px;border-top:1px solid rgba(205,164,110,.3)}
.tb div{padding:14px 28px 0 0}
.tb div+div{padding-left:20px;border-left:1px solid rgba(205,164,110,.3)}
.tb dt{color:var(--on-ink-2);font-weight:400;margin-bottom:6px}
.tb dd{font:500 1rem/1.35 var(--brand);color:var(--paper)}
.hero .lede{color:var(--on-ink)}
.hero .tb{margin-top:36px}
/* phones: keep the words compact so the room shows above them */
@media (max-width:639px){
  .hero .kicker{margin-bottom:14px}
  .hero .lede{margin:16px 0 24px;font-size:1rem}
  .hero .cta{gap:14px 24px}
  .hero .cta .btn{width:auto}
}
.side-art{max-width:420px;color:var(--bronze-d);opacity:.85}

/* images and their empty slots */
figure{margin:0;min-width:0}
.slot-in,.pic img{width:100%;aspect-ratio:4/3}
.r169 .slot-in,.r169 img{aspect-ratio:16/9}
.r45 .slot-in,.r45 img{aspect-ratio:4/5}
.r11 .slot-in,.r11 img{aspect-ratio:1/1}
.arch .slot-in,.arch img{aspect-ratio:4/5;border-radius:999px 999px 0 0}
.arch-p .slot-in,.arch-p img{aspect-ratio:3/4;border-radius:999px 999px 0 0}
.pic img{height:auto;object-fit:cover;background:var(--paper-2)}
.slot-in{position:relative;display:grid;place-items:center;overflow:hidden;background:var(--card);border:1px dashed rgba(127,85,39,.45);color:var(--bronze-d)}
.slot-in .draw{width:min(72%,340px);opacity:.7}
.slot-l{position:absolute;left:14px;bottom:12px;right:14px;font-weight:450;letter-spacing:.08em;font-size:.76rem;color:var(--muted)}
.arch .slot-l,.arch-p .slot-l{text-align:center}
/* captions: small tracked capitals after a short bronze hairline, like a drawing's title (v1.6.0) */
figcaption{margin-top:16px;font:600 .72rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pic>figcaption::before,.draft-pic>figcaption::before{content:"";display:inline-block;width:18px;height:1px;margin-right:10px;vertical-align:.3em;background:var(--bronze-d)}

/* line drawings */
.draw{width:100%;height:auto;aspect-ratio:320/206;overflow:visible}
.draw path,.draw circle{vector-effect:non-scaling-stroke;stroke-width:1.3}
.draw .d{opacity:.55}
.draw .x{stroke-dasharray:4 4}

/* founder */
.founder{padding:var(--sec) 0}
.founder-in{display:grid;gap:40px;align-items:center}
.founder-pic{max-width:300px;width:100%}
@media (min-width:860px){.founder-pic{max-width:380px}}
.note{margin:28px 0;padding:0 0 0 22px;border-left:1px solid var(--bronze-d);font:400 1.2rem/1.6 var(--sans);color:var(--text)}
.note .todo-block{font-family:var(--sans)}
.sig>b{display:block;font:600 1.15rem/1.25 var(--brand)}
.sig>span{display:block;margin-top:4px;font-size:.92rem;color:var(--muted)}
@media (min-width:860px){.founder-in{grid-template-columns:5fr 7fr;gap:88px}}

/* drawing-sheet grids: hairline cells like a set of drawings */
.sheet{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.sheet>li{background:var(--paper);min-width:0}
.cell{display:block;height:100%;padding:28px 24px 32px;text-decoration:none;color:inherit;position:relative;transition:background .25s}
a.cell:hover{background:var(--card)}
/* the long hairline arrow (v1.6.0; it was the font's arrow): a drawn line, coloured by the text colour */
a.cell::after,a.svc-row::after{content:"";position:absolute;width:28px;height:11px;background:currentColor;color:var(--bronze-d);
  -webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
a.cell::after{right:24px;top:30px}
a.cell:hover::after{transform:translateX(5px)}
.cell .draw{color:var(--bronze-d);margin-bottom:26px}
.cell .no{display:block;color:var(--bronze-d);margin-bottom:10px}
.cell h3{margin-bottom:10px}
.cell p{color:var(--muted);margin:0}
.services{padding:var(--sec) 0}

/* home: the studio in one sentence, then the four services as a quiet list (v1.1.0) */
.intro{padding:var(--sec) 0}
.intro-in{display:grid;gap:48px}
.statement{font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.06;margin-bottom:28px}  /* eight words, said big (v1.4.0; it was twenty) */
.statement i{white-space:nowrap}
.intro-copy>p:not(.eyebrow){max-width:32em;color:var(--muted);font-size:1.06em}
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:block;position:relative;padding:26px 48px 26px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.svc-row h3{font-size:clamp(1.45rem,2.2vw,1.8rem);margin-bottom:8px;transition:color .25s}
.svc-row p{margin:0;color:var(--muted);max-width:30em}
a.svc-row::after{right:4px;top:36px}
a.svc-row:hover h3{color:var(--bronze-d)}
a.svc-row:hover::after{transform:translateX(5px)}
@media (min-width:980px){.intro-in{grid-template-columns:1fr 1fr;gap:96px;align-items:start}}
/* home: four facts in big type under the services, each from facts.json (v1.2.0) */
.figures{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--line)}
.figures div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;padding:26px 16px 0 0}
.figures dd{margin:0;font-family:var(--brand);font-weight:var(--b-wt);font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.1;color:var(--text);text-wrap:balance}
.figures dt{font:600 .8rem/1.45 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (min-width:860px){.figures{grid-template-columns:repeat(4,1fr)}.figures div+div{padding-left:24px;border-left:1px solid var(--line)}.figures dd{white-space:nowrap}}

/* home: "Every room starts as a drawing". Without JS (or with reduced motion) it is the picture and three steps.
   With JS (.draft-on) the line drawing draws itself as the frame comes up the screen, then the finished room paints
   in from the left and the lines fade. site.js sets each stroke's dash offset, the picture's curtain, the slow zoom and
   the current step (.on) from where the frame is on the screen; the rules below are the starting state. (v1.2.0)
   The stage holds while the drawing draws and the room paints in, and the steps change one after another, 1, 2, 3
   (Ashish, 4 Nov, on a v1.6.0 draft that let the section scroll and listed all three steps: "the previous version
   only on the mobile when the below 1 to 2 and 3 changes 1 after another ... that kind of thing was nice", then "make
   that change to the computer also"). On computers the drawing starts as the frame comes up the screen, so the frame
   is never an empty grid. Without the sticky stage, site.js falls back to the frame's place on the screen. */
.draft{padding:var(--sec) 0}
.intro+.draft,.draft+.work{padding-top:0}
.draft .more-row{margin-top:28px}
.draft-stage{display:grid;gap:28px}
.draft-head h2{margin:0}
.draft-pic{margin:0}
.draft-frame{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--card)}
.draft-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.draft-paint{position:absolute;inset:0;overflow:hidden}
.draft-lines{display:none}
.draft-pic figcaption{margin-top:10px}
.draft-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:0}
.draft-steps li{counter-increment:st;display:grid;grid-template-columns:42px 1fr;column-gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.draft-steps li::before{content:"0" counter(st);grid-row:1/3;padding-top:5px;font:600 .8rem/1 var(--sans);letter-spacing:.14em;color:var(--bronze-d)}
.draft-steps b{font-family:var(--brand);font-weight:var(--b-wt);font-size:1.35rem;line-height:1.2}
.draft-steps span{color:var(--muted)}
@media (min-width:900px){
  .draft-stage{grid-template-columns:minmax(260px,4fr) 8fr;grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,72px);row-gap:36px}
  .draft-head{grid-column:1;grid-row:1;align-self:end}
  .draft-steps{grid-column:1;grid-row:2;align-self:start}
  .draft-pic{grid-column:2;grid-row:1/3}
}
.draft-on .draft-lines{display:block;position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transform:scale(1.05)}
.draft-on .draft-lines path{stroke-dasharray:1 1;stroke-dashoffset:1}
.draft-on .draft-lines .lf{stroke:var(--bronze-d);stroke-width:1.4}
.draft-on .draft-frame{background-image:linear-gradient(rgba(127,85,39,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,85,39,.07) 1px,transparent 1px);
  background-size:28px 28px}
/* the room paints in behind a sliding curtain: the frame (.draft-paint) slides in from the left while the picture
   inside slides the other way, so the picture stands still and only the edge moves (v1.7.1; it was a mask
   redrawn on every scroll frame) */
.draft-on .draft-paint{transform:translateX(-100%)}
.draft-on .draft-paint img{transform:translateX(100%) scale(1.05)}
.draft-paint::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--bronze-d);opacity:0;transition:opacity .3s}
.draft-frame.painting .draft-paint::after{opacity:.9}
/* The held scene, on phones and computers: the stage stays in place while the section scrolls past. */
.draft-on .draft-track{height:260vh;height:260svh}
.draft-on .draft-stage{position:sticky;top:69px;height:calc(100vh - 69px);height:calc(100svh - 69px);align-content:center;
  padding-block:clamp(16px,3vh,40px)}
/* One step at a time, in the same place: 1, then 2, then 3 (.on, set by site.js). Each rises in as the one before
   fades; the hidden ones are hidden, not dimmed (dimming failed contrast in v1.2.0, 1.7:1). */
.draft-on .draft-steps{grid-template-areas:"s"}
.draft-on .draft-steps li{grid-area:s;opacity:0;transform:translateY(10px);border-top:0;padding:4px 0 0;
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.draft-on .draft-steps li.on{opacity:1;transform:none}
@media (min-width:900px){
  .draft-on .draft-frame{aspect-ratio:4/3;max-height:calc(100svh - 69px - 2 * clamp(16px,3vh,40px) - 40px)}
  .draft-on .draft-stage{grid-template-rows:1fr auto}
  .draft-on .draft-pic{align-self:center}
  .draft-on .draft-steps{padding-top:22px;border-top:1px solid var(--line)}
  .draft-on .draft-steps b{font-size:1.6rem}
  .intro:has(+.draft-on){padding-bottom:clamp(40px,5vw,64px)}  /* the held stage brings its own space above */
}
@media (max-width:899px){
  .draft-on .draft-stage{gap:18px;grid-template-rows:auto auto auto;padding-bottom:64px}  /* room for the phone bar */
  .draft-on .draft-head .eyebrow{margin-bottom:12px}
  .draft-on .draft-head h2{font-size:clamp(1.8rem,8vw,2.4rem)}
  .draft-on .draft-frame{aspect-ratio:1/1;max-height:calc(100svh - 69px - 340px);margin-inline:auto}
  .draft-on .draft-lines{stroke-width:2.4}
  .draft-on .draft-pic figcaption{margin-top:8px}
}
.svc{grid-template-columns:1fr}
@media (min-width:640px){.svc{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.svc{grid-template-columns:repeat(4,1fr)}}
.rooms{padding:0 0 var(--sec)}
.room-grid{grid-template-columns:1fr 1fr}
.room-grid .cell{padding:20px 16px 22px}
.room-grid .cell .draw{margin-bottom:16px}
.room-grid h3{font-size:1rem;line-height:1.3}
@media (min-width:900px){.room-grid{grid-template-columns:repeat(3,1fr)}.room-grid .cell{padding:30px 28px 32px}.room-grid h3{font-size:1.15rem}}

/* process: steps along a dimension line */
.process{background:var(--ink);color:var(--on-ink);padding:var(--sec) 0;--rule:rgba(205,164,110,.6)}  /* home: the one dark section mid-page, so five light ones don't run together (v1.4.0) */
.process h2,.process h3{color:var(--paper)}
.process .eyebrow,.process .steps .no,.process .steps-foot .label{color:var(--bronze-l)}
.process .sec-head p:not(.eyebrow),.process .steps p{color:var(--on-ink-2)}
.process .steps-foot{border-top-color:rgba(205,164,110,.25)}
.steps{display:grid;gap:0;counter-reset:s}
.steps li{position:relative;padding:0 0 32px 26px;border-left:1px solid var(--rule,var(--ink));min-width:0}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:1px;background:var(--rule,var(--ink))}
.steps .no{display:block;color:var(--bronze-d);margin-bottom:8px}
.steps h3{font-size:1.3rem;margin-bottom:8px}
.steps p{color:var(--muted);font-size:.95em;margin:0 0 10px}
.wk{display:inline-block;color:var(--text);font-weight:500;letter-spacing:.12em;padding:5px 9px;border:1px solid var(--line);background:var(--paper)}
@media (min-width:980px){
  /* three by two (v1.6.0; six narrow columns broke every line after two or three words) */
  .steps{grid-template-columns:repeat(3,1fr);gap:64px 48px}
  .steps li{border-left:0;border-top:1px solid var(--rule,var(--ink));padding:30px 24px 0 0}
  .steps li::before{left:0;top:-6px;width:1px;height:11px}
  .steps li:nth-child(3n)::after,.steps li:last-child::after{content:"";position:absolute;right:0;top:-6px;width:1px;height:11px;background:var(--rule,var(--ink))}
  .steps h3{font-size:1.55rem}
  .steps .no{margin-bottom:14px}
}

/* work */
.work{padding:var(--sec) 0}
.work-grid{display:grid;gap:28px 24px;grid-template-columns:1fr}
.w-wide{grid-column:1/-1}
.work-grid .r45 .slot-in,.work-grid .r45 img{aspect-ratio:4/3}
@media (min-width:760px){.work-grid{grid-template-columns:repeat(3,1fr)}.work-grid .r45 .slot-in,.work-grid .r45 img{aspect-ratio:4/5}}
/* home gallery: one wide picture, then rooms in threes; a picture that links to its page zooms gently */
.gallery{display:grid;gap:44px 28px;grid-template-columns:1fr}
.g-wide{grid-column:1/-1}
.g-link{display:block;text-decoration:none;color:inherit}
.gallery .pic{overflow:hidden}
.gallery .pic img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.g-link:hover img{transform:scale(1.03)}
.g-link:hover figcaption{color:var(--bronze-d)}
.gallery .r45 img,.gallery .r45 .slot-in{aspect-ratio:4/3}
@media (min-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}.gallery .r45 img,.gallery .r45 .slot-in{aspect-ratio:4/5}}
.site-row{margin-top:clamp(56px,8vw,96px)}
.site-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:640px){.site-grid{grid-template-columns:repeat(3,1fr)}}

/* two-column sections */
.split{display:grid;gap:40px}
@media (min-width:900px){.split{grid-template-columns:5fr 7fr;gap:72px;align-items:start}.split>.sec-head{position:sticky;top:110px}}

.materials{padding:var(--sec) 0}
.mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* home: the last word, on slate */
.close{background:var(--ink);color:var(--on-ink);padding:var(--sec) 0;text-align:center}
.close-in{display:flex;flex-direction:column;align-items:center}
.close .eyebrow{color:var(--bronze-l)}
.close h2{color:var(--paper);font-size:clamp(2.3rem,5.2vw,4rem);margin-bottom:22px}
.close-in>p{max-width:32em;color:var(--on-ink-2)}
.close .cta{justify-content:center;margin-top:18px}
.close-in>.close-alt{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;max-width:none;margin:30px 0 0;font-size:.97rem}
.close-alt a{text-decoration:none;border-bottom:1px solid rgba(205,164,110,.35)}
.close-alt a:hover{color:var(--paper);border-color:var(--bronze-l)}

.cost{background:var(--ink);color:var(--on-ink);padding:var(--sec) 0}
.cost h2{color:var(--paper)}
.cost .eyebrow{color:var(--bronze-l)}
.cost .sec-head p:not(.eyebrow),.cost .small{color:var(--on-ink-2)}
.cost .todo{color:var(--bronze-l);border-color:rgba(205,164,110,.55);background:rgba(205,164,110,.08)}
.prices{border-top:1px solid rgba(205,164,110,.35);margin-bottom:24px}
.prices div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding:22px 0;border-bottom:1px solid rgba(205,164,110,.2)}
.prices dt{font-size:1.02rem;color:var(--on-ink)}
.prices dd{font:500 1.35rem/1.25 var(--brand);color:var(--paper)}
.prices dd .todo{font-size:.95rem}

.visit{padding:var(--sec) 0}
.visit h2,.contact-copy h2{margin-bottom:18px}
.kv{margin:28px 0 32px;border-top:1px solid var(--line)}
.kv div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.kv dt{color:var(--muted);font-weight:500;padding-top:4px}
.map{border:1px solid var(--line);background:var(--paper-2);aspect-ratio:16/10;overflow:hidden}
.sketch{width:100%;height:100%}
.sketch .road{stroke:var(--card)}
.sketch .rail{stroke:#CDBFAA}
.pin-halo{fill:var(--bronze-l);fill-opacity:.22}
.pin-dot{fill:var(--bronze-d)}

.faq{padding:var(--sec) 0}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:32px;padding:24px 0;
  font:var(--b-wt) 1.3rem/1.35 var(--brand);font-optical-sizing:none;transition:color .25s}
.qa summary:hover{color:var(--bronze-d)}
.qa summary::-webkit-details-marker{display:none}
/* a drawn plus (two hairlines) that closes to a minus when open (v1.6.0; it was the font's "+") */
.qa summary::after{content:"";flex:none;align-self:center;width:15px;height:15px;color:var(--bronze-d);
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  transition:background-size .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1)}
.qa details[open] summary::after{background-size:100% 1px,1px 0;transform:rotate(180deg)}
.qa details>div{padding:0 0 22px;color:var(--muted);max-width:40em}

.contact{background:var(--paper-2);padding:var(--sec) 0}
.direct{margin-top:28px;border-top:1px solid var(--line)}
.direct a{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .25s}
.direct a:hover{color:var(--bronze-d)}
.direct .ic{box-sizing:content-box;width:18px;height:18px;padding:10px;border:1px solid rgba(127,85,39,.45);border-radius:50%;color:var(--bronze-d);flex:none;
  transition:background .25s,color .25s}
.direct a:hover .ic{background:var(--bronze-d);color:var(--paper)}
.enq{background:var(--card);border:1px solid var(--line);padding:clamp(20px,4vw,40px);display:grid;gap:20px;min-width:0}
.form-note{margin:0}
.row2{display:grid;gap:20px}
@media (min-width:600px){.row2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.field label,.field legend{font-size:.9rem;font-weight:600;color:var(--text);padding:0;margin-bottom:8px}
.field label{margin:0}
input,select{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:2px;background:#fff;font:inherit;font-size:1rem;color:var(--text)}
input:focus,select:focus{outline:2px solid var(--bronze-d);outline-offset:0;border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);background:#fff;font-size:.92rem;cursor:pointer}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips input:focus-visible+span{outline:2px solid var(--bronze-d);outline-offset:2px}
.enq .btn{justify-self:start;min-width:160px}
.enq .small{margin:0}

/* footer */
.foot{background:var(--ink);color:var(--on-ink-2);padding:clamp(56px,8vw,96px) 0 calc(96px + env(safe-area-inset-bottom))}
.foot-grid{display:grid;gap:36px;grid-template-columns:1fr}
.foot .wm{color:var(--paper)}
.foot .wm-sub{color:var(--bronze-l)}
.foot .foot-brand p{margin-top:20px;max-width:24em}
.foot .label{color:var(--bronze-l);margin-bottom:12px}
.foot p{margin:0 0 6px;font-size:.97rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--paper)}
.foot-links li{margin-bottom:6px;font-size:.97rem}
.titleblock{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:56px;padding-top:20px;border-top:1px solid rgba(205,164,110,.25);font-size:.88rem;letter-spacing:.02em}
@media (min-width:600px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (min-width:1080px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr .8fr}.foot-brand{grid-column:auto}}
@media (min-width:900px){.foot{padding-bottom:56px}}

/* phone dock: call, WhatsApp, plan */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:1fr 1fr 1.3fr;background:var(--ink);border-top:1px solid rgba(205,164,110,.35);padding-bottom:env(safe-area-inset-bottom)}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:60px;color:var(--on-ink);text-decoration:none;
  font:600 .625rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.dock .ic{width:20px;height:20px;color:var(--bronze-l)}
.dock-main .ic{color:#fff}
.dock a+a{border-left:1px solid rgba(205,164,110,.2)}
.dock-main{background:var(--bronze-d);color:#fff}
/* on the home page it waits until the hero's own button has scrolled away (site.js adds .dock-up); hidden from the
   first paint, so it never flashes in and out */
body:has(.hero) .dock{transform:translateY(105%);visibility:hidden;transition:transform .35s ease,visibility 0s .35s}
body:has(.hero) .dock.dock-up{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s}
@media (min-width:900px){.dock{display:none}}

/* ---- inner pages ---- */
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.phero{background:var(--ink);color:var(--on-ink);padding:clamp(32px,6vw,72px) 0 clamp(44px,7vw,88px);overflow:hidden}
.phero-in{display:grid;gap:36px;align-items:center}
.phero h1{font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.06;color:var(--paper)}
.phero .lede{margin:22px 0 30px}
.phero-art{display:none;color:var(--bronze-l);opacity:.9}
@media (min-width:700px){.phero-art{display:block;max-width:300px;width:100%}}
@media (min-width:900px){.phero-in{grid-template-columns:1.3fr .7fr;gap:72px}.phero-art{max-width:400px;justify-self:end}}
.phero .todo{color:var(--bronze-l);border-color:rgba(205,164,110,.55);background:rgba(205,164,110,.08)}
.phero-post .wrap{max-width:860px}
.phero-post .lede{margin-bottom:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:24px;font-size:.9rem;color:var(--on-ink-2)}
.crumbs a{text-decoration:none;border-bottom:1px solid rgba(205,164,110,.4)}
.crumbs a:hover{color:var(--paper)}
.crumbs [aria-current]{color:var(--bronze-l)}
.crumbs .sep{opacity:.5}

.sec{padding:var(--sec) 0}
.sec-line{border-top:1px solid var(--line)}
.sec-card{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-card .sheet>li{background:var(--card)}
.sec-card a.cell:hover{background:var(--paper)}
.cols2,.cols3,.cols4{grid-template-columns:1fr}
.cols5{grid-template-columns:1fr 1fr}
.cols5>li:last-child:nth-child(odd){grid-column:1/-1}
.cols5>li:last-child:nth-child(odd) .draw{max-width:calc(50% - 8px)}
@media (min-width:640px){.cols2,.cols3,.cols4{grid-template-columns:1fr 1fr}}
@media (min-width:640px) and (max-width:999px){.cols3>li:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1000px){.cols3{grid-template-columns:repeat(3,1fr)}.cols4{grid-template-columns:repeat(4,1fr)}
  .cols5{grid-template-columns:repeat(5,1fr)}.cols5>li:last-child:nth-child(odd){grid-column:auto}
  .cols5>li:last-child:nth-child(odd) .draw{max-width:none}}
.plans .cell{padding:18px 14px 20px}
.plans .draw{margin-bottom:14px}
.plans h3{font-size:1rem;margin-bottom:6px}
.plans p{font-size:.95rem}
@media (min-width:1000px){.plans .cell{padding:24px 20px 26px}}
.posts .draw{max-width:300px}

.prose{max-width:40em;font-size:1.02em}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin:1.9em 0 .6em}
.prose ul{margin:0 0 1.2em}
.prose li{position:relative;padding-left:24px;margin-bottom:.55em}
.prose li::before{content:"";position:absolute;left:0;top:.82em;width:12px;height:1px;background:var(--bronze-d)}
.post{max-width:860px;padding-top:clamp(40px,6vw,72px);padding-bottom:var(--sec)}
.plan-fig{margin:6px 0 22px;max-width:400px;color:var(--bronze-d)}
.plan-fig .draw{background:var(--card);border:1px solid var(--line);padding:6px}
.plan-fig figcaption{margin-top:8px}

.ticks{display:grid;border-top:1px solid var(--line)}
@media (min-width:760px){.ticks{grid-template-columns:1fr 1fr;column-gap:48px}}
.ticks li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:4px;top:22px;width:13px;height:7px;border-left:1.5px solid var(--bronze-d);border-bottom:1.5px solid var(--bronze-d);transform:rotate(-45deg)}

.spec{border-top:1px solid var(--line)}
.spec div{display:grid;gap:4px 28px;padding:18px 0;border-bottom:1px solid var(--line)}
@media (min-width:600px){.spec div{grid-template-columns:150px 1fr}}
.spec dt{font:500 1.05rem/1.45 var(--brand)}
.spec dd{color:var(--muted)}

.glance{display:grid;grid-template-columns:1fr 1fr;margin-top:28px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.glance div{padding:16px 16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.glance dt{font:600 .8rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.glance dd{font-weight:600;line-height:1.45}

.pay-label{margin:30px 0 0;color:var(--bronze-d)}
.cost .pay-label{color:var(--bronze-l)}
.pay{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-top:1px solid var(--line)}
.cost .pay{border-color:rgba(205,164,110,.35)}
.pay li{padding:14px 10px 0 0;min-width:0}
.pay li+li{padding-left:14px;border-left:1px solid var(--line)}
.cost .pay li+li{border-color:rgba(205,164,110,.2)}
.pay b{display:block;font:500 1.6rem/1.1 var(--brand)}
.cost .pay b{color:var(--paper)}
.pay span{display:block;margin-top:6px;font-size:.9rem;line-height:1.4}

.calc{display:grid;gap:10px;margin-top:32px;padding:22px 22px 18px;background:var(--card);border:1px solid var(--line);color:var(--text)}
.calc .label{margin:0;color:var(--bronze-d)}
.calc label{font-size:.9rem;font-weight:600}
.calc-out{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.calc-out b{font:500 1.5rem/1.2 var(--brand)}
.calc .small,.cost .calc .small{margin:0;color:var(--muted)}

.steps-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:40px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.steps-foot .label{color:var(--bronze-d)}
.steps-foot span:last-child{font-weight:600}

.band{background:var(--ink);color:var(--on-ink);padding:clamp(56px,8vw,96px) 0;border-bottom:1px solid rgba(205,164,110,.25)}
.band-in{display:grid;gap:32px;align-items:end}
.band h2{color:var(--paper);margin-bottom:16px}
.band .eyebrow{color:var(--bronze-l)}
.band p{color:var(--on-ink-2);max-width:34em;margin:0}
.band-cta{display:grid;gap:12px}
@media (min-width:900px){.band-in{grid-template-columns:1.2fr 1fr;gap:72px}}

.more{display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1px solid rgba(127,85,39,.35);font-weight:600;font-size:.98rem;color:var(--bronze-d);text-decoration:none}
.more{gap:12px}
.more .ar{width:28px;height:11px}
.more-row{margin:28px 0 0}

@media (min-width:640px){.site-grid.two{grid-template-columns:1fr 1fr}}
.proj-grid{display:grid;gap:28px 24px;grid-template-columns:1fr}
@media (min-width:640px){.proj-grid{grid-template-columns:1fr 1fr}}

.facts-row{display:grid;margin-bottom:44px;border-top:1px solid var(--line)}
.facts-row div{display:grid;gap:6px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts-row dt{font:600 .8rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts-row dd{font-weight:600;line-height:1.45}
.facts-row dd::first-letter{text-transform:uppercase}
@media (min-width:860px){.facts-row{grid-template-columns:repeat(4,1fr)}
  .facts-row div{padding:18px 20px 20px 0;border-bottom:0}.facts-row div+div{padding-left:20px;border-left:1px solid var(--line)}}

/* gentle reveal, only when JS runs and motion is welcome */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;transform:none}
}

/* more motion, also only when welcome (v1.2.0): the hero words rise in, pictures settle as they appear,
   the process line draws itself, and pages fade into each other */
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>:nth-child(2){animation-delay:.15s}
  .hero-copy>:nth-child(3){animation-delay:.3s}
  .mat-grid img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
  @view-transition{navigation:auto}
}
@media (min-width:980px) and (prefers-reduced-motion:no-preference){
  .js .steps li.rv{border-top-color:transparent;background:linear-gradient(var(--rule,var(--ink)),var(--rule,var(--ink))) no-repeat border-box 0 0/0 1px;
    transition:opacity .7s ease,transform .7s ease,background-size 1.1s cubic-bezier(.6,0,.2,1)}
  .js .steps li.rv.in{background-size:100% 1px}
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* v1.3.0, "make the site more awesome" (Ashish, 4 Nov). All of it only when motion is welcome; without it every
   section looks exactly as before. Scroll-linked parts use CSS scroll timelines (no script, run off the main
   thread); browsers without them simply skip those parts. */
@media (prefers-reduced-motion:no-preference){
  /* headings: words rise one after another as the heading scrolls in (site.js wraps the words in .w) */
  .js .wd .w{display:inline-block;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .wd:not(.in) .w{opacity:0;transform:translateY(.42em)}  /* no blur since v1.7.1: smoother on phones */
  /* pictures are always there (v1.6.0; they were hidden until in view, then unveiled like a curtain, so a quick
     scroll met empty frames: "as if the site is stuck"). They settle with the scroll instead, further down. */
  .gallery .pic img,.mat-grid .pic img,.work-grid .pic img,.proj-grid .pic img{transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
  /* services: a bronze line runs along the row and the title steps in */
  .svc-row h3{transition:color .25s,transform .45s cubic-bezier(.2,.7,.2,1)}
  a.svc-row::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bronze-d);
    transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.6,0,.2,1)}
  a.svc-row:hover::before,a.svc-row:focus-visible::before{transform:none}
  a.svc-row:hover h3{transform:translateX(10px)}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    /* a bronze hairline under the header fills as you read down the page */
    .top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bronze-d);transform:scaleX(0);
      transform-origin:left;animation:read linear both;animation-timeline:scroll(root)}
    /* hero depth: the room scrolls away slower than the page, the words lift and fade */
    .hero-media{animation:hero-depth linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    .hero-in{animation:hero-lift linear both;animation-timeline:scroll(root);animation-range:0 80svh}
    /* materials, "in daylight": a band of soft light crosses each swatch as it passes */
    /* the band is a wide strip slid across with translate, so it moves on the compositor without repainting */
    .mat-grid .pic{position:relative;overflow:hidden}
    .mat-grid .pic::after{content:"";position:absolute;left:0;top:0;width:250%;aspect-ratio:5/2;pointer-events:none;mix-blend-mode:screen;
      background:linear-gradient(105deg,transparent 32%,rgba(255,236,200,.4) 50%,transparent 68%);
      animation:daylight linear both;animation-timeline:view();animation-range:entry 30% exit 70%}
    .mat-grid>.pic:nth-child(even)::after{animation-range:entry 45% exit 85%}
  }
}
@keyframes read{to{transform:none}}
@keyframes hero-depth{to{translate:0 28svh}}
@keyframes hero-lift{to{translate:0 -12svh;opacity:0}}
@keyframes daylight{from{translate:0 0}to{translate:-60% 0}}

/* Carvings (v1.4.0; Ashish: "sculpture kinda things like carving prints subtlely in the backgorund with aniomation
   while we scroll"). Pressed-in ornaments drawn by brand/carve.py sit behind four home sections: a lotus medallion
   (the studio; and the closing band, in bronze) and a jaali window (How we work). As a section passes they turn or
   drift (scroll-linked, compositor only, SOP 24k); with reduced motion, or in browsers without scroll timelines,
   they simply stand still. Decoration only: pseudo-elements.
   The carved niche behind the four material swatches is gone since v1.6.0 (Ashish, 4 Nov: "in the material the
   background is looking ugly ... like some random thing in the background"); the swatches sit on plain paper. */
.intro,.process,.materials,.close{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.intro::before,.process::before,.close::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  background:no-repeat center/contain}
.intro::before{--s:460px;width:var(--s);aspect-ratio:1;right:calc(var(--s) * -.52);top:-60px;
  background-image:url(/assets/carve-lotus-paper.svg?v=4c4f5c45b4);opacity:.5}
.close::before{--s:min(980px,150vw);width:var(--s);aspect-ratio:1;left:50%;top:50%;margin:calc(var(--s) * -.5) 0 0 calc(var(--s) * -.5);
  background-image:url(/assets/carve-lotus-ink.svg?v=681c778103);opacity:.13}
.mat-grid{position:relative}
.process::before{display:none}
@media (min-width:900px){
  .intro::before{--s:720px;right:auto;left:calc(var(--s) * -.5 - 90px);top:calc(68% - var(--s) * .5)}
}
@media (min-width:1180px){  /* beside the heading only where the steps start low enough (455 px down at 1280 px wide) */
  .process::before{display:block;width:220px;aspect-ratio:408/668;right:max(28px,calc(50% - 620px));top:56px;
    background-image:url(/assets/carve-jaali-ink.svg?v=297b013160);opacity:.26}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .intro,.process,.materials,.close{view-timeline:--carve block}
    .intro::before,.close::before{animation:carve-turn linear both;animation-timeline:--carve;animation-range:cover}
    .process::before{animation:carve-rise linear both;animation-timeline:--carve;animation-range:cover}
  }
}
@keyframes carve-turn{from{rotate:-24deg;translate:0 70px}to{rotate:24deg;translate:0 -70px}}
@keyframes carve-rise{from{translate:0 30px}to{translate:0 -30px}}

/* ---- v1.5.0 (Ashish, 4 Nov: "can we making it more appealing and awesome"). The home page was rich; the inner
   pages opened on plain slate. Every effect below is decoration: without motion, or in an older browser, each page
   reads exactly as before. ---- */

/* Room pages open on a picture, like the home page: the concept from the home gallery fills the right half of the
   header edge to edge on a computer, fading into the slate on its left, and sits on top on a phone. Always captioned
   "Design concept" (check.py). Only the four room pages; renovation, execution and turnkey wait for real photos. */
.phero:has(.phero-media){padding-top:0}
.phero-media{position:relative;order:-1;margin:0 calc(var(--gut) * -1);aspect-ratio:4/3;max-height:62vh;overflow:hidden;background:var(--ink-2)}
.phero-media img{display:block;width:100%;height:100%;object-fit:cover}
.phero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--ink) 0,rgba(22,35,42,0) 30%)}
.phero-media figcaption{position:absolute;z-index:1;top:14px;right:var(--gut);margin:0;padding:6px 11px 6px 12px;background:rgba(22,35,42,.74);
  color:var(--on-ink);font-size:.6875rem;letter-spacing:.16em}
@media (min-width:900px){
  .phero:has(.phero-media){display:flex;align-items:center;min-height:clamp(540px,74vh,780px);padding:clamp(48px,6vw,88px) 0}
  .phero:has(.phero-media) .phero-in{grid-template-columns:1fr 1fr}
  .phero-media{position:absolute;top:0;right:0;bottom:0;left:50%;margin:0;aspect-ratio:auto;max-height:none}
  .phero-media::after{background:linear-gradient(to right,var(--ink) 0,rgba(22,35,42,.5) 14%,rgba(22,35,42,0) 38%)}
  .phero-media figcaption{right:16px}
}
@media (prefers-reduced-motion:no-preference){
  .phero-media img{animation:hero-in 16s ease-out both}
  /* the header words rise in on every page, as on the home page */
  .phero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .phero-copy>:nth-child(2){animation-delay:.1s}
  .phero-copy>:nth-child(3){animation-delay:.2s}
  .phero-copy>:nth-child(4){animation-delay:.3s}
}

/* The carvings reach every page: a bronze lotus pressed into the slate of each page header and of the closing
   "Tell us about your space" band, turning slowly as the page scrolls (as on the home page). */
.phero,.band{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.phero::before,.band::before{content:"";position:absolute;z-index:-1;pointer-events:none;aspect-ratio:1;
  background:url(/assets/carve-lotus-ink.svg?v=681c778103) no-repeat center/contain;opacity:.11}
.phero::before{--s:min(780px,150vw);width:var(--s);right:calc(var(--s) * -.3);top:50%;margin-top:calc(var(--s) * -.5)}
.phero:has(.phero-media)::before{right:auto;left:calc(var(--s) * -.46);top:auto;bottom:calc(var(--s) * -.52);margin:0}
.phero-post::before{--s:min(620px,130vw);right:calc(var(--s) * -.42)}
.band::before{--s:min(720px,150vw);width:var(--s);left:calc(var(--s) * -.44);top:50%;margin-top:calc(var(--s) * -.5)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .phero,.band{view-timeline:--carve block}
    .phero::before,.band::before{animation:carve-turn linear both;animation-timeline:--carve;animation-range:cover}
  }
}

/* Line drawings draw themselves: the page-header drawing as the page opens, line after line (drawings.py gives
   every solid line pathLength="1"; the dashed ones, .x, fade in instead). The small drawings in cards (kitchen
   layouts, rooms) rise in with their card: their left-to-right wipe (v1.5.0) was a clip-path, re-drawn on every
   frame, and made long pages stutter on phones (v1.7.1).
   The header drawing's lines scale with it here (1.1 units = 1.0 to 1.4 px at the sizes it is shown). With
   non-scaling strokes Chrome counts a dash in screen pixels, not along the line, so a drawing shown larger than
   its sheet never finished (the arch's leg stopped short) and a smaller one finished early. Same reason the cards
   use a wipe, not dashes: they are shown at 0.45 to 1 times their sheet. */
.phero-art .draw path,.phero-art .draw circle{vector-effect:none;stroke-width:1.1}
@media (prefers-reduced-motion:no-preference){
  .phero-art .draw [pathLength]{stroke-dasharray:1 1;animation:ink 1.7s cubic-bezier(.55,0,.25,1) .25s both}
  .phero-art .draw [pathLength]{animation-delay:calc(.2s + sibling-index() * 90ms)}  /* one line after another where supported */
  .phero-art .draw .x{animation:fade-in 1s ease 1.2s both}
}
@keyframes ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fade-in{from{opacity:0}}

/* Buttons: a fill sweeps across from the left on hover (bronze on the light button). Links: the line under them
   grows across and the arrow steps forward. */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--sweep,transparent);transform:scaleX(0);transform-origin:right;
  transition:transform .5s cubic-bezier(.6,0,.2,1)}
.btn:hover::before{transform:none;transform-origin:left}
.btn[disabled]::before{display:none}
.btn-light{--sweep:var(--bronze-l)}
.btn-line{--sweep:rgba(205,164,110,.16)}
.btn-line-dark{--sweep:var(--ink)}
.btn-dark{--sweep:var(--bronze-d)}
.more{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;background-origin:border-box;
  transition:background-size .45s cubic-bezier(.6,0,.2,1)}
.more:hover,.more:focus-visible{background-size:100% 1px}
.more .ic{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.more:hover .ic{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.btn::before,.more,.more .ic{transition:none}}

/* Footer: the studio's name across the foot of every page, in bronze, rising into place as you reach the end.
   Decoration only: aria-hidden, and the text is generated by CSS with an empty spoken alternative. */
.foot-mark{margin-top:clamp(40px,6vw,72px);overflow:hidden;overflow:clip;pointer-events:none;user-select:none}
.foot-mark::before{content:"Ambiyence";content:"Ambiyence"/"";display:block;padding-bottom:.06em;text-align:center;white-space:nowrap;
  font:italic 400 min(calc((100vw - 2 * var(--gut)) / 4.9),236px)/.92 var(--brand);letter-spacing:-.01em;
  font-optical-sizing:none;  /* after "font", which turns it back to auto: the display cut's hairlines vanish at this size */
  background:linear-gradient(100deg,#7F5527 0%,#CDA46E 38%,#9C7240 62%,#CDA46E 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;opacity:.3}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .foot-mark{view-timeline:--mark block}
    .foot-mark::before{animation:mark-rise linear both;animation-timeline:--mark;animation-range:entry 0% entry 100%}
  }
}
@keyframes mark-rise{from{translate:0 55%;opacity:0}}

/* ---- v1.6.0 (Ashish, 4 Nov: "the icons are not premium and still this complete website is not in proper formatting
   ... needs more polish and luxuriousness"). Finishing touches; the bigger changes are made in place above: icons,
   buttons, header, captions, arrows, FAQ, contact list, steps, phone bar. ---- */
::selection{background:rgba(205,164,110,.38);color:var(--ink)}
.hero ::selection,.phero ::selection,.process ::selection,.close ::selection,.band ::selection,.cost ::selection,.foot ::selection{background:rgba(205,164,110,.45);color:#fff}
/* every picture sits in its own frame (build.py: .pic-in), so a picture drawing closer stays inside it and never
   slides over its caption; gallery and material pictures draw closer slowly when pointed at */
.pic-in{display:block;overflow:hidden;overflow:clip}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .gallery figure:hover img,.mat-grid figure:hover img{transform:scale(1.035)}
}
.close .cta .btn{min-width:220px}
/* footer: labels and links with more air */
.foot .label{margin-bottom:16px}
.foot-links li{margin-bottom:8px}
.foot a{transition:color .25s}
/* form choices: square and quiet, like the buttons */
.chips span{border-radius:0;min-height:42px;padding:0 16px;transition:border-color .2s,background .2s,color .2s}
.chips span:hover{border-color:var(--bronze-d)}
input,select{border-radius:0}

/* Pictures settle with the scroll (v1.6.0): each one is on the page from the start and eases from a touch closer
   (1.08) to its place as it comes up the screen. Tied to the scroll position, not a timer, so it never lags behind
   a quick thumb, plays again both ways by itself, and runs off the main thread. The frame (.pic-in) keeps it inside.
   Older browsers and reduced motion: the picture simply stands still. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .gallery .pic-in img,.mat-grid .pic-in img,.work-grid .pic-in img,.proj-grid .pic-in img,.site-grid .pic-in img,.sec .pic-in img{
      animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  }
}
@keyframes settle{from{scale:1.08}to{scale:1}}

/* ---- v1.7.0: live forms, Plan my home, Draw my kitchen, the thank-you page ---- */
[hidden]{display:none!important}  /* .btn and friends set display, which would beat the browser's own [hidden] */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.opt{font-weight:400;color:var(--muted)}
.form-err{margin:0;padding:12px 14px;border-left:2px solid #A33A2B;background:#FBEDEA;color:#7A2418;font-size:.95rem}
input[aria-invalid="true"]{border-color:#A33A2B;box-shadow:0 0 0 1px #A33A2B}
.visit-pick .chips+.chips{margin-top:8px}
.calc .more{justify-self:start;margin-top:8px}
.contact-copy .more{margin-top:4px}

/* Plan my home: one question per screen with the script, all of them in a column without it */
.planner{padding-top:clamp(48px,7vw,96px)}
.plan{max-width:1000px;margin:0 auto;display:grid;gap:28px}
.pbar{display:none}
.plan-on .pbar{display:block;position:relative;height:2px;background:var(--line)}
.plan-on .pbar span{position:absolute;left:0;top:0;bottom:0;width:16.7%;background:var(--bronze-d);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.pstep{margin:0;padding:0;border:0;min-width:0;display:grid;gap:22px}
.plan:not(.plan-on) .pstep+.pstep{padding-top:44px;border-top:1px solid var(--line)}
.plan-on .pstep{display:none}
.plan-on .pstep.on{display:grid;animation:pstep-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes pstep-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.plan-on .pstep.on{animation:none}.plan-on .pbar span{transition:none}}
.pstep:focus{outline:none}
.q{display:block;padding:0;margin:0 0 4px;font:var(--b-wt) clamp(1.9rem,3.8vw,2.8rem)/1.1 var(--brand);color:var(--ink)}
.pno{display:block;margin-bottom:14px;font:600 .78rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-d)}
.pstep>.small{margin:-6px 0 0}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:760px){.pick{grid-template-columns:repeat(3,1fr);gap:16px}}
.pick-text{grid-template-columns:1fr}
@media (min-width:640px){.pick-text{grid-template-columns:1fr 1fr}}
.pcard{position:relative;display:block;min-width:0}
.pcard input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.pcard-in{position:relative;display:flex;flex-direction:column;height:100%;padding:18px 16px;border:1px solid var(--line);background:#fff;cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s}
.pcard-in .draw{color:var(--bronze-d);margin-bottom:14px}
.pcard-in b{font:var(--b-wt) 1.15rem/1.25 var(--brand);padding-right:22px}
.pcard-in small{display:block;margin-top:6px;color:var(--muted);font-size:.9rem;line-height:1.45}
.pcard:hover .pcard-in{border-color:var(--bronze-l)}
.pcard input:checked+.pcard-in{border-color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--ink)}
.pcard input:checked+.pcard-in::after{content:"";position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23F3EEE6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.pcard input:focus-visible+.pcard-in{outline:2px solid var(--bronze-d);outline-offset:2px}
.pick-sm .pcard-in{padding:14px 12px}
.pick-sm .pcard-in .draw{max-width:170px;margin-bottom:10px}  /* six rooms on one screen, not two */
.pick-sm .pcard-in b{font-size:1rem}
.pick-text .pcard-in{padding:20px 20px 22px}
.pstep .more-row{margin:0}
.pnav{display:none}
.plan-on .pnav{display:flex;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.pnav [data-next]{margin-left:auto;min-width:160px}

/* the last step: their plan and the design fee on slate, then the number and the visit */
.plan-end{display:grid;gap:28px}
@media (min-width:900px){.plan-end{grid-template-columns:5fr 6fr;gap:48px;align-items:start}}
.plan-out{background:var(--ink);color:var(--on-ink);padding:clamp(22px,3vw,34px)}
.plan-sum{display:grid;margin:0 0 20px}
.plan-sum div{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:9px 0;border-bottom:1px solid rgba(205,164,110,.18);font-size:.95rem}
.plan-sum dt{color:var(--on-ink-2)}
.plan-sum dd{color:var(--paper);overflow-wrap:anywhere}
.plan-price{border-top:1px solid rgba(205,164,110,.35)}
.plan-price div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:16px 0;border-bottom:1px solid rgba(205,164,110,.22)}
.plan-price dt{color:var(--on-ink)}
.plan-price dd{font:500 1.3rem/1.25 var(--brand);color:var(--paper);text-align:right}
.plan-out .small{color:var(--on-ink-2);margin:16px 0 0}
.plan-out .todo{color:var(--bronze-l);border-color:rgba(205,164,110,.55);background:rgba(205,164,110,.08)}
.plan-get{display:grid;gap:18px;min-width:0}
.plan-get .label{color:var(--bronze-d);margin:0}
.plan-get>p{margin:0}
.plan-get .btn,.kd-you .btn{justify-self:start;min-width:220px}
@media (max-width:480px){.plan-get .btn,.kd-you .btn,.pnav .btn{min-width:0;flex:1}}

/* Draw my kitchen: the plan draws itself to scale as the walls are typed */
.kd{display:grid;gap:32px}
.kd-grid{display:grid;gap:28px}
@media (min-width:900px){.kd-grid{grid-template-columns:5fr 7fr;gap:56px;align-items:start}}
.kd-controls{display:grid;gap:22px;min-width:0}
.kd-walls{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.kd-plan{margin:0;min-width:0;background:#fff;border:1px solid var(--line);padding:clamp(14px,3vw,28px)}
.kd-art{color:var(--bronze-d)}
.draw.kd-svg{aspect-ratio:auto;height:auto;max-height:440px}
.kd-svg .kc{fill:currentColor;fill-opacity:.09}
.kd-t{fill:var(--ink);font-family:var(--sans);font-weight:600;letter-spacing:.02em}
.kd-plan figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font:450 1rem/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--text)}  /* not the small capitals of a picture caption */
.kd-run b,.kd-price b{font:500 1.35rem/1.2 var(--brand);color:var(--ink)}
.kd-plan .label{color:var(--bronze-d);margin-right:6px}
.kd-plan .small{flex-basis:100%;margin:0}
.kd-get{display:grid;gap:24px;background:var(--paper);border:1px solid var(--line);padding:clamp(20px,4vw,36px)}
@media (min-width:900px){.kd-get{grid-template-columns:5fr 7fr;gap:56px}}
.kd-get .label{color:var(--bronze-d)}
.kd-get p:last-child{margin-bottom:0}
.kd-you{display:grid;gap:18px;min-width:0}

/* the thank-you page */
.ty-sent h2{margin-bottom:28px}
.ty-sum{white-space:pre-line;max-width:40em;margin:0;padding:20px 22px;background:var(--card);border:1px solid var(--line);font-size:1.02rem}

/* ---- v1.7.1 (Ashish, 5 Nov: "small issues ... polish them", and smoother motion) ---- */
/* About: who started it, on a line of its own */
.lede-sign{display:block;margin-top:14px;font-weight:600;color:var(--on-ink);letter-spacing:.01em}
/* Picture captions in two neat lines: the small label, then the room (build.py cap()) */
figcaption.cap2{letter-spacing:0;text-transform:none}
.pic>figcaption.cap2::before,.draft-pic>figcaption.cap2::before{display:none}
.cap2 .cap-k{display:block;font:600 .66rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-d)}
.cap2 .cap-k::before{content:"";display:inline-block;width:18px;height:1px;margin-right:10px;vertical-align:.3em;background:var(--bronze-d)}
.cap2 .cap-n{display:block;margin-top:4px;padding-left:28px;font:var(--b-wt) 1.06rem/1.35 var(--brand);font-optical-sizing:none;
  color:var(--ink);transition:color .25s}
.g-link:hover .cap-n{color:var(--bronze-d)}
/* Footer: the address in two lines, the hours set apart, directions as a link with its arrow */
.foot-addr{line-height:1.6}
.foot .foot-hours{display:flex;align-items:baseline;gap:12px;margin:14px 0 10px;padding-top:12px;border-top:1px solid rgba(205,164,110,.22);
  color:var(--on-ink)}
.foot-hours span{font:600 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-l)}
.foot-visit .more{display:inline-flex;align-items:center;gap:10px;color:var(--on-ink)}
/* ---- v1.8.0 (5 Nov: the client's pricing guide) ---- */
/* The two material ranges under a section heading: a small label over each, hairlines between */
.ranges{margin:26px 0 0;border-top:1px solid var(--line);max-width:34rem}
.ranges div{padding:13px 0 14px;border-bottom:1px solid var(--line)}
.ranges dt{font:600 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-d);margin-bottom:5px}
.ranges dd{font-size:.95rem;line-height:1.5;color:var(--muted)}
/* ---- v1.8.1 (5 Nov: the client asked for the original logo, not the white one) ---- */
/* The footer logo in its own gold and black, straight on the slate (Ashish: "put the original on dark ... later the
   client will decide"). Its black letters are faint on slate; a paper plate behind it was tried and not kept. */