/* Bruno Cabinets — clean, light, photo-first. Apple/Airbnb-inspired. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#ffffff; --bg2:#f5f5f7; --ink:#1d1d1f; --ink2:#515154; --ink3:#86868b;
  --line:#e5e5e7; --accent:#b8893d; --accent-ink:#8a6428;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --max:1240px; --pad:clamp(20px,4vw,48px); --r:20px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.06;font-weight:600}
h1{font-size:clamp(40px,6.4vw,84px)}
h2{font-size:clamp(32px,4.4vw,60px)}
h3{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.015em;line-height:1.2}
p{margin:0}
.lede{font-size:clamp(18px,1.5vw,22px);color:var(--ink2);line-height:1.5;max-width:58ch;font-weight:400}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:18px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(72px,9vw,128px) 0}
.section.tight{padding:clamp(40px,5vw,64px) 0}
.section.gray{background:var(--bg2)}
.muted{color:var(--ink3)}
em{font-style:normal;color:var(--accent-ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;border:1px solid var(--line);
  font:600 15px/1 var(--sans);color:var(--ink);background:#fff;transition:.2s;white-space:nowrap}
.btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.solid:hover{background:#000}
.btn.big{padding:20px 32px;font-size:16px}
.btn svg{width:16px;height:16px;transition:.2s}
.btn:hover svg{transform:translateX(3px)}

/* nav — frosted, fixed, 60px */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(0,0,0,.06)}
.nav .brand{font-weight:700;font-size:17px;letter-spacing:-.01em}
.nav .brand span{display:none}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav li a{font:500 14px/1 var(--sans);color:var(--ink2);transition:.2s}
.nav li a:hover,.nav li a.on{color:var(--ink)}
.navcta{font:600 13px/1 var(--sans);background:var(--ink);color:#fff;border-radius:999px;padding:10px 16px;transition:.2s}
.navcta:hover{background:#000}
.nav .burger{display:none;background:none;border:0;font:600 14px/1 var(--sans);color:var(--ink);cursor:pointer}
@media(max-width:860px){ .nav ul,.navcta{display:none} .nav .burger{display:block} }
.mobile{position:fixed;inset:0;background:#fff;z-index:99;display:none;flex-direction:column;justify-content:center;padding:var(--pad)}
.mobile.open{display:flex}
.mobile a{font-size:clamp(30px,8vw,48px);font-weight:600;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line)}
.mobile .close{position:absolute;top:18px;right:var(--pad);background:none;border:0;font:600 14px/1 var(--sans);cursor:pointer}

/* hero — full-bleed photo, strong scrim, white text */
.hero{position:relative;min-height:92svh;display:grid;align-items:end;overflow:hidden;color:#fff;margin-top:60px}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:heroZoom 10s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.78) 100%)}
.hero .inner{position:relative;padding:0 var(--pad) clamp(44px,6vw,80px);max-width:var(--max);margin:0 auto;width:100%}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero h1{max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero h1 em{color:#f0d49a}
.hero .sub{display:flex;gap:32px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-top:28px}
.hero .lede{color:rgba(255,255,255,.9);max-width:46ch;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero .btn.solid{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn.solid:hover{background:#f5f5f7}
.hero .scroll{display:none}

/* marquee — quiet */
.marquee{border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;white-space:nowrap;background:#fff}
.marquee .track{display:inline-block;animation:mq 48s linear infinite}
.marquee span{font:500 15px/1 var(--sans);color:var(--ink3);padding:0 28px}
.marquee span::after{content:"·";color:var(--accent);margin-left:28px}
@keyframes mq{to{transform:translateX(-50%)}}

/* intro */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center}
.intro .photo{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.intro .photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.intro .photo:hover img{transform:scale(1.03)}
@media(max-width:860px){.intro{grid-template-columns:1fr}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--bg2);border-radius:var(--r);padding:32px 28px}
.stat b{display:block;font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:-.03em;font-weight:600}
.stat span{display:block;margin-top:10px;font:500 14px/1.4 var(--sans);color:var(--ink2)}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}}

/* case studies — big rounded image, text below (Airbnb card feel) */
.cases{display:grid;gap:clamp(56px,7vw,110px)}
.case{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center}
.case:nth-child(even){grid-template-columns:.85fr 1.15fr}
.case:nth-child(even) .media{order:2}
.case .media{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--bg2)}
.case .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.case:hover .media img{transform:scale(1.035)}
.case .media .tag{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--ink);
  font:600 12px/1 var(--sans);padding:9px 13px;border-radius:999px}
.case .body h3{margin-bottom:14px;font-size:clamp(26px,2.8vw,38px)}
.case .body .brief{color:var(--ink2);margin:0 0 22px;line-height:1.6;font-size:17px}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px;padding-top:18px;border-top:1px solid var(--line)}
.case dt{color:var(--ink3);font-weight:500}
.case dd{margin:0;color:var(--ink)}
@media(max-width:860px){.case,.case:nth-child(even){grid-template-columns:1fr}.case:nth-child(even) .media{order:0}}

/* manifesto — gray band, numbered rules */
.manifesto{background:var(--bg2)}
.manifesto .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,88px);align-items:start}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rules li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 24px;background:#fff;border-radius:16px}
.rules li i{font:600 13px/1 var(--sans);color:var(--accent-ink);padding-top:5px;font-style:normal}
.rules li b{display:block;font:600 17px/1.35 var(--sans);margin-bottom:5px}
.rules li p{color:var(--ink2);font-size:15.5px;line-height:1.5}
@media(max-width:860px){.manifesto .grid{grid-template-columns:1fr}}

/* process steps — cards */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{background:var(--bg2);border-radius:var(--r);padding:30px 24px 34px;min-height:260px;display:flex;flex-direction:column;gap:12px;transition:.25s}
.step:hover{transform:translateY(-3px)}
.step i{font:600 13px/1 var(--sans);color:var(--accent-ink);font-style:normal;letter-spacing:.06em}
.step b{font:600 19px/1.25 var(--sans);letter-spacing:-.01em}
.step p{color:var(--ink2);font-size:15px;line-height:1.5}
@media(max-width:1100px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}

/* instagram grid */
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ig a{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg2);border-radius:12px}
.ig a img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.ig a:hover img{transform:scale(1.05)}
.ig a:nth-child(1){grid-column:span 2;grid-row:span 2}
.ig a:nth-child(6){grid-column:span 2;grid-row:span 2}
@media(max-width:860px){.ig{grid-template-columns:repeat(3,1fr)}.ig a:nth-child(6){grid-column:span 1;grid-row:span 1}}
.ig-note{margin-top:14px;font-size:13px;color:var(--ink3)}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{background:var(--bg2);border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;gap:16px}
.review .stars{color:var(--accent);letter-spacing:.1em;font-size:14px}
.review p{font-size:19px;line-height:1.4;font-weight:500;letter-spacing:-.01em}
.review small{color:var(--ink3);font-size:13px}
@media(max-width:860px){.reviews{grid-template-columns:1fr}}

