/* Ishaks Conveyancing · website styles
   The page is the file on your matter, worked over by the conveyancer's pen.
   Burgundy is the ink and the paper is real. */

/* ------------------------------------------------------------------ tokens */
:root {
  --burgundy: #6E0D25;
  --beige: #B38F6F;
  --near: #161616;
  --cream: #EFE9DC;
  --ink: #2E050D;
  --deep: #520A1C;
  --beige-line: #CBB39C;
  --beige-bright: #E2CDB4;
  --paper: #F6EFE7;
  --manila: #E2CDB4;

  --text: #161616;
  --text-2: rgba(22, 22, 22, .78);
  --pencil: rgba(22, 22, 22, .16);
  --lc: rgba(22, 22, 22, .15);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --hh: 84px;
  --gut: clamp(16px, 4.4vw, 64px);
  --maxw: 1240px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .086 0 0 0 0 .086 0 0 0 0 .086 .22 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .02 0 0 0 0 .05 .6 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  --stampmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4.2 0 0 0 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --uline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.6 C 38 4.2, 84 7.6, 126 5.2 S 182 4.4, 198 6.2' fill='none' stroke='%236E0D25' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --uline-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.6 C 38 4.2, 84 7.6, 126 5.2 S 182 4.4, 198 6.2' fill='none' stroke='%23E2CDB4' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.6 C 3.2 3.4, 4.6 5, 6.1 6.4 C 7.6 4.6, 9 3.1, 10.8 1.2' fill='none' stroke='%236E0D25' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--text);
  overflow-x: clip;
  scroll-behavior: auto; /* app.js turns smooth on after load: mobile WebKit cuts cross-page jumps short otherwise */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  font: 300 17px/1.65 var(--sans);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

::selection { background: var(--burgundy); color: var(--cream); }

:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.on-ink :focus-visible,
.process :focus-visible,
.ready :focus-visible,
.ftr :focus-visible,
.stage :focus-visible { outline-color: var(--beige-bright); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed; left: 16px; top: -64px; z-index: 100;
  padding: 12px 16px;
  background: var(--burgundy); color: var(--cream);
  font: 600 14px/1 var(--sans);
  text-decoration: none;
  transition: transform .2s ease;
}
.skip:focus { transform: translateY(80px); }

/* While app.js measures ink targets, every transform is switched off so the
   boxes it reads are the real layout boxes. Never painted. */
html.measuring :is(.ink-host, .ink-host *, :has(.ink-host)) { transform: none !important; transition: none !important; }

/* ------------------------------------------------------------------ ground */
/* Fixed paper ground with manila and burgundy-ink layers over it. app.js blends
   them (opacity only) from where each section sits in the viewport. */
.ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--paper); }
.ground .g { position: absolute; inset: 0; }
.ground .g-manila { background: var(--manila); opacity: var(--gm, 0); will-change: opacity; }
.ground .g-ink {
  background: radial-gradient(130% 100% at 50% 38%, var(--deep) 0%, var(--ink) 72%);
  opacity: var(--gi, 0);
  will-change: opacity;
}
.ground::after {
  content: ''; position: absolute; inset: 0;
  background: var(--grain);
  opacity: .9;
}

/* text that sits straight on the ground fades with it, so it is never caught
   mid-morph at low contrast */
.gt { opacity: clamp(0, calc((.62 - var(--gi, 0)) * 10), 1); }
.gt-inv { opacity: clamp(0, calc((var(--gi, 1) - .38) * 10), 1); }

/* ------------------------------------------------------------------ header */
.hdr {
  --hc: 0;
  --hx: 14px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--hh);
  pointer-events: none;
}
.hdr::before {
  /* the floating strip's shadow, only there once it floats */
  content: ''; position: absolute;
  top: 10px; bottom: 14px; left: var(--hx); right: var(--hx);
  box-shadow: 0 1px 1px rgba(22, 22, 22, .1), 0 12px 26px -10px rgba(22, 22, 22, .32);
  opacity: var(--hc);
}
.hdr-paper {
  position: absolute; inset: 0;
  background: var(--grain), var(--cream);
  border-bottom: 1px solid rgba(22, 22, 22, calc(.12 * (1 - var(--hc))));
  clip-path: inset(calc(var(--hc) * 10px) calc(var(--hc) * var(--hx)) calc(var(--hc) * 14px) calc(var(--hc) * var(--hx)));
}
.hdr-row {
  position: relative; height: 100%;
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px);
  padding: 0 calc(var(--hx) + clamp(14px, 2vw, 26px));
  transform: translateY(calc(var(--hc) * -2px));
  pointer-events: auto;
}
.hdr-logo { display: block; flex: none; line-height: 0; }
.hdr-logo img {
  display: block; width: auto; height: 36px;
  transform: scale(calc(1 - var(--hc) * .14));
  transform-origin: 0 50%;
}
.hdr-nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.hdr-nav a {
  position: relative;
  padding: 10px 0;
  font: 500 14px/1 var(--sans);
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--near);
}
.hdr-nav a::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 2px; height: 7px;
  background: var(--uline) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .35s cubic-bezier(.6, .1, .3, 1);
}
.hdr-nav a:hover::after, .hdr-nav a:focus-visible::after { clip-path: inset(0 0 0 0); }
.hdr-tel {
  flex: none;
  font: 600 14px/1 var(--sans);
  color: var(--burgundy);
  text-decoration: none;
  white-space: nowrap;
}
.hdr-tel-k { font-weight: 500; color: var(--text-2); margin-right: 4px; }
.hdr-quote { flex: none; margin-right: calc(-1 * clamp(14px, 2vw, 26px) - 12px); }
.flag.flag-menu { display: none; } /* .flag sets display, so this needs the extra class */

/* ----------------------------------------------------------- sign-here flags */
.flag {
  --fh: 46px;
  position: relative;
  display: inline-flex;
  flex: none;
  text-decoration: none;
  background: none; border: 0; padding: 0;
  filter: drop-shadow(0 1px 0 rgba(46, 5, 13, .3)) drop-shadow(0 5px 7px rgba(46, 5, 13, .22));
}
.flag-body {
  position: relative;
  display: inline-flex; align-items: center;
  height: var(--fh);
  padding: 0 calc(var(--fh) * .66) 0 calc(var(--fh) * .5);
  background: var(--burgundy);
  color: var(--cream);
  font: 600 15px/1 var(--sans);
  letter-spacing: .03em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--fh) * .42) 0, 100% 50%, calc(100% - var(--fh) * .42) 100%, 0 100%);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.flag-body::before {
  /* the clear adhesive end, stuck to the page */
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 13px;
  background: linear-gradient(90deg, rgba(239, 233, 220, .26), rgba(239, 233, 220, .12));
  border-right: 1px dashed rgba(239, 233, 220, .32);
}
.flag:hover .flag-body { transform: translateX(4px); }
.flag:active .flag-body { transform: translateX(1px); }
.flag-left .flag-body {
  padding: 0 calc(var(--fh) * .5) 0 calc(var(--fh) * .66);
  clip-path: polygon(calc(var(--fh) * .42) 0, 100% 0, 100% 100%, calc(var(--fh) * .42) 100%, 0 50%);
}
.flag-left .flag-body::before { left: auto; right: 0; border-right: 0; border-left: 1px dashed rgba(239, 233, 220, .32); }

.tel-link {
  display: inline-block;
  padding: 10px 2px 9px;
  font: 600 16px/1.1 var(--sans);
  color: var(--burgundy);
  text-decoration: none;
  white-space: nowrap;
  background: var(--uline) 0 calc(100% - 2px) / 100% 7px no-repeat;
}
.tel-link:hover { color: var(--deep); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* -------------------------------------------------------------- file index */
.file-index {
  position: fixed; inset: 0; z-index: 70;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 10px;
  background: rgba(46, 5, 13, .72);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s cubic-bezier(.7, 0, .2, 1);
}
.file-index[hidden] { display: none; }
.file-index.is-open { clip-path: inset(0 0 0 0); }
.fi-sheet {
  width: 100%; max-width: 560px;
  max-height: calc(100svh - 20px);
  overflow-y: auto;
  background: var(--grain), var(--paper);
  padding: 22px 22px 28px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}
.fi-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--near); padding-bottom: 12px; }
.fi-title { font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--burgundy); }
.fi-close {
  min-height: 44px; padding: 0 4px 0 14px;
  border: 0; background: none;
  font: 600 14px/1 var(--sans); color: var(--near);
  display: inline-flex; align-items: center; gap: 8px;
}
.fi-close::after { content: '×'; content: '×' / ''; font: italic 600 26px/1 var(--serif); color: var(--burgundy); }
.fi-list a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--pencil);
  text-decoration: none; color: var(--near);
}
.fi-no { flex: none; width: 22px; font: italic 700 18px/1 var(--serif); color: var(--burgundy); }
.fi-t { font: 600 28px/1.1 var(--serif); }
.fi-ref { flex: none; font: italic 400 14px/1 var(--serif); color: var(--text-2); }
.fi-group { margin: 26px 0 0; padding-bottom: 4px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.fi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
html.menu-open, html.menu-open body { overflow: hidden; }

.dots {
  flex: 1 1 auto; min-width: 18px; align-self: flex-end;
  height: 6px; margin-bottom: .32em;
  background: radial-gradient(circle, rgba(22, 22, 22, .5) 1.05px, transparent 1.55px) 0 50% / 8px 6px repeat-x;
}

/* ===================================================================== HERO */
.trail { position: relative; height: 500vh; }

.stage {
  --u: 0; --r: 0; --cx: 0; --cy: 0; --cz: 0; --fin: 0;
  --P: 1400; --D: 1092; --exit: 500; --lift: 40;
  --W: min(56svh, 39vw);
  --mat: clamp(10px, 1.1vw, 18px);
  --pt: calc(var(--hh) - 8px);
  --cap: 36%;
  --fw: clamp(0, var(--fin) / .3, 1);
  --fe: clamp(0, (var(--fin) - .2) / .45, 1);
  --fc: clamp(0, (var(--fin) - .42) / .35, 1);
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  perspective: calc(var(--P) * 1px);
  perspective-origin: 50% 50%;
  background: var(--deep);
  color: var(--cream);
}

/* the desk: a burgundy leather mat, lamp-lit from the upper left, stitched */
.desk {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 75% at 38% 34%, rgba(110, 13, 37, .55) 0%, rgba(110, 13, 37, 0) 62%),
    radial-gradient(140% 110% at 50% 45%, rgba(46, 5, 13, 0) 40%, rgba(46, 5, 13, .85) 100%),
    var(--leather),
    var(--deep);
}
.desk::after {
  content: ''; position: absolute; inset: 20px;
  border: 1.5px dashed rgba(179, 143, 111, .34);
  box-shadow: inset 0 0 0 6px rgba(46, 5, 13, .18);
}

.scene {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--cx) * -1px), calc(var(--cy) * -1px), calc(var(--cz) * 1px));
}

