/* styles-corporate.css — Corporate page (#/corporate).
   Full-bleed editorial system like the rest of the site: sections span the
   viewport, inset only by --pad-x; hairline grids run edge to edge (container
   border-top+left, cells border-right+bottom); huge Archivo display + italic
   accent; mono numerics; accent on hover/active only; no shadows. Both themes. */

/* --cpad = the page's horizontal inset. Defaults to the global --pad-x; phones
   override it to a roomier value so content never presses the screen edge (the
   global token drops to 16px ≤480px, which feels cramped for this page). */
.corp { display: block; --cpad: var(--pad-x); }
.corp section { border-bottom: 1px solid var(--bone-faint); }

/* Shared section heading */
.corp-eyebrow-row { /* reserved */ }
.corp h2 {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em;
  font-size: clamp(40px, 6vw, 88px); margin: 16px 0 0;
}
.corp .italic { font-style: italic; color: var(--accent); font-weight: 800; }

/* 1 · HERO — full-bleed photo, edge type anchored to the bottom-left.
   Baked-in artwork (drifts on scroll via useHeroParallax) sits behind a
   left+bottom-dark readability scrim. Backdrop is always dark → force light
   text in BOTH themes (so the light theme doesn't paint dark ink on the photo). */
.corp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: #0b0c0e;
  min-height: min(80vh, 720px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 140px var(--cpad) 72px;
}
/* Full-bleed cover, but with the shared parallax over-scan trimmed (-25% → ±8%)
   and the frame biased up — so the suited figure keeps his head in shot instead
   of cropping at the top. Phones swap to a portrait crop (below). */
.corp-hero .hero-parallax-bg {
  background-image: url('../assets/images/corporate/corp.webp');
  background-position: center 38%;
  background-size: cover;
  top: -8%; bottom: -8%;
}
.corp-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,9,11,0.85) 0%, rgba(8,9,11,0.5) 46%, rgba(8,9,11,0.18) 100%),
    linear-gradient(0deg, rgba(8,9,11,0.82) 0%, rgba(8,9,11,0.16) 52%, rgba(8,9,11,0) 100%);
}
.corp-hero h1 {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; line-height: 0.88; letter-spacing: -0.025em;
  font-size: clamp(56px, 11vw, 168px); margin: 22px 0 0; color: #F4F1EB;
}
.corp-hero .eyebrow { color: rgba(244,241,235,0.82); }
.corp-hero .sub { color: rgba(244,241,235,0.86); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; max-width: 640px; margin: 32px 0 0; }
.corp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
/* Ghost CTA on the dark photo — light outline, not the theme's dark border */
.corp-hero-cta .fu-btn.ghost { border-color: rgba(244,241,235,0.5); color: #F4F1EB; }
.corp-hero-cta .fu-btn.ghost:hover { border-color: #F4F1EB; }

/* 2 · VALUES — full-bleed hairline grid, big index numerals */
.corp-values {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--bone-faint); border-left: 1px solid var(--bone-faint);
  margin: 0 var(--cpad); /* side gutter — don't run the hairline grid to the edge */
}
.corp-value {
  position: relative; min-height: 280px; padding: 36px 32px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  border-right: 1px solid var(--bone-faint); border-bottom: 1px solid var(--bone-faint);
  transition: background 0.3s ease, transform 0.4s cubic-bezier(.2,.7,.3,1);
}
.corp-value:hover { background: var(--surface-faint); transform: translateY(-2px); }
.corp-value .cv-n {
  position: absolute; top: 24px; left: 32px;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: 72px; line-height: 1; color: var(--bone-faint); pointer-events: none;
}
.corp-value strong { font-size: 19px; }
.corp-value p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--bone-dim); }

