@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/Cormorant-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/Cormorant-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/OpenSans-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sarah Stein Homes — identity read from the live site:
   ground olive #4E472D → type sand #CAC7A7 (their only two colors, swapped per section) → no accent.
   One face: Cormorant Garamond 300, italics for places, wide-tracked caps in the wordmark only. */
:root { --olive: #4E472D; --sand: #CAC7A7; --olive-2: #453F28; --hdr: 68px; --gut: clamp(20px, 4vw, 56px); --ease: cubic-bezier(.2, .7, .1, 1); }
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--olive); }
body { font: 300 clamp(19px, 1.5vw, 23px)/1.5 'Cormorant Garamond', Georgia, serif; color: var(--sand); background: var(--olive); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-weight: 300; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--sand); color: var(--olive); padding: 8px 12px; }

/* header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--hdr); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut); transition: background .35s; }
.hdr.is-solid, .sheet-open .hdr { background: color-mix(in srgb, var(--olive) 94%, transparent); }
.hdr__logo { display: flex; align-items: center; min-height: 44px; }
.hdr__logo img { width: clamp(196px, 19vw, 264px); height: auto; }
.hdr__nav { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.hdr__nav a, .hdr__menu { text-decoration: none; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; font-style: normal; text-transform: uppercase; font-size: 13px; letter-spacing: .18em; padding: 10px 0; }
.hdr__nav a:hover, .hdr__nav a[aria-current] { text-decoration: underline; }
.hdr__menu { display: none; min-height: 44px; }
.sheet { position: fixed; inset: var(--hdr) 0 0; z-index: 39; background: var(--olive); padding: 6vh var(--gut) 120px; display: flex; flex-direction: column; justify-content: space-between; }
.sheet[hidden] { display: none; }
.sheet nav { display: grid; gap: 4px; }
.sheet nav a { font-size: 54px; line-height: 1.15; text-decoration: none; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.sheet p a { text-decoration: none; }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }

/* buttons, links */
.btn { display: inline-flex; align-items: center; min-height: 54px; padding: 0 30px; border: 1px solid currentColor; text-decoration: none; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; font-style: normal; text-transform: uppercase; font-size: 13px; letter-spacing: .16em; transition: background .3s, color .3s; }
.btn--sand { background: var(--sand); color: var(--olive); border-color: var(--sand); }
.btn--sand:hover { background: transparent; color: var(--sand); }
.btn--ink { background: var(--olive); color: var(--sand); border-color: var(--olive); }
.btn:hover { background: var(--sand); color: var(--olive); }
.btn--ink:hover { background: transparent; color: var(--olive); }
.more { display: inline-block; font-style: italic; text-decoration: underline; padding: 11px 0; }
.no { display: block; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; font-style: normal; text-transform: uppercase; font-size: 12px; letter-spacing: .22em; }

