@charset "UTF-8";
/* Premium layer — loaded last. Self-hosted type, refined palette, calmer spacing, better mobile. */

@font-face{font-family:"HH Display";src:url("/src/assets/fonts/cormorant.woff") format("woff");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"HH Display";src:url("/src/assets/fonts/cormorant-italic.woff") format("woff");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"HH Sans";src:url("/src/assets/fonts/jost.woff") format("woff");font-weight:300 600;font-style:normal;font-display:swap}

:root{
  --black:#0a0908;--coal:#141210;--ivory:#f6f1e9;--paper:#f3ece1;--ink:#16130f;
  --gold:#c9a66b;--gold-hi:#ecd6a4;--gold-lo:#9c7743;
  --gold-grad:linear-gradient(120deg,#a8803f 0%,#e9d29c 38%,#c9a66b 62%,#9a733d 100%);
  --serif:"HH Display","Cormorant Garamond",Georgia,serif;
  --sans:"HH Sans","Jost","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Type ---------- */
body{font-family:var(--sans);font-weight:350;font-size:15.5px;letter-spacing:.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--black)}
h1,h2,h3,.cinema h1,.manifesto h2,.section-heading h2,.category-copy h3,.meet-copy h2,.campaign-cta h2,.page-head h1,.category-services h2,.service-entry h3,.booking-aside h3,.contact-grid h3,.legal h2,.calendar-heading h3,.hero-caption p,.meet-art>span{font-family:var(--serif)!important;font-weight:400;letter-spacing:-.012em}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cinema h1 strong{font-weight:500;letter-spacing:-.035em;line-height:.78}
.cinema h1>span,.brand-specialty,.eyebrow,.filters button,.button,.floating-book,nav a,.cinema-bottom,.side-label,.category-number,.category-copy strong,.service-entry small{font-family:var(--sans)!important}
.brand-kicker,.brand-name{font-family:var(--serif)!important}
.brand-name{font-weight:500}
.eyebrow{font-weight:450;letter-spacing:.32em;font-size:10.5px}
.eyebrow:before{background:var(--gold-grad);width:44px}
.page-head h1,.manifesto h2,.section-heading h2,.meet-copy h2,.campaign-cta h2{line-height:1.02}
.page-head h1{font-size:clamp(54px,7vw,112px)}
.section-heading h2,.campaign-cta h2{font-size:clamp(44px,5.4vw,84px)}
.manifesto h2{font-size:clamp(42px,5vw,76px)}
.category-copy h3{font-size:clamp(46px,5.4vw,82px);line-height:.92}
.hero-caption p{font-size:23px;line-height:1.45}
p{line-height:1.75}

/* ---------- Film grain + glow (data URI, CSP-safe) ---------- */
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- Header: sticky, glassy ---------- */
header{position:sticky;top:0;z-index:40;height:112px;background:linear-gradient(180deg,#0a0908f2,#0a0908d9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-top:0;border-bottom:1px solid #c9a66b33}
header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#c9a66b99 30%,#ecd6a4 50%,#c9a66b99 70%,transparent)}
.cinema{height:calc(100svh - 112px)}
header nav{gap:34px}
header nav>a{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:#e9e1d4;transition:color .3s var(--ease)}
header nav>a:not(.button):after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
header nav>a:not(.button):hover:after,header nav>a[aria-current=page]:after{transform:scaleX(1)}
header nav>a[aria-current=page]{color:var(--gold-hi)}

/* ---------- Buttons ---------- */
.button{position:relative;overflow:hidden;border-radius:999px;border:1px solid #c9a66baa;padding:17px 30px;gap:22px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.button span{font-size:15px;transition:transform .35s var(--ease)}
.button:hover span{transform:translate(3px,-3px)}
.button:hover{background:transparent;color:var(--black);border-color:var(--gold);box-shadow:0 10px 30px -12px #c9a66b88}
.button:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-grad);transform:translateY(101%);transition:transform .45s var(--ease)}
.button:hover:before{transform:none}
.button{isolation:isolate}
.button.filled,.hero-caption .button,.campaign-cta .button,.booking-layout .button,.cta .button{background:var(--gold-grad);color:var(--black);border-color:transparent}
.button.filled:before,.hero-caption .button:before,.campaign-cta .button:before,.booking-layout .button:before,.cta .button:before{background:var(--ivory)}
header .button{border-radius:999px;padding:13px 22px;font-size:10px}
.booking-layout .button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.booking-layout .button:disabled:before{display:none}

/* Floating book: discreet pill, appears above content */
.floating-book{border-radius:999px;padding:15px 24px;font-size:10px;font-weight:500;letter-spacing:.2em;background:var(--gold-grad);color:var(--black);box-shadow:0 18px 40px -14px #000c,0 0 0 1px #ecd6a455 inset;bottom:26px;right:26px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.floating-book:hover{transform:translateY(-2px);box-shadow:0 22px 46px -14px #000e}

/* ---------- Hero ---------- */
.cinema-shade{background:linear-gradient(90deg,#0a0908e6 0%,#0a090899 38%,transparent 72%),linear-gradient(0deg,#0a0908cc,transparent 40%)!important}
.title-dot{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--paper);background-image:radial-gradient(ellipse at 85% 10%,#e7d6b655,transparent 55%)}
.manifesto p:last-child{font-size:13.5px;color:#5f5446}

/* ---------- Signature cards ---------- */
.campaign-card{border-radius:2px;box-shadow:0 40px 80px -40px #000;outline:1px solid #ffffff10;outline-offset:-1px}
.campaign-card img{transition:transform 1.4s var(--ease),filter 1.4s var(--ease)!important;filter:saturate(.92)}
.campaign-card:hover img{transform:scale(1.045);filter:saturate(1.02)}
.image-shade{background:linear-gradient(180deg,transparent 25%,#0a0908 100%)!important;opacity:.92}
.category-number{border-radius:999px;border-color:#ecd6a466!important;backdrop-filter:blur(6px)}
.category-copy>span{font-size:13.5px;line-height:1.65;color:#ece5da}
.category-copy strong{font-size:10px;letter-spacing:.24em;text-transform:uppercase;border-top-color:#ffffff2a}
.cut-divider svg{color:var(--gold)}

/* ---------- Moodboard ---------- */
.mood-item{border-radius:2px;overflow:hidden}
.mood-item img{transition:transform 1.2s var(--ease)}
.mood-item:hover img{transform:scale(1.05)}

/* ---------- Meet Halit ---------- */
.meet{background:var(--paper)}
.meet-art.real-portrait{background:#1b1712;box-shadow:0 50px 90px -45px #3a2a15aa}
.meet-art.real-portrait img{opacity:1!important}
.meet-art.real-portrait:after{content:"";position:absolute;inset:14px;border:1px solid #ecd6a455;pointer-events:none;z-index:2}
.meet-copy>p:not(.eyebrow){font-size:15.5px;color:#4d4337}
.text-link{letter-spacing:.2em;font-weight:500;font-size:11px;border-bottom:1px solid currentColor;padding-bottom:4px}

/* ---------- CTA + footer ---------- */
.campaign-cta{background:radial-gradient(ellipse at 18% 0%,#5a40204d,transparent 60%),radial-gradient(ellipse at 100% 100%,#3b2a1640,transparent 55%),#0d0b09}
footer{background:radial-gradient(ellipse at 0% 0%,#2a1d0f66,transparent 55%),#080706;border-top:1px solid #c9a66b33}
footer a{transition:color .3s var(--ease)}

/* ---------- Page heads ---------- */
.page-head{background:radial-gradient(ellipse at 85% 0%,#4a35194d,transparent 60%),linear-gradient(180deg,#0e0c0a,#0a0908)}
.page-head p{color:#cfc6b8;font-size:15px}

/* ---------- Services ---------- */
.services-edit,.booking-layout,.contact-grid,.legal{background:var(--paper)}
.filters{gap:10px}
.filters button{border-radius:999px;padding:12px 22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:450;border-color:#c8b89e;color:#5f513e;transition:all .3s var(--ease)}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button.active{background:var(--ink);border-color:var(--ink);color:var(--gold-hi)}
.service-category-photo{border-radius:2px;overflow:hidden;box-shadow:0 40px 80px -45px #2a1f12}
.service-category-photo img{transition:transform 1.4s var(--ease)}
.service-category:hover .service-category-photo img{transform:scale(1.03)}
.category-services h2{font-size:clamp(40px,4vw,60px)}
.service-entry{border-bottom-color:#d6c8b1;padding:20px 0;transition:padding .35s var(--ease)}
.service-entry:hover{padding-left:10px}
.service-entry h3{font-size:25px;color:var(--ink)}
.service-entry small{letter-spacing:.08em;color:#8a7760}
.service-entry a{border-radius:999px;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:17px;border-color:#cbbb9f;transition:all .3s var(--ease)}
.service-entry:hover a,.service-entry a:hover{background:var(--ink);color:var(--gold-hi);border-color:var(--ink)}

/* ---------- Booking ---------- */
.booking-layout .notice{border-left:2px solid var(--gold);background:#ece2d2;border-radius:0 4px 4px 0;color:#5a4d3c}
.booking-layout label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#5a4d3c}
.booking-layout input,.booking-layout select{background:#fffcf7;border:1px solid #d9ccb6;border-radius:10px;padding:15px 16px;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.booking-layout input:focus,.booking-layout select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px #c9a66b2e}
.booking-layout .checkbox span{text-transform:none;letter-spacing:0;font-size:13px;font-weight:400}
.booking-layout small{text-transform:none;letter-spacing:0}
.booking-aside{border-top:1px solid #cdbd9f}
.booking-aside h3{font-size:34px;line-height:1.1}
.booking-aside:after{border-radius:2px}
.booking-calendar{background:#fffcf7;border:1px solid #e1d5c1;border-radius:14px;box-shadow:0 30px 60px -45px #3b2b16}
.calendar-heading h3{font-size:30px}
.calendar-heading button{border-radius:999px}
.availability-calendar button{border-radius:10px;font-family:var(--sans);transition:transform .2s var(--ease),background .2s var(--ease)}
.availability-calendar .day-available{background:#f3e6cc;border-color:#d9bf8d}
.availability-calendar .day-available:hover{transform:translateY(-1px)}
.availability-calendar [aria-current=date]{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- Contact ---------- */
.contact-grid h3{font-size:34px;color:var(--ink)}
.contact-grid a{border-bottom:1px solid #c9a66b88}

/* ---------- Motion ---------- */
.await-reveal{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
@media(prefers-reduced-motion:reduce){.button:before,.campaign-card img{transition:none!important}}

/* ---------- Tablet ---------- */
@media(max-width:900px){header nav{gap:18px}header nav>a{letter-spacing:.08em}}

/* ---------- Mobile ---------- */
@media(max-width:700px){
  body{font-size:15px}
  header{height:80px}
  .cinema{height:calc(100svh - 80px)}
  header nav{background:#0a0908f7;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:18px 6vw 28px}
  header nav>a{font-size:13px;letter-spacing:.16em;padding-block:16px!important;border-bottom:1px solid #ffffff12}
  header nav>a:not(.button):after{display:none}
  header nav>a.button{margin-top:16px;justify-content:space-between;border-bottom:1px solid #c9a66baa}
  .menu{border-radius:999px}
  /* Signature cards: one per row so copy can breathe */
  .campaign-grid{grid-template-columns:1fr;gap:18px}
  .campaign-card:nth-child(n){margin:0;min-height:480px}
  .category-copy h3{font-size:46px}
  .category-copy>p{font-size:9px}
  .category-copy>span{font-size:13px}
  .category-copy strong{font-size:9.5px}
  .page-head h1{font-size:clamp(46px,13vw,64px)}
  .section-heading h2,.campaign-cta h2,.manifesto h2{font-size:clamp(38px,11vw,54px)}
  .hero-caption p{font-size:19px}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-6vw;padding-inline:6vw;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6vw,#000 calc(100% - 6vw),transparent)}
  .filters::-webkit-scrollbar{display:none}
  .filters button{white-space:nowrap;flex:0 0 auto}
  .service-entry h3{font-size:22px}
  .service-entry a{width:42px;height:42px}
  .floating-book{left:16px;right:16px;bottom:14px;text-align:center;justify-content:center;padding:16px}
  footer{padding-bottom:90px}
}

/* Keep the monogram fully inside the slimmer sticky header */
header .brand-lockup{zoom:.8}
@media(max-width:700px){header .brand-lockup{zoom:.86}}
.comparison-pending p,.comparison-pending h3{font-family:var(--serif)!important}