:root { --night:#070707; --black:#0d0d0d; --charcoal:#171717; --soft:#a6a6a4; --white:#f4f3ef; --red:#a91f24; --red-bright:#d13c42; --line:rgba(255,255,255,.16); --condensed:"Barlow Condensed",sans-serif; --sans:"Manrope",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--night); color:var(--white); font-family:var(--sans); }
body::selection { background:var(--red); color:var(--white); }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
img { display:block; width:100%; }
.detail-header { height:78px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:0 clamp(1.2rem,4vw,4.5rem); position:absolute; inset:0 0 auto; z-index:20; border-bottom:1px solid rgba(255,255,255,.2); background:linear-gradient(180deg,rgba(0,0,0,.62),transparent); }
.detail-logo { display:flex; flex-direction:column; font:800 1.45rem/.8 var(--condensed); letter-spacing:.08em; }
.detail-logo span { margin-top:.45rem; color:#d0cfca; font:600 .48rem var(--sans); letter-spacing:.25em; text-transform:uppercase; }
.detail-header nav { display:flex; justify-content:center; gap:2.2rem; }
.detail-header nav a { position:relative; color:#c1c0bc; font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.detail-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-.7rem; height:2px; background:var(--red-bright); transition:right .25s ease; }
.detail-header nav a:hover::after { right:0; }
.detail-book, .detail-button { display:inline-flex; align-items:center; justify-content:center; gap:1.5rem; min-height:46px; padding:.8rem 1.1rem; border:1px solid var(--red-bright); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:background .25s ease,color .25s ease,transform .25s ease; }
.detail-book:hover, .detail-button-red:hover { background:var(--red); transform:translateY(-2px); }
.detail-menu { display:none; }
.detail-hero { min-height:900px; display:flex; align-items:flex-end; padding:130px clamp(1.2rem,5vw,5rem) 80px; position:relative; overflow:hidden; }
.detail-hero-image { position:absolute; inset:0; height:100%; object-fit:cover; object-position:center 48%; transform:scale(1.015); animation:heroSettle 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes heroSettle { from { opacity:.55; transform:scale(1.07); } to { opacity:1; transform:scale(1.015); } }
.detail-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,5,5,.96) 0,rgba(5,5,5,.72) 37%,rgba(5,5,5,.16) 72%),linear-gradient(0deg,rgba(5,5,5,.9),transparent 48%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 24%); }
.detail-hero-copy { width:min(760px,66vw); position:relative; z-index:2; }
.hero-brand { display:flex; align-items:baseline; gap:1rem; margin-bottom:4rem; }
.hero-brand strong { font:800 1.8rem var(--condensed); letter-spacing:.1em; }
.hero-brand span { color:#bdbcb8; font-size:.5rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.detail-kicker { color:#c6c5c1; font-size:.58rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.detail-kicker i { display:inline-block; width:18px; height:2px; margin:0 .7rem .15rem 0; background:var(--red-bright); }
.detail-hero h1 { margin:1.8rem 0 1.4rem; font:800 clamp(5rem,9.2vw,10rem)/.72 var(--condensed); letter-spacing:-.055em; text-transform:uppercase; }
.detail-hero h1 em { color:transparent; -webkit-text-stroke:1px #deddd8; font-style:italic; }
.detail-intro { max-width:570px; color:#c5c4c0; font-size:clamp(.9rem,1.2vw,1.08rem); line-height:1.75; }
.detail-actions { display:flex; align-items:center; gap:2rem; margin-top:2.2rem; }
.detail-button-red { background:var(--red); }
.detail-text-link { padding-bottom:.3rem; border-bottom:1px solid rgba(255,255,255,.4); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.concept-disclosure { position:absolute; right:clamp(1.2rem,4vw,4.5rem); bottom:4rem; z-index:2; padding:1rem 1.2rem; border-left:2px solid var(--red-bright); background:rgba(7,7,7,.7); color:#9c9b98; font-size:.52rem; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(8px); }
.concept-disclosure strong { color:var(--white); }
.hero-index { position:absolute; right:clamp(1.2rem,4vw,4.5rem); top:42%; z-index:2; color:rgba(255,255,255,.35); font:.6rem var(--sans); letter-spacing:.2em; transform:rotate(90deg); }
.detail-manifesto { display:flex; justify-content:space-between; gap:2rem; padding:2.4rem clamp(1.2rem,5vw,5rem); border-block:1px solid var(--line); background:linear-gradient(90deg,rgba(169,31,36,.22),transparent 35%),#0b0b0b; font:600 clamp(1.5rem,2.5vw,2.6rem) var(--condensed); letter-spacing:.015em; text-transform:uppercase; }
.detail-manifesto p { margin:0; }
.detail-manifesto em { color:var(--red-bright); font-style:italic; }
.detail-services, .detail-packages, .detail-work { padding:clamp(6rem,10vw,10rem) clamp(1.2rem,5vw,5rem); }
.detail-section-heading { display:grid; grid-template-columns:.25fr 1fr .55fr; gap:3rem; align-items:end; margin-bottom:5rem; }
.detail-section-heading > span, .experience-copy > span, .process-copy > span, .work-title > span { color:var(--red-bright); font-size:.56rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.detail-section-heading h2, .experience-copy h2, .process-copy h2, .work-title h2 { margin:0; font:700 clamp(4.2rem,7.5vw,8rem)/.78 var(--condensed); letter-spacing:-.05em; text-transform:uppercase; }
.detail-section-heading h2 em, .experience-copy h2 em, .process-copy h2 em, .work-title h2 em { color:var(--red-bright); font-style:italic; }
.detail-section-heading p { margin:0; color:var(--soft); line-height:1.75; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card { min-height:410px; display:flex; align-items:flex-end; position:relative; overflow:hidden; padding:0; border:0; background:var(--black); text-align:left; cursor:pointer; }
.service-card img { position:absolute; inset:0; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.04); transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .35s ease; }
.service-card-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,5,5,.95),rgba(5,5,5,.04) 70%); }
.service-card small { position:absolute; top:1.5rem; left:1.5rem; z-index:2; color:#dddcd7; font:.58rem var(--sans); letter-spacing:.14em; }
.service-card > div { position:relative; z-index:2; padding:2rem; }
.service-card h3 { margin:0 0 .6rem; font:700 clamp(2.2rem,4vw,4.2rem)/.85 var(--condensed); text-transform:uppercase; }
.service-card p { margin:0; color:#b4b3af; font-size:.72rem; }
.service-card:hover img, .service-card.active img { transform:scale(1.045); filter:saturate(.92) contrast(1.08); }
.service-card.active { box-shadow:inset 0 -5px 0 var(--red-bright); }
.service-card.active small { color:var(--red-bright); }
.service-selection { display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center; padding:1.1rem 1.4rem; border:1px solid var(--line); border-top:0; }
.service-selection span { color:#777673; font-size:.52rem; text-transform:uppercase; letter-spacing:.12em; }
.service-selection strong { font:600 1.3rem var(--condensed); text-transform:uppercase; }
.service-selection a { color:var(--red-bright); font-size:.56rem; font-weight:700; text-transform:uppercase; }
.detail-experience { min-height:820px; display:flex; align-items:flex-end; position:relative; overflow:hidden; padding:clamp(4rem,7vw,7rem) clamp(1.2rem,5vw,5rem); }
.detail-experience > img { position:absolute; inset:0; height:100%; object-fit:cover; object-position:center; }
.experience-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,5,5,.94),rgba(5,5,5,.38) 58%,transparent),linear-gradient(0deg,rgba(5,5,5,.75),transparent 60%); }
.experience-copy { max-width:760px; position:relative; z-index:2; }
.experience-copy p { max-width:620px; color:#c3c2be; line-height:1.8; }
.detail-packages { background:#e8e6e0; color:#0b0b0b; }
.detail-packages .detail-section-heading > span { color:var(--red); }
.detail-packages .detail-section-heading p { color:#5f5e5a; }
.package-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(11,11,11,.25); border-left:1px solid rgba(11,11,11,.25); }
.package-card { min-height:540px; display:flex; flex-direction:column; padding:2.3rem; position:relative; border-right:1px solid rgba(11,11,11,.25); border-bottom:1px solid rgba(11,11,11,.25); }
.package-card > span { color:var(--red); font:.62rem var(--sans); }
.package-card h3 { margin:5rem 0 1rem; font:700 clamp(2.7rem,4vw,4.5rem)/.8 var(--condensed); text-transform:uppercase; }
.package-card p { color:#585753; line-height:1.7; }
.package-card ul { margin:2rem 0; padding:0; list-style:none; }
.package-card li { padding:.7rem 0; border-bottom:1px solid rgba(11,11,11,.16); color:#454440; font-size:.72rem; }
.package-card li::before { content:"+"; margin-right:.7rem; color:var(--red); }
.package-card a { margin-top:auto; color:var(--red); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.package-featured { z-index:2; background:#111; color:var(--white); box-shadow:10px 10px 0 rgba(169,31,36,.28); transform:translateY(-1.2rem); }
.package-featured p, .package-featured li { color:#aaa9a5; }
.package-featured li { border-color:var(--line); }
.popular-label { position:absolute; top:0; right:1.8rem; padding:.55rem .8rem; background:var(--red); color:var(--white); font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; transform:translateY(-50%); }
.detail-process { display:grid; grid-template-columns:1fr 1fr; min-height:820px; background:#101010; }
.process-image { min-height:760px; position:relative; overflow:hidden; }
.process-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 64%,#101010),linear-gradient(0deg,rgba(5,5,5,.65),transparent 42%); }
.process-image img { height:100%; object-fit:cover; object-position:center; }
.process-image > span { position:absolute; left:2rem; bottom:2rem; z-index:2; color:#d0cfcb; font:600 1.5rem/1 var(--condensed); text-transform:uppercase; }
.process-copy { align-self:center; padding:clamp(3rem,7vw,7rem); }
.process-steps { margin-top:3rem; }
.process-steps article { display:grid; grid-template-columns:70px 1fr; gap:1.2rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.process-steps article > span { color:var(--red-bright); font:700 1.8rem var(--condensed); }
.process-steps h3 { margin:0 0 .35rem; font:700 1.7rem var(--condensed); text-transform:uppercase; }
.process-steps p { margin:0; color:#92918d; font-size:.72rem; line-height:1.6; }
.detail-work { background:#080808; }
.work-title { display:grid; grid-template-columns:.25fr 1fr; gap:3rem; margin-bottom:5rem; }
.editorial-gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem; align-items:start; }
.editorial-gallery figure { margin:0; }
.editorial-gallery img { height:100%; object-fit:cover; filter:saturate(.84) contrast(1.04); transition:transform .55s ease,filter .3s ease; }
.editorial-gallery figure:hover img { transform:scale(1.018); filter:saturate(.95) contrast(1.06); }
.editorial-gallery figcaption { margin-top:.7rem; color:#777673; font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; }
.gallery-wide { grid-column:1/9; }.gallery-wide img { aspect-ratio:16/8; }
.gallery-tall { grid-column:9/13; margin-top:7rem !important; }.gallery-tall img { aspect-ratio:3/4; }
.gallery-small { grid-column:2/6; margin-top:2rem !important; }.gallery-small img { aspect-ratio:4/3; }
.gallery-offset { grid-column:6/13; margin-top:8rem !important; }.gallery-offset img { aspect-ratio:16/8; }
.gallery-final { grid-column:3/11; margin-top:6rem !important; }.gallery-final img { aspect-ratio:16/9; }
.detail-booking { min-height:720px; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--red); color:var(--white); }
.detail-booking > div { align-self:center; padding:clamp(3rem,7vw,7rem); }
.detail-booking > div > p { font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.detail-booking h2 { margin:1rem 0 3rem; font:800 clamp(4.5rem,8vw,8.5rem)/.73 var(--condensed); text-transform:uppercase; }
.detail-booking h2 em { color:#161616; font-style:italic; }
.detail-button-light { border-color:var(--white); background:var(--white); color:var(--red); }
.detail-button-light:hover { background:#141414; color:var(--white); border-color:#141414; }
.detail-booking small { display:block; margin-top:1.5rem; opacity:.72; }
.detail-booking > img { height:100%; object-fit:cover; object-position:center; mix-blend-mode:multiply; opacity:.74; }
.detail-sales { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:clamp(2.5rem,6vw,6rem) clamp(1.2rem,5vw,4.5rem); background:var(--red); color:var(--white); }
.detail-sales p { max-width:780px; margin:0; font-family:var(--display); font-size:clamp(2rem,4.5vw,5rem); line-height:.9; text-transform:uppercase; }
.detail-sales a { flex:0 0 auto; padding:1.2rem 1.4rem; background:var(--white); color:var(--black); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.detail-footer { min-height:190px; display:grid; grid-template-columns:1fr auto auto; gap:3rem; align-items:center; padding:3rem clamp(1.2rem,4vw,4.5rem); border-top:1px solid var(--line); }
.detail-footer p, .detail-footer > span { color:#686763; font-size:.55rem; text-transform:uppercase; letter-spacing:.12em; }
.mobile-book { display:none; }
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); }
[data-reveal].visible { opacity:1; transform:none; }
@media (max-width:900px) { .detail-header { grid-template-columns:1fr auto; }.detail-header nav { display:none; position:absolute; top:78px; left:0; right:0; padding:2rem; background:#080808; flex-direction:column; }.detail-header nav.open { display:flex; }.detail-menu { display:block; justify-self:end; border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--white); }.detail-book { display:none; }.detail-hero-copy { width:82vw; }.detail-section-heading { grid-template-columns:1fr; }.service-grid { grid-template-columns:1fr 1fr; }.package-grid { grid-template-columns:1fr; }.package-card { min-height:auto; }.package-featured { transform:none; }.detail-process { grid-template-columns:1fr; }.process-image { min-height:620px; }.detail-booking { grid-template-columns:1fr; }.detail-booking > img { max-height:480px; }.detail-footer { grid-template-columns:1fr auto; }.detail-footer > span { display:none; } }
@media (max-width:620px) { body { padding-bottom:58px; }.detail-header { height:70px; }.detail-header nav { top:70px; }.detail-hero { min-height:760px; padding:110px 1.2rem 60px; }.detail-hero-image { object-position:58% center; }.detail-hero-shade { background:linear-gradient(90deg,rgba(5,5,5,.94),rgba(5,5,5,.25)),linear-gradient(0deg,rgba(5,5,5,.92),transparent 58%); }.detail-hero-copy { width:100%; }.hero-brand { margin-bottom:3rem; }.detail-hero h1 { font-size:4.9rem; }.detail-actions { align-items:flex-start; flex-direction:column; gap:1.2rem; }.concept-disclosure { right:1.2rem; bottom:1.2rem; }.hero-index { display:none; }.detail-manifesto { display:block; font-size:1.6rem; }.detail-manifesto p + p { margin-top:.4rem; }.detail-services,.detail-packages,.detail-work { padding:5.5rem 1.2rem; }.detail-section-heading h2,.experience-copy h2,.process-copy h2,.work-title h2 { font-size:4.3rem; }.service-grid { grid-template-columns:1fr; }.service-card { min-height:360px; }.service-selection { grid-template-columns:1fr; }.detail-experience { min-height:700px; padding:4rem 1.2rem; }.detail-experience > img { object-position:55% center; }.experience-shade { background:linear-gradient(0deg,rgba(5,5,5,.96),rgba(5,5,5,.2) 82%); }.package-card { padding:1.8rem; }.package-card h3 { margin-top:3.5rem; }.process-image { min-height:520px; }.process-image::after { background:linear-gradient(0deg,#101010,transparent 45%); }.process-copy { padding:5rem 1.2rem; }.work-title { grid-template-columns:1fr; }.editorial-gallery { display:block; }.editorial-gallery figure { margin:0 0 3rem !important; }.editorial-gallery img { aspect-ratio:4/3 !important; }.gallery-tall img { aspect-ratio:3/4 !important; }.detail-booking > div { padding:5rem 1.2rem; }.detail-booking h2 { font-size:4.7rem; }.detail-sales { align-items:flex-start; flex-direction:column; }.detail-footer { grid-template-columns:1fr; gap:1.2rem; }.mobile-book { height:58px; display:flex; align-items:center; justify-content:center; gap:1rem; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--red); color:var(--white); font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; box-shadow:0 -8px 24px rgba(0,0,0,.34); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.detail-hero-image { animation:none; }[data-reveal] { opacity:1; transform:none; transition:none; } }