/* 3 · PACKAGES — full-bleed 3-up, hairline, hover */
.corp-packages { padding: 96px var(--cpad) 0; }
.corp-pkg-grid {
  margin: 48px 0 0; /* sit within the section's --pad-x gutter (not edge-to-edge) */
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--bone-faint);
  border-left: 1px solid var(--bone-faint); border-right: 1px solid var(--bone-faint);
}
.corp-pkg {
  padding: 48px 40px 44px; display: flex; flex-direction: column; position: relative;
  border-right: 1px solid var(--bone-faint); border-bottom: 1px solid var(--bone-faint);
  transition: background 0.25s ease;
}
.corp-pkg:last-child { border-right: 0; }
.corp-pkg.featured { background: var(--surface-faint); }
.corp-pkg:hover { background: var(--surface-hover, var(--surface-faint)); }
.corp-pkg .cp-flag { position: absolute; top: 20px; right: 20px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.corp-pkg .cp-name { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 30px; line-height: 1; }
.corp-pkg .cp-price { margin-top: 18px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.corp-pkg .cp-price .from { font-size: 11px; color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.corp-pkg .cp-price .amt { font-family: 'JetBrains Mono', monospace; font-size: 30px; }
.corp-pkg .cp-price .unit { font-size: 12px; color: var(--bone-dim); }
.corp-pkg .cp-blurb { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--bone-dim); }
.corp-pkg .cp-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.corp-pkg .cp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.corp-pkg .cp-list .tick { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.corp-pkg .cp-cta { margin-top: 28px; width: 100%; justify-content: center; }

/* 4 · HOW IT WORKS — full-bleed 4 steps, huge numerals */
.corp-how { padding: 96px var(--cpad) 0; }
.corp-steps {
  margin: 48px 0 0; /* sit within the section's --pad-x gutter (not edge-to-edge) */
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--bone-faint);
  border-left: 1px solid var(--bone-faint); border-right: 1px solid var(--bone-faint);
}
.corp-step {
  min-height: 240px; padding: 36px 32px; display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--bone-faint); border-bottom: 1px solid var(--bone-faint);
}
.corp-step:last-child { border-right: 0; }
.corp-step .cs-n { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%; font-size: 56px; line-height: 1; color: var(--accent); }
.corp-step strong { margin-top: auto; font-size: 18px; }
.corp-step p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--bone-dim); }

/* 5 · ADD-ONS */
.corp-addons { padding: 96px var(--cpad); }
.corp-addon-tags { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.corp-addon { padding: 12px 20px; border: 1px solid var(--bone-faint); font-size: 14px; transition: border-color 0.16s ease, color 0.16s ease; }
.corp-addon:hover { border-color: var(--accent); color: var(--accent); }

/* 6 · SOCIAL PROOF — full-bleed band */
.corp-proof {
  padding: 80px var(--cpad); display: grid; grid-template-columns: minmax(180px, 0.4fr) 1fr; gap: 56px; align-items: center;
  background: var(--surface-faint);
}
.corp-proof-stat { display: flex; flex-direction: column; gap: 8px; }
.corp-proof-stat .big { font-family: 'JetBrains Mono', monospace; font-size: clamp(72px, 9vw, 120px); line-height: 0.9; }
.corp-proof-stat .k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.corp-quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.35; color: var(--bone); max-width: 820px; }
.corp-quote cite { display: block; margin-top: 18px; font-family: 'Inter', sans-serif; font-style: normal; font-size: 13px; letter-spacing: 0.04em; color: var(--bone-dim); }

/* 7 · FORM — full-bleed section, form column left-aligned + readable width */
.corp-form-wrap { padding: 96px var(--cpad); }
.corp-form-wrap .sub { color: var(--bone-dim); font-size: 17px; line-height: 1.55; max-width: 560px; margin: 20px 0 0; }
/* gap is 4px (not 20): each .fu-field reserves a 16px error slot via padding-bottom,
   so 16 + 4 keeps the original 20px rhythm while an inline error never reflows the form. */