/* six documents, each at its own depth */
.sheet {
  --x: 0; --y: 0; --rz: 0; --rx: 0; --ry: 0; --side: 1;
  --rel: calc(var(--u) - var(--i) - 1);
  --past: max(0, var(--rel));
  --prox: max(0, 1 - max(var(--rel), -1 * var(--rel)));
  /* the pen starts as the camera arrives and finishes while it rests on the page */
  --d: clamp(0, (var(--r) - var(--i) - .5) / .55, 1);
  position: absolute; left: 50%; top: 50%;
  width: var(--W);
  height: calc(var(--W) * 1.4142);
  margin: calc(var(--W) * -.7071) 0 0 calc(var(--W) * -.5);
  font-size: calc(var(--W) / 32);
  background:
    linear-gradient(158deg, rgba(22, 22, 22, 0) 38%, rgba(22, 22, 22, .07) 100%),
    var(--grain),
    var(--paper);
  box-shadow:
    1px 1px 0 rgba(22, 22, 22, .2),
    3px 5px 6px rgba(22, 22, 22, .2),
    10px 18px 26px rgba(22, 22, 22, .3),
    26px 46px 70px rgba(22, 22, 22, .38);
  transform:
    translate3d(
      calc(var(--x) * 1px + var(--past) * var(--side) * var(--exit) * 1px),
      calc(var(--y) * 1px - var(--past) * var(--lift) * 1px),
      calc((var(--i) + 1) * var(--D) * -1px - var(--past) * var(--D) * .7px))
    rotateZ(calc((var(--rz) * (1 - var(--prox) * .7) + var(--past) * var(--side) * 9) * 1deg))
    rotateX(calc(var(--rx) * (1 - var(--prox)) * 1deg))
    rotateY(calc(var(--ry) * (1 - var(--prox)) * 1deg));
  /* No opacity fade on the way out: a translucent sheet breaks Chrome's 3D
     sorting. A read page is tossed clear of the frame instead, then hidden. */
  backface-visibility: hidden;
}
.sheet::after {
  /* depth haze: sheets further down the pile sit in the desk's shadow */
  content: ''; position: absolute; inset: 0;
  background: var(--ink);
  opacity: clamp(0, calc((var(--rel) * -1 - .6) * .17), .55);
  pointer-events: none;
  will-change: opacity;
}
.sheet.is-gone { visibility: hidden; }

/* ---- document typography: real document furniture, grey line-bars for body text */
.doc {
  position: relative;
  height: 100%;
  padding: 2.4em 10.2em 2.2em 2.6em;
  color: var(--near);
  --sw: .13em;
}
.dm {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 .56em/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(22, 22, 22, .62);
  padding-bottom: .9em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid var(--pencil);
}
.dtl {
  font: 700 1.6em/1.06 var(--serif);
  letter-spacing: -.012em;
  color: var(--near);
}
.dsub {
  margin-top: .45em;
  font: 600 .62em/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(22, 22, 22, .66);
}
.rule2 { height: .3em; margin: .8em 0 .9em; border-top: 1.5px solid var(--near); border-bottom: 1px solid rgba(22, 22, 22, .55); }
.dsec {
  margin: 1.15em 0 .5em;
  font: 600 .64em/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(22, 22, 22, .8);
}
.bar {
  display: block;
  width: var(--w);
  height: .42em;
  margin: .32em 0;
  background: var(--lc);
}
.bar.inl { display: inline-block; vertical-align: middle; margin: 0 0 0 .4em; }
.p {
  display: block;
  margin-top: .45em;
  height: calc((var(--n) - 1) * 1.05em + .42em);
  background:
    linear-gradient(var(--lc), var(--lc)) 0 calc((var(--n) - 1) * 1.05em) / var(--l) .42em no-repeat,
    repeating-linear-gradient(to bottom, var(--lc) 0 .42em, transparent .42em 1.05em) 0 0 / 100% calc((var(--n) - 1) * 1.05em) no-repeat;
}
.dfl > div {
  display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: .8em;
  align-items: center;
  padding: .42em 0;
  border-bottom: 1px solid var(--pencil);
}
.dfl dt, .dlab {
  font: 600 .54em/1.2 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(22, 22, 22, .66);
}
.dfl dd .bar { margin: .18em 0; }
.dgrid {
  display: grid; grid-template-columns: 6.6em minmax(0, 1fr);
  align-items: center; gap: .55em .8em;
  margin: .2em 0 .4em;
}
.dgrid .bar { margin: 0; }
.dbox {
  margin: 1em 0 .6em;
  padding: .7em .8em .6em;
  border: 1px solid rgba(22, 22, 22, .4);
}
.dbox .dlab { display: block; margin-bottom: .3em; }

.cls { margin-top: 1em; }
.cls > li { position: relative; padding-left: 1.9em; margin-bottom: .78em; }
.cls-sm > li { margin-bottom: .55em; }
.cn {
  position: absolute; left: 0; top: .12em;
  font: 600 .68em/1.2 var(--sans);
  color: rgba(22, 22, 22, .7);
}
.ch {
  display: inline-block;
  font: 600 .7em/1.35 var(--sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--near);
}
.tk { display: inline-block; width: 1.2em; height: 1.1em; margin-left: .55em; vertical-align: -.25em; }

.dtab { width: 100%; border-collapse: collapse; margin: .1em 0 .2em; }
.dtab th {
  text-align: left;
  font: 600 .54em/1.2 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(22, 22, 22, .66);
  padding: 0 .5em .55em 0;
  border-bottom: 1.5px solid var(--near);
}
.dtab td {
  font: 400 .66em/1.2 var(--sans);
  padding: .62em .5em .62em 0;
  border-bottom: 1px solid var(--pencil);
  vertical-align: middle;
  color: rgba(22, 22, 22, .85);
}
.dtab td .bar { display: inline-block; vertical-align: middle; margin: 0; height: .64em; }
.dtab td .tk { margin-left: .4em; width: 1.6em; height: 1.5em; vertical-align: middle; }
.dtab .r { text-align: right; }
.dtab .r .bar { margin-left: auto; display: block; }
.dtab.ruled tr.tot td { border-top: 1.5px solid var(--near); border-bottom: 3px double var(--near); font-weight: 600; }

.dsign {
  position: relative;
  display: flex; align-items: flex-end; gap: .8em;
  margin-top: 1.6em;
  font: 600 .52em/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(22, 22, 22, .66);
}
.dtab + .dsign { margin-top: 5em; }
.dsign + .dsign { margin-top: 4.4em; }
.dnil { margin-top: .1em; font: 400 .66em/1.2 var(--sans); color: rgba(22, 22, 22, .85); }
.dend {
  display: flex; align-items: center; gap: .9em;
  margin-top: 4em;
  font: 600 .5em/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(22, 22, 22, .6);
}
.dend::before, .dend::after { content: ''; flex: 1; border-top: 1px solid var(--pencil); }
.d-contract .cls > li { margin-bottom: .66em; }
.dgrid + .hit, .dgrid + .dtab { margin-top: 1.2em; }
.d-contract .dsign { margin-top: 1.3em; }
.sigline { flex: 1; height: 0; border-bottom: 1px solid rgba(22, 22, 22, .6); margin-bottom: .1em; }
.mini-flag {
  position: absolute; right: -13.4em; bottom: -.55em;
  height: 2.2em;
  display: inline-flex; align-items: center;
  padding: 0 1.1em 0 1.9em;
  background: var(--burgundy); color: var(--cream);
  font: 700 .98em/1 var(--sans);
  letter-spacing: .12em;
  clip-path: polygon(1.1em 0, 100% 0, 100% 100%, 1.1em 100%, 0 50%);
  box-shadow: none;
}

/* the electronic settlement workspace: a printout of a generic screen */
.esw { border: 1px solid rgba(22, 22, 22, .45); margin-bottom: 1.2em; }
.esw-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7em .9em;
  background: rgba(22, 22, 22, .08);
  border-bottom: 1px solid rgba(22, 22, 22, .45);
}
.esw-t { font: 700 .9em/1.15 var(--serif); }
.esw-bar .bar.inl { height: .5em; }
.esw-body { padding: .9em .9em 1em; }
.esw-body .dsec { margin-top: 1em; }
.esw-parties li {
  display: grid; grid-template-columns: 9em minmax(0, 1fr) 1em;
  align-items: center; gap: .6em;
  padding: .42em 0;
  border-bottom: 1px solid var(--pencil);
  font: 400 .62em/1.2 var(--sans);
}
.esw-parties li .bar { margin: 0; }
.esw-parties .sq { width: 1em; height: 1em; border: 1px solid rgba(22, 22, 22, .45); background: rgba(22, 22, 22, .08); }
.esw-check li {
  position: relative;
  display: flex; align-items: center; gap: .8em;
  padding: .55em 0;
  border-bottom: 1px solid var(--pencil);
}
.esw-check .cb { flex: none; width: 1.25em; height: 1.25em; border: 1.5px solid rgba(22, 22, 22, .55); }
.esw-check .ch { font-size: .66em; }

/* margin notes in the conveyancer's hand, written out one line at a time:
   a staircase clip where line j shows (m - j) of its width. --nl is the
   note's line count, measured by app.js (5 covers any note without it). */
.note {
  --k: clamp(0, (var(--d) - var(--a)) / (var(--b) - var(--a)), 1);
  --m: calc(var(--k) * var(--nl, 5));
  --lh: 1.13em;
  --wd: calc(100% + .8em);
  --l0: calc(clamp(0, var(--m), 1) * var(--wd) - .4em);
  --l1: calc(clamp(0, var(--m) - 1, 1) * var(--wd) - .4em);
  --l2: calc(clamp(0, var(--m) - 2, 1) * var(--wd) - .4em);
  --l3: calc(clamp(0, var(--m) - 3, 1) * var(--wd) - .4em);
  --l4: calc(clamp(0, var(--m) - 4, 1) * var(--wd) - .4em);
  position: absolute; top: -.25em;
  left: calc(100% + 1em);
  width: 7.15em;
  font: italic 500 1.18em/1.13 var(--serif);
  color: var(--burgundy);
  clip-path: polygon(
    -.4em -.4em,
    var(--l0) -.4em, var(--l0) calc(var(--lh) + .12em),
    var(--l1) calc(var(--lh) + .12em), var(--l1) calc(2 * var(--lh) + .12em),
    var(--l2) calc(2 * var(--lh) + .12em), var(--l2) calc(3 * var(--lh) + .12em),
    var(--l3) calc(3 * var(--lh) + .12em), var(--l3) calc(4 * var(--lh) + .12em),
    var(--l4) calc(4 * var(--lh) + .12em), var(--l4) calc(100% + .4em),
    -.4em calc(100% + .4em));
}
.hit { position: relative; }
.d-strata .hit .note, .d-adjust .hit .note { top: 1.7em; }
.d-esw .note { left: calc(100% + 2.15em); top: -.6em; }

/* ---- the home: the last page of the file */
.print {
  position: absolute; inset: 0;
  transform: translate3d(0, 0, calc(var(--D) * -7px));
  background: var(--grain), var(--cream);
  box-shadow: 0 24px 70px rgba(22, 22, 22, .55);
}
.print-photo {
  position: absolute;
  left: var(--mat); right: var(--mat);
  top: var(--pt); bottom: var(--cap);
  overflow: hidden;
  background: var(--ink);
}
.print-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 42% 60%;
}

