/* ===========================================================
   ZW GROUP — shared site styles
   One stylesheet for every page. Keep page HTML lean.
   =========================================================== */

:root {
  --dusty-blue: #7D9CB8;
  --steel-blue: #5D7C99;
  --champagne: #E7DCC8;
  --soft-white: #FAF8F4;
  --slate: #4A5560;
  --slate-deep: #353E47;
  --night: #2A323A;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Inter', -apple-system, sans-serif;
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--night);
  color: var(--soft-white);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--champagne); color: var(--night); }

/* Visible keyboard focus (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== MONOGRAM (flat — no gloss, no shimmer) ===== */
.monogram {
  position: relative; display: inline-flex; font-family: var(--display);
  line-height: 1; font-weight: 600;
}
.monogram .z { color: var(--dusty-blue); position: relative; z-index: 1; }
.monogram .w { color: var(--champagne); position: relative; z-index: 2; margin-left: -0.42em; }

/* ===== HEADER / NAV ===== */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 6vw; transition: background 0.4s ease, padding 0.4s ease;
}
/* NB: no backdrop-filter here — it would create a containing block that traps the fixed menu overlay inside the header bar */
header.scrolled { background: rgba(42,50,58,0.94); padding: 14px 6vw; }
.nav-logo { font-size: 26px; display: flex; align-items: baseline; gap: 9px; text-decoration: none; }
.nav-logo .grp { font-family: var(--body); font-size: 11px; letter-spacing: 0.34em; color: var(--champagne); }

/* nav: full-screen overlay menu, opened by the burger on every viewport */
nav.primary {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px;
  background: rgba(42,50,58,0.97); backdrop-filter: blur(18px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
nav.primary a {
  text-decoration: none; color: var(--soft-white);
  font-family: var(--display); font-size: clamp(30px, 5vw, 46px); font-weight: 500;
  letter-spacing: 0.01em; position: relative; transition: color 0.3s;
}
nav.primary a:hover, nav.primary a[aria-current="page"] { color: var(--champagne); }
body.menu-open nav.primary { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* burger (all viewports) */
.nav-toggle {
  display: block; background: none; border: 0; cursor: pointer;
  width: 34px; height: 26px; position: relative; z-index: 120;
}
.nav-toggle span {
  position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--soft-white);
  box-shadow: 0 0 3px rgba(0,0,0,0.55);
  transition: transform 0.35s ease, opacity 0.25s ease;
}
.nav-toggle span:nth-child(1) { top: 4px; }
.nav-toggle span:nth-child(2) { top: 12px; }
.nav-toggle span:nth-child(3) { top: 20px; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===== HERO (home) ===== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: center; }
.hero-photo {
  position: absolute; inset: 0; z-index: 0; background-color: #3a4a5c;
  background-image:
    linear-gradient(135deg, rgba(42,50,58,0.25), rgba(93,124,153,0.3)),
    url('../images/hero-coast.jpg');
  background-size: cover; background-position: center;
}
.hero-grade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(160deg, rgba(42,50,58,0.84) 0%, rgba(53,62,71,0.58) 42%, rgba(93,124,153,0.46) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(231,220,200,0.16), transparent 60%);
}
.hero-content { position: relative; z-index: 3; padding: 0 6vw; max-width: 1000px; }
.hero .eyebrow {
  font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: 26px;
}
.hero h1 {
  font-family: var(--display); font-size: clamp(46px, 7vw, 90px);
  font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; margin-bottom: 32px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.28);
}
.hero h1 .line { display: block; }
.hero h1 em { font-style: italic; color: var(--champagne); }
.hero .lead {
  font-size: clamp(19px, 2.3vw, 24px); font-weight: 300; color: rgba(250,248,244,0.96);
  max-width: 600px; margin-bottom: 42px; line-height: 1.4;
}
.hero-cta-wrap { display: flex; gap: 18px; flex-wrap: wrap; }