.corp-form { margin-top: 40px; max-width: 880px; display: flex; flex-direction: column; gap: 4px; }
.corp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.corp-form .fu-field { display: flex; flex-direction: column; gap: 8px; position: relative; padding-bottom: 16px; }
.corp-form .fu-field label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.corp-form .fu-field label .opt { letter-spacing: 0; text-transform: none; opacity: 0.65; }
.corp-form input, .corp-form select, .corp-form textarea {
  padding: 14px 16px; border: 1px solid var(--bone-faint); background: transparent;
  color: var(--bone); font-size: 15px; font-family: inherit; width: 100%;
  transition: border-color 0.16s ease;
}
.corp-form textarea { resize: vertical; min-height: 110px; }
.corp-form input:focus, .corp-form select:focus, .corp-form textarea:focus { outline: none; border-color: var(--accent); }
.corp-form select { appearance: none; cursor: pointer; }
/* Stretch the FuDate calendar to the full date-field width. The shared popover is
   a fixed 268px (right:auto) — fine for the compact profile field, too narrow under
   this form's wide fields. Restore the left:0/right:0 stretch here only; the 7-col
   grid fills it. */
.corp-form .fu-date .fu-combo-menu,
.corp-form .fu-cal { right: 0; min-width: 0; }

.corp-consent { margin-top: 4px; }
/* The broad `.corp-form input` rule (full-width, padded, bordered) must NOT apply
   to the consent checkbox — reset it to a normal small box. */
.corp-form .corp-consent input {
  width: 16px; height: 16px; min-width: 16px; padding: 0; border: 0;
  background: none; flex: 0 0 auto; accent-color: var(--accent);
}
.corp-form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.corp-fine { font-size: 12px; color: var(--bone-dim); }
.corp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Inline validation — accent border + a small message under the field. Accent
   (not red) keeps the palette; the message text carries the meaning. */
.corp-form .fu-field.has-err input,
.corp-form .fu-field.has-err textarea,
.corp-form .fu-field.has-err .fu-phone-num,
.corp-form .fu-field.has-err .fu-phone-cc { border-color: var(--accent); }
.corp-form .fu-err { font-size: 12px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--accent); }
/* Field errors only (not the consent error, which lives outside a .fu-field):
   pin into the field's reserved slot so it never reflows the form. */
.corp-form .fu-field .fu-err { position: absolute; left: 0; bottom: 0; }
.corp-consent.has-err input { outline: 1px solid var(--accent); outline-offset: 2px; }
.corp-consent-err { display: block; margin: -8px 0 0; }

/* Success state */
.corp-sent { padding: 8px 0; max-width: 620px; }
.corp-sent .cs-seal { width: 60px; height: 60px; border: 1px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-size: 24px; }
.corp-sent h2 { font-size: clamp(44px, 7vw, 84px); margin: 28px 0 0; }
.corp-sent p { margin: 22px 0 0; color: var(--bone-dim); font-size: 17px; line-height: 1.6; }
.corp-sent a { color: var(--accent); }
.corp-sent .fu-btn { margin-top: 32px; }

