/* ==========================================================================
   Enovadi Systems — Global Stylesheet
   Palette: black / gold / cream, drawn from the Enovadi oval logo
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  --black:        #0A0A0A;
  --black-soft:   #111111;
  --black-raised: #161616;
  --line:         rgba(201, 162, 77, 0.18);
  --line-soft:    rgba(245, 241, 232, 0.08);

  --gold:         #C9A24D;
  --gold-light:   #E2C782;
  --gold-deep:    #A8823A;
  --gold-glow:    rgba(201, 162, 77, 0.14);

  --cream:        #F5F1E8;
  --cream-dim:    #CFC9BC;
  --muted:        #948E82;

  --font-display: "Cormorant Garamond", "Didot", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --max:          1200px;
  --gutter:       clamp(1.25rem, 5vw, 3rem);
  --radius:       4px;
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--cream-dim);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a   { color: var(--gold); text-decoration: none; transition: color 0.25s var(--ease); }
a:hover { color: var(--gold-light); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--cream);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 0.65em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.15rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--black); }

/* --- Layout helpers ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(4.5rem, 10vw, 8rem) 0; position: relative; }
.section--tight { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.section--raised { background: var(--black-soft); }
.section--hairline { border-top: 1px solid var(--line-soft); }

.narrow { max-width: 760px; }
.center { text-align: center; }
.center .narrow { margin-inline: auto; }

/* --- Eyebrow label ------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.center .eyebrow::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* --- Lead paragraph ----------------------------------------------------- */
.lead {
  font-size: clamp(1.075rem, 1.6vw, 1.25rem);
  line-height: 1.72;
  color: var(--cream-dim);
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color: var(--black);
  box-shadow: 0 10px 30px -14px rgba(201, 162, 77, 0.7);
}
.btn--gold:hover {
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -14px rgba(201, 162, 77, 0.85);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--cream);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: var(--gold-glow);
  transform: translateY(-2px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
.center .btn-row { justify-content: center; }

/* Arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.arrow-link span { transition: transform 0.3s var(--ease); }
.arrow-link:hover span { transform: translateX(5px); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.05rem 0;
  transition: background 0.35s var(--ease), padding 0.35s var(--ease),
              border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  padding: 0.6rem 0;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img {
  height: 90px;
  width: auto;
  transition: height 0.35s var(--ease);
}
.site-header.is-stuck .brand img { height: 66px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: 0.35rem 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--gold-light); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }

/* Buttons inside the nav must not inherit the nav link colour or underline —
   gold buttons always carry black text for contrast. */
.nav-links .btn--gold,
.nav-links .btn--gold:hover { color: var(--black); }
.nav-links .btn::after { display: none; }
.nav-links .btn--ghost,
.nav-links .btn--ghost:hover { color: var(--cream); }
.nav-links .btn { padding-top: 0.8rem; padding-bottom: 0.8rem; }

/* The single "Get in Touch" button, sitting inside the nav beside Contact. */
.nav-cta-item { margin-left: 0.6rem; }
.nav-cta-item .btn { padding: 0.8rem 1.6rem; font-size: 0.75rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/* The three bars are anchored to the centre of the button rather than stacked
   in normal flow.

   Why: when they were stacked, the open state told each bar to travel a fixed
   number of pixels to meet in the middle. That distance depended on how the
   browser spaced the bars inside the 44px box — and a grid container with a
   fixed height stretches its rows to fill, so the real gap was 44/3 = 14.67px,
   not the 8.5px the margins implied. The bars stopped short of each other and
   drew a ">" instead of an X.

   Anchored to the centre there is no arithmetic to get wrong: the open state is
   simply two bars sitting on the same point, rotated ±45°. */
.nav-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1.5px;
  margin: 0;
  background: var(--gold);
  transition: transform 0.3s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle span:nth-child(1) { transform: translate(-50%, -50%) translateY(-6px); }
.nav-toggle span:nth-child(2) { transform: translate(-50%, -50%); }
.nav-toggle span:nth-child(3) { transform: translate(-50%, -50%) translateY(6px); }

/* Open: middle bar fades, outer two land on the centre and cross. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 11.5rem 0 6rem;
  overflow: hidden;
  isolation: isolate;
}

.hero--page { min-height: auto; padding: 12.5rem 0 5rem; }

/* Layered ambient background */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero-bg::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -12%;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 77, 0.16), transparent 68%);
  filter: blur(30px);
  animation: drift 22s ease-in-out infinite alternate;
}
.hero-bg::after {
  content: "";
  position: absolute;
  bottom: -35%;
  left: -18%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 77, 0.09), transparent 70%);
  filter: blur(40px);
  animation: drift 28s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-45px, 40px, 0) scale(1.12); }
}

