/* KLIP — shared stylesheet. Brand: Montserrat, #E40E20 / #1D1D1C / #5D5D5C / #EBEBEB */
:root{
--ink:#1d1d1c;
--ink-2:#262625;
--paper:#ebebeb;
--white:#ffffff;
--gray:#5d5d5c;
--gray-2:#9a9a9a;
--line:#d9d9d8;
--line-dark:#2a2a2a;
--red:#e40e20;
--gutter:40px;
--wrap:1560px;
--radius:0px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);width:100%}
/* ---------- type ---------- */
h1,h2,h3{font-family:'Montserrat',sans-serif;margin:0;font-weight:800;letter-spacing:-.025em;line-height:1;text-transform:uppercase}
h1{font-size:clamp(36px,5.3vw,76px)}
h2{font-size:clamp(26px,3.4vw,49px)}
h3{font-size:16px;letter-spacing:-.005em;text-transform:none;font-weight:700}
.eyebrow{
font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;
letter-spacing:.3em;text-transform:uppercase;color:var(--gray);margin:0 0 16px
}
.eyebrow.on-dark{color:#b9b9b9}
.lede{font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:#3a3a3a;max-width:46ch}
.lede.on-dark{color:#c8c8c8}
.dot{color:var(--red)}
h1 .dot,h2 .dot{
display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--red);
margin-left:.06em;vertical-align:baseline;font-size:1em;text-indent:-9999px;overflow:hidden;
}
h2 .dot--q{width:auto;height:auto;border-radius:0;background:none;text-indent:0;overflow:visible;color:var(--red)}
/* the KLIP recording dot: one subtle REC pulse after the headline lands.
box-shadow only, so nothing reflows — and the global reduced-motion
rule switches it off. */
.hero.in h1 .dot{animation:rec 1.6s cubic-bezier(.2,.7,.3,1) .95s 1 both}
@keyframes rec{
0%{box-shadow:0 0 0 0 rgba(228,14,32,.6)}
55%{box-shadow:0 0 0 .5em rgba(228,14,32,0)}
100%{box-shadow:0 0 0 0 rgba(228,14,32,0)}
}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:22px;justify-content:space-between;
font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;padding:16px 22px;border:1px solid transparent;
transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
white-space:nowrap;
}
.btn .ar{transition:transform .25s ease}
.btn:hover .ar{transform:translateX(5px)}
.btn--solid{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:var(--red);border-color:var(--red)}
.btn--outline{border-color:#cfcecb;color:var(--ink)}
.btn--outline:hover{border-color:var(--ink)}
.link{
display:inline-flex;align-items:center;gap:12px;font-family:'Montserrat',sans-serif;
font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.link .ar{transition:transform .25s ease}
.link:hover .ar{transform:translateX(5px)}
/* ---------- header ---------- */
.site-header{
position:fixed;inset:0 0 auto 0;z-index:60;
transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
border-bottom:1px solid transparent;
}
.site-header.is-stuck{background:rgba(10,10,10,.88);backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--line-dark)}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:108px}
.brand{display:block;flex:0 0 auto}
.brand img{height:58px;width:auto;transition:height .3s ease}
.nav{display:flex;gap:clamp(18px,2.4vw,44px);margin-left:auto}
.nav a{
font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:#fff;position:relative;padding:6px 0;
}
.nav a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--red);
transition:right .3s ease;
}
.nav a:hover::after{right:0}
.header-cta{margin-left:auto}
.nav + .header-cta{margin-left:clamp(18px,3vw,56px)}
.burger{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:1.5px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:#fff}
.burger span::before{top:-7px}.burger span::after{top:7px}
.drawer{
position:fixed;inset:0;z-index:70;background:var(--ink);padding:28px var(--gutter);
display:none;flex-direction:column;
}
.drawer.is-open{display:flex}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:64px}
.drawer-top img{height:34px}
.drawer nav{display:flex;flex-direction:column;gap:4px;margin-top:40px}
.drawer nav a{font-family:'Montserrat',sans-serif;font-weight:800;font-size:32px;text-transform:uppercase;color:#fff;padding:10px 0;letter-spacing:-.02em}
.drawer .btn{margin-top:auto;justify-content:center}
/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;background:#0a0a0a;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:62% center}
.hero-scrim{
position:absolute;inset:0;
background:
linear-gradient(90deg,rgba(8,8,8,.96) 0%,rgba(8,8,8,.92) 26%,rgba(8,8,8,.62) 45%,rgba(8,8,8,.15) 66%,rgba(8,8,8,.35) 100%),
linear-gradient(0deg,rgba(8,8,8,.75) 0%,rgba(8,8,8,0) 45%),
linear-gradient(180deg,rgba(8,8,8,.7) 0%,rgba(8,8,8,0) 22%);
}
.hero .wrap{position:relative;padding-top:178px;padding-bottom:0}
.hero-copy{max-width:640px}
.hero h1{color:#fff;margin-bottom:26px}
.hero .lede{color:#d4d4d4;max-width:42ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.hero-stats{
display:flex;flex-wrap:wrap;gap:0;margin-top:54px;padding:26px 0 34px;
border-top:1px solid rgba(255,255,255,.14);
}
.stat{padding-right:clamp(22px,3vw,44px);margin-right:clamp(22px,3vw,44px);border-right:1px solid rgba(255,255,255,.14)}
.stat:last-child{border-right:0;margin-right:0;padding-right:0}
.stat b{display:block;font-family:'Montserrat',sans-serif;font-size:clamp(20px,1.9vw,27px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.stat span{font-size:12px;color:#b4b4b4}
.hero-aside{
position:absolute;right:var(--gutter);bottom:120px;text-align:right;color:#cdcdcd;
font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.3em;line-height:2;
text-transform:uppercase;
}
.hero-aside::before{content:"";display:block;width:1px;height:46px;background:rgba(255,255,255,.4);margin:0 0 18px auto}
/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(56px,6vw,96px) 0}
.sec--dark{background:var(--ink);color:#fff}
.sec--paper{background:var(--paper)}
.sec-head{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(30px,3.4vw,48px)}
.sec-head .titles{flex:1 1 440px;min-width:0}
.sec-head .aside{flex:0 1 420px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.sec-head .aside.right{align-items:flex-end;text-align:right}
/* services */
.services{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.services>*,.rooms>*,.photo-grid>*,.case-grid>*,.photo-split>*,.studio-split>*,.location .wrap>*,.pod-grid>*{min-width:0}
.service{
background:var(--white);border:1px solid var(--line);padding:26px 22px 30px;
display:flex;flex-direction:column;gap:14px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.service:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.07);border-color:#d3d2cf}
.service svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.5}
.service h3{font-size:15px;line-height:1.25;letter-spacing:-.01em}
.service p{margin:0;font-size:13px;line-height:1.5;color:var(--gray)}
/* podcast */
.pod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pod{display:block;color:#fff}
.pod-thumb{position:relative;aspect-ratio:16/11.6;overflow:hidden;background:#1b1b1b}
.pod-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pod:hover .pod-thumb img{transform:scale(1.045)}
.pod-meta{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-top:14px}
.pod-meta .label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#a0a0a0}
.pod-meta h3{font-size:15px;margin-top:6px}
.pod-time{font-size:12px;color:#a0a0a0;display:flex;align-items:center;gap:8px;white-space:nowrap}
.carousel-ctl{display:flex;gap:10px}
.circ{width:42px;height:42px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;transition:background .25s ease,color .25s ease,border-color .25s}
.circ:hover{background:#fff;color:var(--ink);border-color:#fff}
/* studio */
.studio-split{display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr);align-items:stretch;background:var(--white)}
.studio-split figure{margin:0;min-height:300px;width:100%;overflow:hidden}
.studio-split img{width:100%;height:100%;object-fit:cover}
/* A room figure and the gallery button inside it each declared their own
aspect-ratio - 3/2 on the figure against 4/3.1 on the button - so on a
phone the button came out 302px tall inside a 260px figure and painted
42px of photograph over the room number and its label. The figure owns
the shape; the button fills it. Absolute positioning is safe here: the
button is the figure's only child. The figure clips too, so nothing
added inside it later can reach the copy. */
.studio-split .room-fig>.room-img{position:absolute;inset:0;aspect-ratio:auto;height:auto}
.studio-copy{padding:clamp(30px,4vw,64px) clamp(26px,4vw,72px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.studio-copy .btn{align-self:flex-start;margin-top:8px}
/* The rooms are a main reason to choose KLIP, so they get real size:
2 x 2 on desktop, the amenities band underneath them. */
.rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.rooms .room-img{aspect-ratio:16/10}
.room{display:block}
.room-img{aspect-ratio:4/3.1;overflow:hidden;background:#ddd}
.room-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.room:hover .room-img img{transform:scale(1.05)}
.room h3{margin-top:14px;font-size:15px}
.room span{font-size:13px;color:var(--gray)}
/* image-led room blocks on the Studio page — photo dominant, sides
alternating. Same type, colours, spacing and buttons as everywhere
else; only the image weight changes. */
.studio-split--room{grid-template-columns:minmax(0,66fr) minmax(0,34fr);margin-top:14px}
.studio-split--room.is-rev{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
.studio-split--room+.studio-split--room{margin-top:10px}
.studio-split--room figure{aspect-ratio:16/9;min-height:0}
.studio-split--room h2{font-size:clamp(24px,2.5vw,38px)}
.room-caps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.room-caps li{
font-size:13px;line-height:1.45;color:var(--gray);
padding:9px 0 9px 18px;border-top:1px solid var(--line);position:relative;
}
.room-caps li:last-child{border-bottom:1px solid var(--line)}
.room-caps li::before{
content:"";position:absolute;left:0;top:15px;
width:5px;height:5px;border-radius:50%;background:var(--red);
}
.room-panel{background:var(--ink);color:#fff;padding:26px 28px;margin-top:14px;
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px}
.room-panel ul{list-style:none;margin:0;padding:0;flex:1 1 560px;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 28px}
.room-panel li{display:flex;align-items:center;gap:12px;font-size:12.5px;color:#dcdcdc}
.room-panel svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.4;flex:0 0 auto}
.room-panel .btn{flex:0 0 auto;justify-content:center;padding:13px 20px;font-size:11px}
/* photography */
.photo-split{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(24px,3vw,56px);align-items:center}
.photo-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.photo-actions .btn{padding:13px 14px;font-size:10.5px;gap:12px;letter-spacing:.1em}
.photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ph{position:relative;overflow:hidden;aspect-ratio:3/4.1;background:#ddd;margin:0}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ph:hover img{transform:scale(1.06)}
.ph figcaption{
position:absolute;left:0;right:0;bottom:0;padding:38px 16px 14px;color:#fff;
font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:-.01em;
background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,0) 100%);
}
/* on location */
.location{position:relative;background:#0a0a0a;color:#fff;overflow:hidden;padding:clamp(60px,7vw,110px) 0}
.location .bg{position:absolute;inset:0}
.location .bg img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.location .scrim{
position:absolute;inset:0;
background:linear-gradient(90deg,rgba(6,6,6,.94) 0%,rgba(6,6,6,.82) 30%,rgba(6,6,6,.25) 55%,rgba(6,6,6,.1) 72%,rgba(6,6,6,.55) 100%);
}
.location .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,286px);gap:40px;align-items:center}
.loc-copy{max-width:560px}
.loc-copy .btn{margin-top:30px}
.loc-panel{background:rgba(12,12,12,.93);border:1px solid rgba(255,255,255,.1);padding:28px 26px;display:flex;flex-direction:column;gap:18px}
.loc-panel div{display:flex;align-items:center;gap:14px;font-size:12.5px;color:#dedede}
.loc-panel svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.4;flex:0 0 auto}
/* case studies */
.case-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.case{display:block}
.case-img{position:relative;aspect-ratio:16/9.6;overflow:hidden;background:#ddd}
.case-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case:hover .case-img img{transform:scale(1.05)}
.play{
position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.94);display:grid;place-items:center;transition:transform .25s ease,background .25s ease;
}
.play svg{width:13px;height:13px;fill:var(--ink)}
.case:hover .play,.pod:hover .play{transform:scale(1.1);background:#fff}
.case h3{margin-top:14px;font-size:15px}
.case span{font-size:13px;color:var(--gray)}
/* final cta */
.final{position:relative;background:#0a0a0a;color:#fff;overflow:hidden;padding:clamp(58px,6.5vw,104px) 0}
.final .bg{position:absolute;inset:0}
.final .bg img{width:100%;height:100%;object-fit:cover;object-position:right center}
.final .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,7,.97) 0%,rgba(7,7,7,.9) 38%,rgba(7,7,7,.45) 62%,rgba(7,7,7,.2) 100%)}
.final .wrap{position:relative}
.final h2{max-width:none;margin-bottom:34px}
.final-actions{display:flex;flex-wrap:wrap;gap:14px}
/* footer */
.site-footer{background:var(--white);padding:clamp(34px,3.4vw,52px) 0 28px}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;gap:28px 48px}
.foot-top img.logo{height:74px;width:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,46px);margin:0 auto}
.foot-nav a{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#3a3a3a}
.foot-nav a:hover{color:var(--red)}
.socials{display:flex;gap:20px}
.socials a{width:24px;height:24px;display:grid;place-items:center;color:#1a1a1a;transition:color .25s}
.socials a:hover{color:var(--red)}
.socials svg{width:20px;height:20px;fill:currentColor}
.foot-bottom{
display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
margin-top:clamp(28px,3vw,52px);padding-top:22px;border-top:1px solid var(--line);
font-size:12.5px;color:var(--gray);
}
.foot-bottom a{color:var(--gray)}
.foot-bottom a:hover{color:var(--ink)}
/* reveal */
/* ---------- responsive ---------- */
@media (max-width:1180px){
:root{--gutter:28px}
.services{grid-template-columns:repeat(3,minmax(0,1fr))}
.room-panel ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
}
@media (max-width:1024px){
.nav,.header-cta{display:none}
.burger{display:flex}
.site-header .wrap{height:76px}
.brand img{height:46px}
.site-header.is-stuck .brand img{height:40px}
.hero .wrap{padding-top:120px}
.hero-aside{display:none}
.studio-split{grid-template-columns:minmax(0,1fr)}
.studio-split figure{aspect-ratio:16/9;min-height:0}
/* tablet: keep the photo dominant while it still reads side by side */
.studio-split--room{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
.studio-split--room.is-rev{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
.studio-split--room .studio-copy{padding:26px 28px 30px}
.photo-split{grid-template-columns:minmax(0,1fr);gap:28px}
.location .wrap{grid-template-columns:minmax(0,1fr)}
.loc-panel div{font-size:13px}
.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
:root{--gutter:20px}
.hero{min-height:auto;padding-bottom:10px}
.hero .wrap{padding-top:112px}
.hero-media img{object-position:68% center}
.hero-scrim{background:linear-gradient(180deg,rgba(8,8,8,.82) 0%,rgba(8,8,8,.6) 40%,rgba(8,8,8,.92) 100%)}
.hero-actions .btn{flex:1 1 100%;justify-content:space-between}
.hero-stats{gap:18px 0;margin-top:34px}
.stat{flex:1 1 45%;border-right:0;padding-right:12px;margin-right:0}
.services{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.service{padding:20px 16px 24px}
.pod-grid{
grid-auto-flow:column;grid-auto-columns:91vw;grid-template-columns:none;
overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 6px;
}
.pod-thumb{aspect-ratio:16/9}
.pod{scroll-snap-align:start}
.carousel-ctl{display:none}
/* phones: full-width room photo above the copy, never a thumbnail */
.studio-split--room,.studio-split--room.is-rev{grid-template-columns:minmax(0,1fr)}
.studio-split--room figure{aspect-ratio:3/2;order:-1}
.studio-split--room .studio-copy{padding:24px 20px 28px;gap:16px}
.studio-split--room .photo-actions{margin-top:18px}
.studio-split--room .photo-actions .btn{flex:1 1 100%;justify-content:space-between}
/* one large room at a time — a thumbnail sells nothing */
.rooms{
grid-auto-flow:column;grid-auto-columns:91vw;grid-template-columns:none;
overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 6px;
}
.rooms .room{scroll-snap-align:start;scroll-snap-stop:always}
.rooms .room-img{aspect-ratio:3/2}
.room-panel{flex-direction:column;align-items:stretch;padding:20px 18px;margin-top:12px}
.room-panel ul{flex:0 0 auto;align-content:start;grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px 16px}
.room-panel li{align-items:flex-start}
.room-panel li{font-size:12px;gap:9px}
.room-panel svg{width:17px;height:17px}
.room-panel .btn{width:100%}
.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-grid{grid-template-columns:minmax(0,1fr)}
.sec-head{align-items:flex-start}
.sec-head .aside.right{align-items:flex-start;text-align:left}
.foot-nav{margin:0;gap:14px 24px}
.foot-top{gap:22px}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* ============ PREMIUM LAYER ============ */
::selection{background:var(--red);color:#fff}
html{scroll-behavior:smooth}
section[id],footer[id]{scroll-margin-top:110px}
/* The room blocks are divs, not sections, so they were missed by the rule
above and landed flush with the viewport top — straight under the fixed
header, which ate their first 77px: the top of the photo, and the room
number and name right after it. */
.studio-split[id],.photo-split[id]{scroll-margin-top:110px}
h1,h2{text-wrap:balance}
body{font-feature-settings:"kern" 1,"liga" 1}
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:#fff;color:#0c0c0c;padding:12px 18px;
font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
/* scroll progress hairline */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:90;transition:width .12s linear}
/* film grain on dark sections */
.sec--dark,.location,.final,.hero{position:relative}
.sec--dark::after,.location::after,.final::after,.hero::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.035;
background-image:url("data:image/svg+xml;utf8,");
}
.hero .wrap,.location .wrap,.final .wrap{z-index:4}
/* hero slow push-in */
@keyframes kenburns{from{transform:scale(1.085)}to{transform:scale(1)}}
.hero-media img,.hero-media video{animation:kenburns 18s cubic-bezier(.22,.6,.2,1) forwards}
/* staggered reveals */
/* button fill */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;background:var(--red);
transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.btn--ghost:hover::before,.btn--outline:hover::before,.btn--dark:hover::before,.btn--solid:hover::before{transform:scaleX(1)}
.btn--ghost:hover,.btn--outline:hover,.btn--dark:hover,.btn--solid:hover{background:transparent;color:#fff;border-color:var(--red)}
/* card hairline + lift */
.service{position:relative}
.service::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--red);transition:width .45s cubic-bezier(.65,0,.35,1)}
.service:hover::after{width:100%}
.pod-thumb::after,.case-img::after,.room-img::after,.ph::after{
content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,0) 55%);
opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.pod:hover .pod-thumb::after,.case:hover .case-img::after,.room:hover .room-img::after,.ph:hover::after{opacity:1}
.room-img,.pod-thumb,.case-img{position:relative}
.pod-thumb img,.case-img img,.room-img img,.ph img{filter:saturate(.98)}
.pod:hover .pod-thumb img,.case:hover .case-img img,.room:hover .room-img img,.ph:hover img{filter:saturate(1.04) brightness(1.03)}
/* play affordance on podcast cards */
.pod-thumb .play{opacity:.92}
.pod .play{right:50%;bottom:50%;transform:translate(50%,50%) scale(.92);width:52px;height:52px}
.pod:hover .play{transform:translate(50%,50%) scale(1.04)}
.pod .play svg{width:16px;height:16px}
/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(6,6,6,.94);display:none;align-items:center;justify-content:center;padding:28px}
.lb.is-open{display:flex}
.lb-inner{width:min(1100px,100%);aspect-ratio:16/9;background:#000;position:relative}
.lb-inner iframe,.lb-inner video{width:100%;height:100%;border:0;display:block;background:#000}
/* A Short or any clip is 9:16: size the player by height instead, so it
fills the screen rather than sitting as a strip between black bars. */
.lb--portrait .lb-inner{width:auto;height:min(84vh,860px);aspect-ratio:9/16}
@media (max-width:760px){
.lb{padding:18px}
.lb--portrait .lb-inner{height:min(78vh,760px)}
}
.lb-close{position:absolute;top:-46px;right:0;color:#fff;font-size:30px;line-height:1}
.lb-note{color:#bdbdbd;font-size:13px;text-align:center;max-width:460px}
/* sticky header refinement */
.site-header.is-stuck .wrap{height:76px}
.site-header.is-stuck .brand img{height:44px}
.site-header .wrap{transition:height .3s ease}
@media (prefers-reduced-motion:reduce){
.hero-media img,.hero-media video{animation:none}
html{scroll-behavior:auto}
}
/* ============ MOTION SYSTEM ============ */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* masked line reveals (CSS-driven, no scroll library required) */
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block}
.js-motion .ln>span{transform:translateY(110%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.js-motion .fade{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.js-motion .in .ln>span{transform:none}
.js-motion .in .fade{opacity:1;transform:none}
.no-motion .ln>span,.no-motion .fade{transform:none;opacity:1;transition:none}
/* custom cursor */
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:95;pointer-events:none;border-radius:50%;
mix-blend-mode:difference;will-change:transform;opacity:0;transition:opacity .3s ease}
.cursor{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:40px;height:40px;border:1px solid rgba(255,255,255,.75);margin:-20px 0 0 -20px;
display:grid;place-items:center;transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),
margin .35s cubic-bezier(.2,.7,.2,1),background .35s ease,opacity .3s ease,border-color .35s ease}
.cursor-ring b{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;color:#000;opacity:0;transition:opacity .25s ease}
body.cursor-on .cursor,body.cursor-on .cursor-ring{opacity:1}
body.cursor-play .cursor-ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:#fff;border-color:#fff}
body.cursor-play .cursor-ring b{opacity:1}
body.cursor-play .cursor{opacity:0}
body.cursor-link .cursor-ring{width:58px;height:58px;margin:-29px 0 0 -29px}
@media (pointer:coarse){.cursor,.cursor-ring{display:none}}
/* magnetic buttons */
.btn,.circ{will-change:transform}
/* animated underlines */
.link,.foot-nav a{position:relative}
.link::after,.foot-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--red);transition:right .35s cubic-bezier(.65,0,.35,1)}
.link:hover::after,.foot-nav a:hover::after{right:0}
/* sticky mobile CTA */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:8px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
background:rgba(10,10,10,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line-dark);
transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.mcta.is-on{transform:none}
.mcta .btn{flex:1 1 0;justify-content:center;gap:10px;padding:13px 10px;font-size:10.5px}
@media (max-width:760px){.mcta{display:flex}body{padding-bottom:0}}
/* parallax wrappers */
.location .bg,.final .bg{overflow:hidden}
.location .bg img,.final .bg img{height:124%;top:-12%;position:absolute;left:0;width:100%;will-change:transform}
/* hero vignette refinement */
.hero-scrim::after{content:"";position:absolute;inset:0;
background:radial-gradient(130% 90% at 50% 45%,rgba(0,0,0,0) 38%,rgba(0,0,0,.42) 100%)}
@media (prefers-reduced-motion:reduce){
.marquee-track{animation:none}
.cursor,.cursor-ring{display:none}
.js-motion .ln>span,.js-motion .fade{transform:none;opacity:1}
}
/* ============ SPEC REFINEMENT ============ */
/* 03 proof strip — capability, not numbers */
.hero-proof{display:flex;flex-wrap:wrap;margin-top:clamp(34px,4vw,54px);padding:22px 0 32px;border-top:1px solid rgba(255,255,255,.16)}
.hero-proof span{
font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:#e6e6e6;padding-right:clamp(18px,2.6vw,40px);margin-right:clamp(18px,2.6vw,40px);
border-right:1px solid rgba(255,255,255,.18);white-space:nowrap;
}
.hero-proof span:last-child{border-right:0;margin-right:0;padding-right:0}
/* 04 services — flat editorial grid, no cards, no shadows */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.svc{
position:relative;display:block;padding:clamp(26px,2.6vw,38px) clamp(20px,2.4vw,38px) clamp(30px,3vw,44px) 0;
border-bottom:1px solid var(--line);
}
.svc:not(:nth-child(3n+1)){border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,38px)}
/* a last item that would sit alone on its own row runs the full width
instead, so the rule under it reaches the edge like every other row */
.svc:last-child:nth-child(3n+1){grid-column:1/-1}
.svc svg{display:block;width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.4;margin-bottom:16px;opacity:.85}
.svc h3{font-size:clamp(16px,1.3vw,19px);line-height:1.2;letter-spacing:-.015em;margin:0 0 10px;display:inline-block;position:relative}
.svc h3::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--red);transition:right .4s cubic-bezier(.65,0,.35,1)}
.svc:hover h3::after{right:0}
.svc p{margin:0;font-size:13.5px;line-height:1.55;color:var(--gray);max-width:34ch}
.svc:hover p{color:#4a4a4a}
/* 05 why KLIP */
.why-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,72px);align-items:start}
.why-points{margin-top:4px}
.why-point{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:clamp(14px,2vw,32px);
padding:20px 0;border-top:1px solid var(--line)}
.why-point:last-child{border-bottom:1px solid var(--line)}
.why-point b{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.why-point span{font-size:14.5px;color:var(--gray);line-height:1.55}
/* 06 visibility check */
.vis-panel{background:var(--ink);color:#fff;padding:clamp(32px,4.4vw,70px)}
.vis-head{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(26px,3vw,40px)}
.vis-micro{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#9b9b9b}
.vis-form{display:flex;max-width:760px;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.02)}
.vis-form input{
flex:1 1 auto;min-width:0;background:transparent;border:0;color:#fff;padding:17px 20px;font:inherit;font-size:15px;
}
.vis-form input::placeholder{color:#8e8e8e}
.vis-form input:focus{outline:none;background:rgba(255,255,255,.04)}
.vis-form button{
flex:0 0 auto;background:#fff;color:var(--ink);border:0;padding:0 clamp(18px,2vw,28px);
font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:14px;transition:background .25s ease,color .25s ease;
}
.vis-form button:hover{background:var(--red);color:#fff}
.vis-form button[disabled]{opacity:.55;cursor:not-allowed}
.vis-note{margin:16px 0 0;font-size:12px;color:#8e8e8e;max-width:70ch;line-height:1.55}
.vis-out{margin-top:clamp(26px,3vw,42px);display:none}
.vis-out.is-on{display:block}
.vis-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,34px)}
.score b{display:block;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#bdbdbd}
.score .num{font-family:'Montserrat',sans-serif;font-size:clamp(26px,2.6vw,38px);font-weight:800;letter-spacing:-.02em;margin:10px 0 4px;display:flex;align-items:baseline;gap:8px}
.score .num i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#bdbdbd}
.bar{height:3px;background:rgba(255,255,255,.2);margin-top:12px}
.bar i{display:block;height:100%;background:#fff;width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.bar.warn i{background:var(--red)}
.findings{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0}
.findings li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;
border-top:1px solid rgba(255,255,255,.14);padding:15px 0;font-size:14px;line-height:1.5;color:#dcdcdc}
.findings svg{width:16px;height:16px;margin-top:3px;flex:0 0 auto}
.findings .t{font-weight:600;color:#fff;margin-right:6px}
.vis-lead{margin-top:clamp(26px,3vw,40px);border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(24px,3vw,34px)}
.vis-lead h3{font-size:18px;margin-bottom:6px}
.vis-lead p{margin:0 0 20px;font-size:14px;color:#bdbdbd}
.vis-lead form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.vis-lead input{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:14px 16px;font:inherit;font-size:14px;min-width:0}
.vis-lead input::placeholder{color:#8e8e8e}
.vis-lead .btn{grid-column:1/-1;justify-content:center}
.vis-msg{margin-top:16px;font-size:14px;color:#dcdcdc}
.vis-spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(0,0,0,.25);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 07 selected work — asymmetric media grid */
/* three columns with one 2x2 feature: six tiles fill it exactly, and no
tile carries twice the visual weight of a studio room */
/* Four featured projects. On desktop the two reels keep their vertical
shape beside two landscape projects; on a phone the reels pair up. */
.work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:clamp(150px,13.5vw,230px);gap:12px}
.w{position:relative;overflow:hidden;display:block;background:#ddd}
/* qualified so they outrank .w — an unqualified .w--reel loses to the later
.w rule and the reels silently flatten into landscape boxes. */
.work-grid .w--reel{grid-row:span 2}
.work-grid .w--landscape{grid-column:span 2}
.w img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.w:hover img{transform:scale(1.05)}
.w-wide{grid-column:span 2;grid-row:span 2}
.w-tall{grid-row:span 2}
.w-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;color:#fff;
background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,0) 100%)}
.w-cap em{display:block;font-style:normal;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#c9c9c9;margin-bottom:6px}
.w-cap h3{font-size:clamp(14px,1.1vw,17px)}
.w-cap .go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-family:'Montserrat',sans-serif;
font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateY(6px);
transition:opacity .35s ease,transform .35s ease}
.w:hover .w-cap .go{opacity:1;transform:none}
.w-span2{grid-column:span 2}
/* podcast cards on a light section */
.sec--paper .pod{color:var(--ink)}
.sec--paper .pod-meta .label{color:var(--gray)}
.sec--paper .pod-time{color:var(--gray)}
.sec--paper .circ{border-color:#cfcecb;color:var(--ink)}
.sec--paper .circ:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sec--paper .pod-thumb{background:#e6e5e2}
/* ============ MODALS: booking / consultation / photographers ============ */
.mdl{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
background:rgba(6,6,6,.9)}
.mdl.is-open{display:flex}
.mdl-box{position:relative;background:var(--white);width:min(980px,100%);max-height:min(88vh,920px);display:flex;flex-direction:column}
.mdl-box--wide{width:min(1100px,100%)}
.mdl-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(16px,2.4vw,28px);
border-bottom:1px solid var(--line);flex:0 0 auto}
.mdl-top h2{font-size:clamp(15px,1.4vw,19px);letter-spacing:-.01em;text-transform:uppercase}
.mdl-close{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);font-size:22px;line-height:1;
transition:background .2s ease,color .2s ease,border-color .2s}
.mdl-close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mdl-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.mdl-frame{width:100%;height:min(72vh,760px);border:0;display:block;background:#fff}
/* host for the official SimplyBook / Calendly widgets: one scroll area,
never a second scrollbar, never a sideways scroll */
.mdl-widget{width:100%;min-height:min(72vh,760px);background:#fff;overflow-x:hidden}
.mdl-widget iframe{width:100%!important;min-width:0!important;height:min(72vh,760px);border:0;display:block}
.mdl-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;
padding:14px clamp(16px,2.4vw,28px);border-top:1px solid var(--line);font-size:12.5px;color:var(--gray)}
.mdl-foot a{text-decoration:underline;text-underline-offset:3px}
.mdl-state{padding:clamp(28px,5vw,60px) clamp(20px,3vw,40px);text-align:center}
.mdl-state h3{font-size:19px;margin-bottom:10px}
.mdl-state p{margin:0 auto 18px;max-width:56ch;color:var(--gray);font-size:14.5px;line-height:1.6}
.mdl-state .btn{margin:4px}
.mdl-load{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--ink);
border-radius:50%;animation:spin .7s linear infinite}
/* photographer cards */
.pg-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.pg{background:var(--white);padding:clamp(18px,2vw,26px)}
/* the photographer's face leads the card */
.pg-face{aspect-ratio:1/1;margin:0 0 16px;overflow:hidden;background:var(--paper)}
.pg-face img{width:100%;height:100%;object-fit:cover;display:block}
.pg-face--empty{
display:flex;align-items:center;justify-content:center;background:var(--ink);
}
.pg-face--empty span{
font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,42px);
letter-spacing:-.02em;color:#fff;opacity:.9;
}
.pg b{display:block;font-family:'Montserrat',sans-serif;font-size:15px;letter-spacing:-.01em}
/* Was .pg .sp, which collided with .sp — the specials pop-up, a
position:fixed inset:0 overlay at z-index 118. The specialties span
inherited that and became a full-screen shield over the booking modal
(z-index 110), so nothing inside the panel could be clicked. */
.pg .pg-sp{display:block;margin:7px 0 10px;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.pg p{margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--gray)}
.pg .btn{width:100%;justify-content:space-between;padding:12px 14px;font-size:10px}
.pg-first{background:var(--ink);color:#fff;padding:clamp(18px,2vw,26px);display:flex;flex-wrap:wrap;gap:16px;
align-items:center;justify-content:space-between}
.pg-first b{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.pg-first span{display:block;font-size:13.5px;color:#c6c6c6;margin-top:5px}
.pg-note{padding:16px clamp(16px,2.4vw,28px);border-top:1px solid var(--line);font-size:12.5px;color:var(--gray)}
@media (max-width:860px){
.pg-list{grid-template-columns:minmax(0,1fr)}
.mdl{padding:0}
.mdl-box{width:100%;height:100%;max-height:100%}
.mdl-frame{height:100%;min-height:60vh}
.mdl-widget,.mdl-widget iframe{min-height:72vh;height:auto}
}
/* 11 on-location categories */
.loc-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,2.4vw,40px)}
.loc-cats div{border-top:1px solid rgba(255,255,255,.2);padding:13px 0;font-family:'Montserrat',sans-serif;
font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#e2e2e2}
/* 12 industries */
.ind-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ind{position:relative;overflow:hidden;aspect-ratio:4/5;background:#ddd;display:block;margin:0}
.ind img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
/* Only a card that goes somewhere answers the cursor. An amenity card is
a description, not a link, and a picture that leans in under the mouse
promises a click that never happens. */
a.ind:hover img{transform:scale(1.06)}
.ind figcaption{position:absolute;inset:auto 0 0 0;padding:48px 14px 14px;color:#fff;
background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 60%,rgba(0,0,0,0) 100%)}
.ind figcaption b{display:block;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.ind figcaption span{display:block;margin-top:5px;font-size:10.5px;line-height:1.4;color:#c6c6c6}
/* 13 about */
.about-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:center}
.about-split figure{margin:0;overflow:hidden}
.about-split img{width:100%;height:auto;display:block}
/* carousel breakpoints for podcast clips */
@media (max-width:1024px){
.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc:not(:nth-child(3n+1)){border-left:0;padding-left:0}
.svc:nth-child(even){border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,38px)}
.svc:last-child:nth-child(3n+1){grid-column:auto}
.svc:last-child:nth-child(odd){grid-column:1/-1}
.why-split{grid-template-columns:minmax(0,1fr)}
.vis-scores{grid-template-columns:repeat(2,minmax(0,1fr))}
.vis-lead form{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Tablet: two reels across the top, each landscape project full width.
Real ratios here too, so a 9:16 reel is never squashed into a band. */
.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
.work-grid .w{grid-row:auto}
.work-grid .w--reel{grid-column:span 1;aspect-ratio:9/16}
.work-grid .w--landscape{grid-column:1/-1;aspect-ratio:16/9}
.w-span2{grid-column:span 2}
.ind-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.about-split{grid-template-columns:minmax(0,1fr)}
.pod-grid{
grid-auto-flow:column;grid-auto-columns:40%;grid-template-columns:none;
overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 6px;
}
.pod{scroll-snap-align:start}
}
@media (max-width:760px){
.hero-proof span{font-size:10px;padding-right:14px;margin-right:14px}
.svc-grid{grid-template-columns:minmax(0,1fr)}
.svc,.svc:nth-child(even){border-left:0;padding-left:0;padding-right:0}
.why-point{grid-template-columns:minmax(0,1fr);gap:6px}
.vis-scores{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vis-lead form{grid-template-columns:minmax(0,1fr)}
.vis-form{flex-wrap:wrap}
.vis-form input{flex:1 1 100%;border-bottom:1px solid rgba(255,255,255,.25)}
.vis-form button{flex:1 1 100%;justify-content:center;padding:15px}
.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pod-grid{grid-auto-columns:91vw;gap:10px}
.pod{scroll-snap-align:start;scroll-snap-stop:always}
.pod-thumb{aspect-ratio:16/9}
.loc-cats{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
.bar i{transition:none}
}
/* ============ INTERIOR PAGES ============ */
.pagehero{position:relative;background:#0a0a0a;color:#fff;overflow:hidden;
padding:clamp(150px,15vw,230px) 0 clamp(50px,6vw,90px)}
.pagehero .bg{position:absolute;inset:0;overflow:hidden}
.pagehero .bg img{width:100%;height:112%;position:absolute;top:-6%;left:0;object-fit:cover;object-position:60% center}
.pagehero .scrim{position:absolute;inset:0;
background:linear-gradient(90deg,rgba(6,6,6,.95) 0%,rgba(6,6,6,.84) 34%,rgba(6,6,6,.4) 62%,rgba(6,6,6,.5) 100%),
linear-gradient(0deg,rgba(6,6,6,.7) 0%,rgba(6,6,6,0) 55%)}
.pagehero .wrap{position:relative;z-index:2}
.pagehero h1{color:#fff;max-width:18ch}
.pagehero .lede{max-width:52ch}
.pagehero .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.pagehero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.035;
background-image:url("data:image/svg+xml;utf8,")}
/* numbered process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.step{padding:28px clamp(16px,2vw,32px) 32px 0;border-top:1px solid rgba(255,255,255,.18)}
.step:not(:first-child){border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(16px,2vw,32px)}
.step b{display:block;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--red);margin-bottom:14px}
.step h3{font-size:16px;margin-bottom:8px}
.step p{margin:0;font-size:13.5px;line-height:1.55;color:#bdbdbd}
/* current page marker in the nav */
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{right:0}
.foot-nav a[aria-current="page"]{color:var(--ink)}
@media (max-width:1024px){
.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.step:nth-child(odd){border-left:0;padding-left:0}
.step:nth-child(even){border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(16px,2vw,32px)}
}
@media (max-width:760px){
.pagehero{padding-top:clamp(120px,26vw,160px)}
.steps{grid-template-columns:minmax(0,1fr)}
.step,.step:nth-child(even){border-left:0;padding-left:0;padding-right:0}
.pagehero .hero-actions .btn{flex:1 1 100%;justify-content:space-between}
}
/* ============ TAP TARGETS (44px minimum on touch) ============ */
@media (pointer:coarse),(max-width:760px){
.link{min-height:44px;align-items:center}
.foot-nav a{min-height:44px;display:inline-flex;align-items:center}
.socials a{width:44px;height:44px}
.socials svg{width:22px;height:22px}
.circ{width:46px;height:46px}
.mdl-close{width:46px;height:46px}
}
/* optional photographer headshot — only renders when one is supplied */
.pg-shot{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:16px;background:var(--line)}
/* phones under 430px: one service per row — nine cards in two narrow
columns wraps every title */
@media (max-width:430px){
.svc-grid{grid-template-columns:minmax(0,1fr)}
.svc,.svc:nth-child(even){border-left:0;padding-left:0}
}
/* legal pages — long-form reading, same type system */
.pagehero--legal{min-height:auto;padding:150px 0 clamp(46px,6vw,78px)}
.pagehero--legal h1{max-width:16ch}
.legal-body{max-width:70ch}
.legal-body h2{font-size:clamp(20px,2.2vw,30px);margin-bottom:18px}
.legal-body p{font-size:16px;line-height:1.7;color:#3a3a3a;margin:0 0 16px}
.legal-body p:last-child{margin-bottom:0}
.sec--paper + .sec--paper .legal-body{border-top:1px solid var(--line);padding-top:clamp(30px,4vw,48px)}
/* ============================================================
MOBILE REVISION — built to the measurements in the spec.
Desktop is untouched; these rules only apply on a phone.
============================================================ */
@media (max-width:760px){
:root{--gutter:19px}
/* type scale: H1 38-44, H2 30-34, body 16-18 */
h1{font-size:clamp(38px,10.6vw,44px)}
h2{font-size:clamp(30px,8.2vw,34px)}
.lede{font-size:17px;line-height:1.6}
.sec{padding:62px 0}
/* Work: two reels across, then full-width landscape projects.
A 9:16 card at 44-46vw is tall enough to read and short enough
that the section does not take over the page. */
.work-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:auto;gap:8px;
}
.work-grid .w{grid-column:auto;grid-row:auto}
.work-grid .w--reel{aspect-ratio:9/16}
.work-grid .w--landscape{grid-column:1/-1;aspect-ratio:16/9}
.w-cap{padding:34px 14px 13px}
.w-cap h3{font-size:14px}
.w-cap .go{display:none}
/* the sticky bar stays out of the way of everything else */
.mcta .btn{min-height:50px;padding:14px 16px;font-size:11px}
}
/* Reels on the Work page: two per row, never one giant stack */
@media (max-width:760px){
.work-filters{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
margin:0 calc(var(--gutter)*-1) 18px;padding:0 var(--gutter) 4px;-webkit-overflow-scrolling:touch}
.work-filters button{flex:0 0 auto;scroll-snap-align:start}
}
.work-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.work-filters button{
font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;padding:12px 16px;min-height:44px;cursor:pointer;
background:transparent;border:1px solid var(--line);color:var(--gray);
transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.work-filters button:hover{border-color:var(--ink);color:var(--ink)}
.work-filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ind-grid .ind[hidden]{display:none}
/* Work page grid: the same card language, sized for a full portfolio */
/* Homepage featured strip, 2 reels + 2 landscape projects: a tall reel beside a
big landscape, twice. Real aspect ratios, so nothing is cropped to fit a row
band. Desktop only — the phone layout below stacks them its own way. */
@media (min-width:1025px){
.work-grid--mix22{grid-auto-rows:auto}
.work-grid--mix22 .w{grid-row:auto}
.work-grid--mix22 .w--reel{grid-column:span 1;aspect-ratio:9/16}
.work-grid--mix22 .w--landscape{grid-column:span 3;aspect-ratio:16/9}
/* source order is reel, reel, landscape, landscape; interleave for display
so the phone keeps its own pairing from the markup. */
.work-grid--mix22 .w:nth-child(1){order:1}
.work-grid--mix22 .w:nth-child(2){order:3}
.work-grid--mix22 .w:nth-child(3){order:2}
.work-grid--mix22 .w:nth-child(4){order:4}
}
.work-grid--all{grid-auto-rows:clamp(150px,13.5vw,230px)}
.work-grid--all .w--reel{grid-row:span 2}
.work-grid--all .w--landscape{grid-column:span 2}
@media (max-width:760px){
.work-grid--all{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
.work-grid.work-grid--all .w--reel{grid-column:auto;grid-row:auto;aspect-ratio:9/16}
.work-grid.work-grid--all .w--landscape{grid-column:1/-1;aspect-ratio:16/9}
}
.work-grid .w[hidden]{display:none}
/* homepage room card: a short line and three capabilities, never a spec sheet */
.room-caps--mini{margin-top:10px}
.room-caps--mini li{font-size:12px;padding:7px 0 7px 16px;line-height:1.4}
.room-caps--mini li::before{top:13px;width:4px;height:4px}
.room-caps--mini li:last-child{border-bottom:0;padding-bottom:0}
/* Photography actions on a phone: full-width, 56-60px, stacked */
@media (max-width:760px){
.photo-actions{flex-direction:column;gap:11px;margin-top:24px}
.photo-actions .btn{width:100%;min-height:58px;justify-content:space-between;
padding:18px 18px;font-size:11.5px}
.photo-split .link{
display:flex;align-items:center;justify-content:space-between;width:100%;
min-height:56px;padding:16px 18px;border:1px solid var(--line);
font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
}
.photo-split p:has(> .link){margin-top:11px!important}
}
/* Podcast cards come in two shapes: full episodes and short clips */
.pod--episode .pod-thumb{aspect-ratio:16/9}
.pod--clip .pod-thumb{aspect-ratio:9/16}
.pod-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .4s ease}
.pod-thumb video.is-playing,.w video.is-playing{opacity:1}
.w{position:relative}
.w video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .4s ease;z-index:0}
.w .w-cap{z-index:2}
@media (max-width:760px){
/* Episodes and clips are now separate rails (.pod-grid--eps / .pod-clips),
each with its own rules further down. A plain .pod-grid that is neither
still falls back to two-up rather than four full-height stacks. */
.pod-grid:not(.pod-grid--eps){grid-auto-flow:row;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-columns:auto;overflow:visible;gap:8px;margin:0;padding:0}
}
@media (prefers-reduced-motion:reduce){
.pod-thumb video,.w video{display:none!important}
}
/* ------------------------------------------------------------------
Carousel position dots. Only shown when a rail actually overflows —
the script hides them on desktop where the same markup is a grid.
------------------------------------------------------------------ */
.rail-dots{display:flex;justify-content:center;gap:7px;margin:12px 0 0}
.rail-dots[hidden]{display:none}
.rail-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;
background:rgba(0,0,0,.18);transition:background .25s ease,transform .25s ease;cursor:pointer}
.rail-dot.is-on{background:var(--red);transform:scale(1.25)}
.sec--dark .rail-dot,.sec--ink .rail-dot{background:rgba(255,255,255,.26)}
.sec--dark .rail-dot.is-on,.sec--ink .rail-dot.is-on{background:#fff}
/* ------------------------------------------------------------------
Phone: booking CTAs carry the page, so they are big and obvious,
and the air between blocks is pulled in so more of the site is
visible per screen. Both asked for directly, 17 Oct.
------------------------------------------------------------------ */
@media (max-width:760px){
.sec{padding:44px 0}
.sec-head{margin-bottom:18px}
.rooms{margin-top:10px}
.studio-copy .lede,.hero-copy .lede{margin-bottom:14px}
.room-panel{margin-top:10px;padding:16px 16px}
.room-panel ul{gap:11px 14px}
.rail-dots{margin-top:9px}
/* every button is a comfortable tap target, not a text link in a box */
.btn{font-size:13px;padding:19px 20px;letter-spacing:.12em;min-height:58px}
/* Action rows stack. Explicitly column + nowrap: these containers are
already flex-direction:column in places, and a column flex that is
allowed to WRAP starts a second column off the side of the screen
instead of stacking — that was a 323px horizontal overflow. */
.photo-actions,.hero-actions,.cta-actions{
display:flex;flex-direction:column;flex-wrap:nowrap;gap:11px}
.photo-actions .btn,.hero-actions .btn,.studio-copy .btn,
.room-panel .btn,.cta-actions .btn{
width:100%;flex:1 1 100%;min-width:0;justify-content:space-between}
.hero-actions{gap:10px}
.photo-actions{gap:11px}
/* the booking button specifically reads as the primary action */
[data-booking],.btn--solid,.btn--dark{min-height:60px;font-size:13.5px}
/* sticky bar: a real bar, not a strip */
.mcta .btn{min-height:56px;padding:16px 18px}
}
/* ------------------------------------------------------------------
Podcasts: FULL EPISODES (16:9, auto-advance rail) above SHORT CLIPS
(9:16, two to a row, never auto-scrolled).
------------------------------------------------------------------ */
.rail-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;color:#8a8a86;
margin:34px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.rail-label:first-of-type{margin-top:4px}
.pod-clips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pod-clips .pod-thumb{aspect-ratio:9/16}
.pod-grid--eps .pod-thumb{aspect-ratio:16/9}
@media (max-width:1024px){
.pod-clips{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.rail-label{margin:26px 0 11px;font-size:10.5px}
/* the episode rail is one card at a time so it can auto-advance */
.pod-grid--eps{
display:grid;grid-auto-flow:column;grid-auto-columns:91vw;
grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
gap:10px;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 4px;
}
.pod-grid--eps .pod{scroll-snap-align:start;scroll-snap-stop:always}
.pod-clips{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
}
/* ------------------------------------------------------------------
Room photo gallery — opens over the page, never leaves the site.
------------------------------------------------------------------ */
figure.has-gallery{position:relative}
.view-photos{
position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;
align-items:center;gap:9px;padding:12px 16px;border:0;cursor:pointer;
font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
background:rgba(255,255,255,.93);backdrop-filter:blur(6px);
transition:background .25s ease,color .25s ease;
}
.view-photos:hover{background:var(--red);color:#fff}
.view-photos svg{width:16px;height:16px}
.vp-n{display:inline-flex;align-items:center;justify-content:center;
min-width:19px;height:19px;border-radius:999px;background:var(--ink);color:#fff;
font-size:10px;letter-spacing:0}
.view-photos:hover .vp-n{background:#fff;color:var(--red)}
.gal{position:fixed;inset:0;z-index:120;display:none;background:rgba(10,10,10,.96);
align-items:center;justify-content:center}
.gal.is-open{display:flex;flex-direction:column;gap:14px}
.gal-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;
gap:16px;padding:18px 20px;color:#fff}
.gal-name{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase}
.gal-count{margin-left:auto;font-family:'Montserrat',sans-serif;font-size:12px;
letter-spacing:.1em;color:#bdbdbd}
.gal-close{width:42px;height:42px;border:0;background:rgba(255,255,255,.1);color:#fff;
font-size:26px;line-height:1;cursor:pointer;transition:background .25s ease}
.gal-close:hover{background:var(--red)}
.gal-track{position:relative;width:min(92vw,1180px);height:min(78vh,760px)}
.gal-track figure{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
transition:opacity .3s ease}
.gal-track figure.is-on{opacity:1;visibility:visible}
.gal-track img{width:100%;height:100%;object-fit:contain}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:52px;height:52px;border:0;cursor:pointer;color:#fff;
background:rgba(255,255,255,.1);transition:background .25s ease}
.gal-arrow:hover{background:var(--red)}
.gal-arrow:disabled{opacity:0;pointer-events:none}
.gal-arrow svg{width:20px;height:20px}
.gal-prev{left:16px}
.gal-next{right:16px}
/* Thumbnail strip. Every photo in the room, visible at once and one tap
away. Before this, a phone had the arrows hidden and swipe as the only
way through, so the second, third and fourth photos were unreachable
unless you guessed the gesture. */
.gal-thumbs{display:flex;gap:8px;max-width:min(92vw,1180px);padding:2px;
overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumbs[hidden]{display:none}
.gal-thumb{flex:0 0 auto;width:94px;height:62px;padding:0;cursor:pointer;
border:2px solid transparent;background:none;opacity:.45;scroll-snap-align:center;
transition:opacity .2s ease,border-color .2s ease}
.gal-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gal-thumb:hover,.gal-thumb:focus-visible{opacity:.85}
.gal-thumb.is-on{opacity:1;border-color:var(--red)}
@media (max-width:760px){
.view-photos{right:10px;bottom:10px;padding:13px 15px;font-size:11px}
.gal-track{width:100vw;height:62vh}
/* The arrows used to be hidden here on the assumption that swipe was
enough. It is not: nothing on screen said more photos existed. They
stay, sized for a thumb and dark enough to read over any photo. */
.gal-arrow{display:flex;align-items:center;justify-content:center;
width:44px;height:44px;background:rgba(0,0,0,.55)}
.gal-prev{left:8px}
.gal-next{right:8px}
.gal-thumbs{max-width:100vw;gap:6px;padding:2px 12px}
.gal-thumb{width:68px;height:48px}
.gal-top{padding:14px 15px;gap:12px}
.gal-close{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
.gal-track figure{transition:none}
}
/* ------------------------------------------------------------------
The four doors, directly under the hero. Text only, no images: it has
to render instantly and fit inside one phone screen, because its whole
job is telling someone what KLIP is before they decide to scroll.
Two across on a phone, four across from tablet up.
------------------------------------------------------------------ */
/* The homepage's media list: nine service names, two across on a phone.
Names only - the descriptions live on the Media page. */
.svc-list{list-style:none;margin:20px 0 0;padding:0;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
background:var(--line);border:1px solid var(--line)}
.svc-list li{background:var(--white)}
.svc-list a{display:flex;align-items:center;gap:10px;padding:14px 15px;
text-decoration:none;color:inherit;font-family:'Montserrat',sans-serif;
font-size:12.5px;letter-spacing:-.01em;transition:background .25s ease}
.svc-list a:hover{background:var(--paper);color:var(--red)}
.svc-list .ki{width:18px;height:18px;flex:0 0 18px}
/* An odd number of services leaves a dead cell in the two-column phone
grid; the last one takes the full width instead. Nine into three on
desktop divides exactly, so this is phone-only. */
@media (max-width:760px){
.svc-list li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:761px){
.svc-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-list a{font-size:14px;padding:17px 18px}
}
.doors{padding-bottom:clamp(30px,3.5vw,54px)}
.door-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.door{display:flex;flex-direction:column;gap:5px;background:var(--white);
padding:clamp(14px,2vw,22px);text-decoration:none;color:inherit;
transition:background .25s ease}
.door:hover{background:var(--paper)}
.door-n{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
letter-spacing:.18em;color:var(--red)}
.door b{font-family:'Montserrat',sans-serif;font-size:14px;letter-spacing:-.01em;
line-height:1.25}
.door-sub{font-size:13px;line-height:1.45;color:var(--gray)}
.door .go{margin-top:auto;padding-top:10px;font-family:'Montserrat',sans-serif;
font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink)}
.door:hover .go{color:var(--red)}
@media (min-width:761px){
.door-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.door b{font-size:16px}
}
/* ------------------------------------------------------------------
FAQ. so it works with the keyboard and without JavaScript,
and so every answer is in the HTML for search engines whether the
row is open or shut. The marker is replaced, not hidden, so the
row never reflows when it opens.
------------------------------------------------------------------ */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
display:flex;align-items:center;gap:20px;justify-content:space-between;
padding:22px 2px;cursor:pointer;list-style:none;
font-family:'Montserrat',sans-serif;font-weight:600;
font-size:clamp(15px,1.25vw,17px);line-height:1.4;color:var(--ink);
transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--red)}
.faq-item summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.faq-item summary svg{flex:0 0 auto;width:17px;height:17px;color:#9a9a96;
transition:transform .3s ease,color .2s ease}
.faq-item[open] summary svg{transform:rotate(45deg);color:var(--red)}
.faq-a{padding:0 2px 24px;max-width:72ch}
.faq-a p{font-size:clamp(15px,1.1vw,16.5px);line-height:1.68;color:#4a4a47;margin:0}
@media (max-width:760px){
.faq-item summary{padding:19px 0;font-size:15.5px;gap:14px}
.faq-a{padding:0 0 20px}
.faq-a p{font-size:15.5px;line-height:1.62}
}
@media (prefers-reduced-motion:reduce){
.faq-item summary svg{transition:none}
}
/* Tablets are touch devices too — 44px is the bare minimum, not a
comfortable target, and these are the booking buttons. */
@media (min-width:761px) and (max-width:1024px){
.btn{padding:17px 20px;min-height:52px;font-size:12.5px}
[data-booking],.btn--solid,.btn--dark{min-height:54px}
}
/* ------------------------------------------------------------------
The two primary photography paths. Equal panels on purpose: booking a
photographer and renting the room are both revenue, so neither is
styled as the secondary option.
------------------------------------------------------------------ */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.duo-panel{display:flex;flex-direction:column;background:var(--white);
border:1px solid var(--line)}
.duo-img{aspect-ratio:4/3;overflow:hidden}
.duo-img img{width:100%;height:100%;object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.duo-panel:hover .duo-img img{transform:scale(1.04)}
.duo-copy{display:flex;flex-direction:column;gap:12px;flex:1;
padding:clamp(22px,2.4vw,34px)}
.duo-copy h3{font-size:clamp(21px,1.9vw,27px);line-height:1.12}
.duo-text{font-size:clamp(14.5px,1.05vw,16px);line-height:1.6;color:#4a4a47;flex:1}
.duo-copy .btn{align-self:stretch;justify-content:space-between}
/* ------------------------------------------------------------------
Photographer cards. Only approved profiles reach this markup — the
renderer requires active + not temp + a headshot + a provider id.
------------------------------------------------------------------ */
.pg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.pg-card{display:flex;flex-direction:column;background:var(--white);
border:1px solid var(--line)}
.pg-shot{aspect-ratio:4/5;overflow:hidden;background:#eceae7}
.pg-shot img{width:100%;height:100%;object-fit:cover}
.pg-body{display:flex;flex-direction:column;gap:9px;flex:1;padding:20px}
.pg-body h3{font-size:clamp(18px,1.5vw,22px)}
.pg-spec{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
letter-spacing:.17em;text-transform:uppercase;color:var(--red)}
.pg-bio{font-size:14.5px;line-height:1.6;color:#4a4a47;flex:1}
.pg-acts{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.pg-work{border:1px solid var(--line);background:none;cursor:pointer;
padding:13px 16px;display:inline-flex;align-items:center;justify-content:space-between;
gap:10px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
transition:background .25s ease,color .25s ease,border-color .25s ease}
.pg-work:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pg-work:hover .vp-n{background:#fff;color:var(--ink)}
.pg-note{margin-top:16px;font-size:14.5px;color:#6a6a66}
/* Shown where the photographer cards would be, while no profile has been
approved. A heading over an empty space reads as a broken page; this
says what is happening and leaves First Available as the working path. */
.pg-pending{border:1px solid var(--line);border-left:3px solid var(--red);
background:var(--white);padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,24px);
margin-top:20px}
.pg-pending p{margin:0;font-size:14.5px;line-height:1.6;color:#4a4a47}
.mdl .pg-pending{margin-top:0}
/* The modal's profile cards get the same action row as the page cards,
so a booking panel shows the headshot, the bio and the work. */
.mdl .pg .pg-acts{margin-top:2px}
.mdl .pg .pg-work{width:100%;justify-content:center}
.pg-first{display:flex;align-items:center;justify-content:space-between;gap:20px;
margin-top:14px;padding:18px 22px;border:1px solid var(--line);background:var(--white)}
.pg-first p:last-of-type{font-size:14.5px;color:#4a4a47;margin-top:4px}
/* The page's First Available panel is light; the one inside the booking
modal is the dark version. The light rule above sets a white background
but not a colour, so the modal's white type was landing on white —
1.0:1, the title invisible. State the dark panel explicitly. */
.mdl .pg-first{background:var(--ink);border-color:var(--ink);color:#fff}
.mdl .pg-first b{color:#fff}
.mdl .pg-first span{color:#c6c6c6}
@media (max-width:1024px){
.pg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.duo{grid-template-columns:minmax(0,1fr);gap:11px;margin-top:14px}
.duo-img{aspect-ratio:16/9}
.duo-copy{padding:20px 18px;gap:10px}
.pg-grid{grid-template-columns:minmax(0,1fr);gap:11px}
.pg-shot{aspect-ratio:3/2}
.pg-first{flex-direction:column;align-items:stretch;gap:14px;padding:18px}
.pg-first .btn{width:100%}
}
/* ------------------------------------------------------------------
The portrait tile grid is shared between Industries (six tiles) and
What We Shoot (four). Four items across a six-column grid leaves the
row stretched and thin, so the column count follows the item count.
------------------------------------------------------------------ */
.ind-grid--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ind-grid--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ind-grid--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1024px){
.ind-grid--n4,.ind-grid--n3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.ind-grid--n4,.ind-grid--n3,.ind-grid--n2{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* iPad portrait stacks the two photography paths; iPad landscape (1024
and up) and desktop are wide enough for two readable 50/50 panels. */
@media (max-width:1023px){
.duo{grid-template-columns:minmax(0,1fr);gap:12px}
.duo-img{aspect-ratio:16/9}
}
@media (min-width:1024px){
.duo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ------------------------------------------------------------------
Podcast grids size to their contents. Two episodes across a four
column grid is the desktop dead space the master doc calls out, so
the column count comes from the item count instead.
Episodes 16:9 — desktop and iPad 2 across, phone one at a time.
Clips 9:16 — desktop 4 across, iPad 2x2, phone 2 per row, and two
clips become two centred columns rather than a gappy four.
------------------------------------------------------------------ */
@media (min-width:761px){
.pod-grid--eps.pod-n1{grid-template-columns:minmax(0,760px);justify-content:center}
.pod-grid--eps.pod-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pod-grid--eps.pod-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pod-grid--eps.pod-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.pod-clips.pod-n1{grid-template-columns:minmax(0,360px);justify-content:center}
.pod-clips.pod-n2{grid-template-columns:repeat(2,minmax(0,420px));
justify-content:center}
.pod-clips.pod-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pod-clips.pod-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:761px) and (max-width:1024px){
/* iPad: episodes stay 2 across, clips become 2 x 2 */
.pod-clips.pod-n3,.pod-clips.pod-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ------------------------------------------------------------------
View Photos: revealed on hover where there is a pointer, always
visible as a badge where there is not. A touch device has no hover,
so an iPad must never have to guess that photos exist.
------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
figure.has-gallery .view-photos{
opacity:0;transform:translateY(6px);
transition:opacity .28s ease,transform .28s ease,background .25s ease,color .25s ease}
figure.has-gallery:hover .view-photos,
figure.has-gallery:focus-within .view-photos{opacity:1;transform:none}
/* keyboard users must still be able to reach it */
figure.has-gallery .view-photos:focus-visible{
opacity:1;transform:none;outline:2px solid var(--red);outline-offset:3px}
}
@media (hover:none),(pointer:coarse){
figure.has-gallery .view-photos{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
figure.has-gallery .view-photos{transition:opacity .01ms}
}
/* ------------------------------------------------------------------
Specials. A centred card on desktop, a compact bottom sheet on a
phone — never a full-screen takeover, and never the first thing a
visitor meets.
------------------------------------------------------------------ */
.sp{position:fixed;inset:0;z-index:118;display:flex;align-items:center;
justify-content:center;padding:20px;background:rgba(10,10,10,.55);
opacity:0;transition:opacity .26s ease}
.sp.is-open{opacity:1}
.sp[hidden]{display:none}
.sp-box{position:relative;width:min(100%,600px);max-height:86vh;overflow:auto;
background:var(--white);display:grid;grid-template-columns:minmax(0,1fr);
transform:translateY(14px);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sp.is-open .sp-box{transform:none}
.sp-close{position:absolute;top:10px;right:10px;z-index:2;width:42px;height:42px;
border:0;background:rgba(255,255,255,.9);color:var(--ink);font-size:25px;
line-height:1;cursor:pointer;transition:background .25s ease,color .25s ease}
.sp-close:hover{background:var(--red);color:#fff}
.sp-img{aspect-ratio:16/9;overflow:hidden}
.sp-img img{width:100%;height:100%;object-fit:cover}
.sp-copy{display:flex;flex-direction:column;gap:12px;padding:26px 26px 28px}
.sp-badge{align-self:flex-start;font-family:'Montserrat',sans-serif;font-size:10px;
font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
background:var(--red);padding:6px 11px}
.sp-copy h2{font-size:clamp(23px,2.4vw,31px);line-height:1.1}
.sp-text{font-size:15.5px;line-height:1.6;color:#4a4a47}
.sp-price{font-family:'Montserrat',sans-serif;font-size:19px}
.sp-price s{color:#9a9a96;font-weight:500;margin-right:8px}
.sp-price b{color:var(--red);font-size:25px;font-weight:800}
.sp-cta{justify-content:space-between}
.sp-mail{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.sp-mail input{flex:1 1 180px;min-width:0;padding:14px 14px;border:1px solid var(--line);
font-family:inherit;font-size:15px;background:var(--paper)}
.sp-mail input:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.sp-note{flex:1 1 100%;font-size:12.5px;color:#8a8a86}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:760px){
/* a sheet from the bottom, sized to its content, not a takeover */
.sp{align-items:flex-end;padding:0}
.sp-box{width:100%;max-height:82vh;transform:translateY(100%)}
.sp-img{aspect-ratio:2/1}
.sp-copy{padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
.sp-copy h2{font-size:24px}
.sp-close{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
.sp,.sp-box{transition:none}
}
/* ==================================================================
KLIP_FINAL §22/§26 — Studio is the strongest proof block on the
lower homepage, and a room card carries three distinct actions:
PHOTO = PHOTOS, ROOM = DETAILS, BOOK = BOOKING.
================================================================== */
.room{display:flex;flex-direction:column;background:var(--white);
border:1px solid var(--line)}
.room-img--gal{position:relative;display:block;width:100%;padding:0;border:0;
background:#ddd;cursor:pointer;overflow:hidden;aspect-ratio:4/3.1}
.rooms .room-img--gal{aspect-ratio:16/10}
.room-img--gal img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.room-img--gal:hover img{transform:scale(1.04)}
.room-img--gal:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.room-text{display:flex;flex-direction:column;gap:7px;flex:1;padding:16px 16px 18px}
.room-name{display:block;color:inherit}
.room-name h3{margin-top:0;font-size:clamp(16px,1.3vw,19px);transition:color .2s ease}
.room-name:hover h3{color:var(--red)}
.room-acts{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;
flex-wrap:wrap}
.room-link{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
display:inline-flex;align-items:center;gap:8px;transition:color .2s ease}
.room-link:hover{color:var(--red)}
.room-book{flex:0 0 auto;margin-left:auto;padding:13px 17px;font-size:11px;gap:12px}
/* The gallery control sits on the photo, which is the thing it opens. */
.room-img--gal .view-photos{right:12px;bottom:12px}
@media (hover:hover) and (pointer:fine){
.room-img--gal .view-photos{opacity:0;transform:translateY(6px);
transition:opacity .28s ease,transform .28s ease,background .25s ease,color .25s ease}
.room-img--gal:hover .view-photos,
.room-img--gal:focus-visible .view-photos{opacity:1;transform:none}
}
@media (hover:none),(pointer:coarse){
.room-img--gal .view-photos{opacity:1;transform:none}
}
@media (max-width:760px){
/* 94-96% of usable width, 4-6% next-card peek. The rail is full-bleed,
so the card is measured against the viewport, not the gutter. */
.rooms{grid-auto-columns:95vw;gap:9px}
.rooms .room-img--gal,.rooms .room-img{aspect-ratio:3/2}
.room-text{padding:15px 15px 17px;gap:6px}
.room-acts{padding-top:12px;gap:10px}
.room-book{margin-left:auto;min-height:56px;padding:16px 17px}
.room-link{font-size:11px}
}
/* ==================================================================
KLIP_FINAL §22 — homepage Work and Podcast get physically smaller so
Studio reads as the proof section. The Work PAGE is untouched: it
keeps true 9:16, because that is where the real portfolio lives.
================================================================== */
@media (min-width:1025px){
/* A compact centred row rather than a full-bleed grid. Vertical
previews crop to 4:5 here so they stay thumbnails instead of
becoming giant 9:16 tiles. */
.work-grid--home{
display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
gap:12px;grid-template-columns:none;grid-auto-rows:auto;
--row:clamp(172px,13.2vw,195px);
}
.work-grid--home .w{grid-column:auto;grid-row:auto;height:var(--row);flex:0 0 auto}
.work-grid--home .w--reel{aspect-ratio:4/5;width:calc(var(--row)*0.8)}
.work-grid--home .w--landscape{aspect-ratio:16/9;width:calc(var(--row)*1.7778)}
/* the interleave ordering is only meaningful in the two-column grid */
.work-grid--home.work-grid--mix22 .w:nth-child(n){order:0}
.work-grid--home .w-cap{padding:30px 14px 12px}
.work-grid--home .w-cap h3{font-size:14px}
.work-grid--home .w-cap em{font-size:9px;margin-bottom:4px}
.work-grid--home .w-cap .go{display:none}
}
@media (min-width:761px) and (max-width:1024px){
.work-grid--home{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
--row:clamp(160px,19vw,185px)}
.work-grid--home .w{grid-column:auto;grid-row:auto;height:var(--row);flex:0 0 auto}
.work-grid--home .w--reel{aspect-ratio:4/5;width:calc(var(--row)*0.8)}
.work-grid--home .w--landscape{aspect-ratio:16/9;width:calc(var(--row)*1.7778)}
.work-grid--home .w-cap .go{display:none}
}
@media (max-width:760px){
/* phone: two 4:5 thumbnails across, then the horizontal projects */
.work-grid--home .w--reel{aspect-ratio:4/5}
.work-grid--home .w-cap{padding:28px 12px 11px}
.work-grid--home .w-cap h3{font-size:13px}
.work-grid--home .w-cap .go{display:none}
/* full-episode rail 82-86% of the viewport, not 91% */
.pod-grid--eps{grid-auto-columns:84vw}
}
/* Homepage podcast preview: compact and centred. The Podcasts page keeps
the full-width presentation — that is where the content lives. */
@media (min-width:761px){
.pod-grid--home.pod-n2{grid-template-columns:repeat(2,minmax(0,430px));
justify-content:center}
.pod-clips--home.pod-n2{grid-template-columns:repeat(2,minmax(0,210px));
justify-content:center}
.pod-grid--home .pod-meta h3{font-size:15px}
.pod-clips--home .pod-meta h3{font-size:14px}
}
/* ------------------------------------------------------------------
Work page, desktop and tablet: true aspect ratios. The uniform row
band was squashing 9:16 reels to 0.83 and stretching 16:9 projects
to 3.47 — the portfolio is the one place the real shape matters
(KLIP_FINAL §4: "Full Work page keeps true 9:16").
align-items:start keeps each card its own height instead of letting
the grid stretch a short card to match a tall neighbour.
------------------------------------------------------------------ */
@media (min-width:761px){
.work-grid--all{
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:auto;align-items:start;grid-auto-flow:row dense;
}
.work-grid.work-grid--all .w{grid-row:auto}
.work-grid.work-grid--all .w--reel{grid-column:span 1;aspect-ratio:9/16}
.work-grid.work-grid--all .w--landscape{grid-column:span 2;aspect-ratio:16/9}
}
@media (min-width:761px) and (max-width:1024px){
.work-grid--all{grid-template-columns:repeat(2,minmax(0,1fr))}
.work-grid.work-grid--all .w--landscape{grid-column:1/-1}
}
/* Short CTA labels on phones, fuller supporting labels on desktop
(KLIP_FINAL §24). Both strings ship, so neither is hidden from a
crawler and swapping them causes no layout shift. */
.lbl-short{display:none}
@media (max-width:760px){
.lbl-full{display:none}
.lbl-short{display:inline}
}
/* ==================================================================
KLIPV2 §28 — the podcast service ladder. The page sells an outcome,
so the levels come before the room and the proof.
================================================================== */
.tier-grid{display:grid;gap:14px;margin-top:22px}
.tier-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tier-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tier-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tier-n1{grid-template-columns:minmax(0,420px);justify-content:center}
.tier{position:relative;display:flex;flex-direction:column;gap:11px;
padding:24px 22px 26px;background:var(--white);border:1px solid var(--line)}
.tier.is-best{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.tier-flag{position:absolute;top:-1px;right:-1px;background:var(--red);color:#fff;
font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;padding:6px 11px}
.tier h3{font-size:clamp(17px,1.4vw,21px);line-height:1.15;padding-right:70px}
.tier-pos{font-size:14px;line-height:1.55;color:#6a6a66}
.tier-price{font-family:'Montserrat',sans-serif;font-size:21px;font-weight:800;
color:var(--ink)}
.tier-inc{display:flex;flex-direction:column;gap:8px;flex:1;margin-top:2px}
.tier-inc li{position:relative;padding-left:19px;font-size:14px;line-height:1.5;
color:#4a4a47}
.tier-inc li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
transform:rotate(-45deg)}
.tier .btn{margin-top:6px;justify-content:space-between}
/* The restrictions note is a term of the price, not decoration, so it
has to be readable: #8a8a86 measured 3.1:1 on the section. */
.tier-note{margin-top:16px;font-size:13.5px;color:#5f5d59}
/* What we can handle / Need help with the show */
.chk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px;
margin-top:20px}
.chk li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.5;
color:var(--ink)}
.chk svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--red)}
.chk-cta{margin-top:26px}
.chk-cta .btn{display:inline-flex}
.note-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:24px 26px;background:var(--white);border:1px solid var(--line)}
.note-panel h3{font-size:clamp(17px,1.4vw,21px)}
.note-panel p{margin-top:6px;font-size:14.5px;color:#4a4a47;max-width:62ch}
@media (max-width:1024px){
.tier-n4,.tier-n3{grid-template-columns:repeat(2,minmax(0,1fr))}
.chk{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.tier-grid{grid-template-columns:minmax(0,1fr);gap:11px;margin-top:16px}
.tier{padding:20px 18px 22px}
.tier h3{padding-right:0}
.tier-flag{position:static;align-self:flex-start;margin-bottom:2px}
.tier .btn{width:100%}
.chk{grid-template-columns:minmax(0,1fr);gap:11px;margin-top:14px}
.chk-cta .btn{width:100%}
.note-panel{flex-direction:column;align-items:stretch;gap:16px;padding:20px 18px}
.note-panel .btn{width:100%}
}
/* Verified inclusions inside a path panel (KLIPV2 §29). Unverified
amenities are filtered out by the renderer, not styled differently —
a bullet on a booking page reads as a promise. */
.duo-pts{display:flex;flex-direction:column;gap:8px;margin:2px 0 4px}
.duo-pts li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.5;
color:#4a4a47}
.duo-pts li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
transform:rotate(-45deg)}
@media (max-width:760px){
.duo-pts li{font-size:14px}
}
/* ==================================================================
KLIPV2 §31 — Insights. Built for authority: readable measure, real
dates and bylines, one CTA per article.
================================================================== */
.page-hero--text{padding:clamp(80px,9vw,140px) 0 clamp(26px,3vw,44px);
background:var(--paper)}
.ins-filters{margin-bottom:22px}
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ins-grid--lead{grid-template-columns:minmax(0,1fr);margin-bottom:16px}
.ins-card{display:flex;flex-direction:column;background:var(--white);
border:1px solid var(--line);transition:border-color .25s ease}
.ins-card:hover{border-color:var(--ink)}
.ins-img{aspect-ratio:3/2;overflow:hidden;background:#eceae7}
.ins-grid--lead .ins-img{aspect-ratio:21/9}
.ins-img img{width:100%;height:100%;object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ins-card:hover .ins-img img{transform:scale(1.04)}
.ins-body{display:flex;flex-direction:column;gap:9px;flex:1;padding:20px}
.ins-meta,.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:#8a8a86}
.ins-cat{color:var(--red);font-weight:700}
.ins-body h3{font-size:clamp(17px,1.4vw,21px);line-height:1.22}
.ins-grid--lead .ins-body h3{font-size:clamp(21px,2.2vw,30px)}
.ins-body p{font-size:14.5px;line-height:1.6;color:#4a4a47}
.ins-card[hidden]{display:none}
.art{background:var(--paper);padding-bottom:clamp(40px,5vw,80px)}
.art-head{padding-top:clamp(80px,9vw,140px);max-width:78ch}
.art-head h1{margin-top:14px;font-size:clamp(31px,4.4vw,56px);line-height:1.05}
.art-head .lede{margin-top:16px}
.art-hero{margin:clamp(26px,3vw,44px) 0 0;aspect-ratio:16/9;overflow:hidden}
.art-hero img{width:100%;height:100%;object-fit:cover}
.art-body{max-width:72ch;padding-top:clamp(26px,3vw,42px)}
.art-body h2{font-size:clamp(22px,2.3vw,30px);line-height:1.15;margin:34px 0 12px}
.art-body h3{font-size:clamp(18px,1.7vw,22px);margin:26px 0 10px}
.art-body p{font-size:clamp(16px,1.15vw,17.5px);line-height:1.72;color:#333331;
margin-bottom:17px}
.art-body ul,.art-body ol{margin:0 0 18px 20px;display:flex;flex-direction:column;
gap:8px}
.art-body li{font-size:clamp(16px,1.15vw,17.5px);line-height:1.65;color:#333331;
list-style:disc}
.art-body ol li{list-style:decimal}
.art-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.art-body blockquote{margin:22px 0;padding-left:20px;border-left:2px solid var(--red);
font-size:clamp(17px,1.4vw,20px);line-height:1.55}
.art-review{margin-top:22px;font-size:13px;color:#8a8a86}
.art-cta{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.ta-c{text-align:center}
@media (max-width:1024px){
.ins-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.ins-grid{grid-template-columns:minmax(0,1fr);gap:11px}
.ins-grid--lead .ins-img{aspect-ratio:3/2}
.art-head h1{font-size:clamp(28px,8.4vw,38px)}
.art-body{padding-top:22px}
.art-cta .btn{width:100%}
}
/* Room detail copy and price, both optional and both CMS-controlled. */
.room-detail{font-size:clamp(14.5px,1.05vw,16px);line-height:1.65;color:#4a4a47;
max-width:62ch}
.room-price{font-family:'Montserrat',sans-serif;font-size:16px;color:#6a6a66}
.room-price b{font-size:22px;font-weight:800;color:var(--ink)}
.room-price s{color:#9a9a96;margin-right:6px}
/* ==================================================================
KLIP_FIX — the three room actions. Real buttons, same labels on both
pages, VIEW PHOTOS beside EXPLORE ROOM rather than hidden on the
image. Explore never means gallery; gallery never means booking.
================================================================== */
.room-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-top:auto;padding-top:14px}
.vp-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
padding:13px 16px;min-height:46px;border:1px solid var(--ink);background:none;
color:var(--ink);font-family:'Montserrat',sans-serif;font-size:11px;
font-weight:700;letter-spacing:.14em;text-transform:uppercase;
transition:background .25s ease,color .25s ease,border-color .25s ease}
.vp-btn:hover{background:var(--ink);color:#fff}
.vp-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.vp-btn svg{flex:0 0 auto;width:16px;height:16px}
.vp-btn .vp-n{display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:20px;border-radius:999px;background:var(--red);color:#fff;
font-size:10px;letter-spacing:0}
.vp-btn:hover .vp-n{background:#fff;color:var(--red)}
.vp-btn--ghost{border-color:var(--line);color:#6a6a66}
.vp-btn--ghost:hover{background:none;border-color:var(--ink);color:var(--ink)}
.vp-btn--lg{min-height:52px;padding:15px 20px;font-size:11.5px;
border-color:var(--red);color:var(--red)}
.vp-btn--lg:hover{background:var(--red);border-color:var(--red);color:#fff}
.vp-btn--lg .vp-n{background:var(--red)}
.vp-btn--lg:hover .vp-n{background:#fff;color:var(--red)}
.room-book{margin-left:auto}
/* The room photo is a gallery trigger, so it reads as pressable. */
.room-img--gal{display:block;width:100%;padding:0;border:0;background:#ddd;
cursor:zoom-in;overflow:hidden;position:relative}
.room-img--gal img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.room-img--gal:hover img{transform:scale(1.04)}
.room-img--gal:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
/* Studio page: the photo is the dominant part of each block, ~70/30. */
.studio-split--room{grid-template-columns:minmax(0,70fr) minmax(0,30fr)}
.studio-split--room.is-rev{grid-template-columns:minmax(0,30fr) minmax(0,70fr)}
.room-fig{position:relative;margin:0}
@media (max-width:1024px){
.studio-split--room,.studio-split--room.is-rev{
grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
/* VIEW PHOTOS and EXPLORE ROOM share a row, BOOK ROOM goes full width */
.room-actions{gap:8px;padding-top:12px}
.vp-btn{flex:1 1 0;justify-content:center;min-height:48px;padding:13px 10px;
font-size:10.5px;letter-spacing:.1em;gap:7px}
.vp-btn svg{width:15px;height:15px}
.vp-btn--lg{flex:1 1 100%;min-height:56px}
.room-book{flex:1 1 100%;margin-left:0;min-height:56px;width:100%}
}
/* ==================================================================
GLOBAL VISUAL SYSTEM — KLIP_GLOBAL §2, §3, §14
------------------------------------------------------------------
The problem this solves: white background + thin grey border + black
heading + grey paragraph, repeated until every page reads as the
same template. The answer is a small set of deliberate modes and
card weights, not one-off styling per section.
Five section modes. Every major section picks one, and the build
refuses to put two light modes back to back (see assign_modes in
build.py).
1 DARK CINEMATIC .sec--dark
2 WARM PAPER .sec--warm
3 IMAGE-LED .sec--image
4 STRUCTURED GRID .sec--grid
5 FEATURE BAND .sec--band
Brand colours and Montserrat are untouched; red stays an accent for
labels, rules, active states and conversion cues, never body copy.
================================================================== */
:root{
--warm:#f3f1ed; /* warm paper surface */
--warm-2:#e8e5df; /* warm card surface */
--char:#232322; /* charcoal for premium cards */
--rule:1.5px; /* structural border weight */
}
.sec--warm{background:var(--warm)}
.sec--grid{background:var(--white)}
.sec--grid .wrap{border-top:var(--rule) solid var(--ink);padding-top:clamp(26px,3vw,44px)}
.sec--image{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.sec--image>.wrap{position:relative;z-index:2}
.sec--image .sec-bg{position:absolute;inset:0;z-index:0}
.sec--image .sec-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.sec--image::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(18,18,17,.55),rgba(18,18,17,.82))}
.sec--image h2,.sec--image h3,.sec--image p,.sec--image .eyebrow{color:#fff}
.sec--band{background:var(--char);color:#fff;padding:clamp(34px,4vw,56px) 0}
.sec--band h2,.sec--band h3,.sec--band p{color:#fff}
.sec--band .eyebrow{color:var(--red)}
/* A red rule under a section eyebrow gives the editorial structure the
thin grey borders were failing to provide. */
.sec--warm .sec-head .eyebrow::after,
.sec--grid .sec-head .eyebrow::after{content:"";display:block;width:34px;
height:2px;background:var(--red);margin-top:9px}
/* ------------------------------------------------------------------
CARD WEIGHTS. Five levels, so a package, a service and a note never
look equally important again.
------------------------------------------------------------------ */
.k-card{position:relative;display:flex;flex-direction:column;gap:10px;
padding:clamp(20px,2.1vw,30px);background:var(--warm-2);
border:var(--rule) solid #cfcbc3;transition:border-color .25s ease,
transform .25s ease,background .25s ease}
.k-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.k-card:focus-within{outline:2px solid var(--red);outline-offset:2px}
.k-card--priority{background:var(--white);border:2px solid var(--ink)}
.k-card--priority::before{content:"";position:absolute;top:-2px;left:-2px;
right:-2px;height:3px;background:var(--red)}
.k-card--premium{background:var(--char);border-color:var(--char);color:#fff}
.k-card--premium h3,.k-card--premium h4{color:#fff}
.k-card--premium p,.k-card--premium li{color:#c9c7c3}
.k-card--premium:hover{border-color:var(--red)}
.k-card--premium .k-num{color:var(--red)}
.k-card--featured{background:var(--white);border:2.5px solid var(--ink);
box-shadow:0 14px 34px rgba(0,0,0,.09)}
.k-card--featured:hover{transform:translateY(-3px)}
/* numbered sequences: 01 / 02 / 03 / 04 */
.k-num{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;
letter-spacing:.2em;color:var(--gray-2)}
.k-flag{position:absolute;top:0;right:0;background:var(--red);color:#fff;
font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:800;
letter-spacing:.18em;text-transform:uppercase;padding:6px 11px}
.k-card--featured .k-flag{top:-2.5px;right:-2.5px}
/* the short bold outcome line that sits under a service title */
.k-outcome{font-family:'Montserrat',sans-serif;font-weight:700;
font-size:clamp(13.5px,1.05vw,15px);line-height:1.4;color:var(--ink)}
.k-card--premium .k-outcome{color:#fff}
.k-card p{font-size:14.5px;line-height:1.6;color:#55534f}
/* a price used as a visual anchor (§13) */
.k-from{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:#5f5d59;margin-bottom:2px}
.k-card--premium .k-from{color:#a8a6a2}
/* The price was rendering at 14.5px. `.k-card p` above is one specificity
point heavier than a bare `.k-price`, so the generic body-copy size won
and the figure came out the same size as the sentence above it. The
selectors below carry enough weight to beat it, and to beat the
dark-section `p` colour rules further down the file. Keep them in step
if either of those rules is ever changed. */
.k-price,
.k-card p.k-price,
.sec--band .k-card:not(.k-card--premium) p.k-price,
.sec--dark .k-card:not(.k-card--premium) p.k-price,
.sec--ink .k-card:not(.k-card--premium) p.k-price{
font-family:'Montserrat',sans-serif;font-size:clamp(30px,2.9vw,40px);
font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.k-price s{font-size:16px;font-weight:500;color:var(--gray-2);margin-right:8px}
.k-card--premium p.k-price{color:#fff}
p.k-price--red{color:var(--red)} /* heavier than the rules above */
/* ------------------------------------------------------------------
SPACING (§14). Sections with little content stop reserving the same
cathedral of white space as sections carrying a room photograph.
------------------------------------------------------------------ */
.sec--tight{padding-top:clamp(34px,3.6vw,56px);padding-bottom:clamp(34px,3.6vw,56px)}
.sec--roomy{padding-top:clamp(64px,7vw,116px);padding-bottom:clamp(64px,7vw,116px)}
.sec-head{margin-bottom:clamp(20px,2.4vw,34px)}
/* ------------------------------------------------------------------
ACCESSIBILITY (§15). One visible focus treatment everywhere, so no
critical action depends on hover and keyboard users can see where
they are.
------------------------------------------------------------------ */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--red);outline-offset:3px}
.sec--dark a:focus-visible,.sec--image a:focus-visible,
.sec--band a:focus-visible,.sec--dark button:focus-visible{
outline-color:#fff}
/* Media services (§5): 3 / 2 / 1 columns, a number and icon area, an
outcome line, a red rule on hover, one charcoal card per row. */
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc-card{gap:9px}
.svc-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--red);transform:scaleX(0);transform-origin:left;
transition:transform .3s cubic-bezier(.16,1,.3,1)}
.svc-card:hover::after,.svc-card:focus-within::after{transform:scaleX(1)}
.svc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-bottom:4px}
.svc-top svg{flex:0 0 auto}
.svc-card h3{font-size:clamp(17px,1.4vw,21px);line-height:1.15}
.svc-card .k-outcome{margin-top:-2px}
@media (max-width:1024px){
.svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:430px){
.svc-cards{grid-template-columns:minmax(0,1fr);gap:11px}
}
/* The four podcast packages (§7) inherit the global card weights and
only add what a price ladder needs. */
.tier{gap:11px}
.tier h3{font-size:clamp(18px,1.5vw,22px);line-height:1.12;padding-right:76px}
.tier .k-num{margin-bottom:-4px}
.tier-pos{font-size:14px;line-height:1.55;color:#6a6a66}
.k-card--premium .tier-pos{color:#b9b7b3}
.tier-inc{display:flex;flex-direction:column;gap:8px;flex:1;margin-top:2px}
.tier-inc li{position:relative;padding-left:19px;font-size:14px;line-height:1.5;
color:#4a4a47}
.k-card--premium .tier-inc li{color:#c9c7c3}
.tier-inc li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
transform:rotate(-45deg)}
.tier .btn{margin-top:6px;justify-content:space-between}
@media (max-width:760px){
.tier h3{padding-right:0}
.tier .k-flag{position:static;align-self:flex-start}
}
/* The price has to sit at the same height in every card.
"Self-Service" is one line and "Premium Content Package" is three, and
the positioning line under it is one line or two, so the price used to
land anywhere from 191px to 239px down the card — visibly ragged across
the row.
A min-height on the name would need a different value at every width
(three lines at 1440, one line at 1000) and would leave dead space
wherever the names happen to fit. Subgrid instead lets the four cards
share the grid's rows, so number / name / positioning / price /
includes / button each take the height of the tallest card and line up
on their own — and keep lining up when the copy is edited in /admin.
This depends on every card having the same six rows, which is why
tiers() in render.py emits the price element even when it is empty. The
Best Value flag is absolutely positioned, so it takes no row. Below
761px the cards stack one per row and there is nothing to align, so the
plain flex layout stays. */
@media (min-width:761px){
.tier-grid{grid-auto-rows:auto}
.tier-grid>.tier{display:grid;grid-template-rows:subgrid;grid-row:span 6;
row-gap:11px}
.tier-grid>.tier>.tier-inc{flex:none}
}
/* Three structured modules instead of one open checkmark field (§7). */
.mod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mod{gap:9px}
.mod h3{font-size:clamp(17px,1.35vw,20px);line-height:1.15}
.mod>p{font-size:14px;color:#6a6a66}
.mod-list{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.mod-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;
line-height:1.45;color:var(--ink)}
.mod-list svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--red)}
@media (max-width:1024px){ .mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
.mod-grid{grid-template-columns:minmax(0,1fr);gap:11px}
.chk-cta .btn{width:100%}
}
/* The offer modal is image-led and dark, not another flat white box
(KLIP_GLOBAL §13). Mobile stays a compact sheet. */
.sp-box{background:var(--char);color:#fff;border:0}
.sp-copy h2{color:#fff}
.sp-text{color:#c9c7c3}
.sp-price{display:flex;align-items:baseline;gap:10px}
.sp-price s{color:#8a8884;font-size:17px}
.sp-price b{color:#fff;font-size:clamp(32px,3.4vw,44px);font-weight:800;line-height:1}
.sp-badge{background:var(--red)}
.sp-close{background:rgba(255,255,255,.12);color:#fff}
.sp-close:hover{background:var(--red)}
.sp-img{position:relative}
.sp-img::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(35,35,34,0) 45%,rgba(35,35,34,.95))}
.sp-cta{background:var(--red);border-color:var(--red);color:#fff}
.sp-cta:hover{background:#fff;border-color:#fff;color:var(--ink)}
.sp-mail input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
color:#fff}
.sp-mail input::placeholder{color:#8a8884}
.sp-mail .btn--outline{border-color:rgba(255,255,255,.4);color:#fff}
.sp-mail .btn--outline:hover{background:#fff;color:var(--ink)}
.sp-note{color:#8a8884}
/* Contrast on charcoal cards. The generic .k-card p rule sits later in the
file and was winning, dropping dark-card body copy to #55534f on #232322
— about 1.2:1. These rules restore it. KLIP_GLOBAL §15 requires strong
text contrast on dark backgrounds, and this is the one place the global
card system could quietly break it. */
.k-card--premium p,
.k-card--premium li,
.k-card--premium .tier-pos,
.k-card--premium .mod-list li{color:#d5d3cf}
.k-card--premium .k-outcome{color:#fff}
.k-card--premium .k-num{color:var(--red)}
.sec--image .k-card--premium p{color:#d5d3cf}
/* No empty light strip between two sections. The structured-grid rule is a
divider above real content, not a band of its own. */
.sec--grid+.sec--grid>.wrap{border-top:0;padding-top:0}
.sec--grid>.wrap:empty{display:none}
.sec--dark+.sec--grid>.wrap{border-top:0}
/* ------------------------------------------------------------------
Dark-surface text, stated once and completely.
The mode system can turn a section that was designed light into a
charcoal band. Anything that carries its own colour — .lede, .eyebrow,
captions, list text — then keeps a dark colour on a dark background.
Measured before this block: two sections at 1.0:1, i.e. text exactly
the colour of what it sat on. These selectors cover every text element
a section can contain, so a mode change can never hide copy again.
------------------------------------------------------------------ */
.sec--band,.sec--dark,.sec--image,.sec--ink{color:#fff}
.sec--band h1,.sec--band h2,.sec--band h3,.sec--band h4,
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4,
.sec--image h1,.sec--image h2,.sec--image h3,.sec--image h4,
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4{color:#fff}
.sec--band p,.sec--band li,.sec--band span,.sec--band time,
.sec--dark p,.sec--dark li,.sec--dark span,.sec--dark time,
.sec--image p,.sec--image li,.sec--image span,.sec--image time,
.sec--ink p,.sec--ink li,.sec--ink span,.sec--ink time{color:#d5d3cf}
.sec--band .lede,.sec--dark .lede,.sec--image .lede,.sec--ink .lede{color:#d5d3cf}
.sec--band .eyebrow,.sec--dark .eyebrow,
.sec--image .eyebrow,.sec--ink .eyebrow{color:#ff5a68}
.sec--band a:not(.btn),.sec--dark a:not(.btn),
.sec--image a:not(.btn),.sec--ink a:not(.btn){color:#fff}
.sec--band .dot,.sec--dark .dot,.sec--image .dot,.sec--ink .dot{color:var(--red)}
/* a light card dropped into a dark section keeps its own dark text */
.sec--band .k-card:not(.k-card--premium),
.sec--dark .k-card:not(.k-card--premium),
.sec--image .k-card:not(.k-card--premium),
.sec--ink .k-card:not(.k-card--premium){color:var(--ink)}
.sec--band .k-card:not(.k-card--premium) h3,
.sec--dark .k-card:not(.k-card--premium) h3,
.sec--ink .k-card:not(.k-card--premium) h3{color:var(--ink)}
.sec--band .k-card:not(.k-card--premium) p,
.sec--band .k-card:not(.k-card--premium) li,
.sec--dark .k-card:not(.k-card--premium) p,
.sec--dark .k-card:not(.k-card--premium) li,
.sec--ink .k-card:not(.k-card--premium) p,
.sec--ink .k-card:not(.k-card--premium) li{color:#55534f}
/* Light cards in a dark section were showing near-white text.
The blanket rule further up colours every
,
and inside a
dark section #d5d3cf, and the card override beneath it names p and li
but not span. So on a cream card in a dark band, anything wrapped in a
span came out #d5d3cf: the checked items in the Production, Content and
Repurposing lists (their text sits in a span), the small card numbers,
the FROM label and the button arrows. That is what looked faded — the
reveal animation was finishing correctly; the colour was wrong.
An unclassed span takes the colour of whatever it sits in. The number,
the flag, the FROM label and the arrow keep their own colours, restated
here only because a one-class selector loses to `.sec--band span`. */
.sec--band .k-card span:not([class]),
.sec--dark .k-card span:not([class]),
.sec--image .k-card span:not([class]),
.sec--ink .k-card span:not([class]){color:inherit}
/* An arrow is part of its button or link and never has a colour of its
own. Without this it is a like any other, so inside a dark
section the blanket rule above painted it #d5d3cf — on a white button
that is 1.5:1, a mark you can barely see. */
.btn .ar,.link .ar,.k-card .btn .ar{color:inherit}
.k-card .k-flag{color:#fff}
/* --gray-2 is #9a9a9a: 2.2:1 on the cream card, a numeral you have to
hunt for. This is the same muted index one step darker, and clears
4.5:1 on both the cream and white cards. */
.k-card .k-num{color:#5f5d59}
.k-card--premium .k-num{color:var(--red)}
.k-card .k-from{color:#5f5d59}
.k-card--premium .k-from{color:#a8a6a2}
/* The module checklists are the content of their card, not body copy, so
they keep near-ink weight rather than the #55534f the card override
gives a paragraph. Charcoal cards are excluded and keep #d5d3cf. */
.mod-list li,
.sec--band .k-card:not(.k-card--premium) .mod-list li,
.sec--dark .k-card:not(.k-card--premium) .mod-list li,
.sec--ink .k-card:not(.k-card--premium) .mod-list li{color:#2e2d2b}
/* images and room photos must not be tinted by the section colour */
.sec--band img,.sec--dark img,.sec--image img,.sec--ink img{color:initial}
/* ------------------------------------------------------------------
Light panels keep dark text whatever section they sit in.
The rules above colour text for dark sections. Several components
carry their own light background (a room copy panel, a photography
path, a photographer card), so inside those the section rule produced
light text on a light surface — measured at 1.25:1. This block states
the opposite and wins on specificity, so each surface decides its own
text colour rather than inheriting the section's.
------------------------------------------------------------------ */
.sec--band .studio-copy,.sec--dark .studio-copy,
.sec--image .studio-copy,.sec--ink .studio-copy,
.sec--band .duo-panel,.sec--dark .duo-panel,
.sec--image .duo-panel,.sec--ink .duo-panel,
.sec--band .pg-card,.sec--dark .pg-card,
.sec--image .pg-card,.sec--ink .pg-card,
.sec--band .room-text,.sec--dark .room-text,
.sec--image .room-text,.sec--ink .room-text,
.sec--band .pg-first,.sec--dark .pg-first,
.sec--band .faq,.sec--dark .faq,
.sec--band .ins-card,.sec--dark .ins-card{color:var(--ink)}
/* The pending-profiles note is a light panel too, and was missing from
the list above, so `.sec--band p` painted it white on its own white
background — the note explaining why no photographers are listed was
invisible on the photography page. */
.sec--band .pg-pending,.sec--dark .pg-pending,
.sec--image .pg-pending,.sec--ink .pg-pending{color:var(--ink)}
.sec--band .pg-pending p,.sec--dark .pg-pending p,
.sec--image .pg-pending p,.sec--ink .pg-pending p{color:#4a4a47}
.sec--band .studio-copy h2,.sec--band .studio-copy h3,
.sec--dark .studio-copy h2,.sec--dark .studio-copy h3,
.sec--image .studio-copy h2,.sec--image .studio-copy h3,
.sec--ink .studio-copy h2,.sec--ink .studio-copy h3,
.sec--band .duo-panel h3,.sec--dark .duo-panel h3,
.sec--image .duo-panel h3,.sec--ink .duo-panel h3,
.sec--band .pg-card h3,.sec--dark .pg-card h3,
.sec--band .room-text h3,.sec--dark .room-text h3,
.sec--image .room-text h3,.sec--ink .room-text h3,
.sec--band .ins-card h3,.sec--dark .ins-card h3{color:var(--ink)}
.sec--band .studio-copy p,.sec--band .studio-copy li,
.sec--band .studio-copy span,.sec--dark .studio-copy p,
.sec--dark .studio-copy li,.sec--dark .studio-copy span,
.sec--image .studio-copy p,.sec--image .studio-copy li,
.sec--image .studio-copy span,.sec--ink .studio-copy p,
.sec--ink .studio-copy li,.sec--ink .studio-copy span,
.sec--band .duo-panel p,.sec--band .duo-panel li,
.sec--dark .duo-panel p,.sec--dark .duo-panel li,
.sec--image .duo-panel p,.sec--image .duo-panel li,
.sec--ink .duo-panel p,.sec--ink .duo-panel li,
.sec--band .pg-card p,.sec--dark .pg-card p,
.sec--band .room-text p,.sec--band .room-text span,
.sec--dark .room-text p,.sec--dark .room-text span,
.sec--image .room-text p,.sec--image .room-text span,
.sec--ink .room-text p,.sec--ink .room-text span,
.sec--band .pg-first p,.sec--dark .pg-first p,
.sec--band .faq p,.sec--dark .faq p,
.sec--band .ins-card p,.sec--dark .ins-card p{color:#55534f}
.sec--band .studio-copy .lede,.sec--dark .studio-copy .lede,
.sec--image .studio-copy .lede,.sec--ink .studio-copy .lede{color:#4a4a47}
.sec--band .studio-copy .eyebrow,.sec--dark .studio-copy .eyebrow,
.sec--image .studio-copy .eyebrow,.sec--ink .studio-copy .eyebrow,
.sec--band .duo-panel .eyebrow,.sec--dark .duo-panel .eyebrow,
.sec--image .duo-panel .eyebrow,.sec--ink .duo-panel .eyebrow{color:var(--red)}
.sec--band .room-link,.sec--dark .room-link,
.sec--image .room-link,.sec--ink .room-link{color:var(--ink)}
.sec--band .vp-btn,.sec--dark .vp-btn,
.sec--image .vp-btn,.sec--ink .vp-btn{color:var(--ink);border-color:var(--ink)}
.sec--band .vp-btn--lg,.sec--dark .vp-btn--lg{color:var(--red);border-color:var(--red)}
/* Lists inside cards draw their own marker, so the browser's disc must go.
Without this each inclusion showed two bullets — a disc and the red
tick — which reads as a mistake at card size. */
.tier-inc,.mod-list,.chk,.duo-pts,.room-caps,.room-caps--mini{list-style:none;
padding-left:0;margin-left:0}
.tier-inc li,.mod-list li,.chk li,.duo-pts li{list-style:none}
.tier-inc li::marker,.mod-list li::marker,.chk li::marker,
.duo-pts li::marker{content:""}
/* A checkmark needs unequal arms. Equal arms with border-left+bottom make
a V, which at list size read as a chevron pointing down rather than a
tick. Right+bottom at 45deg with a 5x9 box is the real shape. */
.tier-inc li::before,.duo-pts li::before{
width:5px;height:9px;top:6px;
border-left:0;border-bottom:1.6px solid var(--red);
border-right:1.6px solid var(--red);
transform:rotate(45deg)}
/* Room numbers (§6). 01 KLIP ROOM / 02 KAPTURE / 03 KREATOR / 04 KANVAS */
.room-no{display:flex;align-items:center;gap:12px;font-family:'Montserrat',sans-serif;
font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
color:var(--red)}
.room-no span{display:inline-flex;align-items:center;justify-content:center;
min-width:30px;height:24px;border:1.5px solid var(--red);font-size:11px;
letter-spacing:.06em}
.room-name .k-num{display:block;margin-bottom:5px;color:var(--red)}
/* ------------------------------------------------------------------
§11 Insights — editorial, not another service grid. A featured
article is a large dark image-led card; the rest sit on warm paper.
------------------------------------------------------------------ */
.ins-card{background:var(--warm-2);border:var(--rule) solid #cfcbc3}
.ins-grid--lead .ins-card{position:relative;background:var(--char);border:0}
.ins-grid--lead .ins-img{aspect-ratio:21/9}
.ins-grid--lead .ins-img::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(35,35,34,.15) 30%,rgba(35,35,34,.9))}
.ins-grid--lead .ins-body{position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:clamp(22px,2.4vw,36px);max-width:70ch}
.ins-grid--lead .ins-body h3{color:#fff}
.ins-grid--lead .ins-body p{color:#d5d3cf}
.ins-grid--lead .ins-meta{color:#b9b7b3}
.ins-grid--lead .ins-cat{color:#ff5a68}
.ins-filters{border-bottom:var(--rule) solid var(--line);padding-bottom:16px}
/* §12 About / FAQ — strong accordion rows on warm paper, not thin white
lines, plus a dark trust band for the differentiators. */
.faq{border-top:2px solid var(--ink)}
.faq-item{border-bottom:var(--rule) solid #cfcbc3;background:var(--warm);
padding:0 clamp(14px,1.6vw,22px);transition:background .25s ease}
.faq-item:hover{background:var(--warm-2)}
.faq-item[open]{background:var(--warm-2)}
.faq-item summary{padding:clamp(19px,2vw,25px) 0}
.faq-a{padding:0 0 clamp(18px,2vw,24px)}
/* §10 Work — let the imagery carry it; the filter row stays light. */
.work-filters{border-bottom:var(--rule) solid var(--line);padding-bottom:14px}
.work-filters button{border-color:var(--line);font-size:11px}
.work-filters button[aria-pressed="true"]{background:var(--ink);
border-color:var(--ink);color:#fff}
/* ------------------------------------------------------------------
§8 One KLIP icon family. Near-black by default with exactly one red
accent group per icon, so icons read as a set rather than a mix of
libraries. Scale: 28-32px desktop, 26-28px mobile.
------------------------------------------------------------------ */
.ki{width:30px;height:30px;color:var(--ink);flex:0 0 auto}
.ki .ax{stroke:var(--red)}
.sec--dark .ki,.sec--band .ki,.sec--image .ki,.sec--ink .ki,
.k-card--premium .ki{color:#fff}
.k-card--premium .ki .ax,.sec--dark .ki .ax,.sec--band .ki .ax{stroke:#ff5a68}
.svc-top .ki{width:30px;height:30px}
.room-panel .ki,.room-panel svg{width:22px;height:22px}
@media (max-width:760px){
.ki{width:27px;height:27px}
}
/* ------------------------------------------------------------------
§2-§4 Media service deep-dives. One component, five section modes, so
nine services read as a designed sequence rather than nine identical
white boxes. Composition alternates with the mode: the id block and
the two-column body stay consistent, the surface does the work.
------------------------------------------------------------------ */
.sv-sec{padding:clamp(52px,6vw,96px) 0;scroll-margin-top:84px}
.sv-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.4vw,38px);
align-items:start;padding-bottom:clamp(20px,2.4vw,32px);
border-bottom:2px solid var(--ink)}
.sec--dark .sv-head,.sec--image .sv-head,.sec--band .sv-head{
border-bottom-color:rgba(255,255,255,.3)}
.sv-id{display:flex;align-items:center;gap:14px}
.sv-n{font-family:'Montserrat',sans-serif;font-size:clamp(28px,3.4vw,46px);
font-weight:800;line-height:1;color:var(--red)}
.sv-title h2{font-size:clamp(26px,3.2vw,44px);line-height:1.05}
.sv-outcome{margin-top:8px;font-family:'Montserrat',sans-serif;font-weight:700;
font-size:clamp(15px,1.3vw,19px);line-height:1.35;color:var(--ink)}
.sec--dark .sv-outcome,.sec--image .sv-outcome,.sec--band .sv-outcome{color:#fff}
.sv-body{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);
gap:clamp(22px,3vw,54px);padding-top:clamp(22px,2.6vw,38px)}
.sv-label{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.sv-why p{font-size:clamp(15px,1.2vw,17.5px);line-height:1.66;color:#4a4a47;
max-width:52ch}
.sec--dark .sv-why p,.sec--image .sv-why p,.sec--band .sv-why p{color:#d5d3cf}
.sv-why .btn{margin-top:22px}
.sv-does ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 clamp(18px,2.2vw,34px);list-style:none;padding:0;margin:0}
.sv-does li{position:relative;padding:11px 0 11px 20px;font-size:14.5px;
line-height:1.45;border-bottom:1px solid var(--line)}
.sec--dark .sv-does li,.sec--image .sv-does li,.sec--band .sv-does li{
border-bottom-color:rgba(255,255,255,.16)}
.sv-does li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:2px;
background:var(--red)}
@media (max-width:1024px){
.sv-body{grid-template-columns:minmax(0,1fr);gap:26px}
.sv-does ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.sv-sec{padding:clamp(40px,7vw,60px) 0;scroll-margin-top:70px}
.sv-head{grid-template-columns:minmax(0,1fr);gap:12px}
.sv-id{gap:11px}
.sv-n{font-size:30px}
.sv-title h2{font-size:clamp(25px,7.4vw,32px)}
.sv-does ul{grid-template-columns:minmax(0,1fr)}
.sv-why .btn{width:100%;margin-top:18px}
}
/* Image-led sections: the photograph is atmosphere, not competition. At
0.3 opacity the picture was still reading through the body copy. */
.sec--image .sec-bg img{opacity:.2}
.sec--image::after{background:linear-gradient(180deg,
rgba(16,16,15,.76),rgba(16,16,15,.9))}
.sv-sec.sec--image .sv-why p{color:#e2e0dc}
/* §7 subtle grain on dark sections — texture, not an effect. A tiny
inline SVG noise tile, so it costs no request and no library. */
.sec--dark::before,.sec--band::before,.sec--image .sec-bg::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
opacity:.055;
background-image:url("data:image/svg+xml;utf8,");
background-size:120px 120px}
.sec--dark,.sec--band{position:relative}
.sec--dark>.wrap,.sec--band>.wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){
.sec--dark::before,.sec--band::before{opacity:.04}
}
/* §9 The mobile service row is a designed card, not a list item: number,
its own icon zone, an outcome label, a red rule and a real link out. */
.svc-more{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;
gap:9px;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.svc-card:hover .svc-more .ar{transform:translateX(5px)}
.k-card--premium .svc-more{color:#ff5a68}
@media (max-width:760px){
.svc-card{padding:18px 16px 16px;gap:7px}
.svc-top{margin-bottom:2px}
.svc-top .ki{width:28px;height:28px}
.svc-card h3{font-size:19px}
.svc-card p{font-size:14px;line-height:1.5}
/* a controlled alternation so a column of cards is not one flat run */
.svc-cards>.svc-card:nth-child(4n+2){background:var(--white)}
.svc-cards>.svc-card:nth-child(4n+2):not(.k-card--premium){
border-color:var(--ink);border-width:2px}
}