/* Combined: the home page below the first screen (site.html). Needs site.css and page.css.
   On a laptop the sections are laid on twelve columns: content starts at the third, under each
   section's title, and the first two hold only the small labels. Rows are divided by hairlines, prices
   are set in the display face, and the founder is introduced on a card of the business card's
   proportions. Nothing that has to be read is in italics.

   The pictures are surfaces the page lives on, after the payphone's wall (Max, 2 November):
   - the sky: the line is written on the sky beside a lemon, which holds the screen while the services slide
     up over it;
   - walls: the services, the steps and the founder are each written on the wall in their picture. The
     section is painted the wall's colours, measured from the photograph, the picture fades into the paint,
     and a shadow or a second colour on the wall carries on across the page;
   - doors: each package is a card pinned to its own door.
   Words sit only where a picture is light enough for ink, or dark enough for bone, at AA, and cards carry
   their own ground. */

/* Once the first screen has gone the bar covers the top of the screen, so whatever is scrolled to, a section
   from the bar or a field taking focus, stops just under it. */
html { scroll-padding-top: 50px; }
@media (min-width: 760px) { html { scroll-padding-top: 61px; } }
.home .sec__head { margin-bottom: clamp(36px, 5vw, 80px); }

.home .price { margin-top: 12px; font: 400 clamp(19px, 1.5vw, 22px)/1.3 var(--serif); font-stretch: 88%; }
/* No word left alone on a last line, where the browser can help. */
.home main p, .home .price { text-wrap: pretty; }

/* On a laptop the space between one section's last line and the next heading is kept to about one rhythm
   (about 200px at 1374 wide): the sheet's generous 176px top is for single sections shown alone. */
@media (min-width: 1000px) {
  .home .sec { padding-top: clamp(72px, 8vw, 120px); }
}

@media (min-width: 1000px) {
  .home .sec,
  .home .sec__head,
  .faq__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .home .sec { align-content: start; }
  .home .sec > * { grid-column: 1 / -1; }
  .home .sec__head > .sec__title { grid-column: 3 / span 10; }
}

/* ---------- Pictures ----------
   A frame clips its picture, which fills it about its focus (--focus, and --focus-s on a phone). The
   picture sits in a layer a little taller than the frame, which js/pictures.js moves a few per cent as
   the page scrolls (--drift), so it seems to lie just behind the page; a pinned picture holds still. */
.home .pic { position: relative; overflow: hidden; background: var(--sand); }
.pic__in { position: absolute; inset: -6% 0; display: block; transform: translate3d(0, calc(var(--drift, 0) * 4.8%), 0); }
.pic__in img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 999px) { .pic__in img { object-position: var(--focus-s, var(--focus, 50% 50%)); } }

/* ---------- The line, on the sky ----------
   The lemon from the first screen, still on its branch, holds the screen with the line written on the sky
   beside it, and the services slide up over both. On a phone the line is on the sky under the lemon. */
.curtain { position: relative; }
.sky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* No ground colour while the sky loads: iPhone Safari tints its own bars from what's pinned at the screen's edges. */
.home .sky__pic { position: absolute; inset: 0; background: none; }
.sky__pic .pic__in { inset: 0; transform: none; }
.sky__line { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: 9vh; bottom: 9svh; max-width: 24em; margin: 0;
  font-size: calc(clamp(21px, 2.1vw, 31px) * var(--text-scale)); line-height: 1.4; }
@media (min-width: 1000px) { .sky__line { left: 57%; right: auto; top: 50%; bottom: auto; width: 35%; translate: 0 -50%; } }
.curtain__over { z-index: 1; box-shadow: 0 -28px 64px -40px rgba(28, 26, 23, .6); }

/* ---------- Walls: a section written on the wall in its picture ----------
   On a phone the picture runs the full width at the top of the section and fades into the paint under it.
   On a laptop wide enough for words beside it, the picture holds the screen on one side while the words go
   past on the other. It is then as tall as the screen, so where a shadow or a second colour crosses the
   wall, the paint carries it on in vh and vw at the height and angle it has in the photograph; vh rather
   than svh, since a laptop's screen doesn't change height as it scrolls. */
