/* Single visual world: committed dark. Every value painted explicitly. */
  :root {
    --void:      #0A0A0B;
    --surface:   #0F0F10;
    --surface-2: #141415;
    --raised:    #191919;

    --text:      #EDEBE6;
    --text-2:    #A5A29B;
    --text-3:    #6D6A64;

    --hair:      rgba(237,235,230,0.085);
    --hair-soft: rgba(237,235,230,0.045);

    --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --pad: clamp(1.35rem, 4.5vw, 5rem);
    --rail: clamp(0px, 3.5vw, 60px);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* An inverted plane. Redefines the tokens locally, so every rule inside it
     keeps working untouched. This is how the page changes state without
     any rule learning about a second palette. */
  .invert {
    --void:      #EDEBE6;
    --surface:   #E2DFD8;
    --surface-2: #D8D5CE;
    --raised:    #CFCCC5;

    --text:      #0B0B0C;
    --text-2:    #4A4842;
    --text-3:    #7C7972;

    --hair:      rgba(11,11,12,0.16);
    --hair-soft: rgba(11,11,12,0.085);

    background: var(--void);
    color: var(--text);
  }

  * { box-sizing: border-box; }

  /* No global smooth scrolling. With it set here every programmatic scroll
     animates, the page keeps gliding after a trackpad gesture stops, and a
     refresh drifts to its restored position instead of arriving there. It
     reads as the page moving on its own. The carousel asks for smooth
     behaviour explicitly on its own scrollTo, which is the only place that
     wants it. */
  html { scroll-behavior: auto; }

  /* ---- entrance curtain ---- */

  /* The curtain is lifted by JS at about a second. This animation is the
     backstop: if a script error happens before that, the page would otherwise
     sit behind a black sheet for ever. Five seconds is long enough never to
     fire in normal use and short enough that a broken build is still usable.
     `<noscript>` removes it outright for scripting off. */
  .curtain {
    position: fixed; inset: 0; z-index: 200;
    background: var(--void);
    display: grid; place-items: center;
    transition: opacity 1.1s var(--ease), visibility 1.1s;
    animation: curtainfail 0.6s var(--ease) 5s forwards;
  }

  @keyframes curtainfail { to { opacity: 0; visibility: hidden; } }

  /* once JS has lifted it, the backstop must not fight the transition */
  .curtain.lift { animation: none; }

  .curtain svg { width: 62px; height: auto; color: var(--text); opacity: 0; animation: markin 1.1s var(--ease) both; }

  @keyframes markin { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }

  .curtain.lift { opacity: 0; visibility: hidden; }

  @media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

  /* ---- scroll progress ---- */

  .progress {
    position: fixed; top: 0; left: 0; height: 1px; width: 0%;
    background: var(--text); opacity: 0.5; z-index: 95;
    transition: width .12s linear;
  }

  body {
    margin: 0;
    background: var(--void);
    color: var(--text);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: 0.004em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  p { margin: 0; color: var(--text-2); }
  a { color: inherit; }
  :focus-visible { outline: 1px solid var(--text); outline-offset: 5px; }

  /* ---- atmosphere: grain + vignette ---- */

  .grain, .vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 90;
  }

  .grain {
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* The vignette is atmosphere for the film, not for the page. It sits below
     main/footer (z-index 2) so it only ever darkens the hero. Left over the
     whole page it turns any light section muddy. */
  .vignette {
    z-index: 1;
    background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(0,0,0,0.42) 100%);
  }

  /* ---- side rail ---- */

  .siderail {
    position: fixed; top: 0; left: 0;
    width: var(--rail); height: 100vh;
    z-index: 40;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }

  .siderail span {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--display); font-weight: 500;
    font-size: 0.5625rem; letter-spacing: 0.48em; text-transform: uppercase;
    color: var(--text-3); white-space: nowrap;
  }

  /* The rail is hidden below 900, so its gutter has to go with it. Left in
     place it shifts the page off centre and breaks every full bleed. */
  @media (max-width: 900px) {
    .siderail { display: none; }
    :root { --rail: 0px; }
  }

  .page { padding-left: var(--rail); }

  /* the body of the page rides over the pinned hero */
  main, footer { position: relative; z-index: 2; background: var(--void); }

  /* ---- reveal ---- */

  .rv { opacity: 0; transform: translateY(26px); }

  @media (prefers-reduced-motion: no-preference) {
    .rv { transition: opacity 1.15s var(--ease), transform 1.15s var(--ease); }
  }

  .rv.in { opacity: 1; transform: none; }

  /* Some things fade in without moving. Framed boxes and the FSBO bar are
     structure, not copy, and sliding structure up the page both looks
     uniform and registers as layout shift on the sections beneath them.
     Body copy still travels; not everything should arrive the same way. */
  .rv-still { transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
  }

  /* ============ HERO ============ */

  .hero {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(1.5rem,4vh,3rem) var(--pad) clamp(1.75rem,4vh,2.75rem);
    overflow: hidden;
    isolation: isolate;
    background: var(--void);
  }

  .hero-media {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(90% 70% at 60% 25%, #1A1A1B 0%, #0A0A0B 72%);
  }

  .hero-media video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(1) contrast(1.05) brightness(0.85);
    opacity: 0.52;
  }

  .hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(185deg, rgba(10,10,11,0.46) 0%, rgba(10,10,11,0.14) 40%, rgba(10,10,11,0.72) 100%);
  }

  .hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }

  .monogram { width: clamp(38px, 4.4vw, 58px); height: auto; display: block; color: var(--text); }

  /* ---- film frames on media wells ---- */


  /* The copy crosses the right side of the well, so that side is weighted
     down. Without this the paragraphs fight the brightest part of the frame. */
  .about-plate::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgba(10,10,11,1) 0%, rgba(10,10,11,0.32) 13%, rgba(10,10,11,0.32) 86%, rgba(10,10,11,1) 100%),
      linear-gradient(90deg, rgba(10,10,11,0.95) 0%, rgba(10,10,11,0.18) 11%, rgba(10,10,11,0.18) 89%, rgba(10,10,11,0.95) 100%);
    pointer-events: none;
  }

  /* ---- wipe underline ---- */

  .uline { position: relative; text-decoration: none; }

  .uline::after {
    content: ""; position: absolute;
    left: 0; bottom: -0.08em; height: 1px; width: 100%;
    background: currentColor;
    transform: scaleX(0); transform-origin: right;
    transition: transform .8s var(--ease);
  }

  .uline:hover::after, .uline:focus-visible::after { transform: scaleX(1); transform-origin: left; }

  .kw-mark {
    width: clamp(112px, 15vw, 188px);
    height: auto; display: block;
    opacity: 0.9;
    align-self: flex-start;
  }

  .hero-mark { align-self: end; isolation: isolate; }

  .wordmark {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(3rem, 14.35vw, 12.95rem);
    letter-spacing: -0.05em; line-height: 0.76;
    margin: 0; text-indent: -0.045em;
    color: var(--text);
    display: flex;
  }

  .wordmark i {
    font-style: normal;
    display: inline-block;
    opacity: 0;
    transform: translateY(0.22em);
  }

  /* YL is struck and recedes, leaving M and Z: the monogram, derived on screen */
  .struck { position: relative; display: inline-flex; }

  .struck i { transition: color 1.1s var(--ease) 1.15s; }
  .go .struck i { color: var(--text-2); }

  /* A real cut, not a bar. Two mask layers: one covers the letters,
     one subtracts a horizontal band. The band's width animates, so the
     gap is carved left to right and the film plays through it.

     The cover layer is 100% 100% at 0 0 and must stay that way. It was
     300% 300% at -100% -100% once, which broke the mark on iOS: a
     percentage mask-position resolves against (area - image), so with a
     3x image that -100% computes to +2x and puts the layer completely
     off the element. The cover contributed nothing, the band was all
     that survived, and MYLZ rendered as M--Z on every WebKit browser
     while Chrome forgave it. Never position a mask layer with a
     percentage unless the layer is smaller than the element.

     The @supports guard is the second half of the lesson. Without a
     working mask-composite the two layers stack instead of subtracting,
     which is a broken wordmark rather than a plain one. Any engine that
     cannot do the cut gets an intact MYLZ instead. */
  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .struck {
      -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
              mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
      -webkit-mask-repeat: no-repeat, no-repeat;
              mask-repeat: no-repeat, no-repeat;
      -webkit-mask-position: 0 0, -0.02em 50%;
              mask-position: 0 0, -0.02em 50%;
      -webkit-mask-size: 100% 100%, 0% 0.046em;
              mask-size: 100% 100%, 0% 0.046em;
      -webkit-mask-composite: xor;
              mask-composite: exclude;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .go .wordmark i { animation: letter 1.25s var(--ease) both; }
    .go .wordmark i:nth-child(1) { animation-delay: .10s; }
    .go .wordmark i:nth-child(2) { animation-delay: .19s; }
    .go .wordmark i:nth-child(3) { animation-delay: .28s; }
    .go .wordmark i:nth-child(4) { animation-delay: .37s; }
    @keyframes letter { to { opacity: 1; transform: none; } }

    .go .struck { animation: cut 1s var(--ease) 1.05s both; }
    @keyframes cut {
      from { -webkit-mask-size: 100% 100%, 0% 0.046em;    mask-size: 100% 100%, 0% 0.046em; }
      to   { -webkit-mask-size: 100% 100%, 104% 0.046em;   mask-size: 100% 100%, 104% 0.046em; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wordmark i { opacity: 1; transform: none; }
    .struck { -webkit-mask-size: 100% 100%, 104% 0.046em; mask-size: 100% 100%, 104% 0.046em; }
    .struck i { color: var(--text-2); transition: none; }
  }

  .hero-foot {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
    padding-top: clamp(1.15rem,3vh,2rem);
    border-top: 1px solid var(--hair);
    margin-top: clamp(1.15rem,3vh,2rem);
  }

  .hero-foot p {
    color: var(--text-2);
    font-family: var(--display); font-weight: 400;
    font-size: clamp(0.8125rem, 1.4vw, 1.0625rem);
    letter-spacing: 0.01em; max-width: 34ch; line-height: 1.5;
  }

  /* Tagline sits above the supporting line. Two weights, one stack. */
  .hero-tag { display: flex; flex-direction: column; gap: 0.3em; }
  .hero-tag strong {
    color: var(--text); font-weight: 600; letter-spacing: 0.015em;
  }
  .hero-tag span { color: var(--text-2); }

  .hero-scroll {
    font-family: var(--display); font-weight: 500;
    font-size: 0.5625rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--text-3); white-space: nowrap;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-media video { animation: settle 3s var(--ease) both; }
    @keyframes settle { from { opacity: 0; transform: scale(1.07);} to { opacity: .52; transform: none;} }
    .hero-scroll { animation: breathe 3.4s ease-in-out infinite; }
    @keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
  }

  /* ============ STATEMENT ============ */

  .statement { padding: clamp(6rem,18vh,12rem) var(--pad) clamp(6rem,17vh,11rem); }

  /* Moment one. The thesis line is the only place the page changes colour,
     so it is also allowed to be the biggest thing on it. Edge to edge, no
     measure, tracking pulled tight the way display type wants. */
  .statement q {
    display: block; quotes: none;
    font-family: var(--display); font-weight: 600;
    font-size: 2.4rem;
    letter-spacing: -0.055em; line-height: 0.9;
    max-width: none; color: var(--text);
  }

  .statement q em { font-style: normal; display: block; padding-left: 0.9em; color: var(--text-2); }
  .statement q .scr { display: block; }
  .statement q em.scr { display: block; }

  /* unresolved glyphs sit back so the resolved text reads forward */
  .scr.running { color: var(--text-3); transition: color .5s var(--ease); }

  .statement-note {
    margin-top: clamp(1.5rem,4vh,2.5rem);
    margin-left: auto; max-width: 42ch; font-size: 1rem;
  }

  /* ============ APPROACH ============ */

  /* Real air at the top. This section butts straight up against the bottom
     edge of the inverted plane, so with no top padding the first label sits
     on the seam and reads as clipped. */
  /* Indented rather than flush. The page's left edge has to move or every
     section reads as the same section. */
  .approach {
    padding: clamp(6rem,15vh,10rem) var(--pad) clamp(5rem,13vh,8.5rem);
    padding-left: clamp(1.35rem, 16vw, 15rem);
  }

  .stagger { display: grid; grid-template-columns: repeat(12,1fr); row-gap: clamp(2.75rem,7vh,4.5rem); column-gap: clamp(1.25rem,3vw,3.25rem); }

  .step { display: flex; flex-direction: column; gap: clamp(1.1rem,2.4vh,1.5rem); }
  .step:nth-child(1) { grid-column: 1 / span 4; }
  .step:nth-child(2) { grid-column: 5 / span 4; padding-top: clamp(1.25rem,4.5vh,3.25rem); }
  .step:nth-child(3) { grid-column: 9 / span 4; padding-top: clamp(2.5rem,9vh,6.5rem); }

  @media (max-width: 860px) {
    .step:nth-child(1),.step:nth-child(2),.step:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
  }

  /* These three words are the tagline, so they lead the section rather than
     labelling it. Tracking loosens as the size drops, not as it grows. */
  .step .idx {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1rem, 1.85vw, 1.5rem);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-2);
  }

  .step h3 {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.375rem, 2.7vw, 2rem);
    letter-spacing: -0.032em; line-height: 1.12;
    margin: 0; color: var(--text);
  }

  /* the label belongs to the heading, so it sits tight to it and the
     paragraph keeps the full gap */
  .step .idx + h3 { margin-top: calc(clamp(1.1rem,2.4vh,1.5rem) * -0.32); }

  .step p { font-size: 0.9375rem; }


  /* A document, not a hero, and not a card hanging off the bottom of the
     section either. It is a layer inside the bio: flush to the page edge,
     vertically centred, wide enough that the copy crosses its right side.
     Centring is done by the grid, never a transform, because `.rv` animates
     transform on the figure itself. */
  .service-layer {
    position: absolute; inset: 0; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: center;
    pointer-events: none;
  }

  /* Uniform: the supporting note. Small, dropped low, held off the side rail. */
  .service {
    position: relative;
    justify-self: start; align-self: end;
    margin: 0 0 clamp(2rem, 9vh, 6.5rem) 0;
    width: min(62%, 430px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }

  /* Seated: the lead. This is the man a seller meets at a listing
     appointment, so it is the larger and the centred one, and it bleeds off
     the right edge. The pair frames the bio rather than mirroring it:
     different ratio, different size, different vertical alignment, because
     two matching blocks either side of a centred column is the symmetry the
     rest of the page spends its effort avoiding. */
  .service-alt {
    justify-self: end; align-self: center;
    margin: 0;
    width: min(78%, 560px);
    aspect-ratio: 1 / 1;
  }

  .service img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(1) contrast(1.06);
    opacity: 0.5;
  }

  /* the uniform sits a quarter further back than the seated portrait */
  .service:not(.service-alt) img { opacity: 0.36; }

  /* Edges are feathered with a mask, not covered with a scrim. A scrim is a
     hard edged rectangle laid over a hard edged image, so it can darken an
     edge but never dissolve one. Two mask layers, horizontal and vertical,
     intersected, so all four edges fade into the page. The side the copy
     crosses fades earliest and hardest. */
  .service img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 14%, #000 48%, transparent 99%),
      linear-gradient(180deg, transparent 0%, #000 15%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, transparent 0%, #000 14%, #000 48%, transparent 99%),
      linear-gradient(180deg, transparent 0%, #000 15%, #000 84%, transparent 100%);
            mask-composite: intersect;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }

  .service-alt img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 1%, #000 52%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 15%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, transparent 1%, #000 52%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 15%, #000 84%, transparent 100%);
            mask-composite: intersect;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }

  /* Below 1100 they stay layers. They are the background of the bio, exactly
     as on desktop, and must never become content in the flow: putting them
     after the copy turns the section into an extra scroll of photographs,
     which is a different page, not a responsive version of this one.

     The section runs about three viewports on a phone, so instead of
     flanking the column they are placed at different depths in it: the
     seated portrait high and bleeding off the right, the uniform low and
     bleeding off the left. The copy passes over both. */
  @media (max-width: 1100px) {
    .service::after, .service-alt::after { display: none; }

    .service-layer { position: absolute; inset: 0; display: block; }

    .service, .service-alt { position: absolute; margin: 0; }

    .service-alt {
      top: 4%; right: 0; left: auto;
      width: 78%; aspect-ratio: 1 / 1;
    }

    .service:not(.service-alt) {
      bottom: 5%; left: 0; right: auto; top: auto;
      width: 70%; aspect-ratio: 3 / 4;
    }

    .service img, .service-alt img {
      -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
      -webkit-mask-composite: source-in;
              mask-image:
        linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
              mask-composite: intersect;
    }

    /* type sits directly on them here, so both sit further back than desktop */
    .service-alt img { opacity: 0.44; }
    .service:not(.service-alt) img { opacity: 0.34; }
  }


  /* ============ FIGURE ============ */

  /* Moment two. The one number available, set as an object rather than
     buried in a sentence. It is the brokerage's number, not his, so the
     caption names Keller Williams Domain before it says anything else and
     the two are never separated. */
  /* One column, hard right. The empty left is the point: the number needs
     air around it, not a picture keeping it company.

     It has no padding, no border and no band of its own. It sits inside the
     FSBO section, above the white bar, because the number and the door for a
     for sale by owner seller are one moment in the page, not two. Given
     separate bands they cost roughly ten rem of vertical space to say very
     little between them. */
  .figure {
    display: grid; justify-items: end; align-content: center;
    row-gap: clamp(0.9rem,2.2vh,1.4rem);
    border: 1px solid var(--text);
    padding: clamp(1.5rem, 3.4vh, 2.25rem) clamp(1.35rem, 3vw, 2.25rem);
  }

  @media (max-width: 900px) { .figure { justify-items: start; } }

  .figure-num {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(3.25rem, 11vw, 9.5rem);
    letter-spacing: -0.055em; line-height: 0.82;
    color: var(--text); margin: 0;
  }

  .figure-cap {
    max-width: 46ch; text-align: right;
    font-size: 0.9375rem; color: var(--text-3);
  }

  @media (max-width: 900px) {
    .figure-cap { text-align: left; }
  }

  /* ============ ABOUT ============ */

  /* The loop is the ground this whole section is written on. It is a layer
     behind the copy, not a column beside it, so the bio sits over the middle
     of the frame rather than clipping its edge. */
  .about {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem,7vh,5rem);
  }

  /* The layer is behind the copy at every width, phone included. The bio is
     written on top of it, never beside it and never above it.

     How it fills differs by the shape of the section, because the source is
     a tall 9:16 frame. On a wide short section it is sized by height and the
     ratio derives the width, which shows the whole frame uncropped. On a
     narrow tall one that would leave most of the section bare, so there it
     covers instead and takes a vertical slice. Making either rule serve both
     breaks one of them: cover on desktop upscales the frame two times and
     turns it to mush, and contain on a phone leaves the bio sitting on
     nothing below the fold. */
  /* Centring is done by the grid, never by a transform. `.rv` animates
     `transform` on this same element, so any transform written here is
     overwritten the moment the reveal fires and the layer jumps sideways. */
  /* No `.rv` on any of the overlay layers. They are ground, not content, so
     fading them up with everything else added nothing and their transition
     registered as layout shift while scrolling. Not everything on a page
     should arrive the same way, and background does not need to arrive. */
  .about-img {
    position: absolute; z-index: 0; inset: 0;
    display: grid; place-items: center;
    pointer-events: none;
  }

  .about-plate {
    position: relative;
    height: 100%; width: auto; aspect-ratio: 9/16;
    max-width: 82%;
    overflow: hidden;
  }

  /* On a phone the section runs several viewports tall. Sizing the plate to
     the whole section meant covering a 9:16 frame into a 1:3 box, which is a
     crop so extreme the footage stops reading as anything. Sticking it at one
     viewport tall instead keeps the crop mild and gives the same effect the
     desktop has: the bio scrolls over a film that stays put. */
  @media (max-width: 1100px) {
    .about-plate {
      position: sticky; top: 0;
      width: 100%; height: 100svh; max-width: none; aspect-ratio: auto;
    }
  }

  .about-plate img,
  .about-plate video {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: 62% 30%;
    filter: grayscale(1) contrast(1.04);
  }

  /* a moving ground, not a picture. Dim enough that type can sit on it. */
  .about-plate video { opacity: 0.24; }

  /* reduced motion gets the poster frame, not a moving picture */
  /* Reduced motion gets the poster frame. It goes on its own layer with its
     own opacity: fading the whole element would fade the scrim with it, and
     the copy ends up sitting on a full strength photograph. */
  @media (prefers-reduced-motion: reduce) {
    .about-plate video { display: none; }
    .about-plate::after {
      content: ""; position: absolute; inset: 0; z-index: 0;
      background: url("/assets/media/portrait-poster.jpg") 62% 30%/cover no-repeat;
      filter: grayscale(1) contrast(1.04);
      opacity: 0.32;
    }
  }

  /* one column, centred on the footage rather than beside it */
  .about-copy {
    position: relative; z-index: 2;
    max-width: 78ch; margin-inline: auto;
    padding-inline: var(--pad);
    display: flex; flex-direction: column; gap: 1.5rem;
  }

  .about-copy h2 {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.65rem, 4.1vw, 3.15rem);
    letter-spacing: -0.042em; line-height: 1.02;
    margin: 0; color: var(--text);
    text-wrap: balance;
    padding: 0 0 0.1em;
    width: fit-content; max-width: 100%;
  }

  /* Full --text, not the secondary tone. This copy sits on moving footage and
     two photographs; body grey over a picture is a readability problem, not a
     subtlety. Everything behind it was pulled back at the same time. */
  .about-copy p { max-width: 62ch; color: var(--text); }

  .about-copy h2 {
    font-weight: 700;
    font-size: clamp(1.85rem, 4.8vw, 3.6rem);
    letter-spacing: -0.045em;
    line-height: 0.98;
  }


  @media (max-width: 900px) {
  }


  @media (max-width: 1100px) {
    .about { padding-block: clamp(3rem,7vh,4.5rem); }
    .about-copy { max-width: none; margin-inline: 0; }
    .about-copy p { max-width: 62ch; }
  }

  .closer {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1rem, 1.9vw, 1.3rem);
    letter-spacing: -0.02em; color: var(--text);
    margin-top: 0.5rem;
  }




  /* ============ BUTTON ============ */

  .btn {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; gap: 0.8em;
    font-family: var(--display); font-weight: 500;
    font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase;
    text-decoration: none; color: var(--text);
    padding: 1.15em 1.7em;
    border: 1px solid var(--hair);
    align-self: flex-start;
    overflow: hidden;
    transition: color .7s var(--ease), border-color .7s var(--ease);
  }

  .btn::before {
    content: ""; position: absolute; inset: 0;
    background: var(--text);
    transform: translateY(101%);
    transition: transform .7s var(--ease);
    z-index: -1;
  }

  .btn:hover, .btn:focus-visible { color: var(--void); border-color: var(--text); }
  .btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

  /* ============ BUYER ============ */

  /* A ledger, not an accordion. This section answers the one question the
     visitor arrived with, so nothing in it is hidden behind a click. Three
     columns per row keeps it a distinct grid from deliver and truths. */
  .buyer { padding: clamp(4.5rem,12vh,7.5rem) var(--pad) clamp(4.5rem,12vh,7.5rem); border-top: 1px solid var(--hair-soft); }

  /* The only place on this page where somebody other than Mylz is speaking,
     which is the entire reason it is here. Quotes run verbatim. No star
     graphics: five gold stars is the most template shaped element in real
     estate marketing and it would undo everything around it. The rating is
     stated in words instead. */
  /* The proof row: client words on the left, the brokerage number on the
     right. Columns are deliberately unequal. */
  /* Two framed points, matched in height so they read as a pair. The rules
     are at full --text rather than a hairline: these are the two claims the
     section exists to make, and they are meant to be seen first. */
  .proof {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: stretch;
    margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
  }

  @media (max-width: 900px) {
    .proof { grid-template-columns: 1fr; row-gap: clamp(2.25rem, 6vh, 3.5rem); }
  }

  /* A white card carrying `.invert`, so every rule inside it keeps working
     against the light ground with no second palette anywhere. */
  .reviews {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--text);
    padding: clamp(1.5rem, 3.4vh, 2.25rem) 0 clamp(1.25rem, 2.8vh, 1.85rem);
  }

  .reviews-track { flex: 1; }
  .reviews-track:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }

  .reviews-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /* proximity, not mandatory: mandatory snapping fights the user on a
       trackpad and is a common source of scroll jank */
    scroll-snap-type: x proximity;
    /* and the swipe must never chain out to the page behind it */
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .reviews-track::-webkit-scrollbar { display: none; }

  .review {
    flex: 0 0 100%;
    scroll-snap-align: start;
    margin: 0;
    padding-inline: clamp(1.35rem, 3vw, 2.25rem);
    display: flex; flex-direction: column;
  }

  .stars { display: flex; gap: 0.22em; margin-bottom: clamp(0.85rem, 2vh, 1.2rem); }

  .stars svg { width: 0.85rem; height: 0.85rem; fill: var(--text); flex: none; }

  .review p { flex: 1; }

  .review p {
    font-family: var(--display); font-weight: 500;
    font-size: clamp(1rem, 1.55vw, 1.1875rem);
    letter-spacing: -0.022em; line-height: 1.36;
    color: var(--text); margin: 0 0 clamp(1rem, 2.4vh, 1.5rem);
    text-wrap: pretty;
  }

  /* Not a wide tracked all caps eyebrow. That device was on this page five
     times and earns its place once, on the toggle, where it is functional. */
  .review cite {
    font-style: normal; margin-top: auto;
    font-family: var(--body); font-weight: 400;
    font-size: 0.8125rem; letter-spacing: 0.01em;
    color: var(--text-3);
  }

  .reviews-dots {
    display: flex; gap: 0.45rem;
    margin: clamp(1rem, 2.4vh, 1.5rem) clamp(1.35rem, 3vw, 2.25rem) 0;
  }

  .rdot {
    appearance: none; border: 0; padding: 0; cursor: pointer;
    width: 26px; height: 2px; background: var(--hair);
    transition: background .5s var(--ease);
  }

  .rdot.is-on { background: var(--text); }

  /* The one white control on the page. It names the visitor rather than the
     content, so a FSBO opts in instead of being pitched at, and the click is
     an act of self selection rather than a step in a funnel. */
  .fsbo.acc { border: 0; }
  .fsbo.acc:last-of-type { border: 0; }

  .acc.fsbo > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
    background: var(--text); color: var(--void);
    padding: clamp(1.15rem,2.8vh,1.6rem) clamp(1.25rem,3vw,2.25rem);
    transition: background .55s var(--ease), color .55s var(--ease);
  }

  .acc.fsbo > summary:hover { background: #FFFDF8; }

  .fsbo-label {
    flex: 0 1 auto; text-wrap: balance;
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.0625rem, 2.1vw, 1.5rem);
    letter-spacing: -0.028em; line-height: 1.1;
  }

  .acc.fsbo > summary .acc-sign { width: 15px; height: 15px; flex: none; justify-self: auto; }
  .acc.fsbo > summary .acc-sign::before { width: 15px; background: var(--void); }
  .acc.fsbo > summary .acc-sign::after  { height: 15px; background: var(--void); }

  /* the panel that drops out from under it */
  .fsbo > .acc-body > div { background: var(--surface); }

  .fsbo-inner { padding: clamp(2rem,5vh,3.25rem) clamp(1.25rem,3vw,2.25rem) clamp(1.25rem,3vh,2rem); }



  .buyer-head { max-width: 62ch; margin-bottom: clamp(2.25rem,6vh,3.75rem); }

  .buyer-head h2 {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.75rem,4.6vw,3.4rem);
    letter-spacing: -0.045em; line-height: 1.0;
    margin: 0 0 clamp(1rem,2.4vh,1.5rem); color: var(--text);
  }

  .buyer-head p { font-size: 1rem; }

  .rung {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(0.75rem, 2.4vw, 2.25rem);
    align-items: start;
    border-top: 1px solid var(--hair-soft);
    padding-block: clamp(1.5rem, 3.6vh, 2.4rem);
  }

  .ladder .rung:last-child { border-bottom: 1px solid var(--hair-soft); }

  .rung h3 {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.0625rem, 1.9vw, 1.4rem);
    letter-spacing: -0.03em; line-height: 1.14;
    margin: 0; color: var(--text); text-wrap: balance;
  }

  .rung p { font-size: 0.9375rem; margin: 0; max-width: 62ch; }

  @media (max-width: 760px) {
    .rung { grid-template-columns: 1fr; row-gap: 0.75rem; }
  }

  /* ============ SOCIAL RAIL ============ */

  /* Mirror of the left side rail, on the right, and the only fixed element
     on the page besides it. Text runs vertically for the same reason the
     left one does: a horizontal label here would be a widget stuck to the
     page, and this has to read as part of the margin. */
  .social {
    position: fixed; right: 0; top: 50%; z-index: 60;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(0.9rem, 2vh, 1.35rem);
    padding: 1.25rem clamp(0.5rem, 1.4vw, 1rem);
    margin-top: -8rem;
  }

  .social-label {
    writing-mode: vertical-rl;
    font-family: var(--display); font-weight: 500;
    font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--text-3); white-space: nowrap;
    margin-bottom: 0.35rem;
  }

  .social-rule { width: 1px; height: 2rem; background: var(--hair); }

  .social-link {
    display: grid; place-items: center;
    width: 1.6rem; height: 1.6rem;
    color: var(--text-3);
    transition: color .55s var(--ease), transform .55s var(--ease);
  }

  .social-link svg { width: 100%; height: 100%; fill: currentColor; display: block; }

  .social-link:hover { color: var(--text); transform: translateX(-2px); }

  /* Below 900 the left rail is already hidden and there is no margin to
     live in, so this moves into the footer flow instead of floating over
     the content on a screen that has none to spare. */
  @media (max-width: 900px) {
    .social {
      position: static; margin: 0 0 2rem;
      flex-direction: row; align-items: center; justify-content: flex-start;
      padding: 0; gap: 1.1rem;
    }
    .social-label { writing-mode: horizontal-tb; margin: 0 0.35rem 0 0; }
    .social-rule { width: 2rem; height: 1px; }
  }

  /* ============ CONTACT ============ */

  .contact {
    position: relative; isolation: isolate;
    padding: clamp(5.5rem,14vh,9rem) var(--pad) clamp(6rem,16vh,10rem);
    border-top: 1px solid var(--hair-soft);
  }

  /* Same treatment as the bio film: a ground, not a picture. The aerial is
     wide, so unlike the 9:16 portrait it covers the section at every width
     and needs no ratio switch. */
  .contact-media {
    position: absolute; inset: 0; z-index: 0;
    display: grid; place-items: center;
    pointer-events: none;
  }

  .contact-plate { position: relative; width: 100%; height: 100%; overflow: hidden; }

  .contact-plate video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(1) contrast(1.05);
    opacity: 0.26;
  }

  .contact-plate::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgba(10,10,11,1) 0%, rgba(10,10,11,0.35) 16%, rgba(10,10,11,0.35) 82%, rgba(10,10,11,1) 100%),
      linear-gradient(90deg, rgba(10,10,11,0.85) 0%, rgba(10,10,11,0.2) 22%, rgba(10,10,11,0.2) 78%, rgba(10,10,11,0.85) 100%);
  }

  @media (prefers-reduced-motion: reduce) {
    .contact-plate video { display: none; }
    .contact-plate::after {
      content: ""; position: absolute; inset: 0; z-index: 0;
      background: url("/assets/media/contact-poster.jpg") center/cover no-repeat;
      filter: grayscale(1) contrast(1.05);
      opacity: 0.26;
    }
  }

  .contact-inner { position: relative; z-index: 2; }

  .contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: clamp(2rem, 5vh, 3rem);
    align-items: end;
  }

  .contact-ask  { display: flex; flex-direction: column; gap: clamp(1.1rem, 2.6vh, 1.6rem); }
  .contact-reach{
    display: flex; flex-direction: column; gap: clamp(1.1rem, 2.6vh, 1.6rem);
    align-items: flex-start;
    border-left: 1px solid var(--hair-soft);
    padding-left: clamp(1.5rem, 4vw, 3.5rem);
  }

  @media (max-width: 900px) {
    .contact-inner { grid-template-columns: 1fr; }
    .contact-reach { border-left: 0; padding-left: 0; }
  }

  /* Moment three. The page closes on the question, not on a button. */
  .contact h2 {
    font-family: var(--display); font-weight: 700;
    font-size: 2.15rem;
    letter-spacing: -0.05em; line-height: 0.94;
    margin: 0; color: var(--text); max-width: 14ch; text-wrap: balance;
  }

  .contact p { max-width: 54ch; font-size: 0.9375rem; }

  .contact-lines { display: flex; flex-direction: column; gap: 0.12em; }

  .contact-lines a {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.5rem,3.6vw,2.75rem);
    letter-spacing: -0.048em; line-height: 1.05;
    text-decoration: none; color: var(--text);
    width: fit-content; max-width: 100%; overflow-wrap: anywhere;
    transition: color .6s var(--ease);
  }

  .contact-lines a:hover { color: var(--text-3); }

  /* Sizes chosen at widths, not derived from one. Everything on this page
     is a clamp with roughly the same ratio, which means no size on it was
     ever decided, only computed. Perfect fluidity is a machine signature:
     almost nobody can name it and everybody feels it. These are the two
     largest moments on the page, so these are the two worth setting by hand
     and accepting that one step looks slightly worse than its neighbours. */
  @media (min-width: 480px)  { .statement q { font-size: 3.4rem; } .contact h2 { font-size: 2.9rem; } }
  @media (min-width: 768px)  { .statement q { font-size: 5.5rem; } .contact h2 { font-size: 3.6rem; } }
  @media (min-width: 1100px) { .statement q { font-size: 7.4rem; } .contact h2 { font-size: 4.5rem; } }
  @media (min-width: 1500px) { .statement q { font-size: 9.5rem; } .contact h2 { font-size: 5.25rem; } }

  /* One thing on the page is wrong on purpose. The thesis line breaks the
     left margin every other element respects and hangs into the gutter.
     Nothing generated ever does this, because nothing generated has a reason
     to. Keep it on the light plane only, where it reads as license. */
  @media (min-width: 1100px) { .statement q { margin-left: -2.75rem; } }

  /* ============ FOOTER ============ */

  footer {
    border-top: 1px solid var(--hair-soft);
    padding: 3rem var(--pad) 3.5rem;
    background: var(--surface);
  }

  .footer-grid {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: flex-end; gap: 1.75rem;
  }

  /* The mark and the brokerage lockup, set at matching optical weight rather
     than matching pixel height. The monogram is a solid shape and the KW logo
     is mostly letterforms, so equal heights would make the monogram shout. */
  .footer-marks { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.75rem); }

  .footer-mono { width: auto; height: clamp(34px, 3.8vw, 48px); color: var(--text); display: block; }

  .footer-rule { width: 1px; height: clamp(26px, 3vw, 36px); background: var(--hair); flex: none; }

  /* His mark leads. The KW lockup sits a step back in both size and tone,
     which is the correct relationship: he is the brand, they are the licence. */
  .footer-kw { width: auto; height: clamp(19px, 2.1vw, 26px); display: block; opacity: 0.58; }

  .areas {
    font-size: 0.6875rem; line-height: 1.9; color: var(--text-3);
    max-width: 50ch; margin: 0 0 1.1rem;
  }

  .legal { font-size: 0.6875rem; line-height: 1.8; color: var(--text-3); max-width: 50ch; }

  /* ============ THE PACKET ============ */

  /* Not an aside plus a list. That arrangement, heading and paragraph on the
     left with expandable rows on the right, is the most used module on the
     commercial web and no amount of detailing rescues the shape of it.

     The plan is now a horizontal index: the five names run across the page as
     a line of words, one is live, and its paragraph sits underneath in a wide
     measure. Nothing collapses, nothing counts itself, and it reads as a
     contents page rather than an FAQ. */
  .deliver { padding: clamp(4.5rem,11vh,7rem) var(--pad) clamp(5rem,13vh,8rem); }

  /* The one place the wide tracked all caps label survives, because here it
     is a control and the treatment does a job. */
  .switch { display: flex; gap: 1.6rem; }

  .sw {
    appearance: none; background: none; border: 0; padding: 0 0 0.35rem;
    cursor: pointer; position: relative;
    font-family: var(--display); font-weight: 500;
    font-size: 0.5625rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--text-3);
    transition: color .55s var(--ease);
  }

  .sw::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: var(--text);
    transform: scaleX(0); transform-origin: right;
    transition: transform .7s var(--ease);
  }

  .sw:hover { color: var(--text-2); }
  .sw.is-on { color: var(--text); }
  .sw.is-on::after { transform: scaleX(1); transform-origin: left; }

  .deliver-head { max-width: 46ch; margin-bottom: clamp(3rem, 8vh, 5rem); }

  .deliver-head h2 {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.625rem,4vw,3rem);
    letter-spacing: -0.042em; line-height: 1.02;
    margin: clamp(1.25rem,3vh,2rem) 0 clamp(1rem,2.4vh,1.5rem); color: var(--text);
    text-wrap: balance;
  }

  .deliver-head p { font-size: 1rem; }

  .pindex {
    display: flex; flex-wrap: wrap;
    column-gap: clamp(1.5rem, 4vw, 3.25rem); row-gap: 0.55rem;
    padding-bottom: clamp(1.1rem, 2.6vh, 1.6rem);
    border-bottom: 1px solid var(--hair);
  }

  .pidx {
    appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.25rem, 3vw, 2.35rem);
    letter-spacing: -0.038em; line-height: 1.05;
    color: var(--text-3);
    transition: color .55s var(--ease);
  }

  .pidx:hover { color: var(--text-2); }
  .pidx.is-on { color: var(--text); }

  .pbodies { padding-top: clamp(1.5rem, 4vh, 2.5rem); }

  .pbody p {
    max-width: 54ch;
    margin-left: auto;
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    line-height: 1.5;
  }

  @media (prefers-reduced-motion: no-preference) {
    .pbody { animation: pin .6s var(--ease) both; }
    @keyframes pin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  }

  @media (max-width: 760px) {
    .pbody p { margin-left: 0; }
  }

  /* ============ PLAIN TALK ============ */

  .truths { padding: clamp(4.5rem,11vh,7rem) var(--pad) clamp(5rem,13vh,8rem); border-top: 1px solid var(--hair-soft); }

  .truths > h2 {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.625rem,4vw,3rem);
    letter-spacing: -0.042em; line-height: 1.02;
    margin: 0 0 clamp(1.5rem,4vh,2.25rem) auto; color: var(--text);
    max-width: 20ch; text-wrap: balance; text-align: right;
  }

  .truths .switch { justify-content: flex-end; }

  @media (max-width: 760px) {
    .truths > h2 { margin-left: 0; text-align: left; }
    .truths .switch { justify-content: flex-start; }
  }

  .truth { border-top: 1px solid var(--hair-soft); padding-block: clamp(1.75rem,4vh,2.6rem); }

  .truth p.line {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.25rem, 2.9vw, 2.05rem);
    letter-spacing: -0.032em; line-height: 1.14;
    color: var(--text); margin: 0; max-width: 24ch;
  }

  .truth p.sub {
    margin: 0.85rem 0 0;
    max-width: 56ch;
    font-size: 0.9375rem;
    padding-left: clamp(0rem, 8vw, 7rem);
  }

  @media (max-width: 760px) { .truth p.sub { padding-left: 0; } }

  /* ============ CRAFT DETAILS ============ */

  ::selection { background: var(--text); color: var(--void); }

  @media print {
    .curtain, .grain, .vignette, .siderail, .progress,
    .hero-media { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .page { padding-left: 0; }
    .hero { min-height: auto; background: #fff; color: #000; padding-block: 0 1rem; }
    .wordmark { color: #000; font-size: 3rem; }
    .kw-mark { filter: invert(1); width: 130px; }
    h2, h3, .truth p.line, .statement q, .contact-lines a { color: #000 !important; }
    p { color: #222 !important; }
    section, .deliver, .truths { break-inside: avoid; border-color: #ccc; }
    .rv { opacity: 1 !important; transform: none !important; }
    a { text-decoration: underline; }
  }

  /* ============ MOBILE ============ */

  @media (max-width: 900px) {
    /* the side rail is hidden below this width — reclaim its gutter */
    .page { padding-left: 0; }
  }

  @media (max-width: 760px) {
    body { font-size: 16px; }

    .hero { min-height: 92svh; }

    .hero-top { align-items: center; }
    .kw-mark { width: clamp(96px, 30vw, 132px); }

    /* stack the hero footer instead of squeezing two columns */
    .hero-foot {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.1rem;
    }
    .hero-foot p { max-width: 100%; }



    .statement { padding-top: clamp(4rem, 12vh, 7rem); }
    .statement q em { padding-left: 0.9em; }
    .statement-note { margin-left: 0; }

    .btn { width: 100%; justify-content: space-between; }

    .footer-grid { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  }

  @media (max-width: 420px) {
    .statement q em { padding-left: 0; }
  }

  /* touch devices get no hover — keep media legible without it */