/* Riverstill, round 4: the page. Phone first, then the Mac. */
:root{--gut:max(20px,env(safe-area-inset-left,0px));--wide:1240px;--measure:36rem}
@media (min-width:900px){:root{--gut:56px}}
html{scroll-behavior:auto}
/* nothing on the page may widen it sideways (long echo lines, drifting photographs) */
main,.deep{overflow-x:clip}
.wrap{max-width:calc(var(--wide) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.rs-label{display:block}

/* preview-only labels */
.pv-tag{display:none;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#1E0F1A;background:#B4864C;padding:5px 9px;border-radius:999px;line-height:1.3;max-width:calc(100% - 24px);width:max-content}
.pv-labels .pv-tag,.pv-tag.show{display:inline-block}
.pv-tag.on-media{position:absolute;left:12px;bottom:12px;z-index:3}
.pv-tag.small{font-size:9px;padding:3px 7px;left:8px;bottom:8px}
.pv-tag.inline{margin-left:10px;vertical-align:middle}
.pv-tab{position:fixed;left:0;bottom:calc(30vh + env(safe-area-inset-bottom,0px));z-index:90;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px;min-width:44px;min-height:88px;background:rgba(var(--fg-rgb),.08);color:var(--muted);border-radius:0 8px 8px 0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pv{display:grid;gap:16px}
.pv-seg{border:0;margin:0;padding:0;display:grid;gap:8px}
.pv-seg legend{font-size:13px;color:var(--muted);margin-bottom:8px;padding:0}
.pv-opts{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px;justify-self:start;width:max-content;max-width:100%}
.pv-opts button{font-size:14px;min-height:44px;padding:0 16px;border-radius:999px;color:var(--muted);transition:background-color 400ms var(--ease),color 400ms var(--ease)}
.pv-opts button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.pv-note{font-size:13px;color:var(--muted)}

/* menu card */
.menu-card{display:grid;gap:16px}
.menu-ctl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:4px}
.menu-more{display:flex;gap:18px}

/* ---------- 2. the opening ---------- */
.hero,#top{position:relative;height:100svh;min-height:520px;background:var(--bg);color:var(--fg);overflow:hidden}
.hero-stage{position:absolute;inset:0}
.hero-stage>canvas{position:absolute;inset:0;width:100%;height:100%}
/* the designed ground after the opening: the page colour, a very soft fall of light from the top, and the
   horizon kept as a faint hairline either side of the film (no pattern, nothing that follows the pointer) */
.hero-ground{position:absolute;inset:0;opacity:0;transition:opacity 1600ms var(--ease);pointer-events:none;background:radial-gradient(120% 70% at 50% 0%,rgba(var(--fg-rgb),.035),rgba(var(--fg-rgb),0) 70%)}
.hero-ground.on{opacity:1}
.hero-ground .hz{position:absolute;top:var(--hz-y,50%);height:1px;background:rgba(var(--fg-rgb),.16);transform:scaleX(0);transition:transform 1800ms var(--ease) 500ms}
.hero-ground .hz.l{left:0;width:calc(var(--hz-l,0px) - 18px);transform-origin:100% 50%}
.hero-ground .hz.r{right:0;width:calc(var(--hz-l,0px) - 18px);transform-origin:0 50%}
.hero-ground.on .hz{transform:none}
.hero-open{position:absolute;inset:0;pointer-events:none}
.hero-frame{position:absolute;overflow:hidden;background:#1E0F1A;transform-origin:50% 50%;will-change:transform;border-radius:3px;pointer-events:auto}
.hero-film,.hero-still,.hero-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-film{opacity:0;transition:opacity 400ms var(--ease-out)}
.hero-film.on{opacity:1}
.hero-night{position:absolute;inset:0;background:#1E0F1A;opacity:0;transition:opacity 800ms var(--ease);pointer-events:none}
.night .hero-night{opacity:.3}
.hero-veil{position:absolute;inset:0;background:#1E0F1A;opacity:0;pointer-events:none}
.hero-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--fg);transform:scaleX(0)}
.hero-lk{position:absolute;left:50%;top:50%;width:min(76vw,460px);transform:translate(-50%,-50%);color:var(--fg);pointer-events:none;z-index:2}
.hero-lk svg{width:100%;height:auto;overflow:visible;display:block}
.hero:not(.settled) .hero-lk{transition:color 900ms var(--ease)}
/* the words, centred below the film, never over it */
.hero-head{position:absolute;left:50%;transform:translateX(-50%);display:grid;justify-items:center;text-align:center;gap:14px;z-index:2}
.hero-h{position:relative;font-size:clamp(44px,5.4vw,84px);line-height:1;text-wrap:balance}
.hero-head .echo{position:absolute;left:-50vw;right:-50vw;text-align:center;top:-.12em;font-family:var(--serif);font-style:italic;font-size:clamp(70px,9vw,150px);white-space:nowrap;color:var(--fg);opacity:1;pointer-events:none;line-height:1;z-index:-1}
.hero-head .echo{color:rgba(var(--fg-rgb),.06)}
.hero-sub{color:var(--fg);max-width:40ch;text-wrap:balance}
/* subline treatments (Preview tab): small capitals, tracked (default), or the serif in italic */
.hero-sub.sub-caps{font-family:var(--sans);font-weight:500;font-size:clamp(12px,1vw,14px);letter-spacing:.16em;text-transform:uppercase}
.hero-sub.sub-serif{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,30px);line-height:1.15}
.hero-pp{position:absolute;z-index:3;right:8px;bottom:8px;color:#EADFCB;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));opacity:0;pointer-events:none;transition:opacity 600ms var(--ease-out)}
.hero.settled .hero-pp{opacity:1;pointer-events:auto}
@media (max-width:699px){.hero-h{font-size:clamp(40px,11.5vw,54px)}.hero-head .echo{font-size:clamp(56px,17vw,80px)}}
@media (max-height:500px) and (min-width:700px){.hero-h{font-size:40px}.hero-head{gap:8px}}

/* ---------- shared: the faint italic echo ---------- */
.echo-back{opacity:.06}

/* ---------- 3. approach: "Care in every frame." (round 5 rebuild) ---------- */
.approach{position:relative}
.ap-track{position:relative;height:420svh}
.ap-stick{position:sticky;top:0;height:100svh;overflow:hidden;contain:paint}
.ap-drift{position:absolute;inset:0;z-index:1;pointer-events:none}
.ap-col{position:absolute;top:0;display:flex;flex-direction:column;will-change:transform;backface-visibility:hidden}
.ap-col .dr{margin:0;overflow:hidden;border-radius:2px;background:var(--tonal-ph,rgba(211,197,170,.35));aspect-ratio:3/2;flex:none}
.ap-col .dr img{display:block;width:100%;height:100%;object-fit:cover}
/* Mac and wide screens: two columns either side of the words; the second photograph of each pair is narrower,
   set to the outer edge, which gives each column a calm rhythm */
.approach.wide .ap-drift .dr{position:absolute;top:0;margin:0;overflow:hidden;border-radius:2px;background:var(--tonal-ph,rgba(211,197,170,.35));aspect-ratio:3/2;will-change:transform;backface-visibility:hidden;box-shadow:0 18px 40px -24px rgba(30,15,26,.35)}
.approach.wide .ap-drift .dr.up{aspect-ratio:2/3}
.approach.wide .ap-drift .dr.far{z-index:1;opacity:.93}
.approach.wide .ap-drift .dr.mid{z-index:2}
.approach.wide .ap-drift .dr.near{z-index:3}
.ap-drift .dr img,.ap-drift .dr-move{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ap-drift .dr-move{opacity:0;transition:opacity 400ms var(--ease-out)}
.ap-drift .dr-move.on{opacity:1}
/* fix round 2 Nov (Matthew: on the phone the moving photographs "don't seem to be autoplaying"): since round 8b the
   phone's column sits outside the drift layer, so its films had no place of their own: each sat below its still,
   clipped out of sight, and a phone will not play a film that cannot be seen. They now lie over their stills and
   fade in on their first frame, as on a Mac (Reduce Motion still hides them, below) */
.ap-col .dr{position:relative}
.ap-col .dr-move{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 400ms var(--ease-out)}
.ap-col .dr-move.on{opacity:1}
.ap-col .dr{position:relative}
.approach.wide .ap-copy{position:absolute;left:50%;top:50%;width:24vw;transform:translate(-50%,-50%);z-index:2}
.approach.wide .ap-copy .echo-front{font-size:clamp(40px,4.2vw,72px)}
.approach.wide .ap-copy .readon{font-size:clamp(22px,1.7vw,29px);max-width:none}
/* phone: one column of near-full-width photographs passing beneath the words on a quiet band of ground */
.approach:not(.wide) .ap-col.P{left:4vw;right:4vw;gap:24px;align-items:center}
/* round 8b: the phone's column moves with the page's own scrolling, beneath the held words (the stage sits above it, see
   from the band down) */
.approach:not(.wide) .ap-track>.ap-col.P.native{z-index:1;will-change:auto;backface-visibility:visible;transform:none}
.approach:not(.wide) .ap-track>.ap-stick{z-index:2}
.approach:not(.wide) .ap-copy .readon .w>span{will-change:opacity}
.approach:not(.wide) .ap-col .dr.w1{width:100%}
.approach:not(.wide) .ap-col .dr.w2{width:84%;align-self:flex-start}
.approach:not(.wide) .ap-col .dr.w2:nth-child(4n){align-self:flex-end}
.approach:not(.wide) .ap-copy{position:absolute;left:0;right:0;top:0;z-index:2;padding:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 8px) 20px 22px;background:rgb(var(--bg-rgb))}
.approach:not(.wide) .ap-copy::after{content:"";position:absolute;left:0;right:0;top:100%;height:48px;background:linear-gradient(rgb(var(--bg-rgb)),rgba(var(--bg-rgb),0));pointer-events:none}
.approach:not(.wide) .ap-copy .echo-front{font-size:clamp(38px,10.6vw,46px)}
.approach:not(.wide) .ap-copy .readon{font-size:24px;line-height:1.2;max-width:none}
.ap-copy{display:grid;justify-items:center;text-align:center;gap:clamp(14px,2vw,26px)}
.ap-copy .echo{width:100%;display:block;text-align:center}
.ap-copy .echo-back{left:50%;margin-left:-60vw}
.ap-copy .echo-front{text-wrap:balance}
.ap-copy .readon{line-height:1.22;color:var(--fg);text-wrap:pretty}
/* the echo behind the heading stays behind the photographs on a Mac */
.approach.wide .ap-copy{z-index:auto}
.approach.wide .ap-copy .echo-front,.approach.wide .ap-copy .readon{position:relative;z-index:2}
.approach.wide .ap-copy .echo-back{z-index:0}
/* phone landscape: the words are smaller so they fit the short screen */
@media (max-height:500px) and (min-width:700px){.approach.wide .ap-copy .echo-front{font-size:clamp(30px,4vw,44px)}.approach.wide .ap-copy .readon{font-size:24px}}
/* reduced motion: the words, then the photographs as a still, composed collage */
@media (prefers-reduced-motion:reduce){.ap-track{height:auto!important}.ap-stick{position:relative;height:auto;overflow:visible;contain:none;padding:calc(var(--bar-h) + 48px) 0 64px}.ap-drift{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:48px var(--gut) 0}.approach .ap-copy,.approach.wide .ap-copy,.approach:not(.wide) .ap-copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:640px;margin:0 auto;padding:0 20px;background:none}.approach:not(.wide) .ap-copy::after{display:none}.ap-col{position:static;display:contents}.ap-col .dr{width:100%!important}}

/* ---------- 4. services ---------- */
.svc{position:relative;padding:clamp(96px,14vw,180px) 0 clamp(80px,12vw,150px);isolation:isolate}
.svc-in{position:relative;z-index:1;display:grid}
.svc-head{position:relative;z-index:2;padding:18px 0 10px}
.svc .echo{margin:6px 0 clamp(18px,3vw,30px)}
.svc .echo-front,.map .echo-front{font-size:clamp(44px,8.6vw,92px)}
/* round 6: "Services", larger, over its faint italic line (A) or the turning words (B) */
.svc .svc-h{font-size:clamp(64px,13vw,168px);line-height:.95;letter-spacing:-.01em}
.svc-echo{position:relative}
.svc-echo .echo-back{position:absolute;left:50%;top:50%;margin:0;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:clamp(40px,7.4vw,112px);line-height:1;color:var(--fg);opacity:.07;pointer-events:none;transform-origin:0 50%}
.svc-echo .svc-line{translate:-30% -50%}
.svc-echo .svc-turns{translate:-50% -50%;display:grid;justify-items:center}
.svc-turns .svc-turn{grid-area:1/1;opacity:0;transform:translateY(40%);transition:opacity 700ms var(--ease),transform 900ms var(--ease)}
.svc-turns .svc-turn.on{opacity:1;transform:none}
.svc-echo .svc-h{position:relative;z-index:1}
.svc-rows{position:relative;z-index:1;padding-bottom:6vh}
.svc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.svc-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms var(--ease);transform:scale(1.03)}
.svc-bg img.on{opacity:1}
.svc-bg .scrim{position:absolute;inset:0;background:rgba(30,15,26,.62);opacity:0;transition:opacity 700ms var(--ease)}
.svc.lit .svc-bg .scrim{opacity:1}
.svc.lit{--fg:#EADFCB;--bg:#1E0F1A;--fg-rgb:234,223,203;--muted:rgba(234,223,203,.74);--line:rgba(234,223,203,.2);color:var(--fg);transition:color 700ms var(--ease)}
.svc.lit .svc-head{background:none}
.svc .rs-row h3{font-size:clamp(30px,5.4vw,52px)}
/* the full-screen cards (round 5) */
.rs-ov-card.svc-full .rs-ov-scroll{padding-left:var(--gut);padding-right:var(--gut)}
.svc-card{display:grid;gap:18px;width:100%;max-width:1100px;margin:0 auto}
.svc-card .sc-text{display:grid;gap:14px;align-content:start}
.svc-card .sc-media{display:grid;gap:14px;min-width:0}
.svc-card h2{font-size:clamp(44px,7vw,84px)!important;padding-right:56px;text-wrap:balance}
.svc-card h3{text-wrap:balance}
.svc-card .line{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--muted);text-wrap:balance}
.svc-card .body{font-size:17px;color:var(--muted);max-width:46ch;text-wrap:pretty}
.svc-card .imgw{position:relative;overflow:hidden;border-radius:3px}
.svc-card .imgw img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.svc-card .media{position:relative}
.svc-card .note{font-size:13px}
.card-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-top:12px}
.svc-card .stack{display:grid;gap:14px}
@media (max-width:699px){.svc-card .big,.svc-card .imgw.big,.svc-card .strip-track,.svc-card .stack>.media{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut))}.svc-card .big .pl,.svc-card .imgw.big,.svc-card .stack .pl{border-radius:0}.svc-card .strip-track{padding:0 var(--gut);scroll-padding:0 var(--gut)}}
/* Mac: words on the left, the media on the right, sized to the screen: nothing scrolls inside the card */
.rs-ov-card.svc-full.fit .rs-ov-scroll{overflow:hidden;padding:clamp(48px,7vh,72px) clamp(32px,4vw,64px) clamp(28px,4vh,44px);display:block}
.rs-ov-card.svc-full.fit .svc-card{max-width:1480px;height:100%;grid-template-columns:minmax(260px,30%) 1fr;gap:clamp(32px,4vw,64px);align-items:stretch}
.rs-ov-card.svc-full.fit .sc-text{align-content:center;padding-bottom:4vh}
.rs-ov-card.svc-full.fit .sc-media{height:100%;min-height:0;align-content:center;justify-items:center}
.rs-ov-card.svc-full.fit h2{font-size:clamp(44px,5vw,80px)!important}
.rs-ov-card.svc-full.fit .media.big,.rs-ov-card.svc-full.fit .steps{width:100%;max-height:100%}
/* a 16:9 film as large as the media area allows, whole */
.rs-ov-card.svc-full.fit .pl.land{width:min(100%,calc((100vh - 32px - clamp(48px,7vh,72px) - clamp(28px,4vh,44px) - 56px) * 16 / 9));margin:0 auto}
/* steps: one at a time, arrows at the sides, the counter beneath */
.steps{position:relative;display:grid;gap:14px;justify-items:center}
.steps-stage{position:relative;width:100%;display:grid}
.step{grid-area:1/1;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity 600ms var(--ease),visibility 0s linear 600ms}
.step.on{opacity:1;visibility:visible;transition:opacity 600ms var(--ease),visibility 0s}
.steps-p,.steps-n{position:absolute;top:calc(50% - 30px);z-index:3;color:var(--fg)}
.steps-p{left:-56px}.steps-n{right:-56px}
.steps-ctl{display:flex;justify-content:center}
/* Photography on a Mac: six tappable photographs */
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,calc((100vh - 220px) * 1.5 * 3 / 2));align-self:center}
.ph-item{padding:0;border-radius:2px;overflow:hidden;display:block}
.ph-item img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block;transition:transform 900ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ph-item:hover img{transform:scale(1.03)}}
.vis-label{position:absolute;left:12px;top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#EADFCB;background:rgba(30,15,26,.82);padding:6px 10px;border-radius:999px;z-index:2}
.vis-part{display:grid;gap:14px;padding-top:clamp(20px,4vw,48px)}
.vis-part h3{font-size:clamp(30px,4vw,52px)}
.vis-part .line.under{font-size:clamp(19px,2vw,24px)}
.svc-card h3{font-size:clamp(30px,3vw,46px)}
/* the player */
.pl{position:relative;overflow:hidden;border-radius:3px;background:#1E0F1A}
.pl video{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover}
/* round 7c: the film's first frame above it until it really plays (kit/media.js coverPoster) */
.pl-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;z-index:1;opacity:1;transition:opacity 200ms var(--ease-out)}
.pl-cover.off{opacity:0}
.pl-ctl{z-index:2}
.fslide{position:relative}
/* round 7b: a film's first frame also sits behind it (kit/media.js backdrop), framed as the film is */
video{background-position:center;background-repeat:no-repeat;background-size:cover}
.rs-ph-layer video,.plan-morph video{background-size:contain}
.pl.vert video{aspect-ratio:9/16}
.pl-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:6px;pointer-events:none;background:linear-gradient(rgba(30,15,26,0),rgba(30,15,26,.28))}
.pl-ctl .ic,.pl-r{pointer-events:auto}
.pl-r{display:flex;gap:2px}
.pl .ic{color:#EADFCB;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
.tile-pp{position:absolute;left:6px;bottom:6px;z-index:3;color:#EADFCB;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
/* Photography on a phone: one large photograph, then the sideways strip with arrows at its sides */
.strip{position:relative;display:grid;gap:14px;margin-top:6px}
.strip-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.strip-track::-webkit-scrollbar{display:none}
.strip-item{flex:0 0 78%;scroll-snap-align:start;border-radius:2px;overflow:hidden;padding:0}
.strip-item img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block}
.strip-p,.strip-n{position:absolute;top:calc(50% - 40px);z-index:2;color:#EADFCB;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5));display:none}
.strip-p{left:4px}.strip-n{right:4px}
.strip-ctl{display:flex;align-items:center;justify-content:center;gap:12px}
/* phone on its side: bigger photographs, arrows at the sides */
@media (orientation:landscape) and (max-height:500px){.strip-item{flex-basis:70%}.strip-p,.strip-n{display:block}.svc-card .imgw.big img{aspect-ratio:21/9}}
/* Aerial */
.svc-aerial .line{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.6vw,52px);color:var(--fg)}
/* Floor plans */
.plan{display:block;overflow:hidden;border-radius:3px;background:var(--wash);padding:0}
.plan img{width:100%;height:auto;display:block}
.rs-ov-card.svc-full.fit .step .plan{width:auto;height:calc(100vh - 32px - 200px);max-width:100%;background:none}
.rs-ov-card.svc-full.fit .step .plan img{height:100%;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.stack.plans{grid-template-columns:1fr 1fr;align-items:start}
.stack.plans .plan-morph{grid-column:1 / -1}
.plan-morph{position:relative;display:grid;gap:8px;justify-items:center;width:100%}
.plan-morph video{width:100%;aspect-ratio:1300/1620;height:auto;object-fit:contain;background:#fff;border-radius:3px}
.rs-ov-card.svc-full.fit .plan-morph video{width:auto;height:calc(100vh - 32px - 240px);max-width:100%}
.plan-replay{font-size:13px}
/* Social: a calm phone-width frame, like the app; the words beside it (Mac) or above it (phone) */
.feed-frame{width:min(100%,390px);margin:0 auto}
.feed{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.feed-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.feed-scroll::-webkit-scrollbar{display:none}
.rs-ov-card.svc-full.fit .svc-social .feed-frame{height:100%;display:flex}
.rs-ov-card.svc-full.fit .svc-social .feed{flex:1;display:flex;flex-direction:column;box-shadow:0 30px 80px -30px rgba(0,0,0,.35)}
.rs-ov-card.svc-full.fit .svc-social .feed-scroll{flex:1;min-height:0}
.fpost{display:grid;gap:10px;padding:10px 0 22px}
.fhead{display:flex;align-items:center;gap:10px;padding:2px 14px}
.fhead .av{width:28px;height:28px;border-radius:50%;background:#1E0F1A;color:#EADFCB;display:grid;place-items:center;padding:5px;flex:none}
.fhead .av svg{width:18px;height:18px}
.fhead b{font-weight:600;font-size:14px}
.fmedia{position:relative}
.fpl{border-radius:0}
.ftrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ftrack::-webkit-scrollbar{display:none}
.fslide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;background:#1E0F1A}
.fslide video,.fslide img{width:100%;height:100%;object-fit:cover;display:block}
.fa-p,.fa-n{position:absolute;top:calc(50% - 22px);z-index:2;color:#EADFCB;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5));transition:opacity 300ms var(--ease)}
.fa-p{left:2px}.fa-n{right:2px}
.fa-p:disabled,.fa-n:disabled{opacity:0;pointer-events:none}
@media not ((hover:hover) and (pointer:fine)){.fa-p,.fa-n{display:none}}
.fdots{display:flex;justify-content:center;gap:6px}
.fdots i{width:5px;height:5px;border-radius:50%;background:var(--fg);opacity:.25;transition:opacity 400ms var(--ease)}
.fdots i.on{opacity:.9}
.fcap{padding:0 14px;font-size:14px;line-height:1.45;color:var(--fg)}
.fcap span{color:var(--muted)}

/* ---------- 5. gallery ---------- */
.gal{position:relative;padding:clamp(40px,8vw,90px) 0 clamp(90px,12vw,160px)}
.squeeze{position:relative;height:230vh}
.sq-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;padding:0 var(--gut);overflow:hidden}
.sq-h{display:flex;align-items:center;justify-content:center;column-gap:24px;margin:0;font-weight:400;width:100%}
.sq-w{font-family:var(--serif);font-size:clamp(40px,6.4vw,92px);line-height:1.05;white-space:nowrap;will-change:transform;padding-bottom:.22em;margin-bottom:-.22em} /* build 2: room for the g's tails (his phone cut them off) */
.sq-photo{display:block;overflow:hidden;flex:none;will-change:clip-path}
.sq-photo img{width:100%;height:100%;object-fit:cover;will-change:transform}
@media (max-width:699px){
  .sq-h{flex-direction:column;row-gap:16px}
  .sq-w{font-size:clamp(40px,11vw,56px)}
  .sq-w.a{align-self:flex-start}.sq-w.b{align-self:flex-end}
}
.gal-body{margin-top:clamp(24px,5vw,60px)}
.gal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100vw - 2 * var(--gut) - 8px) / 2 / 1.5);grid-auto-flow:row dense;gap:8px;padding:0 var(--gut);max-width:calc(var(--wide) + 2 * var(--gut));margin:0 auto}
.gal-grid .tile.big{grid-column:span 2;grid-row:span 2}
.gal-grid .tile.port{grid-row:span 2}
@media (min-width:700px){.gal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;grid-auto-rows:calc((min(100vw, var(--wide) + 2 * var(--gut)) - 2 * var(--gut) - 28px) / 3 / 1.5)}}
.tile{position:relative;display:block;overflow:hidden;border-radius:2px;background:var(--wash);width:100%;height:100%;padding:0}
.tile-btn{display:block;width:100%;height:100%;padding:0}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tile:hover img,.tile:hover video{transform:scale(1.045)}}
/* spaced: a set rhythm on a twelve-column grid */
.spaced{position:relative;padding:clamp(40px,8vw,120px) var(--gut);overflow:hidden;max-width:1440px;margin:0 auto;--sp-u:1vw}
.sp-name{position:absolute;inset:0;display:grid;place-items:start center;pointer-events:none;overflow:hidden}
.sp-name span{font-family:var(--serif);font-style:italic;font-size:clamp(120px,26vw,420px);line-height:1;color:var(--fg);opacity:.06;white-space:nowrap;will-change:transform;margin-top:10vh}
.sp-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(10px,2vw,28px);row-gap:clamp(48px,9vw,140px);align-items:start}
.spaced .tile,.spaced .tile-btn{height:auto}
.spaced .tile img,.spaced .tile video{height:auto;aspect-ratio:3/2}
.spaced .tile.port img{aspect-ratio:2/3}
.sp-grid .tile[data-beat="0"]{grid-column:1 / span 7}
.sp-grid .tile[data-beat="1"]{grid-column:9 / span 4;margin-top:-18vw}
.sp-grid .tile[data-beat="2"]{grid-column:4 / span 6;margin-top:6vw}
.sp-grid .tile[data-beat="3"]{grid-column:1 / span 4}
.sp-grid .tile[data-beat="4"]{grid-column:6 / span 7;margin-top:10vw}
.sp-grid .tile[data-beat="5"]{grid-column:3 / span 8}
@media (min-width:1440px){.sp-grid .tile[data-beat="1"]{margin-top:-260px}.sp-grid .tile[data-beat="2"]{margin-top:86px}.sp-grid .tile[data-beat="4"]{margin-top:144px}}
@media (max-width:699px){
  .sp-grid{row-gap:44px}
  .sp-grid .tile[data-beat]{margin-top:0}
  .sp-grid .tile[data-beat="0"],.sp-grid .tile[data-beat="4"]{grid-column:1 / span 12}
  .sp-grid .tile[data-beat="1"]{grid-column:5 / span 8}
  .sp-grid .tile[data-beat="2"]{grid-column:1 / span 9}
  .sp-grid .tile[data-beat="3"]{grid-column:3 / span 10}
  .sp-grid .tile[data-beat="5"]{grid-column:2 / span 10}
}

