@font-face{font-family:"FH Display";src:url("/fonts/fh-display-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FH Display";src:url("/fonts/fh-display-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"FH Sans";src:url("/fonts/fh-sans-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FH Sans";src:url("/fonts/fh-sans-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
:root{
  --green:#0A0A0B;
  --green-2:#111113;
  --green-3:#060607;
  --brass:#D4AA55;
  --brass-hi:#E6C478;
  --brass-deep:#8A6A2C;
  --cream:#F5F5F4;
  --cream-soft:rgba(245,245,244,.64);
  --line:rgba(255,255,255,.09);
  --card:rgba(255,255,255,.028);
  --card-hi:rgba(255,255,255,.05);
  --paper:#F4EFE4;
  --paper-2:#E8E0CF;
  --kraft:#E0C79B;
  --ink:#1B1A17;
  --ink-soft:#5C574D;
  --ink-line:rgba(27,26,23,.16);
  --open:#2F7A55;
  --shut:#A4473B;
  --display:"FH Display","Avant Garde Gothic","Century Gothic",Futura,sans-serif;
  --sans:"FH Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(1.25rem,5vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--green);color:var(--cream);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset,legend{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--brass);color:var(--green)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:30;padding:.75rem 1rem;background:var(--brass);color:var(--green);font-weight:700;text-decoration:none;border-radius:4px}
.skip:focus{top:1rem}

/* Logo: an F that is also a key */
.logo{display:inline-flex;align-items:center;gap:.5rem;color:var(--cream);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-.02em;line-height:1}
.logo .mark{height:1.5em;width:auto;color:var(--brass);flex:none}
.logo:hover .mark{color:var(--brass-hi)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:0 1.5rem;border:1px solid transparent;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:.9375rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .12s ease}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}
.btn-gold{background:var(--brass);color:var(--green)}
.btn-gold:hover{background:var(--brass-hi)}
.btn-gold:disabled{opacity:.7;cursor:progress}
.btn-line{border-color:var(--line);background:transparent;color:var(--cream)}
.btn-line:hover{border-color:var(--brass)}
.btn-ink{background:var(--green);color:var(--paper)}
.btn-ink:hover{background:var(--green-2)}
.btn-sm{min-height:2.75rem;padding:0 1.1rem}
.textlink{appearance:none;background:none;border:0;padding:.5rem 0;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.22em;cursor:pointer}

/* Header */
.top{position:sticky;top:0;z-index:20;background:rgba(10,10,11,.97);border-bottom:1px solid var(--line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.top{background:rgba(10,10,11,.8);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}}
.top-in{display:flex;align-items:center;gap:1.75rem;min-height:4.25rem;padding-top:env(safe-area-inset-top)}
.top .logo{font-size:1.45rem}
.nav{display:none}
.nav a{font-size:.9375rem;color:var(--cream-soft);text-decoration:none;padding:.5rem 0}
.nav a:hover{color:var(--cream)}
.top .btn{margin-left:auto}

/* Hero */
.hero{padding-block:clamp(2.5rem,7vw,5rem) clamp(4.5rem,10vw,7rem);overflow-x:hidden;overflow-x:clip}
.hero-grid{display:grid;gap:3.25rem;align-items:center}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(3.3rem,5.2vw + 1rem,5.6rem);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.hero-sub{margin-top:1.5rem;font-size:clamp(1.125rem,.6vw + 1rem,1.3125rem);line-height:1.55;color:var(--cream-soft);max-width:34rem}
.hero-where{margin-top:.9rem;font-size:.9375rem;color:var(--cream-soft)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* The key tag: a key, a string and a paper tag that swings into place */
.keytag{position:relative;width:min(100%,23rem);aspect-ratio:4/5;margin:0 auto}
.keytag-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kt{position:absolute;left:17.5%;top:25%;width:65%;height:70%;padding:2.9rem 1.25rem 1.2rem;background:var(--kraft);color:var(--ink);clip-path:polygon(16% 0,84% 0,100% 11%,100% 100%,0 100%,0 11%);transform:rotate(-4deg);transform-origin:50% 7.14%;display:flex;flex-direction:column}
.kt::before{content:"";position:absolute;left:50%;top:7.14%;width:2.1rem;height:2.1rem;margin:-1.05rem 0 0 -1.05rem;border-radius:50%;background:#F4EFE4}
.kt::after{content:"";position:absolute;left:50%;top:7.14%;width:1.05rem;height:1.05rem;margin:-.525rem 0 0 -.525rem;border-radius:50%;background:var(--green)}
.kt-title{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.2;letter-spacing:-.01em;padding-bottom:.7rem;border-bottom:1.5px solid rgba(27,26,23,.55);overflow-wrap:anywhere}
/* each row sizes on its own, so a long label and a long value on different rows never collide */
.kt dl{margin-top:.8rem;font-size:min(.9375rem,4vw);line-height:1.35}
.kt dt{float:left;clear:left;margin:.5rem .8rem 0 0;color:#6B5A3C}
.kt dd{margin-top:.5rem;text-align:right;white-space:nowrap;font-family:var(--display);font-weight:700;font-variant-numeric:lining-nums}
.kt dt:first-child,.kt dt:first-child + dd{margin-top:0}
.kt-foot{margin-top:auto;padding-top:.7rem;border-top:1px dashed rgba(27,26,23,.4);font-size:.875rem;color:#4A3F2C}

/* Sections */
.section{padding-block:clamp(4.5rem,10vw,8.5rem)}
.alt{background:var(--green-2)}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(2.15rem,4.2vw + 1rem,4.25rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.lead{margin-top:1.25rem;font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem);color:var(--cream-soft);max-width:38rem}
.fine{font-size:.875rem;color:var(--cream-soft)}
.diamonds li{position:relative;padding-left:1.4rem}
.diamonds li + li{margin-top:.55rem}
.diamonds li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.42rem;height:.42rem;background:var(--brass);transform:rotate(45deg)}

/* What I make */

/* Demo: one booking website to try, in a phone. On small screens it opens full screen. */
.demo-sec{background:var(--green-3)}
.demo-grid{display:grid;gap:2.75rem;align-items:center}
.demo-steps{margin-top:2rem;display:grid;gap:1.1rem;counter-reset:dstep;max-width:34rem}
.demo-steps li{counter-increment:dstep;display:grid;grid-template-columns:2.1rem 1fr;gap:1rem;color:var(--cream-soft)}
.demo-steps li::before{content:counter(dstep);display:grid;place-items:center;width:2.1rem;height:2.1rem;border:1px solid var(--brass);border-radius:50%;color:var(--brass);font-family:var(--display);font-weight:700;font-size:.9375rem;line-height:1}
.demo-steps span{padding-top:.2rem}
.demo-steps b{color:var(--cream)}
.demo-copy .fine{margin-top:1.75rem}
.demo-device{position:relative;justify-self:center;width:100%;max-width:24rem;height:30rem;height:min(30rem,66svh)}
.demo-screen{position:absolute;inset:0;overflow:hidden;border:9px solid #000;border-radius:2.4rem;background:#000;box-shadow:0 0 0 1px rgba(245,245,244,.16),0 2rem 4rem rgba(0,0,0,.55)}
.demo-screen iframe{display:block;width:100%;height:100%;border:0;border-radius:1.85rem;background:#F6F1E9}
.demo-shield{appearance:none;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.7rem;padding:1.5rem 1.25rem 2.1rem;border:0;border-radius:1.85rem;background:linear-gradient(to bottom,rgba(6,6,7,0) 25%,rgba(6,6,7,.93) 63%,#000 82%);color:var(--cream);font:inherit;text-align:center;cursor:pointer}
.demo-shield .btn{pointer-events:none}
.demo-shield small{font-size:.8125rem;color:var(--cream-soft)}
.demo-shield:focus-visible{outline:2px solid var(--brass);outline-offset:-6px}
/* Opened on a phone: a sheet over the dimmed page, about two thirds high; the handle drags it up to full screen */
.demo-backdrop{position:fixed;inset:0;z-index:59;background:rgba(6,6,7,.62);touch-action:none}
.demo-grab{display:none}
.demo-screen.is-full{position:fixed;inset:auto 0 0 0;z-index:60;height:64vh;height:64dvh;border:0;border-radius:20px 20px 0 0;padding:2.75rem env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--green-3);box-shadow:0 -1rem 2.5rem rgba(0,0,0,.5);transition:height .28s cubic-bezier(.3,.7,.35,1),border-radius .28s ease}
.demo-screen.is-full.is-tall{height:100vh;height:100dvh;border-radius:0;padding-top:calc(2.75rem + env(safe-area-inset-top))}
.demo-screen.is-full iframe{border-radius:0}
.demo-screen.is-full .demo-grab{appearance:none;display:grid;place-items:center;position:absolute;top:0;left:0;right:0;height:2.75rem;padding:0;border:0;background:transparent;cursor:grab;touch-action:none}
.demo-screen.is-full.is-tall .demo-grab{top:env(safe-area-inset-top)}
.demo-grab::before{content:"";width:2.75rem;height:.32rem;border-radius:99px;background:rgba(245,245,244,.5)}
.demo-grab:focus-visible{outline:2px solid var(--brass);outline-offset:-4px}
html.demo-open,html.demo-open body{overflow:hidden}
/* The demo opens full screen from anywhere on the page: the reveal and tilt effects on its frame would otherwise
   make it open off-screen or invisible (a transformed or faded parent carries "fixed" elements with it) while the page is locked. */
html.demo-open .demo-device,html.demo-open .demo-grid,html.demo-open .demo-sec{transform:none!important;filter:none!important;opacity:1!important;visibility:visible!important;clip-path:none!important;perspective:none!important;will-change:auto!important;transition:none!important;animation:none!important}
@media (prefers-reduced-motion:no-preference){
  .demo-screen.is-full{animation:sheet-up .3s cubic-bezier(.3,.7,.35,1)}
  .demo-backdrop{animation:fade-in .3s ease-out}
}
@media (prefers-reduced-motion:reduce){.demo-screen.is-full{transition:none}}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes fade-in{from{opacity:0}}

/* Rent or own */

/* How it works */
/* A timeline: a line runs down the steps and fills with brass as you scroll past (adapted from a 21st.dev timeline, CSS only) */
.steps{position:relative;margin-top:2.75rem;display:grid;gap:2.5rem;counter-reset:step}
.steps::before,.steps::after{content:"";position:absolute;left:1.375rem;top:1.4rem;bottom:1.4rem;width:2px;margin-left:-1px;border-radius:2px}
.steps::before{background:var(--line)}
.steps::after{background:linear-gradient(to bottom,var(--brass-hi),var(--brass));transform-origin:top}
.steps li{position:relative;z-index:1;counter-increment:step;display:grid;grid-template-columns:2.75rem 1fr;align-content:start;gap:.35rem 1.25rem}
.steps li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1.5px solid var(--brass);border-radius:50%;background:var(--green-3);font-family:var(--display);font-weight:700;font-size:1.125rem;line-height:1;color:var(--brass)}
.steps h3{padding-top:.35rem;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2vw + 1rem,2.25rem);line-height:1.1;letter-spacing:-.025em}
.steps p{color:var(--cream-soft);max-width:34rem}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .steps{view-timeline:--steps block}
    .steps::after{transform:scaleY(0);animation:beam linear both;animation-timeline:--steps;animation-range:cover 20% cover 70%}
  }
}
@keyframes beam{to{transform:scaleY(1)}}

/* Prices and extras */
.extras{width:100%;max-width:40rem;margin-top:2.25rem;border-collapse:collapse}
.extras th,.extras td{padding:.85rem 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:baseline}
.extras td{text-align:right;white-space:nowrap;padding-left:1rem;font-variant-numeric:lining-nums tabular-nums;color:var(--brass)}
.terms{margin-top:2rem;max-width:40rem;color:var(--cream-soft)}

/* Questions */
.faq{margin-top:2.25rem;max-width:46rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-family:var(--display);font-size:1.25rem;line-height:1.3;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.7rem;height:.7rem;border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:translateY(-25%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(15%) rotate(-135deg)}
.faq details p{padding-bottom:1.25rem;color:var(--cream-soft);max-width:40rem}

/* About */
.about p{margin-top:1rem;font-size:1.125rem;max-width:38rem;color:var(--cream-soft)}

/* Quote form */
.quote-grid{display:grid;gap:2.5rem}
.form{display:grid;gap:1.1rem}
.field label{display:block;margin-bottom:.4rem;font-size:.875rem;font-weight:700;color:var(--cream-soft)}
.field input,.field textarea,.field select{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:4px;background-color:rgba(245,245,244,.05);color:var(--cream);font:400 1rem/1.4 var(--sans)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 50%,calc(100% - .95rem) 50%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.5rem}
.field select option{color:var(--ink);background:#fff}
.field textarea{min-height:7.5rem;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.optional{font-weight:400;color:rgba(245,245,244,.6)}
.form-status{font-size:.9375rem}
.form-status[data-state="error"]{font-weight:700}
.hp{display:none}
.goldlink{color:var(--brass);font-weight:700}

/* Footer */
.foot{background:var(--green-3);padding-block:clamp(3.5rem,8vw,6rem) 2.5rem;border-top:1px solid var(--line)}
.foot .logo{font-size:clamp(2.2rem,3vw + 1rem,3.25rem)}
.foot p{margin-top:.6rem;font-size:.9375rem;color:var(--cream-soft)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 1.5rem;margin-top:1.1rem;font-size:.9375rem}
.foot-links a{display:inline-block;padding-block:.7rem;color:var(--cream-soft);text-decoration:none}
.foot-links a:hover{color:var(--cream);text-decoration:underline}
.foot small{display:block;margin-top:1.75rem;font-size:.8125rem;color:rgba(245,245,244,.62)}

@media (min-width:48rem){
  .steps li{grid-template-columns:2.75rem minmax(10rem,17rem) 1fr;column-gap:2rem}
  .steps li::before{grid-row:auto}
  .steps p{padding-top:.55rem}
  .quote-grid{grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}
}
@media (min-width:60rem){
  .nav{display:flex;gap:1.75rem;margin-left:auto}
  .top .btn{margin-left:0}
  .hero-grid{grid-template-columns:1.2fr .8fr;gap:4rem}
  .keytag{margin-right:0;width:min(100%,27rem)}
  .hero:not(.page-hero){display:flex;align-items:center;min-height:calc(100svh - 4.25rem);padding-block:3rem 4rem}
  .hero:not(.page-hero) > .wrap{width:100%}
  .demo-grid{grid-template-columns:auto minmax(0,1fr);gap:5rem}
  .demo-device{order:-1;width:25.5rem;max-width:none;height:min(50rem,calc(100vh - 8rem))}
  .demo-shield{display:none}
}

/* One moment of motion: the tag swings on its string and settles */
@media (prefers-reduced-motion:no-preference){
  .kt{animation:swing 1.8s cubic-bezier(.25,.6,.3,1) .2s both}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@keyframes swing{0%{transform:rotate(22deg)}30%{transform:rotate(-12deg)}55%{transform:rotate(5deg)}78%{transform:rotate(-6deg)}100%{transform:rotate(-4deg)}}

/* Price calculator */
.calc{display:grid;gap:2.75rem;margin-top:2.5rem}
.calc fieldset + fieldset{margin-top:2.25rem}
.calc legend{font-family:var(--display);font-size:1.375rem;line-height:1.3;margin-bottom:.9rem}
.choices{display:grid;gap:.6rem}
.choice{position:relative;display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.choice:hover{border-color:rgba(210,166,79,.6)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice b{font-size:1.0625rem}
.choice span{grid-column:1;color:var(--cream-soft);font-size:.9375rem}
.choice em{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;font-family:var(--display);font-size:1.35rem;color:var(--brass);white-space:nowrap}
.choice:has(input:checked){border-color:var(--brass);background:rgba(210,166,79,.08);box-shadow:inset 0 0 0 1px var(--brass)}
.choice:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:3px}
.stepper{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.stepper button{appearance:none;width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--cream);font-size:1.5rem;line-height:1;cursor:pointer}
.stepper button:hover{border-color:var(--brass)}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{font-family:var(--display);font-size:2.4rem;line-height:1;min-width:2ch;text-align:center}
.step-note{color:var(--cream-soft)}
.stepper .step-note{flex-basis:100%}
.checks{display:grid;gap:.5rem}
.check{display:flex;align-items:flex-start;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.check:hover{border-color:rgba(210,166,79,.6)}
.check input{width:1.2rem;height:1.2rem;margin:.15rem 0 0;accent-color:#D2A64F;flex:none}
.check span{flex:1}
.check em{font-style:normal;color:var(--brass);white-space:nowrap}
.calc .step-note + .money{margin-top:.9rem}
.money{display:flex;align-items:center;max-width:18rem;border:1px solid var(--line);border-radius:4px;background:rgba(245,245,244,.05)}
.money span{padding:0 .25rem 0 1rem;color:var(--cream-soft)}
.money .per{padding:0 1rem 0 .25rem}
.money input{flex:1;min-width:0;border:0;background:transparent;padding:.85rem .2rem;color:var(--cream);font:400 1.0625rem var(--sans)}
.money input:focus{outline:none}
.money:focus-within{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.calc-bar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));background:var(--paper);color:var(--ink);box-shadow:0 -.5rem 1.5rem rgba(0,0,0,.3);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.calc-bar.show{transform:none;visibility:visible;transition:transform .25s ease}
.calc-bar p{font-size:.875rem;color:var(--ink-soft);line-height:1.2}
.calc-bar b{display:block;font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--ink)}
.calc-bar .btn{min-height:2.75rem;padding:0 1.1rem}

.slip{position:relative;background:var(--paper);color:var(--ink);border-radius:3px;padding:1.6rem 1.5rem 1.4rem;box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.35);align-self:start}
.slip::before{content:"";position:absolute;inset:.45rem;border:1px solid rgba(27,26,23,.28);pointer-events:none}
.slip::after{content:"";position:absolute;inset:.65rem;border:1px solid rgba(27,26,23,.12);pointer-events:none}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--ink-line)}
.slip-title{font-family:var(--display);font-size:1rem;letter-spacing:.3em;text-transform:uppercase}
.slip-date{font-size:.8125rem;color:var(--ink-soft)}
.slip-lines{margin-top:.5rem}
.slip-lines li{display:flex;align-items:baseline;gap:.5rem;padding:.45rem 0;font-size:.9375rem}
.slip-lines .dots{flex:1;min-width:1rem;border-bottom:1px dotted rgba(27,26,23,.45);transform:translateY(-.3em)}
.slip-lines b{font-weight:400;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.slip-lines .later{color:var(--ink-soft)}
.slip-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.5rem;padding-top:.8rem;border-top:2px solid var(--ink)}
.slip-total span{font-family:var(--display);font-size:1.125rem}
.slip-total b{font-family:var(--display);font-weight:400;font-size:clamp(2rem,7vw,2.6rem);line-height:1;font-variant-numeric:lining-nums}
.slip-monthly{margin-top:.35rem;text-align:right;font-size:.875rem;color:var(--ink-soft)}
.slip-pay{margin-top:1rem;font-size:.9375rem}
.slip-payback{margin-top:.8rem;padding:.75rem .85rem;background:#FFF7DF;border-radius:6px;font-size:.9375rem}
.slip .btn{width:100%;margin-top:1.2rem}
.slip-fine{margin-top:.8rem;font-size:.8125rem;color:var(--ink-soft);text-align:center}

@media (min-width:60rem){
  .calc{grid-template-columns:1.05fr .95fr;gap:4.5rem}
  .slip{position:sticky;top:6.5rem}
  .calc-bar{display:none}
}

/* Helper: instant answers in the bottom right */
.helper-launch{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:calc(1rem + env(safe-area-inset-bottom));z-index:25;display:inline-flex;align-items:center;gap:.6rem;min-height:3.5rem;padding:.45rem 1.15rem .45rem .45rem;border:0;border-radius:999px;background:var(--brass);color:var(--green);font-weight:700;font-size:.9375rem;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.35);cursor:pointer;transition:bottom .25s ease,background-color .2s ease}
.helper-launch:hover{background:var(--brass-hi)}
.helper-launch:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.helper-launch .bubble{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--green);color:var(--brass)}
.helper-launch .bubble svg{width:1.3rem;height:1.3rem}
.helper-launch[aria-expanded="true"]{visibility:hidden}
body.bar-up .helper-launch{bottom:calc(5.4rem + env(safe-area-inset-bottom))}
@media (max-width:39.99rem){body.slide-near .helper-launch,body.slide-near .helper-pop{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}}
.helper-launch{transition:bottom .25s ease,background-color .2s ease,opacity .2s ease}
.helper{position:fixed;z-index:26;right:max(1rem,env(safe-area-inset-right));bottom:calc(1rem + env(safe-area-inset-bottom));width:min(23.5rem,calc(100vw - 2rem));height:min(38rem,calc(100vh - 2rem));display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 1.5rem 3rem rgba(0,0,0,.45)}
.helper :focus-visible{outline:2px solid var(--green);outline-offset:2px}
.helper-head{display:flex;align-items:center;gap:.7rem;padding:.85rem .9rem .85rem 1rem;background:var(--green);color:var(--cream)}
.helper-head .mark{height:2.1rem;width:auto;color:var(--brass);flex:none}
.helper-title{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.2}
.helper-title span{display:block;margin-top:.15rem;font-family:var(--sans);font-weight:400;font-size:.75rem;color:var(--cream-soft)}
.helper-close{margin-left:auto;appearance:none;flex:none;width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer}
.helper-close:focus-visible{outline-color:var(--brass)}
.helper-close svg{width:1rem;height:1rem}
.helper-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.msg{max-width:88%;padding:.65rem .85rem;border-radius:14px;font-size:.9375rem;line-height:1.45;overflow-wrap:anywhere}
.msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--ink-line);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--green);color:var(--cream);border-bottom-right-radius:4px}
.msg p + p,.msg p + ul,.msg p + ol{margin-top:.45rem}
.msg ol{list-style:decimal;padding-left:1.2rem}
.msg ul{list-style:disc;padding-left:1.2rem}
.msg li + li{margin-top:.25rem}
.acts{display:flex;flex-wrap:wrap;gap:.4rem;align-self:flex-start}
.act{appearance:none;min-height:2.4rem;padding:.35rem .85rem;border:1px solid var(--green);border-radius:999px;background:transparent;color:var(--green);font-size:.8125rem;font-weight:700;cursor:pointer}
@media (hover:hover){.act:hover{background:var(--green);color:var(--cream)}}
.act.go{background:var(--green);color:var(--cream)}
@media (hover:hover){.act.go:hover{background:var(--green-2)}}
.act.ask{border-style:dashed}
.typing{align-self:flex-start;display:flex;gap:.3rem;padding:.8rem .95rem;background:#fff;border:1px solid var(--ink-line);border-radius:14px;border-bottom-left-radius:4px}
.typing i{width:.45rem;height:.45rem;border-radius:50%;background:var(--ink-soft);opacity:.5}
.helper-form{display:flex;gap:.5rem;padding:.7rem .7rem .4rem;border-top:1px solid var(--ink-line);background:var(--paper-2)}
.helper-form input{flex:1;min-width:0;min-height:2.9rem;padding:.55rem .95rem;border:1px solid var(--ink-line);border-radius:999px;background:#fff;color:var(--ink);font-size:1rem}
.helper-send{appearance:none;flex:none;width:2.9rem;height:2.9rem;border:0;border-radius:50%;background:var(--green);color:var(--brass);display:grid;place-items:center;cursor:pointer}
.helper-send svg{width:1.15rem;height:1.15rem}
.helper-note{padding:.1rem 1rem .6rem;background:var(--paper-2);font-size:.6875rem;color:var(--ink-soft);text-align:center}
@media (max-width:39.99rem){
  .helper-launch{padding:.45rem}
  .helper-launch .label{display:none}
  .helper{left:.5rem;right:.5rem;bottom:calc(.5rem + env(safe-area-inset-bottom));width:auto;height:min(85vh,40rem)}
}
@media (prefers-reduced-motion:no-preference){
  .helper{animation:rise .22s ease-out}
  .typing i{animation:blink 1s infinite}
  .typing i:nth-child(2){animation-delay:.15s}
  .typing i:nth-child(3){animation-delay:.3s}
}
@keyframes rise{from{opacity:0;transform:translateY(1rem)}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.helper-pop{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:calc(5.6rem + env(safe-area-inset-bottom));z-index:24;width:min(19.5rem,calc(100vw - 2rem));padding:1rem 1rem .95rem;background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:0 1rem 2.2rem rgba(0,0,0,.4);transition:bottom .25s ease}
.helper-pop::after{content:"";position:absolute;right:1.7rem;bottom:-.45rem;width:1rem;height:1rem;background:var(--paper);border-radius:2px;transform:rotate(45deg)}
.helper-pop :focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pop-text{padding-right:2rem;font-size:.9375rem;line-height:1.45}
.pop-text b{display:block;margin-bottom:.2rem;font-family:var(--display);font-size:1.1rem;line-height:1.2}
.pop-chips{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;margin-top:.8rem}
.pop-close{position:absolute;top:.45rem;right:.45rem;width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:transparent;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer}
.pop-close:hover{background:var(--paper-2);color:var(--ink)}
.pop-close svg{width:.9rem;height:.9rem}
.helper-launch .bubble{position:relative}
.helper-launch.nudge .bubble::after{content:"";position:absolute;top:.1rem;right:.1rem;width:.7rem;height:.7rem;border-radius:50%;background:#E0533D;box-shadow:0 0 0 2px var(--green)}
body.bar-up .helper-pop{bottom:calc(10rem + env(safe-area-inset-bottom))}
@media (max-width:39.99rem){.helper-pop::after{right:1.85rem}}
@media (prefers-reduced-motion:no-preference){.helper-pop{animation:pop .4s cubic-bezier(.3,1.3,.5,1) both;transform-origin:88% 100%}}
@keyframes pop{from{opacity:0;transform:translateY(.75rem) scale(.9)}}

/* ---------- Inner pages ---------- */
.nav a[aria-current="page"]{color:var(--cream);box-shadow:inset 0 -2px 0 var(--brass)}
.page-hero h1{font-size:clamp(2.2rem,7.4vw,3.9rem);line-height:1.04}
.hero-price{margin-top:1.5rem;font-family:var(--display);font-weight:700;font-size:1.375rem;line-height:1.3;color:var(--brass);font-variant-numeric:lining-nums}
.hero-price span{display:block;margin-top:.2rem;font-family:var(--sans);font-weight:400;font-size:.9375rem;color:var(--cream-soft)}

/* Booking page: the appointment card a barber hands you, stamped as it's booked */
.appt{position:relative;width:min(100%,22rem);margin:0 auto;padding:1.5rem .5rem 2rem}
.appt-card{position:relative;background:var(--paper);color:var(--ink);border-radius:6px;overflow:hidden;transform:rotate(-3deg);box-shadow:0 1.4rem 2.8rem rgba(0,0,0,.45),0 .15rem .4rem rgba(0,0,0,.25)}
.appt-shop{padding:.7rem 1.25rem;background:var(--green-3);color:var(--brass);font-family:var(--display);font-weight:700;font-size:.9375rem;letter-spacing:-.01em}
.appt-body{padding:1.1rem 1.25rem 1.2rem}
.appt-title{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.15;letter-spacing:-.02em}
.appt dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem .9rem;margin-top:1rem;align-items:baseline}
.appt dt{font-size:.875rem;color:var(--ink-soft)}
.appt dd{padding-bottom:.2rem;border-bottom:1px dotted rgba(27,26,23,.5);font-family:var(--display);font-weight:700;font-size:1.125rem;line-height:1.2}
.appt-foot{margin-top:1.1rem;font-size:.875rem;line-height:1.45;color:#4A453C}
.appt-stamp{position:absolute;right:1rem;top:8.4rem;padding:.3rem .8rem;border:3px double var(--green);border-radius:8px;color:var(--green);font-family:var(--display);font-weight:700;font-size:1.65rem;line-height:1;letter-spacing:.01em;transform:rotate(-14deg);opacity:.86;mix-blend-mode:multiply}

/* Websites page: a shop door sign that turns from Closed to Open */
.sign{width:min(100%,21rem);margin:0 auto;perspective:900px}
.sign-cord{display:block;width:62%;height:auto;margin:0 auto -1px;overflow:visible}
.sign-board{position:relative;aspect-ratio:8/5;transform-style:preserve-3d;transform-origin:50% 0}
.sign-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.45)}
.sign-face::before{content:"";position:absolute;inset:.55rem;border:2px solid currentColor;border-radius:9px;opacity:.55}
.sign-face b{font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,15vw,4.6rem);line-height:.95;letter-spacing:-.04em}
.sign-face span{order:-1;font-size:clamp(.9375rem,4vw,1.125rem);font-weight:700;letter-spacing:.01em}
.sign-open{background:var(--paper);color:var(--green)}
.sign-shut{background:var(--shut);color:var(--cream);transform:rotateY(180deg)}
.sign figcaption{margin-top:1.4rem;text-align:center;font-size:.9375rem;color:var(--cream-soft)}

/* Price boards: read like the price list on a shop wall */
.price-grid{display:grid;gap:3rem;margin-top:2.5rem}
.board{border-top:1px solid var(--brass)}
.board > li{padding-block:1.5rem;border-bottom:1px solid var(--line)}
.board-line{display:flex;align-items:baseline;gap:.75rem}
.board-line h3{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,4.4vw,1.75rem);line-height:1.2;letter-spacing:-.02em}
.board-line .dots{flex:1;min-width:1.5rem;border-bottom:2px dotted rgba(245,245,244,.35);transform:translateY(-.3em)}
.board-line b{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,6vw,2.5rem);line-height:1;color:var(--brass);white-space:nowrap;font-variant-numeric:lining-nums}
.board-line b small{font-size:.55em}
.board p{margin-top:.4rem;color:var(--cream-soft);max-width:34rem}
.board .btn{margin-top:1rem}
.board-head{margin-top:2.5rem;font-family:var(--display);font-weight:700;font-size:1.375rem;line-height:1.25}
.board-sm{margin-top:1rem;border-top-color:var(--line)}
.board-sm > li{padding-block:.95rem}
.board-sm .nm{font-size:1rem;line-height:1.4}
.board-sm .board-line b{font-size:1.35rem}
.price-side h3{font-family:var(--display);font-weight:700;font-size:1.375rem;line-height:1.25}
.price-side .diamonds{margin-top:1rem;color:var(--cream-soft)}
.price-side .terms{margin-top:1.5rem;font-size:.9375rem}
.price-side .goldlink{display:inline-block;margin-top:1.25rem}

/* Two lists side by side: what clients see, what you see */
.split{display:grid;gap:2.75rem;margin-top:2.5rem}
.split h3{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.2;padding-bottom:.9rem;border-bottom:1px solid var(--brass)}
.split .diamonds{margin-top:1.2rem;color:var(--cream-soft)}
.split .diamonds li + li{margin-top:.8rem}

/* What's included: open blocks under a brass rule, not cards */
.features{display:grid;gap:2rem 2.5rem;margin-top:2.5rem}
.features > div{padding-top:1rem;border-top:1px solid var(--brass)}
.features h3{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
.features p{margin-top:.5rem;color:var(--cream-soft)}
.try-line{margin-top:2.5rem;padding:1.1rem 1.25rem;border-left:3px solid var(--brass);background:rgba(245,245,244,.05);max-width:46rem}
.try-line a{color:var(--brass);font-weight:700}
.cross{margin-top:2.5rem;max-width:46rem;color:var(--cream-soft)}
.cross a{color:var(--brass);font-weight:700}

/* Plain pages: privacy, not found */
.prose{max-width:42rem}
.prose h1{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,7vw,3.2rem);line-height:1.08;letter-spacing:-.03em}
.prose h2{margin-top:2.5rem;font-family:var(--display);font-weight:700;font-size:1.375rem;line-height:1.3}
.prose p,.prose ul{margin-top:.9rem;color:var(--cream-soft)}
.prose ul{list-style:disc;padding-left:1.3rem}
.prose li + li{margin-top:.4rem}
.prose a{color:var(--brass)}
.prose .updated{margin-top:.75rem;font-size:.9375rem}

@media (min-width:48rem){
  .split{grid-template-columns:1fr 1fr;gap:4rem}
  .features{grid-template-columns:1fr 1fr}
}
@media (min-width:60rem){
  .features{grid-template-columns:repeat(3,1fr)}
  .price-grid{grid-template-columns:1.25fr .75fr;gap:5rem;align-items:start}
  .appt,.sign{margin-right:0}
}
@media (prefers-reduced-motion:no-preference){
  .appt-stamp{animation:stamp .5s cubic-bezier(.5,0,.75,0) .7s both}
  .appt-card{animation:thud .28s ease-out 1.2s both}
  .sign-board{animation:turn 1.5s cubic-bezier(.3,.7,.35,1) .5s both}
}
@keyframes stamp{0%{opacity:0;transform:rotate(-24deg) scale(2.1)}100%{opacity:.86;transform:rotate(-14deg) scale(1)}}
@keyframes thud{0%{transform:rotate(-3deg) translateY(0)}35%{transform:rotate(-3.4deg) translateY(3px)}100%{transform:rotate(-3deg) translateY(0)}}
@keyframes turn{0%{transform:rotateY(180deg)}25%{transform:rotateY(180deg)}80%{transform:rotateY(-14deg)}100%{transform:rotateY(0)}}
.form .fine a{color:var(--cream-soft)}
.form .fine a:hover{color:var(--cream)}
.foot-links a[aria-current="page"]{color:var(--cream)}

/* Planner in the helper: tick chips, then a summary slip with the estimate */
.act[aria-pressed="true"]{background:var(--green);color:var(--cream)}
.act[aria-pressed="true"]::before{content:"";display:inline-block;width:.32rem;height:.62rem;margin:0 .5rem .12rem 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.msg.plan-card{align-self:stretch;max-width:none;padding:1rem 1rem .9rem;background:#fff;border-radius:6px;border:1px solid var(--ink-line);box-shadow:0 .3rem .9rem rgba(27,26,23,.08)}
.plan-title{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.2}
.msg .plan-lines{list-style:none;padding:0;margin-top:.5rem}
.plan-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding:.4rem 0;border-bottom:1px dotted rgba(27,26,23,.35)}
.msg .plan-lines li + li{margin-top:0}
.plan-lines b{font-weight:400;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.plan-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.55rem;padding-top:.45rem;border-top:2px solid var(--ink)}
.msg p + .plan-total,.msg ul + .plan-total{margin-top:.55rem}
.plan-total span{font-family:var(--display);font-weight:700}
.plan-total b{font-family:var(--display);font-weight:700;font-size:1.65rem;line-height:1.1;font-variant-numeric:lining-nums}
.plan-sub{text-align:right;font-size:.8125rem;color:var(--ink-soft)}
.msg p + .plan-sub{margin-top:.1rem}
.plan-facts{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--ink-line);font-size:.875rem}
.plan-facts dt{color:var(--ink-soft)}
.plan-facts dd{overflow-wrap:anywhere}
.plan-pay{margin-top:.75rem;font-size:.875rem}
.msg p + .plan-fine{margin-top:.3rem}
.plan-fine{font-size:.75rem;color:var(--ink-soft)}

/* In the quote section: the way into the planner */
.plan-cta{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line);max-width:30rem}
.plan-cta p{color:var(--cream-soft)}
.plan-cta .btn{margin-top:1rem}

/* Work: sites shown on phones */
.shot{display:block;border:8px solid var(--green-3);border-radius:2rem;overflow:hidden;background:var(--green-2);box-shadow:0 1.4rem 2.8rem rgba(0,0,0,.45),0 0 0 1px rgba(245,245,244,.14)}
.shot img{display:block;width:100%;height:auto}
#work .goldlink{display:inline-block;margin-top:1.5rem}

.work-hero{padding-bottom:1rem}
.work-hero .hero-sub{max-width:40rem}
.work-sec{padding-top:2.5rem}
.work-list{display:grid;gap:4.5rem}
.work{display:grid;gap:2rem;align-items:center}
.work .shot{width:min(68vw,17rem);margin-inline:auto}
.work h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,6.5vw,2.8rem);line-height:1.05;letter-spacing:-.03em}
.work-kind{margin-top:.4rem;color:var(--brass);font-weight:700}
.work-what{margin-top:.9rem;max-width:34rem;color:var(--cream-soft)}
.work .diamonds{margin-top:1.1rem;color:var(--cream-soft)}
.work .diamonds li + li{margin-top:.5rem}
.work .actions{margin-top:1.6rem}