.home .sec.surface { display: flex; flex-direction: column; padding: 0; background: var(--paint, var(--bone)); }
.surface__back { order: -1; position: relative; }
.home .surface__pic { width: 100%; aspect-ratio: var(--ar-s, 3 / 2); max-height: 90vh; max-height: 90svh; background: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.surface__pic .pic__in { inset: 0; transform: none; }
.surface__pic img { object-position: var(--focus-s, 50% 50%); }
.surface__words { position: relative; z-index: 1; margin-top: -6vw; padding: 0 var(--gutter) clamp(48px, 10vw, 88px); }
.home .surface .sec__head { display: block; margin-bottom: clamp(28px, 6vw, 56px); }
@media (min-width: 1000px) and (min-aspect-ratio: 7 / 5) {
  .home .sec.surface { display: grid; grid-template-columns: minmax(0, 1fr); }
  .home .surface > * { grid-column: 1; grid-row: 1; }
  .surface__back { position: sticky; top: 0; height: 100vh; align-self: start; overflow: hidden; }
  .home .surface__pic { position: absolute; top: 0; bottom: 0; width: 52vw; max-height: none; aspect-ratio: auto; }
  .surface__pic img { object-position: var(--focus, 50% 50%); }
  .home .surface--left .surface__pic { left: 0; -webkit-mask-image: linear-gradient(to left, transparent, #000 26%); mask-image: linear-gradient(to left, transparent, #000 26%); }
  .home .surface--right .surface__pic { right: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 26%); mask-image: linear-gradient(to right, transparent, #000 26%); }
  .surface__words { margin: 0; padding: clamp(96px, 16vh, 150px) var(--gutter) clamp(80px, 14vh, 128px); }
  .surface--right .surface__words { padding-right: calc(52vw + 24px); }
}

/* What we look after, in bone on the red wall beside the ochre one with the shuttered window. On a laptop the
   photograph (6000 by 4000) is as tall as the screen, so a point x of its width across and y of its height
   down sits x × 150vh from the left and y × 100vh from the top. The red wall starts at x 0.603, 90.4vh across;
   on a squarer screen, where that is past 54vw, the photograph moves left by the difference (--shift), so the
   window stays whole and the red still shows. The edge of the shadow starts at y 0.995 on the photograph's
   left and climbs 0.59px for every pixel along, and the paint draws the seam and the shadow on to the far
   side. The words keep clear of the ochre, where bone would not read. On a phone the photograph stops short
   of the second window and the words follow in the shade. */
.surface--services { --paint: #6c2826; --line: rgba(242, 237, 228, .3); color: var(--bone); }
@media (min-width: 1000px) and (min-aspect-ratio: 7 / 5) {
  .surface--services { --shift: max(0px, calc(90.4vh - 54vw)); --seam: calc(90.4vh - var(--shift)); }
  .surface--services .surface__pic img { object-position: calc(0px - var(--shift)) 50%; }
  .surface--services .surface__back { background:
    linear-gradient(to right, #bba66d var(--seam), transparent var(--seam)), linear-gradient(to bottom, #a54c44, #ad5047 40%); }
  .surface--services .surface__back::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to right, #938152 var(--seam), transparent var(--seam)), linear-gradient(to bottom, #652626 50%, #742a28 97%);
    clip-path: polygon(0 calc(99.5vh - .59 * var(--shift)), 100% calc(99.5vh - .59 * (var(--shift) + 100vw)), 100% 100%, 0 100%); }
  .surface--services .surface__words { padding-left: max(56vw, calc(var(--seam) + 64px)); }
}

/* How it works, on the peach wall the one-way sign is fixed to, which points at the steps. On a laptop the steps
   are to its left, as the arrow points, and the tiled roof along the top fades out into the paint. On a phone the
   steps are below, so the photograph (6000 by 4000) is turned a quarter left, the arrow pointing down: turned, it
   is 133.3cqw wide with the roof and its shadow cut off the left (the top quarter of the photograph), and 200cqw
   tall, with the sign a little above the middle of the frame. */
.surface--how { --paint: #fec1a1; }
/* The last of the roof's shadow, at the left edge, fades into the paint. */
.home .surface--how .surface__pic { container-type: inline-size; aspect-ratio: 3 / 4;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%), linear-gradient(to bottom, #000 72%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%), linear-gradient(to bottom, #000 72%, transparent);
  mask-composite: intersect; }
.surface--how .surface__pic img { position: absolute; left: -66.7cqw; top: 10.3cqw; width: 200cqw; height: 133.3cqw; max-width: none;
  object-fit: fill; rotate: -90deg; }
@media (min-width: 1000px) and (min-aspect-ratio: 7 / 5) {
  .surface--how .steps { row-gap: 12vh; }
  .surface--how .surface__pic img { position: static; width: 100%; height: 100%; object-fit: cover; rotate: none; }
  .home .surface--how .surface__pic { -webkit-mask-image: linear-gradient(to right, transparent, #000 26%); mask-image: linear-gradient(to right, transparent, #000 26%); }
}

/* Who looks after you, on a white wall half in shade, with someone's shadow waving above the shade's edge: the
   title stands in the sun and the card is pinned in the shade. On a phone the title is on the white above the
   photograph and the card in the shade below it. On a laptop the photograph (2600 by 4624) is 52vw wide, so
   92.5vw tall, set 65.8% of the way down, and the edge, halfway down it, lands 65.8vh − 14.5vw from the top;
   the paint, the title and the card all take their places from it. */
.surface--who { --paint: #4e6870; --sun: #e7e5e3; --shade: #50707a; }
.surface--who .surface__words { display: contents; }
.home .surface--who .sec__head { order: -2; margin: 0; padding: clamp(48px, 11vw, 88px) var(--gutter) 8px; background: var(--sun); }
.surface--who .surface__back { background: linear-gradient(to bottom, var(--sun) 41%, var(--shade) 42.5%); }
.home .surface--who .surface__pic { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.surface--who .founder-wrap { max-width: 430px; margin: -34vw var(--gutter) clamp(72px, 14vw, 96px); }
@media (min-width: 1000px) and (min-aspect-ratio: 7 / 5) {
  .home .sec.surface--who { --edge: calc(65.8vh - 14.52vw); height: 100vh;
    background: linear-gradient(to bottom, var(--sun) calc(var(--edge) - 5px), var(--shade) calc(var(--edge) + 5px), #4d6871); }
  .surface--who .surface__words { display: block; padding: 0; }
  .surface--who .surface__back { background: none; }
  .home .surface--who .surface__pic { -webkit-mask-image: linear-gradient(to right, transparent, #000 26%); mask-image: linear-gradient(to right, transparent, #000 26%); }
  .home .surface--who .sec__head { position: absolute; left: var(--gutter); bottom: calc(100vh - var(--edge) + 12px); padding: 0; background: none; }
  .surface--who .sec__title { font-size: clamp(56px, 5.6vw, 88px); }
  /* The card on the shade, and who he is written on the wall beside it. */
  .surface--who .founder-wrap { position: absolute; left: var(--gutter); top: calc(var(--edge) + 36px); display: flex; align-items: flex-end; gap: 40px; max-width: none; margin: 0; }
  .surface--who .founder { width: min(430px, 32vw); flex: none; }
  .surface--who .founder__bio { width: min(360px, 24vw); margin: 0; }
}

/* ---------- What we look after ---------- */
.service { display: grid; gap: 12px; padding: clamp(22px, 2.4vw, 34px) 0 clamp(26px, 3vw, 42px); }
.service__name { font: 300 clamp(28px, 2.6vw, 40px)/1.05 var(--serif); font-stretch: 86%; letter-spacing: -.005em; }
.service__name a { text-decoration: none; }
.service__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.service__body > p:first-child { font-size: calc(17px * var(--text-scale)); line-height: 1.55; max-width: 34rem; }

/* ---------- How it works ---------- */
.steps { display: grid; gap: 36px 24px; }
.step { display: grid; gap: 10px; align-content: start; }
.step__title { font: var(--text-medium) calc(18px * var(--text-scale))/1.3 var(--text); margin-top: 6px; }
.step p { font-size: calc(16.5px * var(--text-scale)); line-height: 1.55; max-width: 30rem; }
@media (min-width: 640px) and (max-width: 999px) { .steps { grid-template-columns: 1fr 1fr; } }
/* The line after the steps, said once, under them. */
.steps__after { margin-top: clamp(36px, 4vw, 56px); font-size: calc(18px * var(--text-scale)); line-height: 1.5; max-width: 34rem; }

/* ---------- The founder's card ----------
   Drawn in its own container units, as the business card is in the sheet. */
.founder { container-type: inline-size; position: relative; z-index: 2; width: 100%; aspect-ratio: 85 / 55; box-shadow: 0 1px 0 var(--line), 0 26px 44px -32px rgba(28, 26, 23, .55); }
.founder__name { position: absolute; left: 42cqw; right: 6cqw; top: 6cqw; font: 280 9.5cqw/.92 var(--serif); font-stretch: 80%; letter-spacing: -.01em; }
/* The founder's photo fills the card's left side, and his name and line sit to its right. */
.founder__photo { position: absolute; left: 0; top: 0; width: 36%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.founder__bio { margin-top: 76px; color: var(--bone); font-size: calc(17px * var(--text-scale)); line-height: 1.55; text-wrap: pretty; }
.founder__lines { position: absolute; left: 42cqw; right: 6cqw; bottom: 6.5cqw; font-size: max(calc(13.5px * var(--text-scale)), calc(3.3cqw * var(--text-scale))); line-height: 1.45; }
.founder__lines p:first-child { font-weight: var(--text-medium); }

/* ---------- The free check, on the page between the red wall and the peach one ---------- */
.home .check-band { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(24px, 4vw, 64px); }
@media (min-width: 1000px) { .home .check-band > .check { grid-column: 3 / span 7; } }

/* ---------- Packages, one on each door ----------
   A white wall of painted doors (5953 by 3968). On a laptop it runs the full width, cut to the three doors in
   the middle: shown 1.3 times as wide as it is tall, the middle 86.6% of it shows, so a point x across it lands
   (x − 0.067) / 0.866 of the way across. The title is written on the grey band along the top, and each package
   is a card pinned to its own door, hanging a little crooked from its nail, which swings when the pointer
   arrives. On a phone each door has a screen to itself, close up, with the photograph 4.8 screens wide, and
   its card on it, framed by the door. The terms and the founding places follow on the page. */
.home .sec.pricing { padding: 0 0 clamp(24px, 3vw, 48px); }
.home .sec__head.doors__head { margin: 0; padding: clamp(48px, 11vw, 88px) var(--gutter) clamp(24px, 6vw, 40px); }
.doors__door { position: relative; display: grid; justify-items: center; align-content: start; min-height: min(92vh, 640px); min-height: min(92svh, 640px);
  padding: 50vw var(--gutter) 12vw; overflow: hidden; }
.home .doors__pic { position: absolute; inset: 0; background: #c9cdd8; }
.doors__pic .pic__in { inset: 0; transform: none; }
.doors__pic img { position: absolute; top: -44.8vw; left: var(--door); width: 480vw; max-width: none; height: auto; }
.doors__door--1 { --door: -44.6vw; --tilt: -.8deg; }
.doors__door--2 { --door: -189.8vw; --tilt: .6deg; }
.doors__door--3 { --door: -332.8vw; --tilt: -.4deg; }
.package { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; width: min(100%, 264px); padding: clamp(22px, 2vw, 28px) clamp(20px, 1.8vw, 26px);
  background: var(--bone); rotate: var(--tilt, 0deg); transform-origin: 50% 12px;
  box-shadow: 0 1px 2px rgba(20, 22, 30, .3), 0 20px 30px -20px rgba(20, 22, 30, .6); }
/* The nail it hangs from. */
.package::before { content: ""; position: absolute; left: 50%; top: 9px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4beb3, #4a443d 70%); box-shadow: 0 1px 1.5px rgba(28, 26, 23, .45); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .package:hover { animation: sway 1.8s var(--settle); } }
@keyframes sway {
  0%, 100% { rotate: var(--tilt, 0deg); }
  18% { rotate: calc(var(--tilt, 0deg) + 2.4deg); }
  42% { rotate: calc(var(--tilt, 0deg) - 1.5deg); }
  68% { rotate: calc(var(--tilt, 0deg) + .6deg); }
}
@media (min-width: 1000px) {
  .doors { position: relative; aspect-ratio: 1.3; }
  .home .sec__head.doors__head { position: absolute; z-index: 1; inset: 0 0 auto; height: 14.6%; display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter); }
  .doors__door { display: contents; }
  .doors__door--2 .doors__pic, .doors__door--3 .doors__pic { display: none; }
  .doors__pic img { position: static; width: 100%; height: 100%; object-fit: cover; }
  .doors .package { position: absolute; top: 31%; left: var(--x); width: clamp(200px, 16vw, 250px); translate: -50% 0; }
  .doors__door--1 { --x: 15%; }
  .doors__door--2 { --x: 49.95%; }
  .doors__door--2 .package { top: 30%; width: clamp(220px, 20vw, 320px); }
  .doors__door--3 { --x: 84.35%; }
}
/* Each card's own way in sits at its foot, so the three line up: words in the text face's medium with a
   hairline arrow, underlined faintly, the line drawing itself in full as the pointer arrives. */
.package__act { margin-top: auto; padding-top: 12px; }
.founding .package__act { padding-top: 0; }
.go { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; margin-left: -.5em; padding: 0 .5em; border-radius: 50%;
  color: var(--oxblood); font: var(--text-medium) calc(17px * var(--text-scale))/1.2 var(--text); text-decoration: none; }
.go span { padding-bottom: 3px; transition: background-size .6s var(--settle);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
    linear-gradient(rgba(90, 30, 31, .3), rgba(90, 30, 31, .3)) 0 100% / 100% 1px no-repeat; }
.go::after { content: ""; flex: none; width: 26px; height: 10px; background: currentColor; transition: transform .6s var(--settle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h25M21 1l4 4-4 4' fill='none' stroke='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h25M21 1l4 4-4 4' fill='none' stroke='black'/%3E%3C/svg%3E") center / contain no-repeat; }
.go:hover span, .go:focus-visible span { background-size: 100% 1px, 100% 1px; }
.go:hover::after { transform: translateX(4px); }
.go:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.package__name { font: 300 clamp(30px, 3vw, 46px)/1 var(--serif); font-stretch: 86%; letter-spacing: -.01em; }
.package .price { margin-top: 2px; }
.package__text { margin-top: 8px; font-size: calc(16.5px * var(--text-scale)); line-height: 1.5; }
/* The terms, and the founding places on a card. */
.pricing__after { display: grid; gap: clamp(20px, 3vw, 32px); align-items: start; padding: clamp(44px, 6vw, 88px) var(--gutter) 0; }
.packages__terms { color: var(--taupe); font-size: calc(17px * var(--text-scale)); line-height: 1.55; max-width: 34rem; }
.packages__terms .acts { margin-top: 18px; }
.founding { display: grid; gap: 12px; padding: clamp(24px, 3vw, 44px); background: var(--bone);
  box-shadow: 0 1px 0 var(--line), 0 30px 56px -36px rgba(28, 26, 23, .5); }
.founding__title { font: 300 clamp(28px, 2.6vw, 40px)/1.05 var(--serif); font-stretch: 86%; }
.founding p { font-size: calc(17px * var(--text-scale)); line-height: 1.55; }
@media (min-width: 1000px) {
  .pricing__after { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .packages__terms { grid-column: 3 / span 5; }
  .founding { grid-column: 8 / -1; }
}

/* ---------- Notes ----------
   The latest articles, filled in by build_live.py: each a title that links to it and its one-line answer. */
.notes-sec__list { display: grid; gap: clamp(28px, 3vw, 40px); }
.notes-sec__item { display: grid; gap: 10px; }
.notes-sec__name { font: 300 clamp(24px, 2.2vw, 32px)/1.12 var(--serif); font-stretch: 88%; text-wrap: balance; }
.notes-sec__name a { text-decoration: none; }
.notes-sec__name a:hover { color: var(--oxblood); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.notes-sec__item p { font-size: calc(17px * var(--text-scale)); line-height: 1.55; max-width: 34rem; }
.notes-sec__all { margin-top: clamp(28px, 3vw, 44px); }
@media (min-width: 1000px) {
  .notes-sec__list { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .notes-sec__item { grid-column: 3 / span 8; }
  .notes-sec__all { grid-column: 3 / span 8; }
}

/* ---------- Questions ---------- */
.faq__item { display: grid; gap: 12px; padding: clamp(22px, 2.4vw, 32px) 0; }
.faq__q { font: 300 clamp(24px, 2.2vw, 32px)/1.12 var(--serif); font-stretch: 88%; }
.faq__a { font-size: calc(17px * var(--text-scale)); line-height: 1.55; max-width: 34rem; }
@media (min-width: 1000px) {
  .faq__item { gap: 0; align-items: start; }
  .faq__q { grid-column: 3 / span 4; padding-right: 12px; }
  .faq__a { grid-column: 7 / span 4; }
}

/* ---------- Contact, on the payphone's wall ----------
   The section is the colour of the wall in the picture, sampled from it, and the picture fades into it, so the
   heading is written on the same wall as the phone, and the enquiry is a card pinned up beside the phone on a
   laptop and above it on a phone. The heading is oxblood, the teal's opposite, which passes AA for large text
   on it; everything smaller is on the card. */
.wall { --wall: #3aa0a3; background: var(--wall); color: var(--oxblood); padding-bottom: 0; overflow: hidden; overflow: clip; }
.wall__words { position: relative; z-index: 1; }
.wall__card { box-shadow: 0 44px 80px -46px rgba(6, 38, 40, .75); }
.contact__line { font-size: calc(clamp(18px, 1.4vw, 21px) * var(--text-scale)); line-height: 1.45; max-width: 30rem; }
.home .wall__pic { margin: clamp(8px, 4vw, 28px) calc(-1 * var(--gutter)) 0; aspect-ratio: var(--ar); background: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%); mask-image: linear-gradient(to bottom, transparent, #000 9%); }
@media (min-width: 1000px) {
  .home .wall { grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: stretch; padding-top: 0; min-height: 100vh; min-height: 100svh; }
  .home .wall .sec__head { display: block; }
  .home .wall__words { grid-column: 1 / span 6; grid-row: 1; align-self: center; padding: clamp(88px, 10vw, 160px) 0; }
  /* The payphone holds the screen beside the form while it is filled in. */
  .home .wall__pic { grid-column: 7 / -1; grid-row: 1; margin: 0 calc(-1 * var(--gutter)) 0 0; aspect-ratio: auto;
    position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 26%); mask-image: linear-gradient(to right, transparent, #000 26%); }
}

/* ---------- On a phone ----------
   Sections follow one another closely, so one picture or heading leads into the next without a run of
   bare page between them. */
@media (max-width: 999px) {
  .home .sec { padding-top: clamp(48px, 11vw, 88px); padding-bottom: clamp(24px, 6vw, 56px); }
  .home .wall { padding-bottom: 0; }
  .home .sec__head { margin-bottom: clamp(24px, 6vw, 40px); }
}

/* Pictures unveil as they come into view: the picture's layer opens from the top down while the picture
   settles from a little larger, on the settle curve (reveal.js adds is-in to the frame, which is never
   clipped itself, so it can be seen arriving). Without the script, or with reduced motion, they are
   simply there; pinned pictures still hold still, since that is the page scrolling, not movement. */
.reveal-ready [data-unveil] .pic__in { clip-path: inset(0); transition: clip-path 1.1s var(--settle); }
.reveal-ready [data-unveil]:not(.is-in) .pic__in { clip-path: inset(0 0 100% 0); }
.reveal-ready [data-unveil] img { transition: transform 1.6s var(--settle); }
.reveal-ready [data-unveil]:not(.is-in) img { transform: scale(1.14); }
@media (prefers-reduced-motion: reduce) {
  .pic__in { inset: 0; transform: none; }
  .reveal-ready [data-unveil] .pic__in, .reveal-ready [data-unveil]:not(.is-in) .pic__in { clip-path: none; transition: none; transform: none; }
  .reveal-ready [data-unveil] img, .reveal-ready [data-unveil]:not(.is-in) img { transform: none; transition: none; }
}

/* ---------- Ways in along the page ----------
   A way in is never more than about a screen away: the pair under the services and the steps, on the
   founder's card, under the packages and under the questions, where the form is next. Only one pair is in
   view at a time, apart from the bars. */
.acts--after { margin-top: clamp(28px, 3vw, 40px); }
@media (min-width: 1000px) { .home .sec > .faq__acts { grid-column: 7 / span 4; } }
/* On the founder's card, where a business card has its number: a bone ellipse with oxblood words, like the
   oval the wordmark lies in on the rug. A card too narrow to hold it beside the name has it hanging just under
   its corner instead, filled with oxblood like every other Book a call. */
.founder__act { position: absolute; right: 7cqw; top: 5.5cqw; margin: 0; }
.act--card { border-color: var(--bone); background: var(--bone); color: var(--oxblood); }
.act--card:hover { border-color: var(--bone); background: transparent; color: var(--bone); }
.act--card:focus-visible { outline-color: var(--bone); }
@container (max-width: 459px) {
  .founder__act { right: 0; top: calc(100% + 12px); }
  .act--card { border-color: var(--oxblood); background: var(--oxblood); color: var(--bone); }
  .act--card:hover { border-color: var(--ink); background: var(--ink); color: var(--bone); }
  .act--card:focus-visible { outline-color: var(--ink); }
}
@media (max-width: 559px) { .home .founder-wrap { margin-bottom: 72px; } }

/* ---------- Forms: the free check after the services, and the enquiry on the contact wall ----------
   Each is an oxblood card, so it stands out from the bone page and from the teal wall, and every word on it is
   bone, at better than 10 to 1. A field is a line to write on under its question, which is set in the text
   face's medium, large enough to read at a glance; the answer is written larger still. A choice is a row of
   words, and the chosen one is circled, as on a paper form, with the identity's ellipse; the radios are still
   there underneath for the keyboard and screen readers. Nothing is in italics. What is wrong is said under the
   field, after a bone disc with an exclamation mark. Answers are at least 16px, so a phone does not zoom. */
.form-card { padding: clamp(28px, 3.4vw, 52px) clamp(26px, 3.4vw, 52px); }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; }
.field label, .choice legend, .tick label { font: var(--text-medium) calc(clamp(18px, 1.3vw, 19.5px) * var(--text-scale))/1.3 var(--text); }
.field__opt { margin-left: .4em; color: var(--sand); font-weight: var(--text-regular); font-size: .84em; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 8px 0 9px; border: 0; border-bottom: 1.5px solid rgba(242, 237, 228, .62); border-radius: 0;
  background: transparent; color: var(--bone); caret-color: var(--bone);
  font: var(--text-regular) max(16px, calc(21px * var(--text-scale)))/1.3 var(--text);
  transition: border-color .3s var(--settle), box-shadow .3s var(--settle);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(242, 237, 228, .4); opacity: 1; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--bone); }
/* Focus, and a field that needs another look, thicken the line in the bone itself. */
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--bone); box-shadow: 0 1.5px 0 var(--bone); }
.field [aria-invalid="true"] { border-bottom-color: var(--bone); box-shadow: 0 1.5px 0 var(--bone); }
/* A browser filling a field in from memory paints it pale; the card's ground and the bone words stay. */
.field input:-webkit-autofill { -webkit-text-fill-color: var(--bone); box-shadow: inset 0 0 0 60px var(--oxblood); caret-color: var(--bone); }
.field textarea { min-height: calc(2.6em + 17px); resize: none; field-sizing: content; }
.field__err, .form__status { display: block; color: var(--bone); font: var(--text-medium) calc(15.5px * var(--text-scale))/1.45 var(--text); }
.field__err { padding-top: 4px; }
.field__err::before, .form__status::before { content: "!"; display: inline-block; width: 1.3em; height: 1.3em; margin-right: .55em; border-radius: 50%;
  background: var(--bone); color: var(--oxblood); font-size: .8em; font-weight: 700; line-height: 1.3; text-align: center; vertical-align: .08em; }
.choice { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; container-type: inline-size; }
.choice legend { padding: 0; margin-bottom: 4px; }
/* Each word keeps room around it for its ellipse, which leans a little, as if drawn by hand. Keyboard focus
   underlines the word instead, so it can't be mistaken for the choice. The short words run in a row and the
   budgets stand in two columns; on a phone the words take two columns and the budgets one. */
.choice__words { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-left: -.85em; }
.choice__words--pairs { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 1em; }
@container (max-width: 420px) {
  .choice__words { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
  .choice__words--pairs { grid-template-columns: 1fr; }
}
.word { position: relative; display: inline-grid; place-items: center; justify-self: start; min-height: 54px; padding: 0 .85em; }
.word input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.word span { position: relative; font: var(--text-regular) calc(clamp(19px, 1.4vw, 21px) * var(--text-scale))/1.2 var(--text); white-space: nowrap; pointer-events: none; }
.word span::before { content: ""; position: absolute; inset: -.5em -.62em; border: 1.5px solid currentColor; border-radius: 50%;
  opacity: 0; transform: rotate(-4deg) scale(.9); transition: opacity .35s var(--settle), transform .5s var(--settle); }
.word input:hover + span::before { opacity: .35; transform: rotate(-4deg); }
.word input:checked + span::before { opacity: 1; transform: rotate(-4deg); }
.word input:focus-visible + span { text-decoration: underline 2px; text-underline-offset: .3em; }
/* The call box is a circle, after the choices' ellipse, which fills with bone and takes an oxblood tick. */
.tick { display: flex; align-items: center; gap: 14px; min-height: 48px; margin: 0; }
.tick input { flex: none; width: 26px; height: 26px; margin: 0; border: 1.5px solid currentColor; color: inherit; border-radius: 50%; background: transparent no-repeat 50% 55% / 13px;
  -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color .3s var(--settle); }
.tick input:checked { background-color: var(--bone); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5l4 4L13 1' fill='none' stroke='%235A1E1F' stroke-width='2'/%3E%3C/svg%3E"); }
.tick input:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.tick label { cursor: pointer; }
/* Bots fill every field they find; people never see this one. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: grid; gap: 14px; justify-items: start; }
.form__note { color: var(--sand); font: var(--text-regular) calc(16px * var(--text-scale))/1.45 var(--text); }
.form__status { max-width: 30em; }
.form__status a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* On a card, and on the red wall, the actions are bone: the one to take filled, with oxblood words, and the
   other drawn. */
.form-card .act, .surface--services .act { color: var(--bone); }
.form-card .act--fill, .surface--services .act--fill { border-color: var(--bone); background: var(--bone); color: var(--oxblood); }
.form-card .act:hover, .surface--services .act:hover { border-color: var(--bone); background: var(--bone); color: var(--oxblood); }
.form-card .act--fill:hover, .surface--services .act--fill:hover { background: transparent; color: var(--bone); }
.form-card .act:focus-visible, .surface--services .act:focus-visible { outline-color: var(--bone); }
/* The thanks takes the form's place, in the display face. It takes focus so a screen reader reads it, but it
   is not a control, so it draws no ring. */
.form__done { max-width: 20em; font: 300 clamp(28px, 2.7vw, 40px)/1.15 var(--serif); font-stretch: 88%; }
.form__done:focus { outline: none; }
@media (forced-colors: active) {
  .field :focus { outline: 2px solid CanvasText; outline-offset: 2px; }
  .tick input { -webkit-appearance: auto; appearance: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .field input, .field textarea, .word span::before, .tick input, .go span, .go::after { transition: none; }
}

/* The enquiry, on its card on the payphone's wall. The form takes focus when a button leads here, so a screen
   reader starts at it; the first field is one Tab away. */
.enquiry { display: grid; gap: 30px; margin-top: clamp(24px, 3vw, 36px); }
.enquiry:focus { outline: none; }
.enquiry__pair { display: grid; gap: 30px; }
@media (min-width: 560px) { .enquiry__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; } }
.enquiry .form__foot { margin-top: 6px; }
.form-card .form__done { margin-top: clamp(20px, 3vw, 32px); }

/* The free check: an oxblood card after the services, so it can't be missed on the bone page. */
.check { box-shadow: 0 1px 0 var(--line), 0 30px 56px -36px rgba(28, 26, 23, .6); }
.check__title { margin-top: 14px; max-width: 16em; font: 300 clamp(32px, 3vw, 46px)/1.04 var(--serif); font-stretch: 86%; letter-spacing: -.005em; }
.check__text { margin-top: 14px; max-width: 32rem; font-size: calc(17px * var(--text-scale)); line-height: 1.5; }
.check__form { display: grid; gap: 30px; margin-top: clamp(26px, 3vw, 36px); }
.check__fields { display: grid; gap: 26px 32px; }
@media (min-width: 560px) {
  .check__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .check__fields .field--wide { grid-column: 1 / -1; }
}

/* ---------- On a phone, the two actions along the bottom of the screen, on a slim strip of bone ----------
   They come up once the first screen has gone, and keep out of the way while the contact wall or the footer is
   in view, while the page already shows the pair, or while someone is typing in a form (enquire.js). */
.actbar { display: none; }
@media (max-width: 759px) {
  .actbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 12px;
    padding: 6px var(--gutter) calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bone);
    transform: translateY(105%); visibility: hidden; transition: transform .55s var(--settle), visibility 0s linear .55s; }
  .actbar.is-shown { transform: none; visibility: visible; transition: transform .55s var(--settle), visibility 0s; }
}
.is-framed .actbar { display: none; }
@media (prefers-reduced-motion: reduce) { .actbar, .actbar.is-shown { transition: none; } }

/* ---------- The footer: the carpet, with the page's last links sewn on ----------
   The links are small bone labels, stitched round like a rug's care label, set around the medallion, and the
   wordmark lies on the medallion in a bone cartouche. They lie on the carpet and turn with it. Ink on bone reads
   on the busy pattern. A phone gets the carpet stood upright, with the labels above and below the medallion;
   wider screens get it lying across, with the labels around it. js/rug.js picks the cut to match. */
.rug--foot { padding: clamp(40px, 6vw, 96px) var(--gutter) calc(clamp(40px, 6vw, 96px) + env(safe-area-inset-bottom)); }
.rug--foot::before { content: none; }
/* Under the carpet, in the footer's quiet voice: the business's legal name, which the law wants on every page. */
/* Every service page and Notes, from every page, under the carpet. */
.rug--foot .sitelinks { grid-row: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-top: clamp(24px, 3.4vw, 40px);
  font-size: calc(15px * var(--text-scale)); }
.rug--foot .sitelinks a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.rug--foot .sitelinks a:hover, .rug--foot .sitelinks a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.rug--foot .entity { grid-row: 3; max-width: 40rem; margin-top: clamp(20px, 3vw, 36px); color: var(--taupe); text-align: center;
  font-size: calc(13px * var(--text-scale)); line-height: 1.5; }
.rug__mat { position: relative; grid-area: 1 / 1; width: min(100%, 960px); aspect-ratio: 2013 / 1400; transform: rotate(-1.4deg); }
.rug--foot .rug__mat img { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
.rug__face { position: absolute; inset: 0; }
.rug__row { position: absolute; left: 14%; right: 14%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 12px; transform: translateY(-50%); }
.rug__row--top { top: 24.5%; }
.rug__row--mid { top: 50%; left: 16%; right: 16%; justify-content: space-between; }
.rug__row--low { top: 75.5%; gap: 8px 14%; }
.rug__label { position: relative; display: inline-block; padding: 8px 14px 7px; background: var(--bone); color: var(--ink);
  font: var(--text-medium) calc(14px * var(--text-scale))/1.2 var(--text); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(28, 26, 23, .4), 0 4px 10px -3px rgba(28, 26, 23, .45); }
.rug__label::after, .rug__mark::after { content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(28, 26, 23, .3); pointer-events: none; }
.rug__label:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.rug__label:focus-visible, .rug__mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--bone); }
.rug__mark { position: absolute; left: 49.5%; top: 50%; display: grid; place-items: center; width: 21%; aspect-ratio: 2.4 / 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--bone); color: var(--ink);
  box-shadow: 0 1px 1px rgba(28, 26, 23, .4), 0 6px 14px -4px rgba(28, 26, 23, .5); }
.rug__mark::after { inset: 5px; border-radius: 50%; }
/* The text cut: at this size the display cut's hairlines would vanish into the pile. */
.rug__mark svg { width: 62%; height: auto; }
@media (max-width: 759px) {
  .rug__mat { width: min(100%, 480px); aspect-ratio: 1400 / 2013; }
  .rug__row { left: 19%; right: 19%; }
  .rug__row--top { top: 21.5%; }
  .rug__row--mid { top: 29.5%; left: 19%; right: 19%; justify-content: center; }
  /* Two labels over the medallion and two under it: the legal pages are stacked, one above the other. */
  .rug__row--low { top: 74%; flex-direction: column; gap: 8px; }
  .rug__label { padding: 6px 10px 5px; font-size: calc(12.5px * var(--text-scale)); }
  .rug__mark { left: 50.5%; top: 49.5%; width: 40%; }
}

/* ---------- The page that is not there (404.html) ----------
   The line on the left and the rug on the right on a laptop; on a phone the rug follows the line. */
.lost { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; }
.lost__main { display: grid; gap: clamp(20px, 3vw, 36px); align-content: center; padding: clamp(28px, 5vw, 64px) var(--gutter) 0; }
.lost__mark { display: block; width: clamp(96px, 9vw, 140px); color: var(--ink); margin-bottom: clamp(16px, 4vw, 48px); }
.lost__mark svg { width: 100%; height: auto; }
.lost__line { font: 250 clamp(44px, 6vw, 92px)/.95 var(--serif); font-stretch: condensed; letter-spacing: -.015em; max-width: 9em; }
.lost .rug::before, .lost .rug img { width: min(100%, 620px); }
.lost .rug { padding-bottom: clamp(20px, 4vw, 64px); }
@media (min-width: 1000px) {
  .lost { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .lost__main { padding-bottom: clamp(28px, 5vw, 64px); }
}