/* ─────────────────────────────────────────
   FONTS  (self-hosted)
   Cormorant Garamond + Inter, formerly two render-blocking requests to
   fonts.googleapis.com and fonts.gstatic.com. Same variable files Google
   serves, now on our own origin, so no extra DNS + TLS before first paint.
   Generated by System/build_fonts.py: edit there, not here.
   Both faces are SIL OFL, which permits self-hosting.
───────────────────────────────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────
   www.ekphoto.co.za/graduations — standalone single page.
   Cloned from matricdance/css/matric.css; tokens and idiom mirror the main
   site's css/site.css. If the brand palette changes there, change it here too.
   Photos are referenced from the shared /assets tree, never duplicated.
───────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x on html, NOT body: body { overflow-x: hidden } turns body into
   its own scroll container ("hidden auto") and Chrome then silently drops
   smooth programmatic scrolls — the nav and hero buttons would stop working. */
html { scroll-behavior: smooth; font-size: 18px; overflow-x: hidden; }

:root {
  --ink:       #1A1714;
  --ink-80:    rgba(26,23,20,.82);
  --ink-60:    rgba(26,23,20,.60);
  --ink-40:    rgba(26,23,20,.40);
  --ink-18:    rgba(26,23,20,.18);
  --ink-08:    rgba(26,23,20,.08);
  --paper:     #F7F4EF;
  --paper-b:   #EFEBE3;
  --paper-c:   #E6E1D6;
  --cream:     #FBF9F5;
  --white:     #FFFDFA;
  --gold:      #9B7A4E;
  --gold-lt:   rgba(155,122,78,.10);
  --gold-md:   rgba(155,122,78,.30);

  --nav-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16,1,.3,1);
  --serif: 'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, sans-serif;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gold); color: var(--cream); }

/* Anchor targets land just below the fixed nav */
#intro, #portfolio, #expect, #faq, #enquire { scroll-margin-top: var(--nav-h); }

.section-eye {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 36px;
}
.section-eye::before { content: ''; width: 28px; height: 1px; background: var(--gold); }

/* Reveal on scroll */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1.2s var(--ease-slow), transform 1.2s var(--ease-slow);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding: 0 56px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s;
}
/* Over the hero the nav sits on a dark photo; once scrolled it goes paper. */
.site-nav.scrolled {
  background: rgba(247,244,239,.88);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border-bottom-color: var(--ink-08);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 22px;
  font-family: var(--serif);
  font-size: 16px; font-weight: 400;
  text-decoration: none;
}
.nav-brand-img {
  display: block; height: 48px; width: auto;
  /* Keep the square mark square: the global img { max-width: 100% } resolves
     against this shrink-to-fit anchor and squeezes the width while the height
     stays fixed. Exempt it from both that and flex shrinking. */
  max-width: none;
  flex: none;
  /* Logo PNG has ~25% transparent padding; oversize + crop with negative margin */
  margin: -8px 0 -8px -12px;
  filter: invert(1);
  transition: filter .4s;
}
.nav-brand-text {
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(254,253,250,.88);
  transition: color .4s;
}
.nav-brand .dot { color: var(--gold); }
.site-nav.scrolled .nav-brand-img { filter: none; }
.site-nav.scrolled .nav-brand-text { color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 11.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(254,253,250,.62); text-decoration: none; cursor: pointer;
  transition: color .4s var(--ease);
}
.nav-links a:hover { color: rgba(254,253,250,.95); }
.site-nav.scrolled .nav-links a { color: var(--ink-60); }
.site-nav.scrolled .nav-links a:hover { color: var(--ink); }
.nav-links a.nav-cta {
  border: 1px solid rgba(254,253,250,.45);
  padding: 11px 24px;
  color: rgba(254,253,250,.92);
  transition: color .4s, border-color .4s, background .4s;
}
.nav-links a.nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--cream); }
.site-nav.scrolled .nav-links a.nav-cta {
  border-color: var(--ink); color: var(--ink);
}
.site-nav.scrolled .nav-links a.nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--cream); }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  /* The bg starts its 22s zoom at scale(1.08); without this it bleeds past
     the viewport edge and over the section below until the animation ends. */
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('/assets/lifestyle/graduations/de-klerk-8.webp') 22% 40% / cover no-repeat;
  animation: slowZoom 22s ease-out forwards;
}
/* Portrait phones get an 800px-wide strip of the same photo at full height,
   cut by System/optimize_assets.py (PHONE_HEROES) at the 640px
   background-position below, so it frames and renders exactly like the
   full file at a fraction of the size. Keep this media query identical to
   the two image preloads in index.html. */