/* ---- the HUD over the scene */
.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.kicker {
  position: absolute; left: var(--gut); top: calc(var(--hh) + 22px);
  display: inline-block;
  padding: 9px 14px 8px;
  background: var(--grain), var(--cream);
  color: var(--burgundy);
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px rgba(110, 13, 37, .5), 2px 4px 10px rgba(22, 22, 22, .35);
  transform: rotate(-1.1deg);
  transform-origin: 0 50%;
}
.opener {
  position: absolute; left: var(--gut); top: 50%;
  width: min(40vw, 600px);
  transform: translateY(-46%);
  opacity: clamp(0, calc(1 - var(--u) * 2.4), 1);
}
.opener-h {
  font: 400 clamp(42px, 4.9vw, 78px)/1.02 var(--serif);
  letter-spacing: -.018em;
  color: var(--cream);
  text-wrap: balance;
}
.opener-h em { font-style: italic; color: var(--beige-bright); }
.opener-cue {
  display: flex; align-items: center; gap: 14px;
  margin-top: 30px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--beige-bright);
}
.cue-ink { width: 18px; height: 28px; overflow: visible; animation: cue 2.4s cubic-bezier(.5, 0, .3, 1) infinite; }
.cue-ink path { fill: none; stroke: var(--beige-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cue { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }

.caps { position: absolute; left: var(--gut); bottom: 40px; width: min(560px, calc((100vw - var(--W)) / 2 - var(--gut) - 28px)); height: 78px; }
.cap {
  position: absolute; left: 0; bottom: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.cap-n {
  display: block; margin-bottom: 8px;
  font: 600 11px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--beige-bright);
}
.cap-t { display: block; font: italic 400 clamp(20px, 1.9vw, 27px)/1.15 var(--serif); color: var(--cream); }
.stage[data-doc="0"] .cap:nth-child(1),
.stage[data-doc="1"] .cap:nth-child(2),
.stage[data-doc="2"] .cap:nth-child(3),
.stage[data-doc="3"] .cap:nth-child(4),
.stage[data-doc="4"] .cap:nth-child(5),
.stage[data-doc="5"] .cap:nth-child(6) { opacity: 1; transform: none; }

.trail-tabs {
  position: absolute; right: 0; top: 50%;
  display: flex; flex-direction: column; gap: 5px;
  transform: translateY(-50%);
  pointer-events: auto;
  transition: opacity .3s ease, visibility 0s;
}
.trail-tabs button {
  width: 46px; height: 50px;
  padding: 0 0 0 4px;
  border: 0;
  background: var(--grain), var(--beige-line);
  color: var(--burgundy);
  font: italic 700 18px/1 var(--serif);
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
  transform: translateX(11px);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.trail-tabs button:hover { transform: translateX(5px); }
.stage[data-doc="0"] .trail-tabs button:nth-child(1),
.stage[data-doc="1"] .trail-tabs button:nth-child(2),
.stage[data-doc="2"] .trail-tabs button:nth-child(3),
.stage[data-doc="3"] .trail-tabs button:nth-child(4),
.stage[data-doc="4"] .trail-tabs button:nth-child(5),
.stage[data-doc="5"] .trail-tabs button:nth-child(6) { background: var(--grain), var(--cream); transform: translateX(0); }
.stage[data-doc="6"] .trail-tabs { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }

/* ---- the finale: Protected. */
.finale {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: var(--cap);
  display: flex; align-items: center;
  padding: 0 calc(var(--mat) + var(--gut)) calc(var(--mat) + 4px);
  color: var(--near);
  pointer-events: none;
}
.stage.is-final .finale { pointer-events: auto; }
.fin-mat {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 84px);
}
.fin-left { position: relative; justify-self: start; }
.fin-word {
  display: block;
  font: 700 clamp(70px, 10.4vw, 176px)/.9 var(--serif);
  letter-spacing: -.035em;
  color: var(--near);
  white-space: nowrap;
}
.fin-text {
  display: inline-block;
  opacity: var(--fw);
  transform: translateY(calc((1 - var(--fw)) * 26px));
}
.fin-ink { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fin-ink path {
  fill: none; stroke: var(--burgundy);
  stroke-width: 3.4px; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1.02 * (1 - var(--fe)));
}
.fin-right { opacity: var(--fc); transform: translateY(calc((1 - var(--fc)) * 18px)); max-width: 520px; }
.fin-line { font: italic 500 clamp(22px, 2.1vw, 31px)/1.18 var(--serif); color: var(--near); text-wrap: balance; }
.fin-sub { margin-top: 12px; font: 300 clamp(15px, 1.1vw, 17px)/1.6 var(--sans); color: var(--text-2); }
.fin-right .actions { margin-top: 20px; }

/* ===================================================================== INK */
.ink-host { position: relative; }
.ink-layer { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.ink-layer path, svg.ink path {
  fill: none;
  stroke: var(--burgundy);
  stroke-width: var(--sw, 2.4px);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1.02 * (1 - clamp(0, (var(--d, 0) - var(--a, 0)) / (var(--b, 1) - var(--a, 0)), 1)));
}
.ink-host[data-ink-mode="hover"] .ink-layer path { transition: stroke-dashoffset .5s cubic-bezier(.55, .1, .3, 1); }

/* ================================================================ SECTIONS */
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.sec { position: relative; padding: clamp(100px, 15vh, 170px) 0; }
section[id] { scroll-margin-top: 76px; }

.tab-label {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-2);
}
.tab-label b {
  display: inline-grid; place-items: center;
  width: 30px; height: 26px;
  padding-top: 2px;
  background: var(--grain), var(--beige-line);
  color: var(--burgundy);
  font: italic 700 15px/1 var(--serif);
  letter-spacing: 0;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 100%, 0 100%);
}
.inv .tab-label, .tab-label.inv, .process .tab-label, .ready .tab-label { color: var(--beige-bright); }

.h2 {
  font: 700 clamp(44px, 5.4vw, 86px)/.98 var(--serif);
  letter-spacing: -.024em;
  color: var(--near);
}
.h2 .w { display: inline-block; }
/* the italic half moves as one piece: it shares the line when it fits, otherwise it
   drops below whole and balances, so no single word is left hanging */
.h2 .r { display: inline-block; font-style: italic; font-weight: 400; color: var(--burgundy); text-wrap: balance; }
.h2 + .body { margin-top: 30px; }
.h2.inv { color: var(--cream); }
.h2.inv .r { color: var(--beige-bright); }

.h2-alt {
  font: 500 clamp(32px, 3.7vw, 56px)/1.08 var(--serif);
  letter-spacing: -.016em;
  color: var(--near);
  text-wrap: balance;
  max-width: 980px;
}
.h2-alt em { font-style: italic; color: var(--burgundy); }
.h2-alt.inv { color: var(--cream); }
.h2-alt.inv em { color: var(--beige-bright); }

.body { font: 300 17.5px/1.7 var(--sans); color: var(--text-2); max-width: 640px; }
.body + .body { margin-top: 16px; }
.body.inv { color: rgba(239, 233, 220, .86); }

/* ------------------------------------------------------------- at a glance */
.glance { position: relative; padding: 110px 0 30px; }
.docket {
  position: relative;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, .05), rgba(22, 22, 22, 0) 14px),
    var(--grain), var(--manila);
  padding: 34px clamp(20px, 3vw, 46px) 32px;
  box-shadow: 0 1px 0 rgba(22, 22, 22, .1), 0 22px 34px -20px rgba(22, 22, 22, .42);
}
.docket::after {
  /* the folder's second leaf, peeking out below */
  content: ''; position: absolute; left: 10px; right: -6px; bottom: -7px; height: 12px; z-index: -1;
  background: var(--beige-line);
  box-shadow: 0 8px 16px -8px rgba(22, 22, 22, .35);
}
.docket-tab {
  position: absolute; left: 0; bottom: 100%;
  padding: 11px 34px 8px 20px;
  background: var(--grain), var(--manila);
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--burgundy);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
}
.docket-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.docket-fields > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px;
  padding: 4px clamp(14px, 2vw, 30px);
  border-left: 1px solid rgba(22, 22, 22, .2);
}
.docket-fields > div:first-child { border-left: 0; padding-left: 0; }
.docket-fields dd {
  font: 700 clamp(40px, 4.4vw, 66px)/1 var(--serif);
  letter-spacing: -.024em;
  color: var(--burgundy);
  white-space: nowrap;
}
.docket-fields dt {
  font: 600 11.5px/1.35 var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-2);
}

/* ------------------------------------------------------------------ guided */
.guided { padding-top: 120px; }
.guided-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.caption {
  display: inline-block;
  margin: 30px 0 20px;
  font: italic 400 clamp(23px, 2.2vw, 31px)/1.3 var(--serif);
  color: var(--near);
}
.checks { margin-top: 34px; }
.checks li {
  position: relative;
  padding: 18px 0 18px 56px;
  border-top: 1px solid var(--pencil);
  font: 400 17px/1.5 var(--sans);
  color: var(--near);
}
.checks li:last-child { border-bottom: 1px solid var(--pencil); }
.checks .box {
  position: absolute; left: 4px; top: 19px;
  width: 25px; height: 25px;
  border: 1.5px solid rgba(22, 22, 22, .6);
}
.g-print { position: relative; }
.mount { position: relative; transform: rotate(1.8deg); }
.mount img {
  display: block; width: 100%; height: auto;
  box-shadow: 1px 1px 0 rgba(22, 22, 22, .12), 4px 8px 10px rgba(22, 22, 22, .16), 16px 30px 44px -10px rgba(22, 22, 22, .38);
}
.corner {
  position: absolute; width: 46px; height: 46px;
  background: linear-gradient(135deg, rgba(239, 233, 220, .12), rgba(239, 233, 220, 0) 60%), var(--near);
  filter: drop-shadow(1px 2px 1.5px rgba(22, 22, 22, .35));
}
.corner.tl { left: -8px; top: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.corner.tr { right: -8px; top: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.corner.bl { left: -8px; bottom: -8px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.corner.br { right: -8px; bottom: -8px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ---------------------------------------------------------------- personal */
.personal-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6.5vw, 110px);
  align-items: start;
}
.pocket {
  position: relative;
  padding: clamp(24px, 2.6vw, 38px) clamp(24px, 2.6vw, 38px) 96px;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, .06), rgba(22, 22, 22, 0) 30%),
    var(--grain), var(--beige-line);
  box-shadow: 0 1px 0 rgba(22, 22, 22, .12), 0 26px 40px -22px rgba(22, 22, 22, .5);
  transform: rotate(-1.2deg);
}
.pocket-photo { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--cream); }
.pocket-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.slit {
  position: absolute; width: 104px; height: 104px;
  filter: drop-shadow(1.5px 2px 1.5px rgba(22, 22, 22, .42));
  pointer-events: none;
}
.slit::before { content: ''; position: absolute; inset: 0; background: var(--grain), var(--beige-line); }
.slit.s1 { left: clamp(24px, 2.6vw, 38px); top: clamp(24px, 2.6vw, 38px); }
.slit.s1::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.slit.s2 { right: clamp(24px, 2.6vw, 38px); bottom: 96px; }
.slit.s2::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pocket-label {
  position: absolute; left: clamp(24px, 2.6vw, 38px); bottom: 30px;
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 10px 16px 9px;
  background: var(--grain), var(--cream);
  box-shadow: 1px 2px 6px rgba(22, 22, 22, .2);
  font: 600 11px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2);
}
.pocket-label span { font: italic 600 21px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--near); }

/* --------------------------------------------------------------- audiences */
.audiences { padding-top: 40px; }
.dividers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 96px;
  filter: drop-shadow(0 1px 1px rgba(22, 22, 22, .16)) drop-shadow(0 18px 22px rgba(22, 22, 22, .17));
}
.divider {
  position: relative; isolation: isolate;
  padding: 52px clamp(26px, 3.4vw, 50px) 50px clamp(64px, 6vw, 82px);
  min-height: 300px;
}
.divider::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grain), var(--dbg);
  -webkit-mask-image: radial-gradient(circle at 30px 30%, transparent 8.5px, #000 9.2px), radial-gradient(circle at 30px 70%, transparent 8.5px, #000 9.2px);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at 30px 30%, transparent 8.5px, #000 9.2px), radial-gradient(circle at 30px 70%, transparent 8.5px, #000 9.2px);
  mask-composite: intersect;
}
.divider-tab {
  position: absolute; bottom: 100%; left: var(--tx);
  padding: 13px 26px 10px;
  background: var(--grain), var(--dbg);
  font: 600 13px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--burgundy);
  white-space: nowrap;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 100%, 0 100%);
}
.d1 { --dbg: var(--cream); --tx: clamp(64px, 6vw, 82px); transform: rotate(-.9deg); z-index: 2; }
.d2 { --dbg: var(--paper); --tx: 40%; transform: translate(-22px, 54px) rotate(.8deg); z-index: 1; }
.d3 { --dbg: var(--cream); --tx: 40%; transform: translate(-44px, 14px) rotate(-.6deg); z-index: 0; }
.divider-body { max-width: 470px; font: 300 18px/1.65 var(--sans); color: var(--text-2); }
.divider-body .lead {
  display: block; margin-bottom: 14px;
  font: italic 500 clamp(26px, 2.4vw, 34px)/1.12 var(--serif);
  color: var(--burgundy);
}
/* each divider indexes its own section: B1 to B3 behind Buyers, S1 to S3 behind Sellers */
.div-index { max-width: 470px; margin: 0; padding: 0; list-style: none; }
.div-index li + li { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--pencil); }
.div-k {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 8px;
  font: italic 500 clamp(23px, 2vw, 28px)/1.15 var(--serif);
  color: var(--burgundy);
}
.div-ref {
  flex: none; min-width: 2.2em;
  font: 600 11px/1 var(--sans); font-style: normal;
  letter-spacing: .14em;
  color: var(--text-2);
}
.div-index p { margin: 0; padding-left: 38px; font: 300 16.5px/1.6 var(--sans); color: var(--text-2); }
.holes { display: none; }

