/* Enroofe \2014  partner surfaces
   ---------------------------------------------------------------------------
   Every value sits on a custom property. If the Enroofe repository already
   defines these tokens, delete the :root block and nothing else changes: no
   rule below hard-codes a colour.

   The token names and values are carried from the Field Guide stylesheet in
   the handoff, so the two packs share one material system.

   The one rule the whole commercial layer rests on:
     --en-aqua     is the product's voice \2014  actions, evidence, primary CTAs
     --en-electrum is the commercial voice \2014  paid disclosure, partner context

   A partner surface may use aqua for a primary Enroofe action. It may never
   use aqua to disclose a commercial relationship, and it may never use
   electrum for anything that is not commercial. That makes the commercial
   layer visually incapable of impersonating evidence.
   --------------------------------------------------------------------------- */

:root {
  --en-abyss: #071417;
  --en-panel: #0c1d21;
  --en-panel-lit: #12272c;
  --en-hairline: #1c3a40;

  --en-polar: #F7FBFC;
  --en-ink-muted: #a9bcbe;
  --en-ink-soft: #7e9699;

  --en-aqua: #56DFEA;
  --en-aqua-lit: #83EDF4;
  --en-aqua-deep: #0e6f7e;
  --en-electrum: #d6b45a;
  --en-electrum-dim: #8a7438;

  --en-font: ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --en-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --en-step--1: 0.8125rem;
  --en-step-0: 1rem;
  --en-step-1: 1.125rem;
  --en-step-2: 1.375rem;
  --en-step-3: 1.75rem;
  --en-step-4: 2.25rem;

  --en-measure: 62ch;
  --en-gutter: 1.25rem;
  --en-radius: 10px;
  --en-radius-lg: 14px;
}

@media (min-width: 48rem) {
  :root {
    --en-step-3: 2.125rem;
    --en-step-4: 3rem;
    --en-gutter: 2rem;
  }
}

/* ------------------------------------------------------------------- base */

.en-partners {
  margin: 0;
  background: var(--en-abyss);
  color: var(--en-ink-muted);
  font-family: var(--en-font);
  font-size: var(--en-step-0);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.en-partners *,
.en-partners *::before,
.en-partners *::after { box-sizing: border-box; }

.en-wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--en-gutter);
}

.en-wrap--narrow { max-width: 42rem; }

.en-partners h1,
.en-partners h2,
.en-partners h3 {
  color: var(--en-polar);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.en-partners p { max-width: var(--en-measure); }

.en-partners a { color: var(--en-aqua); }

.en-partners :focus-visible {
  outline: 2px solid var(--en-aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- eyebrow */

.en-eyebrow {
  font-family: var(--en-mono);
  font-size: var(--en-step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--en-ink-soft);
  margin: 0 0 0.75rem;
}

.en-eyebrow--commercial { color: var(--en-electrum); }

/* ------------------------------------------------------------------- nav */

.en-nav {
  border-bottom: 1px solid var(--en-hairline);
  background: var(--en-abyss);
}

.en-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 0.75rem;
}

.en-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--en-polar);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.en-nav__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--en-radius);
  background: var(--en-panel-lit);
  border: 1px solid var(--en-hairline);
  color: var(--en-aqua);
  font-family: var(--en-mono);
  font-size: var(--en-step--1);
}

.en-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--en-step--1);
}

.en-nav__links a { color: var(--en-ink-muted); text-decoration: none; }
.en-nav__links a:hover { color: var(--en-polar); }
.en-nav__links a[aria-current="page"] { color: var(--en-aqua); }

@media (max-width: 40rem) {
  .en-nav__links { display: none; }
}

/* ------------------------------------------------------------------ hero */

.en-hero { padding-block: 3rem 2rem; }

.en-hero__title {
  font-size: var(--en-step-4);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.en-hero__title .en-hero__second {
  display: block;
  color: var(--en-aqua);
}

/* Defect 2 applies here as well as in the social artwork: the descender of
   "surfaced." must never approach the paragraph beneath it. The margin is set
   in ems so it scales with the display size rather than drifting at breakpoints. */
.en-hero__lede { margin: 1.5em 0 0; }

/* --------------------------------------------------------------- mode chip */

.en-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-family: var(--en-mono);
  font-size: var(--en-step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Commercial context \2014  electrum, never aqua. */
.en-chip--commercial {
  color: var(--en-electrum);
  border: 1px solid var(--en-electrum-dim);
  background: transparent;
}

.en-chip--preview {
  color: var(--en-electrum);
  border: 1px solid var(--en-electrum-dim);
  background: transparent;
}

/* --------------------------------------------------------------- panels */

.en-panel-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-block: 2rem;
}

@media (min-width: 52rem) {
  .en-panel-grid { grid-template-columns: 1fr 1fr; }
}

.en-panel {
  background: var(--en-panel);
  border: 1px solid var(--en-hairline);
  border-radius: var(--en-radius-lg);
  padding: 1.5rem;
}

.en-panel h3 {
  font-size: var(--en-step-1);
  margin-bottom: 1rem;
}

.en-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: var(--en-step--1);
}