/* the door */
.door { position: relative; height: 100svh; min-height: 560px; overflow: clip; display: flex; align-items: flex-end; }
.door__ph { position: absolute; inset: 0; will-change: transform; }
.door__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: settle 2.2s var(--ease) both; }
@keyframes settle { from { transform: scale(1.12); } }
.door__ph img { filter: brightness(.94); }
.door::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(38, 34, 20, .7) 0, rgba(38, 34, 20, 0) 20%), linear-gradient(90deg, rgba(38, 34, 20, .62) 0, rgba(38, 34, 20, .42) 36%, rgba(38, 34, 20, 0) 66%), linear-gradient(0deg, rgba(38, 34, 20, .8) 0, rgba(38, 34, 20, .3) 40%, rgba(38, 34, 20, 0) 62%); }
.door h1, .door__where, .door__cap, .hdr:not(.is-solid) .hdr__nav a { text-shadow: 0 1px 24px rgba(30, 27, 15, .55); }
.door h1 { font-weight: 400; color: #DCD9BD; }
.door__where { font-weight: 400; }
.door__txt { will-change: transform, opacity; }
.door__txt { position: relative; z-index: 2; padding: 0 var(--gut) clamp(44px, 8vh, 96px); width: 100%; }
.door h1 { font-size: clamp(50px, 9.4vw, 150px); line-height: .94; animation: rise .9s .15s var(--ease) both; }
.door__where { font-size: clamp(22px, 2.2vw, 32px); margin-top: 14px; animation: rise .9s .3s var(--ease) both; }
.door__acts { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 26px; animation: rise .9s .45s var(--ease) both; }
.door__cap { position: absolute; z-index: 2; right: var(--gut); bottom: clamp(44px, 8vh, 96px); font-style: italic; font-size: 18px; padding: 11px 0; }

/* the legacy line, on their sand */
.say { color: var(--olive); padding: clamp(72px, 13vh, 150px) var(--gut); display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 24px clamp(28px, 6vw, 110px); align-items: start; }
.say__mark { width: 100%; height: auto; grid-row: span 3; }
.say__big { font-size: clamp(28px, 3.7vw, 60px); line-height: 1.14; letter-spacing: -.01em; max-width: 24ch * 2; }
.say .more--ink, .say p, .say .btn { grid-column: 2; justify-self: start; }
.say--end .say__big { font-size: clamp(54px, 8vw, 120px); }

/* homes as full-height panels */
.pan { display: grid; grid-template-columns: 1fr 1fr; height: 100svh; text-decoration: none; position: sticky; top: 0; background: var(--olive); overflow: clip; box-shadow: 0 -30px 60px rgba(30, 27, 15, .35); }
.pan::after { content: ''; position: absolute; inset: 0; background: #1e1b0f; opacity: calc(var(--q, 0) * .55); pointer-events: none; z-index: 3; }
.pan > * { transform: scale(calc(1 - var(--q, 0) * .05)); transform-origin: 50% 0; }
.rail, .con, .say, .way { position: relative; z-index: 2; background: var(--olive); }
.con, .say { background: var(--sand); }
.pan__ph { height: 100svh; }
.pan--flip .pan__ph { order: 2; }
.pan__txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: var(--gut); padding-bottom: clamp(44px, 9vh, 110px); }
.pan__name { display: block; font-size: clamp(50px, 7vw, 124px); line-height: .92; letter-spacing: -.015em; }
.pan__desc { max-width: 30ch; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.3; }
.pan .more { align-self: flex-start; }
/* after the home page's panels: the way on to the rest */
.all { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; background: var(--olive); padding: clamp(64px, 12vh, 140px) var(--gut); box-shadow: 0 -30px 60px rgba(30, 27, 15, .35); }
.all__t { font-size: clamp(44px, 6vw, 104px); line-height: .95; }
.all:hover .all__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }

/* coming soon: builds under way, on sand, a strip of site photographs beside each name */
.way { position: relative; z-index: 2; background: var(--sand); color: var(--olive); padding: clamp(72px, 13vh, 150px) 0 clamp(40px, 8vh, 100px); overflow: clip; }
.way__head { padding: 0 var(--gut) clamp(36px, 7vh, 80px); }
.way__head h2 { font-size: clamp(60px, 9vw, 150px); line-height: .9; }
.way__head p { font-size: clamp(22px, 2.2vw, 32px); margin-top: 12px; }
.way__it { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; padding: clamp(28px, 5vh, 56px) 0 clamp(28px, 5vh, 56px) var(--gut); border-top: 1px solid color-mix(in srgb, var(--olive) 30%, transparent); }
.way__txt { display: grid; gap: 10px; align-self: start; padding-top: 8px; }
.way__txt h3 { font-size: clamp(40px, 4.6vw, 78px); line-height: .95; }
.way__txt p { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; max-width: 26ch; }
.way__txt .more { justify-self: start; }
.way__strip { display: flex; gap: clamp(8px, 1vw, 16px); overflow-x: auto; scrollbar-width: none; padding-right: var(--gut); overscroll-behavior-x: contain; }
.way__strip::-webkit-scrollbar { display: none; }
.way__ph { flex: 0 0 auto; height: clamp(260px, 44svh, 480px); }