/* ----------------------------------------------------------------- covered */
.covered { padding-top: clamp(130px, 18vh, 200px); padding-bottom: clamp(170px, 26vh, 260px); }
.covered-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
}
.covered-head { position: sticky; top: 130px; }
.toc-top {
  display: flex; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--near);
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
}
.toc-item { border-bottom: 1px solid var(--pencil); }
.toc-item a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 24px 0 8px;
  text-decoration: none;
  color: var(--near);
}
.toc-item a:focus-visible { outline-offset: 6px; }
.toc-item a { --tf: clamp(24px, 2.5vw, 37px); --rf: 18px; }
.toc-no { flex: none; width: 30px; font: 600 13px/1 var(--sans); letter-spacing: .08em; color: var(--burgundy); }
.toc-t { flex: 0 1 auto; min-width: 0; max-width: 100%; font: 500 var(--tf)/1.15 var(--serif); letter-spacing: -.01em; }
/* each note sits in pencil until you point at the line; then the pen inks over it */
.toc-b {
  position: relative;
  margin: 2px 0 20px 46px;
  min-height: 1.4em;
  font: italic 400 clamp(18px, 1.5vw, 21px)/1.4 var(--serif);
  color: rgba(22, 22, 22, .62);
}
.toc-ink {
  position: absolute; inset: 0;
  color: var(--burgundy);
  clip-path: inset(-.3em calc(100% + .3em) -.3em -.3em);
  transition: clip-path .6s cubic-bezier(.6, .1, .25, 1);
}
.toc-item { --d: 0; }
.toc-item:hover, .toc-item:focus-within { --d: 1; }
.toc-item:hover .toc-ink, .toc-item:focus-within .toc-ink { clip-path: inset(-.3em -.3em -.3em -.3em); }
@media (hover: none) {
  .toc-item { --d: 1; }
  .toc-ink { clip-path: none; }
}

/* ----------------------------------------------------------------- process */
.process { color: var(--cream); padding-top: clamp(150px, 22vh, 230px); padding-bottom: clamp(140px, 20vh, 220px); }
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
}
/* the pile sits in the middle of the screen while it is worked through */
.process { --pile-top: max(110px, 50vh - 236px); }
.process-head { position: sticky; top: calc(var(--pile-top) + 22px); }
.pile { padding-bottom: 6vh; }
.pile-sheet {
  --cover: 0;
  position: sticky;
  top: calc(var(--pile-top) + var(--k) * 26px);
  min-height: 420px;
  margin-bottom: 46vh;
  padding: 36px clamp(28px, 3.4vw, 50px) 44px;
  background:
    linear-gradient(158deg, rgba(22, 22, 22, 0) 45%, rgba(22, 22, 22, .06)),
    var(--grain), var(--paper);
  color: var(--near);
  box-shadow: 1px 1px 0 rgba(22, 22, 22, .3), 6px 12px 18px rgba(10, 0, 4, .32), 18px 40px 60px -14px rgba(10, 0, 4, .6);
  transform: rotate(var(--rot)) scale(calc(1 - var(--cover) * .035));
  transform-origin: 50% 0;
}
.pile-sheet:last-child { margin-bottom: 24vh; } /* the last sheet rests before the pile leaves */
.pile-sheet::after {
  content: ''; position: absolute; inset: 0;
  background: var(--ink);
  opacity: calc(var(--cover) * .3);
  pointer-events: none;
  will-change: opacity;
}
.pile-sheet::before {
  content: 'Step ' counter(step) ' of 4';
  counter-increment: step;
  position: absolute; right: clamp(28px, 3.4vw, 50px); top: 40px;
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(22, 22, 22, .72);
}
.pile { counter-reset: step; }
.pile-no {
  display: inline-block;
  padding: 2px 16px 0 14px;
  font: 700 60px/1 var(--serif);
  color: var(--burgundy);
}
.pile-h { margin: 18px 0 14px; font: 600 clamp(28px, 2.7vw, 40px)/1.1 var(--serif); letter-spacing: -.012em; }
.pile-p { max-width: 540px; font: 300 18px/1.65 var(--sans); color: var(--text-2); }

/* what each sheet carries: the quote, the file checklist, the settlement stamp */
.pile-quote { margin-top: 26px; max-width: 430px; border-top: 1.5px solid var(--near); }
.pq-row {
  display: flex; align-items: baseline; gap: 14px;
  min-height: 46px;
  padding: 13px 0 7px;
  border-bottom: 1px solid rgba(22, 22, 22, .3);
}
.pq-row span {
  flex: none; width: 10.5em;
  font: 600 11px/1 var(--sans);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-2);
}
.pq-row b { font: italic 600 23px/1 var(--serif); color: var(--burgundy); }
.pile-checks {
  display: grid; grid-template-columns: repeat(2, max-content);
  gap: 16px 46px;
  margin-top: 28px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--near);
}
.pile-checks li { display: flex; align-items: center; gap: 14px; }
.pc-box { flex: none; width: 21px; height: 21px; border: 1.5px solid rgba(22, 22, 22, .6); }
.pile-stamp {
  /* lands with a thump once the sheet's pen has finished */
  --s: clamp(0, (var(--d, 0) - .82) * 1000, 1);
  position: absolute; right: clamp(30px, 7%, 70px); bottom: 54px;
  display: flex; flex-direction: column; align-items: center;
  padding: 15px 24px 13px;
  color: var(--burgundy);
  border: 3.5px solid currentColor;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5.6px currentColor;
  font: 700 clamp(30px, 2.9vw, 42px)/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  -webkit-mask-image: var(--stampmask);
  mask-image: var(--stampmask);
  -webkit-mask-size: 150px 150px;
  mask-size: 150px 150px;
  opacity: calc(var(--s) * .9);
  transform: rotate(-7deg) scale(calc(1.6 - .6 * var(--s)));
  transition: opacity .16s ease, transform .44s cubic-bezier(.3, 1.5, .55, 1);
}
.pile-stamp small { margin-bottom: 7px; font: 600 10.5px/1 var(--sans); letter-spacing: .3em; }

/* ---------------------------------------------------------------- prepared */
.prepared { padding-top: clamp(150px, 22vh, 230px); padding-bottom: clamp(150px, 22vh, 230px); }
.prep-head { max-width: 820px; margin-bottom: 70px; }
.prep-head .intro { margin-top: 26px; max-width: 720px; }

.ws {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  scroll-margin-top: 92px;
}
.ws-sheet {
  position: relative; z-index: 1;
  grid-column: 1; grid-row: 1;
  padding: 54px clamp(30px, 4vw, 60px) 0 clamp(96px, 8vw, 118px);
  background:
    linear-gradient(90deg, transparent calc(clamp(96px, 8vw, 118px) - 26px), rgba(110, 13, 37, .5) calc(clamp(96px, 8vw, 118px) - 26px) calc(clamp(96px, 8vw, 118px) - 25px), transparent calc(clamp(96px, 8vw, 118px) - 25px) calc(clamp(96px, 8vw, 118px) - 21px), rgba(110, 13, 37, .5) calc(clamp(96px, 8vw, 118px) - 21px) calc(clamp(96px, 8vw, 118px) - 20px), transparent calc(clamp(96px, 8vw, 118px) - 20px)),
    var(--grain), var(--paper);
  box-shadow: 1px 1px 0 rgba(22, 22, 22, .14), 8px 14px 22px rgba(22, 22, 22, .16), 22px 44px 70px -18px rgba(22, 22, 22, .42);
}
.ws-holes {
  position: absolute; left: 22px; top: 0; bottom: 0; width: 22px;
  background: radial-gradient(circle at 11px 11px, rgba(22, 22, 22, .16) 0 9px, rgba(22, 22, 22, .3) 9.5px 10px, transparent 10.5px) 0 60px / 22px 210px repeat-y;
}
.ws-tabs {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 64px;
  margin-left: -10px;
}
.ws-tab {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 12px;
  min-height: 54px;
  padding: 0 26px 0 22px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(22, 22, 22, .2), rgba(22, 22, 22, 0) 18px),
    var(--grain), var(--beige-line);
  color: var(--near);
  font: 600 14px/1.15 var(--sans);
  text-align: left;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.ws-tab:hover { transform: translateX(4px); }
.ws-tab[aria-selected="true"] {
  z-index: 2;
  background: var(--grain), var(--paper);
  color: var(--burgundy);
  transform: translateX(0);
}
.ws-tab:focus-visible { outline-offset: -4px; }
.tab-i { font: italic 700 17px/1 var(--serif); color: var(--burgundy); min-width: 22px; }

.ws-panel { outline: none; }
.ws-panel[hidden] { display: none; }
.ws-q {
  margin-bottom: 26px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--burgundy);
}
.ws-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: clamp(26px, 3.6vw, 56px);
}
#calc-duty .ws-body { grid-template-columns: minmax(0, 1fr); }
#calc-duty .ws-margin { border-left: 0; padding-left: 0; }
.ws-margin {
  padding-left: 26px;
  border-left: 1px solid rgba(110, 13, 37, .4);
}

/* fill-in-the-blank sentences, on ruled answer lines */
.ws-s {
  --rl: 52px;
  font: 400 clamp(21px, 1.9vw, 27px)/var(--rl) var(--serif);
  color: var(--near);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rl) - 11px), rgba(22, 22, 22, .13) calc(var(--rl) - 11px) calc(var(--rl) - 10px), transparent calc(var(--rl) - 10px) var(--rl));
}
.ws-s + .ws-s { margin-top: 0; }
.nw { white-space: nowrap; }
.ws-s2 { font-size: clamp(17px, 1.4vw, 20px); --rl: 46px; color: var(--text-2); }
.blank {
  position: relative;
  display: inline-flex; align-items: baseline;
  margin: 0 3px;
  border-bottom: 2px solid rgba(22, 22, 22, .6);
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: baseline;
}
.blank:focus-within { border-bottom-color: var(--burgundy); background: rgba(110, 13, 37, .07); outline: 2px solid var(--burgundy); outline-offset: 3px; }
.blank input, .blank select {
  min-width: 1.6ch;
  height: 1.3em;
  padding: 0 3px;
  border: 0; border-radius: 0;
  background: transparent;
  font: italic 600 1em/1.3 var(--serif);
  color: var(--burgundy);
  text-align: center;
  outline: none;
}
.blank input::placeholder { color: rgba(110, 13, 37, .45); }
.blank select {
  -webkit-appearance: none; appearance: none;
  padding-right: 24px;
  text-align: left;
  background: var(--chev) right 3px center / 12px 8px no-repeat;
  cursor: pointer;
}
.blank select:focus-visible, .blank input:focus-visible { outline: none; }
.cur { font: italic 600 1em/1.3 var(--serif); color: var(--burgundy); padding-left: 2px; }
.ast { font: 700 .8em/1 var(--serif); color: var(--burgundy); vertical-align: super; margin-left: 1px; }

.tog {
  padding: 0 4px;
  background: none;
  border: 0; border-bottom: 2px solid rgba(22, 22, 22, .6);
  font: italic 600 1em/1.25 var(--serif);
  color: var(--burgundy);
  cursor: pointer;
}
.tog:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; background: rgba(110, 13, 37, .07); }
.tog-not { position: relative; display: inline-block; margin-left: .25em; transition: opacity .3s ease; }
.tog-not::after {
  /* struck out in ink, the way a conveyancer corrects a form */
  content: ''; position: absolute; left: -.12em; right: -.12em; top: 52%;
  height: 2.5px;
  background: var(--burgundy);
  border-radius: 2px;
  transform: rotate(-4deg);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .35s cubic-bezier(.55, .1, .3, 1);
}
.tog[aria-checked="true"] .tog-not { opacity: .62; }
.tog[aria-checked="true"] .tog-not::after { clip-path: inset(0 0 0 0); }
.tog:disabled { cursor: not-allowed; opacity: .45; }