/* ===== INNER PAGE HEADER BAND ===== */
.page-head {
  position: relative; padding: 200px 6vw 110px; overflow: hidden;
  background-color: var(--slate-deep);
  background-image: linear-gradient(150deg, rgba(42,50,58,0.92), rgba(93,124,153,0.4));
}
.page-head .inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.page-head h1 {
  font-family: var(--display); font-size: clamp(36px, 5vw, 62px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 22px;
}
.page-head h1 em { font-style: italic; color: var(--champagne); }
.page-head p { font-size: clamp(16px, 1.8vw, 19px); font-weight: 300; color: rgba(250,248,244,0.85); max-width: 620px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--champagne); color: var(--night);
  padding: 16px 36px; text-decoration: none; font-size: 15px; font-weight: 500;
  letter-spacing: 0.03em; border-radius: 2px; border: 1px solid var(--champagne);
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
.btn:hover { background: var(--soft-white); border-color: var(--soft-white); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.btn .arrow { transition: transform 0.3s; }
.btn:hover .arrow { transform: translateX(5px); }
.btn-ghost { background: transparent; border: 1px solid rgba(231,220,200,0.6); color: var(--champagne); box-shadow: none; }
.btn-ghost:hover { background: var(--champagne); color: var(--night); border-color: var(--champagne); }

/* ===== SECTION SYSTEM ===== */
.section { padding: 130px 6vw; position: relative; }
.section .inner { max-width: var(--maxw); margin: 0 auto; }
.eyebrow-label {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500;
  margin-bottom: 22px; color: var(--champagne);
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1.visible { transition-delay: 0.1s; }
.reveal-d2.visible { transition-delay: 0.2s; }
.reveal-d3.visible { transition-delay: 0.3s; }

h2.display {
  font-family: var(--display); font-size: clamp(27px, 3.7vw, 45px);
  font-weight: 500; line-height: 1.12; letter-spacing: -0.01em;
}
h2.display em { font-style: italic; color: var(--champagne); }
.lede { font-size: 17px; font-weight: 300; color: rgba(250,248,244,0.82); }
.lede + .lede { margin-top: 18px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }

/* surface bands for visual rhythm */
.band-champagne { background: var(--champagne); color: var(--slate-deep); }
.band-champagne .eyebrow-label { color: var(--steel-blue); }
.band-champagne h2.display em { color: var(--steel-blue); }
.band-champagne .lede { color: var(--slate); }
.band-deep { background: var(--slate-deep); }
.band-night { background: var(--night); }
/* steel-blue colour band — a mid-tone moment to break up the dark */
.band-steel { background: var(--steel-blue); }
.band-steel .lede { color: rgba(250,248,244,0.9); }

/* buttons sit well on champagne (light) sections */
.band-champagne .btn { background: var(--night); color: var(--soft-white); border-color: var(--night); }
.band-champagne .btn:hover { background: var(--slate-deep); border-color: var(--slate-deep); }
.band-champagne .btn-ghost { background: transparent; color: var(--steel-blue); border-color: rgba(93,124,153,0.55); }
.band-champagne .btn-ghost:hover { background: var(--steel-blue); color: var(--soft-white); border-color: var(--steel-blue); }

/* feature photo band */
.feature-band { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; }
.fb-photo {
  position: absolute; inset: 0; z-index: 1; background-color: #3a4a5c;
  background-image: url('../images/feature-path.jpg');
  background-size: cover; background-position: center;
}
.fb-grade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(110deg, rgba(42,50,58,0.92) 0%, rgba(53,62,71,0.7) 45%, rgba(93,124,153,0.4) 100%); }
.fb-content { position: relative; z-index: 3; max-width: 620px; padding: 0 6vw; margin: 0 auto; width: 100%; }
.fb-content .inner-narrow { max-width: var(--maxw); margin: 0 auto; }

/* quote band */
.quote-band { position: relative; min-height: 58vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.qb-photo { position: absolute; inset: 0; z-index: 1; background-color: #3a4a5c; background-image: url('../images/bathcoast.jpg'); background-size: cover; background-position: center; }
.qb-grade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(42,50,58,0.8), rgba(42,50,58,0.66)); }
.qb-quote { position: relative; z-index: 3; max-width: 820px; padding: 0 6vw; }
.qb-quote .q { font-family: var(--display); font-style: italic; font-size: clamp(24px, 3.4vw, 38px); font-weight: 500; line-height: 1.26; color: var(--soft-white); }
.qb-quote .cite { display: block; margin-top: 26px; font-family: var(--body); font-style: normal; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne); }

/* plain photo band (visual breather) */
.photo-band { position: relative; min-height: 52vh; background-color: #3a4a5c; background-size: cover; background-position: center; }
.photo-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,50,58,0.5), rgba(42,50,58,0.28) 50%, rgba(42,50,58,0.5)); }

