@property --b{syntax:'<percentage>';inherits:false;initial-value:0%}
:root{
  --linen:#F6F1E8; --oat:#EEE7D9; --sand:#E5DAC7; --trav:#DCCFB9; --white:#FFFCF7;
  --green:#173B2F; --green-2:#1F4A3B; --green-ink:#10291F;
  --olive:#5F6A45; --olive-lt:#B4BE98;
  --clay:#B4664A; --clay-ink:#8C4A33; --clay-lt:#E6C0AA;
  --walnut:#4B3627; --oak:#B89268;
  --gold:#A27A34; --gold-lt:#DCC08A; --gold-ink:#7E5E22;
  --ink:#1B2620; --ink-2:#47524B; --mute:#5E6963; --line:rgba(27,38,32,.13);
  --pen:#1D3D33;
  --disp:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand:'Caveat', 'Bradley Hand', cursive;
  --sig:'Ms Madi', 'Bradley Hand', cursive; /* the founders' signatures (7 October 2026, replaces Herr Von Muellerhoff) */
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --g:clamp(16px, 4.2vw, 60px); --max:1320px; --nav:84px; --r:clamp(26px, 3vw, 44px);
  --focus:var(--green);
  /* round 14: one gentle warm grade for the founders' photographs, so two photographers read as one set. Light, never darkened */
  --grade:sepia(.14) saturate(.9) contrast(.95) brightness(1.04);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .29  0 0 0 0 .18  0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --travertine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' preserveAspectRatio='none' viewBox='0 0 1200 1200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .11' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .43  0 0 0 0 .27  .9 0 0 0 -.24'/%3E%3C/filter%3E%3Crect width='1200' height='1200' filter='url(%23t)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px}
body{margin:0;background:var(--linen) var(--grain);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p,ul,ol,figure,dl{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit}
.wrap{width:min(var(--max), 100% - 2*var(--g));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.skip{position:fixed;left:12px;top:-70px;z-index:200;background:var(--green);color:var(--linen);padding:13px 18px;border-radius:14px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.num{font-variant-numeric:lining-nums tabular-nums}
::selection{background:#D9E0C6}

/* type */
.fr{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0}
.h2{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:350;font-size:clamp(36px,4.3vw,62px);line-height:1.05;letter-spacing:-.024em;text-wrap:balance;color:var(--green-ink)}
.h2 em{font-style:italic;font-weight:330;color:var(--olive)}
.eyebrow{font-size:13.5px;line-height:1.3;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px;display:flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:60% 40% 55% 45%;background:var(--clay);flex:none}
.lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:52ch;margin-top:18px;text-wrap:pretty}

/* soft panels: the sections sit like rooms, with rounded corners */
.panel{margin-inline:clamp(8px,1.1vw,18px);border-radius:clamp(30px,3.6vw,60px)}

/* buttons: rest, hover, pressed, focus */
.btn{--bg:var(--green);--fg:var(--linen);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:0;
  background:var(--bg);color:var(--fg);font:600 16px/1 var(--sans);letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 1px 2px rgba(16,41,31,.2),0 10px 22px -12px rgba(16,41,31,.55);
  transition:transform .35s var(--ease),background-color .25s ease,box-shadow .35s var(--ease)}
.btn:hover{--bg:#21503F;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 2px 4px rgba(16,41,31,.2),0 16px 30px -14px rgba(16,41,31,.6)}
.btn:active{transform:translateY(0) scale(.975);--bg:#123026;transition-duration:.08s}
.btn:focus-visible{outline-offset:4px;border-radius:999px}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn.quiet{--bg:transparent;--fg:var(--green-ink);box-shadow:inset 0 0 0 1.5px rgba(16,41,31,.32)}
.btn.quiet:hover{--bg:rgba(16,41,31,.06);box-shadow:inset 0 0 0 1.5px rgba(16,41,31,.5)}

.tag{position:absolute;z-index:3;font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1;padding:8px 12px;border-radius:999px;
  background:rgba(255,252,247,.88);color:var(--ink);box-shadow:0 4px 14px -6px rgba(0,0,0,.25)}
.card-w{background:var(--white);border:1px solid rgba(27,38,32,.07);box-shadow:0 1px 2px rgba(16,41,31,.05),0 34px 64px -44px rgba(75,54,39,.5)}

/* photographs: a warm ground while they load, a quiet fade when they arrive, a plain note if one is missing */
.ph-g{background:linear-gradient(135deg,#E2D7C3,#D6C8AF)}
.js img[data-f]{opacity:0;transition:opacity .9s ease}
.js img[data-f].ld{opacity:1}
.ph-x::after{content:"Photograph to come";position:absolute;inset:0;display:grid;place-items:center;font:600 14px var(--sans);letter-spacing:.08em;color:var(--ink-2);background:linear-gradient(135deg,#E2D7C3,#D6C8AF)}
.ph-x img{visibility:hidden}

/* ---------- the personal layer: handwritten notes ---------- */
.anno{position:absolute;z-index:4;pointer-events:none;color:var(--pen)}
.hn{margin:0;font-family:var(--hand);font-weight:600;font-size:30px;line-height:1;color:inherit;transform:rotate(var(--r,-3deg));transform-origin:0 50%;white-space:nowrap}
.hn .hl{display:block;width:max-content;padding:.06em .3em .16em .06em}
.hn .hl + .hl{margin-left:var(--in,1.1em);margin-top:-.08em}
.js .hn .hl{-webkit-mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.js .anno.on .hn .hl{animation:ink var(--du,1s) cubic-bezier(.45,.05,.35,1) var(--dl,0s) forwards}
@keyframes ink{to{-webkit-mask-position:0 0;mask-position:0 0}}
.arw{position:absolute;overflow:visible;color:inherit}
.ink-src{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* drawings */
.ill{color:var(--pen)}
.ill svg,svg.ill{display:block;overflow:visible}
.ill > svg{width:100%;height:auto}
.js [data-ill] .wash,.js [data-ill] .ml{opacity:0;transition:opacity 1.6s ease}
.js [data-ill].on .wash{opacity:1;transition-delay:var(--wd,1.4s)}
.js [data-ill].on .ml{opacity:1;transition-delay:var(--ld,1.6s)}
.ml{font:600 10.5px var(--sans);letter-spacing:.16em;fill:#47524B}
.mt{font:italic 400 25px var(--disp);fill:var(--green-ink);letter-spacing:-.01em}
.mo{font:italic 400 13px var(--disp);fill:#5E6963}
.hw{font-family:var(--hand);font-weight:600;fill:var(--pen);letter-spacing:0}

/* ---------- the opening: a drawing becomes the home ---------- */
#opening{display:none}
.opening #opening{display:block;position:fixed;inset:0;z-index:100;cursor:pointer;transition:opacity .2s ease}
.op-bg{position:absolute;inset:0;background:var(--linen) var(--grain);transition:opacity .45s ease}
.op-pic{position:fixed;left:50%;top:40%;width:60vw;height:40vw;border-radius:var(--r);overflow:hidden;transform:var(--tf,none);transform-origin:50% 50%}
.op-pic > *{position:absolute;inset:0;width:100%;height:100%}
.op-pic svg{display:block}
.op-draw{color:#1B3A30;-webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 54%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 50% 54%,#000 58%,transparent 100%);transition:opacity .7s ease .38s}
.op-wash,.op-photo{--b:0%;
  -webkit-mask-image:radial-gradient(ellipse calc(var(--b)*.62) calc(var(--b)*.6) at 50% 62%,#000 46%,transparent 100%),radial-gradient(ellipse calc(var(--b)*.4) calc(var(--b)*.46) at 27% 52%,#000 40%,transparent 100%),radial-gradient(ellipse calc(var(--b)*.44) calc(var(--b)*.4) at 74% 44%,#000 40%,transparent 100%),radial-gradient(ellipse calc(var(--b)*.36) calc(var(--b)*.34) at 60% 84%,#000 40%,transparent 100%),radial-gradient(ellipse calc(var(--b)*.3) calc(var(--b)*.3) at 38% 22%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse calc(var(--b)*.62) calc(var(--b)*.6) at 50% 62%,#000 46%,transparent 100%),radial-gradient(ellipse calc(var(--b)*.4) calc(var(--b)*.46) at 27% 52%,#000 40%,transparent 100%),radial-gradient(ellipse calc(var(--b)*.44) calc(var(--b)*.4) at 74% 44%,#000 40%,transparent 100%),radial-gradient(ellipse calc(var(--b)*.36) calc(var(--b)*.34) at 60% 84%,#000 40%,transparent 100%),radial-gradient(ellipse calc(var(--b)*.3) calc(var(--b)*.3) at 38% 22%,#000 40%,transparent 100%)}
.op-wash{opacity:0;transition:--b 1.1s cubic-bezier(.25,.6,.3,1),opacity .25s ease}
.op-wash svg{width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 53% 55% at 50% 52%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 53% 55% at 50% 52%,#000 70%,transparent 100%)}
.op-photo{object-fit:cover;opacity:0;transition:--b 1s cubic-bezier(.45,.1,.25,1),opacity .2s ease}
#opening.s2 .op-wash{--b:260%;opacity:1}
#opening.s3 .op-photo{--b:330%;opacity:1}
#opening.s3 .op-pic{transform:none;box-shadow:0 50px 90px -60px rgba(75,54,39,.6);transition:transform .95s cubic-bezier(.62,.02,.18,1),box-shadow .8s ease}
#opening.s3 .op-draw{opacity:0}
#opening.nob .op-wash,#opening.nob .op-photo{-webkit-mask-image:none;mask-image:none;opacity:0;transition:opacity .7s ease}
#opening.nob.s2 .op-wash,#opening.nob.s3 .op-photo{opacity:1}
.op-word{position:fixed;left:0;right:0;top:80%;text-align:center;transition:opacity .4s ease,transform .6s var(--ease)}
.op-name{display:inline-block;font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:380;font-size:clamp(27px,3vw,42px);letter-spacing:-.012em;color:var(--green-ink);white-space:nowrap;padding:0 .2em .1em;
  -webkit-mask-image:linear-gradient(90deg,#000 0 44%,transparent 56% 100%);mask-image:linear-gradient(90deg,#000 0 44%,transparent 56% 100%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
#opening.s1 .op-name{animation:ink 1.05s cubic-bezier(.45,.05,.35,1) .22s forwards}
.op-la{display:block;margin-top:8px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);font-weight:600;opacity:0}
#opening.s1 .op-la{animation:fade .5s ease 1s forwards}
#opening.s3 .op-word{opacity:0;transform:translateY(10px)}
#opening.s4 .op-bg{opacity:0}
#opening.out{opacity:0}
.skipo{position:absolute;right:22px;bottom:22px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(27,38,32,.2);background:rgba(255,252,247,.6);color:var(--ink-2);font:600 15px var(--sans);cursor:pointer;transition:opacity .3s ease}
#opening.s3 .skipo{opacity:0}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* ---------- header: a wide open bar at the top, a floating frosted bar once the page moves ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:10px clamp(8px,1.6vw,22px) 0;pointer-events:none}
.bar{pointer-events:auto;margin-inline:auto;width:100%;max-width:calc(var(--max) + 44px);height:66px;display:flex;align-items:center;gap:22px;padding:0 10px 0 22px;border-radius:26px;
  border:1px solid transparent;background:rgba(250,246,238,0);
  transition:max-width .7s var(--ease),height .5s var(--ease),background-color .4s ease,box-shadow .5s ease,border-color .4s ease,margin-top .5s var(--ease)}
.nav.scrolled .bar{max-width:1080px;height:60px;margin-top:2px;background:rgba(250,246,238,.74);-webkit-backdrop-filter:blur(22px) saturate(165%);backdrop-filter:blur(22px) saturate(165%);
  border-color:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(16,41,31,.06),0 22px 44px -26px rgba(75,54,39,.55)}
.wm{display:inline-flex;align-items:center;gap:11px;min-height:44px;margin-right:auto;text-decoration:none;color:var(--green-ink);white-space:nowrap;border-radius:12px}
.wm .mk{width:40px;height:34px;flex:none;color:var(--pen);overflow:visible;transition:width .5s var(--ease),height .5s var(--ease)}
.wm .wt{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:420;font-size:21.5px;letter-spacing:-.012em;line-height:1;transition:font-size .5s var(--ease)}
.wm .wt i{font-style:italic;font-weight:380}
.nav.scrolled .wm .mk{width:34px;height:29px}
.nav.scrolled .wm .wt{font-size:19.5px}
.navlinks{display:flex;align-items:center;gap:2px}
.navlinks a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:none}
.navlinks .ul{position:absolute;left:12px;right:12px;bottom:6px;width:calc(100% - 24px);height:8px;color:var(--clay);overflow:visible;clip-path:inset(-4px 100% -4px 0);transition:clip-path .5s cubic-bezier(.45,.05,.35,1)}
.navlinks .ul path{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.navlinks a:hover .ul,.navlinks a:focus-visible .ul,.navlinks a[aria-current] .ul{clip-path:inset(-4px -4px -4px -4px)}
.navlinks a:active{color:var(--clay-ink)}
.nav .bar > .btn{min-height:46px;padding:0 20px;font-size:15px}
.menub{display:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:calc(var(--nav) + 6px) 0 26px}
.hero-in{--h1:clamp(54px,7.4vw,112px);--pad:clamp(8px,2.4vh,30px);position:relative;display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);align-items:start}
.hero-copy{grid-column:1;grid-row:1;position:relative;z-index:2;padding-top:var(--pad);min-width:0}
.hero h1{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:350;font-size:var(--h1);line-height:.98;letter-spacing:-.034em;color:var(--green-ink);white-space:nowrap;width:max-content}
.hero h1 span{display:block}
.hero h1 em{font-style:italic;font-weight:330}
.hero-line{font-size:clamp(18px,1.45vw,20.5px);line-height:1.5;max-width:34ch;margin-top:24px;color:var(--ink);text-wrap:pretty}
.hero-frame{grid-column:2;grid-row:1;position:relative;margin:calc(var(--pad) + var(--h1)*.98 + 6px) 0 0;height:clamp(440px,calc(100svh - var(--nav) - var(--pad) - var(--h1) - 102px),660px);border-radius:var(--r);overflow:hidden;
  box-shadow:0 50px 90px -60px rgba(75,54,39,.6);isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  background:radial-gradient(60% 46% at 0% 0%,rgba(246,241,232,.5),rgba(246,241,232,0) 70%)}
.hero .tag{right:18px;bottom:18px}
.start{position:relative;z-index:5;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;width:calc(100% + 76px);max-width:640px;margin-top:30px;padding:9px 9px 9px 16px;
  background:var(--white);border-radius:24px;border:1px solid rgba(27,38,32,.1);box-shadow:0 1px 2px rgba(16,41,31,.06),0 30px 56px -30px rgba(75,54,39,.6);transition:box-shadow .12s ease,border-color .12s ease}
.start:hover{border-color:rgba(27,38,32,.22)}
.start:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(23,59,47,.22),0 30px 56px -30px rgba(75,54,39,.6)}
.start-ic{width:36px;height:40px;color:var(--pen)}
.start-ic svg{width:100%;height:100%;overflow:visible}
/* the input fills the field, so the whole of it is the target. its label rides above the text */
.start-f{position:relative;display:block;min-width:0}
.start-f label{position:absolute;left:0;top:5px;font-size:14px;font-weight:600;line-height:1.2;color:var(--green-ink);pointer-events:none}
.start-f input{display:block;border:0;outline:0;background:transparent;font-size:18px;line-height:1.3;color:var(--ink);padding:24px 0 5px;min-height:56px;width:100%;text-overflow:ellipsis}
.start-f input::placeholder{color:#616C66;opacity:1}
.start .btn{min-height:58px;border-radius:17px;padding:0 22px}
.start .btn:focus-visible{border-radius:17px}
.hnote{margin-top:14px;padding-left:4px;font-size:16.5px;color:var(--ink-2)}
/* address suggestions: a listbox under the field, in the same soft card */
.sugg{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:20;padding:8px;background:var(--white);border-radius:22px;border:1px solid rgba(27,38,32,.1);
  box-shadow:0 1px 2px rgba(16,41,31,.06),0 34px 60px -28px rgba(75,54,39,.62);animation:pop .32s var(--ease)}
.sugg[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.985)}}
.so{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:12px;min-height:54px;padding:6px 14px 6px 10px;border-radius:15px;cursor:pointer;transition:background-color .15s ease}
.so svg{width:22px;height:26px;color:var(--pen);overflow:visible;justify-self:center}
.so svg path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.so b{display:block;font-weight:600;font-size:16.5px;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so small{display:block;font-size:14.5px;line-height:1.3;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.so:hover{background:rgba(27,38,32,.045)}
.so[aria-selected="true"]{background:var(--oat);box-shadow:inset 0 0 0 1px rgba(27,38,32,.08)}
.so[aria-selected="true"] svg{color:var(--clay)}
.sugg-src{padding:6px 14px 2px;font-size:12.5px;line-height:1.2;color:var(--mute);text-align:right}
.a-start{left:262px;top:64px}
.a-start .arw{left:-62px;top:-46px;width:54px;height:62px}
.pot{position:absolute;left:18px;top:34px;width:150px;--wd:1.1s}
.hero-extra{position:relative;height:0}
.facts{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;gap:8px 0;margin-top:20px;padding-top:0;font-size:14.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);justify-content:flex-end}
.facts li{display:flex;align-items:center;min-height:30px}
.facts li + li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay);margin:0 22px}
.js .hero [data-h]{animation:rise 1.1s var(--ease) both;animation-delay:calc(var(--hd,.05s) + var(--k,0) * 100ms);opacity:0;transform:translateY(22px)}
.js .hero-frame{animation:frame 1.4s var(--ease) both;animation-delay:var(--hd,.05s)}
.opening .hero{--hd:2.25s}
.opening .hero-frame{animation:none}
.opening .nav .bar{opacity:0;animation:fade .9s ease 2.2s both}
.op-skip .hero [data-h],.op-skip .nav .bar{animation-delay:0s!important}
@keyframes frame{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- hosts ---------- */
.hosts{padding:84px 0 0}
.hosts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(40px,6vw,96px);align-items:center;padding-bottom:56px}
.host-top{position:relative;width:fit-content;max-width:100%}
.hosts-h{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:370;font-size:clamp(30px,2.9vw,42px);line-height:1.1;letter-spacing:-.018em;color:var(--green-ink)}
/* the founders, a matched pair: one 4:5 card each, one shared warm grade, never darkened */
.host-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px);max-width:660px;margin-top:34px}
.pf-w{position:relative;margin-bottom:18px}
.pf{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(27,38,32,.05),0 2px 6px rgba(16,41,31,.05),0 30px 52px -34px rgba(75,54,39,.6)}
.pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:var(--grade)}
.pf::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,252,247,.18)}
.pf-c{position:absolute;width:44px;height:44px;color:var(--pen);overflow:visible;pointer-events:none}
.pf-c.c1{left:-12px;top:-12px}
.pf-c.c2{right:-12px;bottom:-12px}
.hname{font-weight:600;font-size:18px;line-height:1.3}
.role{font-size:15.5px;font-weight:600;color:var(--clay-ink);margin-top:2px}
.bio{margin-top:8px;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:34ch}
.a-host{left:calc(100% + 14px);top:-6px}
.a-host .arw{left:-4px;top:26px;width:56px;height:62px}
.map{position:relative;max-width:440px;justify-self:end;width:100%;--wd:1.6s}
.a-home{left:0;top:4%;color:var(--clay-ink)}
.a-home .arw{left:52px;top:18px;width:74px;height:52px}
.a-every{left:69%;top:15%}
.a-every .arw{left:-34px;top:52px;width:60px;height:50px}

/* ---------- what we do ---------- */
.svc{padding:84px 0 44px;background:var(--oat)}
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start}
.svc-media{position:sticky;top:96px;height:min(calc(100vh - 190px),680px)}
.svc-copy{padding-bottom:60px}
.frame{position:relative;height:100%;border-radius:clamp(60px,9vw,150px) var(--r) var(--r) var(--r);overflow:hidden;isolation:isolate;box-shadow:0 40px 80px -50px rgba(75,54,39,.6)}
.frame .fv{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.04);transition:opacity 1s var(--ease),transform 2s var(--ease)}
.frame img.fv{object-fit:cover}
.frame .fv.on{opacity:1;transform:none}

/* the five services, each shown as itself: a photograph, then four made views on a limewashed ground, paper cards with soft corners.
   Every view is a sample, marked in the markup. The same markup serves the tall frame on wide screens and the small cards on phones. */
.sv{position:absolute;inset:0;overflow:hidden;container:sv / size;display:grid;place-items:center;isolation:isolate;--sv-bg:#ECE3D2;
  background:radial-gradient(90% 70% at 10% 4%,rgba(255,251,243,.92),rgba(255,251,243,0) 62%),radial-gradient(70% 60% at 100% 100%,rgba(180,102,74,.12),transparent 70%),var(--sv-bg)}
.sv::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain),var(--travertine) 0 0/180% 260% no-repeat;opacity:.26;mix-blend-mode:multiply}
.sv::after{content:"";position:absolute;z-index:-1;right:-18%;top:-14%;width:80%;height:72%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23233F33'%3E%3Cpath d='M16 196C58 150 104 96 188 14' stroke='%23233F33' stroke-width='3' fill='none'/%3E%3Cellipse cx='52' cy='150' rx='30' ry='8' transform='rotate(-75 52 150)'/%3E%3Cellipse cx='66' cy='168' rx='30' ry='8' transform='rotate(10 66 168)'/%3E%3Cellipse cx='84' cy='112' rx='32' ry='8.5' transform='rotate(-80 84 112)'/%3E%3Cellipse cx='102' cy='128' rx='32' ry='8.5' transform='rotate(0 102 128)'/%3E%3Cellipse cx='116' cy='74' rx='30' ry='8' transform='rotate(-82 116 74)'/%3E%3Cellipse cx='136' cy='92' rx='30' ry='8' transform='rotate(-6 136 92)'/%3E%3Cellipse cx='150' cy='40' rx='26' ry='7' transform='rotate(-84 150 40)'/%3E%3Cellipse cx='168' cy='56' rx='26' ry='7' transform='rotate(-10 168 56)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:blur(5px);opacity:.13;transform:rotate(8deg)}
.sv-list{--sv-bg:#EDE3D1}.sv-cal{--sv-bg:#E6DBC6}.sv-msg{--sv-bg:#E2E1CF}.sv-rep{--sv-bg:#EEDFCF}
.sv-paper{position:relative;background:#FFFCF7;border-radius:clamp(16px,4.4cqw,26px);border:1px solid rgba(27,38,32,.07);font-size:clamp(11px,2.55cqw,15.5px);line-height:1.4;color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(16,41,31,.06),0 44px 64px -36px rgba(75,54,39,.6)}
.sv p{margin:0}
.sv-k{font-size:max(9.5px,.72em);font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sv-hl{display:block;width:max-content;max-width:100%;padding:0 .25em .08em 0}
.js .sv .sv-hl{-webkit-mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.js .sv.on .sv-hl{animation:ink var(--hu,1s) cubic-bezier(.45,.05,.35,1) var(--hd,1.1s) forwards}
.sv-x{position:absolute;left:-3%;top:50%;width:106%;height:.6em;margin-top:-.26em;overflow:visible;color:var(--clay)}
.sv-x path,.sv-t path,.msg-note svg path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.sv-x path{stroke-width:2.3;vector-effect:non-scaling-stroke}
.js .sv .sv-x{clip-path:inset(-4px 100% -4px 0)}
.js .sv.on .sv-x{clip-path:inset(-4px -4px -4px 0);transition:clip-path var(--xu,.55s) cubic-bezier(.45,.05,.35,1) var(--xd,.5s)}
.js .sv .sv-t path,.js .sv .msg-note svg path{stroke-dasharray:1;stroke-dashoffset:1}
.js .sv.on .sv-t path,.js .sv.on .msg-note svg path{stroke-dashoffset:0;transition:stroke-dashoffset var(--xu,.55s) cubic-bezier(.45,.05,.35,1) var(--xd,.5s)}
/* 2. the listing, rewritten */
.lc{width:min(80cqw,470px);transform:rotate(-1.5deg)}
.lc-ph{position:relative;height:clamp(64px,30cqh,240px);margin:.7em .7em 0;border-radius:clamp(11px,3cqw,18px);overflow:hidden}
.lc-ph img{width:100%;height:100%;object-fit:cover}
.lc-b{padding:1em 1.35em 1.3em}
.lc-old{position:relative;width:max-content;max-width:100%;margin-top:.3em;font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-size:1.3em;line-height:1.2;color:var(--mute)}
.lc-new{font-family:var(--hand);font-weight:600;font-size:2em;line-height:1.02;color:var(--pen);margin-top:.12em;transform:rotate(-1.2deg);transform-origin:0 50%;--hd:1.05s;--hu:1.15s}
.lc-go{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.8em}
.lc-go .sv-k{flex:0 0 100%;margin-bottom:.05em}
.lc-go span:not(.sv-k){font-size:max(9.5px,.78em);font-weight:600;line-height:1.2;padding:.36em .8em;border-radius:999px;background:rgba(95,106,69,.16);color:#2F3A1E;white-space:nowrap}
.js .sv .lc-go span:not(.sv-k){opacity:0;transform:translateY(.35em)}
.js .sv.on .lc-go span:not(.sv-k){opacity:1;transform:none;transition:opacity .5s ease 2s,transform .7s var(--ease) 2s}
.js .sv.on .lc-go span:nth-of-type(3){transition-delay:2.15s}.js .sv.on .lc-go span:nth-of-type(4){transition-delay:2.3s}
.lc-more{margin-top:.9em;padding-top:.85em;border-top:1px solid var(--line)}
.lc-d{font-family:var(--sans);font-size:1em}
.lc-d .sv-x{--xd:2.1s}
.lc-d2{font-size:1.5em;line-height:1.08}
.lc-d2 .sv-hl{--hd:2.6s;--hu:1s}
.lc-d2 .sv-hl + .sv-hl{--hd:3.45s}
/* 3. pricing, adjusted every day */
.cal{width:min(82cqw,480px);padding:1.3em 1.3em 1.15em;transform:rotate(1.2deg)}
.cal-h{display:flex;justify-content:space-between;align-items:flex-end;gap:1em;padding-bottom:.8em;border-bottom:1px solid var(--line)}
.cal-m{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:380;font-size:1.9em;line-height:1;letter-spacing:-.02em;color:var(--green-ink);margin-top:.2em}
.cal-chip{font-size:.8em;font-weight:600;padding:.45em .85em;border-radius:999px;background:rgba(95,106,69,.16);color:#2F3A1E;white-space:nowrap}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.42em}
.cal-w{margin-top:.85em;font-size:.68em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.cal-g{margin-top:.45em}
.cal .d{position:relative;aspect-ratio:1/1.16;border-radius:.75em;background:#F3ECDF;display:flex;flex-direction:column;padding:.4em .42em .42em;transition:background-color .5s ease,opacity .5s ease}
.cal .d b{font-size:.8em;font-weight:600;line-height:1;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cal .d i{display:block;margin-top:auto;height:62%;border-radius:.3em;background:var(--olive-lt);transform-origin:50% 100%;transform:scaleY(var(--r));transition:transform .9s var(--ease),background-color .6s ease}
.cal .d.hot i{background:#D59A7C}
.cal .d.past{opacity:.42}
.cal .d.now{background:#fff}
.cal .d.now::after{content:"";position:absolute;inset:-.3em;border:1.7px solid var(--clay);border-radius:48% 52% 44% 56% / 56% 44% 54% 46%;transform:rotate(-7deg)}
.cal-g{position:relative}
.cal-ev{position:absolute;grid-column:5 / 7;grid-row:2 / 3;inset:-.36em -.34em;pointer-events:none;color:var(--pen)}
.cal-ev svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-2deg)}
.cal-ev path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cal-g .d:nth-child(n+15){margin-top:1.3em}
.cal-ev .ev-n{position:absolute;right:-.1em;top:calc(100% - .3em);padding:.06em .38em .14em;border-radius:.45em;background:#FFFCF7;font-family:var(--hand);font-weight:600;font-size:1.25em;line-height:1;white-space:nowrap;transform:rotate(-4deg);box-shadow:0 1px 2px rgba(16,41,31,.08)}
.js .sv .cal-ev path{stroke-dasharray:1;stroke-dashoffset:1}
.js .sv.on .cal-ev path{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.45,.05,.35,1) .7s}
.js .sv .cal-ev .ev-n{opacity:0}
.js .sv.on .cal-ev .ev-n{opacity:1;transition:opacity .5s ease 1.45s}
.cal-l{display:flex;gap:1.3em;margin-top:.95em;font-family:var(--hand);font-weight:600;font-size:1.3em;line-height:1;color:var(--pen)}
.cal-l span{display:flex;align-items:center;gap:.4em}
.cal-l i{width:.9em;height:.42em;border-radius:.2em;background:var(--olive-lt)}
.cal-l i.hi{background:#D59A7C}
/* 4. every guest answered in under thirty minutes */
.msg{width:min(80cqw,450px);padding:1.15em 1.2em 1.2em;transform:rotate(-1deg)}
.msg-h{display:flex;align-items:center;gap:.75em;padding-bottom:.8em;border-bottom:1px solid var(--line)}
.msg-av{flex:none;width:2.5em;height:2.5em;border-radius:52% 48% 46% 54% / 50% 46% 54% 50%;display:grid;place-items:center;background:linear-gradient(160deg,#F3E3D3,#E6C0AA);color:var(--clay-ink);font-family:var(--disp);font-size:1em}
.msg-n{font-weight:600;line-height:1.2}
.msg-s{font-size:.84em;color:var(--ink-2)}
.msg-day{text-align:center;font-size:.68em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:.95em 0 .6em}
.bub{max-width:84%;padding:.7em .95em .55em;border-radius:1.25em;line-height:1.38}
.bub .t{display:block;margin-top:.3em;font-size:.76em;font-weight:600;color:var(--ink-2)}
.bub.in{background:#F1EBDF;border-bottom-left-radius:.4em}
.msg-r{position:relative;display:flex;justify-content:flex-end;margin-top:.65em}
.bub.out{background:var(--green);color:#F6F1E8;border-bottom-right-radius:.4em}
.bub.out .t{color:rgba(246,241,232,.82);text-align:right}
.typing{position:absolute;right:0;top:0;display:flex;gap:.32em;padding:.85em 1em;border-radius:1.25em;border-bottom-right-radius:.4em;background:#E7EDE3;opacity:0}
.typing i{width:.46em;height:.46em;border-radius:50%;background:var(--olive);animation:dots 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{transform:translateY(-.22em);opacity:.55}}
.js .sv-msg .bub.out{opacity:0;transform:translateY(.6em) scale(.98);transform-origin:100% 100%}
.js .sv-msg.on .bub.out{opacity:1;transform:none;transition:opacity .45s ease 1.55s,transform .8s var(--ease) 1.55s}
.js .sv-msg.on .typing{animation:typing 1.25s ease .3s both}
@keyframes typing{0%{opacity:0;transform:translateY(.4em)}18%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}
.msg-note{display:flex;justify-content:flex-end;align-items:flex-end;gap:.2em;margin-top:.8em;padding-right:.3em;font-family:var(--hand);font-weight:600;font-size:1.55em;line-height:1;color:var(--clay-ink);transform:rotate(-3deg);--hd:2.35s;--hu:.8s}
.msg-note svg{width:.85em;height:1.1em;overflow:visible;margin-bottom:.3em;--xd:2.2s;--xu:.35s}
.msg-note svg path{stroke-width:1.5}
/* 5. a report by the 5th */
.rep{width:min(76cqw,440px);padding:1.35em 1.5em 1.2em;transform:rotate(-1.2deg)}
.rep-back{position:absolute;width:min(72cqw,420px);height:min(80cqh,600px);padding:1.2em 1.4em;background:#F6EEE1;transform:translate(9%,-3%) rotate(4.5deg);box-shadow:0 1px 2px rgba(16,41,31,.05),0 30px 50px -34px rgba(75,54,39,.5)}
.rep-back .sv-k{text-align:right}
.rep-h{display:flex;justify-content:space-between;align-items:flex-end;gap:1em;padding-bottom:.8em;border-bottom:2px solid var(--clay-lt)}
.rep-t{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:380;font-size:1.9em;line-height:1;letter-spacing:-.02em;color:var(--green-ink);margin-top:.2em}
.rep-d{font-size:.8em;font-weight:600;color:var(--clay-ink);white-space:nowrap}
.rep-s{padding:.8em 0 .85em;border-bottom:1px dashed rgba(29,61,51,.26)}
.rep-n{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-size:1.14em;line-height:1.2;color:var(--green-ink);margin-bottom:.3em}
.rep-s ul{margin:0}
.rep-s li{position:relative;padding-left:1.55em;margin-top:.22em}
.sv-t{position:absolute;left:0;top:.1em;width:1.1em;height:1.1em;overflow:visible;color:var(--green)}
.sv-t path{stroke-width:2}
.rep-s li:nth-child(1) .sv-t{--xd:.9s}.rep-s li:nth-child(2) .sv-t{--xd:1.15s}
.rep-b ul{display:flex;flex-wrap:wrap;column-gap:1.15em}
.rep-b li:nth-child(1) .sv-t{--xd:1.45s}.rep-b li:nth-child(2) .sv-t{--xd:1.65s}.rep-b li:nth-child(3) .sv-t{--xd:1.85s}
.rep-f{display:inline-flex;align-items:center;gap:.45em;margin-top:.85em;padding:.4em .8em;border-radius:999px;background:rgba(95,106,69,.14);font-size:.8em;font-weight:600;color:#2F3A1E}
.js .sv-rep .rep-s{opacity:0;transform:translateY(.5em)}
.js .sv-rep.on .rep-s{opacity:1;transform:none;transition:opacity .6s ease,transform .8s var(--ease)}
.js .sv-rep.on .rep-s:nth-of-type(2){transition-delay:.35s}.js .sv-rep.on .rep-s:nth-of-type(3){transition-delay:.7s}.js .sv-rep.on .rep-s:nth-of-type(4){transition-delay:1.05s}.js .sv-rep.on .rep-s:nth-of-type(5){transition-delay:1.4s}
/* small cards, on phones: fewer lines, the paper allowed to run off the bottom edge */
@container sv (max-width: 460px){
  .sv{place-items:start center;padding-top:5cqh}
  .sv-paper{font-size:clamp(11px,3.8cqw,13.5px)}
  .lc{width:88cqw}
  .lc-ph{height:26cqh}
  .lc-b{padding:.7em 1em .9em}
  .lc-more{display:none}
  .lc-new{font-size:1.55em}
  .lc-ph{height:21cqh}
  .cal-ev .ev-n{right:1.9em}
  .lc-go{margin-top:.5em;gap:.32em}
  .lc-go span:not(.sv-k){padding:.3em .68em}
  .lc-go .sv-k{flex:0 0 auto;align-self:center;margin:0 .1em 0 0}
  .cal{width:90cqw;padding:.9em .95em .9em}
  .cal-m{font-size:1.5em}
  .cal-g .d:nth-child(n+15),.cal-l{display:none}
  .cal .d{aspect-ratio:1/.9;padding:.3em .34em .34em}
  .cal-w{margin-top:.6em}
  .msg{width:90cqw;padding:.85em .95em .9em}
  .msg-h,.msg-day{display:none}
  .bub{max-width:90%;padding:.55em .8em .45em}
  .msg-note{font-size:1.4em}
  .rep{width:86cqw;padding:.95em 1.1em .9em}
  .rep-back{width:80cqw;height:88cqh}
  .rep-t{font-size:1.55em}
  .rep-x,.rep-f,.rep-y{display:none}
  .rep-s{padding:.55em 0 .6em}
}
.ticks{position:absolute;z-index:3;left:20px;bottom:20px;display:flex;gap:6px;padding:10px 12px;border-radius:999px;background:rgba(255,252,247,.84)}
.ticks i{width:22px;height:3px;border-radius:3px;background:rgba(27,38,32,.2);transition:background-color .5s ease,width .6s var(--ease)}
.ticks i.on{background:var(--green);width:36px}
.svc-head{padding-bottom:26px}
.note{position:relative;min-height:clamp(186px,21vh,208px);display:grid;grid-template-columns:108px minmax(0,1fr);column-gap:30px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.note .nimg{display:none}
.note .si{width:108px;color:var(--pen);--wd:.7s}
.note .si .wash{mix-blend-mode:multiply}
.note .nn{font-size:13.5px;font-weight:600;letter-spacing:.12em;color:var(--clay-ink);font-variant-numeric:tabular-nums}
.note h3{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:370;font-size:clamp(28px,2.5vw,37px);line-height:1.1;letter-spacing:-.018em;margin-top:8px;transition:color .6s ease;text-wrap:balance;color:var(--green-ink)}
.note .nt p{margin-top:10px;font-size:18px;color:var(--ink-2);max-width:38ch;text-wrap:pretty}
.js .note:not(.on) h3{color:#66706A}

/* ---------- how it works ---------- */
.how{padding:84px 0 80px}
.how-head{margin-bottom:46px}
.tl{position:relative;--lab:280px}
.tl-axis,.tl-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center}
.tl-axis{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.tl-svg{width:100%;height:auto}
.tl-svg .tn{font-size:31px;text-anchor:middle}
.tl-row{min-height:66px;border-top:1px solid var(--line)}
.tl-row:last-child{border-bottom:1px solid var(--line)}
.tl-row .tl-svg{height:58px;color:var(--green)}
.tl-row.last .tl-svg{color:var(--clay)}
.tl-name{font-size:19px;font-weight:600;line-height:1.25}
.tl-name small{display:block;font-size:16px;font-weight:400;color:var(--ink-2);margin-top:2px}
.a-live{right:96px;top:-50px}
.a-live .arw{right:-52px;top:10px;width:50px;height:42px}

/* ---------- pricing ---------- */
/* clip, not hidden: hidden made the section a scroll container, so the summary card never stuck. Clip trims the same and lets it stick */
.pricing{position:relative;padding:84px 0 80px;background:var(--sand) var(--travertine) 0 0/100% 100% no-repeat;isolation:isolate;overflow:hidden;overflow:clip}
.pr-head{margin-bottom:40px}
.pr-grid{display:grid;grid-template-columns:minmax(0,1fr) 396px;gap:28px;align-items:start}
.pr-side{align-self:stretch}
/* the card sticks inside its own column cell, which ends where the list ends, so it can never travel down beside the launch fee */
.pr-stick{position:sticky;top:96px}
.inc{border-radius:var(--r);padding:34px 40px 30px}
.inc-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.inc-top h3{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:400;font-size:30px;letter-spacing:-.01em;color:var(--green-ink)}
.inc-now{font-size:15px;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--green);color:var(--linen);white-space:nowrap}
.grp{padding-top:18px}
.grp + .grp{margin-top:14px;border-top:1px solid var(--line)}
.gh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:16.5px;font-weight:600;color:var(--ink)}
.chip{font-size:14px;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(95,106,69,.16);color:#2F3A1E}
.gh .fine{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.gl{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:8px}
.gl li{position:relative;padding:7px 0 7px 32px;font-size:17px;line-height:1.4;transition:color .45s ease}
.gl .tk{position:absolute;left:0;top:8px;width:21px;height:21px;color:var(--green);overflow:visible;transition:opacity .3s ease}
.gl li::before{content:"";position:absolute;left:4px;top:19px;width:11px;height:1.6px;border-radius:2px;background:rgba(27,38,32,.45);opacity:0;transition:opacity .3s ease}
.keep{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px;font-size:17px;color:var(--ink);transition:color .45s ease}
.keep .chip{background:rgba(180,102,74,.14);color:var(--clay-ink)}
.keep s{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 55%/0 1.5px no-repeat;transition:background-size .6s var(--ease)}
.js .inc[data-svc="m"] .grp-f li{color:var(--mute)}
.js .inc[data-svc="m"] .grp-f .tk{opacity:0}
.js .inc[data-svc="m"] .grp-f li::before{opacity:1}
.js .inc[data-svc="m"] .grp-f .chip{background:rgba(27,38,32,.07);color:var(--ink-2)}
.js .inc[data-svc="f"] .keep{color:var(--mute)}
.js .inc[data-svc="f"] .keep s{background-size:100% 1.5px}
.js .inc[data-svc="f"] .keep .chip{background:rgba(27,38,32,.07);color:var(--ink-2)}
.fee{margin-top:20px;border-radius:var(--r);padding:30px 40px}
.fee summary{list-style:none;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;border-radius:12px}
.fee summary::-webkit-details-marker,.grp-f summary::-webkit-details-marker{display:none}
.grp-f summary{list-style:none;border-radius:12px;min-height:44px}
.fee .k{font-size:13.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.fee .v{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:340;font-size:58px;line-height:1;letter-spacing:-.03em;color:var(--green-ink)}
.fee .v small{font-family:var(--sans);font-size:17px;letter-spacing:0;color:var(--ink-2);margin-left:10px;font-weight:500}
.fs{margin-left:auto;display:none;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--green-ink)}
.fs i{width:10px;height:10px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .4s var(--ease)}
details[open] > summary .fs i{transform:rotate(225deg) translate(-2px,-2px)}
.fee-l{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 24px;font-size:16.5px;line-height:1.4;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.fee-l li{padding:5px 0 5px 20px;position:relative}
.fee-l li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:60% 40% 55% 45%;background:var(--clay)}
/* the summary card */
.pcard{border-radius:var(--r);padding:30px 28px 26px}
.c-price{display:flex;align-items:baseline;gap:12px}
.codo,.pr-static{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:340;font-size:62px;line-height:1;letter-spacing:-.035em;color:var(--green-ink)}
.codo{display:none}
.js .codo{display:inline-flex}
.js .pr-static{display:none}
.dg{display:inline-block;height:1em;overflow:hidden;position:relative}
.dg > span{display:flex;flex-direction:column;transition:transform .8s cubic-bezier(.3,1.25,.4,1)}
.dg > span > i{font-style:normal;height:1em;line-height:1;text-align:center}
.dg + .dg > span{transition-delay:.07s}
.pr-static .f{display:none}
.pcard:has(input[value="f"]:checked) .pr-static .m{display:none}
.pcard:has(input[value="f"]:checked) .pr-static .f{display:inline}
.c-of{font-size:15.5px;line-height:1.3;color:var(--ink-2);white-space:nowrap}
.c-name{font-size:16px;font-weight:600;color:var(--clay-ink);margin:8px 0 18px;min-height:24px}
.choice{border:0;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(27,38,32,.18);position:relative}
.opt{position:relative;display:block;padding:14px 16px;min-height:78px;cursor:pointer;border-radius:20px;transition:background-color .3s ease,box-shadow .3s ease,transform .2s ease}
.opt + .opt::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--line)}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.opt .on{display:block;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.opt .op{display:block;font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-size:30px;line-height:1.1;letter-spacing:-.02em;margin:6px 0 2px;color:var(--ink)}
.opt:hover{background:rgba(27,38,32,.04)}
.opt:active{transform:scale(.985)}
.opt:has(input:checked){background:#fff;box-shadow:0 0 0 2px var(--green-ink),0 8px 20px -12px rgba(16,41,31,.5);z-index:1}
.opt:has(input:checked)::before,.opt:has(input:checked) + .opt::before{opacity:0}
.opt:has(input:focus-visible){outline:3px solid var(--green);outline-offset:4px}
.pcard .btn{width:100%;min-height:56px;margin-bottom:18px}
.c-rows{border-top:1px solid var(--line);padding-top:14px;margin:0}
.c-rows div{display:flex;justify-content:space-between;gap:16px;font-size:16.5px}
.c-rows dt{color:var(--ink-2)}
.c-rows dd{font-weight:600;margin:0}
.c-nofee{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:16px;font-weight:500;line-height:1.45}
.c-nofee svg{flex:none;width:21px;height:21px;margin-top:1px;color:var(--green);overflow:visible}
.a-mean{position:relative;display:block;margin:14px 0 0 150px;height:40px}
.a-mean .arw{left:-44px;top:-26px;width:42px;height:46px}

/* ---------- promise ---------- */
.promise{background:var(--green);color:var(--linen);padding:84px 0 80px;--focus:var(--gold-lt);position:relative;overflow:hidden}
.promise::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.5;mix-blend-mode:soft-light;pointer-events:none}
.promise .wrap{position:relative}
.promise .eyebrow{color:rgba(246,241,232,.84)}
.promise .eyebrow::before{background:var(--gold-lt)}
.honest{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:340;font-size:clamp(38px,5vw,76px);line-height:1.04;letter-spacing:-.028em;text-wrap:balance}
.honest em{font-style:italic;font-weight:320;color:var(--gold-lt)}
.figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px;margin-top:54px}
.fig .v{position:relative;width:max-content;font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:300;font-size:clamp(64px,6.3vw,96px);line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline;gap:.1em;font-variant-numeric:lining-nums tabular-nums;padding-bottom:.16em}
.fig .u{font-style:italic;font-size:.3em;letter-spacing:0;color:var(--gold-lt);font-weight:360;margin-left:.12em}
.fig .u.pre{margin:0 .1em 0 0}
.fig .u.pre ~ .u{margin-left:-.02em}
.fig .odo + .odo{margin-left:-.1em}
.fig .us{position:absolute;left:-4px;right:-10px;bottom:0;width:calc(100% + 14px);height:16px;color:var(--gold-lt);overflow:visible}
.fig p{margin-top:16px;font-size:17px;line-height:1.45;color:rgba(246,241,232,.92);max-width:24ch}
.odo{display:inline-block;height:1.08em;overflow:hidden;line-height:1.08;vertical-align:bottom}
.odo .col{display:flex;flex-direction:column;transition:transform 2s cubic-bezier(.2,.75,.12,1)}
.odo .col span{height:1.08em}

/* ---------- questions ---------- */
.qs{padding:84px 0 80px}
.qs-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.qs-head{position:relative}
/* the left column: the terrace under an arched top, the olive sprig drawn across its corner, the invitation written beneath */
.qs-art{position:relative;margin-top:28px;max-width:440px}
.qs-ph{position:relative;aspect-ratio:16/10;border-radius:clamp(90px,11vw,170px) clamp(90px,11vw,170px) var(--r) var(--r);overflow:hidden;box-shadow:0 40px 70px -48px rgba(75,54,39,.6)}
.qs-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 62%}
.qs-art .sprig{position:absolute;right:-34px;bottom:34px;width:230px;--wd:.9s;transform:rotate(-8deg)}
.qs-art .sprig .wash{mix-blend-mode:multiply}
.qs-note{position:relative;display:block;margin:16px 0 0 6px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;padding:14px 4px;cursor:pointer;
  font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:400;font-size:clamp(21px,1.8vw,25px);line-height:1.25;letter-spacing:-.01em;border-radius:10px;transition:color .25s ease;color:var(--green-ink)}
.qa summary .qt{position:relative;display:inline-block;padding-bottom:4px}
.qu{position:absolute;left:-2px;right:-6px;bottom:-4px;width:calc(100% + 8px);height:10px;overflow:visible;color:var(--clay)}
.qu path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.qu{clip-path:inset(-6px 100% -6px 0);transition:clip-path .25s cubic-bezier(.45,.05,.35,1)}
.qa[open] .qu{clip-path:inset(-6px -8px -6px -4px);transition:clip-path .55s cubic-bezier(.45,.05,.35,1) .08s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--olive)}
.pm{flex:none;position:relative;width:38px;height:38px;border-radius:50%;border:1px solid rgba(27,38,32,.2);color:var(--ink);transition:background-color .3s ease,border-color .3s ease,transform .5s var(--ease)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.6px;margin:-.8px 0 0 -6.5px;background:currentColor;border-radius:2px;transition:transform .5s var(--ease)}
.pm::after{transform:rotate(90deg)}
.qa[open] .pm{background:var(--green);border-color:var(--green);color:var(--linen);transform:rotate(180deg)}
.qa[open] .pm::after{transform:rotate(0)}
.qa summary:hover .pm{border-color:rgba(27,38,32,.4)}
.qa summary:active .pm{transform:scale(.92)}
.ans{padding:0 64px 24px 4px;font-size:18px;color:var(--ink-2);max-width:60ch}

/* ---------- about: the postcard ---------- */
.about{padding:84px 0 80px;background:var(--oat)}
.ab-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);gap:clamp(36px,4.6vw,72px);align-items:start}
.post{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 250px;background:var(--white);border-radius:8px;padding:42px 34px 36px 46px;
  box-shadow:0 0 0 1px rgba(27,38,32,.05),0 2px 6px rgba(16,41,31,.05),0 40px 70px -44px rgba(75,54,39,.6)}
.post::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 30%),radial-gradient(120% 90% at 100% 100%,rgba(162,122,52,.07),transparent 60%),var(--grain)}
.post-msg{padding-right:34px;border-right:1px solid var(--line)}
.dear{font-family:var(--disp);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:24px;color:var(--ink)}
.lp{font-size:19px;line-height:1.6;color:var(--ink-2);margin-top:14px;max-width:46ch}
.sigs{margin-top:20px;display:grid;gap:0}
.sig.k{margin-top:-.1em}
.sig-n{display:inline-block;color:var(--green-ink);line-height:1.1;white-space:nowrap;padding:0 .4em .12em .08em}
.sig.c .sig-n{font-family:var(--sig);font-size:clamp(38px,3.7vw,56px);--d:.15s}
.sig.k{padding-left:56px}
.sig.k .sig-n{font-family:var(--sig);font-size:clamp(38px,3.7vw,56px);--d:1.75s}
.js .sig-n{-webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 60% 100%);mask-image:linear-gradient(90deg,#000 0 40%,transparent 60% 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.js .sigs.write .sig-n{animation:ink 1.6s cubic-bezier(.5,.08,.3,1) var(--d) forwards}
.post-addr{position:relative;padding-left:26px;display:flex;flex-direction:column;justify-content:flex-end;min-height:330px}
.stamp{position:absolute;top:-14px;right:-8px;width:88px;height:106px;transform:rotate(2deg);filter:drop-shadow(0 1px 2px rgba(16,41,31,.2))}
.stamp .perf{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 2.7px,#EFE6D4 3.1px) -4px -4px/8px 8px}
.stamp .face{position:absolute;inset:5px;background:#EFE6D4;border:1px solid rgba(126,94,34,.3);display:flex;flex-direction:column;align-items:center;padding:6px 4px 5px;color:#2A4A3E}
.stamp .face svg{width:64px;height:auto;overflow:visible}
.stamp .face span{font-size:7.5px;font-weight:700;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;color:#6A5528;margin-top:auto}
.pmark{position:absolute;top:26px;right:62px;width:132px;height:84px;transform:rotate(-9deg);color:#8C6A2C;opacity:.82;overflow:visible}
.pmark text{font:700 7.8px var(--sans);letter-spacing:.1em;fill:currentColor}
.pmark .pd{font-size:9.5px;letter-spacing:.08em}
.sky{position:relative;width:100%;margin:0 0 12px;--wd:1.2s}
.addr span{display:block;height:42px;border-bottom:1px solid rgba(27,38,32,.22);font-family:var(--hand);font-weight:600;font-size:27px;line-height:50px;color:var(--pen);white-space:nowrap;padding-left:4px}
/* round 14: the two of them, an instant print taped beside the postcard */
.ab-side{display:flex;flex-direction:column}
.pol{position:relative;align-self:flex-start;width:206px;margin:-18px 0 0 22px;padding:11px 11px 0;background:var(--white);border-radius:3px;transform:rotate(3deg);
  box-shadow:0 0 0 1px rgba(27,38,32,.06),0 2px 5px rgba(16,41,31,.06),0 26px 40px -26px rgba(75,54,39,.55)}
.pol-ph{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:1px}
.pol-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:var(--grade)}
.pol .hn{font-size:27px;text-align:center;padding:9px 0 12px;transform-origin:50% 50%}
.pol .hn .hl{margin:0 auto}
.js .pol.on .hn .hl{animation:ink var(--du,1s) cubic-bezier(.45,.05,.35,1) var(--dl,0s) forwards}
.tape{position:absolute;left:50%;top:-15px;width:98px;height:32px;margin-left:-49px;transform:rotate(-5deg);color:var(--pen);overflow:visible;z-index:2}
.tape .tp{fill:#E6C0AA;opacity:.74}
.decl{margin-top:34px;border-radius:var(--r);padding:36px 34px 30px}
.decl h3{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:400;font-size:28px;letter-spacing:-.01em;color:var(--green-ink)}
.decl ul{margin-top:14px}
.decl li{position:relative;padding:13px 0 13px 32px;border-top:1px solid var(--line);font-size:17px;line-height:1.45}
.decl li:first-child{border-top:0}
.decl .xk{position:absolute;left:0;top:14px;width:20px;height:20px;color:var(--clay);overflow:visible}

/* ---------- audit ---------- */
.audit{position:relative;padding:84px 0 80px}
.au-photo{position:relative;border-radius:var(--r) var(--r) clamp(60px,9vw,150px) var(--r);overflow:hidden;aspect-ratio:1320/350;margin-bottom:92px;box-shadow:0 40px 80px -56px rgba(75,54,39,.6)}
.au-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.au-photo .tag{left:20px;bottom:20px}
.au-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:start}
.au-info .lede{color:var(--ink)}
.sheet{position:relative;margin:34px 0 0 6px;padding:30px 30px 24px 30px;background:var(--white);transform:rotate(-1.1deg);max-width:560px;border:1.5px solid rgba(29,61,51,.55);border-radius:3px;
  box-shadow:0 30px 50px -36px rgba(75,54,39,.6)}
.js .sheet{border-color:transparent}
.sheet-edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--pen);pointer-events:none}
.sheet-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--hand);font-weight:600;font-size:27px;line-height:1;color:var(--pen);padding:0 34px 12px 2px}
.sheet-t small{font-size:21px;color:var(--clay-ink)}
.parts li{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:center;padding:11px 0;border-top:1px dashed rgba(29,61,51,.3);font-size:18px;line-height:1.4}
.parts .gy{width:54px;height:54px;color:var(--pen);overflow:visible}
.a-keep{right:-6px;bottom:-40px}
.a-keep .arw{left:-52px;top:-30px;width:46px;height:46px}
.lf{margin-top:58px;font-size:13.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:16px;padding:4px 0 0 8px}
.chips li{position:relative;font-size:17px;line-height:1.3;padding:9px 16px;color:var(--ink)}
.chips .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--pen);pointer-events:none}
html:not(.js) .chips li{box-shadow:inset 0 0 0 1.5px rgba(29,61,51,.45);border-radius:999px}
.au-form{position:relative;border-radius:var(--r);padding:44px 40px 36px}
.au-form h3{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:400;font-size:32px;letter-spacing:-.01em;color:var(--green-ink)}
.au-form .fh{font-size:16.5px;color:var(--ink-2);margin-top:6px;max-width:24ch}
.keys{position:absolute;top:-104px;right:-34px;width:300px;--wd:1.2s;pointer-events:none}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f.full{grid-column:1 / -1}
.f label{font-size:15px;font-weight:600;color:var(--ink)}
.f label small{font-weight:400;color:var(--ink-2);font-size:14px}
.f input,.f select{font:400 17px var(--sans);color:var(--ink);min-height:54px;padding:0 16px;border-radius:16px;border:1px solid rgba(27,38,32,.24);background:#fff;width:100%;
  transition:border-color .2s ease,box-shadow .25s ease,background-color .3s ease;-webkit-appearance:none;appearance:none}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B2620' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.f input:hover,.f select:hover{border-color:rgba(27,38,32,.45)}
.f input:focus-visible,.f select:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(23,59,47,.28);border-radius:16px}
.f [aria-invalid="true"]{border-color:#A8321F;background:#FFF6F3;box-shadow:0 0 0 1px #A8321F}
.err{display:none;align-items:center;gap:7px;font-size:15px;font-weight:600;color:#8E2A1A;line-height:1.3}
.err::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:#A8321F;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.f.bad .err{display:flex}
.f .sugg{position:static;margin-top:-8px;padding:6px;border-radius:20px;box-shadow:0 1px 2px rgba(16,41,31,.06),0 22px 40px -26px rgba(75,54,39,.55)}
.f .carry{display:none;font-family:var(--hand);font-weight:600;font-size:24px;line-height:1;color:var(--clay-ink);transform:rotate(-1.5deg);transform-origin:0 50%;margin-top:2px}
.f.carried .carry{display:block}
.f.carried input{border-color:var(--olive);box-shadow:0 0 0 3px rgba(95,106,69,.22)}
.f select.synced,.f input.synced{animation:synced .9s ease}
@keyframes synced{0%{box-shadow:0 0 0 0 rgba(162,122,52,0)}30%{box-shadow:0 0 0 4px rgba(162,122,52,.35)}100%{box-shadow:0 0 0 0 rgba(162,122,52,0)}}
.esum{display:none;margin-top:20px;padding:13px 16px;border-radius:14px;background:#FCEBE6;color:#7A2415;font-size:16px;font-weight:600}
.esum.show{display:block}
.submit{display:flex;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
.submit .btn{min-height:54px}
.submit .sn{font-size:15.5px;color:var(--ink-2)}
.sent{display:none;text-align:left;padding:6px 0 4px}
.sent .tkc{width:74px;height:74px;color:var(--green);overflow:visible;margin-bottom:12px}
.sent h3{font-size:34px}
.sent p{font-size:18px;color:var(--ink-2);margin-top:10px;max-width:36ch}
.sent .btn{margin-top:22px}
.au-form.is-sent .go{display:none}
.au-form.is-sent .sent{display:block}
noscript .soon{display:block;margin-top:18px;padding:14px 18px;border-radius:14px;background:rgba(23,59,47,.1);color:var(--green-ink);font-size:17px}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--oat);padding:22px 0 30px;margin-top:0;border-radius:clamp(30px,3.6vw,60px) clamp(30px,3.6vw,60px) 0 0;overflow:hidden}
.hz{position:relative;width:100%;height:clamp(170px,16vw,236px);--wd:2.2s}
.hz svg{position:absolute;inset:0;width:100%;height:100%}
.foot .in{position:relative;margin-top:-6px}
.foot .top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--line)}
.foot .wm .wt{font-size:26px}
.foot .ln{font-size:17px;color:var(--ink-2);margin-top:8px;max-width:40ch}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 6px;max-width:700px;justify-content:flex-end}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:16px;color:var(--ink);border-radius:10px;
  background:linear-gradient(var(--clay),var(--clay)) 12px calc(100% - 9px)/0 1.6px no-repeat;transition:background-size .4s var(--ease)}
.foot nav a:hover{background-size:calc(100% - 24px) 1.6px}
.a-bye{position:relative;display:block;margin-top:26px;height:70px}
.foot .bot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}


/* ---------- round 12: every interaction answered ---------- */
/* an ink ripple where a button is pressed */
.btn{position:relative;overflow:hidden;isolation:isolate}
.rip{position:absolute;z-index:-1;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:46% 54% 50% 50% / 52% 48% 52% 48%;background:rgba(246,241,232,.34);pointer-events:none;animation:rip .6s cubic-bezier(.2,.7,.3,1) forwards}
.btn.quiet .rip{background:rgba(23,59,47,.14)}
@keyframes rip{from{transform:scale(1);opacity:1}to{transform:scale(var(--rs,26));opacity:0}}
/* an address picked: the pin drops onto the field, the button answers once */
.start-ic.drop{animation:pindrop .62s cubic-bezier(.3,1.5,.5,1)}
@keyframes pindrop{0%{transform:translateY(-16px) scale(.9,1.08);opacity:.2}55%{transform:translateY(0) scale(1.08,.9);opacity:1}100%{transform:none}}
.start .btn.pulse{animation:pulse .9s ease-out .15s}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,59,47,.34),0 10px 22px -12px rgba(16,41,31,.55)}100%{box-shadow:0 0 0 14px rgba(23,59,47,0),0 10px 22px -12px rgba(16,41,31,.55)}}
/* the form: a clay squiggle drawn under a field that needs a look, a small green tick when it is right */
.fi{position:relative;display:block}
.fi input{padding-right:46px}
.okt{position:absolute;right:15px;top:50%;width:22px;height:22px;margin-top:-11px;overflow:visible;color:var(--green);pointer-events:none;opacity:0;transition:opacity .15s ease}
.f.ok .okt{opacity:1}
.okt path,.sq path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.okt path{stroke-dasharray:1;stroke-dashoffset:1}
.okt path{stroke-width:2.3;transition:stroke-dashoffset .2s ease}
.f.ok .okt path{stroke-dashoffset:0;transition:stroke-dashoffset .42s cubic-bezier(.45,.05,.35,1)}
.sq{display:block;width:100%;height:10px;margin-top:-4px;overflow:visible;color:var(--clay)}
.sq path{stroke-width:1.9;vector-effect:non-scaling-stroke}
.sq{clip-path:inset(-6px 100% -6px 0);transition:clip-path .2s ease}
.f.bad .sq{clip-path:inset(-6px -6px -6px -6px);transition:clip-path .5s cubic-bezier(.45,.05,.35,1)}
.f.bad .fi input{border-color:#A8321F}
/* the request, sealed and sent on its way */
.env-stage{display:none;position:absolute;inset:0;z-index:6;place-items:center;pointer-events:none}
.au-form.sending .env-stage{display:grid;transition:top .45s var(--ease),height .45s var(--ease)}
.au-form.sending .go{transform-origin:50% 0;animation:fold .5s cubic-bezier(.65,0,.35,1) forwards;pointer-events:none}
.au-form.sending .keys{transition:opacity .4s ease;opacity:.35}
@keyframes fold{to{opacity:0;transform:perspective(900px) rotateX(62deg) scale(.5) translateY(60px)}}
.env{position:relative;width:min(380px,84%);aspect-ratio:400/260;perspective:900px;opacity:0;transform:translateY(30px) scale(.92);transition:opacity .3s ease,transform .55s var(--ease)}
.env-stage.s1 .env{opacity:1;transform:none}
.env-back{position:absolute;inset:0;border-radius:7px;background:#EADFC9;box-shadow:0 30px 50px -30px rgba(75,54,39,.65)}
.env-letter{position:absolute;left:7%;right:7%;top:6%;height:80%;z-index:1;border-radius:4px;background:#FFFCF7;box-shadow:0 1px 3px rgba(16,41,31,.12);padding:9% 9%;display:grid;align-content:start;gap:9px;
  transform:translateY(-82%);transition:transform .45s cubic-bezier(.65,0,.35,1)}
.env-letter i{height:2px;border-radius:2px;background:rgba(29,61,51,.2)}.env-letter i:nth-child(2){width:78%}.env-letter i:nth-child(4){width:52%}
.env-stage.s2 .env-letter{transform:translateY(0)}
.env-front{position:absolute;inset:0;z-index:2;border-radius:7px;background:linear-gradient(180deg,#F6EEDF,#F1E6D2);clip-path:polygon(0 0,50% 64%,100% 0,100% 100%,0 100%)}
.env-pen,.env-flap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--pen)}
.env-pen path,.env-flap path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.8}
.env-addr{position:absolute;left:21%;right:6%;top:72%;font-family:var(--hand);font-weight:600;font-size:clamp(20px,5.6cqw,27px);line-height:1.05;color:var(--pen);transform:rotate(-2deg)}
.env{container-type:inline-size}
.env-addr .hl{display:block;width:max-content;max-width:100%;padding:0 .2em .06em 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.env-addr .hl + .hl{margin-left:.8em}
.env-stage.s4 #envL1{animation:ink .42s cubic-bezier(.45,.05,.35,1) forwards}
.env-stage.s4 #envL2{animation:ink .38s cubic-bezier(.45,.05,.35,1) .36s forwards}
.env-stamp{position:absolute;right:6%;top:62%;width:13%;aspect-ratio:4/5;border:1.5px dashed rgba(126,94,34,.55);border-radius:2px;background:#EFE3C8}
.env-flap{position:absolute;left:0;right:0;top:0;height:66%;z-index:0;transform-origin:50% 0;transform:rotateX(180deg);
  transition:transform .38s cubic-bezier(.65,0,.35,1),z-index 0s linear .19s}
.env-flap::before{content:"";position:absolute;inset:0;background:#E6D8BD;clip-path:polygon(0 0,100% 0,50% 100%)}
.env-stage.s3 .env-flap{transform:none;z-index:3}
.env-seal{position:absolute;z-index:4;left:50%;top:62%;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;opacity:0;transform:scale(1.8) rotate(-24deg);filter:drop-shadow(0 3px 3px rgba(75,54,39,.35))}
.env-seal svg{display:block;width:100%;height:100%}
.env-stage.s5 .env-seal{animation:seal .36s cubic-bezier(.3,1.35,.5,1) forwards}
@keyframes seal{0%{opacity:0;transform:scale(1.8) rotate(-24deg)}60%{opacity:1;transform:scale(.9,.84) rotate(-6deg)}100%{opacity:1;transform:rotate(-8deg)}}
.env-stage.s6 .env{transform:translate(min(34vw,300px),-340px) rotate(-16deg) scale(.24);opacity:0;transition:transform .55s cubic-bezier(.55,.05,.6,.3),opacity .3s ease .25s}
.sent .sent-hn{font-size:30px;line-height:1;color:var(--pen);margin:4px 0 10px;max-width:none}
.js .au-form.is-sent .sent-hn .hl{animation:ink .8s cubic-bezier(.45,.05,.35,1) .15s forwards}
/* address suggestions: the typed part stands out, the postcode rides on the second line, and there is always a way to keep what was typed */
.so b{font-weight:450}
.so b strong,.so small strong{font-weight:700;color:var(--ink)}
.so.so-typed{border-top:1px solid var(--line);border-radius:0 0 15px 15px;margin-top:4px;padding-top:9px}
.so.so-typed b{font-weight:600}
@media (prefers-reduced-motion: reduce){
  .rip{display:none}
  .au-form.sending .env-stage{display:none}
}

/* ---------- round 13: five small moments, each played once on arrival or on a touch ---------- */
/* how it works: the key travels the fourteen days and turns in the door; the door swings open onto the word live; the ring round 14 is drawn */
.tl-svg .tkey{transform-box:view-box;transform-origin:0 62px;transform:scaleY(-1)}
.tl-svg .leaf{transform-box:view-box;transform-origin:985px 55px;transform:scaleX(.14) skewY(9deg)}
.tl-svg .door-w{font-size:25px;fill:var(--clay-ink);text-transform:none;letter-spacing:0}
.js .tl:not(.play) .tkey{transform:translateX(-844px)}
.js .tl:not(.play) .leaf{transform:none}
.js .tl:not(.play) .door-glow,.js .tl:not(.play) .door-w{opacity:0}
.tl.play .tkey{animation:keyrun 2.05s cubic-bezier(.45,.05,.35,1) .1s both}
@keyframes keyrun{0%{transform:translateX(-844px)}70%{transform:translateX(0)}82%{transform:translateX(0) scaleY(.12)}100%{transform:translateX(0) scaleY(-1)}}
.tl.play .leaf{transition:transform .6s cubic-bezier(.3,1.25,.5,1) 2.1s}
.tl.play .door-glow{transition:opacity .6s ease 2.15s}
.tl.play .door-w{transition:opacity .45s ease 2.3s}
/* pricing: the house beside the launch fee answers the service chosen. The summary card travels only beside the list, so the two never meet */
.pr-main{display:contents}
.pr-grid{grid-template-rows:auto auto;row-gap:20px}
.inc{grid-column:1;grid-row:1}
.fee{grid-column:1;grid-row:2;margin-top:0}
.pr-side{grid-column:2;grid-row:1}
.pr-art{grid-column:2;grid-row:2;align-self:center;position:relative;padding:0 4px}
.pr-house svg{display:block;width:100%;height:auto;overflow:visible}
.a-house{position:relative;display:block;margin:-2px 0 0 30%}
.a-house .hn .hl + .hl{margin:0}
.pr-art .nf,.pr-art[data-svc="f"] .nm{display:none}
.pr-art[data-svc="f"] .nf{display:block}
.pr-house .wf{opacity:0;transition:opacity .9s ease .35s}
.pr-art[data-svc="f"] .wf{opacity:1}
.pr-house .hm,.pr-house .hf{transition:opacity .25s ease}
.pr-house .fading{opacity:0}
html:not(.js) .pricing:has(input[value="f"]:checked) .pr-art .wf{opacity:1}
html:not(.js) .pricing:has(input[value="f"]:checked) .pr-art .hm,html:not(.js) .pricing:not(:has(input[value="f"]:checked)) .pr-art .hf,html:not(.js) .pricing:has(input[value="f"]:checked) .pr-art .nm{display:none}
html:not(.js) .pricing:has(input[value="f"]:checked) .pr-art .nf{display:block}
/* what you can count on: a small drawn companion above each figure */
.fc2{display:block;width:54px;height:54px;margin:0 0 12px -4px;color:var(--gold-lt);overflow:visible}
.fc2 .sect{fill:none;stroke:rgba(220,192,138,.5);stroke-width:17;stroke-dasharray:50 100;stroke-dashoffset:0}
.c-1h .sect{stroke-width:14;stroke-dasharray:100 100}
.fc2 .mh{transform-box:view-box;transform-origin:32px 34px;transform:rotate(180deg)}
.c-1h .mh{transform-origin:32px 39px;transform:rotate(360deg)}
.c-1h .pw{transform-box:view-box;transform-origin:32px 9px}
.fc2 .bf{fill:rgba(220,192,138,.42)}
.fc2 .c5n{font-size:27px;fill:var(--gold-lt)}
.fc2 .pgf{fill:#1D4538}
.fc2 .pg{transform-box:view-box;transform-origin:13px 23px;opacity:0}
.fc2 .fw{fill:rgba(220,192,138,.55)}
.fc2 .fl{transform-box:view-box}
.fc2 .flg{transform-box:view-box;transform-origin:26px 18px}
.js .figs:not(.play) .c-30 .mh,.js .figs:not(.play) .c-1h .mh{transform:none}
.js .figs:not(.play) .c-30 .sect{stroke-dashoffset:50}
.js .figs:not(.play) .c-1h .sect{stroke-dashoffset:100}
.js .figs:not(.play) .bf{transform:translateY(48px)}
.js .figs:not(.play) .pg{opacity:1}
.js .figs:not(.play) .fl{opacity:0}
.figs.play .c-30 .mh,.figs.play .c-30 .sect{transition:transform 1.5s cubic-bezier(.45,.05,.35,1) .25s,stroke-dashoffset 1.5s cubic-bezier(.45,.05,.35,1) .25s}
.figs.play .c-1h .pw{animation:swing 1.2s cubic-bezier(.3,.1,.3,1) both}
@keyframes swing{0%{transform:rotate(11deg)}35%{transform:rotate(-6deg)}66%{transform:rotate(3deg)}100%{transform:none}}
.figs.play .c-1h .mh,.figs.play .c-1h .sect{transition:transform 1.7s cubic-bezier(.45,.05,.35,1) .35s,stroke-dashoffset 1.7s cubic-bezier(.45,.05,.35,1) .35s}
.figs.play .bf{transition:transform 1.1s cubic-bezier(.3,.1,.3,1) .15s}
.figs.play .pg{animation:tear .95s cubic-bezier(.5,0,.75,.4) .55s both}
@keyframes tear{0%{opacity:1;transform:none}24%{opacity:1;transform:rotate(-6deg)}100%{opacity:0;transform:translate(10px,40px) rotate(-32deg)}}
.figs.play .fl{animation:plant .62s cubic-bezier(.3,1.45,.5,1) .35s both}
@keyframes plant{0%{opacity:0;transform:translateY(-26px)}40%{opacity:1}100%{opacity:1;transform:none}}
.figs.play .flg{animation:wave 1s ease-in-out 1s both}
@keyframes wave{0%,100%{transform:none}30%{transform:skewY(7deg) scaleX(.93)}65%{transform:skewY(-4deg)}}
/* the postcard turns over. The turned corner is the handle: hover or tap it; Escape, a second tap, or moving away turns it back */
.post-w{position:relative;margin-top:40px;perspective:2000px;transform:rotate(-.6deg)}
.post{transform-style:preserve-3d;transition:transform .8s cubic-bezier(.55,.05,.2,1)}
.post-w.flipped .post{transform:rotateY(180deg)}
.post-msg,.post-addr{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(.5px)}
/* each face is its own 3D plane, so its signatures, stamp and postmark (which carry masks, filters and animations) hide with it when the card turns */
.post-msg *,.post-addr *{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.post-back,.turn{display:none}
.js .post-back{display:block;position:absolute;inset:0;z-index:2;padding:12px;border-radius:inherit;background:#FFFCF7;box-shadow:0 0 0 1px rgba(27,38,32,.05);
  transform:rotateY(180deg) translateZ(1px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.street{display:block;width:100%;height:100%;border-radius:4px;color:var(--pen);background:#F4DDAE}
.js .street .wash{opacity:0;transition:opacity 1.3s ease .45s}
.street.on .wash{opacity:1}
.pc-cap{position:absolute;left:34px;bottom:24px;font:600 40px/1 var(--hand);color:#FFFCF7;text-shadow:0 1px 10px rgba(75,54,39,.55);transform:rotate(-4deg);transform-origin:0 50%}
.js .turn{display:block;position:absolute;right:-2px;bottom:-2px;z-index:4;width:132px;height:78px;padding:0;border:0;background:none;cursor:pointer;border-radius:0 0 10px 0;-webkit-tap-highlight-color:transparent}
.turn-c{position:absolute;right:2px;bottom:2px;width:38px;height:38px;border-radius:0 0 8px 0;background:linear-gradient(to top left,var(--oat) 0 49%,#E4D8C2 51%,#F3EBDD 100%);
  filter:drop-shadow(-3px -3px 4px rgba(75,54,39,.22));transition:width .35s var(--ease),height .35s var(--ease)}
.turn-t{position:absolute;right:46px;bottom:10px;font:600 23px/1 var(--hand);color:var(--clay-ink);transform:rotate(-4deg);white-space:nowrap}
.turn:hover .turn-c,.turn:focus-visible .turn-c,.post-w.flipped .turn-c{width:50px;height:50px}
.turn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.post-w.flipped .turn-t{color:#FFFCF7;text-shadow:0 1px 8px rgba(75,54,39,.6)}
.js .post:not(.stamped) .pmark{opacity:0;transform:rotate(-9deg) scale(1.7)}
.post.stamped .pmark{animation:pmark .55s cubic-bezier(.3,1.5,.5,1) .45s both}
@keyframes pmark{0%{opacity:0;transform:rotate(-9deg) scale(1.7)}55%{opacity:.9;transform:rotate(-9deg) scale(.92)}100%{opacity:.82;transform:rotate(-9deg) scale(1)}}
/* the footer at dusk */
.hz .lit path{fill:#F0BE68;opacity:.75}
.hz .sun,.hz .sun-w{transform-box:view-box}
.js .hz:not(.eve) .sun,.js .hz:not(.eve) .sun-w{transform:translateY(-46px)}
.hz.eve .sun,.hz.eve .sun-w{transition:transform 2.6s cubic-bezier(.35,.1,.25,1)}
.js .hz:not(.eve) .sky-w,.js .hz:not(.eve) .lit path{opacity:0}
/* round 14: the glow blooms out from the sun instead of fading in wide, and clears its faintest levels fast,
   so a pale 8-bit gradient never shows as rings in its first moments */
.hz .sky-w{transform-box:view-box;transform-origin:1046px 150px}
.js .hz:not(.eve) .sky-w{transform:scale(.3)}
.hz.eve .sky-w{transition:opacity 1.3s cubic-bezier(.12,.75,.3,1),transform 2.6s cubic-bezier(.35,.1,.25,1)}
.hz.eve .lit path{transition:opacity .45s ease calc(1.9s + var(--i) * .1s)}
/* on phones the postcard stands tall, so its picture side is the picture on the card with its caption beneath */
@media (max-width: 900px){
  /* the picture fills the whole back of the card (7 October 2026), its caption written over the bottom of it as on desktop */
  .js .post-back{padding:10px}
  .pc-cap{left:26px;bottom:30px;font-size:34px}
}

/* reveal */
.js [data-rise]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.js [data-rise].in{opacity:1;transform:none}

/* ---------- between the two layouts ---------- */
@media (max-width: 1180px) and (min-width: 901px){
  .navlinks a{padding:0 9px;font-size:15px}
  .bar{gap:12px}
  .fee-l{grid-template-columns:repeat(2,1fr)}
  .pr-grid{grid-template-columns:minmax(0,1fr) 340px}
  .gl{grid-template-columns:1fr}
  .post{grid-template-columns:minmax(0,1fr) 200px}
  .tl{--lab:220px}
  .keys{width:200px;top:-70px;right:-16px}
  .a-start{left:210px}
  .pot{width:120px}
}

/* ---------- phones: their own layout ---------- */
@media (max-width: 900px){
  :root{--nav:64px;--r:26px}
  html{scroll-padding-top:80px}
  body{font-size:17px}
  .nav{padding:8px 8px 0}
  .bar{height:56px;gap:4px;padding:0 6px 0 12px;border-radius:22px;background:rgba(250,246,238,.78);-webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%);border-color:rgba(255,255,255,.75);
    box-shadow:0 1px 2px rgba(16,41,31,.06),0 16px 34px -24px rgba(75,54,39,.55)}
  .nav.scrolled .bar{height:56px;margin-top:0}
  .wm{gap:9px}
  .wm .mk,.nav.scrolled .wm .mk{width:34px;height:29px}
  .wm .wt,.nav.scrolled .wm .wt{font-size:16px;line-height:1.02;white-space:normal;width:6.4em}
  .navlinks{display:none;position:fixed;left:8px;right:8px;top:72px;flex-direction:column;align-items:stretch;padding:10px;border-radius:26px;gap:2px;
    background:var(--white);border:1px solid rgba(27,38,32,.08);box-shadow:0 30px 60px -20px rgba(75,54,39,.6)}
  .navlinks.open{display:flex;animation:menu .45s var(--ease)}
  .navlinks a{min-height:54px;font-size:20px;padding:0 18px;border-radius:16px;font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0}
  .navlinks a:active{background:rgba(27,38,32,.06)}
  .navlinks .ul{left:18px;right:auto;width:64px;bottom:8px}
  @keyframes menu{from{opacity:0;transform:translateY(-8px) scale(.98)}}
  .nav .bar > .btn{display:none}
  .menub{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;border-radius:16px;border:1px solid rgba(27,38,32,.18);background:rgba(255,255,255,.6);font:600 16px var(--sans);color:var(--ink);cursor:pointer}
  .menub:active{transform:scale(.97)}
  .menub .bars{position:relative;width:16px;height:10px}
  .menub .bars::before,.menub .bars::after{content:"";position:absolute;left:0;right:0;height:1.6px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease)}
  .menub .bars::before{top:1px}.menub .bars::after{top:7px}
  .menub[aria-expanded="true"] .bars::before{top:4px;transform:rotate(45deg)}
  .menub[aria-expanded="true"] .bars::after{top:4px;transform:rotate(-45deg)}

  .hero{padding:calc(var(--nav) + 18px) 0 30px}
  .hero-in{display:flex;flex-direction:column;align-items:stretch;--h1:clamp(40px,12vw,58px)}
  .hero-copy{display:contents}
  .hero h1{order:1;white-space:normal;width:auto}
  .hero-line{order:2;margin-top:14px;font-size:18px;max-width:none}
  .hero-frame{order:3;margin:20px 0 0;height:auto;aspect-ratio:4/2.8}
  .hero .tag{right:12px;top:12px;bottom:auto}
  .start{order:4;width:auto;max-width:none;margin:-44px 10px 0;grid-template-columns:auto minmax(0,1fr);row-gap:8px;padding:12px 12px 12px 14px;z-index:5}
  .sugg{top:76px;left:-4px;right:-4px}
  .so b{font-size:16px}.so small{font-size:14px}
  .start .btn{grid-column:1 / -1;min-height:54px}
  .hnote{order:5;text-align:center;padding:0;font-size:16px;margin-top:14px}
  .hero-extra{order:6;height:68px}
  .pot{left:8px;top:0;width:66px}
  .a-start{left:150px;top:30px}
  .a-start .arw{left:-52px;top:-34px;width:46px;height:52px}
  .facts{order:7;margin-top:8px;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:0;font-size:12.5px;line-height:1.35;letter-spacing:.05em}
  .facts li{justify-content:center;text-align:center;padding:2px 8px}
  .facts li + li{border-left:1px solid rgba(27,38,32,.2)}
  .facts li + li::before{display:none}

  .hosts{padding:44px 0 0}
  .hosts-grid{grid-template-columns:1fr;gap:18px;padding-bottom:36px}
  .host-top{width:auto;padding-right:120px}
  .hosts-h{font-size:28px}
  .host-cols{gap:14px;margin-top:46px}
  .pf-w{margin-bottom:14px}
  .pf{border-radius:16px}
  .pf-c{width:34px;height:34px}
  .pf-c.c1{left:-9px;top:-9px}
  .pf-c.c2{right:-9px;bottom:-9px}
  .bio{font-size:17px}
  .a-host{left:auto;right:-4px;top:auto;bottom:-6px}
  .a-host .arw{left:26px;top:30px;width:44px;height:48px}
  .map{justify-self:center;max-width:330px}
  .globe .hn,.a-home .hn{font-size:24px}
  .a-home .arw{left:40px;top:13px;width:56px;height:40px}
  .a-every .arw{left:-26px;top:42px;width:46px;height:38px}

  .svc{padding:48px 0 44px}
  .svc-grid{display:block}
  .svc-media{display:none}
  .svc-copy{padding-bottom:0}
  .svc-head{padding-bottom:22px}
  .notes{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--g));padding:4px var(--g) 10px;scroll-padding-inline:var(--g);scrollbar-width:none;overscroll-behavior-x:contain}
  .notes::-webkit-scrollbar{display:none}
  .note{flex:none;width:80%;min-height:0;scroll-snap-align:start;border:0;padding:0 0 22px;background:var(--white);border-radius:var(--r);overflow:hidden;display:block;
    box-shadow:0 1px 2px rgba(16,41,31,.05),0 20px 40px -30px rgba(75,54,39,.5)}
  .note .nimg{display:block;position:relative;aspect-ratio:4/3;margin:0 0 14px;overflow:hidden}
  .note .nimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .note .nimg .tag{left:12px;top:12px;font-size:12px;padding:7px 10px}
  .note .si{position:absolute;right:14px;top:0;margin-top:calc(75% - 38px);width:76px;height:76px;padding:8px;background:var(--white);border-radius:50% 46% 52% 48%;box-shadow:0 10px 24px -14px rgba(75,54,39,.6);z-index:2}
  .note .nt{padding:0 20px}
  .note .nn{display:block;padding-right:90px}
  .note h3{font-size:24.5px}
  .notes:focus-visible{outline-offset:-3px}
  .note .nt p{font-size:17px}
  .js .note:not(.on) h3{color:var(--green-ink)}

  .how,.qs,.about{padding:48px 0 44px}
  .hn{font-size:26px}

  .how-head{margin-bottom:56px}
  .tl{--lab:0px}
  .tl-axis,.tl-row{grid-template-columns:1fr}
  .tl-axis > span:first-child{display:none}
  .tl-svg .tn{font-size:50px}
  .tl-svg .tn:nth-of-type(even):not(:last-of-type){display:none}
  .tl-svg .c14{transform-box:fill-box;transform-origin:50% 50%;transform:scale(1.7) translate(0,-6px)}
  .tl-svg .door{transform-box:view-box;transform-origin:934px 62px;transform:scale(1.45)}
  .tl-axis .tl-svg{margin-top:-10px}
  .tl-row{padding:8px 0 3px;min-height:0}
  .tl-row .tl-svg{height:27px}
  .tl-name{font-size:17px}
  .tl-name small{display:inline;margin-left:8px;font-size:16px}
  .a-live{right:50px;top:-54px}
  .a-live .arw{right:-40px;top:12px;width:38px;height:36px}

  .pricing{padding:48px 0 44px}
  .pr-head{margin-bottom:24px}
  .pr-grid{grid-template-columns:1fr;gap:14px}
  .pr-side{order:-1}
  .pr-stick{position:static}
  .pcard{padding:24px 20px 20px}
  .codo,.pr-static{font-size:56px}
  .opt{padding:12px 14px;min-height:0}
  .opt .op{font-size:26px}
  .a-mean{margin-left:120px;height:34px}
  .inc{padding:24px 20px 20px}
  .inc-top{flex-wrap:wrap}
  .inc-top h3{font-size:26px}
  .gl{grid-template-columns:1fr}
  .gl li{padding:3px 0 3px 32px}
  .gl .tk{top:4px}
  .gl li::before{top:15px}
  .fee{padding:22px 20px}
  .pr-art{display:none}
  .inc,.fee,.pr-side{grid-column:auto;grid-row:auto}
  .fee .v{font-size:48px}
  .fs{display:inline-flex;min-height:44px}
  .fee summary,.grp-f summary{cursor:pointer}
  .fee-l{grid-template-columns:1fr;margin-top:10px}

  .promise{padding:48px 0 44px}
  .honest{font-size:36px}
  .figs{grid-template-columns:1fr 1fr;gap:26px 20px;margin-top:32px}
  .fig .v{font-size:58px}
  .fig:last-child{grid-column:1 / -1}
  .fig p{margin-top:12px}
  .fig p{font-size:16.5px}

  .qs-grid{display:block}
  .qs-head{position:static;margin-bottom:16px}
  .qs-art{margin-top:16px;display:flex;align-items:center;gap:8px;max-width:none}
  .qs-ph{display:none}
  .qs-note{order:1;margin:0}
  .qs-art .sprig{order:2;position:static;width:104px;transform:none}
  .qs-head .btn{display:none}
  .qa summary{font-size:20px;min-height:62px;padding:10px 4px}
  .ans{padding:0 8px 22px 4px;font-size:17px}

  .ab-grid{display:block}
  /* the postcard on a phone (7 October 2026): the card fills the column. Its address side is one tidy band across the top: the skyline,
     the postmark struck across the stamp's edge, the stamp inside the card's corner, then the address lines. The letter follows; both signatures
     are sized to the card's own width (cqi), so neither runs off it; the bottom keeps clear room for the turned corner */
  .post{grid-template-columns:1fr;padding:20px 20px 64px}
  .post-w{transform:none;margin-top:26px}
  .post-msg{padding-right:0;border-right:0;order:2;container-type:inline-size}
  .post-addr{order:1;min-height:0;padding:0 0 16px;margin-bottom:22px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:10px;align-items:end}
  .sky{grid-column:1;grid-row:1;margin:0;width:calc(100% - 34px);max-width:240px}
  .stamp{position:relative;grid-column:2;grid-row:1;top:auto;right:auto;width:clamp(76px,22cqi,88px);height:auto;aspect-ratio:84/101;transform:rotate(2deg)}
  .post-addr{container-type:inline-size}
  .stamp .face svg{width:72%}
  .pmark{top:24px;right:32px;width:108px;height:69px;z-index:1}
  .pmark .pw{display:none}
  .addr{grid-column:1 / -1;grid-row:2;width:min(100%,300px)}
  .addr span{font-size:24px;height:34px;line-height:42px}
  .lp{font-size:18px;max-width:none}
  .dear{font-size:25px}
  .sigs{margin-top:22px}
  .sig.c .sig-n,.sig.k .sig-n{font-size:clamp(36px,14cqi,56px)}
  .sig.k{padding-left:8cqi;margin-top:-.05em}
  .pol{align-self:center;width:min(72%,290px);margin:42px 0 4px;transform:rotate(2.5deg)}
  .pol .tape{width:110px;height:36px;margin-left:-55px;top:-17px}
  .pol .hn{font-size:26px}
  .decl{margin-top:30px;padding:24px 22px 16px}
  .decl h3{font-size:26px}
  .decl ul{margin-top:8px}
  .decl li{padding:9px 0 9px 32px}
  .decl .xk{top:10px}

  .audit{padding:48px 0 84px}
  .au-photo{display:none}
  .au-grid{grid-template-columns:1fr;gap:58px}
  .sheet{margin:26px 0 0;padding:24px 20px 18px}
  .sheet-t{font-size:24px;padding-right:26px}
  .parts li{grid-template-columns:46px 1fr;gap:14px;padding:9px 0;font-size:17px}
  .parts .gy{width:46px;height:46px}
  .a-keep{right:4px;bottom:-40px}
  .lf{margin-top:52px}
  .chips{gap:8px 14px;padding-left:10px}
  .chips li{font-size:16px;padding:7px 13px}
  .au-form{padding:30px 20px 26px}
  .au-form .fh{max-width:20ch}
  .keys{width:150px;top:-58px;right:-6px}
  .fields{grid-template-columns:1fr;gap:12px;margin-top:22px}
  .f input,.f select{min-height:52px}

  .foot{padding:14px 0 30px}
  .hz{height:132px}
  .foot .top{padding-top:20px;gap:10px}
  .foot .wm .wt{width:auto;white-space:nowrap;font-size:23px}
  .foot .bot{gap:4px;margin-top:14px;padding-top:16px}
  .foot nav{justify-content:flex-start;margin-left:-12px}
  .a-bye{margin-top:14px;height:60px}
}
@media (max-width: 900px) and (min-width: 600px){ .note{width:50%} .hero-frame{aspect-ratio:16/9} }

/* reduced motion: composed from the start */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important}
  .js [data-rise]{opacity:1;transform:none}
  .js .hero [data-h],.js .hero-frame{opacity:1;transform:none}
  .js .sig-n,.js .hn .hl,.js .sv .sv-hl{-webkit-mask-image:none;mask-image:none}
  .typing{display:none}
  .js [data-ill] .wash,.js [data-ill] .ml{opacity:1}
  .js img[data-f]{opacity:1}
}

/* =====================================================================
   THE MULTI-PAGE SITE (PAGES-PLAN). Everything above is the approved r15 page, unchanged.
   Everything below is shared by the inner pages, or connects the pages to each other.
   ===================================================================== */

/* ---------- the text link: plain words, the pen underline, a small arrow ---------- */
.tlk{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:17px;font-weight:600;line-height:1.2;color:var(--green-ink);text-decoration:none;border-radius:10px}
.tlk-t{position:relative;display:inline-block;padding:4px 0 9px}
.tlk .ul{position:absolute;left:0;bottom:0;width:100%;height:8px;color:var(--clay);overflow:visible;clip-path:inset(-4px -4px -4px -4px)}
.tlk .ul path{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tlk .ar{width:16px;height:16px;flex:none;transition:transform .35s var(--ease)}
.tlk:hover .ar,.tlk:focus-visible .ar{transform:translateX(3px)}
.tlk:hover .ul{animation:tlk .5s cubic-bezier(.45,.05,.35,1)}
.tlk:active{color:var(--clay-ink)}
@keyframes tlk{from{clip-path:inset(-4px 100% -4px 0)}to{clip-path:inset(-4px -4px -4px -4px)}}
/* Home: the one quiet link each section carries to its page */
.more{margin-top:clamp(18px,2.2vw,30px)}
.hosts .more{margin-top:clamp(26px,3vw,40px)}
.promise .tlk{color:var(--linen)}
.promise .tlk .ul{color:var(--gold-lt)}

/* ---------- the page header of an inner page: eyebrow, headline, one line, one drawing or photograph ---------- */
.ph{padding:calc(var(--nav) + clamp(30px,5vw,72px)) 0 clamp(30px,4vw,56px)}
.ph-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.ph-in:has(.ph-art){grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
.ph-h{font-size:clamp(42px,5.6vw,84px);line-height:1.02;letter-spacing:-.03em;max-width:16ch}
.ph .lede{margin-top:22px}
.ph-art{position:relative;min-width:0}
.ph-art img{width:100%;height:auto;border-radius:var(--r)}
/* the page itself. Sections inside use the same scale as Home: 84px above and 80px below, 48 and 44 on phones */
.pg{min-height:clamp(40px,8vh,120px)}
.sec{padding:84px 0 80px}
.pg-links{display:flex;flex-wrap:wrap;gap:6px 30px;padding-bottom:60px}

/* ---------- the closing audit band ---------- */
.band{padding:84px 0 80px;background:var(--oat)}
.band-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center}
.band .start{width:100%;max-width:640px;margin-top:0}
/* the band's address field: a solid keyboard ring on the whole field, like the plan options (the soft hero ring is too faint on oat) */
.band .start:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.band .eyebrow{margin-bottom:14px}

/* ---------- "Next: <page>" ---------- */
.next{padding:clamp(30px,4vw,54px) 0 clamp(34px,4.4vw,60px)}
.next p{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.next-k{font-size:13.5px;line-height:1.3;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.next .tlk{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:380;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.016em}
.next .tlk .ar{width:22px;height:22px}

/* ---------- the header mark is not drawn again when arriving from another page of the site ---------- */
.js [data-ill].still .wash{transition:none}

/* ---------- the opening on a page without the hero photograph: the drawing dissolves into the page ---------- */
#opening.nof.s3{opacity:0;transition:opacity .55s ease}
#opening.nof.s3 .op-pic{box-shadow:none;transition:none}

@media (max-width:900px){
  .ph{padding:calc(var(--nav) + 14px) 0 28px}
  .ph-in,.ph-in:has(.ph-art){grid-template-columns:minmax(0,1fr)}
  .sec{padding:48px 0 44px}
  .band{padding:48px 0 44px}
  .band-in{grid-template-columns:minmax(0,1fr)}
  .band .start{order:0;margin:0;max-width:none}
  .band .sugg{left:0;right:0}
  .tlk{font-size:16.5px}
  .pg-links{padding-bottom:30px}
  /* the form's confirmation is one long handwritten line: on a phone it takes the phone's handwriting size and may wrap to two lines */
  .sent .sent-hn{white-space:normal;font-size:26px;line-height:1.05}
  .sent .sent-hn .hl{width:auto;padding-right:0}
}

/* ---------- moving between pages: the header and footer hold still; the page cross-fades behind a short ink wipe.
   Browsers without cross-document view transitions simply load the page. The two are named only while a transition runs
   (html.vt, set in the head), so naming them never changes how the page is painted at rest. ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  .vt .nav{view-transition-name:site-nav}
  .vt .foot{view-transition-name:site-foot}
  ::view-transition-old(site-nav),::view-transition-old(site-foot){animation:none;opacity:0}
  ::view-transition-new(site-nav),::view-transition-new(site-foot){animation:none;opacity:1}
  ::view-transition-old(root){animation:vt-out .2s ease both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:vt-in .52s cubic-bezier(.45,.05,.35,1) both;mix-blend-mode:normal;
    -webkit-mask-image:linear-gradient(100deg,#000 0 44%,transparent 58% 100%);mask-image:linear-gradient(100deg,#000 0 44%,transparent 58% 100%);
    -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:.35}to{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}}
}

/* public launch (7 October 2026): the privacy note under the request button, and the footer's Privacy and Accessibility links */
.au-form .fpriv{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--mute)}
.au-form .fpriv a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:12px 0;margin:-12px 0}
.foot .bot-l{display:inline-flex;flex-wrap:wrap;gap:24px 22px}
.foot .bot-l a{color:inherit;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:12px 0;margin:-12px 0}
.foot .bot-l a[aria-current]{color:var(--ink)}

/* English and Spanish, set as a badge (Home and About, 7 October 2026) */
.lang-b{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:24px;padding:12px 22px 12px 14px;border-radius:999px;background:var(--white);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,41,31,.05),0 16px 30px -22px rgba(75,54,39,.5)}
.lang-i{width:58px;height:46px;flex:none;overflow:visible}
.lang-i path{stroke:var(--pen);stroke-width:1.5;stroke-linejoin:round}
.lang-i .b1{fill:var(--olive-lt);fill-opacity:.55}
.lang-i .b2{fill:var(--clay-lt);fill-opacity:.75}
.lang-i text{font:700 7.6px/1 var(--sans);letter-spacing:.06em;fill:var(--green-ink);text-anchor:middle}
.lang-t{font-weight:600;font-size:18px;line-height:1.3;color:var(--green-ink)}
.lang-es{font-family:var(--hand);font-weight:600;font-size:25px;line-height:1;color:var(--clay-ink);transform:rotate(-3deg);transform-origin:0 50%}
@media (max-width:600px){ .lang-b{border-radius:22px;padding:12px 16px 12px 12px} .lang-es{flex-basis:100%;padding-left:72px;margin-top:-6px} }

/* the footer on phones: shown composed and faded in as one piece (see calmFoot in site.js) */
.js .foot .calm{opacity:0;transition:opacity .9s ease;will-change:opacity}
.js .foot .calm.shown{opacity:1}
.js .foot .calm *{transition:none!important;animation:none!important}
.js .foot .anno.calm .hn .hl{-webkit-mask-position:0 0;mask-position:0 0}
@media (prefers-reduced-motion: reduce){ .js .foot .calm{opacity:1;transition:none} }

/* =====================================================================
   HOME v2 (7 October 2026, docs/website/REVISION-PLAN-V2.md): the page says what the company is first, and each phone screen holds one idea.
   Everything here is Home's own, scoped to its sections (and [data-page="home"] where a shared class is reused by another page).
   ===================================================================== */
/* the hero: the pill says what we are, the three facts are plain words with a drawn mark each */
.pill{display:inline-flex;align-items:center;gap:9px;max-width:100%;margin-bottom:22px;padding:8px 15px 8px 11px;border-radius:999px;background:var(--green);color:var(--linen);font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.01em}
.pill svg{flex:none;width:22px;height:18px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.hero-frame{margin-top:calc(var(--pad) + var(--h1)*.98 + 72px);height:clamp(420px,calc(100svh - var(--nav) - var(--pad) - var(--h1) - 168px),640px)}
.facts{gap:14px 40px;margin-top:22px;font-size:17.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.facts li{gap:12px;min-height:34px}
.facts li + li::before{display:none}
.facts .fk{flex:none;width:28px;height:28px;color:var(--pen);overflow:visible}
/* what we do: plain titles, one line each, the counter on phones, and the one line about the work on site */
.svc .lede{margin-top:16px}
.note h3{margin-top:0}
.note{min-height:clamp(150px,17vh,172px);padding:20px 0}
.notes-n{display:none}
.svc-fc{margin-top:28px;font-size:18px;line-height:1.5;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.svc-fc a{color:var(--green-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1.6px;text-underline-offset:4px;display:inline-block;padding:12px 0;margin:-12px 0}
.svc-fc a:hover{text-decoration-color:var(--green-ink)}
/* how it works: four steps on phones, the timeline on wide screens */
.steps{display:none}
/* pricing: two plan cards, the radio is the card, one shared button, the house smaller */
.pr-v2 .pv-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px 40px;align-items:end}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;border:0;margin:0;padding:0;min-width:0;min-inline-size:0}
.plan{position:relative;display:block;padding:30px 30px 60px;border-radius:var(--r);cursor:pointer;transition:box-shadow .3s ease,transform .2s ease}
.plan input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.plan:hover{box-shadow:0 1px 2px rgba(16,41,31,.05),0 34px 64px -44px rgba(75,54,39,.5),inset 0 0 0 1.5px rgba(27,38,32,.22)}
.plan:active{transform:scale(.99)}
.plan:has(input:checked){box-shadow:0 0 0 2px var(--green-ink),0 1px 2px rgba(16,41,31,.05),0 34px 64px -44px rgba(75,54,39,.5)}
.plan:has(input:focus-visible){outline:3px solid var(--green);outline-offset:4px}
.pl-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.pl-n{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:400;font-size:27px;line-height:1.1;letter-spacing:-.012em;color:var(--green-ink)}
.pl-r{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:340;font-size:54px;line-height:1;letter-spacing:-.035em;color:var(--green-ink)}
.pl-of{display:block;margin-top:4px;font-size:15.5px;color:var(--ink-2)}
.pl-l{display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:18px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.pl-b{margin-top:14px}
.pl-b li{position:relative;padding:6px 0 6px 30px;font-size:17px;line-height:1.4}
.pl-b .tk{position:absolute;left:0;top:8px;width:20px;height:20px;color:var(--green);overflow:visible}
.pl-b .tk path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl-pick{position:absolute;left:30px;bottom:24px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--clay-ink);opacity:0;transition:opacity .3s ease}
.pl-pick i{width:10px;height:10px;border-radius:60% 40% 55% 45%;background:var(--clay)}
.plan:has(input:checked) .pl-pick{opacity:1}
html:not(.js) .pl-pick{display:none}
.pr-v2 .pr-art{grid-column:auto;grid-row:auto;align-self:end;padding:0 0 10px}
.pr-v2 .a-house{margin:-4px 0 0 24%}
.pv-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:34px}
.pv-foot .btn{min-height:56px;padding:0 28px}
.pv-line{font-size:17.5px;color:var(--ink)}
/* who we are: the founders and their postcard, side by side */
.hosts{padding:76px 0 72px}
.svc,.how,.pricing,.promise,.audit,.qs{padding:76px 0 72px}
.hosts-grid{grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:clamp(40px,5vw,80px);align-items:center;padding-bottom:0}
.host-top{width:auto}
.host-cols{position:relative;margin-top:30px}
.a-host{left:auto;right:-14px;top:-62px}
.a-host .arw{left:-6px;top:30px;width:50px;height:56px}
.hosts .post-w{margin-top:0}
.hosts .post{grid-template-columns:minmax(0,1fr) 214px;padding:36px 28px 32px 38px}
.hosts .post-msg{padding-right:26px}
.hosts .post-addr{min-height:300px}
.hosts .sig.c .sig-n,.hosts .sig.k .sig-n{font-size:clamp(34px,2.7vw,42px)}
.hosts .sig.k{padding-left:34px}
.hosts .pmark .pw{display:none}
/* get your free audit: the heading and the line say what it is; the form follows */
.au-info .lede{font-size:19px}
/* the phone menu's one action */
.navlinks .menu-cta{display:none}

@media (max-width: 1180px) and (min-width: 901px){
  .pr-v2 .pv-grid{grid-template-columns:minmax(0,1fr) 240px}
  .plan{padding:24px 22px 56px}
  .pl-r{font-size:46px}
  .hosts-grid{grid-template-columns:minmax(0,1fr) minmax(0,480px)}
  .hosts .post{grid-template-columns:minmax(0,1fr) 180px;padding:28px 22px 26px 28px}
}

/* phones: one idea per screen, real air between them */
@media (max-width: 900px){
  .svc,.how,.pricing,.hosts,.promise,.audit,.qs{padding:68px 0 56px}
  .hero{padding-bottom:30px}
  .pill{align-items:flex-start;gap:9px;margin-bottom:18px;padding:9px 14px 10px 11px;border-radius:18px;font-size:15px;line-height:1.3;text-wrap:balance}
  .pill svg{margin-top:1px}
  .hero-in{--h1:clamp(42px,12.6vw,58px)}
  .hero-frame{margin:22px 0 0;height:auto;aspect-ratio:4/2.9}
  .hnote{font-size:17px;line-height:1.5;margin-top:16px;padding:0 6px}
  .hero-extra{height:66px}
  .facts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:0;text-transform:none}
  .facts li{justify-content:flex-start;text-align:left;gap:14px;padding:0;min-height:36px}
  .facts li + li{border-left:0}
  .facts .fk{width:30px;height:30px}
  .svc .lede{font-size:17px;margin-top:14px}
  .svc-head{padding-bottom:26px}
  .notes{gap:12px}
  .note{width:86%}
  .note .nimg{margin-bottom:14px;aspect-ratio:4/3.1}
  .note .si{margin-top:calc(75% - 88px);width:72px;height:72px}
  .note h3{font-size:25px;padding-right:0}
  .note .nt p{font-size:17px;margin-top:8px}
  .notes-n{display:block;margin-top:2px;text-align:center;font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .svc-fc{margin-top:30px;font-size:17px}
  .how-head{margin-bottom:34px}
  [data-page="home"] .how .tl{display:none}
  .steps{display:grid;gap:14px}
  .steps li{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;column-gap:16px;min-height:64px;padding:10px 0;border-top:1px solid var(--line)}
  .steps li:last-child{border-bottom:1px solid var(--line)}
  .st-n{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:300;font-size:52px;line-height:1;letter-spacing:-.03em;color:var(--green-ink);font-variant-numeric:lining-nums tabular-nums}
  .steps p{font-size:20px;line-height:1.3;font-weight:500;color:var(--ink);text-wrap:pretty}
  .steps li:last-child .st-n{color:var(--clay-ink)}
  .pr-head{margin-bottom:26px}
  .pr-v2 .pv-grid{display:block}
  .plans{grid-template-columns:1fr;gap:16px}
  .plan{padding:20px 20px 20px}
  .pl-n{font-size:24px}
  .pl-r{font-size:44px}
  .pl-of{margin-top:2px}
  .pl-l{margin-top:12px;padding-top:12px;font-size:17px}
  .pl-b{margin-top:10px}
  .pl-b li{padding:4px 0 4px 30px}
  .pl-pick{position:static;margin-top:12px}
  .pv-foot{flex-direction:column;align-items:stretch;gap:18px;margin-top:26px;text-align:center}
  .pv-foot .btn{width:100%}
  .pv-line{font-size:17px}
  .pv-foot .tlk{justify-content:center}
  .hosts-grid{display:block}
  .host-top{padding-right:0}
  .host-cols{margin-top:30px;gap:14px}
  .a-host{right:-6px;top:-54px}
  .a-host .arw{left:-2px;top:28px;width:44px;height:50px}
  .hosts-side{margin-top:44px}
  /* on phones the card shows its message side with the stamp and postmark in the corner; the skyline and the address lines are on the wide layout */
  .hosts .post{grid-template-columns:1fr;padding:18px 20px 60px}
  .hosts .post-msg{padding-right:0}
  .hosts .post-addr{min-height:0;display:block;padding:0;margin:0;border:0;height:0}
  .hosts .sky,.hosts .addr{display:none}
  .hosts .stamp{position:absolute;top:-2px;right:-2px;width:72px;z-index:2}
  .hosts .pmark{top:14px;right:48px;width:96px;height:62px;z-index:3}
  .hosts .dear{padding-right:150px;min-height:72px;display:flex;align-items:end}
  .hosts .lp{font-size:17px}
  .hosts .sigs{margin-top:18px}
  .au-grid{gap:0}
  .au-info .lede{font-size:18px}
  .audit .sheet{display:none}
  .au-form{margin-top:30px;padding-top:26px}
  .au-form h3{font-size:28px}
  .au-form .fh{display:none}
  .audit .fields{margin-top:18px;gap:10px}
  .audit .f input,.audit .f select{min-height:50px}
  .audit .submit{margin-top:20px}
  .figs{gap:22px 20px;margin-top:28px}
  .fig .v{font-size:54px}
  .fig p{margin-top:8px}
  .qa summary{min-height:58px}
  .qs-head{margin-bottom:22px}
  .qs-art{margin-top:-6px;justify-content:flex-end}
  .navlinks .menu-cta{display:inline-flex;justify-content:center;min-height:54px;margin-top:6px;padding:0 18px;border-radius:16px;background:var(--green);color:var(--linen);font:600 17px var(--sans);letter-spacing:.005em}
  .navlinks .menu-cta:hover{background:#21503F}
}
/* v2 hero, tablet and small laptop widths (8 October 2026): the pill stays on one line above the photo, and the three facts sit under the
   photo, right-aligned as on wide screens, so they never run into the plant and "start here" on a short window */
@media (min-width: 901px){
  .pill{white-space:nowrap;max-width:none;width:max-content}
  .facts{justify-content:flex-end}
}
@media (max-width: 1180px) and (min-width: 901px){
  .facts{gap:10px 16px;font-size:16px}
  .facts .fk{width:24px;height:24px}
  .facts li{gap:9px}
}

/* =====================================================================
   v2 fixes (8 October 2026, Home): the founder's notes on v2. Home's hero, plans, standards, audit and questions; the standards on Services.
   ===================================================================== */
/* hero, wide screens: the photograph starts level with the pill, the copy beside it; the facts sit under the photograph; the copy column holds
   the plant and "start here" under the address bar, so the hero contains them and nothing floats over the next section */
@media (min-width: 901px){
  .hero-in{--h1:clamp(54px,6.8vw,104px);grid-template-rows:auto 1fr}
  .hero-copy{grid-row:1 / span 2}
  .hero-frame{margin-top:var(--pad);height:clamp(400px,calc(100svh - var(--nav) - 6px - var(--pad) - 100px),780px)}
  .facts{grid-column:2;grid-row:2;align-self:start}
  .hero-extra{height:190px}
  .pot{top:14px}
  .a-start{top:46px}
}
@media (max-width: 1180px) and (min-width: 901px){
  .hero-in{--h1:clamp(50px,5.9vw,72px)}
  .hero-extra{height:156px}
  .facts{gap:8px 14px;font-size:15.5px}
}
/* below about 1200px the pill would reach the photograph beside it, so it wraps onto two balanced lines inside its column */
@media (max-width: 1200px) and (min-width: 901px){
  .pill{white-space:normal;width:auto;max-width:calc(100% - 28px);align-items:flex-start;border-radius:18px;text-wrap:balance}
  .pill svg{margin-top:1px}
}
.pill .nw{white-space:nowrap}
/* short laptop windows: the plant a little smaller, so the hero closes soon after the facts */
@media (min-width: 901px) and (max-height: 800px){
  .pot{width:120px}
  .hero-extra{height:156px}
  .a-start{top:40px}
}
/* service cards on phones: the picture fills the card's top edge */
@media (max-width: 900px){
  .note{padding:0 0 22px}
}
/* plans: the one marker on Full Collection */
.pl-tag{position:absolute;top:-15px;left:28px;display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:999px;background:var(--green);color:var(--linen);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.01em;white-space:nowrap}
@media (max-width: 900px){ .pl-tag{left:18px} .plan[data-svc="f"]{margin-top:8px} }
/* what you can count on: four figures, four across; two by two on phones */
.figs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 900px){ .figs{grid-template-columns:1fr 1fr} .fig:last-child{grid-column:auto} }
/* get your free audit: a deep green panel, the white form card on it, the keys inside the card's top corner */
.au-g{background:var(--green);color:var(--linen);margin-bottom:clamp(8px,1.1vw,18px)}
.au-g::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grain);opacity:.5;mix-blend-mode:soft-light;pointer-events:none}
.au-g > .wrap{position:relative}
.au-g .eyebrow{color:rgba(246,241,232,.84)}
.au-g .eyebrow::before{background:var(--gold-lt)}
.au-g .h2{color:var(--linen)}
.au-g .h2 em{color:var(--gold-lt)}
.au-g .au-info .lede{color:rgba(246,241,232,.92)}
.au-g .sheet,.au-g .au-form{color:var(--ink)}
.au-g .sheet{box-shadow:0 30px 50px -30px rgba(5,18,13,.7)}
.au-g .au-form{box-shadow:0 1px 2px rgba(5,18,13,.2),0 40px 70px -40px rgba(5,18,13,.75)}
.au-g .a-keep{color:var(--gold-lt)}
.au-g .keys{top:-14px;right:4px;width:230px}
@media (max-width: 1180px) and (min-width: 901px){ .au-g .keys{top:-10px;right:0;width:186px} }
@media (max-width: 900px){
  .au-g .keys{top:-4px;right:6px;width:118px}
  .au-g .au-form h3{padding-right:118px}
}
/* questions: the sprig sits beside the heading, outside the photograph */
@media (min-width: 901px){
  .qs-art{position:static}
  .qs-art .sprig{right:-6px;bottom:auto;top:30px;width:clamp(140px,14vw,210px)}
}

/* =====================================================================
   v2.1 shared (13 October 2026, D-021, docs/website/REVISION-PLAN-V2.md): the three-field form, the phone number, the floating action on
   phones, and WebP photographs. Shared by every page; Home's own v2.1 block is separate.
   ===================================================================== */
/* photographs: the build wraps each <img> in <picture> (WebP first, the JPEG as fallback); the picture box takes no part in layout */
picture{display:contents}
/* the form: Name, Email and Address first; Phone and the plan are the optional row. On phones the row sits behind one quiet disclosure,
   shown only with scripts; without scripts both fields are simply there */
.f-opt{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.f-more{display:none}
@media (max-width: 900px){
  .f-opt{grid-template-columns:1fr;gap:12px}
  .js .f-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;margin:-4px 0 -6px -6px;border:0;background:none;border-radius:10px;justify-self:start;
    font:600 15.5px/1.2 var(--sans);color:var(--green);cursor:pointer;text-align:left}
  .js .f-more svg{flex:none;width:16px;height:16px;transition:transform .3s var(--ease)}
  .js .f-more[aria-expanded="true"] svg{transform:rotate(45deg)}
  .js .f-more[aria-expanded="false"] + .f-opt{display:none}
}
/* the request page: the call-or-text line under the privacy line */
.au-form .ftel{margin-top:6px}
.au-form .ftel a{white-space:nowrap}
/* the footer: the phone beside the email */
.foot .bot-ph a{white-space:nowrap}
/* the floating action on phones (900px and under, or a coarse pointer): one small pill, bottom center, clear of the safe area. site.js adds
   .show once the hero has scrolled away and removes it beside any form and the footer. It is hidden while the phone menu is open.
   Scripts off: display none, so it is absent. Reduced motion: no transition */
.fab{display:none}
@media (max-width: 900px), (pointer: coarse){
  .js .fab{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom, 0px));z-index:40;display:inline-flex;align-items:center;justify-content:center;
    height:44px;padding:0 22px;border-radius:999px;background:var(--green);color:var(--linen);font:600 15.5px/1 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;
    box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 1px 2px rgba(16,41,31,.2),0 10px 22px -12px rgba(16,41,31,.55);
    transform:translate(-50%,calc(100% + 24px + env(safe-area-inset-bottom, 0px)));opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .4s var(--ease),opacity .3s ease,visibility 0s linear .4s}
  .js .fab.show{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .js .fab:focus-visible{outline-offset:3px;border-radius:999px}
  .js #nav:has(#navlinks.open) ~ .fab{opacity:0;visibility:hidden;pointer-events:none}
}
@media (prefers-reduced-motion: reduce){ .js .fab{transition:none} }

/* =====================================================================
   HOME v2.1 (13 October 2026): the funnel. "Is this you?" after the hero, the comparison panel in place of the standards figures,
   the phone line and the questions link in the audit column, the sections a little closer. Home only; nothing here touches the form or the footer.
   ===================================================================== */
/* is this you? three paths, one drawn mark each, the same action at the end of each */
.fit{padding:48px 0 34px}
.fit-h{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:370;font-size:clamp(26px,2.2vw,32px);line-height:1.1;letter-spacing:-.016em;color:var(--green-ink);margin-bottom:26px}
.fit-h em{font-style:italic;font-weight:330;color:var(--olive)}
.fit-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(28px,4vw,60px)}
.fit-l li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;align-items:start}
.fit-k{width:56px;height:56px;margin:0;color:var(--pen);overflow:visible}
.fit-k svg{display:block;width:100%;height:100%;overflow:visible}
.fit h3{font-family:var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:380;font-size:clamp(23px,1.9vw,27px);line-height:1.12;letter-spacing:-.014em;color:var(--green-ink);text-wrap:balance}
.fit p{margin-top:8px;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.fit .tlk{margin-top:6px}
/* the hero's address label and the timeline's axis word, one size up, so no small type is left outside the form and the footer */
.start-f label{font-size:15px;white-space:nowrap}
.tl-axis{font-size:15px}
/* doing it yourself vs. with us: a table on the green panel. The four drawn companions keep their place and their moment */
.cmp-s .honest{max-width:16ch}
.promise .cmp{display:table;width:100%;border-collapse:collapse;margin-top:34px;grid-template-columns:none;gap:0}
.cmp th{text-align:left;padding:0 0 14px;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,241,232,.78)}
.cmp th,.cmp td{vertical-align:top}
.cmp td{padding:18px 36px 18px 0;border-top:1px solid rgba(246,241,232,.2);font-size:19px;line-height:1.45;text-wrap:pretty}
.cmp .cmp-i{width:54px;padding-right:24px}
.cmp .fc2{margin:0}
.cmp .you{width:34%;color:rgba(246,241,232,.76)}
.cmp .us{color:var(--linen);font-weight:500;padding-right:0}
/* the audit column: the phone line, the questions link, and a focus ring that shows on green */
.au-info{--focus:var(--gold-lt)}
.au-call{margin-top:18px;font-size:18px;line-height:1.5;color:rgba(246,241,232,.92)}
.au-call a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--linen);font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--gold-lt);text-decoration-thickness:1.6px;text-underline-offset:4px;border-radius:6px}
.au-call a:hover{text-decoration-color:var(--linen)}
.au-q{margin-top:22px}
.au-g .tlk{color:var(--linen)}
.au-g .tlk .ul{color:var(--gold-lt)}
/* the sections sit a little closer, so the page ends sooner without any screen losing its air */
@media (min-width: 901px){
  .svc,.how,.pricing,.hosts,.promise,.audit{padding:62px 0 58px}
}
@media (max-width: 900px){
  .svc,.how,.pricing,.hosts,.promise,.audit{padding:52px 0 44px}
  .fit{padding:36px 0 26px}
  .fit-h{font-size:27px;margin-bottom:16px}
  .fit-l{grid-template-columns:1fr;gap:14px}
  /* each path: the mark beside the title, the line and the link under both */
  .fit-l li{column-gap:12px;grid-template-columns:40px minmax(0,1fr);align-items:center;padding-top:12px;border-top:1px solid var(--line)}
  .fit-k{width:40px;height:40px;margin:0}
  .fit h3{font-size:21px;text-wrap:pretty}
  .fit-t{display:contents}
  .fit p{grid-column:1 / -1;margin-top:6px;max-width:none}
  .fit .tlk{grid-column:1 / -1;margin-top:0}
  /* the comparison stacks: each row is the owner's task above our standard, the drawing beside both */
  .promise .cmp{display:block;margin-top:26px}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmp tbody{display:block}
  .cmp tr{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;padding:16px 0;border-top:1px solid rgba(246,241,232,.2)}
  .cmp td,.cmp td.you{display:block;width:auto;padding:0;border:0;font-size:17px;line-height:1.4}
  .cmp .cmp-i{grid-row:1 / span 2;padding:0}
  .cmp .fc2{width:46px;height:46px}
  .cmp .you,.cmp .us{grid-column:2}
  .cmp .us{margin-top:7px}
  /* the labels run in line, so each row is two short lines: the task, then the standard */
  .cmp td::before{content:attr(data-k);display:inline-block;margin-right:.55em;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,241,232,.74);vertical-align:1px}
  .cmp .cmp-i::before{display:none}
  .au-call{margin-top:16px;font-size:17px}
  .au-q{margin-top:18px}
  .hosts-side{margin-top:36px}
}
/* the hero address label stays on one line with room before the button on small laptops (13 October 2026) */
@media (min-width: 901px) and (max-width: 1180px){ .start .btn{padding-left:18px;padding-right:18px} .start .btn svg{display:none} }