@media (max-width: 640px) and (orientation: portrait) {
  .hero-bg { background-image: url('/assets/lifestyle/graduations/de-klerk-8-phone.webp'); }
}
@keyframes slowZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(175deg,
      rgba(18,14,10,.58) 0%,
      rgba(18,14,10,.22) 38%,
      rgba(18,14,10,.16) 60%,
      rgba(18,14,10,.74) 100%);
}
.hero-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5; mix-blend-mode: overlay;
}
.hero-frame {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 56px) 64px 56px;
}
.hero-center {
  opacity: 0; animation: fadeUp 1.4s var(--ease-slow) .5s forwards;
  max-width: 680px;
  padding: 36px 40px 40px;
  background: rgba(14,11,7,.34);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(254,253,250,.08);
  /* Right-aligned so the couple in the hero photograph stays visible on the left */
  align-self: flex-end;
  margin-top: auto; margin-bottom: auto;
}
.hero-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .44em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
}
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(54px, 8vw, 108px);
  font-weight: 300; line-height: .94;
  letter-spacing: -.03em;
  color: rgba(254,253,250,.98);
  text-shadow: 0 4px 24px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.5);
}
.hero-headline em { font-style: italic; font-weight: 300; color: rgba(254,253,250,.58); }
.hero-tagline {
  margin-top: 30px;
  font-family: var(--serif); font-style: italic;
  font-size: 21px; font-weight: 300;
  color: rgba(254,253,250,.62);
  max-width: 460px; line-height: 1.6;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 40px; }
.hero-btn {
  display: inline-flex; align-items: center;
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  padding: 16px 32px; cursor: pointer; text-decoration: none;
  transition: background .4s, color .4s, border-color .4s;
}
.hero-btn.solid {
  color: var(--ink); background: var(--cream);
  border: 1px solid var(--cream);
}
.hero-btn.solid:hover { background: var(--gold); border-color: var(--gold); color: var(--cream); }
.hero-btn.ghost {
  color: rgba(254,253,250,.85); background: none;
  border: 1px solid rgba(254,253,250,.4);
}
.hero-btn.ghost:hover { border-color: rgba(254,253,250,.9); color: rgba(254,253,250,1); }

.hero-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  opacity: 0; animation: fadeUp 1.2s var(--ease-slow) 1.2s forwards;
}
.hero-address {
  font-size: 11.5px; font-weight: 300; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(254,253,250,.38); line-height: 2.2;
}
.hero-scroll {
  width: 54px; height: 54px; border-radius: 50%;
  background: none; border: 1px solid rgba(254,253,250,.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: border-color .4s, background .4s, transform .4s var(--ease);
}
.hero-scroll:hover { border-color: var(--gold); background: var(--gold); transform: scale(1.06); }
.hero-scroll-arrow {
  width: 12px; height: 12px;
  border-right: 1.5px solid rgba(254,253,250,.8);
  border-bottom: 1.5px solid rgba(254,253,250,.8);
  transform: rotate(45deg); margin-top: -5px;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   INTRO
───────────────────────────────────────── */
.intro { background: var(--paper); padding: 140px 64px; }
.intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.intro .section-eye { justify-content: center; }
.intro .section-eye::before { display: none; }
.intro-h {
  font-family: var(--serif);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 300; line-height: 1.12;
  letter-spacing: -.02em; margin-bottom: 36px;
}
.intro-h em { font-style: italic; color: var(--ink-40); }
.intro-body {
  font-size: 17px; font-weight: 300; line-height: 2;
  color: var(--ink-60); max-width: 640px; margin: 0 auto;
}

/* ─────────────────────────────────────────
   PORTFOLIO
───────────────────────────────────────── */
.portfolio { background: var(--paper); padding: 0 0 40px; }
.portfolio-head { padding: 0 64px 64px; }
.portfolio-h {
  font-family: var(--serif);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 300; line-height: 1.1; letter-spacing: -.02em;
}
.portfolio-h em { font-style: italic; color: var(--ink-40); }
.pf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 4px; padding: 4px;
  background: var(--paper);
}
.pf-item {
  overflow: hidden; aspect-ratio: 3/4; cursor: pointer;
  background: var(--paper-c);
}
.pf-item.wide { grid-column: span 2; aspect-ratio: 6/4; }
.pf-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.03);
  transition: transform 1.4s var(--ease-slow), filter .6s;
}
.pf-item:hover img { transform: scale(1.035); filter: saturate(.95); }