/* ---------- 6. films: layout A ---------- */
.films{padding:clamp(80px,12vw,160px) 0;overflow:hidden}
.films .echo{margin:6px 0 clamp(26px,5vw,52px)}
.film-wrap{max-width:calc(1440px + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.film-a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr) minmax(0,1fr);gap:clamp(12px,1.6vw,22px);align-items:center}
.film-cell{position:relative}
.film-cell .pv-tag.on-media{top:12px;bottom:auto}
@media (max-width:699px){
  /* phone: the landscape film full width, then the two portrait films side by side: plainly three films, no
     sideways swipe, nothing moved by script */
  .film-a{grid-template-columns:1fr 1fr;gap:10px}
  .film-cell.main{grid-column:1 / -1;order:-1}
}
}

/* ---------- 7. the craft ---------- */
.craft{padding:clamp(70px,10vw,140px) 0 clamp(30px,5vw,60px)}
.craft-in{display:grid;gap:14px;max-width:calc(1100px + 2 * var(--gut))}
.craft-ctl{display:flex;align-items:center;justify-content:center;gap:12px}
/* 8. merge */
.merge{position:relative}
/* 9. (round 8: the second day-to-evening house is gone; the hero is the page's one day to evening) */

/* ---------- 10. map ---------- */
.map{padding:clamp(80px,12vw,160px) 0}
.map-in{display:grid;justify-items:center;text-align:center;gap:10px}
.map .echo{width:100%;display:block;text-align:center}
.map .echo-back{left:50%;margin-left:-60vw}
.map-line{font-family:var(--serif);font-style:italic;font-size:clamp(24px,4vw,34px);color:var(--fg)}
.pmap{position:relative;width:min(100%,1240px);margin:clamp(16px,4vw,40px) 0;color:var(--fg)}
@media (max-width:699px){.pmap{width:100vw;justify-self:center;margin-left:0;margin-right:0}}
.pmap canvas{position:absolute;inset:0;width:100%;height:100%}
.pmap-names{position:absolute;inset:0;opacity:0;transition:opacity 700ms var(--ease-out)}
.pmap.named .pmap-names{opacity:1}
.pmap-d{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:currentColor}
/* every town the same size; a soft halo of the page colour keeps each name clear of the paint */
.pmap-t{position:absolute;white-space:nowrap;font-family:var(--serif);font-size:clamp(13px,1.35vw,19px);line-height:1.1;color:var(--fg);text-shadow:0 0 6px rgb(var(--bg-rgb)),0 0 3px rgb(var(--bg-rgb)),0 0 1px rgb(var(--bg-rgb))}
.pmap-t.river{font-style:italic;font-size:clamp(12px,1.15vw,16px);letter-spacing:.02em;opacity:.85}
@media (max-width:699px){.pmap-t{font-size:12px}.pmap-t.river{font-size:11px}.pmap-d{width:4px;height:4px;margin:-2px 0 0 -2px}}