/* 8 · FAQ */
.corp-faq { padding: 96px var(--cpad); }
.corp-faq-list { margin-top: 40px; border-top: 1px solid var(--bone-faint); max-width: 980px; }
.corp-faq-row { border-bottom: 1px solid var(--bone-faint); }
.corp-faq-row summary { list-style: none; cursor: pointer; padding: 24px 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.corp-faq-row summary::-webkit-details-marker { display: none; }
.corp-faq-row summary::after { content: '+'; color: var(--accent); font-size: 24px; line-height: 1; }
.corp-faq-row[open] summary::after { content: '–'; }
.corp-faq-row p { margin: 0 0 24px; color: var(--bone-dim); font-size: 15px; line-height: 1.65; max-width: 760px; }

/* 9 · CLOSING CTA — full-bleed, centred, big */
.corp-cta { padding: 120px var(--cpad); text-align: center; border-bottom: 0; }
.corp-cta h2 { font-size: clamp(44px, 8vw, 104px); }
.corp-cta-btns { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1000px) {
  .corp-values, .corp-steps { grid-template-columns: repeat(2, 1fr); }
  .corp-value .cv-n, .corp-step .cs-n { font-size: 52px; }
  .corp-pkg-grid { grid-template-columns: 1fr; }
  .corp-pkg, .corp-pkg:last-child { border-right: 0; }
  .corp-packages, .corp-how, .corp-addons, .corp-form-wrap, .corp-faq { padding-top: 72px; }
}

/* Phones — single column, roomier inset, compact vertical rhythm, full-width
   tap targets. --cpad lifts the side padding off the cramped global 16px. */
@media (max-width: 640px) {
  .corp { --cpad: 22px; }

  /* Hero — the wide photo would crop to a sliver on a portrait phone, so swap to
     a dedicated portrait crop framed on the figure (man + ball). Full-bleed cover,
     no shrinking, no letterbox — the whole figure reads at phone width. */
  .corp-hero { min-height: 74vh; padding: 92px var(--cpad) 44px; }
  .corp-hero .hero-parallax-bg {
    background-image: url('../assets/images/corporate/corp_mobile.webp');
    background-size: cover; background-position: center center;
  }
  .corp-hero .sub { font-size: 15.5px; line-height: 1.5; margin-top: 20px; max-width: 100%; }
  .corp-hero-cta { gap: 10px; margin-top: 28px; flex-direction: column; align-items: stretch; }
  .corp-hero-cta .fu-btn { width: 100%; justify-content: center; }

  /* Hairline grids → single column, compact cells; numerals aligned to the inset */
  .corp-values, .corp-steps { grid-template-columns: 1fr; }
  .corp-value, .corp-step { min-height: 0; padding: 52px 22px 24px; gap: 10px; }
  .corp-value .cv-n { top: 18px; left: 22px; font-size: 40px; }
  .corp-step .cs-n { font-size: 40px; }
  .corp-value strong, .corp-step strong { font-size: 17px; }
  .corp-value p, .corp-step p { font-size: 13.5px; }

  /* Section vertical rhythm — tighter on phones */
  .corp-packages, .corp-how { padding: 60px var(--cpad) 0; }
  .corp-addons { padding: 56px var(--cpad); }
  .corp-form-wrap, .corp-faq { padding: 60px var(--cpad); }
  .corp-proof { grid-template-columns: 1fr; gap: 18px; padding: 56px var(--cpad); }
  .corp-cta { padding: 72px var(--cpad); }
  .corp-pkg-grid, .corp-steps { margin-top: 32px; }
  .corp-pkg { padding: 30px 22px; }

  /* Add-ons read as a tighter chip cluster */
  .corp-addon-tags { margin-top: 28px; gap: 10px; }
  .corp-addon { padding: 10px 16px; font-size: 13.5px; }

  /* Form — single column, full-width submit; 16px inputs stop iOS focus-zoom */
  /* gap 0: the per-field 16px error reserve provides the row rhythm (was 16px). */
  .corp-form { margin-top: 26px; gap: 0; }
  .corp-form-row { grid-template-columns: 1fr; gap: 0; }
  .corp-form input, .corp-form select, .corp-form textarea { font-size: 16px; }
  .corp-form-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .corp-form-foot .fu-btn { width: 100%; justify-content: center; }
  .corp-fine { text-align: center; }

  /* FAQ + closing CTA — a touch tighter, stacked full-width buttons */
  .corp-faq-list { margin-top: 28px; }
  .corp-faq-row summary { padding: 20px 0; }
  .corp-cta-btns { flex-direction: column; gap: 12px; }
  .corp-cta-btns .fu-btn { width: 100%; justify-content: center; }
}

/* Narrow phones — keep the big display type from overflowing the inset */
@media (max-width: 420px) {
  .corp-hero h1 { font-size: clamp(40px, 13vw, 52px); }
  .corp h2 { font-size: clamp(32px, 10vw, 44px); }
  .corp-pkg .cp-name { font-size: 26px; }
  .corp-proof-stat .big { font-size: clamp(60px, 19vw, 84px); }
  .corp-faq-row summary { font-size: 16px; gap: 16px; }
}