/* value pillars (soft, not bullets) */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 20px; }
.pillar h3 { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 500; margin-bottom: 12px; color: var(--soft-white); }
.pillar p { font-size: 16px; font-weight: 300; color: rgba(250,248,244,0.78); }

/* approach steps */
.steps { display: grid; gap: 0; margin-top: 30px; }
.step { display: grid; grid-template-columns: 0.5fr 2.5fr; gap: 44px; padding: 46px 0; border-top: 1px solid rgba(231,220,200,0.18); align-items: start; }
.step:last-child { border-bottom: 1px solid rgba(231,220,200,0.18); }
.step .s-num { font-family: var(--display); font-size: 22px; color: var(--champagne); }
.step h3 { font-family: var(--display); font-size: clamp(24px, 3.2vw, 34px); font-weight: 500; line-height: 1.12; margin-bottom: 14px; color: var(--soft-white); }
.step p { font-size: 16px; font-weight: 300; color: rgba(250,248,244,0.8); max-width: 620px; }

/* areas of work — BCG-style square tiles */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.area {
  display: flex; flex-direction: column; min-height: 208px;
  border: 1px solid rgba(231,220,200,0.16); border-radius: 8px;
  padding: 32px 30px 34px; background: rgba(250,248,244,0.02);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.area:hover { border-color: rgba(231,220,200,0.42); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.22); }
.area h3 { font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; color: var(--soft-white); margin-bottom: 12px; line-height: 1.1; }
.area p { font-size: 15px; font-weight: 300; color: rgba(250,248,244,0.78); line-height: 1.55; }
/* tiles on a champagne (light) section — the BCG light-canvas look */
.band-champagne .area { background: var(--soft-white); border-color: rgba(53,62,71,0.14); }
.band-champagne .area:hover { border-color: var(--steel-blue); box-shadow: 0 18px 40px rgba(53,62,71,0.12); }
.band-champagne .area h3 { color: var(--slate-deep); }
.band-champagne .area p { color: var(--slate); }
/* four-up variant (the process steps as blocks) */
.areas.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pillars.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 44px 60px; }
.band-steel .area { background: rgba(250,248,244,0.06); border-color: rgba(231,220,200,0.22); }
.band-steel .area:hover { border-color: rgba(231,220,200,0.5); }
@media (max-width: 1100px) { .areas.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .areas.cols-4 { grid-template-columns: 1fr; } }