/* ---------- 11. contact: the offer and the form ---------- */
.contact{padding:clamp(80px,12vw,160px) 0 clamp(70px,10vw,130px)}
.contact-in{display:grid;gap:clamp(30px,5vw,72px)}
@media (min-width:900px){.contact-in{grid-template-columns:5fr 7fr;align-items:start}}
.contact-head{display:grid;gap:20px;align-content:start}
.contact-head .offer{font-size:clamp(46px,7.4vw,96px);line-height:1.02;max-width:11ch}
.offer-link{font-size:15px;color:var(--muted)}
.mail{font-size:18px}
.mail-l{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;display:inline-flex;min-height:44px;align-items:center}
.contact-card{position:relative;padding:clamp(24px,4.4vw,56px);border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(var(--fg-rgb),.075),rgba(var(--fg-rgb),.018) 60%,rgba(var(--fg-rgb),.045)),var(--bg);box-shadow:0 30px 80px -40px rgba(0,0,0,.45)}
.form{display:grid;gap:26px}
.form-h{font-size:clamp(28px,3vw,38px)}
.fgrid{display:grid;gap:26px}
@media (min-width:700px){.fgrid{grid-template-columns:1fr 1fr;column-gap:28px}}
.fld{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.fld label,.fld legend{font-size:13px;letter-spacing:.06em;color:var(--muted);padding:0}
.fld input,.fld textarea{font:inherit;font-size:19px;color:var(--fg);background:transparent;border:0;border-bottom:1px solid rgba(var(--fg-rgb),.34);border-radius:0;padding:12px 0;min-height:52px;transition:border-color 300ms var(--ease),box-shadow 300ms var(--ease)}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--fg);box-shadow:0 1px 0 0 var(--fg)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:none}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
/* round 8: the last field, several lines (it grows by hand, never sideways) */
.fld textarea{line-height:1.4;resize:vertical;min-height:84px;max-height:40vh;display:block;width:100%;box-sizing:border-box}
.urg{display:flex;flex-wrap:wrap;gap:10px}
.urg legend{margin-bottom:10px;width:100%}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:999px;font-size:15px;color:var(--muted);transition:background-color 240ms var(--ease),color 240ms var(--ease),border-color 240ms var(--ease)}
.chip input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip input:focus-visible+span{outline:2px solid var(--fg);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.chip:hover span{border-color:rgba(var(--fg-rgb),.5)}}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:6px}
.rs-btn.solid{background:var(--fg);color:var(--bg);min-height:54px;padding:0 36px}
.rs-btn.solid.card-cta{min-height:48px;padding:0 28px}
.rs-btn.solid::before{background:var(--bg)}
.rs-btn.solid:hover,.rs-btn.solid:focus-visible{color:var(--fg)}
.form-note{font-size:14px;color:var(--muted)}
.thanks[hidden],.form[hidden]{display:none!important}
.thanks{display:grid;gap:14px;padding:clamp(20px,4vw,40px) 0;outline:none}
.thanks h3{font-size:clamp(40px,5vw,64px)}
.thanks p{color:var(--muted);font-size:18px}
/* final polish (5b): the fitted sign-off in the request panel; the message is centred, the icon draws in above it,
   the email line goes, and neither the message nor the panel shows a focus box (focus still moves to the message) */