.ws-rn {
  margin-top: 18px;
  font: 300 13.5px/1.55 var(--sans);
  color: var(--text-2);
  max-width: 620px;
}
.ws-rn .ast { vertical-align: 0; font-size: 1.2em; margin-right: 2px; }

.ws-res {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .66em 18px; /* when the line wraps, the loop needs clear air above and below the figure */
  margin: 38px 0 6px;
  font: 400 clamp(22px, 2vw, 29px)/1.3 var(--serif);
  color: var(--near);
}
.res-fig { position: relative; display: inline-block; padding: 0 1em; } /* room for the loop, which overshoots the figure */
.fig {
  display: inline-block;
  font: 700 clamp(50px, 5.4vw, 80px)/1.08 var(--serif);
  letter-spacing: -.024em;
  color: var(--burgundy);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
#calc-sooner .fig { font-size: clamp(38px, 3.8vw, 58px); }
.res-ink { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.res-ink path {
  fill: none; stroke: var(--burgundy);
  stroke-width: 2.8px; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s cubic-bezier(.55, .08, .3, 1);
}
.res-post { color: var(--near); }

.mnote {
  position: relative;
  margin-bottom: 20px;
  padding-left: 22px;
  font: italic 400 17.5px/1.42 var(--serif);
  color: var(--burgundy);
}
.mnote::before {
  content: '*';
  position: absolute; left: 0; top: -.08em;
  font: 700 24px/1 var(--serif);
  color: var(--burgundy);
}
.mnote.warn { color: var(--near); }
.mnote:empty { display: none; }

.ws-carry { margin-top: 18px; }
.carry {
  min-height: 44px;
  padding: 10px 2px 9px;
  border: 0;
  background: var(--uline) 0 calc(100% - 4px) / 100% 7px no-repeat;
  font: 600 15px/1.2 var(--sans);
  color: var(--burgundy);
  text-align: left;
}
.carry::after { content: ' →'; }
.carry[hidden] { display: none; }

.duty-lines { margin-top: 22px; max-width: 560px; }
.duty-lines > div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--pencil);
}
.duty-lines dt { flex: 1 1 0; min-width: 0; font: 400 15.5px/1.3 var(--sans); color: var(--near); }
.duty-lines dt::after { content: ''; }
.duty-lines > div[hidden] { display: none; }
.duty-lines dd { flex: 0 1 auto; max-width: 62%; margin-left: auto; text-align: right; font: 600 15.5px/1.3 var(--sans); color: var(--near); font-variant-numeric: tabular-nums; }
.duty-lines dd.ok { color: var(--burgundy); }

.ledger { width: 100%; max-width: 760px; margin-top: 34px; border-collapse: collapse; }
.ledger caption {
  text-align: left;
  padding-bottom: 12px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--burgundy);
}
.ledger th {
  text-align: left;
  padding: 0 12px 10px 0;
  border-bottom: 1.5px solid var(--near);
  font: 600 11px/1.2 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
}
.ledger td {
  padding: 11px 12px 9px 0;
  border-bottom: 1px solid var(--pencil);
  font: 400 15px/1.3 var(--sans);
  color: rgba(22, 22, 22, .5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger th:nth-child(3), .ledger td:nth-child(3) { text-align: right; }
.ledger tr.on td { color: var(--near); }
.ledger tr.at td { font-weight: 600; }
.ledger td.tk-cell { width: 220px; padding-left: 18px; color: var(--burgundy); white-space: normal; }
.ledger .tk-svg { display: inline-block; width: 26px; height: 22px; vertical-align: -5px; overflow: visible; }
.ledger .tk-svg path {
  fill: none; stroke: var(--burgundy); stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.02;
  transition: stroke-dashoffset .4s cubic-bezier(.55, .1, .3, 1);
  transition-delay: calc(var(--row) * 70ms);
}
.ledger tr.on .tk-svg path { stroke-dashoffset: 0; }
.ledger .here { margin-left: 8px; font: italic 500 16px/1.2 var(--serif); color: var(--burgundy); }
.ledger tr.sum td { padding-top: 12px; border-top: 1.5px solid var(--near); border-bottom: 3px double rgba(22, 22, 22, .7); color: var(--near); font-weight: 600; }

.ws-disc {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--pencil);
  font: 300 13px/1.6 var(--sans);
  color: var(--text-2);
  max-width: 760px;
}

.ws-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 40px;
  margin-top: 46px;
  padding: 30px 0 32px;
  border-top: 3px double rgba(22, 22, 22, .7);
}
.ws-cta-t { font: 500 clamp(22px, 2vw, 29px)/1.25 var(--serif); color: var(--near); max-width: 560px; }
.ws-cta-t em { color: var(--burgundy); }

.sofar {
  margin: 0 calc(-1 * clamp(30px, 4vw, 60px)) 0 calc(-1 * clamp(96px, 8vw, 118px));
  padding: 26px clamp(30px, 4vw, 60px) 30px clamp(96px, 8vw, 118px);
  background: var(--grain), var(--cream);
  border-top: 1px solid rgba(22, 22, 22, .2);
}
.sofar-h {
  margin-bottom: 8px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--burgundy);
}
.sofar-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 46px; }
.sofar-list button {
  width: 100%;
  display: flex; align-items: baseline; gap: 10px;
  min-height: 46px;
  padding: 12px 0 8px;
  border: 0; border-bottom: 1px solid var(--pencil);
  background: none;
  text-align: left;
}
.sf-k { flex: none; font: 400 15px/1.2 var(--sans); color: var(--text-2); }
.sf-v { flex: 0 1 auto; min-width: 0; text-align: right; font: italic 600 18px/1.2 var(--serif); color: var(--burgundy); }
.sofar-list button:hover .sf-k { color: var(--near); }
.sofar-list button[aria-current="true"] .sf-k { color: var(--near); font-weight: 600; }

/* ------------------------------------------------------------------- ready */
.ready { position: relative; height: 240vh; color: var(--cream); }
.ready-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.ready-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
  padding-top: 50px;
}
.ready-head .body { margin-top: 26px; }
.nation {
  margin-top: 28px;
  display: inline-block;
  padding-bottom: 9px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--beige-bright);
  background: var(--uline-cream) 0 100% / 100% 7px no-repeat;
}
.stamp-sheet {
  padding: 28px clamp(22px, 2.6vw, 38px) 34px;
  background:
    linear-gradient(158deg, rgba(22, 22, 22, 0) 45%, rgba(22, 22, 22, .06)),
    var(--grain), var(--paper);
  color: var(--near);
  box-shadow: 1px 1px 0 rgba(22, 22, 22, .3), 8px 16px 24px rgba(10, 0, 4, .35), 22px 46px 70px -18px rgba(10, 0, 4, .6);
  transform: rotate(.7deg);
}
.ss-h {
  display: flex; justify-content: space-between;
  margin-bottom: 22px; padding-bottom: 12px;
  border-bottom: 1.5px solid var(--near);
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-2);
}
.ss-h b { color: var(--burgundy); font-weight: 700; }
.stamps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 14px;
  align-items: center; justify-items: center;
}
.stamp {
  position: relative;
  width: 100%; max-width: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--burgundy);
  border: 3.5px solid currentColor;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5.6px currentColor;
  -webkit-mask-image: var(--stampmask);
  mask-image: var(--stampmask);
  -webkit-mask-size: 150px 150px;
  mask-size: 150px 150px;
  opacity: 0;
  transform: rotate(var(--rot));
  transition: opacity .18s ease;
}
.stamp.round { aspect-ratio: 1; border-radius: 50%; }
.stamp.box { aspect-ratio: 1.18; }
.stamp.is-stamped { opacity: .9; transform: rotate(var(--rot)); animation: stamp .42s cubic-bezier(.3, .1, .25, 1) both; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(var(--rot)) scale(1.65); }
  55% { opacity: .95; transform: rotate(var(--rot)) scale(.94); }
  75% { transform: rotate(var(--rot)) scale(1.02); }
  100% { opacity: .9; transform: rotate(var(--rot)) scale(1); }
}
.st-a { font: 700 clamp(25px, 2.4vw, 36px)/1 var(--sans); letter-spacing: .06em; }
.st-n {
  margin-top: 7px; max-width: 84%;
  font: 600 9.5px/1.25 var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
}

/* ----------------------------------------------------------------- trusted */
.trusted { padding-top: clamp(150px, 22vh, 230px); }
.trusted-head { max-width: 900px; }
.trusted-head .src {
  margin-top: 18px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-2);
}
.slips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 38px);
  align-items: start;
  margin-top: 64px;
  filter: drop-shadow(0 1px 1px rgba(22, 22, 22, .14)) drop-shadow(0 16px 20px rgba(22, 22, 22, .15));
}
.slip {
  position: relative; isolation: isolate;
  padding: 32px clamp(22px, 2.2vw, 32px) 28px;
  transform: rotate(var(--rot));
}
/* the paper and its torn top edge sit on their own layer, so the clip can overhang the slip */
.slip::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grain), var(--cream);
  -webkit-mask-image: radial-gradient(circle at 7px 0, transparent 3.6px, #000 4.3px);
  -webkit-mask-size: 14px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle at 7px 0, transparent 3.6px, #000 4.3px);
  mask-size: 14px 100%;
  mask-repeat: repeat-x;
}
/* a steel paper clip holds each review to the file, the same clip as the portraits on /team/ */
.slip .clip { position: absolute; top: -34px; right: 48px; z-index: 3; width: 22px; height: 62px; transform: rotate(4deg); pointer-events: none; }
.slip:nth-child(2) .clip { right: auto; left: 54px; transform: rotate(-5deg); }
.slip .clip::before { content: ''; position: absolute; inset: 0; border: 2.5px solid #8d8a84; border-radius: 11px; }
.slip .clip::after { content: ''; position: absolute; top: 10px; left: 5px; width: 12px; height: 40px; border: 2.5px solid #8d8a84; border-bottom: 0; border-radius: 6px 6px 0 0; }
.slip:nth-child(2) { margin-top: 74px; }
.slip:nth-child(3) { margin-top: 26px; }
.slip-top {
  display: flex; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 13px;
  border-bottom: 1px dashed rgba(22, 22, 22, .32);
  font: 600 11px/1 var(--sans);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--burgundy);
}
.slip-q p { font: 400 15.5px/1.75 var(--sans); color: var(--near); }
.slip-by { margin-top: 20px; font: italic 600 21px/1.2 var(--serif); color: var(--near); }
/* ----------------------------------------------------------------- enquiry */
.enquiry { padding-bottom: clamp(140px, 20vh, 220px); }
.enq-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
}
.enq-head .body { margin-top: 24px; }
.enq-direct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 36px; }
.enq-direct span { font: 600 12px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; color: var(--text-2); }
.tel-link.big { font: italic 600 clamp(30px, 3vw, 44px)/1.1 var(--serif); background-size: 100% 9px; padding-bottom: 12px; }
.enq-mail { margin-top: 8px; }
.enq-form {
  position: relative;
  padding: 32px clamp(24px, 3.2vw, 46px) 34px;
  background:
    linear-gradient(158deg, rgba(22, 22, 22, 0) 45%, rgba(22, 22, 22, .05)),
    var(--grain), var(--paper);
  box-shadow: 1px 1px 0 rgba(22, 22, 22, .14), 8px 14px 22px rgba(22, 22, 22, .16), 22px 44px 70px -18px rgba(22, 22, 22, .42);
  transform: rotate(-.5deg);
}
.form-top {
  display: flex; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1.5px solid var(--near);
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--burgundy);
}
.fld { display: flex; flex-direction: column; padding-top: 20px; min-width: 0; }
.fld label {
  font: 600 11px/1 var(--sans);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-2);
}
.fld input, .fld select, .fld textarea {
  width: 100%;
  min-height: 46px;
  padding: 8px 2px 5px;
  border: 0; border-bottom: 1.5px solid rgba(22, 22, 22, .55);
  border-radius: 0;
  background: transparent;
  font: italic 500 22px/1.3 var(--serif);
  color: var(--burgundy);
  outline: none;
}
.fld select {
  -webkit-appearance: none; appearance: none;
  padding-right: 26px;
  background: var(--chev) right 4px center / 12px 8px no-repeat;
}
.fld select:invalid, .fld select option[value=""] { color: rgba(22, 22, 22, .66); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible {
  border-bottom-color: var(--burgundy);
  background-color: rgba(110, 13, 37, .06);
  outline: 2px solid var(--burgundy); outline-offset: 2px;
}
.fld textarea {
  min-height: 148px;
  resize: vertical;
  padding: 0 2px;
  border-bottom: 0;
  line-height: 37px;
  /* soft-edged rules: a hard 1px stop breaks into dashes once the sheet is rotated */
  background: repeating-linear-gradient(to bottom, transparent 0 34.6px, rgba(22, 22, 22, .4) 35.6px 36px, transparent 37px);
  background-attachment: local;
}
.fld-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sign-row { margin-top: 36px; }
.sign-btn {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 12px 0 8px 4px;
  border: 0; border-bottom: 2px solid var(--near);
  background: none;
  color: var(--near);
  text-align: left;
}
.sign-x { font: italic 700 34px/1 var(--serif); color: var(--burgundy); }
.sign-t { font: 600 18px/1 var(--sans); letter-spacing: .01em; }
.sign-flag { margin-left: auto; margin-right: -12px; --fh: 42px; }
.sign-flag .flag-body { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.sign-btn:hover { background: rgba(110, 13, 37, .05); }
.sign-btn:hover .flag-body { transform: translateX(-5px); }
.form-fine { margin-top: 18px; max-width: 46ch; font: 400 13px/1.55 var(--sans); color: var(--text-2); }
.form-fine a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fld input[aria-invalid="true"], .fld select[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--burgundy); box-shadow: 0 2px 0 var(--burgundy); }
.sent:empty { display: none; }
.sent.err { max-width: 46ch; border-width: 2px; box-shadow: none; -webkit-mask-image: none; mask-image: none; transform: none; text-transform: none; letter-spacing: .01em; font-weight: 600; font-size: 14px; padding: 12px 16px; animation: none; }
.sent {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 16px 9px;
  border: 3px solid var(--burgundy);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--burgundy);
  color: var(--burgundy);
  font: 700 13px/1.35 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  -webkit-mask-image: var(--stampmask);
  mask-image: var(--stampmask);
  transform: rotate(-2.4deg);
  animation: stamp .42s cubic-bezier(.3, .1, .25, 1) both;
  --rot: -2.4deg;
}