.en-list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.5rem;
  align-items: start;
}

.en-list__glyph {
  color: var(--en-ink-soft);
  font-family: var(--en-mono);
  line-height: 1.6;
}

.en-panel__foot {
  color: var(--en-ink-soft);
  font-size: var(--en-step--1);
  border-top: 1px solid var(--en-hairline);
  padding-top: 1rem;
  margin: 0;
}

/* ------------------------------------------------- A. local partner card */

/* Quieter than primary content by construction: panel fill rather than raised,
   hairline border rather than a coloured one, muted body. A partner card should
   never be the brightest thing on screen. */
.en-partner-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--en-panel);
  border: 1px solid var(--en-hairline);
  border-radius: var(--en-radius-lg);
  padding: 1.15rem;
  /* Defect-adjacent: the previous preview fixed this at 168px and the body
     collided with the area row whenever the description wrapped to two lines,
     which is the common case. Height is content-driven with a floor. */
  min-height: 12.125rem;
}

.en-partner-card__disclosure {
  align-self: flex-start;
  color: var(--en-electrum);
  border: 1px solid var(--en-electrum-dim);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-family: var(--en-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

.en-partner-card__head {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.85rem;
  align-items: center;
}

.en-partner-card__tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--en-radius);
  background: var(--en-panel-lit);
  border: 1px solid var(--en-hairline);
  color: var(--en-ink-muted);
  font-family: var(--en-mono);
  font-size: var(--en-step--1);
  letter-spacing: 0.08em;
}

.en-partner-card__name {
  color: var(--en-polar);
  font-size: var(--en-step-0);
  font-weight: 700;
  margin: 0;
}

.en-partner-card__category {
  font-family: var(--en-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--en-ink-soft);
  margin: 0.2rem 0 0;
}

.en-partner-card__line {
  font-size: var(--en-step--1);
  margin: 0;
  /* Room for two lines without pushing into the footer. */
  min-height: 2.6em;
}

.en-partner-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--en-hairline);
  padding-top: 0.85rem;
  margin-top: auto;
}

.en-partner-card__area {
  font-family: var(--en-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--en-ink-soft);
}

/* The CTA is an Enroofe action, so it stays aqua. Electrum has already carried
   the commercial disclosure above. */
.en-partner-card__cta {
  color: var(--en-aqua);
  font-size: var(--en-step--1);
  text-decoration: none;
  white-space: nowrap;
}

.en-partner-card__cta:hover { color: var(--en-aqua-lit); text-decoration: underline; }

/* ------------------------------------------- B. walk-complete partner card */

.en-walk-card { position: relative; }

.en-walk-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--en-hairline);
  padding-bottom: 0.85rem;
}

.en-walk-card__label {
  font-family: var(--en-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--en-ink-soft);
}

/* ---------------------------------------------- C. organic directory listing */

/* Deliberately unalike: no tile, no CTA, no disclosure chip, dashed border.
   The difference survives greyscale and a glance, so paid status is not
   carried by colour alone. */
.en-listing {
  display: grid;
  gap: 0.35rem;
  background: transparent;
  border: 1px dashed var(--en-hairline);
  border-radius: var(--en-radius-lg);
  padding: 1.15rem 1.25rem;
}

.en-listing__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.en-listing__name {
  color: var(--en-polar);
  font-size: var(--en-step-1);
  font-weight: 700;
  margin: 0;
}

.en-listing__tag {
  font-family: var(--en-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--en-ink-soft);
}

.en-listing__category,
.en-listing__area {
  font-family: var(--en-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--en-ink-soft);
  margin: 0;
}

/* ------------------------------------------------------------------ cards */