/* CTA band — split card: light text panel + photo */
.ctaband{display:grid;grid-template-columns:1fr 1.1fr;border-radius:var(--r);overflow:hidden;background:var(--bg2);min-height:520px}
.ctaband img{width:100%;height:100%;object-fit:cover;min-height:360px;order:2}
.ctaband .inner{padding:clamp(40px,6vw,80px);display:flex;flex-direction:column;justify-content:center}
.ctaband h2{max-width:14ch;margin-bottom:20px}
.ctaband .lede{margin-bottom:28px}
@media(max-width:860px){.ctaband{grid-template-columns:1fr}.ctaband img{order:0;max-height:320px}}

/* booking */
.book{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px)}
.book .frame{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:760px}
.book iframe{width:100%;height:100%;min-height:760px;border:0;display:block}
.contact-list{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.contact-list li{padding:16px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:100px 1fr;gap:16px;font-size:16px}
.contact-list li span{color:var(--ink3);font-size:13px;font-weight:500;padding-top:3px}
.contact-list a{color:var(--accent-ink)}
@media(max-width:960px){.book{grid-template-columns:1fr}}

/* inner page hero */
.phero{padding:clamp(120px,16vw,180px) 0 clamp(40px,5vw,64px)}
.phero h1{max-width:16ch}
.phero .lede{margin-top:24px}

/* gallery */
.gallery{columns:3;column-gap:14px}
.gallery figure{margin:0 0 14px;break-inside:avoid;position:relative;overflow:hidden;border-radius:16px;background:var(--bg2)}
.gallery img{width:100%;transition:transform 1s ease}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{position:absolute;inset:auto 0 0 0;padding:40px 18px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));font-size:13.5px;color:rgba(255,255,255,.85)}
.gallery figcaption b{display:block;color:#fff;font-weight:600;margin-bottom:2px;font-size:15px}
@media(max-width:1000px){.gallery{columns:2}}
@media(max-width:600px){.gallery{columns:1}}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 32px;background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fgrid h4{font:600 13px/1 var(--sans);color:var(--ink);margin:0 0 16px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;color:var(--ink2)}
.fgrid a:hover{color:var(--ink)}
.fbrand{font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em}
.fbrand+p{color:var(--ink3);font-size:14px;max-width:36ch;line-height:1.5}
.fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--ink3)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero .bg img{animation:none}.marquee .track{animation:none}}

/* preview banner */
.ph-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:90;background:rgba(29,29,31,.92);color:#fff;
  font:500 12px/1 var(--sans);padding:10px 16px;border-radius:999px;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}