/* Faint grid overlay */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity: 0.75;
}

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gold-light), var(--gold) 50%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead { max-width: 620px; }
.hero--page .lead { max-width: 720px; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, transparent, var(--gold));
  overflow: hidden;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  70%, 100% { transform: translateY(100%); }
}

/* ==========================================================================
   Section headers
   ========================================================================== */
.section-head { max-width: 720px; margin-bottom: 3.5rem; }
.center .section-head { margin-inline: auto; }

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.card {
  position: relative;
  padding: 2.5rem 2.1rem;
  background: var(--black-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
              background 0.4s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  background: #191919;
}
.card:hover::before { transform: scaleX(1); }

.card h3 { margin-bottom: 0.75rem; }
.card p  { font-size: 0.98rem; margin-bottom: 1.5rem; }
.card .arrow-link { margin-top: auto; }

/* Icon medallion */
.icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--gold-glow);
  color: var(--gold);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none;
            stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .icon { background: var(--gold); color: var(--black); }

/* Numbered card variant */
.card__num {
  font-family: var(--font-display);
  font-size: 2.7rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  margin-bottom: 1.1rem;
  transition: opacity 0.4s var(--ease);
}
.card:hover .card__num { opacity: 0.85; }

/* ==========================================================================
   Value list ("Why Enovadi")
   ========================================================================== */
.value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.value-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.value-list li:first-child { border-top: 1px solid var(--line-soft); }
.value-list .mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 0.2rem;
}
.value-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 0.35rem;
}
.value-list p { font-size: 0.98rem; margin: 0; }

/* ==========================================================================
   Service detail blocks
   ========================================================================== */
.service {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--line-soft);
}
.service:last-of-type { border-bottom: 1px solid var(--line-soft); }

.service__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.service__aside { position: sticky; top: 7rem; }
.service h3 { font-size: clamp(1.75rem, 3vw, 2.35rem); margin-bottom: 0; }

.check-list { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.check-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  font-size: 0.98rem;
  color: var(--cream-dim);
}
/* The tick inside each bullet.

   It used to be drawn with a single 45° linear-gradient stripe in a 9px x 1.5px
   box. One stripe can only ever be one diagonal line — a tick needs two, a short
   stroke down-right and a longer one up-right. In a box six times wider than it
   was tall, that stripe rendered as a small smudge that read as a stray comma.

   Now an inline SVG, which draws the real shape at any size.
   NOTE: the stroke colour is hard-coded because CSS custom properties do not
   work inside a data URI. If the gold in the palette above changes, change it
   here too — and in the light-theme copy in style-hybrid.css. */