/* the portfolio: cards in staggered pairs */
.idx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); row-gap: clamp(56px, 9vh, 110px); align-items: start; padding: clamp(20px, 4vh, 50px) var(--gut) clamp(90px, 16vh, 180px); }
.card { display: block; text-decoration: none; }
.card--low { margin-top: clamp(40px, 11vh, 130px); }
.card__ph { position: relative; }
.card__ph::after { content: ''; position: absolute; inset: 0; background: #1e1b0f; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.card:hover .card__ph::after { opacity: .18; }
.card__meta { display: grid; gap: 6px; padding-top: 18px; }
.card__name { font-size: clamp(38px, 4.4vw, 76px); line-height: .96; letter-spacing: -.01em; }
.card:hover .card__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.card__meta i { font-size: clamp(18px, 1.4vw, 21px); }

/* photographs: a curtain and a settle, compositor only */
.ph { display: block; overflow: clip; min-width: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
/* photographs are there on arrival; scroll position opens the frame and drifts the picture inside it (site.js, transform + clip-path only) */
.ph img { will-change: transform; }
.js .up { transform: translateY(34px); opacity: 0; transition: transform .95s var(--ease), opacity .95s; }
.js .up.in { transform: none; opacity: 1; }
.up:nth-child(3) { transition-delay: .1s; } .up:nth-child(4) { transition-delay: .2s; }

/* the sideways walk */
.rail { padding: clamp(64px, 11vh, 130px) 0 clamp(56px, 9vh, 110px); position: relative; }
.rail__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 0 var(--gut) 26px; }
.rail__head h2 { font-size: clamp(42px, 6vw, 96px); }
.rail__track { display: flex; gap: clamp(10px, 1.4vw, 22px); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 0 var(--gut); scroll-padding-left: var(--gut); scrollbar-width: none; cursor: grab; }
.rail__track::-webkit-scrollbar { display: none; }
/* one height, each photograph at its own shape, so landscapes are not cropped to a portrait */
.rail__it { flex: 0 0 auto; scroll-snap-align: start; text-decoration: none; }
.rail__it img { height: clamp(380px, 68svh, 720px); width: auto; max-width: 86vw; object-fit: cover; }
.rail__it span { display: block; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; font-style: normal; text-transform: uppercase; font-size: 11px; letter-spacing: .2em; padding-top: 10px; }
.rail__arrows { display: flex; gap: 8px; justify-content: flex-end; padding: 18px var(--gut) 0; }
.rail__arrows button { width: 54px; height: 54px; border: 1px solid color-mix(in srgb, var(--sand) 50%, transparent); font-size: 22px; }
.rail__arrows button:hover { background: var(--sand); color: var(--olive); }

/* connect */
.con { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); background: var(--sand); color: var(--olive); }
.con__ph { height: min(100svh, 980px); }
.con__ph img { object-position: 50% 30%; }
.con__txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: clamp(48px, 8vw, 120px) var(--gut); }
.con h2 { font-size: clamp(60px, 9vw, 150px); }
.con p { max-width: 26ch; font-size: clamp(23px, 2.1vw, 32px); line-height: 1.25; }
.con .btn { background: var(--olive); color: var(--sand); border-color: var(--olive); }
.con .btn:hover { background: transparent; color: var(--olive); }
.con__dl a { text-decoration: none; } .con__dl { font-size: 22px !important; }

/* page heads */
.phead { padding: calc(var(--hdr) + clamp(60px, 12vh, 140px)) var(--gut) clamp(36px, 6vh, 70px); }
.phead h1 { font-size: clamp(64px, 12vw, 190px); line-height: .9; }
.phead p { font-size: clamp(22px, 2.2vw, 32px); margin-top: 12px; }

