/* ============================================================
   PR-O — Custom Theme
   ============================================================ */

@font-face {
  font-family: 'Caviar Dreams';
  src: url('../fonts/CaviarDreams.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Caviar Dreams';
  src: url('../fonts/CaviarDreams_Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Caviar Dreams Bold';
  src: url('../fonts/CaviarDreams_Bold.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'SkitserMarker';
  src: url('../fonts/SkitserMarker.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'LEDLIGHT';
  src: url('../fonts/LEDLIGHT.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}

/* ── Variables ────────────────────────────────────────────── */
:root {
  --ink:   #0A0908;
  --chalk: #F2EDE8;
  --mid:   #847D76;
  --dim:   #3A3632;
  --sepia: #B8A48E;

  --f-disp:  'Cormorant Garamond', Georgia, serif;
  --f-ui:    'Caviar Dreams', Arial, sans-serif;
  --f-body:  'Caviar Dreams Bold', 'Caviar Dreams', Arial, sans-serif;
  --f-title: 'SkitserMarker', cursive;

  --nav-h:  80px;
  --ease:   cubic-bezier(0.76, 0, 0.24, 1);
  --ease-o: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; }
body  {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--f-body);
  font-weight: 300;
  letter-spacing: .02em;
  overflow-x: hidden;
}
img     { display: block; max-width: 100%; height: auto; }
a       { text-decoration: none; color: inherit; }
address { font-style: normal; }

/* Subtle film grain */
body::after {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 8999;
  opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.12'/%3E%3C/svg%3E");
  background-size: 300px;
}

/* ── Sweep Transition ─────────────────────────────────────── */
.sweep {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--ink);
  transform: translateX(-101%);
  pointer-events: none; will-change: transform;
}

/* ══════════════════════════════════════
   NAV
   ══════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px;
  transition: background .45s var(--ease-o);
}
.nav.--scrolled {
  background: rgba(10,9,8,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav__logo-img {
  height: 40px; width: auto;
  display: block;
  transition: opacity .25s;
}
.nav__logo-img:hover { opacity: .55; }

.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a {
  font-family: 'Yantramanav', Arial, sans-serif;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(242,237,232,.55);
  position: relative; transition: color .22s;
}
.nav__links a::after {
  content: ''; position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--chalk);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease-o);
}
.nav__links a:hover { color: var(--chalk); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__toggle {
  display: none; flex-direction: column; gap: 7px;
  background: none; border: none; padding: 8px; cursor: pointer;
}
.nav__toggle span {
  display: block; width: 26px; height: 1px; background: var(--chalk);
  transition: transform .38s var(--ease), opacity .25s;
}
.nav__toggle.--open span:first-child { transform: rotate(45deg) translate(5px,5px); }
.nav__toggle.--open span:last-child  { transform: rotate(-45deg) translate(5px,-5px); }

/* ══════════════════════════════════════
   MOBILE MENU
   ══════════════════════════════════════ */
.mobile-nav {
  position: fixed; inset: 0; z-index: 490;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px 40px 60px;
  transform: translateX(101%);
  transition: transform .55s var(--ease);
}
.mobile-nav.--open { transform: translateX(0); }

.mobile-nav__list { display: flex; flex-direction: column; gap: 8px; }
.mobile-nav__list a {
  font-family: 'Yantramanav', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 4vw, 26px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(242,237,232,.45);
  transition: color .2s;
  line-height: 2;
}
.mobile-nav__list a:hover { color: var(--chalk); }

.mobile-nav__foot {
  margin-top: 52px; display: flex; flex-wrap: wrap; gap: 40px;
}
.mobile-nav__foot address,
.mobile-nav__foot a {
  font-family: var(--f-ui); font-size: 11px;
  letter-spacing: .1em; color: var(--mid); line-height: 1.8;
}

/* ══════════════════════════════════════
   HERO
   Full-screen image, text centered over it
   ══════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: heroZoom 14s ease-out both;
}
@keyframes heroZoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* Dark overlay */
.hero__overlay {
  position: absolute; inset: 0;
  background: rgba(10,9,8,.52);
}

/* Centered text block, matching original layout */
.hero__content {
  position: relative; z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 clamp(40px, 10vw, 144px);
  animation: heroUp 1.1s var(--ease-o) both;
  animation-delay: .35s;
}
@keyframes heroUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero text — Yantramanav 300, matching original exactly */
.hero__body {
  font-family: 'Yantramanav', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.55;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

/* Scroll indicator — bottom right */
.hero__scroll {
  position: absolute; bottom: 40px; right: 52px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; user-select: none;
}
.hero__scroll-line {
  display: block; width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(242,237,232,.45));
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}
.hero__scroll-label {
  font-family: var(--f-ui); font-size: 8px;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(242,237,232,.35);
  writing-mode: vertical-lr; transform: rotate(180deg);
}

/* ══════════════════════════════════════
   SERVICE SECTIONS
   50/50 grid, titles + body centered
   ══════════════════════════════════════ */
.svc { position: relative; overflow: hidden; }
.svc:nth-child(odd)  { background: var(--ink); }
.svc:nth-child(even) { background: #0F0E0C; }
.svc + .svc { border-top: 1px solid rgba(242,237,232,.06); }

.svc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 72vh;
}

.svc__grid--tl .svc__copy  { order: 1; }
.svc__grid--tl .svc__media { order: 2; }
.svc__grid--tr .svc__media { order: 1; }
.svc__grid--tr .svc__copy  { order: 2; }

/* Text column — everything centered */
.svc__copy {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 88px 64px;
}

.svc__title {
  font-family: var(--f-title);
  font-size: clamp(40px, 4.5vw, 66px);
  font-weight: 400; line-height: 1.1;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--chalk); margin-bottom: 28px;
}

.svc__body {
  font-family: 'Yantramanav', Arial, sans-serif;
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 300; line-height: 1.9;
  color: rgba(242,237,232,.52);
  max-width: 380px;
  letter-spacing: .02em;
  text-align: center;
}

/* Image column */
.svc__media {
  position: relative; overflow: hidden; min-height: 52vh;
}
.svc__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(10%) contrast(1.04);
  transition: transform 1.1s var(--ease-o);
}
.svc:hover .svc__media img { transform: scale(1.05); }

/* ══════════════════════════════════════
   CONTACT — white, centered, clean
   ══════════════════════════════════════ */
.contact {
  background: #fff;
  color: var(--ink);
  padding: 96px 24px 100px;
}

.contact__inner {
  max-width: 700px;
  margin: 0 auto;
}

.contact__left { margin-bottom: 48px; }

.contact__title {
  font-family: var(--f-title);
  font-size: clamp(52px, 9vw, 110px);
  font-weight: 400; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 32px;
}

.contact__divider {
  width: 100%; height: 1px;
  background: rgba(10,9,8,.12);
}

.contact__form {
  display: flex; flex-direction: column; gap: 0;
}

.contact__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
}

.field {
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid rgba(10,9,8,.15);
  padding: 20px 0 10px;
}
.field label {
  font-family: 'Yantramanav', Arial, sans-serif; font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(10,9,8,.38);
}
.field input, .field textarea {
  background: none; border: none; outline: none;
  font-family: 'Yantramanav', Arial, sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 300; color: var(--ink);
  resize: none; width: 100%; line-height: 1.4;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(10,9,8,.28);
}

.btn-send {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: #fff;
  border: none; padding: 17px 40px; cursor: pointer;
  font-family: 'Yantramanav', Arial, sans-serif; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  margin-top: 40px;
  transition: background .25s, transform .2s var(--ease-o);
}
.btn-send:hover { background: var(--dim); transform: translateY(-2px); }
.btn-send__arrow { transition: transform .22s var(--ease-o); }
.btn-send:hover .btn-send__arrow { transform: translateX(5px); }

/* ══════════════════════════════════════
   FOOTER — contact details live here
   ══════════════════════════════════════ */
.footer {
  background: #000;
  padding: 52px;
}
.footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: flex-end;
  justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.footer__brand {
  display: flex; flex-direction: column; gap: 16px;
}

.footer__logo {
  height: 32px; width: auto;
  opacity: .8;
}

.footer__copy {
  font-family: var(--f-ui); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.footer__info {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px; text-align: right;
}
.footer__address {
  font-family: var(--f-ui); font-size: 11px;
  letter-spacing: .1em; color: rgba(255,255,255,.65); line-height: 1.8;
}
.footer__phone {
  font-family: var(--f-ui); font-size: 11px;
  letter-spacing: .1em; color: rgba(255,255,255,.65);
  transition: color .2s;
}
.footer__phone:hover { color: #fff; }
.footer__instagram {
  font-family: 'Yantramanav', Arial, sans-serif; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  transition: color .2s;
}
.footer__instagram:hover { color: #fff; }

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease-o), transform .9s var(--ease-o);
}
.reveal.--visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav { padding: 0 32px; }
  .nav__links { gap: 24px; }
  .svc__copy { padding: 72px 48px; }
  .footer { padding: 40px 32px; }
}

@media (max-width: 860px) {
  .nav { padding: 0 24px; }
  .nav__links  { display: none; }
  .nav__toggle { display: flex; }

  .hero__content { padding: 0 32px; }
  .hero__scroll  { right: 24px; }

  .svc__grid { grid-template-columns: 1fr; min-height: auto; }
  .svc__grid--tl .svc__copy,
  .svc__grid--tr .svc__copy  { order: 2; }
  .svc__grid--tl .svc__media,
  .svc__grid--tr .svc__media { order: 1; }
  .svc__media { min-height: 60vw; }
  .svc__copy  { padding: 56px 24px 64px; }

  .contact__row   { grid-template-columns: 1fr; gap: 0; }

  .footer { padding: 40px 24px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__info  { align-items: flex-start; text-align: left; }
}

@media (max-width: 480px) {
  .hero__body     { font-size: 16px; }
  .svc__title     { font-size: 34px; }
  .contact__title { font-size: 48px; }
}