/* ===== CONTACT ===== */
.contact { position: relative; padding: 200px 6vw 130px; overflow: hidden; background: linear-gradient(150deg, var(--night), var(--steel-blue)); }
.contact-photo { position: absolute; inset: 0; z-index: 0; background-color: #3a4a5c; background-size: cover; background-position: center; }
.contact-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(42,50,58,0.95) 0%, rgba(42,50,58,0.82) 45%, rgba(93,124,153,0.6) 100%); }
.contact::before { content: ''; position: absolute; z-index: 1; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, rgba(231,220,200,0.14), transparent 70%); top: 40%; right: -10%; transform: translateY(-50%); filter: blur(70px); }
.contact-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; max-width: var(--maxw); margin: 0 auto; }
.contact h1 { font-family: var(--display); font-size: clamp(34px, 4.2vw, 54px); font-weight: 500; line-height: 1.04; margin-bottom: 24px; }
.contact h1 em { font-style: italic; color: var(--champagne); }
.contact .lead-text { font-size: 18px; font-weight: 300; color: rgba(250,248,244,0.86); margin-bottom: 34px; max-width: 480px; }
.contact-detail { margin-bottom: 22px; }
.contact-detail h5 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); margin-bottom: 7px; }
.contact-detail a, .contact-detail p { font-size: 16px; font-weight: 300; color: rgba(250,248,244,0.85); text-decoration: none; display: block; transition: color 0.3s; }
.contact-detail a:hover { color: var(--champagne); }
.form-card { background: rgba(250,248,244,0.05); border: 1px solid rgba(231,220,200,0.22); border-radius: 6px; padding: 40px; backdrop-filter: blur(8px); }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250,248,244,0.7); margin-bottom: 8px; }
.form-row input, .form-row textarea { width: 100%; background: rgba(42,50,58,0.55); border: 1px solid rgba(231,220,200,0.22); border-radius: 3px; padding: 13px 15px; color: var(--soft-white); font-family: var(--body); font-size: 15px; transition: border-color 0.3s; }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--champagne); }
.form-row textarea { resize: vertical; min-height: 110px; }
.form-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
.form-note { font-size: 13px; font-weight: 300; color: rgba(250,248,244,0.55); margin-top: 14px; text-align: center; }

/* ===== LEGAL / PROSE PAGES ===== */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); font-weight: 500; margin: 44px 0 16px; color: var(--soft-white); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 16px; font-weight: 300; color: rgba(250,248,244,0.82); margin-bottom: 14px; }
.prose ul { padding-left: 22px; margin-bottom: 14px; }
.prose a { color: var(--champagne); }
.prose .updated { font-size: 13px; letter-spacing: 0.04em; color: rgba(250,248,244,0.5); margin-bottom: 36px; }

/* ===== FOOTER ===== */
footer { background: var(--night); padding: 70px 6vw 40px; border-top: 1px solid rgba(231,220,200,0.12); }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px; margin-bottom: 50px; max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.footer-logo { font-size: 30px; display: flex; align-items: baseline; gap: 9px; text-decoration: none; }
.footer-logo .grp { font-family: var(--body); font-size: 12px; letter-spacing: 0.34em; color: var(--champagne); }
.footer-col h5 { color: var(--soft-white); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; color: rgba(250,248,244,0.65); text-decoration: none; font-size: 15px; font-weight: 300; margin-bottom: 10px; transition: color 0.3s; }
.footer-col a:hover { color: var(--champagne); }
.footer-bottom { border-top: 1px solid rgba(231,220,200,0.12); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 300; color: rgba(250,248,244,0.5); max-width: var(--maxw); margin: 0 auto; }

/* ===== RESPONSIVE ===== */
@media (max-width: 920px) {
  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .pillars, .pillars.cols-2 { grid-template-columns: 1fr; gap: 34px; }
  .areas { grid-template-columns: 1fr; gap: 18px; }
  .step { grid-template-columns: 1fr; gap: 14px; padding: 36px 0; }
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .contact { padding: 150px 7vw 100px; }
  .section { padding: 90px 7vw; }
  .page-head { padding: 150px 7vw 80px; }
}

/* desktop: quote photo fills full width; taller band + upper framing keeps the figure in view */
@media (min-width: 921px) {
  .quote-band { min-height: 90vh; }
  .qb-photo { background-position: center 28%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}