:root {
  --ink: #0b1218;
  --ink-2: #101a22;
  --paper: #eef1f2;
  --muted: #9ba8b0;
  --line: rgba(255,255,255,.17);
  --line-dark: rgba(11,18,24,.14);
  --white: #f7f8f8;
  --accent: #b9c9d1;
  --max: 1320px;
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  color: var(--white);
  background: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: #dce7eb; color: #0b1218; }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: white; color: var(--ink); padding: .7rem 1rem;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  height: 92px; display: grid; grid-template-columns: 100px auto 1fr auto auto;
  align-items: center; gap: 2rem; padding: 0 clamp(1.2rem, 4vw, 4rem);
  border-bottom: 1px solid transparent;
  transition: height .4s var(--ease), background .4s ease, border-color .4s ease;
}
.is-scrolled .site-header {
  height: 68px; background: rgba(9,15,21,.82); border-bottom-color: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.brand { width: 90px; height: 90px; display: block; transition: width .4s var(--ease), height .4s var(--ease); }
.is-scrolled .brand { width: 46px; height: 46px; }
.header-quote {
  display: inline-flex; align-items: center; gap: .8rem; padding: .7rem .95rem;
  background: #f2f4f5; color: var(--ink);
  font-family: "DM Mono", monospace; text-transform: uppercase; letter-spacing: .11em; font-size: .64rem;
  transition: background .25s ease;
}
.header-quote:hover { background: #fff; }
.header-whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 -.6rem; color: rgba(255,255,255,.76); transition: color .25s ease; }
.header-whatsapp:hover { color: #fff; }
.header-whatsapp svg { display: block; }
.brand img { width: 100%; height: 100%; object-fit: contain; }
.header-location {
  font-family: "DM Mono", monospace; text-transform: uppercase; letter-spacing: .11em;
  font-size: .66rem; color: rgba(255,255,255,.54);
}
.desktop-nav { display: flex; justify-content: center; gap: clamp(1.5rem, 3vw, 3rem); }
.desktop-nav a, .header-email, .menu-toggle {
  font-family: "DM Mono", monospace; text-transform: uppercase; letter-spacing: .11em;
  font-size: .66rem; color: rgba(255,255,255,.76);
}
.desktop-nav a { transition: color .25s ease; }
.desktop-nav a:hover { color: white; }
.header-email { justify-self: end; }
.menu-toggle { display:none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.menu-toggle span { display:block; width:25px; height:1px; background:#fff; margin:5px 0; transition:.25s ease; }

.mobile-nav {
  display:none; position: fixed; z-index: 19; inset: 0; padding: 110px 2rem 2rem;
  background: rgba(9,15,21,.97); backdrop-filter: blur(18px);
  flex-direction: column; gap: 1.5rem;
}
.mobile-nav a { font-size: 2rem; letter-spacing: -.04em; }

.hero {
  min-height: 100svh; position: relative; overflow: hidden; display: flex; align-items: flex-end;
  background: #17242d;
}
.hero-image, .hero-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-image { transform-origin: 60% 40%; animation: hero-zoom 22s ease-out both; }
@keyframes hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-overlay {
  background: linear-gradient(180deg, rgba(8,14,20,.3) 0%, rgba(8,14,20,.12) 35%, rgba(8,14,20,.92) 100%);
}

.hero-inner { width: min(var(--max), calc(100% - 2.4rem)); margin: 0 auto; padding: 0 0 clamp(2rem, 6vw, 5.8rem); position:relative; z-index:2; }
.eyebrow, .section-index, .hero-categories, .scroll-cue, .contact-bottom small {
  font-family:"DM Mono", monospace; text-transform:uppercase; letter-spacing:.12em; font-size:.65rem;
}
.eyebrow { color:rgba(255,255,255,.68); margin-bottom:1.2rem; }
h1,h2,h3,p { margin-top:0; }
h1 {
  max-width: 950px; font-size: clamp(3.5rem, 8.2vw, 8.5rem); line-height:.89; letter-spacing:-.075em;
  font-weight:500; margin-bottom:1.2rem;
}
h1 em, h2 em, .statement-quote em { font-style:normal; color: #aebfc8; }
.hero-copy { max-width: 550px; color:rgba(255,255,255,.76); line-height:1.65; font-size:clamp(.9rem,1.4vw,1.05rem); margin-bottom: 1.5rem; }
.hero-categories {
  color: rgba(255,255,255,.85); margin-bottom: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.hero-quote {
  margin: 0 0 2rem 0; font-size: clamp(1.1rem, 2vw, 1.6rem); font-style: italic;
  color: #aebfc8; max-width: 750px; line-height: 1.4; border-left: 2px solid var(--accent); padding-left: 1.2rem;
}
.hero-actions { display:flex; align-items:center; gap:2rem; margin-top:2.2rem; }
.button { display:inline-flex; align-items:center; gap:1.8rem; padding:1rem 1.15rem; font-size:.72rem; font-weight:700; letter-spacing:.04em; }
.button-light { background:#f2f4f5; color:#0b1218; }
.button-light span { font-size:1rem; }
.text-link { font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; font-size:.65rem; color:rgba(255,255,255,.8); }
.scroll-cue { position:absolute; z-index:3; right:clamp(1.2rem,4vw,4rem); bottom:2.4rem; color:rgba(255,255,255,.5); writing-mode:vertical-rl; display:flex; align-items:center; gap:.7rem; }
.scroll-cue span { width:1px; height:45px; background:rgba(255,255,255,.4); }

.section { padding:clamp(5rem,10vw,10rem) max(1.2rem, calc((100vw - var(--max))/2)); }
.section-index { color:#75848d; margin-bottom:clamp(3rem,6vw,6rem); }
h2 { font-size:clamp(3rem,6.8vw,7rem); line-height:.9; letter-spacing:-.07em; font-weight:500; }

/* About: photo fills the left half edge to edge, text centred on the right */
.intro { background:var(--paper); color:var(--ink); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); min-height:min(92vh, 980px); }
.intro-photo { margin:0; position:relative; overflow:hidden; background:#dfe5e8; }
.intro-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; filter:grayscale(1); transition:transform 1.2s var(--ease); }
.intro-photo figcaption {
  position:absolute; left:clamp(1.2rem,2.5vw,2.2rem); bottom:clamp(1.2rem,2.5vw,2.2rem);
  padding:.55rem .75rem; background:rgba(11,18,24,.62); color:#eef1f2;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; font-size:.6rem;
}
.intro-body {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(5rem,9vw,9rem) max(1.2rem, calc((100vw - var(--max))/2)) clamp(5rem,9vw,9rem) clamp(3rem,7vw,8rem);
}
.intro .section-index { margin-bottom:clamp(2rem,4vw,3.5rem); }
.intro h2 { margin:0 0 clamp(2rem,4vw,3.5rem); }
.intro-copy { max-width:560px; color:#4c5b63; }
.lead { font-size:clamp(1.1rem,1.8vw,1.45rem); line-height:1.55; color:inherit; }
.intro-copy p { margin-bottom: 1rem; }
.intro-copy p:not(.lead) { line-height:1.8; font-size:.94rem; }
.intro-copy p:last-child { margin-bottom:0; }
.services { background:#111b23; }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:end; margin-bottom:4rem; }
.section-heading p { color:#95a2aa; line-height:1.7; max-width:420px; margin:0 0 .5rem; }

/* Wide screen 5-column grid layout for Services */
.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
}
.service-card {
  min-height: 360px;
  padding: 1.5rem 1.2rem 2rem;
  border-right: 1px solid var(--line);
  position: relative;
  display: flex;
  flex-direction: column;
}
.service-card:first-child { border-left: 1px solid var(--line); }
.service-media { margin: 0 0 1.4rem; aspect-ratio: 4/3; overflow: hidden; background: #1c262e; }
.service-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(.85); transition: transform .9s var(--ease), filter .5s ease;
}
@media (hover: hover) { .service-card:hover .service-media img { transform: scale(1.05); filter: grayscale(1) brightness(1); } }
.service-number { display: block; margin-bottom: .8rem; font-family: "DM Mono", monospace; font-size: .64rem; color: #73818a; }

.image-band { margin: 0; height: clamp(320px, 62vh, 720px); overflow: hidden; background: #1c262e; }
.image-band img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: transform 1.2s var(--ease); }
@media (hover: hover) {
  .image-band:hover img, .intro-photo:hover img { transform: scale(1.04); }
}
.service-card h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.03em; margin-bottom: .8rem; }
.service-card p { color: #89969e; line-height: 1.6; font-size: .84rem; }
.service-line { margin-top: auto; width: 100%; height: 1px; background: linear-gradient(90deg, #cad8dd, transparent); opacity: .5; }
.service-card { transition: background .35s ease; }
.service-card:hover { background: rgba(255,255,255,.03); }
.service-cta {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem;
  font-family: "DM Mono", monospace; text-transform: uppercase; letter-spacing: .12em; font-size: .62rem;
  color: #95a2aa; transition: color .25s ease;
}
.service-cta::after { content: ""; position: absolute; inset: 0; }
.service-card:hover .service-cta, .service-cta:focus-visible { color: #fff; }
.service-cta span { font-size: .9rem; }

.event-types { display:grid; grid-template-columns:180px 1fr; gap:2rem; margin-top:4rem; align-items:start; }
.event-types-label { font-family:"DM Mono",monospace; letter-spacing:.12em; font-size:.65rem; font-weight:400; color:#75848d; padding-top:.6rem; margin:0; }
.event-types ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.event-types li { border:1px solid var(--line); font-size:.84rem; color:#c2cdd2; letter-spacing:-.01em; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.event-types li a { display:block; padding:.55rem .95rem; }
.event-types li:hover, .event-types li:focus-within { background:#f2f4f5; color:var(--ink); border-color:#f2f4f5; }

.statement { min-height:75vh; position:relative; overflow:hidden; display:flex; align-items:center; }
.statement-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.statement-art { position:absolute; inset:0; background:
  radial-gradient(circle at 68% 45%, rgba(196,218,225,.18), transparent 24%),
  linear-gradient(120deg, rgba(11,20,27,.94), rgba(39,58,70,.7) 55%, rgba(13,22,29,.94));
}
.statement-content { position:relative; z-index:2; width:min(var(--max),calc(100% - 2.4rem)); margin:auto; }
.statement-quote { font-size:clamp(2.2rem,5vw,5rem); line-height:1.1; letter-spacing:-.05em; max-width:1000px; margin:0 0 2.5rem; }
.statement-copy { max-width:550px; color:#a5b2b9; line-height:1.8; margin-left: auto; }

.contact { position:relative; min-height:85vh; display:flex; align-items:flex-end; overflow:hidden; background:#0c151c; }
.contact-bg { position:absolute; inset:0; opacity:.72; background:
  radial-gradient(circle at 80% 20%, rgba(194,215,223,.16), transparent 25%),
  repeating-radial-gradient(ellipse at 75% 60%, transparent 0 80px, rgba(210,228,234,.07) 82px 84px),
  linear-gradient(145deg,#15232c,#070d12 70%);
}
.contact-inner { position:relative; z-index:2; width:min(var(--max),calc(100% - 2.4rem)); margin:auto; padding:clamp(5rem,10vw,9rem) 0 2rem; }
.contact h2 { max-width:900px; margin-bottom:2rem; }
.contact-copy { max-width:520px; color:#99a7af; line-height:1.7; }
.contact-email { display:inline-flex; gap:1.2rem; align-items:center; margin-top:2.5rem; font-size:clamp(1.3rem,3vw,2.5rem); letter-spacing:-.04em; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:.5rem; }
.contact-email span { font-size:1rem; }
.contact-links { display:flex; flex-direction:column; align-items:flex-start; }
.contact-links .contact-email + .contact-email { margin-top:1.2rem; }

.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:6vw; align-items:start; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.6rem; }
.field { display:flex; flex-direction:column; gap:.55rem; }
.field-full { grid-column:1 / -1; }
.field label { font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; font-size:.6rem; color:#8d9ba3; }
.field input, .field select, .field textarea {
  width:100%; background:rgba(255,255,255,.04); color:var(--white); font:inherit; font-size:1rem;
  border:0; border-bottom:1px solid rgba(255,255,255,.3); border-radius:0; padding:.75rem .8rem;
  transition:border-color .25s ease, background .25s ease;
}
.field textarea { resize:vertical; min-height:130px; }
.field select option { background:#0c151c; }
.field input[type="date"] { color-scheme:dark; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-bottom-color:#fff; background:rgba(255,255,255,.08); }
.form-actions { grid-column:1 / -1; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:.4rem; }
.contact-form .button { border:0; cursor:pointer; }
.contact-form .button:disabled { opacity:.6; cursor:wait; }
.form-status { margin:0; font-size:.85rem; color:#a5b2b9; }
.field .is-prefilled { animation: field-flash 1.8s ease; }
@keyframes field-flash { 0%, 35% { background: rgba(255,255,255,.2); border-bottom-color: #fff; } 100% { background: rgba(255,255,255,.04); } }
.form-status.is-error { color:#f0a8a0; }
.contact-bottom { margin-top:clamp(6rem,13vw,12rem); padding-top:1.2rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:2rem; align-items:end; }
.socials { display:flex; gap:1.2rem; margin-top:.8rem; font-size:.8rem; }
.socials a { color:#c2cdd2; }
.contact-note { margin-left:auto; color:#6e7d86; font-family:"DM Mono",monospace; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; text-align:right; }

.faq { background:var(--paper); color:var(--ink); }
.faq .section-heading p { color:#4c5b63; }
.faq-list { border-top:1px solid var(--line-dark); }
.faq-list details { border-bottom:1px solid var(--line-dark); }
.faq-list summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.6rem 0; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; font-size:1.6rem; font-weight:300; color:#75848d; transition:transform .3s var(--ease); }
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list summary h3 { margin:0; font-size:clamp(1.05rem,1.8vw,1.35rem); font-weight:500; letter-spacing:-.03em; }
.faq-list details p { margin:0 0 1.8rem; max-width:760px; color:#4c5b63; line-height:1.75; font-size:.95rem; }
.faq-list details a { border-bottom:1px solid currentColor; }

footer a { color:inherit; }
footer { background:#080e13; color:#66747c; display:flex; justify-content:space-between; padding:1.2rem max(1.2rem, calc((100vw - var(--max))/2)); font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; font-size:.58rem; }

.quote-fab { display:none; }

.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card:nth-child(4) { border-left: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 70px 1fr auto; }
  .header-location, .desktop-nav, .header-email, .header-whatsapp, .header-quote { display:none; }
  .quote-fab {
    display:inline-flex; align-items:center; gap:.9rem; position:fixed; z-index:18;
    right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom));
    padding:.95rem 1.1rem; background:#f2f4f5; color:var(--ink);
    font-size:.75rem; font-weight:700; letter-spacing:.04em; box-shadow:0 10px 30px rgba(0,0,0,.35);
    opacity:0; transform:translateY(16px); pointer-events:none;
    transition:opacity .35s ease, transform .35s var(--ease);
  }
  .quote-fab.is-visible { opacity:1; transform:none; pointer-events:auto; }
  .menu-toggle { display:block; justify-self:end; }
  .mobile-nav.is-open { display:flex; }
  .hero-inner { padding-bottom:4rem; }
  .section-heading { grid-template-columns:1fr; gap:3rem; }
  .intro { grid-template-columns:1fr; min-height:0; }
  .intro-photo { aspect-ratio:4/5; max-height:80vh; }
  .intro-body { padding:4.5rem 1.2rem 5rem; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { border-bottom:1px solid var(--line); min-height:330px; }
  .service-card:nth-child(odd) { border-left:1px solid var(--line); }
  .statement-copy { margin-left:0; }
  .contact-grid { grid-template-columns:1fr; gap:3.5rem; }
  .event-types { grid-template-columns:1fr; gap:1.2rem; }
  .event-types-label { padding-top:0; }

  /* Larger tap targets on touch screens (~44px) */
  .menu-toggle { padding:.85rem .6rem; }
  .socials { flex-wrap:wrap; gap:0 1.8rem; margin-top:.2rem; font-size:.95rem; }
  .socials a { display:inline-block; padding:.75rem 0; }
  footer { font-size:.66rem; padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
  footer a { padding:.9rem 0; }
}

@media (max-width: 600px) {
  .site-header { height:78px; padding:0 1rem; }
  .brand { width:54px; height:54px; }
  .is-scrolled .site-header { height:62px; }
  .is-scrolled .brand { width:40px; height:40px; }
  h1 { font-size:clamp(3.1rem,15vw,5rem); }
  .hero-copy { max-width:90%; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .scroll-cue { display:none; }
  .section { padding-top:5rem; padding-bottom:5rem; }
  h2 { font-size:clamp(3rem,15vw,5rem); }
  .service-grid { grid-template-columns:1fr; }
  .service-card, .service-card:nth-child(odd) { border-left:1px solid var(--line); }
  .service-card { min-height:280px; }
  .contact { min-height:90svh; }
  .contact-email { font-size:1.2rem; }
  .contact-form { grid-template-columns:1fr; }
  .contact-bottom { flex-direction:column; align-items:flex-start; }
  .contact-note { text-align:left; margin-left:0; }
  footer { flex-direction:column; gap:.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .js .reveal { opacity:1; transform:none; }
}
/* Privacy page */
.legal-hero { background:var(--ink-2); padding:calc(92px + clamp(3rem,7vw,6rem)) 0 clamp(3rem,6vw,5rem); }
.legal-inner { width:min(760px, calc(100% - 2.4rem)); margin:0 auto; }
.legal-hero .section-index { margin-bottom:2rem; }
.legal-hero h1 { font-size:clamp(3rem,7vw,6rem); margin:0 0 1.2rem; }
.legal-updated { margin:0; color:#8d9ba3; font-size:.85rem; }
.legal { background:var(--paper); color:var(--ink); padding:clamp(4rem,8vw,7rem) 0; }
.legal h2 { font-size:clamp(1.4rem,2.4vw,1.8rem); line-height:1.2; letter-spacing:-.03em; margin:3rem 0 1rem; }
.legal p, .legal li { color:#4c5b63; line-height:1.75; font-size:.98rem; }
.legal .lead { color:var(--ink); }
.legal ul { margin:0 0 1rem; padding-left:1.2rem; }
.legal li { margin-bottom:.6rem; }
.legal strong { color:var(--ink); font-weight:700; }
.legal a { border-bottom:1px solid currentColor; }
.legal-back { margin-top:3.5rem; }

.footer-links { display:flex; gap:1.6rem; }
.form-note { grid-column:1 / -1; margin:0; color:#7d8b93; font-size:.78rem; line-height:1.6; }
.form-note a { border-bottom:1px solid currentColor; }