.thanks:focus-visible,.rs-pn:focus-visible{outline:none}
.rs-pn.ty-done .thanks{justify-items:center;text-align:center;padding:8px 0 18px}
.rs-pn.ty-done .thanks p{max-width:34ch}
.rs-pn.ty-done .form-mail{display:none}
.ty-ic{width:clamp(64px,9vw,84px);height:auto;color:var(--fg);margin-bottom:6px;overflow:visible}
.ty-ic use{transform-box:view-box}
.signoff{font-family:var(--serif);font-style:italic;font-size:clamp(46px,8vw,112px);text-align:center;margin:clamp(90px,12vw,170px) auto 0;padding:0 var(--gut);line-height:1.05;width:max-content;max-width:100%}

/* ---------- 12. footer ---------- */
.foot{display:grid;align-content:start}
.foot-in{gap:clamp(36px,6vw,72px);width:100%}
.foot-tag{font-family:var(--serif);font-size:clamp(34px,6vw,64px);line-height:1.06;max-width:16ch}
.foot-cols{display:grid;gap:28px}
@media (min-width:900px){.foot-cols{grid-template-columns:1fr auto;align-items:end}}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 8px}
.foot-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;margin-left:-12px;text-decoration:none;font-size:16px;letter-spacing:.02em;isolation:isolate;transition:color 520ms var(--ease)}
.foot-nav a+a{margin-left:0}
.foot-nav a::before{content:"";position:absolute;inset:6px 0;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;transition:transform 640ms var(--ease);z-index:-1;border-radius:2px}
@media (hover:hover) and (pointer:fine){.foot-nav a:hover{color:var(--bg)}.foot-nav a:hover::before{transform:none}}
.foot-nav a:focus-visible{color:var(--bg)}.foot-nav a:focus-visible::before{transform:none}
.foot-side{display:grid;gap:10px;justify-items:start}
@media (min-width:900px){.foot-side{justify-items:end}}
.foot-mail a{font-size:20px;display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.foot-ctl{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-word{width:min(100%,820px);color:var(--fg);opacity:.92;padding-top:clamp(40px,8vw,110px)}
.foot-word svg{width:100%;height:auto;display:block}
.foot-legal{font-size:12px;color:var(--muted);max-width:62ch}
.foot-low{position:absolute;left:0;right:0;bottom:0;height:260px;z-index:0}
/* the deep foot is Blackberry in both themes: its words are Chalk */
.foot .foot-word,.foot .foot-legal{position:relative;z-index:1}
.ap-copy .readon .w span{transition:none}
/* a film in the browser's own full screen: the film fills it, its controls stay */
.rs-ov-card.svc-full.fit .svc-card{grid-template-rows:minmax(0,1fr)}
.rs-ov-card.svc-full.fit .svc-social .sc-media{display:flex;justify-content:center;align-items:stretch;height:100%;min-height:0}
.fpost .pl.vert video{aspect-ratio:4/5}
/* the "Copied" notice: a small solid pill (no glass), at the foot of the screen, for two seconds */
.rs-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:300;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:10px 18px;border-radius:999px;background:#1E0F1A;color:#EADFCB;font-size:14px;letter-spacing:.04em;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.night .rs-toast{background:#EADFCB;color:#1E0F1A}
.rs-toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.rs-toast{transform:translate(-50%,0)}}
/* ---------- controls (round 5): pointer, a refined hover only where there is a real pointer, a press you can
   feel (0.98 at 120 ms, also on touch), no tap flash, and a clear focus ring in the theme's ink ---------- */
a,button,.rs-btn,.rs-link,label.chip{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.rs-btn{transition:color 280ms var(--ease),transform 120ms var(--ease),border-color 280ms var(--ease)}
.rs-btn::before{transition:transform 320ms var(--ease)}
.rs-btn:hover,.rs-btn:hover::before{color:inherit}
.rs-btn:hover::before{transform:translateY(101%)}
@media (hover:hover) and (pointer:fine){
  .rs-btn:hover{color:var(--bg);border-color:var(--fg)}
  .rs-btn:hover::before{transform:none}
  .rs-btn.solid:hover{color:var(--fg)}
}
.rs-btn:focus-visible{color:var(--bg)}.rs-btn:focus-visible::before{transform:none}
.rs-btn.solid:focus-visible{color:var(--fg)}
.rs-btn:active{transform:scale(.98)}
.rs-link{transition:background-size 280ms var(--ease),opacity 200ms var(--ease),transform 120ms var(--ease)}
.rs-link:hover{background-size:100% 1px;background-position:0 calc(100% - 10px)}
@media (hover:hover) and (pointer:fine){.rs-link:hover{background-size:0 1px;background-position:100% calc(100% - 10px)}}
.rs-link:active{transform:scale(.98)}
.ic:active svg{transform:scale(.94);transition:transform 120ms var(--ease)}
.ic:hover .ring{transform:none}
@media (hover:hover) and (pointer:fine){.ic:hover .ring{transform:rotate(90deg)}}
/* Send: quiet until the form is ready, then fully inked */
.rs-btn.solid.not-ready{opacity:.55}
.rs-btn.solid{transition:opacity 280ms var(--ease),color 280ms var(--ease),transform 120ms var(--ease)}
/* service row taglines: room for two lines on a phone, so every tagline fits its row at 320 to 430 px */
@media (max-width:699px){.svc .rs-rows{--tl:calc(14px * 1.45 * 2 + 6px)}.svc .rs-row .tl p{line-height:1.45;text-wrap:balance;padding-right:4px}}
.gal-grid .tile.full{grid-column:1 / -1;grid-row:span 2}
.gal-grid .tile[hidden]{display:none}
/* craft labels: on a soft backing, so they read over any photograph, in both themes */
.ws .tag{top:28px;padding:6px 10px;border-radius:999px;background:rgba(30,15,26,.58);color:#EADFCB;opacity:1;text-shadow:none;font-weight:500}
.ws .tag.l{left:14px}.ws .tag.r{right:14px}
/* any small label laid over a photograph or film sits on the same backing */
.vis-label,.pv-tag.on-media{background:rgba(30,15,26,.72);color:#EADFCB}
/* the form, tighter (round 5): less air between fields, calm error states under a field, never red */
.form,.fgrid{gap:20px}
.fld-err{min-height:0;font-size:13px;color:var(--fg);opacity:0;transform:translateY(-3px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.fld-err:not(:empty){opacity:.86;transform:none;min-height:1.2em}
/* final polish (5i): the "Did you mean ...?" line under the email field (its own line, never the error line) */
.fld-sug{margin:2px 0 0;font-size:13px;line-height:1.3}
.fld-sug[hidden]{display:none}
.fld-sug-btn{font:inherit;color:var(--fg);background:none;border:0;padding:6px 0;margin:-6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-align:left;-webkit-tap-highlight-color:transparent}
.fld.bad input{border-bottom-color:var(--ochre);box-shadow:0 1px 0 0 var(--ochre)}
.fld.bad .fld-err::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;background:var(--ochre);vertical-align:middle}
.fld input,.fld textarea{font-size:18px}

/* ---------- 12. footer (round 5): small, minimal, a clear start ---------- */
.deep{background:var(--bg)!important}
.deep.grain::after{display:none}
.foot{position:relative;overflow:hidden;padding:clamp(48px,7vw,80px) var(--gut) calc(clamp(28px,4vw,44px) + env(safe-area-inset-bottom,0px));background:var(--foot-bg);color:var(--fg)}
:root{--foot-bg:#B5C5CB}
.night .foot,:root[data-theme="dark"] .foot{--foot-bg:rgb(20,9,17)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot{--foot-bg:rgb(20,9,17)}}
/* a faint, static grain over the footer's tone, so its gradient into the page never bands */
.foot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.foot-rule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(var(--fg-rgb),.22);z-index:2}
.foot-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:grid;gap:clamp(28px,4vw,44px)}
.foot-brand{position:relative;display:grid;justify-items:center;text-align:center;gap:10px;padding:clamp(16px,3vw,30px) 0}
.foot-mark{position:absolute;left:50%;top:50%;width:clamp(200px,24vw,300px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;color:var(--fg);pointer-events:none;right:auto;bottom:auto}
.foot-mark svg{width:100%;height:100%;overflow:visible}
.foot-word{width:min(78vw,300px);color:var(--fg);opacity:1;padding:0}
.foot-word svg{width:100%;height:auto;display:block}
.foot-tag{font-family:var(--serif);font-size:clamp(18px,1.8vw,22px);line-height:1.2;max-width:none;padding-top:6px}
.foot-legal{font-size:12px;color:var(--muted);max-width:52ch;text-wrap:balance}
.foot-row{display:grid;gap:14px;justify-items:center;text-align:center;padding-top:clamp(14px,2vw,22px);border-top:1px solid rgba(var(--fg-rgb),.14)}
@media (min-width:900px){.foot-row{grid-template-columns:1fr auto auto;justify-items:start;align-items:center;column-gap:32px}.foot-ctl{justify-self:end}}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px}
.foot-nav a{font-size:15px}
.foot-mail a{font-size:16px}
.foot-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.foot .foot-low{display:none}
.foot-nav a,.foot-nav a+a{padding:0 9px;margin-left:0;font-size:15px}
@media (max-width:399px){.foot-nav a,.foot-nav a+a{padding:0 7px;font-size:14px}}
/* overscroll colours and link landings */
html.at-foot{background:var(--foot-bg)}
section[id],#contact-form{scroll-margin-top:calc(var(--bar-h) + env(safe-area-inset-top,0px))}
/* the viewer on a phone held sideways: arrows at the sides, the counter and X kept clear of the photograph */
@media (orientation:landscape) and (max-height:500px){
  .rs-ph-layer .rs-ph-prev,.rs-ph-layer .rs-ph-next{position:fixed;top:50%;margin-top:-22px;z-index:3}
  .rs-ph-layer .rs-ph-prev{left:max(10px,env(safe-area-inset-left,0px))}
  .rs-ph-layer .rs-ph-next{right:max(10px,env(safe-area-inset-right,0px))}
  .rs-ph-layer .rs-ph-nav,.rs-ph-layer.phone .rs-ph-nav{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .rs-ph-x{top:8px;right:max(10px,env(safe-area-inset-right,0px))}
}
.pv-perf{position:fixed;left:56px;right:12px;width:max-content;max-width:calc(100vw - 68px);pointer-events:none;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:310;padding:8px 12px;border-radius:999px;background:#1E0F1A;color:#EADFCB;font-size:12px;letter-spacing:.02em}
.pv-opts{flex-wrap:wrap;border:0;border-radius:0;padding:0;width:auto}.pv-opts button{border:1px solid var(--line);text-align:left;line-height:1.3;padding:10px 16px;white-space:normal}.pv-note{font-size:13px;color:var(--muted)}
/* the kitchen blend on a phone: its fanned cards stay below the header bar, so the header only ever sits on page */
@media (max-width:699px){.mz-sticky{padding-top:calc(var(--bar-h) + 24px);box-sizing:border-box}}
.vis-under{max-width:none;text-align:center;font-size:clamp(19px,1.6vw,23px);white-space:nowrap}
.rs-ov-card .svc-card p.line.vis-under{max-width:none;text-wrap:nowrap;white-space:nowrap;overflow:visible}
/* Social on a Mac: the phone-sized feed with a quiet index of the posts beside it */
.rs-ov-card.svc-full.fit .svc-social .sc-media.with-index{display:grid;grid-template-columns:minmax(0,390px) minmax(180px,260px);justify-content:center;align-items:center;gap:clamp(32px,4vw,64px)}
.rs-ov-card.svc-full.fit .svc-social .sc-media.with-index .feed-frame{height:100%;width:100%}
.feed-side{display:grid;gap:18px;align-content:center}
.feed-index{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.feed-index button{display:flex;align-items:baseline;gap:14px;min-height:44px;padding:0 0 0 18px;font-size:15px;color:var(--muted);position:relative;text-align:left;transition:color 240ms var(--ease)}
.feed-index button::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:1px;background:var(--fg);transform:scaleY(0);transition:transform 320ms var(--ease)}
.feed-index button[aria-current="true"]{color:var(--fg)}
.feed-index button[aria-current="true"]::before{transform:none}
.feed-index .n{font-family:var(--serif);font-style:italic;font-size:19px}
.rs-ov-card.svc-full.fit .svc-social .sc-media.with-index{grid-template-rows:minmax(0,1fr);height:100%;min-height:0}
@media (prefers-reduced-motion:reduce){.approach .ap-drift .dr{position:relative!important;left:auto!important;width:auto!important;transform:none!important;opacity:1!important}.ap-drift .dr-move{display:none}}
/* ---------- round 6: contact, button first (layout A), and the panel ---------- */
.contact-in.one{grid-template-columns:none!important;justify-items:center;text-align:center;gap:22px;max-width:760px;margin:0 auto}
.contact-in.one .offer{font-size:clamp(46px,7.4vw,96px);line-height:1.02;max-width:12ch;text-wrap:balance}
/* round 7c: one big button (Matthew, 26 Oct) */
.contact-in.one .contact-open{margin-top:clamp(10px,2vw,22px);min-height:64px;padding:0 46px;font-size:19px;font-weight:500;letter-spacing:.02em}
@media (max-width:699px){.contact-in.one .contact-open{width:100%;max-width:420px;min-height:60px;padding:0 24px;font-size:18px}}
.contact-in.one .mail{margin-top:4px}
.form .fld i{font-style:normal;color:var(--faint)}
.rs-btn .t{display:inline-block}
.rs-pn-wrap{position:fixed;inset:0;z-index:170}
.rs-pn-wrap[hidden]{display:none}
.rs-pn-scrim{position:absolute;inset:0;background:var(--veil,rgba(10,4,8,.45))}
.rs-pn{position:absolute;left:50%;top:50%;width:min(620px,calc(100vw - 96px));height:min(820px,calc(100svh - 64px));translate:0 0;transform:translate(-50%,-50%);display:flex;flex-direction:column;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.35);outline:none;overflow:hidden}
.rs-pn-grab{display:none}
.rs-pn-head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:26px 16px 6px 32px}
.rs-pn-title .form-h{font-size:clamp(34px,4vw,46px);line-height:1.05}
.rs-pn-rule{display:block;width:36px;height:1px;margin-top:14px;background:var(--ochre);transform-origin:0 50%}
.rs-pn-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 32px 22px;scrollbar-width:none}
.rs-pn-body::-webkit-scrollbar{display:none}
.rs-pn-form .form{display:grid;gap:22px}
.rs-pn-foot{flex:none;padding:14px 32px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg)}
.rs-pn-send{display:grid;gap:8px;justify-items:stretch}
.rs-pn-send .form-note:empty{display:none}
.form-reply{font-size:14px;color:var(--muted);text-align:center}
/* round 7c: "Or email ..." by Send: a plain caption line, selectable, underlined on hover only (with a mouse), no movement */
.form-mail{font-size:13px;line-height:1.45;color:var(--muted);text-align:center;user-select:text;-webkit-user-select:text}
.form-mail a{color:inherit;text-decoration:none}
/* round 8: the privacy notice by Send is visibly a link */
.form-mail a.priv,.form-mail a.priv:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover){.form-mail a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.form-act .form-mail{text-align:left;flex-basis:100%}
.rs-btn.wide{width:100%}
.csteps{display:flex;gap:6px;margin:0 0 4px}
.csteps i{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.csteps i::after{content:"";position:absolute;inset:0;background:var(--ochre);transform:scaleX(0);transform-origin:0 50%;transition:transform 520ms var(--ease)}
.csteps i.on::after{transform:none}
.cstep{display:grid;gap:22px}
.cstep[hidden]{display:none}
/* phone: a sheet from the bottom, about 90 % of the screen, with a grab handle */
.rs-pn-wrap.sheet .rs-pn{left:0;right:0;top:auto;bottom:0;width:auto;height:90svh;max-height:90svh;transform:none;border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -20px 60px -30px rgba(0,0,0,.6)}
.rs-pn-wrap.sheet .rs-pn-grab{display:grid;place-items:center;flex:none;height:26px;cursor:grab;touch-action:none}
.rs-pn-wrap.sheet .rs-pn-grab::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--line)}
.rs-pn-wrap.sheet .rs-pn-head{padding:4px 10px 4px 22px;touch-action:none}
.rs-pn-wrap.sheet .rs-pn-body{padding:12px 22px 18px}
.rs-pn-wrap.sheet .rs-pn-foot{padding:12px 22px calc(14px + env(safe-area-inset-bottom,0px))}
.rs-pn .fld input{padding:6px 0 8px;min-height:44px}.rs-pn .fld textarea{padding:6px 0 8px;min-height:70px}.rs-pn-form .form{gap:18px}.rs-pn .fld{gap:2px}
/* round 6 footer: the legal line last, centred and quiet; phone links in two even rows (round 8: its links are styled
   in kit.css, shared with the Legal, Privacy and not-found pages) */
.foot-in>.foot-who{justify-self:center;text-align:center;margin:0 0 calc(14px - clamp(28px,4vw,44px));max-width:62ch;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);text-wrap:balance} /* final polish (5m) */
.foot-in>.foot-legal{justify-self:center;text-align:center;margin:0;padding-top:4px;opacity:.85}
/* round 8: while the diary is full the Contact label is the section's heading and looks exactly as before */
h2.rs-label{font-family:var(--sans);line-height:inherit;text-wrap:wrap}
@media (max-width:699px){.foot-nav{display:grid;grid-template-columns:repeat(3,auto);justify-content:center}}
/* round 6: the Preview tab sits low at the left edge, clear of the hero heading on a phone (morning gate 5) */
@media (max-width:699px){.pv-tab{bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:10px 8px;min-height:44px;opacity:.75}}
/* round 6 gallery: the big landscapes alternate sides; the last closes full width */
@media (min-width:700px){.gal-grid .tile.big.side-l{grid-column:1 / span 2}.gal-grid .tile.big.side-r{grid-column:2 / span 2}.gal-grid .tile.big.side-full{grid-column:1 / -1}}
/* round 6 Photography card: the main photograph leads, the six beneath in one row (Mac) */
.svc-photography .ph-lead .ph-item,.svc-photography .ph-lead{display:block;width:100%}
.svc-photography .ph-item{position:relative;display:block;padding:0;border-radius:2px;overflow:hidden;background:var(--wash);aspect-ratio:3/2}
.svc-photography .ph-lead .ph-item{aspect-ratio:16/9}
.svc-photography .ph-item img,.svc-photography .ph-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.svc-photography .ph-item:hover img,.svc-photography .ph-item:hover video{transform:scale(1.04)}}
.svc-photography .ph-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.svc-photography .ph-lead{max-width:calc((100svh - 290px) * 16 / 9)}
/* round 6 Social: the four kinds, and each post's quiet type label */
.ptypes{display:grid;gap:10px;margin:4px 0 0}
.ptypes dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.ptypes dd{margin:0 0 6px;color:var(--muted);font-size:16px;line-height:1.4}
.fhead .ftype{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fmedia.land .pl{aspect-ratio:16/9}
/* round 6 Visualisation: three films, impossible to miss */
.vis-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.vis-tabs button{display:grid;gap:8px;padding:0;text-align:left;color:var(--muted);font-size:14px;line-height:1.3;opacity:.72;transition:opacity 280ms var(--ease),color 280ms var(--ease)}
.vis-tabs button img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;outline:1px solid transparent;outline-offset:3px;transition:outline-color 280ms var(--ease)}
.vis-tabs button[aria-selected="true"]{opacity:1;color:var(--fg)}
.vis-tabs button[aria-selected="true"] img{outline-color:var(--fg)}
@media (hover:hover) and (pointer:fine){.vis-tabs button:hover{opacity:1}}
.vis-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut)}
.vis-row::-webkit-scrollbar{display:none}
.vis-row .vis-part{flex:0 0 86%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;gap:10px;align-content:start}
.vis-count{font-size:13px;letter-spacing:.08em;color:var(--muted);text-align:center;margin-top:6px}
/* round 6 floor plans (ported from Floor plan 3): the agencies' lettering lives inside the plan artwork only */
@font-face{font-family:"Plan Serif";font-weight:500;font-display:swap;src:url(kit/fonts/plan-serif-500.woff2) format("woff2")}
@font-face{font-family:"Plan Serif";font-weight:600;font-display:swap;src:url(kit/fonts/plan-serif-600.woff2) format("woff2")}
@font-face{font-family:"Plan Sans";font-weight:400;font-display:swap;src:url(kit/fonts/plan-sans-400.woff2) format("woff2")}
@font-face{font-family:"Plan Sans";font-weight:600;font-display:swap;src:url(kit/fonts/plan-sans-600.woff2) format("woff2")}
@font-face{font-family:"Plan Sans";font-weight:700;font-display:swap;src:url(kit/fonts/plan-sans-700.woff2) format("woff2")}
.fp{display:grid;gap:12px;min-width:0}
.fp-stage{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center;background:rgba(var(--fg-rgb),.05);border-radius:8px;padding:20px;overflow:hidden}
@media (max-width:899px){.fp-stage{grid-template-columns:minmax(0,1fr);padding:14px}}
.fp-sheet{position:relative;border-radius:3px;overflow:hidden;box-shadow:0 18px 40px -28px rgba(30,15,26,.55);background:#fff}
.fp-sheet svg{display:block;width:100%;height:auto}
.fp-sheet svg .t{transition:fill .7s ease,stroke .7s ease,opacity .45s ease}
.fp-wipe{position:absolute;inset:0}
.fp-brand{border-radius:6px;padding:18px;display:grid;gap:14px;box-shadow:0 14px 30px -24px rgba(0,0,0,.6)}
.fp-brand .nm{font-size:30px;line-height:1}
.fp-brand .sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.fp-brand .chips{display:flex;gap:10px}
.fp-brand .chip{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 6px 14px -6px rgba(0,0,0,.5)}
.fp-brand .aa{font-size:26px}
@media (max-width:899px){.fp-brand{grid-template-columns:auto auto;align-items:center}.fp-brand .nm{font-size:24px}.fp-brand .aa{display:none}}
.fp-fly{position:absolute;width:44px;height:44px;border-radius:50%;pointer-events:none;z-index:4;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.fp-line{position:absolute;top:0;bottom:0;width:3px;background:#B4864C;box-shadow:0 0 18px 4px rgba(180,134,76,.45);z-index:3;pointer-events:none;opacity:0}
.fp-step{font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ochre);margin:0 0 10px;min-height:1.2em}
.fp-tabs{display:flex;gap:8px;flex-wrap:wrap}
.fp-tab{border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:0 16px;min-height:44px;font:500 13px var(--sans);transition:background-color 280ms var(--ease),color 280ms var(--ease),border-color 280ms var(--ease)}
.fp-tab[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* round 6 card fits (Mac) */
.rs-ov-card.svc-full.fit .svc-photography .ph-lead,.rs-ov-card.svc-full.fit .svc-photography .ph-row,.rs-ov-card.svc-full.fit .svc-plans .fp,.rs-ov-card.svc-full.fit .vis-tabs{width:100%}
.rs-ov-card.svc-full.fit .svc-plans .fp-stage{grid-template-columns:200px minmax(0,1fr);padding:18px}
.rs-ov-card.svc-full.fit .svc-visualisation .steps{max-height:calc(100% - 150px)}
.vis-tabs{max-width:640px;margin-top:10px}
.vis-tabs button{font-size:13px;gap:6px}
.rs-ov-card .svc-card p.line.vis-under{font-size:15px;font-family:var(--sans);font-style:normal;color:var(--muted);white-space:normal;text-wrap:balance}
.vis-tabs button{align-content:start;align-self:start}
/* round 6 map (ported from Map 6, Golden hour) */
.gmap{width:100%;max-width:1200px;margin:0 auto}
.gmap .stage{position:relative;border-radius:6px;overflow:hidden;max-width:100%;background:var(--paper,transparent)}
.gmap .stage canvas{display:block;width:100%}
.gmap .stage canvas.under{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.gmap .stage canvas.top{position:relative}
.gmap .stage svg.art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gmap .stage.wash canvas.under{opacity:1}
.gmap .stage canvas.fx,.gmap .stage canvas.sm{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.gmap .stage canvas.top,.gmap .stage canvas.sm{transition:opacity 1.6s ease}
.gmap .stage canvas.fx{transition:opacity .25s ease}
@media (hover:hover) and (pointer:fine){.gmap .stage.live{cursor:crosshair}}
.gmap .tools{display:flex;justify-content:flex-end;margin-top:6px}
.gmap .repaint .glyph{transform-box:view-box;transition:transform 900ms var(--ease-out);transform-origin:20px 20px}
@media (hover:hover) and (pointer:fine){.gmap .repaint:hover .glyph{transform:rotate(-120deg)}}
.gmap .stage::after{content:"";position:absolute;inset:-20% -60%;pointer-events:none;background:linear-gradient(100deg,transparent 40%,rgba(255,214,150,0) 42%,rgba(255,206,140,.42) 50%,rgba(255,214,150,0) 58%,transparent 60%);mix-blend-mode:soft-light;transform:translateX(-60%);opacity:0}
.gmap .stage.on.sheen::after{animation:gmapSheen 3.8s cubic-bezier(.45,0,.3,1) .3s 1}
@keyframes gmapSheen{0%{transform:translateX(-60%);opacity:1}100%{transform:translateX(60%);opacity:1}}
@media (prefers-reduced-motion:reduce){.gmap .stage.on.sheen::after{animation:none}}
.gmap .stage svg.riverline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.gmap .stage .lab{position:absolute;font:500 var(--fs,14px)/1 var(--sans);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .6s ease,transform .6s ease;pointer-events:none;display:flex;align-items:center;gap:5px;padding:3px 7px;border-radius:3px;background:var(--pill);color:var(--word)}
.gmap .stage .lab i{display:block;width:5px;height:5px;border-radius:50%;flex:none;background:var(--word)}
.gmap .stage .lab.l,.gmap .stage .lab.lu,.gmap .stage .lab.ld{flex-direction:row-reverse}
.gmap .stage.on .lab{opacity:1;transform:none}
.map-in{max-width:1240px}
.map-line{text-align:center;justify-self:center}
/* round 6: the map fits one screen on a Mac (heading on one line, tighter spacing) */
@media (min-width:900px){
  .map{padding-top:clamp(56px,7vh,90px)!important;padding-bottom:clamp(40px,6vh,80px)!important}
  .map .echo-front{font-size:clamp(40px,4.2vw,62px)!important;white-space:nowrap}
  .map .echo{margin-bottom:6px}
  .map-in{gap:4px}
  .gmap .tools{margin-top:-6px}
  .map-line{margin-top:-30px}
}
/* round 6: the first row of the spaced gallery is never lifted above the gallery (it was hidden under the section above) */
.sp-grid .tile:nth-child(2)[data-beat="1"]{margin-top:0!important;align-self:start}
.rs-pn-scrim{background:rgba(10,4,8,.42)}
@media (prefers-reduced-motion:reduce){.approach .ap-stick{display:flex;flex-direction:column}.approach .ap-copy{order:-1;margin-bottom:8px!important}}

/* round 7: the Preview tab's autoplay check */
.pv-ap .pv-note.warn{color:var(--fg)}
.pv-ap-out{display:grid;gap:8px}

/* ---------- round 7: the agent-window hero ---------- */
#top.aw{height:calc(2.35 * var(--aw-vh,100svh));min-height:0;overflow:visible;background:#1E0F1A;color:#EADFCB}
/* round 8b: F (1.19 screens), the push-in to 1.49 where the page stops by day, the evening following the scroll over
   0.8 to the stop at full evening, then two screens for the sheet (see kit/agent-hero.js) */
#top.aw.aw-steer{height:calc(4.29 * var(--aw-vh,100svh))}
.aw-stick{position:sticky;top:0;height:var(--aw-vh,100svh);overflow:hidden;background:#1E0F1A;contain:strict}
.aw-frame{position:absolute;inset:0;background:#120910}
.aw-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.aw-still,.aw-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%}
.aw-still .e{opacity:0}
.aw-still .sky{-webkit-mask:url(media/hero/mask-sky-a.png) center/cover no-repeat;mask:url(media/hero/mask-sky-a.png) center/cover no-repeat;-webkit-mask-position:46% 50%;mask-position:46% 50%}
.aw-veil{position:absolute;inset:0;background:#1E0F1A;opacity:0;pointer-events:none}
.aw-scrim{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(60% 26% at 50% calc(var(--bar-top) - 12px + 13vh),rgba(30,15,26,.26),rgba(30,15,26,0) 100%),linear-gradient(to bottom,rgba(30,15,26,.6) 0%,rgba(30,15,26,.56) 16%,rgba(30,15,26,.56) 25%,rgba(30,15,26,.46) 31%,rgba(30,15,26,.24) 40%,rgba(30,15,26,.07) 52%,rgba(30,15,26,0) 62%)}
.aw-words{position:absolute;left:0;right:0;top:calc(var(--bar-top) - 12px + env(safe-area-inset-top,0px) + clamp(28px,7vh,96px));display:grid;justify-items:center;gap:clamp(12px,1.8vh,20px);pointer-events:none;padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px));text-align:center;z-index:2}
.aw-line{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(45px,5.8vw,90px);line-height:1;letter-spacing:-.005em;color:#EADFCB;text-shadow:0 1px 28px rgba(30,15,26,.38);white-space:nowrap}
.aw-line .l{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(.22em);will-change:opacity,filter,transform}
.aw-line.done .l{will-change:auto}
.aw-sub{font-family:var(--sans);font-weight:500;font-size:clamp(13.5px,1.12vw,15.75px);letter-spacing:.16em;text-transform:uppercase;color:#EADFCB;opacity:0;text-shadow:0 1px 16px rgba(30,15,26,.5)}
/* round 7c: "Keep scrolling", low on the picture (the lawn and drive behind it are too bright for pale words alone:
   1.3 to 1.5 : 1). Round 8 (Matthew: "something at the bottom that sort of pulses in a slightly less obvious font"):
   lighter type, 72 px from the foot, pulsing gently, on a feathered shade; it fades out over 0.4 s as the evening starts */
.aw-cue{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 72px);z-index:2;text-align:center;pointer-events:none;opacity:0;visibility:hidden;transform:translate3d(0,4px,0);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),visibility 0s 400ms}
.aw-cue span{display:inline-block;font-family:var(--sans);font-weight:400;font-size:clamp(11px,.95vw,13px);line-height:1.2;letter-spacing:.24em;text-transform:uppercase;color:#EADFCB;text-shadow:0 1px 12px rgba(30,15,26,.6),0 0 4px rgba(30,15,26,.5)}
/* round 8: no pill; a soft feathered shade behind the words (no edges), steady, while the words pulse slowly */
.aw-cue::before{content:"";position:absolute;left:50%;top:50%;width:min(420px,86vw);height:110px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(30,15,26,.64),rgba(30,15,26,.4) 45%,rgba(30,15,26,.12) 78%,rgba(30,15,26,0));pointer-events:none;z-index:-1}
.aw-cue.on span{animation:aw-cue-pulse 2.4s ease-in-out infinite}
@keyframes aw-cue-pulse{0%,100%{opacity:.85}50%{opacity:.8}} /* final polish (5e): its faintest point raised from .55 to .8 (about 4.5 : 1) */
@media (prefers-reduced-motion:reduce){.aw-cue.on span{animation:none;opacity:.85}}
.aw-cue.on{opacity:1;visibility:visible;transform:none;transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out),visibility 0s}
.aw-cue.static,.aw-cue.static.on{transform:none;transition:none}
.aw-cue.static.on span{animation:none;opacity:.85}
.aw-replay{position:absolute;z-index:3;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));color:#EADFCB;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));opacity:0;pointer-events:none;transition:opacity 700ms var(--ease-out)}
#top.aw.landed .aw-replay,#top.aw.aw-fb .aw-replay{opacity:1;pointer-events:auto}
#top.aw.aw-fb .aw-replay{display:none}
.aw-load{position:absolute;left:50%;top:50%;width:min(220px,50vw);height:1px;transform:translateX(-50%);background:rgba(234,223,203,.14);opacity:0;transition:opacity 400ms var(--ease)}
.aw-load.on{opacity:1}
.aw-load b{position:absolute;inset:0;background:#B4864C;transform-origin:left;animation:aw-load 1.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes aw-load{0%{transform:scaleX(0)}100%{transform:scaleX(1);opacity:0}}
.aw-water{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.aw-lk{position:absolute;left:50%;top:50%;width:min(76vw,460px);transform:translate(-50%,-50%);color:#EADFCB;pointer-events:none;z-index:2;opacity:0}
.aw-intro .aw-lk{opacity:1}
.aw-lk svg{width:100%;height:auto;overflow:visible;display:block}
.aw-band{position:absolute;left:0;right:0;height:50.5%;background:#1E0F1A;pointer-events:none;will-change:transform}.aw-band.t{top:0}.aw-band.b{bottom:0}
.aw-hz{position:absolute;left:0;right:0;top:50%;height:1px;background:#EADFCB;transform:scaleX(0);pointer-events:none}
/* the next section rises over the held hero like a sheet */
#top.aw+#approach{position:relative;z-index:2;margin-top:calc(-1 * var(--aw-vh,100svh));background:rgb(var(--bg-rgb));box-shadow:0 -24px 60px -20px rgba(30,15,26,.35)}
/* round 7b: the line and subline about 12 % larger (Matthew, 25 Oct); on a Mac they keep round 7's place (12 px
   higher than the taller header would put them) over the same shade, so the contrast holds */
@media (max-width:699px){.aw-line{font-size:clamp(36px,12.3vw,60px)}.aw-sub{font-size:clamp(12px,3.5vw,15px)}.aw-cue span{font-size:clamp(11px,2.9vw,12.5px)}.aw-words{top:calc(var(--bar-top) + env(safe-area-inset-top,0px) + 22px)}}

/* round 7: the aerial card on a phone, each film under its own line */
.svc-card .aer-part{display:grid;gap:10px}
.svc-card .aer-part .line{margin:0}
@media (max-width:699px){.svc-card .aer-part>.media{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut))}.svc-card .aer-part .pl{border-radius:0}}

/* round 7: letter-by-letter light-up */
.lu-w{display:inline-block;white-space:nowrap}
.lu-w span{transition:none}

/* round 7: the Social feed looks like a phone (P9) */
.feed{border:1.5px solid rgba(var(--fg-rgb),.32);border-radius:38px;padding:0 0 16px;box-shadow:0 0 0 5px rgb(var(--bg-rgb)),0 0 0 6px rgba(var(--fg-rgb),.12)}
.fstatus{display:flex;justify-content:space-between;align-items:center;padding:12px 26px 6px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--fg)}
.fstatus svg{width:46px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fhome{position:absolute;left:50%;bottom:6px;width:110px;height:4px;margin-left:-55px;border-radius:4px;background:rgba(var(--fg-rgb),.55)}
.fhead .av{background:#1E0F1A;padding:5px}
.fhead .av img{width:18px;height:18px;display:block}
.fact{display:flex;gap:14px;align-items:center;padding:0 14px;color:var(--fg)}
.fact svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fact .keep{margin-left:auto}
.feed-scroll.dragging,.ftrack.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.feed-scroll.dragging *{pointer-events:none}
@media (max-width:699px){.ptypes{gap:2px}.ptypes dd{margin:0 0 8px}}

/* round 7 (P6): the visualisation films stacked on a phone */
.vis-stack{display:grid;gap:clamp(28px,8vw,44px)}
.vis-stack .vis-part{padding-top:0}
/* round 7 (P2): the Photography card's main photograph centred on a phone (it bleeds evenly both sides) */
@media (max-width:699px){.svc-photography .imgw.big.ph-lead{width:auto;max-width:none}}

/* round 7 (P8): the request panel on a phone fits without scrolling: name and email side by side, phone and agency
   side by side, the urgency choices on one row (sliding sideways if a very narrow phone needs it), Send pinned below */
/* round 8b (Matthew, 28 Oct): on a Mac too the fields sit two by two, so the panel shows everything without scrolling */
.rs-pn-wrap:not(.sheet) .rs-pn-form .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
.rs-pn-wrap:not(.sheet) .rs-pn-form .form>.urg,.rs-pn-wrap:not(.sheet) .rs-pn-form .form>.fld:has(#f-where),.rs-pn-wrap:not(.sheet) .rs-pn-form .form>.fld-more{grid-column:1 / -1}
.rs-pn-wrap:not(.sheet) .fld input,.rs-pn-wrap:not(.sheet) .fld textarea{width:100%;min-width:0;box-sizing:border-box}
/* final polish (Matthew 29 Oct): on short screens (under 831 px tall, where the panel could not show everything) the
   card version tightens so it fits without scrolling: a little less space round the heading, between the fields and
   in the strip, the four timing choices on one row (each as wide as its words), a shorter "Anything else?" box, and
   the panel no taller than the form needs (with the same breathing room the Mac panel has). Taller screens (every Mac
   view tested) and the phone sheet are unchanged. */
@media (min-width:700px) and (max-height:830px){
  .rs-pn-wrap:not(.sheet) .rs-pn{height:min(668px,calc(100svh - 64px))}
  .rs-pn-wrap:not(.sheet) .rs-pn-head{padding-top:16px}
  .rs-pn-wrap:not(.sheet) .rs-pn-title .form-h{font-size:32px}
  .rs-pn-wrap:not(.sheet) .rs-pn-rule{margin-top:10px}
  .rs-pn-wrap:not(.sheet) .rs-pn-body{padding-top:10px;padding-bottom:14px}
  .rs-pn-wrap:not(.sheet) .rs-pn-form .form{row-gap:11px}
  .rs-pn-wrap:not(.sheet) .urg{flex-wrap:nowrap;gap:6px}
  .rs-pn-wrap:not(.sheet) .urg legend{margin-bottom:6px}
  .rs-pn-wrap:not(.sheet) .urg .chip{flex:1 1 auto;display:flex}
  .rs-pn-wrap:not(.sheet) .urg .chip span{flex:1;justify-content:center;text-align:center;min-height:40px;padding:0 6px;font-size:14px;white-space:nowrap}
  .rs-pn-wrap:not(.sheet) .rs-pn .fld textarea{min-height:44px}
  .rs-pn-wrap:not(.sheet) .rs-pn-foot{padding-top:10px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
.rs-pn-wrap.sheet .rs-pn-form .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;row-gap:14px}
.rs-pn-wrap.sheet .rs-pn-form .form>.urg,.rs-pn-wrap.sheet .rs-pn-form .form>.fld:has(#f-where),.rs-pn-wrap.sheet .rs-pn-form .form>.fld-more{grid-column:1 / -1}
.rs-pn-wrap.sheet .fld textarea{min-height:60px}
.rs-pn-wrap.sheet .rs-pn .fld label{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-pn-wrap.sheet .rs-pn .fld label i{font-style:normal;opacity:.7}
.rs-pn-wrap.sheet .rs-pn-title .form-h{font-size:30px}
.rs-pn-wrap.sheet .rs-pn-rule{margin-top:10px}
.rs-pn-wrap.sheet .rs-pn-body{padding-top:8px}
.rs-pn-wrap.sheet .urg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rs-pn-wrap.sheet .urg legend{margin-bottom:8px}
.rs-pn-wrap.sheet .urg .chip{display:flex}
.rs-pn-wrap.sheet .urg .chip span{flex:1;justify-content:center;text-align:center;font-size:13px;line-height:1.15;padding:6px 4px;min-height:50px;border-radius:14px}
.rs-pn-wrap.sheet .fld input,.rs-pn-wrap.sheet .fld textarea{width:100%;min-width:0;box-sizing:border-box}
.rs-pn-wrap.sheet .urg .chip span{white-space:normal;overflow:visible;word-break:normal}

/* round 7 (9.9): the round 6 hero options fill the whole stage, the words over the top of the film with a soft scrim */
#top.hero-full .hero-frame{border-radius:0}
#top.hero-full .hero-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(30,15,26,.58) 0%,rgba(30,15,26,.5) 18%,rgba(30,15,26,.3) 32%,rgba(30,15,26,0) 52%)}
#top.hero-full .hero-head{color:#EADFCB}
#top.hero-full .hero-h,#top.hero-full .hero-sub{color:#EADFCB;text-shadow:0 1px 24px rgba(30,15,26,.4)}
#top.hero-full .hero-head .echo{color:rgba(234,223,203,.08)}
#top.hero-full .hero-ground{display:none}
#top.hero-full .hero-pp{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}

/* round 7 Preview: the large name over the hero; the clear header over the hero */
.aw-name{display:block;width:clamp(220px,30vw,420px);height:auto;opacity:0;margin-bottom:clamp(2px,.6vh,8px)}
.aw-words.big{top:calc(var(--bar-top) + env(safe-area-inset-top,0px) + clamp(18px,4vh,60px))}
/* round 7b: clear over the hero keeps a soft shade from the top, so the full lockup (and PROPERTY MEDIA) reads over the palest sky */
.rs-bar.clear>.bg{background:linear-gradient(to bottom,rgba(30,15,26,.44),rgba(30,15,26,.2) 72%,rgba(30,15,26,0))}
.rs-bar.clear>.hl{background:rgba(234,223,203,.28)}
/* round 7b: with the menu open the bar is the solid one (the shade read as a grey band over the menu's pale veil) */
.rs-bar.clear.over>.bg{background:rgb(var(--bg-rgb))}.rs-bar.clear.over{color:var(--fg)}.rs-bar.clear.over .lk svg{filter:none}.rs-bar.clear.over>.hl{background:var(--line)}
.rs-bar.clear{color:#EADFCB}
.rs-bar.clear .lk svg{filter:drop-shadow(0 1px 10px rgba(30,15,26,.35))}

/* round 7: the horizon opening as two sliding bands (see kit/entrance.js) */
.ent-band{position:absolute;left:-1px;right:-1px;height:49.6%;background:rgb(var(--bg-rgb));z-index:2;pointer-events:none;will-change:transform}
.ent-band.t{top:-1px}
.ent-band.b{bottom:-1px}

/* round 7c: the request press (kit/pop.js): a firm thump, no spring, no ring. The kit's fill wipe is off on these
   buttons; the outline is an inset shadow; hover (with a mouse only) is a quiet change of tone; focus is a 2 px ring
   3 px out, keyboard only. */
.rs-btn.rs-press{border-color:transparent;box-shadow:inset 0 0 0 1px rgba(var(--fg-rgb),.5);transition:color 220ms var(--ease),background-color 220ms var(--ease),box-shadow 220ms var(--ease),opacity 280ms var(--ease),transform 220ms cubic-bezier(.22,1,.36,1)}
.rs-btn.rs-press::before{display:none}
.rs-btn.rs-press.solid{box-shadow:inset 0 0 0 1px rgb(var(--fg-rgb)),0 10px 22px -14px rgba(30,15,26,.55)}
.rs-btn.rs-press:active{transform:none}
.rs-btn.rs-press,.rs-btn.rs-press:hover,.rs-btn.rs-press:focus-visible{color:var(--fg)}
.rs-btn.rs-press.solid,.rs-btn.rs-press.solid:hover,.rs-btn.rs-press.solid:focus-visible{color:var(--bg)}
@media (hover:hover){
  .rs-btn.rs-press:hover{box-shadow:inset 0 0 0 1px rgb(var(--fg-rgb));background-color:rgba(var(--fg-rgb),.04)}
  .rs-btn.rs-press.solid:hover{background-color:color-mix(in srgb,rgb(var(--fg-rgb)) 90%,rgb(var(--bg-rgb)))}
}
.rs-btn.rs-press.down,.rs-btn.rs-press.down:hover{transform:translate3d(0,2px,0) scale(.97);background-color:rgba(var(--fg-rgb),.07);transition:color 80ms cubic-bezier(.3,0,.15,1),background-color 80ms cubic-bezier(.3,0,.15,1),box-shadow 80ms cubic-bezier(.3,0,.15,1),transform 80ms cubic-bezier(.3,0,.15,1)}
.rs-btn.rs-press.solid.down,.rs-btn.rs-press.solid.down:hover{background-color:color-mix(in srgb,rgb(var(--fg-rgb)) 94%,#000);box-shadow:inset 0 0 0 1px rgb(var(--fg-rgb)),0 3px 8px -5px rgba(30,15,26,.6)}
.night .rs-btn.rs-press.solid.down,.rs-btn.rs-press.solid.down:hover{background-color:color-mix(in srgb,rgb(var(--fg-rgb)) 94%,#1E0F1A)}
.rs-btn.rs-press:focus{outline:none}
.rs-btn.rs-press:focus-visible{outline:2px solid rgb(var(--fg-rgb));outline-offset:3px}
@media (prefers-reduced-motion:reduce){.rs-btn.rs-press,.rs-btn.rs-press.down{transform:none}}
.rs-flash{animation:rs-flash 120ms linear}
@keyframes rs-flash{0%{filter:brightness(1.35)}100%{filter:none}}