/* ─────────────────────────────────────────
   WHAT TO EXPECT
───────────────────────────────────────── */
.expect { background: var(--cream); padding: 140px 64px; border-top: 1px solid var(--ink-08); }
.expect-head { max-width: 1180px; margin: 0 auto 80px; }
.expect-h {
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 300; line-height: 1.14; letter-spacing: -.02em;
}
.expect-h em { font-style: italic; color: var(--ink-40); }
.expect-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 64px; max-width: 1180px; margin: 0 auto;
}
.expect-num {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 44px; font-weight: 300; color: var(--gold);
  margin-bottom: 22px;
}
.expect-t {
  font-family: var(--serif);
  font-size: 27px; font-weight: 400; line-height: 1.2;
  margin-bottom: 18px;
}
.expect-b {
  font-size: 15.5px; font-weight: 300; line-height: 1.95;
  color: var(--ink-60);
}
.expect-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; max-width: 1180px; margin: 90px auto 0;
  padding-top: 48px; border-top: 1px solid var(--ink-08);
}
.ef-item { display: flex; flex-direction: column; gap: 12px; }
.ef-label {
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--gold);
}
.ef-val {
  font-family: var(--serif);
  font-size: 26px; font-weight: 400; line-height: 1.3;
  color: var(--ink);
}

/* ─────────────────────────────────────────
   ENQUIRE (mirrors the main site's contact page)
───────────────────────────────────────── */
.contact-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
}
.contact-left {
  padding: 110px 88px;
  background: var(--paper-b);
  display: flex; flex-direction: column; justify-content: center;
}
.contact-h {
  font-family: var(--serif);
  font-size: clamp(50px, 5vw, 72px);
  font-weight: 300; line-height: 1.08;
  color: var(--ink); margin-bottom: 32px;
  letter-spacing: -.02em;
}
.contact-h em { font-style: italic; color: var(--ink-40); font-weight: 300; }
.contact-intro {
  font-size: 17px; font-weight: 300; line-height: 2;
  color: var(--ink-80); max-width: 420px; margin-bottom: 60px;
}
.contact-details { margin-bottom: 60px; }
.cd-row {
  display: flex; align-items: flex-start; gap: 24px;
  margin-bottom: 26px; padding-bottom: 26px;
  border-bottom: 1px solid var(--ink-08);
}
.cd-row:last-child { border-bottom: none; }
.cd-label {
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--gold); min-width: 100px; padding-top: 3px;
}
.cd-val { font-size: 17px; font-weight: 300; color: var(--ink-80); line-height: 1.7; }
/* Below 370px the label beside the email address is wider than the screen
   (the address cannot break), so stack each label above its value, as the
   main site's contact page does on phones. */
@media (max-width: 369.98px) {
  .cd-row { flex-direction: column; gap: 8px; padding-bottom: 22px; margin-bottom: 22px; }
  .cd-label { min-width: 0; padding-top: 0; }
}
.cd-val a { color: var(--ink-80); text-decoration: none; transition: color .3s; border-bottom: 1px solid transparent; }
.cd-val a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.contact-socials { display: flex; gap: 18px; }
/* Below 344px the two social buttons are wider than the screen side by
   side, so let the second drop onto its own line. */
@media (max-width: 343.98px) {
  .contact-socials { flex-wrap: wrap; }
}
.social-chip {
  font-size: 11.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-60); border: 1px solid var(--ink-18);
  padding: 10px 22px; text-decoration: none;
  transition: border-color .3s, color .3s, background .3s;
}
.social-chip:hover { border-color: var(--ink); color: var(--ink); background: var(--ink-08); }

.contact-right {
  background: var(--cream);
  padding: 110px 88px;
  display: flex; flex-direction: column; justify-content: center;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-group { display: flex; flex-direction: column; gap: 10px; }
.form-group.full { grid-column: span 2; }
.botcheck { display: none; }
.form-label {
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--ink-60);
}
.form-input, .form-textarea {
  font-family: var(--sans);
  font-size: 16.5px; font-weight: 300; color: var(--ink);
  background: var(--white); border: 1px solid var(--ink-18);
  padding: 15px 18px; outline: none;
  transition: border-color .3s, background .3s;
  -webkit-appearance: none;
  border-radius: 0;
  /* Fill the column, and never squeeze below 250px: the width Chrome gives
     these inputs by default, written down so every browser lays the form
     out the same way. */
  width: 100%; min-width: 250px;
}
/* Narrow desktops: two 250px inputs per row held the form column at 698px,
   which pushed the page wider than the screen below 1186px. Let the inputs
   shrink and use 48px side padding there. 1186px and up is unchanged.
   (.98 and 980.02, not 1185 and 981: at 125% or 150% Windows scaling a
   window can be 1185.33 or 980.67px wide, which whole numbers miss.) */