/* a home: head */
.rh { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.rh__ph { height: 100svh; overflow: clip; }
.rh__ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); animation: settle 2s var(--ease) both; }
.rh__txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: calc(var(--hdr) + 24px) var(--gut) clamp(44px, 9vh, 110px); }
.rh__txt h1 { font-size: clamp(54px, 7.4vw, 132px); line-height: .92; animation: rise .9s .1s var(--ease) both; }
.rh__note { font-size: clamp(19px, 1.5vw, 23px) !important; }
.rh__txt p { max-width: 30ch; font-size: clamp(22px, 1.9vw, 29px); line-height: 1.28; animation: rise .9s .25s var(--ease) both; }
.gal { padding: clamp(10px, 1.4vw, 22px); display: grid; gap: clamp(10px, 1.4vw, 22px); }
.gal--mat { max-width: 1120px; margin: 0 auto; padding-top: clamp(40px, 7vh, 90px); }
.g { display: grid; gap: clamp(10px, 1.4vw, 22px); }
.g--pair { grid-template-columns: 1fr 1fr; align-items: start; }
.g--one { grid-template-columns: minmax(0, 50%); justify-content: center; }
.g__ph { width: 100%; cursor: zoom-in; }
.g--pair .g__ph img { aspect-ratio: 3 / 4; }
.next { display: block; position: relative; height: 82svh; margin-top: clamp(40px, 7vh, 90px); overflow: clip; text-decoration: none; }
.next__ph { position: absolute; inset: 0; } .next__ph img { width: 100%; height: 100%; object-fit: cover; }
.next::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(52, 47, 29, .25), rgba(52, 47, 29, .86)); }
.next__txt { position: absolute; z-index: 2; left: var(--gut); bottom: clamp(40px, 8vh, 90px); right: var(--gut); }
.lb { position: fixed; inset: 0; z-index: 60; background: var(--olive-2); display: grid; place-items: center; }
.lb[hidden] { display: none; }
.lb img { max-width: 100vw; max-height: 100svh; object-fit: contain; }
.lb button { position: absolute; z-index: 2; min-width: 54px; min-height: 54px; font-size: 20px; background: color-mix(in srgb, var(--olive) 80%, transparent); padding: 0 16px; }
.lb__x { top: 12px; right: 12px; } .lb__p { left: 12px; top: 50%; font-size: 34px !important; } .lb__n { right: 12px; top: 50%; font-size: 34px !important; }

/* about */
.abt { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.abt__ph { height: 100svh; position: sticky; top: 0; overflow: clip; }
.abt__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: settle 2s var(--ease) both; }
.abt__txt { padding: calc(var(--hdr) + clamp(40px, 9vh, 110px)) var(--gut) clamp(60px, 10vh, 120px); display: flex; flex-direction: column; gap: 28px; justify-content: flex-end; }
.abt__txt h1 { font-size: clamp(64px, 9vw, 150px); }
.abt__big { font-size: clamp(27px, 2.7vw, 42px); line-height: 1.18; }
.abt__txt p:last-child { max-width: 44ch; }
.band { height: 86svh; }
/* on site: her photographer's frames of her at work, two to a row */
.site { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 22px); padding: clamp(10px, 1.4vw, 22px); }
.site__ph { aspect-ratio: 3 / 2; }
.site__ph--tall { aspect-ratio: 2 / 3; }

/* contact */
.ctc__dl { display: grid; gap: 18px; margin: 10px 0 6px; }
.ctc__dl dt { font-style: italic; font-size: 19px; }
.ctc__dl dd { margin: 0; font-size: clamp(26px, 3vw, 46px); line-height: 1.1; overflow-wrap: anywhere; }
.ctc__dl a { text-decoration: none; } .ctc__dl a:hover { text-decoration: underline; }

/* book a consultation */
.book { background: var(--sand); color: var(--olive); padding: clamp(64px, 11vh, 130px) var(--gut); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(28px, 6vw, 110px); align-items: start; scroll-margin-top: var(--hdr); }
.book h2 { font-size: clamp(48px, 6.6vw, 112px); line-height: .94; }
.book__form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.f { display: grid; gap: 6px; }
.f span { font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .18em; }
.f input, .f textarea { font: inherit; font-size: 21px; color: var(--olive); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--olive) 55%, transparent); padding: 10px 0; border-radius: 0; width: 100%; }
.f textarea { resize: vertical; min-height: 140px; border: 1px solid color-mix(in srgb, var(--olive) 55%, transparent); padding: 12px 14px; }
.f input::placeholder { color: color-mix(in srgb, var(--olive) 45%, transparent); font-style: italic; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--olive); box-shadow: 0 1px 0 var(--olive); }
.f[data-err] span::after { content: ' · ' attr(data-err); text-transform: none; letter-spacing: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 17px; }
.f--wide, .book__acts { grid-column: 1 / -1; }
.f--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.book .btn--sand { background: var(--olive); color: var(--sand); border-color: var(--olive); }
.book .btn--sand:hover { background: transparent; color: var(--olive); }
.book .btn[disabled] { opacity: .6; cursor: progress; }
.book__msg { font-size: 21px; font-style: italic; }
.book__msg a { text-underline-offset: .2em; }

