/* ==========================================================================
   VENIRA — multi-page layer (white paper, architect's drawings)
   loaded after style.css
   ========================================================================== */
body { background: var(--paper); }

/* nav current page */
.nav__links a.is-current { opacity: 1; }
.nav__links a.is-current::after { transform: scaleX(1); }
#menu nav a.is-current { color: var(--beige); }

/* page curtain (transitions between pages) */
.pt { position: fixed; inset: 0; z-index: 9990; background: var(--green); display: grid; place-items: center; pointer-events: none; }
.pt::after { content: ""; width: 120px; aspect-ratio: 755 / 366; background: var(--paper); -webkit-mask: url("../assets/logo-mono.svg") center / contain no-repeat; mask: url("../assets/logo-mono.svg") center / contain no-repeat; opacity: .9; }
.pt.is-gone { display: none; }

/* ---------- home hero: the site survey ---------- */
.survey-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--paper); color: var(--green); }
#survey { position: absolute; inset: 0; display: block; }
.survey-hero__wash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(251,250,246,.96) 0%, rgba(251,250,246,.82) 30%, rgba(251,250,246,0) 58%), linear-gradient(to top, rgba(251,250,246,.9), transparent 26%); }
.survey-hero__frame { position: absolute; inset: 14px; border: 1.5px solid var(--green); outline: 1px solid rgba(22,36,29,.3); outline-offset: -8px; pointer-events: none; }
.survey-hero .hero__content { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(70px, 12vh, 130px); max-width: min(980px, 70vw); margin: 0; }
.survey-hero .hero__title { font-size: clamp(46px, min(6.4vw, 11vh), 124px); color: var(--green); }
.survey-hero .hero__title .serif { color: var(--cinnabar); }
.survey-hero .hero__sub { color: var(--green); opacity: .85; }
.survey-hero .hero__sub .serif { color: var(--cinnabar); }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.btn-line { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; font-size: 14px; border: 1.5px solid var(--green); color: var(--green); transition: background .35s, color .35s; }
.btn-line:hover { background: var(--green); color: var(--paper); }
.btn-solid { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; font-size: 14px; background: var(--green); color: var(--paper); border: 1.5px solid var(--green); transition: background .35s; }
.btn-solid:hover { background: var(--cinnabar); border-color: var(--cinnabar); }
.btn-line i, .btn-solid i { font-style: normal; transition: transform .4s var(--ease); }
.btn-line:hover i, .btn-solid:hover i { transform: translateX(4px); }

.survey__tb { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 300px; border: 1.5px solid var(--green); border-right: 0; border-bottom: 0; background: rgba(251,250,246,.94); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.survey__tb-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--green); }
.survey__tb-head svg { width: 48px; height: 23px; fill: var(--green); }
.survey__tb-head span { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.survey__tb dl { display: grid; grid-template-columns: 92px 1fr; }
.survey__tb dt, .survey__tb dd { padding: 7px 12px; border-bottom: 1px solid rgba(22,36,29,.25); }
.survey__tb dt { opacity: .6; border-right: 1px solid rgba(22,36,29,.25); }
.survey__tb dd { font-weight: 500; }
.survey__tb dl > :nth-last-child(-n+2) { border-bottom: 0; }
.survey__north { position: absolute; z-index: 2; right: 40px; top: 100px; width: 46px; height: 64px; color: var(--green); }
.survey__north svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.survey__north path { fill: currentColor; stroke: none; }
.survey__north text { fill: currentColor; stroke: none; font-size: 11px; text-anchor: middle; font-family: var(--sans); }
.survey__scale { position: absolute; z-index: 2; left: var(--gutter); bottom: 30px; display: flex; align-items: flex-end; gap: 0; font-size: 10px; letter-spacing: .06em; color: var(--green); }
.survey__scale i { display: block; width: 46px; height: 7px; border: 1px solid var(--green); }
.survey__scale i:nth-child(odd) { background: var(--green); }
.survey__scale span { margin-left: 10px; }
.survey__hint { position: absolute; z-index: 2; right: var(--gutter); top: 50%; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); opacity: .6; }
.lens { position: absolute; z-index: 3; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s; color: var(--green); }
.lens.is-on { opacity: 1; }
.lens svg { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; fill: none; stroke: currentColor; }
.lens__read { position: absolute; left: 80px; top: -42px; white-space: nowrap; font-size: 11px; letter-spacing: .06em; line-height: 1.6; background: rgba(251,250,246,.92); padding: 6px 10px; border-left: 2px solid var(--cinnabar); }
.lens__read b { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--cinnabar); }