.check-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 0.42rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background-color: var(--gold-glow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.9 8.6 9.4 3.9' fill='none' stroke='%23C9A24D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* ==========================================================================
   About: founder block
   ========================================================================== */
.founder {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.founder__seal {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #1c1c1c, var(--black-soft));
  border: 1px solid var(--line);
  box-shadow: 0 0 0 10px rgba(201, 162, 77, 0.05), inset 0 0 60px rgba(201, 162, 77, 0.07);
}
.founder__seal::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 77, 0.28);
}
.founder__initials {
  font-family: var(--font-display);
  font-size: 4rem;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Approach steps */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  position: relative;
  padding: 2rem 0 2rem 4.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.step:first-child { border-top: 1px solid var(--line-soft); }
.step::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  opacity: 0.6;
}
.step h4 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 0.35rem;
}
.step p { font-size: 0.98rem; margin: 0; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--black-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 162, 77, 0.11), transparent 62%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.form-card {
  padding: clamp(1.9rem, 4vw, 3rem);
  background: var(--black-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.field label .opt {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.95rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.65; }
.field input::placeholder,
.field textarea::placeholder { color: #5f5a52; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(201, 162, 77, 0.05);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.12);
}

.field .error {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.83rem;
  color: #E0857A;
}
.field.is-invalid input,
.field.is-invalid textarea { border-color: #E0857A; }
.field.is-invalid .error { display: block; }

/* Validation messages without JavaScript. :user-invalid only matches after
   the visitor has actually interacted with the field, so nothing is flagged
   red the moment the page loads. */
.field input:user-invalid,
.field textarea:user-invalid { border-color: #E0857A; }
.field input:user-invalid ~ .error,
.field textarea:user-invalid ~ .error { display: block; }

/* Honeypot */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* --- Contact form result banners ----------------------------------------
   Shown two independent ways, so a confirmation is never missed:
     1. :target  — pure CSS, works with JavaScript switched off
     2. .is-shown — added by site.js from the ?sent= parameter
   ---------------------------------------------------------------------- */
.form-alert {
  display: none;
  margin-bottom: 1.75rem;
  padding: 1.05rem 1.2rem;
  border-radius: var(--radius);
  font-size: 0.94rem;
  line-height: 1.6;
  scroll-margin-top: 7rem;
}
.form-alert:target,
.form-alert.is-shown { display: block; }
.form-alert strong { display: block; margin-bottom: 0.2rem; font-weight: 600; }
.form-alert a { color: inherit; text-decoration: underline; }

.form-alert--ok {
  background: rgba(201, 162, 77, 0.1);
  border: 1px solid var(--line);
  color: var(--gold-light);
}
.form-alert--err {
  background: rgba(224, 133, 122, 0.09);
  border: 1px solid rgba(224, 133, 122, 0.35);
  color: #E0857A;
}

.form-note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}

.form-status {
  display: none;
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: 0.94rem;
}
.form-status.is-visible { display: block; }
.form-status.is-ok {
  background: rgba(201, 162, 77, 0.1);
  border: 1px solid var(--line);
  color: var(--gold-light);
}
.form-status.is-err {
  background: rgba(224, 133, 122, 0.09);
  border: 1px solid rgba(224, 133, 122, 0.35);
  color: #E0857A;
}

/* Direct contact details */
.detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.detail-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line-soft);
}
.detail-list li:last-child { border-bottom: none; padding-bottom: 0; }
.detail-list .icon { width: 42px; height: 42px; margin: 0; }
.detail-list .icon svg { width: 18px; height: 18px; }
.detail-list .k {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.detail-list .v { font-size: 1.05rem; color: var(--cream); }
.detail-list a.v:hover { color: var(--gold-light); }

/* ==========================================================================
   Legal / prose pages
   ========================================================================== */
.prose { max-width: 800px; }
.prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.prose h3 { font-size: 1.2rem; margin-top: 2rem; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.25rem; }
.prose li { margin-bottom: 0.55rem; }
.prose li::marker { color: var(--gold); }

.legal-meta {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-bottom: 2.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.callout {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--black-raised);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.96rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #060606;
  border-top: 1px solid var(--line-soft);
  padding: clamp(3.5rem, 7vw, 5rem) 0 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
}
/* Matches the header logo at its full, unscrolled size. */
.footer-brand img { height: 90px; width: auto; margin-bottom: 1.4rem; }
.footer-tagline {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 340px;
  line-height: 1.7;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.footer-col a { font-size: 0.95rem; color: var(--cream-dim); }
.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.86rem;
  color: var(--muted);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--gold); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Elements only start hidden when JavaScript is running, so the site stays
   fully readable if the script fails to load or is blocked. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* ==========================================================================
   Accessibility
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.85rem 1.4rem;
  background: var(--gold);
  color: var(--black);
  font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--black); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .service { grid-template-columns: 1fr; gap: 1.5rem; }
  .service__aside { position: static; }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; }

  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6.5rem var(--gutter) 2.5rem;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), visibility 0.4s;
  }
  .nav-links.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  /* Keep the logo and the close button above the open menu panel.
     The panel is fixed to the top of the screen and its background painted
     straight over the logo, leaving the header looking empty with nothing but
     a close button floating in it. The panel's 6.5rem of top padding was
     always meant to leave the header visible — this makes it so. */
  .nav-links { z-index: 1; }
  .brand,
  .nav-toggle { position: relative; z-index: 2; }
  .nav-links li { border-bottom: 1px solid var(--line-soft); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { display: block; padding: 1.1rem 0; font-size: 1rem; }
  .nav-links .nav-cta-item { padding-top: 1.75rem; margin-left: 0; border-bottom: none; }
  .nav-links .nav-cta-item .btn { width: 100%; }

  .brand img,
  .site-header.is-stuck .brand img,
  .footer-brand img { height: 72px; }
  .hero { min-height: auto; padding: 9rem 0 5rem; }
  .hero--page { padding: 9.5rem 0 4rem; }

  /* The scroll cue is anchored 2.4rem from the bottom of the hero and is 54px
     tall. On desktop the hero is tall enough that it sits clear below the
     button. On mobile the hero collapses to its content height and the button
     goes full width, so the cue ends up drawn straight through the middle of
     the button. Hide it — it is decorative, and nobody needs telling to scroll
     on a phone. */
  .scroll-cue { display: none; }
  .founder { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .founder__seal { max-width: 200px; width: 100%; }
}

@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .value-list li { grid-template-columns: 1fr; gap: 0.9rem; }
  .step { padding-left: 3.4rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Print */
@media print {
  .site-header, .site-footer, .scroll-cue, .btn { display: none; }
  body { background: #fff; color: #000; }
}