.en-card-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .en-card-row { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* -------------------------------------------------------------- interest */

.en-interest {
  border: 1px solid var(--en-electrum-dim);
  border-radius: var(--en-radius-lg);
  background: var(--en-panel);
  padding: 1.75rem;
  display: grid;
  gap: 1.25rem;
  margin-block: 2.5rem;
}

@media (min-width: 52rem) {
  .en-interest {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
  }
}

.en-interest h2 { font-size: var(--en-step-2); }
.en-interest p { font-size: var(--en-step--1); margin: 0.75rem 0 0; }

/* -------------------------------------------------------------- buttons */

.en-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--en-radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Primary Enroofe action \2014  aqua, per the approved rule. Registering interest
   is a product action, not a purchase. */
.en-btn--primary {
  background: var(--en-aqua);
  color: #04282d;
}

.en-btn--primary:hover { background: var(--en-aqua-lit); }

.en-btn--quiet {
  background: transparent;
  border-color: var(--en-hairline);
  color: var(--en-ink-muted);
}

/* ----------------------------------------------------------------- form */

.en-form { display: grid; gap: 1.25rem; margin-block: 2rem; }

.en-field { display: grid; gap: 0.4rem; }

.en-field__label {
  font-size: var(--en-step--1);
  color: var(--en-ink-muted);
}

.en-field__optional {
  font-family: var(--en-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--en-ink-soft);
  margin-left: 0.5rem;
}

.en-field input,
.en-field select,
.en-field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--en-panel);
  border: 1px solid var(--en-hairline);
  border-radius: var(--en-radius);
  color: var(--en-polar);
  font: inherit;
  font-size: var(--en-step-0);
}

.en-field textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }

.en-field__error {
  font-size: var(--en-step--1);
  color: var(--en-caution, #e0a96d);
  margin: 0;
}

.en-field input[aria-invalid="true"],
.en-field textarea[aria-invalid="true"] { border-color: var(--en-caution, #e0a96d); }

/* Honeypot. Off-screen rather than display:none, because some automated
   clients skip hidden inputs. aria-hidden and tabindex keep it away from
   assistive technology and the keyboard path. */
.en-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------------------------------- consent \2014  DEFECT 1 */

/* The approved preview rendered this as a fixed-height card with the helper
   line positioned against the bottom edge. When the consent label wrapped to
   two lines \2014  which it does at every width below 430px \2014  the helper line
   "OPTIONAL \B7  UNTICKED BY DEFAULT" was overlapped by the second line of the
   label.
   
   The fix is structural, not typographic: the control is a two-column grid,
   the label and helper are stacked in a flow container in the second column,
   and the card has a min-height rather than a height. Nothing can collide
   because nothing is positioned. Type size is unchanged from the approved
   design. Verified at 320 / 360 / 390 / 430 px. */

.en-consent {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: 0.85rem;
  row-gap: 0;
  align-items: start;
  background: var(--en-panel);
  border: 1px solid var(--en-hairline);
  border-radius: var(--en-radius);
  padding: 1rem;
  min-height: 3.75rem;
}

.en-consent + .en-consent { margin-top: 0.85rem; }

.en-consent__box {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--en-aqua);
  /* Aligns the box with the cap-height of the first line of the label. */
  translate: 0 0.1rem;
}

.en-consent__text { display: block; }

.en-consent__label {
  display: block;
  color: var(--en-polar);
  font-size: var(--en-step--1);
  line-height: 1.5;
  margin: 0;
}

/* The helper is a sibling in normal flow with its own margin. It cannot
   overlap the label at any width, because it is never positioned and the
   parent never has a fixed height. */
.en-consent__helper {
  display: block;
  font-family: var(--en-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--en-ink-soft);
  line-height: 1.4;
  margin-top: 0.5rem;
}

.en-consent--required .en-consent__label { color: var(--en-polar); }

.en-form__note {
  font-size: var(--en-step--1);
  color: var(--en-ink-soft);
  margin: 0;
}

/* ---------------------------------------------------------------- footer */

.en-foot {
  border-top: 1px solid var(--en-hairline);
  margin-top: 3rem;
  padding-block: 1.5rem 2.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--en-step--1);
}

.en-foot__org {
  font-family: var(--en-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--en-ink-soft);
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .en-partners *,
  .en-partners *::before,
  .en-partners *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* Integrated Enroofe CSP-safe layout utilities. These replace the preview
   pack's inline style attributes; visual values are unchanged. */
.en-mode-row{margin-top:1.5rem}
.en-heading-sm{font-size:var(--en-step-1);margin-bottom:1rem}
.en-heading-md{font-size:var(--en-step-2)}
.en-heading-lg{font-size:var(--en-step-3)}
.en-section-spaced{margin-block:3rem}
.en-section-copy{margin:.75rem 0 1.5rem;font-size:var(--en-step--1)}
.en-organic-wrap{max-width:24rem}
.en-nav__brand--back{font-weight:400;letter-spacing:normal}
.en-enquiry-head{padding-block:2.5rem .5rem}
.en-enquiry-title{font-size:var(--en-step-4);letter-spacing:-.02em}
.en-enquiry-lede{margin-top:1.25rem}
.en-consent-fieldset{border:0;padding:0;margin:.75rem 0 0}
.en-consent-legend{padding:0}
.en-btn--block{width:100%}
.en-form-success{color:var(--en-aqua)}