@media (min-width: 980.02px) and (max-width: 1185.98px) {
  .contact-left, .contact-right { padding-left: 48px; padding-right: 48px; }
  .form-input, .form-textarea { min-width: 0; }
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--gold); background: var(--white);
}
.form-input[type="date"] { min-height: 55px; }
.form-textarea { min-height: 140px; resize: vertical; }
.form-submit {
  grid-column: span 2; margin-top: 12px;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  border: 1px solid var(--ink); padding: 18px 36px; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.form-submit:hover { background: var(--gold); border-color: var(--gold); }
.form-submit.is-success { background: var(--gold); border-color: var(--gold); }
.form-note {
  font-size: 12.5px; font-weight: 300; color: var(--ink-40);
  line-height: 1.7; margin-top: 24px;
}
.form-note a {
  color: var(--ink-60); text-decoration: underline;
  text-decoration-color: var(--gold-md); text-underline-offset: 3px;
  transition: color .3s, text-decoration-color .3s;
}
.form-note a:hover { color: var(--ink); text-decoration-color: var(--gold); }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 42px 56px;
  border-top: 1px solid var(--ink-08);
  background: var(--paper);
}
.footer-brand {
  font-family: var(--serif);
  font-size: 17px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-60);
}
.footer-brand .dot { color: var(--gold); }
.footer-center { display: flex; gap: 28px; justify-content: center; list-style: none; }
.footer-center a {
  font-size: 11.5px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-40); text-decoration: none; transition: color .3s;
}
.footer-center a:hover { color: var(--ink); }
.footer-right {
  font-size: 11.5px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-40); text-align: right;
}