/* footer */
.ftr { padding: clamp(60px, 10vh, 120px) var(--gut) 40px; border-top: 1px solid color-mix(in srgb, var(--sand) 22%, transparent); }
.ftr__mark { width: min(100%, 720px); height: auto; }
.ftr__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: clamp(36px, 6vh, 70px) 0; }
.ftr__row a { text-decoration: none; display: inline-block; padding: 5px 0; } .ftr__row a:hover { text-decoration: underline; }
.ftr__note { font-size: 16px; max-width: 70ch; color: color-mix(in srgb, var(--sand) 78%, var(--olive)); }
.thumb { display: none; }

@media (max-width: 800px) {
  :root { --hdr: 60px; }
  .hdr__nav { display: none; } .hdr__menu { display: block; }
  .door h1 { font-size: clamp(50px, 15.5vw, 76px); }
  .door__txt { padding-bottom: 96px; }
  .door__cap { display: none; }
  .door__ph img { object-position: 50% 50%; }
  .door::after { background: linear-gradient(180deg, rgba(38, 34, 20, .8) 0, rgba(38, 34, 20, 0) 20%), linear-gradient(0deg, rgba(38, 34, 20, .95) 0, rgba(38, 34, 20, .8) 45%, rgba(38, 34, 20, .25) 72%, rgba(38, 34, 20, 0) 86%); }
  .say { grid-template-columns: 1fr; padding-top: 64px; }
  .say__mark { width: 132px; grid-row: auto; }
  .say .more--ink, .say p, .say .btn { grid-column: 1; }
  .pan, .rh, .abt, .con { grid-template-columns: 1fr; }
  .pan__ph { position: absolute; inset: 0; height: auto; }
  .pan::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(38, 34, 20, .95) 0, rgba(38, 34, 20, .78) 34%, rgba(38, 34, 20, 0) 62%); }
  .pan__txt { position: relative; z-index: 2; padding-bottom: 92px; }
  .idx { grid-template-columns: 1fr; row-gap: 56px; }
  .card { grid-column: 1 !important; grid-row: auto !important; margin-top: 0; }
  .way__it { grid-template-columns: 1fr; padding-left: 0; }
  .way__txt { padding: 0 var(--gut); }
  .way__strip { padding-left: var(--gut); }
  .way__ph { height: 300px; }
  .rh__ph img { object-position: var(--focus-phone, var(--focus, 50% 50%)); }
  .rh { min-height: 0; } .rh__ph { height: 72svh; } .rh__txt { padding-top: 26px; padding-bottom: 44px; }
  .abt__ph { position: static; height: 78svh; } .abt__txt { padding-top: 34px; }
  .con__ph { height: 78svh; }
  .band { height: 56svh; }
  .gal--mat { padding-top: 10px; }
  .site { grid-template-columns: 1fr; }
  .book, .book__form { grid-template-columns: 1fr; }
  .ftr { padding-bottom: 110px; } .ftr__row { grid-template-columns: 1fr; }
  .rail__arrows { display: none; }
  .thumb { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.6fr; background: var(--sand); color: var(--olive); transition: transform .4s var(--ease); }
  .thumb a { min-height: 54px; display: grid; place-items: center; text-decoration: none; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; font-style: normal; text-transform: uppercase; font-size: 12px; letter-spacing: .16em; }
  .thumb a + a { background: var(--olive); color: var(--sand); box-shadow: inset 0 0 0 1px var(--sand); }
  .sheet-open .thumb { transform: translateY(160%); }
  .ctc .thumb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .up { transform: none; opacity: 1; }
}