/* =========================================================================
   Yes And Communication Lab: layout and typographic scale
   =========================================================================
   Direction Two, "Bold". Oversized display type and full-bleed blocks of
   berry and black alternating with white, so the page arrives in movements
   rather than scrolling past as one sheet.

   Secondary text on the dark blocks is white at reduced opacity, never a
   new colour. Berry on black is 2.7:1 and fails contrast, so berry never
   appears on a black ground: not as text, not as a focus ring.

   Each section's rules are grouped under its own heading, so a section can
   move to its own page later and take its block with it.
   ========================================================================= */

body { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem); }

.wrap { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }
.wrap--wide { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }

section { padding-block: clamp(4rem, 11vw, 8.5rem); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; }
h1 { letter-spacing: -0.005em; }
h2 { font-size: clamp(2.1rem, 5.5vw, 4rem); line-height: 0.94; }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

.eyebrow {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--muted); max-width: 46ch; }


/* --- Full-bleed grounds --------------------------------------------------
   Berry, white, black, white, wash, black. Every block is a brand colour at
   full strength, or the approved wash. */

.s-hero, .s-guide, .s-contact { color: var(--white); }
.s-hero { background: var(--berry); }
.s-guide, .s-contact { background: var(--black); }
.s-plan { background: var(--wash); }

:is(.s-hero, .s-guide, .s-contact) p { color: rgba(255, 255, 255, 0.82); }
:is(.s-hero, .s-guide, .s-contact) .eyebrow { color: var(--white); }

/* The berry focus ring from base.css vanishes on berry and fails on black. */
:is(.s-hero, .s-guide, .s-contact) :where(a, button, input, textarea):focus-visible {
  outline-color: var(--white);
}


/* --- Header -------------------------------------------------------------- */

/* The header stays white so the supplied Primary lockup (berry + black)
   always sits on the ground it was drawn for. */
.site-header { padding-block: 1.25rem; background: var(--white); }
.site-header .wrap--wide { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.brand { display: block; flex: none; line-height: 0; }
.brand img { width: clamp(5.25rem, 7.5vw, 7rem); }

.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; list-style: none; }
.site-nav a {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--berry); }

/* Below this width the nav no longer fits beside the logo. Without this it
   keeps its max-content width and `margin-left: auto` pushes it out of the
   container. A full-width line lets the items wrap inside it instead. */
@media (max-width: 44em) {
  .site-nav { margin-left: 0; width: 100%; }
}


/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--berry);
  color: var(--white);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.09em;
  padding: 0.6rem 1.9rem;
  border: 3px solid var(--berry);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.btn:hover { background: var(--white); color: var(--berry); }
.btn--lg { font-size: clamp(1.35rem, 2.4vw, 1.8rem); padding: 0.7rem 2.6rem; }
.btn:disabled { cursor: progress; opacity: 0.7; }

/* On a berry or black ground a berry button would vanish, so it inverts. */
:is(.s-hero, .s-contact) .btn {
  background: var(--white);
  color: var(--berry);
  border-color: var(--white);
}
:is(.s-hero, .s-contact) .btn:hover:not(:disabled) {
  background: transparent;
  color: var(--white);
}


/* --- Hero ---------------------------------------------------------------- */

.s-hero { padding-block: clamp(4.5rem, 15vw, 11rem); }
.s-hero h1 {
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 0.88;
  margin-block: 1.2rem 1.5rem;
  animation: rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.s-hero .lede { max-width: 40rem; }
.s-hero .hero-promise {
  margin-top: 1.4rem;
  max-width: 40rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--white);
}
.s-hero .btn { margin-top: 2.6rem; }


/* --- Shared section head ------------------------------------------------- */

.section-head { margin-bottom: 3rem; max-width: 42rem; }
.section-head p { margin-top: 1.2rem; max-width: 46ch; }


/* --- Problem ------------------------------------------------------------- */

.stack { list-style: none; display: grid; gap: 2.5rem; }
@media (min-width: 52em) { .stack { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.stack > li {
  display: grid; gap: 0.7rem; align-content: start;
  border-top: 4px solid var(--berry); padding-top: 1.2rem;
}


/* --- Plan ---------------------------------------------------------------- */

/* The step number is the loudest thing in the section, not a label. */
.steps { list-style: none; counter-reset: step; display: grid; gap: 2.5rem; }
@media (min-width: 52em) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps > li { counter-increment: step; display: grid; gap: 0.5rem; align-content: start; }
.steps > li::before {
  content: counter(step);
  font-family: var(--display);
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: 0.8;
  color: var(--berry);
}


/* --- Contact ------------------------------------------------------------- */

.contact-grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 56em) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.contact-intro h2 { margin-block: 1.2rem 1.4rem; font-size: clamp(2.2rem, 6vw, 3.6rem); }
.contact-intro p + p { margin-top: 0.4rem; }
.contact-direct { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 1.4rem; }
.s-contact .contact-direct { color: var(--white); }
.contact-intro a { color: var(--white); text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact-phone { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: 0.04em; text-decoration: none; }

.contact-form { display: grid; gap: 1.25rem; }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 30em) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; }

.contact-form label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact-form .optional { font-weight: 400; letter-spacing: 0.04em; text-transform: none; opacity: 0.82; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--black);
  background: var(--white);
  border: 3px solid var(--white);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }

/* No new colour for errors: a berry bar inside the white field (berry on
   white passes; berry on the black ground would not) plus a written message,
   so the state never rests on colour alone. */
.contact-form [aria-invalid="true"] { box-shadow: inset 0 -0.4rem 0 var(--berry); }
.s-contact .field-error { color: var(--white); font-weight: 700; font-size: 0.92rem; }
.field-error::before { content: "! "; }

.s-contact .form-status { color: var(--white); font-weight: 700; }
.form-status:empty { display: none; }
.contact-form .btn { justify-self: start; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-thanks { display: grid; gap: 0.8rem; }
/* Focused by script so screen readers announce it; it is not a control,
   so it needs no ring (and a berry ring here would sit on black). */
.form-thanks:focus { outline: none; }
.form-thanks h3 { font-size: clamp(2rem, 4vw, 2.8rem); }


/* --- Footer -------------------------------------------------------------- */

.site-footer { background: var(--white); padding-block: 3rem; color: var(--muted); font-size: 0.9rem; }
.site-footer .wrap--wide { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; }
.site-footer img { width: 4.75rem; }
.footer-contact { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.footer-contact a { color: var(--black); text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer-contact a:hover { color: var(--berry); }
.footer-base { margin-left: auto; }
@media (max-width: 44em) { .footer-base { margin-left: 0; width: 100%; } }