/* ─────────────────────────────────────────
   LIGHTBOX
───────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12,10,7,.97);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; animation: lbFade .5s var(--ease); }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-img {
  max-width: 92vw; max-height: 92vh;
  object-fit: contain; display: block;
  animation: lbSlide .6s var(--ease-slow);
}
@keyframes lbSlide {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox-close {
  position: absolute; top: 28px; right: 32px;
  font-size: 12.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(254,253,250,.55); cursor: pointer; background: none; border: none;
  font-family: var(--sans);
  transition: color .3s;
}
.lightbox-close:hover { color: rgba(254,253,250,.95); }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s;
}
.lightbox-prev { left: 28px; }
.lightbox-next { right: 28px; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-4px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(4px); }
.lb-arrow {
  width: 14px; height: 14px;
  border-right: 1px solid rgba(254,253,250,.5);
  border-bottom: 1px solid rgba(254,253,250,.5);
  transition: border-color .3s;
}
.lightbox-prev .lb-arrow { transform: rotate(135deg); }
.lightbox-next .lb-arrow { transform: rotate(-45deg); }
.lightbox-prev:hover .lb-arrow,
.lightbox-next:hover .lb-arrow { border-color: rgba(254,253,250,.95); }
.lightbox-counter {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 300; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(254,253,250,.45);
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 980px) {
  .site-nav { padding: 0 28px; }
  .hero-frame { padding: calc(var(--nav-h) + 36px) 28px 40px; }
  .intro, .expect { padding: 100px 28px; }
  .portfolio-head { padding: 0 28px 48px; }
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .expect-grid { grid-template-columns: 1fr; gap: 48px; }
  .expect-facts { grid-template-columns: 1fr; gap: 32px; margin-top: 64px; }
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-left, .contact-right { padding: 80px 28px; }
  .site-footer { grid-template-columns: 1fr; gap: 20px; justify-items: center; padding: 40px 28px; }
  .footer-center { flex-wrap: wrap; row-gap: 12px; }
  .footer-right { text-align: center; }
}

@media (max-width: 640px) {
  html { font-size: 17px; }
  .site-nav { padding: 0 20px; }
  .nav-brand-text { display: none; }
  .nav-hide-sm { display: none; }
  .nav-links { gap: 18px; }
  .nav-links a.nav-cta { padding: 10px 18px; }
  /* Let the section headings wrap naturally on a narrow screen — the <br>s
     that shape them on desktop would force lines wider than the viewport. */
  .intro-h br, .expect-h br { display: none; }
  .intro-h, .portfolio-h { font-size: clamp(34px, 9.5vw, 64px); }
  .expect-h { font-size: clamp(30px, 8.5vw, 58px); }
  .contact-h { font-size: clamp(42px, 11vw, 72px); }
  .hero-center { padding: 28px 24px 30px; max-width: 100%; }
  .hero-bg { background-position: 30% 45%; }
  .hero-tagline { font-size: 19px; }
  .hero-ctas { gap: 12px; }
  .hero-btn { padding: 15px 24px; letter-spacing: .24em; }
  .hero-address { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full, .form-submit { grid-column: span 1; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

@media (hover: none) {
  .pf-item img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bg { animation: none; }
  .hero-center, .hero-bottom { animation-duration: .01s; animation-delay: 0s; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
.faq { background: var(--paper); padding: 140px 64px; border-top: 1px solid var(--ink-08); }
.faq-inner { max-width: 880px; margin: 0 auto; }
.faq-h {
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 300; line-height: 1.14; letter-spacing: -.02em;
  margin-bottom: 56px;
}
.faq-h em { font-style: italic; color: var(--ink-40); }
.faq-item { border-bottom: 1px solid var(--ink-08); }
.faq-item:first-of-type { border-top: 1px solid var(--ink-08); }
.faq-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 28px;
  padding: 26px 0;
  font-family: var(--serif);
  font-size: 23px; font-weight: 400; line-height: 1.35;
  transition: color .3s;
}
.faq-q:hover { color: var(--gold); }
.faq-q::-webkit-details-marker { display: none; }
.faq-mark {
  flex: none;
  font-family: var(--serif);
  font-size: 26px; font-weight: 300; color: var(--gold);
  transition: transform .35s var(--ease);
}
details[open] .faq-mark { transform: rotate(45deg); }
.faq-a {
  padding: 0 44px 30px 0;
  font-size: 15.5px; font-weight: 300; line-height: 1.95;
  color: var(--ink-60); max-width: 760px;
}
.faq-a a { color: var(--ink-80); border-bottom: 1px solid var(--gold); text-decoration: none; }

@media (max-width: 980px) {
  .faq { padding: 100px 28px; }
}
@media (max-width: 640px) {
  .faq-q { font-size: 20px; padding: 22px 0; }
  .faq-a { padding-right: 0; }
}

/* ─────────────────────────────────────────
   THANK YOU  (thank-you/index.html)
   Shown after the enquiry form posts successfully. Its own URL so the
   confirmation is shareable, back-buttonable, and countable as a conversion
   in analytics, which an inline success message cannot be.
───────────────────────────────────────── */
.ty {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 80px) 64px 100px;
  background: var(--paper);
}
.ty-inner { max-width: 720px; width: 100%; }
.ty-h {
  font-family: var(--serif);
  font-size: clamp(46px, 6.5vw, 88px);
  font-weight: 300; line-height: 1; letter-spacing: -.03em;
  margin-bottom: 34px;
}
.ty-h em { font-style: italic; color: var(--ink-40); }
.ty-body {
  font-size: 17px; font-weight: 300; line-height: 1.95;
  color: var(--ink-60); max-width: 620px; margin-bottom: 52px;
}
.ty-next {
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
  padding: 30px 0; margin-bottom: 44px;
}
.ty-next-label {
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.ty-next-copy {
  font-size: 15.5px; font-weight: 300; line-height: 1.9; color: var(--ink-80);
}
.ty-contact {
  display: flex; flex-wrap: wrap; gap: 14px 30px; margin-bottom: 52px;
}
/* Icon + label. The gold rule sits on the label so it stops short of the
   icon; the icon's margin-bottom cancels the label's padding so the two
   centre on the text itself rather than on the text plus its underline. */
.ty-contact a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 300; color: var(--ink-80);
  text-decoration: none;
  transition: color .3s;
}
.ty-contact a .ty-label {
  border-bottom: 1px solid var(--gold-md);
  padding-bottom: 3px;
  transition: border-color .3s;
}
.ty-contact a:hover { color: var(--gold); }
.ty-contact a:hover .ty-label { border-color: var(--gold); }
.ty-icon { width: 15px; height: 15px; flex: none; display: block; margin-bottom: 3px; }
/* WhatsApp as the primary follow-up action on the confirmation page */
.ty-wa {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  background: var(--ink); border: 1px solid var(--ink);
  padding: 17px 32px; margin-bottom: 34px;
  transition: background .35s, border-color .35s, color .35s, gap .4s var(--ease);
}
.ty-wa:hover { background: var(--gold); border-color: var(--gold); gap: 20px; }
.ty-wa-icon { width: 17px; height: 17px; flex: none; display: block; }

.ty-back {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding-bottom: 6px; border-bottom: 1px solid var(--ink-18);
  transition: gap .4s var(--ease), border-color .3s, color .3s;
}
.ty-back:hover { gap: 22px; border-color: var(--gold); color: var(--gold); }

@media (max-width: 640px) {
  .ty { padding: calc(var(--nav-h) + 56px) 28px 72px; }
}