/* ------------------------------------------------------------------ footer */
.ftr {
  position: relative;
  margin-top: 46px;
  padding: 92px 0 30px;
  background: var(--leather), var(--ink);
  color: var(--beige-bright);
}
.ftr::before {
  /* the back cover's tab */
  content: ''; position: absolute; bottom: 100%; left: var(--gut);
  width: min(300px, 50vw); height: 36px;
  background: var(--ink);
  clip-path: polygon(0 100%, 20px 0, calc(100% - 20px) 0, 100% 100%);
}
.ftr-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 64px);
}
.ftr-plate {
  display: inline-block;
  padding: 16px 20px 15px;
  background: var(--grain), var(--cream);
  box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 5px rgba(110, 13, 37, .45);
  line-height: 0;
}
.ftr-plate img { width: auto; height: 34px; }
.ftr-blurb { margin-top: 24px; max-width: 360px; font: 300 15px/1.65 var(--sans); color: rgba(239, 233, 220, .82); }
.ftr-h {
  margin-bottom: 14px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--beige);
}
.ftr-col li { font: 300 15px/1.5 var(--sans); color: rgba(239, 233, 220, .86); }
.ftr-col a { display: inline-block; padding: 6px 0; text-decoration: none; color: var(--cream); }
.ftr-col a:hover { text-decoration: underline; text-decoration-color: var(--beige); text-underline-offset: 4px; }
.ftr-col li:not(:has(a)) { padding: 6px 0; }
.ftr-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 30px;
  margin-top: 70px; padding-top: 22px;
  border-top: 1px solid rgba(226, 205, 180, .22);
  font: 400 13px/1.4 var(--sans);
  color: rgba(239, 233, 220, .72);
}
.vl-credit {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  text-decoration: none;
  color: var(--cream);
  font: 400 12px/1 var(--sans);
  opacity: .8;
  transition: opacity .2s ease;
}
.vl-credit:hover, .vl-credit:focus-visible { opacity: 1; }
.vl-credit img { display: block; width: auto; height: 11px; }

/* ================================================================ TABLET */
@media (max-width: 1100px) {
  .hdr-tel-k { display: none; }
  .hdr-nav { gap: 16px; }
  .ws-body { grid-template-columns: minmax(0, 1fr); }
  .ws-margin { border-left: 0; border-top: 1px solid rgba(110, 13, 37, .4); padding: 20px 0 0; }
  .ready-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 70px; }
  .ready-head .body { max-width: 560px; }
}
@media (max-width: 960px) and (min-width: 761px) {
  .hdr-tel { display: none; }
}

/* ================================================================== PHONE */
@media (max-width: 760px) {
  :root { --hh: 64px; }
  body { font-size: 16px; }
  .hdr { --hx: 8px; }
  .hdr::before { top: 8px; bottom: 8px; }
  .hdr-paper { clip-path: inset(calc(var(--hc) * 8px) calc(var(--hc) * var(--hx)) calc(var(--hc) * 8px) calc(var(--hc) * var(--hx))); }
  .hdr-row { padding: 0 calc(var(--hx) + 12px); gap: 12px; }
  .hdr-logo img { height: 30px; }
  .hdr-nav, .hdr-tel, .hdr-quote { display: none; }
  .flag.flag-menu { display: inline-flex; margin-left: auto; margin-right: -14px; --fh: 44px; }
  .flag-menu .flag-body { font-size: 14px; }

  .trail { height: 300vh; }
  .stage { --W: min(86vw, 58svh); --cap: 47%; --pt: calc(var(--hh) + 2px); }
  .doc { padding: 2.3em 11.4em 2em 2.2em; }
  .note { width: 7.4em; font-size: 1.34em; left: calc(100% + .8em); }
  .d-esw .note { left: calc(100% + 1.7em); width: 7.2em; }
  .kicker { top: calc(var(--hh) + 16px); font-size: 10px; padding: 8px 11px 7px; }
  .opener { top: calc(var(--hh) + 62px); left: var(--gut); right: var(--gut); width: auto; transform: none; }
  .opener-h { font-size: clamp(34px, 9.6vw, 44px); }
  .opener-cue { margin-top: 18px; }
  .caps { left: var(--gut); right: var(--gut); width: auto; bottom: 22px; height: 64px; }
  .cap-t { font-size: 19px; }
  .trail-tabs { display: none; }
  .finale { padding: 0 calc(var(--mat) + 14px) calc(var(--mat) + 14px); align-items: flex-start; padding-top: 18px; }
  .fin-mat { grid-template-columns: minmax(0, 1fr); gap: 24px; } /* clears the loop's lower stroke */
  .fin-word { font-size: clamp(56px, 17.5vw, 82px); }
  .fin-line { font-size: 22px; }
  .fin-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }
  .fin-right .actions { margin-top: 14px; gap: 10px 20px; }

  .sec { padding: 92px 0; }
  .h2 { font-size: clamp(40px, 11.4vw, 52px); }
  .h2-alt { font-size: clamp(29px, 8vw, 36px); }
  .body { font-size: 16px; }

  .glance { padding-top: 86px; }
  .docket { padding: 26px 18px 18px; }
  .docket-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docket-fields > div { padding: 14px 14px 16px; border-left: 0; }
  .docket-fields > div:nth-child(2n) { border-left: 1px solid rgba(22, 22, 22, .2); }
  .docket-fields > div:nth-child(n + 3) { border-top: 1px solid rgba(22, 22, 22, .2); }
  .docket-fields > div:first-child { padding-left: 14px; }
  .docket-fields > div:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
  .docket-fields dd { font-size: 40px; }

  .guided-grid, .personal-grid, .covered-grid, .process-grid, .enq-grid { grid-template-columns: minmax(0, 1fr); }
  .checks li { padding-left: 50px; font-size: 16px; }
  .g-print { margin: 10px 8px 0; }
  .corner { width: 34px; height: 34px; }

  .pocket { max-width: 360px; padding-bottom: 88px; order: 2; }
  .slit { width: 82px; height: 82px; }
  .slit.s2 { bottom: 88px; }

  .dividers { grid-template-columns: minmax(0, 1fr); margin-top: 72px; gap: 78px; }
  .divider { padding: 42px 22px 38px 58px; min-height: 0; }
  .divider::before {
    -webkit-mask-image: radial-gradient(circle at 26px 30%, transparent 7.5px, #000 8.2px), radial-gradient(circle at 26px 70%, transparent 7.5px, #000 8.2px);
    mask-image: radial-gradient(circle at 26px 30%, transparent 7.5px, #000 8.2px), radial-gradient(circle at 26px 70%, transparent 7.5px, #000 8.2px);
  }
  .d1 { --tx: 58px; }
  .d2 { --tx: 34%; transform: rotate(.8deg); }
  .d3 { --tx: 52%; transform: rotate(-.6deg); }
  .divider-tab { padding: 12px 20px 9px; font-size: 12px; }
  .divider-body { font-size: 16.5px; }
  .div-k { gap: 10px; }
  .div-index p { padding-left: 0; font-size: 15.5px; }

  .covered { padding-bottom: 150px; }
  .covered-head { position: static; }
  .toc-item a { gap: 10px; padding-top: 20px; }
  .toc-no { width: 24px; }
  .toc-item a { --tf: 23px; --rf: 15px; }
  .toc-b { margin-left: 34px; font-size: 17.5px; }
  .toc-ink { clip-path: none; }

  .process-head { position: static; margin-bottom: 40px; }
  .process { --pile-top: max(84px, 50vh - 250px); }
  .pile-sheet { top: calc(var(--pile-top) + var(--k) * 16px); min-height: 0; margin-bottom: 34vh; padding: 28px 22px 30px; }
  .pile-quote { margin-top: 22px; }
  .pq-row span { width: 11em; font-size: 10px; letter-spacing: .13em; white-space: nowrap; }
  .pq-row b { font-size: 20px; }
  .pile-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; margin-top: 24px; font-size: 10.5px; letter-spacing: .12em; }
  .pile-checks li { gap: 10px; }
  .pc-box { width: 18px; height: 18px; }
  .pile-stamp { position: relative; right: auto; bottom: auto; display: inline-flex; margin: 26px 0 4px 6px; font-size: 30px; }
  .pile-sheet::before { right: 22px; top: 34px; }
  .pile-no { font-size: 48px; }
  .pile-p { font-size: 16.5px; }

  .prep-head { margin-bottom: 92px; }
  .ws { grid-template-columns: minmax(0, 1fr); scroll-margin-top: 140px; }
  .ws-tabs {
    grid-column: 1; grid-row: 1;
    flex-direction: row; gap: 4px;
    padding: 0 6px 0 12px;
    margin: 0 0 -8px;
    position: relative; z-index: 2;
    /* tabs cut to their labels, like a real index: "Repayments" is one long word */
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .8fr);
    align-items: end;
  }
  .ws-sheet { grid-row: 2; padding: 34px 18px 0 46px; background:
    linear-gradient(90deg, transparent 31px, rgba(110, 13, 37, .5) 31px 32px, transparent 32px 35px, rgba(110, 13, 37, .5) 35px 36px, transparent 36px),
    var(--grain), var(--paper); }
  .ws-holes { left: 6px; width: 18px; background-size: 18px 180px; }
  .ws-tab {
    flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
    min-height: 66px;
    padding: 10px 8px 14px;
    white-space: normal;
    font-size: 11.5px; line-height: 1.15;
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    background:
      linear-gradient(0deg, rgba(22, 22, 22, .18), rgba(22, 22, 22, 0) 14px),
      var(--grain), var(--beige-line);
    transform: translateY(6px);
  }
  .ws-tab:hover { transform: translateY(3px); }
  .ws-tab[aria-selected="true"] { transform: translateY(0); background: var(--grain), var(--paper); }
  .tab-i { font-size: 15px; }
  .ws-s { --rl: 46px; font-size: 20px; }
  .ws-s2 { --rl: 40px; font-size: 16.5px; }
  .fig { font-size: 50px; }
  #calc-sooner .fig { font-size: 34px; }
  .ws-res { font-size: 21px; margin-top: 30px; }
  .res-fig { padding: 0 .8em; } /* at 1em the longest figure, "3 years 11 months", would outrun the column */
  .ledger td.tk-cell { width: auto; padding-left: 8px; }
  .ledger th, .ledger td { padding-right: 8px; font-size: 13px; }
  .ledger th { font-size: 10px; letter-spacing: .08em; }
  .ledger .here { display: block; margin: 4px 0 0; font-size: 14px; }
  .ws-cta { margin-top: 34px; }
  .sofar { margin: 0 -18px 0 -46px; padding: 22px 18px 24px 46px; }
  .sofar-list { grid-template-columns: minmax(0, 1fr); }

  .ready { height: auto; }
  .ready-pin { position: relative; height: auto; overflow: visible; padding: 150px 0 120px; }
  .ready-grid { padding-top: 0; }
  .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .stamp { max-width: 136px; }

  .slips { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .slip:nth-child(2), .slip:nth-child(3) { margin-top: 0; }
  .xi-arrow { display: none; }

  .fld-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .enq-form { padding: 26px 20px 28px; transform: none; }
  .sign-t { font-size: 16px; }
  .sign-flag { --fh: 38px; margin-right: -8px; }
  .sign-flag .flag-body { font-size: 11.5px; }

  .ftr { padding-top: 76px; }
  .ftr-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; }
  .ftr-base { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .tel-link { font-size: 15px; }
  .flag-body { font-size: 14px; }
}