/* ---------- featured on white ---------- */
.featured { background: var(--paper); color: var(--green); border-top: 1px solid rgba(22,36,29,.12); }
.featured__head { background: var(--paper); }
.featured__head::after { background: linear-gradient(to right, var(--paper), transparent); }
.featured__track { padding-left: 72px; }   /* the first card starts clear of the title panel */
.text-reveal .word { opacity: .22; }
.featured__title .serif { color: var(--cinnabar); }
.featured__progress { background: rgba(22,36,29,.12); }
.fcard__num { color: var(--cinnabar); }
.fcard .tag--completed { color: var(--green); }
.fcard__type { opacity: .6; }

/* ---------- studio teaser (home) ---------- */
.teaser { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: end; }
.teaser__text { font-size: clamp(28px, 3.8vw, 60px); line-height: 1.08; letter-spacing: -.035em; font-weight: 400; }
.teaser__text .serif { color: var(--cinnabar); }
.teaser__side p { font-size: 17px; font-weight: 300; max-width: 440px; margin-bottom: 28px; }
.teaser__img { margin-top: clamp(60px, 8vw, 110px); height: clamp(320px, 62vh, 680px); overflow: hidden; }

/* ---------- nature cards (home) ---------- */
.nature-teaser__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
.nature-teaser__head h2 { font-size: clamp(44px, 6vw, 100px); }
.nature-teaser__head h2 .serif { color: var(--cinnabar); }
.nature-teaser__head p { max-width: 420px; font-weight: 300; }
.study-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.scard { grid-column: span 2; display: block; border: 1px solid rgba(22,36,29,.18); background: #fff; transition: border-color .4s, transform .6s var(--ease); }
.scard:nth-child(1), .scard:nth-child(2) { grid-column: span 3; }
.scard:hover { border-color: var(--green); transform: translateY(-4px); }
.scard__sheet { aspect-ratio: 1200 / 760; padding: 10px; background-image: linear-gradient(rgba(22,36,29,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,36,29,.05) 1px, transparent 1px); background-size: 24px 24px; }
.scard__sheet svg { width: 100%; height: 100%; display: block; }
.scard__meta { display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(22,36,29,.18); }
.scard__meta span { font-family: var(--serif); color: var(--cinnabar); font-size: 18px; }
.scard__meta h3 { font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
.scard__meta em { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; overflow: clip; }
.cta__title { font-size: clamp(44px, 7.6vw, 136px); max-width: calc(100% - clamp(150px, 16vw, 230px)); }
.cta__title .line { display: block; padding-bottom: .06em; }
/* Headline lines: hide letters only BELOW the line (for the slide-up reveal) — never cut a word's end
   or the serif's swashes and descenders at the sides. */
.hero__title .line, .cta__title .line, .contact__title .line { overflow: visible; clip-path: inset(-0.3em -100vw -0.24em -100vw); }
.cta__title .serif { color: var(--cinnabar); }
.cta .contact__cta { top: 50%; transform: translateY(-50%); }

/* ---------- inner page header ---------- */
.page-head { position: relative; padding: clamp(150px, 20vh, 220px) var(--gutter) clamp(50px, 8vw, 100px); border-bottom: 1px solid rgba(22,36,29,.14); overflow: hidden; overflow: clip; }
.page-head::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(22,36,29,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,36,29,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); pointer-events: none; }
.page-head > *:not(.leafshadow) { position: relative; z-index: 1; }
[data-leaves] { position: relative; overflow: hidden; overflow: clip; }
[data-leaves] > *:not(.leafshadow) { position: relative; z-index: 1; }
/* the hover preview floats with the mouse — it must never take up space in the page */
.index__preview, [data-leaves] > .index__preview { position: fixed !important; top: 0; left: 0; z-index: 60; }
.page-head__sheet { display: flex; gap: 24px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 30px; }
.page-head__title { font-size: clamp(54px, 9vw, 160px); font-weight: 500; letter-spacing: -.05em; line-height: .92; }
.page-head__title .serif { color: var(--cinnabar); }
.page-head__lede { max-width: 560px; margin-top: 30px; font-size: 19px; font-weight: 300; }

/* ---------- nature page: study sheets ---------- */
.study { position: relative; height: 260vh; }
.study__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr minmax(300px, 30%); gap: clamp(20px, 3vw, 50px); align-items: center; padding: 96px var(--gutter) 30px; overflow: hidden; }
.study__sheet { position: relative; height: 100%; max-height: calc(100vh - 140px); border: 1.5px solid var(--green); background: #fff; background-image: linear-gradient(rgba(22,36,29,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(22,36,29,.045) 1px, transparent 1px); background-size: 30px 30px; display: grid; place-items: center; }
.study__sheet::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(22,36,29,.25); pointer-events: none; }
.study__sheet svg { width: 94%; height: 90%; display: block; overflow: visible; }
.study__tag { position: absolute; left: 18px; top: 14px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.study__side { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.study__no { font-family: var(--serif); font-size: 26px; color: var(--cinnabar); }
.study__side h2 { font-size: clamp(46px, 5vw, 86px); margin: 6px 0 4px; }
.study__name { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.study__line { font-size: 16px; font-weight: 300; line-height: 1.6; margin: 22px 0; max-width: 420px; }
.calc { border-top: 1.5px solid var(--green); }
.calc__row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(22,36,29,.16); font-size: 14px; opacity: 0; }
.calc__row b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.calc__row small { grid-column: 1 / -1; font-size: 12px; opacity: .6; margin-top: -4px; }
.calc__head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 0; opacity: .6; }
.study-index { position: fixed; z-index: 700; left: var(--gutter); bottom: 22px; display: flex; gap: 6px; }
.study-index a { font-size: 12px; padding: 7px 11px; border: 1px solid rgba(22,36,29,.25); background: rgba(251,250,246,.9); transition: background .3s, color .3s; }
.study-index a.is-on { background: var(--green); color: var(--paper); border-color: var(--green); }

/* project sheet cover: the whole photo, never cropped — a soft blurred copy fills the space around it */
.project__hero { background: var(--green); }
.project__hero::before { content: ""; position: absolute; inset: -40px; background: var(--cover) center / cover no-repeat; filter: blur(28px) brightness(.55) saturate(.9); transform: scale(1.1); }
.project__hero > img { position: relative; object-fit: contain !important; }
/* built-up area — drawn like a dimension on a sheet */
.project__area[hidden], .project__dim[hidden] { display: none !important; }
.row__area { display: block; font-size: 12px; letter-spacing: .06em; opacity: .65; margin-top: 2px; }
.project__info dl .is-wide { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(22,36,29,.15); }
.project__info dl .is-wide dd { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); color: var(--cinnabar); }
.project__area { position: absolute; right: var(--gutter); bottom: 48px; z-index: 2; display: grid; justify-items: end; gap: 4px; padding: 14px 16px 12px; color: var(--paper); text-align: right; background: rgba(17,28,22,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.project__area strong { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 1.8vw, 26px); }
.project__area span:last-child { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.project__area-line { position: relative; width: clamp(120px, 14vw, 200px); height: 1px; background: currentColor; margin-bottom: 6px; }
.project__area-line::before, .project__area-line::after { content: ""; position: absolute; top: -6px; width: 1px; height: 13px; background: currentColor; }
.project__area-line::before { left: 0; } .project__area-line::after { right: 0; }
.project__dim { display: flex; align-items: center; gap: 16px; padding: 40px var(--gutter) 0; color: var(--green); }
.project__dim-line { position: relative; flex: 1; height: 1px; background: rgba(22,36,29,.45); }
.project__dim-line:first-child::before, .project__dim-line:last-child::after { content: ""; position: absolute; top: -7px; width: 1px; height: 15px; background: rgba(22,36,29,.6); }
.project__dim-line:first-child::before { left: 0; } .project__dim-line:last-child::after { right: 0; }
.project__dim-val { font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.project__dim:not([hidden]) + .project__gallery { padding-top: 28px; }
@media (max-width: 760px) { .project__area { top: 80px; bottom: auto; right: 12px; } .project__dim-val { white-space: normal; text-align: center; } }
.project__hero-shade { background: linear-gradient(to top, rgba(17,28,22,.9) 0%, rgba(17,28,22,.2) 32%, transparent 55%) !important; }

/* scroll containers inside overlays scroll natively (Lenis is told to ignore them) */
.project__scroll, .smodal__inner { -webkit-overflow-scrolling: touch; outline: none; overflow-anchor: none; }

/* nature drawing sheet popup (home) */
.scard { text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer; }
.smodal { position: fixed; inset: 0; z-index: 950; background: var(--paper); color: var(--green); visibility: hidden; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.smodal.is-open { visibility: visible; }
.smodal__inner { height: 100%; display: grid; grid-template-columns: 1fr minmax(300px, 30%); gap: clamp(20px, 3vw, 50px); align-items: center; padding: 76px var(--gutter) 30px; overflow-y: auto; overscroll-behavior: contain; }
.smodal .study__sheet { max-height: calc(100vh - 110px); height: 100%; }
.smodal__close { position: absolute; top: 20px; right: var(--gutter); z-index: 2; padding: 12px 18px; background: var(--cinnabar); color: var(--white); font-size: 14px; display: flex; gap: 10px; transition: background .3s; }
.smodal__close:hover { background: var(--green); }
.smodal__close i { font-style: normal; }
.smodal__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; }
.smodal__nav button { font-size: 14px; padding: 10px 14px; border: 1.5px solid var(--green); transition: background .3s, color .3s; }
.smodal__nav button:hover { background: var(--green); color: var(--paper); }
.smodal__nav span { font-family: var(--serif); font-size: 18px; color: var(--cinnabar); }

/* realistic render under the drawing — one frame with the drawing's exact proportions */
.study__frame { position: relative; width: min(94%, calc((100vh - 190px) * 1200 / 760)); aspect-ratio: 1200 / 760; }
.study__frame > svg, .study__frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.smodal .study__sheet svg { width: 100%; height: 100%; }
.study__real { opacity: 0; }   /* faded by GSAP only — a CSS transition here would fight it */
.is-real .study__frame > svg { opacity: 0; }
.study__frame > svg { transition: opacity .6s var(--ease); }
.scard__sheet { position: relative; padding: 0; }
.scard__sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scard__sheet svg { position: relative; }
/* "Both": the drawing becomes a technical overlay on the render */
.is-both svg .st-hatch, .is-both svg .st-lake, .is-both svg .st-water-fill, .is-both svg .st-fill-leaf, .is-both svg .st-canopy,
.is-both svg .st-wood, .is-both svg .st-midrib, .is-both svg .st-conc, .is-both svg .st-pcc, .is-both svg .st-shadow, .is-both svg .st-tree path { fill: none !important; opacity: 1; }
.is-both svg .st-hatch, .is-both svg .st-water-fill { display: none; }
/* dark ink with a white halo — readable over bright sky and dark water alike (how maps label) */
.is-both svg { filter: drop-shadow(0 0 1.1px rgba(255,255,255,.95)) drop-shadow(0 0 1.6px rgba(255,255,255,.8)); }
.is-both svg .st-draw.st-green { stroke: #1f3d2b; }
.is-both svg .st-draw.st-water { stroke: #1d4e63; }
.is-both svg .st-hair { opacity: .5; }
.is-both svg .st-label text, .is-both svg .st-strata, .is-both svg .st-depth, .is-both svg .st-title { font-weight: 600; }
.is-both svg .st-dimtext { font-weight: 600; }
.view-mode { display: inline-flex; border: 1.5px solid var(--green); margin-bottom: 18px; }
.view-mode button { padding: 9px 14px; font-size: 13px; letter-spacing: .04em; transition: background .3s, color .3s; }
.view-mode button + button { border-left: 1px solid rgba(22,36,29,.3); }
.view-mode button.is-on { background: var(--green); color: var(--paper); }
@media (max-width: 760px) { .study__frame { width: 100%; } }

/* drawing styles shared by the studies */
.st-draw { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st-ink { stroke: var(--green); stroke-width: 1.6; }
.st-heavy { stroke-width: 2.6; }
.st-fine { stroke-width: 1.1; }
.st-hair { stroke-width: .8; opacity: .7; }
.st-dash { stroke-dasharray: 10 8; }
.st-dashdot { stroke-dasharray: 24 6 3 6; }
.st-green { stroke: #2f5a41; stroke-width: 1.6; }
.st-water { stroke: #46768a; stroke-width: 1.6; }
.st-fill-leaf { fill: rgba(47,90,65,.07); }
.st-midrib { fill: rgba(22,36,29,.55); }
.st-wood { fill: rgba(22,36,29,.12); stroke: var(--green); stroke-width: .8; }
.st-canopy { fill: rgba(47,90,65,.08); }
.st-shadow { fill: rgba(22,36,29,.12); }
.st-ink-c { fill: none; stroke: var(--green); stroke-width: 1.1; }
.st-hatch { opacity: .9; }
.st-hf { fill: rgba(22,36,29,.45); }
.st-hl { stroke: rgba(22,36,29,.4); stroke-width: 1; fill: none; }
.st-hw { stroke: rgba(70,118,138,.55); stroke-width: 1.2; }
.st-water-fill { opacity: .9; }
.st-lake { fill: #46768a; stroke: none; }
.st-flow { fill: none; stroke: #46768a; stroke-width: 2; }
.st-tree path { fill: rgba(251,250,246,.85); }
.st-dot { fill: var(--green); }
.st-dim line, .st-dim path { stroke: var(--cinnabar); stroke-width: 1.2; fill: none; }
.st-dim .st-ext { stroke-width: .8; opacity: .7; }
.st-dim .st-tick { stroke-width: 1.8; }
.st-dimtext { fill: var(--cinnabar); font-family: var(--sans); font-size: 17px; text-anchor: middle; font-weight: 500; }
.st-label text { fill: var(--green); font-family: var(--sans); font-size: 16px; }
.st-label circle { fill: var(--green); }
.st-leader { stroke: var(--green); stroke-width: .9; }
.st-scale rect { stroke: var(--green); stroke-width: 1; }
.st-scale-b { fill: var(--green); }
.st-scale-w { fill: #fff; }
.st-scale text { fill: var(--green); font-family: var(--sans); font-size: 13px; }
.st-north circle { fill: none; stroke: var(--green); stroke-width: 1.2; }
.st-north path { fill: var(--green); }
.st-north text { fill: var(--green); font-family: var(--sans); font-size: 13px; }
.st-construct { fill: none; stroke: var(--cinnabar); stroke-width: 1; stroke-dasharray: 4 6; opacity: .8; }
.st-depth { fill: #46768a; font-family: var(--sans); font-size: 13px; }
.st-cut { stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 26 6 4 6; }
.st-bubble { fill: #fff; stroke: var(--green); stroke-width: 1.4; }
.st-bubbletext { fill: var(--green); font-family: var(--sans); font-size: 13px; font-weight: 600; }
.st-title { fill: var(--green); font-family: var(--sans); font-size: 14px; letter-spacing: .1em; }
.st-strata { fill: var(--green); font-family: var(--sans); font-size: 16px; }
.st-wt { fill: #46768a; }
.st-conc { stroke: none; }
.st-pcc { fill: rgba(22,36,29,.25); }
.st-load { fill: none; stroke: var(--cinnabar); stroke-width: 2.4; }

/* ---------- studio page: mark on white ---------- */
.mark { background: var(--paper); color: var(--green); }
.mk-grid line { stroke: rgba(22,36,29,.28); }
.mk-dims line { stroke: var(--cinnabar); }
.mk-dims text { fill: var(--cinnabar); }
.mk-shape { fill: var(--green); stroke: var(--green); }
.mk-sub { fill: var(--green); stroke: var(--green); }
.mk-anchors rect { fill: var(--paper); stroke: var(--green); }
.mk-anchors circle { fill: var(--cinnabar); }
.mk-anchors line { stroke: rgba(224,79,48,.6); }
.mk-scan { stroke: var(--cinnabar); }
.mark__step b { color: var(--cinnabar); opacity: 1; }
.mark__step .serif { color: var(--cinnabar); }

/* ---------- contact page ---------- */
.contact-page { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); }
.contact-page .contact__grid { grid-template-columns: 1fr 1fr; margin-top: 0; border-top: 1.5px solid var(--green); }
.contact-page .contact__grid a:hover { color: var(--cinnabar); }
.brief { display: grid; gap: 18px; }
.brief label { display: grid; gap: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.brief input, .brief select, .brief textarea { font: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--green); background: transparent; border: 0; border-bottom: 1.5px solid rgba(22,36,29,.35); padding: 10px 0; border-radius: 0; outline: none; transition: border-color .3s; }
.brief input:focus, .brief select:focus, .brief textarea:focus { border-color: var(--cinnabar); }
.brief textarea { min-height: 120px; resize: vertical; }
.brief__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.brief button { justify-self: start; margin-top: 10px; }
.brief__note { font-size: 13px; opacity: .6; }
.location { position: relative; display: block; margin-top: 40px; border: 1.5px solid var(--green); background: #e8eae6; overflow: hidden; }
.location iframe { display: block; width: 100%; height: clamp(300px, 42vh, 440px); border: 0; }
.location__open { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--green); color: var(--paper); font-size: 13px; letter-spacing: .04em; text-decoration: none; transition: background .3s; }
.location__open:hover { background: var(--cinnabar); }

@media (max-width: 1100px) {
  .study-cards { grid-template-columns: repeat(2, 1fr); }
  .scard, .scard:nth-child(1), .scard:nth-child(2) { grid-column: span 1; }
  .contact-page { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .survey-hero .hero__content { max-width: none; right: var(--gutter); bottom: 120px; }
  .survey-hero .hero__title { font-size: 11vw; }
  .survey-hero__wash { background: linear-gradient(to top, rgba(251,250,246,.97) 0%, rgba(251,250,246,.85) 45%, rgba(251,250,246,0) 75%); }
  .survey__tb, .survey__hint, .survey__north { display: none; }
  .survey__scale { bottom: 26px; }
  .teaser { grid-template-columns: 1fr; }
  .study-cards { grid-template-columns: 1fr; }
  .cta__title { max-width: none; }
  .cta .contact__cta { position: relative; top: auto; transform: none; margin-top: 40px; right: auto; }
  .study { height: 220vh; }
  .study__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 84px 12px 70px; gap: 12px; align-content: start; }
  .study__sheet { height: auto; aspect-ratio: 1200 / 800; }
  .study__side { justify-content: flex-start; }
  .study__side h2 { font-size: 40px; }
  .study__line { margin: 10px 0; font-size: 14px; }
  .calc__row { font-size: 13px; padding: 7px 0; }
  .study-index { left: 12px; right: 12px; bottom: 12px; overflow-x: auto; }
  .smodal__inner { grid-template-columns: 1fr; align-items: start; align-content: start; padding: 70px 12px 30px; gap: 14px; }
  .smodal .study__sheet { height: auto; aspect-ratio: 1200 / 800; }
  .smodal__close { top: 14px; right: 12px; }
  .contact-page { grid-template-columns: 1fr; }
  .contact-page .contact__grid { grid-template-columns: 1fr; }
  .brief__row { grid-template-columns: 1fr; }
}