/* What you can count on */
.promises{background:var(--green-3);border-block:1px solid rgba(210,166,79,.35)}
/* Bento: tiles of different sizes, each with its own picture of the promise (adapted from a 21st.dev bento grid) */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2.5rem}
.tile{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;grid-column:span 2;min-height:15rem;padding:1.5rem;border:1px solid var(--line);border-radius:20px;background:rgba(245,245,244,.035);overflow:hidden;transition:border-color .3s ease,transform .3s ease}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(223,185,103,.22) 1px,transparent 1.5px) 0 0/14px 14px;opacity:0;transition:opacity .3s ease;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);mask-image:linear-gradient(to bottom,#000,transparent 75%)}
.tile:hover{border-color:rgba(210,166,79,.55)}
.tile:hover::before{opacity:1}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.tile:hover{transform:translateY(-3px)}}
.tile h3{font-family:var(--display);font-weight:700;font-size:1.375rem;line-height:1.2;letter-spacing:-.015em}
.tile p{margin-top:.45rem;color:var(--cream-soft);max-width:32rem}
.tile .tile-big{margin-top:0;font-family:var(--display);font-weight:700;font-size:clamp(4rem,9vw + 1rem,6.5rem);line-height:.9;letter-spacing:-.05em;color:var(--brass);font-variant-numeric:lining-nums}
.tile .tile-big span{display:block;margin-top:.6rem;font-family:var(--sans);font-weight:400;font-size:1rem;letter-spacing:0;color:var(--cream-soft)}
.tile .tile-stamp{margin-top:0;align-self:flex-start;display:grid;place-items:center;width:7.5rem;height:7.5rem;border:2px solid var(--brass);border-radius:50%;outline:1px solid rgba(210,166,79,.45);outline-offset:4px;transform:rotate(-12deg);font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1;color:var(--brass);text-align:center}
.tile .tile-stamp span{display:block;margin-bottom:.2rem;font-family:var(--sans);font-weight:400;font-size:.875rem;color:var(--cream-soft)}
.deed{align-self:flex-start;width:min(100%,19rem);padding:1.1rem 1.2rem 1rem;background:var(--kraft);color:var(--ink);border-radius:3px;transform:rotate(-2deg);box-shadow:0 1rem 2rem rgba(0,0,0,.3);font-size:.9375rem}
.deed div{display:flex;align-items:baseline;gap:.5rem;padding:.3rem 0}
.deed div + div{border-top:1px dashed rgba(27,26,23,.3)}
.deed dt{flex:1;color:#5A4A2E}
.deed dd{font-family:var(--display);font-weight:700}

@media (min-width:48rem){
  .work{grid-template-columns:17rem 1fr;gap:4rem}
  .work:nth-child(even){grid-template-columns:1fr 17rem}
  .work:nth-child(even) .shot{order:2}
  .work .shot{width:100%}
}
@media (min-width:60rem){
  .bento{grid-template-columns:repeat(3,1fr);gap:1rem}
  .tile{grid-column:span 1;min-height:22rem;padding:2rem}
  .tile-wide{grid-column:span 2;flex-direction:row;align-items:flex-end}
  .tile-wide .tile-copy{max-width:22rem}
  .tile-wide > :first-child{align-self:flex-start}
}

/* "See your site" band: points to /see-your-site/ from the home, websites and booking pages */

/* Paper sections: a light page between the green ones, so a long scroll has rhythm.
   The colour tokens are remapped, so every component inside reads dark-on-light. */
.paper{
  --cream:var(--ink);
  --cream-soft:#4F4A41;
  --line:rgba(27,26,23,.16);
  --brass:#7A5A1E;
  --brass-hi:#5E4615;
  background:var(--paper);color:var(--ink);
}
.paper ::selection{background:var(--green);color:var(--paper)}
.paper .btn-gold{background:var(--green);color:var(--paper)}
.paper .btn-gold:hover{background:var(--green-2)}
.paper .btn-line{border-color:rgba(27,26,23,.3)}
.paper .btn-line:hover{border-color:var(--green)}
.paper .optional{color:#5C574D}
.paper .field input,.paper .field textarea,.paper .field select{background-color:#fff}
.paper .features h3{color:var(--ink)}

/* Pricing cards: two plans side by side, the booking one dark with a Solo/Shop switch
   (adapted from a 21st.dev toggle pricing component) */
.pcards{display:grid;gap:1rem;margin-top:2.75rem;align-items:start}
.pcard{position:relative;display:flex;flex-direction:column;padding:1.75rem 1.5rem;border:1px solid var(--line);border-radius:24px;background:#FBF8F1}
.pc-head h3{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,2vw + 1rem,2.25rem);line-height:1.05;letter-spacing:-.03em}
.pc-for{margin-top:.5rem;color:var(--cream-soft)}
.pc-price{display:flex;align-items:baseline;gap:.6rem;margin-top:1.75rem}
.pc-num{font-family:var(--display);font-weight:700;font-size:clamp(3.5rem,6vw + 1rem,4.75rem);line-height:.9;letter-spacing:-.05em;font-variant-numeric:lining-nums tabular-nums}
.pc-once{color:var(--cream-soft)}
.pc-terms{margin-top:.6rem;font-size:.9375rem;color:var(--cream-soft)}
.pc-cta{width:100%;margin-top:1.5rem}
.ticks{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line);display:grid;gap:.8rem}
.ticks li{position:relative;padding-left:2rem;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.05em;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--brass)}
.ticks li::after{content:"";position:absolute;left:.47rem;top:.3em;width:.34rem;height:.62rem;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pc-links{display:flex;flex-direction:column;gap:.1rem;margin-top:1.5rem}
.pc-links a{display:inline-block;padding-block:.4rem;color:var(--brass);font-weight:700}
/* the booking plan: dark, so it stands out on the paper */
.pcard-book{--cream:#F5F5F4;--cream-soft:rgba(245,245,244,.64);--line:rgba(255,255,255,.09);--brass:#D2A64F;--brass-hi:#DFB967;background:var(--green);color:var(--cream);border-color:transparent;box-shadow:0 1.5rem 3rem rgba(10,10,11,.25)}
.paper .pcard-book .btn-gold{background:var(--brass);color:var(--green)}
.paper .pcard-book .btn-gold:hover{background:var(--brass-hi)}
.pcard-book .ticks li::after{border-color:var(--green)}
.tier-switch{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;margin-top:1.5rem;padding:.25rem;border-radius:999px;background:rgba(245,245,244,.08)}
.tier-switch button{appearance:none;min-height:2.75rem;padding:0 .75rem;border:0;border-radius:999px;background:transparent;color:var(--cream-soft);font:700 .9375rem var(--sans);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.tier-switch button[aria-pressed="true"]{background:var(--cream);color:var(--green)}
.tier-switch button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .pcard-book.is-swapping .pc-num,.pcard-book.is-swapping [data-shop]:not(.pc-num){animation:swap-in .35s cubic-bezier(.2,.8,.3,1)}
}
@keyframes swap-in{from{opacity:0;transform:translateY(.5rem)}}
@media (min-width:48rem){
  .pcards{grid-template-columns:1fr 1fr;gap:1.25rem}
  .pcard{padding:2.25rem 2rem}
}

/* Showcase: the three sites as a hand of phones. Tap one at the back, swipe or use the arrows to bring it
   to the front (adapted from a 21st.dev fan deck component) */
#work{overflow-x:hidden;overflow-x:clip}
.showcase{display:grid;gap:2.5rem}
.deck-card img{-webkit-user-drag:none;pointer-events:none}
.deck-caption{margin-top:2rem}
.deck-name{font-family:var(--display);font-weight:700;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em}
.deck-kind{margin-top:.4rem;color:var(--cream-soft);max-width:28rem}
.deck-caption .btn{margin-top:1.25rem}
.deck{position:relative;outline:none}
.deck:focus-visible{outline:2px solid var(--brass);outline-offset:8px;border-radius:12px}
.deck-hand{--w:min(52vw,15.5rem);position:relative;height:calc(var(--w) * 2.165 + 2rem);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.deck-card{--x:0%;--r:0deg;--s:1;--y:0%;appearance:none;position:absolute;left:50%;top:1rem;width:var(--w);margin-left:calc(var(--w) / -2);padding:0;border:0;background:none;cursor:pointer;transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--r)) scale(var(--s));transform-origin:50% 90%;transition:transform .5s cubic-bezier(.2,.8,.25,1),filter .4s ease}
.deck-card .shot{border-width:7px;border-radius:1.9rem}
.deck-card[data-pos="0"]{z-index:3;cursor:default}
.deck-card[data-pos="1"]{--x:-34%;--r:-9deg;--s:.88;z-index:2;filter:brightness(.72)}
.deck-card[data-pos="2"]{--x:34%;--r:9deg;--s:.88;z-index:1;filter:brightness(.72)}
.deck-card[data-lift]{--y:-14%;z-index:5}
.deck-card:focus-visible{outline:none}
.deck-card:focus-visible .shot{box-shadow:0 0 0 3px var(--brass),0 1.4rem 2.8rem rgba(0,0,0,.45)}
@media (hover:hover){
  .deck:hover .deck-card[data-pos="1"]{--x:-44%;--r:-12deg}
  .deck:hover .deck-card[data-pos="2"]{--x:44%;--r:12deg}
  .deck-card:not([data-pos="0"]):hover{filter:brightness(.9)}
}
@media (prefers-reduced-motion:reduce){.deck-card{transition:none}}
.deck-ctl{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:1.25rem}
.deck-ctl button{appearance:none;position:relative;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--cream);cursor:pointer;transition:border-color .2s ease}
.deck-ctl button:hover{border-color:var(--brass)}
.deck-ctl button::before{content:"";position:absolute;left:50%;top:50%;width:.55rem;height:.55rem;border:solid currentColor;border-width:2px 2px 0 0}
.deck-prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.deck-next::before{transform:translate(-70%,-50%) rotate(45deg)}
.deck-count{min-width:4.5rem;text-align:center;font-size:.9375rem;color:var(--cream-soft);font-variant-numeric:tabular-nums}
@media (min-width:60rem){
  .showcase{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:4rem}
  .showcase-all{grid-column:1}
  .deck{grid-row:1 / span 2;grid-column:2}
  .deck-hand{--w:17.5rem}
}

/* Rent or own: two panels side by side, the rented way muted, Freehold raised and ticked
   (adapted from a 21st.dev before-and-after comparison) */
.versus{display:grid;gap:1rem;margin-top:2.75rem}
.vs-col{border-radius:24px;padding:1.75rem 1.5rem}
.vs-col h3{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.15;letter-spacing:-.02em;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.vs-list li{position:relative;display:grid;gap:.15rem;padding:1rem 0 1rem 2.1rem;border-bottom:1px solid var(--line)}
.vs-list li:last-child{border-bottom:0;padding-bottom:0}
.vs-label{font-size:.8125rem;font-weight:700;color:var(--cream-soft)}
.vs-val{line-height:1.45}
.vs-list li::before{content:"";position:absolute;left:0;top:1.15rem;width:1.3rem;height:1.3rem;border-radius:50%}
.vs-rent{border:1px solid var(--line);background:transparent}
.vs-rent .vs-val{color:var(--cream-soft)}
.vs-rent li::before{border:1.5px solid rgba(27,26,23,.3)}
.vs-rent li::after{content:"";position:absolute;left:.4rem;top:1.77rem;width:.5rem;height:2px;background:rgba(27,26,23,.45)}
.vs-own{--cream:#F5F5F4;--cream-soft:rgba(245,245,244,.64);--line:rgba(255,255,255,.09);--brass:#D2A64F;background:var(--green);color:var(--cream);box-shadow:0 1.5rem 3rem rgba(10,10,11,.25)}
.vs-own h3{color:var(--brass)}
.vs-own li::before{background:var(--brass)}
.vs-own li::after{content:"";position:absolute;left:.47rem;top:1.4rem;width:.34rem;height:.62rem;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.vs-own .vs-val{font-weight:700}
@media (min-width:48rem){
  .versus{grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(var(--rows),auto);column-gap:1.25rem;row-gap:0}
  .vs-col{display:grid;grid-template-rows:subgrid;grid-row:1 / span calc(var(--rows) + 1);padding:2rem}
  .vs-list{display:contents}
}

/* Closing: "Yours for good", the line on the hero's key tag, set huge and faint behind the quote form
   (adapted from a 21st.dev closing call-to-action; kept still, so there's only one moment of motion) */
#quote{--bd:clamp(4.25rem,13vw,12rem);position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding-top:calc(var(--bd) * 1.05 + 2.5rem)}
#quote::before{content:"Yours for good" / "";position:absolute;z-index:-1;left:50%;top:clamp(1.5rem,3vw,2.5rem);transform:translateX(-50%);white-space:nowrap;font-family:var(--display);font-weight:700;font-size:var(--bd);line-height:1;letter-spacing:-.055em;color:rgba(210,166,79,.1);pointer-events:none}

/* Storyline: each chapter ends with the next one, so the page leads you through */
.next-step{margin-top:clamp(3rem,6vw,4.5rem);grid-column:1 / -1}
.next-step a{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem 1rem;padding-top:1.25rem;border-top:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.5vw + 1rem,2.75rem);line-height:1.1;letter-spacing:-.03em;color:var(--cream);text-decoration:none}
.next-step span{font-family:var(--sans);font-weight:700;font-size:.9375rem;letter-spacing:0;color:var(--brass)}
.next-step a{background:linear-gradient(var(--brass),var(--brass)) 0 100%/0 2px no-repeat;padding-bottom:.4rem;transition:background-size .45s cubic-bezier(.2,.8,.25,1),color .2s ease}
.next-step a:hover,.next-step a:focus-visible{background-size:100% 2px;color:var(--brass)}

/* ---------- Story and motion (story.js, motion.js) ---------- */
/* Reading line under the header */
.read-line{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--brass-deep),var(--brass) 40%,var(--brass-hi));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* Chapter list, on wide screens */
.chapters{display:none}
@media (min-width:84rem){
  .chapters{display:block;position:fixed;right:1.25rem;top:50%;z-index:18;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .4s ease}
  .chapters.show{opacity:1;pointer-events:auto}
}
.chapters ol{display:grid;gap:.1rem}
.chapters a{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;min-height:2rem;color:#F2EDE2;text-decoration:none;font-size:.8125rem;font-weight:700}
.ch-name{padding:.3rem .7rem;border-radius:999px;background:rgba(12,34,29,.9);white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.ch-dot{flex:none;width:.6rem;height:.6rem;border-radius:50%;border:1.5px solid rgba(245,245,244,.85);background:rgba(12,34,29,.75);box-shadow:0 0 0 3px rgba(12,34,29,.25);transition:transform .3s ease,background-color .3s ease,border-color .3s ease}
.chapters a[aria-current] .ch-dot{background:var(--brass);border-color:var(--brass);transform:scale(1.35)}
.chapters a[aria-current] .ch-name,.chapters:hover .ch-name,.chapters a:focus-visible .ch-name{opacity:1;transform:none}
.chapters a:focus-visible{outline:none}
.chapters a:focus-visible .ch-dot{outline:2px solid var(--brass);outline-offset:3px}

/* Chapter cue, on phones and tablets: the new chapter's name, briefly, under the header */
.chapter-cue{position:fixed;left:50%;top:calc(4.25rem + env(safe-area-inset-top) + .6rem);z-index:19;padding:.4rem .9rem;border:1px solid rgba(210,166,79,.45);border-radius:999px;background:rgba(12,34,29,.92);color:#F2EDE2;font-size:.8125rem;font-weight:700;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none}
.chapter-cue.show{animation:cue 1.8s ease both}
@keyframes cue{0%{opacity:0;transform:translate(-50%,-6px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@media (min-width:84rem){.chapter-cue{display:none}}
@media (prefers-reduced-motion:reduce){.chapter-cue.show{animation:cue-calm 1.8s linear both}}
@keyframes cue-calm{0%,100%{opacity:0;transform:translateX(-50%)}10%,85%{opacity:1;transform:translateX(-50%)}}

/* Reveals: only when motion.js has marked the page. A fail-safe shows everything after 3 seconds
   in case the script that reveals things never runs. */
html.motion .rv{opacity:0;transform:translateY(28px);animation:failsafe 0s 3s forwards}
html.motion .rv.in{opacity:1;transform:none;animation:none;transition:opacity .7s ease calc(var(--d,0) * 85ms),transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--d,0) * 85ms)}
@keyframes failsafe{to{opacity:1;transform:none}}
@media (hover:hover){html.motion .tile.rv.in:hover{transform:translateY(-3px);transition:transform .3s ease,border-color .3s ease}}

/* Headlines rise word by word from behind a mask */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
[data-split] .w > span{display:inline-block}
html.motion [data-split] .w > span{transform:translateY(110%);animation:failsafe 0s 3s forwards}
html.motion [data-split].in .w > span{transform:none;animation:none;transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--wi) * 70ms)}

/* The hero's opening: headline, then the words beneath, then the tag swings in on its string */
html.motion .hero-sub,html.motion .hero-price,html.motion .hero-where,html.motion .hero .actions,html.motion .page-hero .hero-grid > :not(:first-child){opacity:0;transform:translateY(18px);animation:failsafe 0s 3s forwards}
html.motion .hero.opening .hero-sub,html.motion .hero.opening .hero-price,html.motion .hero.opening .hero-where,html.motion .hero.opening .actions,html.motion .page-hero.opening .hero-grid > :not(:first-child){opacity:1;transform:none;animation:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
html.motion .hero.opening .hero-sub{transition-delay:.35s}
html.motion .hero.opening .hero-price{transition-delay:.45s}
html.motion .hero.opening .hero-where{transition-delay:.55s}
html.motion .hero.opening .actions{transition-delay:.6s}
html.motion .page-hero.opening .hero-grid > :not(:first-child){transition-delay:.55s}
html.motion .keytag-art{opacity:0;transition:opacity .8s ease .55s}
html.motion .hero.opening .keytag-art{opacity:1}
html.motion .kt{animation-delay:.75s}

/* Details in the promise tiles: the deed slides in, the stamp lands */
html.motion .tile .deed{opacity:0;transform:translate(-24px,10px) rotate(-9deg);transition:opacity .6s ease .25s,transform 1s cubic-bezier(.2,.8,.2,1) .25s}
html.motion .tile.in .deed{opacity:1;transform:rotate(-2deg)}
html.motion .tile .tile-stamp{opacity:0;transform:rotate(-30deg) scale(1.8)}
html.motion .tile.in .tile-stamp{animation:stamp .55s cubic-bezier(.3,1.5,.5,1) .35s forwards}
@keyframes stamp{to{opacity:1;transform:rotate(-12deg) scale(1)}}

/* Smooth questions: answers slide open where the browser can animate to the natural height */
:root{interpolate-size:allow-keywords}
@media (prefers-reduced-motion:no-preference){
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .4s cubic-bezier(.2,.8,.2,1),content-visibility .4s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
  .faq summary{transition:color .2s ease}
  .faq summary:hover{color:var(--brass)}
}

/* Page to page: the header stays put while the page beneath fades up */
@view-transition{navigation:auto}
.top{view-transition-name:site-top}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media print{html.motion .rv,html.motion [data-split] .w > span,html.motion .hero-sub,html.motion .hero .actions{opacity:1!important;transform:none!important}}

/* Enquiry form: errors under the field, and a confirmation that says what happens next */
.field.has-error input{border-color:#E8907F}
.field-error{margin-top:.45rem;padding-left:1.4rem;position:relative;font-size:.9375rem;font-weight:700;color:#F2B8AC}
.field-error::before{content:"!";position:absolute;left:0;top:.1em;display:grid;place-items:center;width:1rem;height:1rem;border-radius:50%;background:#E8907F;color:var(--green-3);font-size:.75rem;line-height:1}
.sent{padding:2rem 1.5rem;border:1px solid rgba(210,166,79,.45);border-radius:24px;background:rgba(245,245,244,.04);outline:none}
.sent-tick{width:3.5rem;height:3.5rem;fill:none;stroke:var(--brass);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sent-tick circle{stroke-dasharray:151;stroke-dashoffset:0}
.sent-tick path{stroke-dasharray:36;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .sent{animation:sent-in .6s cubic-bezier(.2,.8,.2,1) both}
  .sent-tick circle{animation:draw .7s ease-out .15s both;--len:151}
  .sent-tick path{animation:draw-tick .45s ease-out .7s both}
}
@keyframes sent-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes draw{from{stroke-dashoffset:151}}
@keyframes draw-tick{from{stroke-dashoffset:36}}
.sent-title{margin-top:1rem;font-family:var(--display);font-weight:700;font-size:clamp(2.25rem,4vw + 1rem,3.25rem);line-height:1;letter-spacing:-.04em}
.sent-thanks{margin-top:.6rem;font-size:1.125rem;color:var(--cream-soft)}
.sent-next{margin-top:1.5rem;display:grid;gap:.75rem;counter-reset:sn}
.sent-next li{counter-increment:sn;display:grid;grid-template-columns:2rem 1fr;gap:.75rem;align-items:start;color:var(--cream-soft)}
.sent-next li::before{content:counter(sn);display:grid;place-items:center;width:2rem;height:2rem;border:1.5px solid var(--brass);border-radius:50%;color:var(--brass);font-family:var(--display);font-weight:700;font-size:.9375rem}
.sent-again{margin-top:1.25rem;color:var(--brass)}

/* What's your business? Chips in the hero that tailor the page */
.trade{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);max-width:34rem}
.trade-q{font-family:var(--display);font-weight:700;font-size:1.125rem}
.trade-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.trade-chips button{appearance:none;min-height:2.75rem;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(245,245,244,.04);color:var(--cream);font:700 .9375rem var(--sans);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .12s ease}
.trade-chips button:hover{border-color:var(--brass)}
.trade-chips button:active{transform:scale(.95)}
.trade-chips button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--green)}
.trade-fit{margin-top:1rem;color:var(--cream-soft)}
.trade-fit a{color:var(--brass);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .trade-fit:not([hidden]){animation:swap-in .4s cubic-bezier(.2,.8,.3,1)}
  .kt.nudge{animation:nudge .9s cubic-bezier(.25,.6,.3,1)}
  .kt-title{transition:color .3s ease}
}
@keyframes nudge{0%{transform:rotate(-4deg)}25%{transform:rotate(6deg)}55%{transform:rotate(-7deg)}80%{transform:rotate(-2deg)}100%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.btn:active,.trade-chips button:active{transform:none}}

/* The matching price card */
.pcard.is-fit{box-shadow:0 0 0 2px var(--brass),0 1.5rem 3rem rgba(10,10,11,.2)}
.pc-fit{align-self:flex-start;margin-bottom:1rem;padding:.3rem .8rem;border-radius:999px;background:var(--brass);color:var(--paper);font-size:.875rem;font-weight:700}
.pcard-book .pc-fit{color:var(--green)}

/* Price cards swipe sideways on phones */
.pc-dots{display:none}
@media (max-width:47.99rem){
  .pcards{display:flex;align-items:stretch;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:.5rem var(--gutter) 1.5rem;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pcards::-webkit-scrollbar{display:none}
  .pcards > .pcard{flex:0 0 86%;scroll-snap-align:start}
  .pc-dots{display:flex;justify-content:center;gap:.25rem;margin-top:.25rem}
  .pc-dots button{appearance:none;position:relative;width:2.75rem;height:2.75rem;border:0;background:none;cursor:pointer}
  .pc-dots button::before{content:"";position:absolute;left:50%;top:50%;width:.55rem;height:.55rem;margin:-.275rem 0 0 -.275rem;border-radius:999px;background:rgba(27,26,23,.25);transition:width .3s ease,margin .3s ease,background-color .3s ease}
  .pc-dots button[aria-current]::before{width:1.6rem;margin-left:-.8rem;background:var(--green)}
}

/* Slide to act */
.slide-cta{--x:0px;--p:0;position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:24rem;height:3.75rem;margin-top:2.5rem;padding:0 1rem 0 4rem;border:1.5px solid var(--brass);border-radius:999px;background:linear-gradient(90deg,rgba(210,166,79,.28) calc(var(--x) + 3.4rem),transparent 0);color:var(--cream);text-decoration:none;font-weight:700;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slide-knob{position:absolute;left:4px;top:50%;width:3.25rem;height:3.25rem;margin-top:-1.625rem;border-radius:50%;background:var(--brass);transform:translateX(var(--x));cursor:grab;touch-action:none;box-shadow:0 .4rem 1rem rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.slide-knob::before{content:"";position:absolute;left:50%;top:50%;width:.6rem;height:.6rem;margin:-.3rem 0 0 -.45rem;border:solid var(--green-3);border-width:2.5px 2.5px 0 0;transform:rotate(45deg)}
.slide-cta.dragging .slide-knob{transition:none;cursor:grabbing}
.slide-text{opacity:calc(1 - var(--p) * 1.4);background:linear-gradient(100deg,var(--cream) 40%,var(--brass-hi) 50%,var(--cream) 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.slide-cta.done .slide-text{opacity:0}
.slide-cta:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.paper .slide-knob::before{border-color:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  .slide-text{animation:sheen 3.2s ease-in-out infinite}
  .slide-cta:not(.dragging):not(.done) .slide-knob{animation:nudge-knob 3.2s ease-in-out infinite}
}
@keyframes sheen{0%,40%{background-position:100% 0}80%,100%{background-position:0 0}}
@keyframes nudge-knob{0%,70%,100%{transform:translateX(var(--x))}80%{transform:translateX(calc(var(--x) + 10px))}90%{transform:translateX(var(--x))}}

/* Controls that need JavaScript stay out of the way without it */
html:not(.js) .trade,html:not(.js) .pc-dots,html:not(.js) .deck-ctl{display:none}

/* ---------- Brand finish ---------- */
/* Main menu: the current page, and an underline that draws in */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--cream)}
.foot-links a[aria-current="page"]{color:var(--cream)}

/* Menu on phones and tablets */
.menu-btn{appearance:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-left:-.75rem;margin-right:-.5rem;border:0;background:none;color:var(--cream);cursor:pointer}
.menu-icon{position:relative;width:1.4rem;height:.9rem}
.menu-icon i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.2,.8,.2,1),top .35s cubic-bezier(.2,.8,.2,1)}
.menu-icon i:first-child{top:0}
.menu-icon i:last-child{top:calc(100% - 2px)}
html.menu-open .menu-icon i:first-child{top:calc(50% - 1px);transform:rotate(45deg)}
html.menu-open .menu-icon i:last-child{top:calc(50% - 1px);transform:rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--brass);outline-offset:-2px;border-radius:8px}
@media (min-width:60rem){.menu-btn,.menu-sheet{display:none!important}}
html.menu-open,html.menu-open body{overflow:hidden}
.menu-sheet{position:fixed;inset:calc(4.25rem + env(safe-area-inset-top)) 0 0 0;z-index:19;display:flex;flex-direction:column;justify-content:space-between;padding:2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));background:var(--green-3);overflow-y:auto;opacity:0;transition:opacity .3s ease}
.menu-sheet.show{opacity:1}
.menu-list{display:grid;gap:.25rem}
.menu-list a{display:block;padding:.35rem 0;font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,11vw,3.5rem);line-height:1.05;letter-spacing:-.04em;color:var(--cream);text-decoration:none}
.menu-list a[aria-current="page"]{color:var(--brass)}
.menu-foot{display:grid;gap:1.25rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.menu-foot .btn{justify-self:start}
.menu-foot p{color:var(--cream-soft);font-size:.9375rem;max-width:22rem}
@media (prefers-reduced-motion:no-preference){
  .menu-list li,.menu-foot{opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  .menu-sheet.show .menu-list li,.menu-sheet.show .menu-foot{opacity:1;transform:none;transition-delay:calc(var(--mi) * 60ms + 80ms)}
}

/* The key tag leans towards the pointer */
.keytag{--tilt:0deg;--lift:0px;cursor:pointer;transform:translateY(var(--lift)) rotate(var(--tilt));transform-origin:38% 18%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* Price boards on the inner pages become cards */
.price-grid .board:not(.board-sm){display:grid;gap:1rem}
.price-grid .board:not(.board-sm) > li{padding:1.75rem 1.5rem;border:1px solid var(--line);border-radius:24px;background:rgba(245,245,244,.04);transition:border-color .3s ease,transform .3s ease}
.price-grid .board:not(.board-sm) > li:hover{border-color:rgba(210,166,79,.55)}
.price-grid .board:not(.board-sm) .board-line{align-items:baseline}
.price-grid .board:not(.board-sm) .board-line h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.price-grid .board:not(.board-sm) .board-line b{font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,4vw + 1rem,3.25rem);line-height:1;letter-spacing:-.04em}
.price-grid .board:not(.board-sm) > li .btn{margin-top:1.25rem}

/* Footer: the brand signs off */
.foot{overflow:hidden;overflow:clip}
.foot::after{content:"Freehold" / "";display:block;margin-top:clamp(2.5rem,6vw,4.5rem);font-family:var(--display);font-weight:700;font-size:clamp(5rem,21.5vw,19rem);line-height:.78;letter-spacing:-.065em;text-align:center;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(210,166,79,.4);pointer-events:none;user-select:none}
@supports not (-webkit-text-stroke:1px black){.foot::after{color:rgba(210,166,79,.12)}}
.foot-tag{margin-top:.4rem!important;font-family:var(--display);font-weight:700;font-size:1.25rem!important;color:var(--brass)!important}
.price-grid .board:not(.board-sm){border-top:0}
.price-grid .board:not(.board-sm) > li{border-bottom:1px solid var(--line)}

html.menu-open .helper-launch,html.menu-open .helper-pop,html.menu-open .chapter-cue{display:none!important}
.foot-links a{min-width:2.75rem}

/* Trade pages: the example phone beside the words */
.ex-shot{display:block;width:min(62vw,16rem);justify-self:center;text-decoration:none}
.ex-shot .shot{transform:rotate(-2.5deg)}
@media (min-width:60rem){.ex-shot{grid-column:2;grid-row:1 / span 2;width:17rem}}
.foot-trades{margin-top:.25rem}
.hero-where a{color:inherit}


/* =====================================================================
   Dark theme: near-black, white type, hairline borders, pill buttons.
   The brass stays as the one accent and the kraft key tag as the signature.
   (Adapted in look from 21st.dev hero, pricing and slider components.)
   ===================================================================== */
body{background:var(--green)}
::selection{background:var(--cream);color:var(--green)}

/* Raised sections: the old paper sections become a slightly lighter black */
.paper{
  --cream:#F5F5F4;--cream-soft:rgba(245,245,244,.64);--line:rgba(255,255,255,.09);--brass:#D4AA55;--brass-hi:#E6C478;
  background:var(--green-2);color:var(--cream);border-block:1px solid var(--line)
}
.paper ::selection{background:var(--cream);color:var(--green)}
.alt{background:var(--green-2)}
.promises,.demo-sec{background:var(--green-3)}
.promises{border-block:1px solid var(--line)}

/* Header */
.top{background:rgba(10,10,11,.92)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.top{background:rgba(10,10,11,.66)}}

/* Buttons: a light pill with a dark circle and arrow; outline pills for the second choice */
.btn{border-radius:999px;font-weight:700}
.btn-gold,.paper .btn-gold,.paper .pcard-book .btn-gold{background:var(--cream);color:var(--green);border-color:transparent}
.btn-gold:hover,.paper .btn-gold:hover,.paper .pcard-book .btn-gold:hover{background:#fff}
.btn-gold:not(.btn-sm){padding-right:.4rem;gap:.9rem}
.btn-gold:not(.btn-sm)::after{content:"";flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5F5F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14L14 6M7.5 6H14v6.5'/%3E%3C/svg%3E") center/1.05rem no-repeat;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn-gold:not(.btn-sm):hover::after{transform:rotate(45deg)}
.btn-gold.pc-cta,.plan-cta .btn-gold{justify-content:space-between;padding-left:1.5rem}
.btn-line,.paper .btn-line{border-color:rgba(255,255,255,.18);color:var(--cream);background:rgba(255,255,255,.02)}
.btn-line:hover,.paper .btn-line:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.top .btn-sm{min-height:2.5rem;padding:0 1.1rem}
@media (prefers-reduced-motion:reduce){.btn-gold:not(.btn-sm):hover::after{transform:none}}

/* Headings: white fading to grey, like light falling from above */
.hero h1:not([data-split]),.h2:not([data-split]),.hero h1 .w > span,.h2 .w > span{background:linear-gradient(180deg,#fff 35%,rgba(255,255,255,.66));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero: a fine dot grid that fades out, a soft light from above, and a spotlight that follows the pointer */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.2px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(600px circle at var(--mx,50%) var(--my,-10%),rgba(255,255,255,.07),transparent 60%),radial-gradient(ellipse 60% 40% at 50% -5%,rgba(212,170,85,.12),transparent 70%)}
.facts{display:inline-flex;flex-wrap:wrap;align-items:center;margin-bottom:1.5rem;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.facts span{display:inline-flex;align-items:center;padding:.3rem .75rem;font-size:.8125rem;color:var(--cream-soft);white-space:nowrap}
.facts span + span{border-left:1px solid var(--line)}
.facts b{color:var(--cream);margin-right:.3rem}

/* A band of the trades Freehold builds for, drifting past (instead of borrowed client logos) */
.trades-band{position:relative;overflow:hidden;padding:1.4rem 0;border-block:1px solid var(--line);background:var(--green-3);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.trades-track{display:flex;width:max-content;gap:3rem}
.trades-track span{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2vw + 1rem,2rem);letter-spacing:-.03em;color:rgba(255,255,255,.28);white-space:nowrap}
.trades-track span::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:1.1rem;vertical-align:.2em;border-radius:50%;background:var(--brass)}
@media (prefers-reduced-motion:no-preference){.trades-track{animation:drift 40s linear infinite}.trades-band:hover .trades-track{animation-play-state:paused}}
@keyframes drift{to{transform:translateX(-50%)}}

/* Cards: hairline borders on black, and a soft light that follows the pointer */
.pcard,.paper .pcard{background:var(--card);border-color:var(--line);color:var(--cream)}
.pcard-book{background:linear-gradient(var(--green-3),var(--green-3)) padding-box,linear-gradient(160deg,rgba(212,170,85,.75),rgba(255,255,255,.08) 45%,rgba(212,170,85,.35)) border-box;border:1px solid transparent;box-shadow:0 2rem 4rem rgba(0,0,0,.5)}
.pcard.is-fit{box-shadow:0 0 0 2px var(--brass),0 2rem 4rem rgba(0,0,0,.5)}
.ticks li::after,.pcard-book .ticks li::after{border-color:var(--green)}
.pc-fit,.pcard-book .pc-fit{color:var(--green)}
.tile,.vs-col,.price-grid .board:not(.board-sm) > li,.sent{background-color:var(--card)}
.glow{position:relative}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.07),transparent 45%);transition:opacity .3s ease}
@media (hover:hover){.glow:hover::after{opacity:1}}
.vs-rent{background:transparent}
.vs-rent li::before{border-color:rgba(255,255,255,.25)}
.vs-rent li::after{background:rgba(255,255,255,.45)}
.vs-own{background:linear-gradient(var(--green-3),var(--green-3)) padding-box,linear-gradient(160deg,rgba(212,170,85,.75),rgba(255,255,255,.08) 45%,rgba(212,170,85,.35)) border-box;border:1px solid transparent;box-shadow:0 2rem 4rem rgba(0,0,0,.5)}
.vs-own li::after{border-color:var(--green)}
.trade-chips button{background:var(--card)}
.trade-chips button[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:var(--green)}
.tier-switch{background:rgba(255,255,255,.06)}
.tier-switch button[aria-pressed="true"]{background:var(--cream);color:var(--green)}
.choice:has(input:checked){background:rgba(212,170,85,.07)}
.field input,.field textarea,.field select,.paper .field input,.paper .field textarea,.paper .field select{background-color:rgba(255,255,255,.035);border-color:rgba(255,255,255,.12);border-radius:12px}
.money{border-radius:12px}
.pc-dots button::before{background:rgba(255,255,255,.25)}
.pc-dots button[aria-current]::before{background:var(--cream)}
.slide-cta{border-color:rgba(255,255,255,.22);background:linear-gradient(90deg,rgba(212,170,85,.22) calc(var(--x) + 3.4rem),rgba(255,255,255,.02) 0)}
.paper .slide-knob::before{border-color:var(--green-3)}
.chapter-cue,.ch-name{background:rgba(17,17,19,.92);border-color:var(--line)}
.menu-sheet{background:var(--green-3)}
.foot::after{-webkit-text-stroke:1px rgba(255,255,255,.14)}
.demo-screen{border-color:#000;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 2rem 5rem rgba(0,0,0,.7)}

/* Phones that tilt flat as they scroll into view (adapted from a 21st.dev container scroll animation) */
.demo-grid,.showcase{perspective:1200px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .demo-device,.deck-hand,.ex-shot{animation:tilt-in linear both;animation-timeline:view();animation-range:entry 0% cover 45%;transform-origin:50% 100%}
  }
}
@keyframes tilt-in{from{transform:rotateX(26deg) scale(.9) translateY(3rem);opacity:.4}to{transform:none;opacity:1}}

/* Price slider in the calculator (adapted from a 21st.dev price range slider) */
.pay-slider{max-width:26rem;margin-top:1rem}
.pay-value{display:flex;align-items:baseline;gap:.4rem;font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pay-value small{font-family:var(--sans);font-weight:400;font-size:.9375rem;letter-spacing:0;color:var(--cream-soft)}
.pay-range{-webkit-appearance:none;appearance:none;width:100%;height:2.75rem;margin:.6rem 0 0;background:transparent;cursor:pointer;--p:0%}
.pay-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--cream) var(--p),rgba(255,255,255,.12) var(--p))}
.pay-range::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.12)}
.pay-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--cream)}
.pay-range::-webkit-slider-thumb{-webkit-appearance:none;width:1.6rem;height:1.6rem;margin-top:calc(3px - .8rem);border-radius:50%;border:2px solid var(--cream);background:var(--green);box-shadow:0 .25rem .8rem rgba(0,0,0,.5);transition:transform .15s ease}
.pay-range::-moz-range-thumb{width:1.45rem;height:1.45rem;border-radius:50%;border:2px solid var(--cream);background:var(--green)}
.pay-range:active::-webkit-slider-thumb{transform:scale(1.2)}
.pay-range:focus-visible{outline:none}
.pay-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(212,170,85,.5)}
.pay-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(212,170,85,.5)}
.pay-ticks{display:flex;justify-content:space-between;font-size:.75rem;color:var(--cream-soft);font-variant-numeric:tabular-nums}
.pay-slider + .money{margin-top:1rem}
/* Dark theme fixes from the contrast check */
.paper .features h3{color:var(--cream)}
.kt dt{color:#4F4127}
.trades-track span{color:rgba(255,255,255,.46)}
.top .btn-sm{min-height:2.75rem}
/* The helper in the dark theme: it was still the old cream panel. The estimate slip stays paper (kraft), like the title deed. */
.helper{background:#111113;color:var(--cream);border:1px solid rgba(255,255,255,.1)}
.helper :focus-visible{outline-color:var(--brass)}
.helper-head{background:#0A0A0B;border-bottom:1px solid var(--line)}
.msg.bot,.typing{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.1);color:var(--cream)}
.typing i{background:var(--cream-soft)}
.msg.me{background:var(--cream);color:#0A0A0B}
.msg a{color:var(--brass)}
.act{border-color:rgba(255,255,255,.3);color:var(--cream)}
@media (hover:hover){.act:hover{background:rgba(255,255,255,.1);color:var(--cream)}}
.act.go,.act[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:#0A0A0B}
@media (hover:hover){.act.go:hover{background:#fff;color:#0A0A0B}}
.msg.plan-card{--ink-soft:#4A4339;background:var(--kraft);color:var(--ink);border-color:transparent;box-shadow:0 .8rem 1.6rem rgba(0,0,0,.4)}
.msg.plan-card .act{border-color:var(--ink);color:var(--ink)}
.helper-form{background:#0E0E10;border-top-color:var(--line)}
.helper-form input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--cream)}
.helper-form input::placeholder{color:rgba(245,245,244,.5)}
.helper-send{background:var(--brass);color:#0A0A0B}
.helper-note{background:#0E0E10;color:var(--cream-soft)}
.helper-pop{background:#18181B;color:var(--cream);border:1px solid rgba(255,255,255,.1)}
.helper-pop::after{background:#18181B;border:solid rgba(255,255,255,.1);border-width:0 1px 1px 0}
.helper-pop :focus-visible{outline-color:var(--brass)}
.pop-close{color:var(--cream-soft)}
.pop-close:hover{background:rgba(255,255,255,.08);color:var(--cream)}

/* ---------- Client portal (/account/) ---------- */
.account{padding-top:clamp(3rem,8vw,5.5rem);min-height:70vh}
.acc-narrow{max-width:32rem}
.acc-form .field + .field{margin-top:1.1rem}
.acc-form .btn{margin-top:1.25rem}
.acc-narrow .acc-form .btn{width:100%;justify-content:space-between;padding-left:1.5rem}
.acc-fine{margin-top:1.5rem;color:var(--cream-soft)}
.acc-note{color:var(--cream-soft)}
.acc-view[data-view="sent"] .sent-tick{margin-bottom:1rem}
.acc-loading{display:flex;align-items:center;gap:.4rem;color:var(--cream-soft)}
.acc-loading span{width:.5rem;height:.5rem;border-radius:50%;background:var(--brass)}
.acc-loading p{margin-left:.5rem}
@media (prefers-reduced-motion:no-preference){.acc-loading span{animation:dots 1s ease-in-out infinite}.acc-loading span:nth-child(2){animation-delay:.15s}.acc-loading span:nth-child(3){animation-delay:.3s}}
@keyframes dots{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.acc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.acc-hello{color:var(--cream-soft);font-size:.9375rem;margin-bottom:.4rem}
.acc-card{margin-top:2rem;padding:1.5rem;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.acc-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.acc-biz{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2vw + 1rem,2.25rem);letter-spacing:-.03em;line-height:1.1}
.acc-kind{padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:.8125rem;color:var(--cream-soft)}
.acc-progress{margin-top:1.75rem}
.acc-progress-head{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem}
.acc-step-now{font-weight:700}
.acc-step-count{color:var(--cream-soft)}
.acc-bar{margin-top:.75rem;height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.acc-bar span{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--cream),#fff)}
@media (prefers-reduced-motion:no-preference){.acc-bar span{animation:bar-in 1.1s cubic-bezier(.2,.8,.2,1) both}}
@keyframes bar-in{from{width:0}}
.acc-steps{margin-top:1.25rem;display:grid;gap:.85rem}
.acc-steps li{display:grid;grid-template-columns:1.6rem 1fr auto;gap:.85rem;align-items:start}
.acc-steps li::before{content:"";width:1.4rem;height:1.4rem;margin-top:.1rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.3)}
.acc-steps li.done::before{border-color:var(--brass);background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230A0A0B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/.95rem no-repeat}
.acc-steps li.now::before{border-color:var(--cream);box-shadow:inset 0 0 0 4px var(--green),inset 0 0 0 10px var(--cream)}
.acc-step-text{display:grid;gap:.1rem}
.acc-step-text b{font-weight:700}
.acc-step-text span{font-size:.9375rem;color:var(--cream-soft)}
.acc-steps li.todo .acc-step-text b{color:var(--cream-soft)}
.acc-steps small{font-size:.8125rem;color:var(--cream-soft);white-space:nowrap;padding-top:.15rem}
@media (prefers-reduced-motion:no-preference){.acc-steps li{animation:swap-in .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i) * 60ms + 150ms)}}
.acc-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.acc-cols{display:grid;gap:1.5rem;margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.acc-h{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.015em;margin-bottom:.9rem}
.acc-updates{display:grid;gap:1rem}
.acc-updates li{padding-left:1rem;border-left:2px solid var(--brass)}
.acc-updates small{font-size:.8125rem;color:var(--cream-soft)}
.acc-updates p{margin-top:.2rem}
.acc-empty{color:var(--cream-soft);font-size:.9375rem;margin-top:.5rem}
.acc-handover{display:grid;gap:.6rem}
.acc-handover li{position:relative;display:flex;justify-content:space-between;gap:1rem;padding-left:2rem}
.acc-handover li::before{content:"";position:absolute;left:0;top:.15rem;width:1.3rem;height:1.3rem;border-radius:6px;border:1.5px solid rgba(255,255,255,.3)}
.acc-handover li.done::before{border-color:var(--brass);background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230A0A0B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/.9rem no-repeat}
.acc-handover li.done span{color:var(--cream-soft)}
.acc-handover small{font-size:.8125rem;color:var(--cream-soft);white-space:nowrap}
.acc-deed{margin-top:1.5rem;padding:1.4rem 1.3rem;border-radius:4px;background:var(--kraft);color:var(--ink);box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.4)}
.acc-deed-title{font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:#4F4127}
.acc-deed-biz{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;padding-bottom:.6rem;border-bottom:1.5px solid rgba(27,26,23,.55)}
.acc-deed dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin-top:.8rem;font-size:.9375rem}
.acc-deed dt{color:#4F4127}
.acc-deed dd{font-weight:700;overflow-wrap:anywhere}
.acc-deed-notes{margin-top:.8rem;font-size:.9375rem;white-space:pre-line}
.acc-deed-foot{margin-top:1rem;padding-top:.7rem;border-top:1px dashed rgba(27,26,23,.4);font-size:.875rem;color:#3d3322}
.acc-deed .acc-print{margin-top:1rem;color:var(--ink);border-color:rgba(27,26,23,.35);background:transparent}
.acc-tools{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.acc-tools summary{cursor:pointer;font-weight:700;color:var(--brass);padding:.5rem 0}
.acc-grid{display:grid;gap:1rem}
.acc-grid .field + .field{margin-top:0}
.acc-checks,.acc-deed-edit{display:grid;gap:.6rem;margin-top:.5rem}
.acc-checks legend,.acc-deed-edit legend{font-weight:700;margin-bottom:.4rem}
.acc-update{margin-top:1.5rem}
.acc-del{margin-top:1rem;color:#F2B8AC}
.acc-admin{margin-top:3rem;padding:1.5rem;border:1px dashed rgba(255,255,255,.2);border-radius:24px}
@media (min-width:48rem){
  .acc-card{padding:2rem}
  .acc-cols{grid-template-columns:1fr 1fr;gap:2.5rem}
  .acc-grid{grid-template-columns:1fr 1fr}
  .acc-grid > :last-child,.acc-grid fieldset{grid-column:1 / -1}
}
/* Printing the title deed: only the deed */
@media print{
  body.printing-deed *{visibility:hidden}
  body.printing-deed .acc-deed.to-print,body.printing-deed .acc-deed.to-print *{visibility:visible}
  body.printing-deed .acc-deed.to-print{position:absolute;left:0;top:0;width:100%;box-shadow:none;background:#fff}
  body.printing-deed .acc-print{display:none}
}
.acc-narrow .acc-form{margin-top:1.75rem}
/* Portal: approve or ask for changes, and the checklist of what the client sends */
.acc-still .acc-steps li,.acc-still .acc-bar span{animation:none}
.acc-agree{margin-top:2rem;padding:1.4rem;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.03)}
.acc-agree:not(.is-signed){border-color:rgba(212,170,85,.45)}
.acc-terms{margin-top:1rem}
.acc-terms > summary{display:inline-flex;align-items:center;min-height:2.75rem;cursor:pointer;font-weight:700;color:var(--brass)}
.acc-terms > summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:6px}
.acc-terms-doc{margin-top:.5rem;padding:1.3rem 1.2rem;border-radius:4px;background:var(--kraft);color:var(--ink);max-height:26rem;overflow-y:auto;overscroll-behavior:contain;font-size:.9375rem;line-height:1.55}
.acc-terms-doc h4{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:1.1rem 0 .35rem}
.acc-terms-doc h4:first-child{margin-top:0}
.acc-terms-doc p + p{margin-top:.4rem}
.acc-terms-doc:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.acc-terms-sig{margin-top:1.1rem!important;padding-top:.7rem;border-top:1px dashed rgba(27,26,23,.45);font-weight:700}
.acc-terms .acc-print{margin-top:1rem}
.acc-sign{margin-top:1.25rem;display:grid;gap:.75rem;max-width:34rem}
.acc-sign .field{margin-top:.25rem}
.acc-sign .btn{margin-top:.25rem;justify-self:start}
@media print{
  body.printing-deed .acc-terms.to-print,body.printing-deed .acc-terms.to-print *{visibility:visible}
  body.printing-deed .acc-terms.to-print{position:absolute;left:0;top:0;width:100%}
  body.printing-deed .acc-terms.to-print .acc-terms-doc{max-height:none;overflow:visible;background:#fff}
  body.printing-deed .acc-terms.to-print summary,body.printing-deed .acc-terms.to-print .acc-print{display:none}
}
.acc-review,.acc-content{margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.acc-review{padding:1.4rem;border:1px solid rgba(212,170,85,.35);border-radius:18px;background:rgba(212,170,85,.06)}
.acc-review-lead{color:var(--cream-soft);font-size:.9375rem;max-width:40rem}
.acc-review-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.1rem}
.acc-review-row[hidden],.acc-sure[hidden],.acc-changes[hidden]{display:none}
.acc-sure{margin-top:1.1rem}
.acc-sure > p{font-weight:700}
.acc-changes{margin-top:1.25rem}
.acc-approved{display:flex;gap:.7rem;align-items:flex-start;font-weight:700}
.acc-approved::before{content:"";flex:none;width:1.4rem;height:1.4rem;margin-top:.05rem;border-radius:50%;background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230A0A0B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/.95rem no-repeat}
.acc-review-hist:not(:empty){margin-top:1.4rem}
.acc-sub{font-size:.875rem;font-weight:700;color:var(--cream-soft);margin-bottom:.6rem}
.acc-pre{white-space:pre-line}
.acc-hint{margin-top:.45rem;font-size:.875rem;color:var(--cream-soft)}
.acc-content-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.acc-content-head .acc-h{margin-bottom:.4rem}
.acc-count{font-size:.875rem;color:var(--brass);font-weight:700}
.acc-items{display:grid;gap:.6rem;margin-top:1.1rem}
.acc-item{border:1px solid var(--line);border-radius:16px;background:var(--card)}
.acc-item[open]{background:var(--card-hi);border-color:rgba(255,255,255,.16)}
.acc-item summary{display:flex;align-items:center;gap:.8rem;min-height:3.5rem;padding:.7rem 1rem;cursor:pointer;list-style:none;border-radius:16px}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary::before{content:"";flex:none;width:1.3rem;height:1.3rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.32)}
.acc-item.is-sent summary::before{border-color:var(--brass);box-shadow:inset 0 0 0 3.5px var(--green),inset 0 0 0 10px var(--brass)}
.acc-item.is-done summary::before{border-color:var(--brass);background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230A0A0B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/.9rem no-repeat}
.acc-item summary::after{content:"";flex:none;width:.5rem;height:.5rem;margin-left:.2rem;border:solid var(--cream-soft);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.acc-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.acc-item summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.acc-item-label{flex:1;font-weight:700}
.acc-item-state{font-size:.8125rem;color:var(--cream-soft);white-space:nowrap}
.acc-item.is-done .acc-item-label{color:var(--cream-soft)}
.acc-item-body{padding:0 1rem 1.1rem 3.1rem}
.acc-item-body > .acc-hint:first-child{margin-top:0}
.acc-item-note{margin-top:.7rem;padding:.6rem .8rem;border-left:2px solid var(--brass);background:rgba(212,170,85,.07);font-size:.9375rem}
.acc-item-body .field{margin-top:1rem}
.acc-item-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1rem}
.acc-item-row .btn{margin-top:0}
.acc-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:.5rem;margin-top:.9rem}
.acc-files li{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06)}
.acc-files a{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:.5rem;color:inherit;text-decoration:none}
.acc-files .is-img a{padding:0}
.acc-files img{width:100%;height:100%;object-fit:cover}
.acc-files a:focus-visible{outline:2px solid var(--brass);outline-offset:-2px;border-radius:10px}
.acc-doc-name{font-size:.75rem;font-weight:700;overflow-wrap:anywhere;line-height:1.25}
.acc-doc-size{font-size:.6875rem;color:var(--cream-soft)}
.acc-file-x{appearance:none;position:absolute;top:0;right:0;width:2.75rem;height:2.75rem;border:0;background:none;cursor:pointer}
.acc-file-x::before{content:"";position:absolute;top:.35rem;right:.35rem;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(10,10,11,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E") center/.85rem no-repeat}
.acc-file-x:focus-visible{outline:2px solid var(--brass);outline-offset:-2px;border-radius:10px}
.acc-pick-row{position:relative;margin-top:1rem}
.acc-pick{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.acc-pick-btn{margin-top:0;cursor:pointer}
.acc-pick:focus-visible + .acc-pick-btn{outline:2px solid var(--brass);outline-offset:3px}
.acc-add{margin-top:1.25rem;display:grid;gap:.75rem;max-width:28rem}
.acc-add .btn{margin-top:0;justify-self:start}
@media (max-width:30rem){.acc-item-body{padding-left:1rem}.acc-review,.acc-agree{padding:1.15rem}.acc-terms-doc{padding:1.1rem 1rem}}

/* Work page: the three sites on a curved 3D carousel (adapted from a 21st.dev 3D curved carousel, in CSS
   instead of WebGL: the cards sit on a cylinder and their top and bottom edges bow inwards) */
.curve{padding-bottom:clamp(3rem,8vw,5rem);overflow:hidden;overflow:clip}
.curve-stage{position:relative;height:min(132vw,36rem);perspective:1100px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;cursor:grab}
.curve-stage:active{cursor:grabbing}
.curve-stage:focus-visible{outline:2px solid var(--brass);outline-offset:-6px;border-radius:24px}
.curve-track{position:absolute;inset:0;transform-style:preserve-3d}
.curve-card{--d:0;position:absolute;left:50%;top:50%;width:min(52vw,15rem);aspect-ratio:540/1169;margin:0;border-radius:18px;overflow:hidden;background:#000;transform:translate(-50%,-50%) translateX(calc(var(--d) * 74%)) translateZ(calc(var(--a) * -170px)) rotateY(calc(var(--d) * -38deg)) scale(calc(1 - var(--a) * .06));transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s ease,filter .5s ease;-webkit-mask:radial-gradient(70% 4.5% at 50% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(70% 4.5% at 50% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(70% 4.5% at 50% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(70% 4.5% at 50% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;box-shadow:0 2rem 4rem rgba(0,0,0,.6)}
.curve-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.curve-card[data-a="0"]{z-index:3}
.curve-card[data-a="1"]{z-index:2;filter:brightness(.55) saturate(.8)}
.curve-card[data-a="2"]{z-index:1;opacity:0}
.curve-stage.dragging .curve-card{transition:none}
@media (prefers-reduced-motion:reduce){.curve-card{transition:none}}
.curve-copy{margin-top:1.5rem}
.curve-kind{font-size:.875rem;color:var(--brass);font-weight:700}
.curve-name{margin-top:.3rem;font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw + 1rem,4rem);line-height:1;letter-spacing:-.045em;background:linear-gradient(180deg,#fff 35%,rgba(255,255,255,.66));-webkit-background-clip:text;background-clip:text;color:transparent}
.curve-text{margin-top:.8rem;max-width:34rem;color:var(--cream-soft);font-size:1.0625rem}
.curve-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;margin-top:1.75rem}
.curve-nav{display:flex;align-items:center;gap:.75rem}
.curve-count{font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--cream-soft);font-size:.9375rem}
.curve-count span{color:var(--cream)}
.curve-progress{position:relative;width:5rem;height:2px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.curve-progress span{position:absolute;inset:0 auto 0 0;width:var(--w,33%);background:var(--cream);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.curve-btn{appearance:none;position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.03);color:var(--cream);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.curve-btn:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.07)}
.curve-btn::before{content:"";position:absolute;left:50%;top:50%;width:.55rem;height:.55rem;border:solid currentColor;border-width:2px 2px 0 0}
.curve-prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.curve-next::before{transform:translate(-70%,-50%) rotate(45deg)}
.curve-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (min-width:60rem){
  .curve-stage{height:38rem}
  .curve-card{width:16.5rem}
  .curve-card{transform:translate(-50%,-50%) translateX(calc(var(--d) * 118%)) translateZ(calc(var(--a) * -220px)) rotateY(calc(var(--d) * -42deg)) scale(calc(1 - var(--a) * .06))}
}
.acc-notify{margin-top:.75rem;border-color:rgba(212,170,85,.35)}