/* ========================================================= REDUCED MOTION */
/* Nothing scrubs or pins. Every annotation is drawn, every stamp is down. */
:root:is(.rm, :not(.js)), :root:is(.rm, :not(.js)) body { scroll-behavior: auto; }
:root:is(.rm, :not(.js)) .ground { display: none; }
:root:is(.rm, :not(.js)) [data-ground="paper"] { background: var(--paper); }
:root:is(.rm, :not(.js)) [data-ground="manila"] { background: var(--manila); }
:root:is(.rm, :not(.js)) [data-ground="ink"] { background: radial-gradient(130% 100% at 50% 38%, var(--deep) 0%, var(--ink) 72%); }
:root:is(.rm, :not(.js)) .gt, :root:is(.rm, :not(.js)) .gt-inv { opacity: 1; }
:root:is(.rm, :not(.js)) .hdr { --hc: 0 !important; }

:root:is(.rm, :not(.js)) .trail { height: auto; }
:root:is(.rm, :not(.js)) .stage {
  position: relative; height: auto; overflow: hidden;
  perspective: none;
  display: grid;
  grid-template-areas: "hero" "open" "fan";
  padding-bottom: 90px;
}
:root:is(.rm, :not(.js)) .scene { display: contents; }
:root:is(.rm, :not(.js)) .print, :root:is(.rm, :not(.js)) .finale { grid-area: hero; }
:root:is(.rm, :not(.js)) .print { position: relative; inset: auto; height: 100vh; height: 100svh; min-height: 560px; transform: none; box-shadow: none; }
:root:is(.rm, :not(.js)) .finale { position: relative; align-self: end; height: var(--cap); visibility: visible; pointer-events: auto; }
:root:is(.rm, :not(.js)) .stage { --fin: 1; --u: 0; }
:root:is(.rm, :not(.js)) .hud { grid-area: open; position: static; pointer-events: auto; }
:root:is(.rm, :not(.js)) .opener { position: relative; inset: auto; width: auto; transform: none; opacity: 1; padding: 100px var(--gut) 40px; max-width: 900px; }
:root:is(.rm, :not(.js)) .opener-cue, :root:is(.rm, :not(.js)) .caps, :root:is(.rm, :not(.js)) .trail-tabs { display: none; }
:root:is(.rm, :not(.js)) .sheet {
  --W: min(25vw, 330px);
  --d: 1;
  grid-area: fan;
  position: relative; left: auto; top: auto;
  margin: 0;
  align-self: start; justify-self: start;
  opacity: 1;
  z-index: calc(10 - var(--i));
  transform:
    translateX(calc(var(--gut) + var(--i) * (100vw - 2 * var(--gut) - var(--W) - 16px) / 5))
    translateY(calc(var(--jy) * 1px))
    rotate(calc(var(--jr) * 1deg));
}
:root:is(.rm, :not(.js)) .sheet::after { display: none; }
:root:is(.rm, :not(.js)) .sheet:nth-of-type(odd) { --jy: 18; }
:root:is(.rm, :not(.js)) .sheet:nth-of-type(even) { --jy: 0; }
:root:is(.rm, :not(.js)) .sheet:nth-of-type(odd) { --jr: -1.2; }
:root:is(.rm, :not(.js)) .sheet:nth-of-type(even) { --jr: 1.2; }
:root:is(.rm, :not(.js)) .sheet:nth-of-type(3) { --jr: -.4; }
:root:is(.rm, :not(.js)) .sheet:nth-of-type(6) { --jr: 2; }
:root:is(.rm, :not(.js)) .ink-host { --d: 1; }
:root:is(.rm, :not(.js)) .sheet.is-gone { visibility: visible; }
:root:is(.rm, :not(.js)) .cue-ink { animation: none; }
:root:is(.rm, :not(.js)) .toc-ink { clip-path: none; transition: none; }
:root:is(.rm, :not(.js)) .toc-item { --d: 1; }
:root:is(.rm, :not(.js)) .ink-host[data-ink-mode="hover"] .ink-layer path { transition: none; }
:root:is(.rm, :not(.js)) .pile-sheet { position: relative; top: auto; margin-bottom: -60px; transform: rotate(var(--rot)); }
:root:is(.rm, :not(.js)) .pile-sheet:not(:last-child) { padding-bottom: 104px; }
:root:is(.rm, :not(.js)) .pile-sheet:last-child { margin-bottom: 0; }
:root:is(.rm, :not(.js)) .pile-stamp { transition: none; }
:root:is(.rm, :not(.js)) .pile-sheet::after { display: none; }
:root:is(.rm, :not(.js)) .pile { padding-bottom: 0; }
:root:is(.rm, :not(.js)) .process-head, :root:is(.rm, :not(.js)) .covered-head { position: static; }
:root:is(.rm, :not(.js)) .ready { height: auto; }
:root:is(.rm, :not(.js)) .ready-pin { position: relative; height: auto; overflow: visible; padding: 160px 0 150px; }
:root:is(.rm, :not(.js)) .stamp { opacity: .9; transform: rotate(var(--rot)); animation: none; transition: none; }
:root:is(.rm, :not(.js)) .res-ink path, :root:is(.rm, :not(.js)) .ledger .tk-svg path { transition: none; }
:root:is(.rm, :not(.js)) .file-index { transition: none; }
:root:is(.rm, :not(.js)) .sent { animation: none; }
:root:is(.rm, :not(.js)) .tog-not::after { transition: none; }
:root:is(.rm, :not(.js)) .cap, :root:is(.rm, :not(.js)) .flag-body, :root:is(.rm, :not(.js)) .ws-tab, :root:is(.rm, :not(.js)) .hdr-nav a::after, :root:is(.rm, :not(.js)) .skip { transition: none; }

@media (max-width: 760px) {
  :root:is(.rm, :not(.js)) .sheet {
    --W: min(64vw, 250px);
    z-index: var(--i);
    transform:
      translateX(calc(var(--gut) + var(--i) * (100vw - 2 * var(--gut) - var(--W)) / 5))
      translateY(calc(var(--i) * 36px))
      rotate(calc(var(--jr) * 1deg));
  }
  :root:is(.rm, :not(.js)) .stage { padding-bottom: 260px; }
  :root:is(.rm, :not(.js)) .opener { padding-top: 70px; }
}

/* Phone tap targets: every control is at least 44px tall. Hit areas grow; negative margins keep the drawn layout. */
@media (max-width: 760px) {
  .blank input, .blank select { height: 44px; min-width: 44px; margin-block: calc((1.3em - 44px) / 2); }
  .hdr-logo { padding-block: 7px; margin-block: -7px; }
  .tel-link { padding-top: 18px; margin-top: -8px; }
  .ftr-col a { padding-block: 11px; margin-block: -5px; min-width: 44px; }
}


/* ----------------------------------------------- 21 Oct 2026 revisions */
:root { --script: 'Mrs Saint Delafield', 'Snell Roundhand', cursive; }

/* three audience dividers: tighter spine, narrower measure */
.dividers .divider { padding-left: clamp(54px, 4.6vw, 68px); padding-right: clamp(20px, 2.2vw, 34px); }
.dividers .d1 { --tx: clamp(54px, 4.6vw, 68px); }
@media (max-width: 1100px) and (min-width: 721px) {
  .dividers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .d3 { grid-column: 1 / -1; width: 56%; justify-self: center; margin-top: 80px; transform: rotate(-.6deg); }
  .d2 { --tx: 46%; }
}

/* the founder's letter */
.letter { margin-top: 26px; max-width: 560px; }
.letter-salute { font: italic 500 clamp(24px, 2.2vw, 30px)/1.2 var(--serif); color: var(--burgundy); margin-bottom: 14px; }
.letter .body + .body { margin-top: 14px; }
.letter-by { margin-top: 38px; display: flex; flex-direction: column; align-items: flex-start; }
.sig {
  display: inline-block;
  padding: 0 .3em .12em 0;
  font: 400 clamp(60px, 6.4vw, 88px)/1 var(--script);
  color: var(--burgundy);
  transform: rotate(-3deg);
  transform-origin: 0 100%;
  clip-path: inset(-20% 100% -30% -5%);
  transition: clip-path 1.8s cubic-bezier(.55, .05, .25, 1);
  white-space: nowrap;
}
.sig.signed { clip-path: inset(-20% -5% -30% -5%); }
.letter-role { margin-top: -6px; font: 600 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
:root:is(.rm, :not(.js)) .sig { clip-path: none; transition: none; }

/* cursive tagline */
.pile-hand, .ftr-hand { font-family: var(--script); font-weight: 400; line-height: 1; }
.pile-hand { margin-top: 34px; font-size: clamp(40px, 4vw, 54px); color: var(--burgundy); transform: rotate(-2.5deg); transform-origin: 0 50%; }
.ftr-hand { margin-top: 14px; font-size: 38px; color: var(--paper); opacity: .92; transform: rotate(-2deg); transform-origin: 0 50%; }
.ftr-base a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ftr-base .vl-credit { text-decoration: none; }
@media (max-width: 720px) {
  .pile-hand { font-size: 38px; margin-top: 24px; }
}

/* ----------------------------------------------- 21 Oct 2026: pre-launch audit fixes */
/* short phones: the finale and its Get a quote button fit above the fold */
@media (max-width: 760px) and (max-height: 700px) {
  .stage { --cap: max(47%, 348px); }
  .fin-word { font-size: clamp(48px, 15.5vw, 66px); }
  .fin-line { font-size: 20px; }
  .fin-sub { margin-top: 6px; font-size: 14px; line-height: 1.45; }
  .fin-right .actions { margin-top: 10px; }
}
/* focus you can see: the tab clip-path hid the ring, and beige on the finale was 1.1:1 */
.trail-tabs button:focus-visible { outline: 2px solid var(--burgundy); outline-offset: -5px; }
.finale :focus-visible { outline-color: var(--burgundy); }
:focus { scroll-margin-top: 96px; }
.fld label { margin-bottom: 6px; }
/* a form error sits under the field it is about */
.fld > .sent { align-self: flex-start; max-width: 100%; margin-top: 10px; }
/* tablet: "Your numbers so far" and the form rows stack before they overrun */
@media (max-width: 1180px) { .sofar-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .fld-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* reduced motion: card 4's stamp clears the sheet edge */
@media (min-width: 761px) { :root:is(.rm, :not(.js)) .pile-sheet:nth-child(3) { margin-bottom: 20px; padding-bottom: 44px; } }
/* 320 to 380px: menu sub-labels and the stamp duty picker give way instead of clipping */
@media (max-width: 380px) {
  .fi-ref { flex: 0 1 auto; min-width: 0; text-align: right; }
  .dots { min-width: 0; }
  .blank { max-width: 100%; }
  .blank select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
}
/* the form's Send button stays focusable while it posts */
.sign-btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
/* inactive calculator tab numerals reach 4.5:1 */
.ws-tab:not([aria-selected="true"]) .tab-i { color: #4a0816; }
/* a link straight to a calculator (/#calc-duty) lands below the header */
.ws-panel { scroll-margin-top: 92px; }
@media (max-width: 760px) {
  .ws-panel { scroll-margin-top: 140px; }
}
/* the stamp duty ledger fits the sheet on phones and iPads held upright */
@media (max-width: 860px) {
  .ledger { table-layout: auto; }
  .ledger td, .ledger th { padding-right: 4px; }
  .ledger td:first-child { white-space: normal; }
  .ledger td.tk-cell { width: 1%; padding-left: 0; }
  .ledger .tk-svg { width: 16px; }
  .ledger .here { display: block; margin: 2px 0 0; font-size: 11px; }
  .ledger th:nth-child(2), .ledger th:nth-child(3) { letter-spacing: .02em; }
}
@media (max-width: 380px) {
  .ledger th, .ledger td { font-size: 11.5px; }
  .ledger th { font-size: 9px; }
}
/* up to 400px: the repay-sooner headline shrinks so "10 years 10 months" and its loop stay on the sheet */
@media (max-width: 400px) {
  #calc-sooner .fig { font-size: clamp(22px, calc(13.5vw - 19.5px), 34px); }
  #calc-sooner .res-fig { padding: 0 .5em; }
}
/* Safari only: the Send flag's drop shadow clipped the corner of the rotated enquiry paper */
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  .sign-flag { filter: none; }
  .sign-flag .flag-body { box-shadow: inset 0 -2px 0 rgba(46, 5, 13, .38); }
}

/* ------------------------------------------- the line: papers clipped to a string */
/* At a glance and the reviews hang from one length of twine that runs off both edges
   of the page. Each paper is held by the steel clip and sways a little on it. */
.line { --sy: 30px; --lgap: clamp(26px, 3vw, 46px); }
.line-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.line-tab { position: relative; left: auto; bottom: auto; display: inline-block; }
.line-nav { display: flex; gap: 6px; flex: none; padding-bottom: 4px; }
:root:not(.js) .line-nav { display: none; }
.line-nav .flag { --fh: 40px; cursor: pointer; }
.line-nav .flag-body { font-size: 13px; }
.line-nav .flag:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.line-nav .flag[aria-disabled="true"] { cursor: default; filter: none; }
.line-nav .flag[aria-disabled="true"] .flag-body { transform: none; background: rgba(110, 13, 37, .26); }
.line-track {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(var(--gut), (100% - var(--maxw)) / 2);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.line-track::-webkit-scrollbar { display: none; }
.line-track:focus-visible { outline: 2px solid var(--burgundy); outline-offset: -4px; }
.line-list {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--lgap);
  width: max-content;
  margin: 0; list-style: none;
  padding: 0 max(var(--gut), (100% - var(--maxw)) / 2) 54px;
}
/* the twine: two-ply, laid at a slant, with its shadow on the paper below */
.line-list::before {
  content: ''; position: absolute; left: 0; right: 0; top: var(--sy); height: 3px; margin-top: -1.5px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(118deg, #9c7f62 0 2px, #cfb698 2px 4.5px, #86694e 4.5px 5.5px);
  box-shadow: 0 4px 3px -2px rgba(22, 22, 22, .28);
}
.line-item {
  --sw: .9deg;
  position: relative; isolation: isolate; flex: none;
  margin-top: calc(var(--sy) + 12px);
  scroll-snap-align: start;
  transform: rotate(var(--rot));
  transform-origin: var(--cx) -12px;
  animation: sway var(--dur, 6s) ease-in-out var(--del, 0s) infinite alternate;
  filter: drop-shadow(0 1px 1px rgba(22, 22, 22, .14)) drop-shadow(0 14px 16px rgba(22, 22, 22, .15));
}
@keyframes sway {
  from { transform: rotate(calc(var(--rot) - var(--sw))); }
  to { transform: rotate(calc(var(--rot) + var(--sw))); }
}
.line-track:hover .line-item, .line-track:focus-within .line-item { animation-play-state: paused; }
:root:is(.rm, :not(.js)) .line-item { animation: none; }
/* the clip grips the twine and the top of the paper */
.line .clip {
  position: absolute; top: -32px; left: var(--cx); z-index: 3;
  width: 22px; height: 62px; margin-left: -11px;
  pointer-events: none;
}
.line .clip::before { content: ''; position: absolute; inset: 0; border: 2.5px solid #8d8a84; border-radius: 11px; }
.line .clip::after { content: ''; position: absolute; top: 10px; left: 5px; width: 12px; height: 40px; border: 2.5px solid #8d8a84; border-bottom: 0; border-radius: 6px 6px 0 0; }
.line .slip { transform: none; display: block; margin-top: 0; }
.line .slip-top { position: relative; z-index: 1; }

/* the paper itself, torn along the top where it came off the pad */
.line .slip { position: relative; isolation: isolate; }
/* ---- reviews */
.trusted.line .trusted-head { max-width: 760px; }
.line-item.rv { width: clamp(300px, 29vw, 372px); }
.line .slip { padding: 32px clamp(22px, 2.2vw, 30px) 28px; }
.line .slip-q p { font-size: 15px; line-height: 1.72; }
.line .slip-more {
  display: flex; flex-direction: column;
  min-height: 360px;
  text-decoration: none; color: var(--near);
}
.slip-more::before { background: var(--grain), var(--manila) !important; }
.more-h { margin-top: 6px; font: italic 600 clamp(30px, 2.6vw, 38px)/1.08 var(--serif); color: var(--burgundy); }
.more-s { margin-top: 16px; font: 400 15px/1.6 var(--sans); color: var(--near); }
.slip-more .flag { margin-top: auto; align-self: flex-start; padding-top: 26px; }
.slip-more:hover .flag-body { transform: translateX(4px); }
.slip-more:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }

/* ---- the hero kicker, made easier to read over the photo */
.kicker {
  padding: 11px 17px 10px;
  font-size: 13px;
  letter-spacing: .17em;
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4.5px var(--burgundy), 3px 6px 16px rgba(22, 22, 22, .5), 0 1px 2px rgba(22, 22, 22, .35);
}

/* ---- a state picker in the house style (mouse and trackpad; phones keep their own) */
.lst {
  position: fixed; z-index: 60;
  min-width: 200px; max-height: min(400px, 70vh);
  overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 8px 0; list-style: none;
  background: var(--grain), var(--paper);
  box-shadow: inset 0 0 0 1px rgba(110, 13, 37, .45), 0 2px 3px rgba(22, 22, 22, .12), 0 18px 34px -10px rgba(22, 22, 22, .42);
  transform-origin: 50% 0;
  animation: lst-in .16s cubic-bezier(.2, .7, .2, 1);
}
.lst.up { transform-origin: 50% 100%; }
.lst:focus { outline: none; } /* the marked option carries the focus */
@keyframes lst-in { from { opacity: 0; transform: translateY(-4px) scaleY(.97); } }
:root.rm .lst { animation: none; }
.lst-o {
  position: relative;
  padding: 9px 40px 9px 18px;
  font: italic 600 18px/1.3 var(--serif);
  color: var(--burgundy);
  cursor: pointer;
  white-space: nowrap;
}
.lst-o.on { background: rgba(203, 179, 156, .55); }
.lst-o.on::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--burgundy); }
.lst-o[aria-selected="true"]::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 11px; height: 6px; margin-top: -5px;
  border-left: 2px solid var(--burgundy); border-bottom: 2px solid var(--burgundy);
  transform: rotate(-48deg);
}
.lst-o.ph { color: rgba(22, 22, 22, .5); }
.lst-o + .lst-o { border-top: 1px dashed rgba(22, 22, 22, .14); }

@media (max-width: 760px) {
  .line { --sy: 26px; }
  .line-head { flex-wrap: wrap; }
  .line-nav .flag { --fh: 36px; }
  .line-nav .flag-body { font-size: 12px; }
  .trusted.line .line-head { align-items: flex-end; }
  .line-item.rv { width: min(82vw, 340px); }
  .slip-more { min-height: 320px; }
  .kicker { font-size: 11.5px; padding: 9px 13px 8px; }
}
.blank.is-open { border-bottom-color: var(--burgundy); background: rgba(110, 13, 37, .07); }
.fld.is-open select { border-bottom-color: var(--burgundy); background-color: rgba(110, 13, 37, .06); }
/* a 320px phone: the cents on a big stamp duty figure stay on the sheet */
@media (max-width: 340px) { #calc-duty .fig { font-size: 40px; } }

/* ---- with JS the line turns: one paper faces you, the rest angle away round a turntable */
.line.ring .line-track {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.line.ring .line-list { position: absolute; inset: 0; display: block; width: auto; padding: 0; }
.line.ring .line-list::before { display: none; }
.line.ring .line-item {
  position: absolute; left: 50%; top: calc(var(--sy) + 12px);
  margin: 0;
  transform-origin: 50% 0;
  animation: none;
}
.line.ring-ready .line-item { transition: transform .85s cubic-bezier(.22, .72, .2, 1), opacity .5s ease; }
/* the shadows sit on the paper, not on the turned item */
.line.ring .line-item { filter: none; }
.line.ring .line-item > .slip { filter: drop-shadow(0 1px 1px rgba(22, 22, 22, .14)) drop-shadow(0 14px 16px rgba(22, 22, 22, .15)); }
.line.ring .line-item[data-d="0"] > .slip { filter: drop-shadow(0 1px 1px rgba(22, 22, 22, .16)) drop-shadow(0 26px 30px rgba(22, 22, 22, .24)); }
.line.ring .line-item[data-d="1"], .line.ring .line-item[data-d="2"] { cursor: pointer; }
.line.ring .line-item[data-d="1"] > .slip { filter: brightness(.97) drop-shadow(0 12px 16px rgba(22, 22, 22, .16)); }
.line.ring .line-item[data-d="2"] > .slip { filter: brightness(.92) saturate(.85) drop-shadow(0 10px 12px rgba(22, 22, 22, .12)); }
.line.ring .line-item[data-d="x"] { opacity: 0; pointer-events: none; }
/* the sway moves to the paper and its clip, about the point where the clip grips the twine */
.line.ring .line-item > .clip,
.line.ring .line-item > .slip {
  transform: rotate(var(--rot));
  animation: sway var(--dur, 6s) ease-in-out var(--del, 0s) infinite alternate;
}
.line.ring .line-item > .slip { transform-origin: var(--cx) -12px; }
.line.ring .line-item > .clip { transform-origin: 11px 20px; }
.line.ring .line-track:hover .line-item > *, .line.ring .line-track:focus-within .line-item > * { animation-play-state: paused; }
:root.rm .line.ring .line-item > * { animation: none; }
:root.rm .line.ring-ready .line-item { transition: none; }
.line .knot { position: absolute; left: var(--cx); top: -12px; width: 0; height: 0; pointer-events: none; }
/* the twine, drawn through every clip */
.line-twine { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 15; overflow: visible; pointer-events: none; }
.line-twine path { fill: none; stroke-linecap: round; }
.tw-shade { stroke: rgba(22, 22, 22, .2); stroke-width: 3px; transform: translateY(4px); }
.tw-ply { stroke: #a58668; stroke-width: 3px; }
.tw-twist { stroke: #ddc6a8; stroke-width: 1.4px; stroke-dasharray: 2.4 3.2; }