/*
 * Oceaneros Coastal Editorial — Phase 2 visual layer
 * Scoped homepage composition plus shared header/footer refinements.
 * Loads after oe-design-system.css; no commerce behavior is changed here.
 */

:root {
  --oe-logo-blue: #0526e8;
  --oe-logo-coral: #f27777;
  --ce-paper: #f7f2e8;
  --ce-paper-deep: #eee7d9;
  --ce-foam: #fbfaf6;
  --ce-water: #2a8191;
  --ce-water-deep: #164f67;
  --ce-abyss: #0b1f33;
  --ce-coral-soft: var(--oe-logo-coral);
  --ce-editorial-rule: rgba(11, 31, 51, 0.16);
  --ce-editorial-shadow: 0 24px 70px rgba(11, 31, 51, 0.12);
}

.ce-product-card__primary { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
.ce-header__account svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ce-mobile-menu__collections { padding-block: 0.5rem 1rem; border-block: 1px solid var(--oe-border-soft); }
.ce-mobile-menu__section-label { display: block; padding: 0.75rem 0; color: var(--ce-muted); font-size: var(--ce-text-sm); font-weight: 700; }
.ce-collection-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: var(--ce-space-8); background: var(--oe-border-soft); }
.ce-collection-paths a { min-height: 4.5rem; display: flex; flex-direction: column; justify-content: center; padding: 1rem; background: var(--oe-paper); color: var(--oe-navy); text-decoration: none; }
.ce-collection-paths span { color: var(--ce-muted); font-size: var(--ce-text-sm); }

@media (max-width: 767px) {
  .ce-ocean-pause,
  .ce-mission__ghost-text { display: none; }
  .ce-collection-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shared brand chrome */
.ce-header__logo,
.ce-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.ce-header__logo-mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.ce-header__wordmark {
  font-family: var(--ce-font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: none;
}

.ce-header__logo-ocean,
.ce-footer__logo-ocean {
  color: var(--oe-logo-blue);
}

.ce-header__logo-eros,
.ce-footer__logo-eros {
  color: var(--oe-logo-coral);
}

.ce-footer {
  margin-top: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(191, 217, 210, 0.1), transparent 28%),
    var(--ce-abyss);
}

.ce-footer__logo {
  margin-bottom: var(--ce-space-4);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  text-transform: none;
}

.ce-footer .ce-footer__logo-ocean {
  color: var(--oe-surface-foam);
}

.ce-footer .ce-footer__logo-eros {
  color: var(--oe-brand-coral);
}

.ce-footer__logo-mark {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.ce-footer__inner {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.ce-footer__bottom {
  padding-block: 1.5rem;
}

.ce-announce {
  box-shadow: inset 0 -2px 0 var(--oe-logo-coral);
}

.ce-header__link:hover,
.ce-header__link:focus-visible,
.ce-header__dropdown-item:hover,
.ce-header__dropdown-item:focus-visible {
  color: var(--ce-navy);
  opacity: 1;
  box-shadow: inset 0 -2px 0 var(--oe-logo-coral);
}

.ce-footer__heading {
  color: var(--oe-eyebrow-navy);
}

.ce-footer__link:hover,
.ce-footer__link:focus-visible {
  color: var(--oe-eyebrow-navy);
}

/* Homepage canvas */
.ce-homepage {
  position: relative;
  overflow: clip;
  background: var(--ce-paper);
}

.ce-homepage .ce-section {
  position: relative;
  padding-block: clamp(5rem, 9vw, 8.5rem);
}

.ce-homepage .ce-h2 {
  max-width: 17ch;
  font-size: clamp(2.65rem, 5vw, 4.75rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.ce-homepage .ce-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}

.ce-homepage .ce-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.ce-section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.ce-section-deck {
  max-width: 35ch;
  color: var(--ce-muted);
  font-size: var(--ce-text-base);
  line-height: 1.7;
}

.ce-homepage .ce-link-arrow {
  border-bottom-color: var(--oe-logo-coral);
}

.ce-homepage .ce-link-arrow:hover,
.ce-homepage .ce-link-arrow:focus-visible {
  color: var(--ce-navy);
  border-bottom-color: var(--oe-logo-coral);
}

.ce-homepage a:focus-visible,
.ce-homepage button:focus-visible,
.ce-policy-links a:focus-visible {
  outline: 3px solid var(--oe-blue);
  outline-offset: 4px;
}

/* First screen */
.ce-hero {
  min-height: clamp(610px, 72vh, 780px);
  background: var(--ce-paper);
  isolation: isolate;
}

.ce-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -6vw;
  bottom: -44px;
  width: 58vw;
  height: 92px;
  border-radius: 50% 0 0 0 / 100% 0 0 0;
  background: var(--ce-paper-deep);
  pointer-events: none;
}

.ce-hero__background {
  object-position: 63% center;
  filter: saturate(0.9) contrast(0.98);
}

.ce-hero__overlay {
  background:
    linear-gradient(90deg, rgba(247, 244, 236, 0.99) 0%, rgba(247, 244, 236, 0.94) 30%, rgba(247, 244, 236, 0.54) 51%, rgba(247, 244, 236, 0.02) 74%),
    linear-gradient(0deg, rgba(11, 34, 56, 0.06), transparent 48%);
}

.ce-hero__content {
  width: min(710px, 61vw);
  padding-left: clamp(0rem, 2vw, 1.75rem);
  transform: translateY(12px);
}

.ce-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.6rem;
  color: var(--ce-water-deep);
}

.ce-hero__eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--ce-coral-soft);
}

.ce-hero__h1 {
  max-width: 10.5ch;
  margin-bottom: 1.65rem;
  font-size: clamp(3.7rem, 6.4vw, 6.65rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.052em;
}

.ce-hero__sub {
  max-width: 48ch;
  margin-bottom: 2.1rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
}

.ce-hero .ce-btn {
  min-height: 56px;
  padding-inline: 1.75rem;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.ce-hero .ce-btn:hover {
  transform: translateY(-2px);
}

/* Compact evidence/value band */
.ce-trust-row {
  position: relative;
  z-index: 3;
  background: var(--ce-paper-deep);
  border: 0;
}

.ce-trust-row__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-block: 2.25rem;
}

.ce-trust-row__item {
  align-items: flex-start;
  min-height: 66px;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  border-right: 1px solid var(--ce-editorial-rule);
}

.ce-trust-row__item:first-child { padding-left: 0; }
.ce-trust-row__item:last-child { padding-right: 0; border-right: 0; }
.ce-trust-row__icon { width: 22px; height: 22px; margin-top: 0.2rem; stroke: var(--ce-coral-soft); }
.ce-trust-row__label { font-size: 0.78rem; line-height: 1.55; }
.ce-trust-row__label strong { margin-bottom: 0.25rem; font-family: var(--ce-font-display); font-size: 1.15rem; font-weight: 600; }

/* Collection feature — asymmetric magazine grid */
.ce-collections {
  background:
    radial-gradient(circle at 92% 16%, rgba(191, 217, 210, 0.3), transparent 26%),
    var(--ce-paper);
}

.ce-collections .ce-grid-4 {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: clamp(1rem, 2.1vw, 1.75rem);
}

.ce-collections .ce-collection-card { grid-column: span 2; }
.ce-collections .ce-collection-card:first-child { grid-column: span 6; }
.ce-collections .ce-collection-card:first-child .ce-collection-card__image { aspect-ratio: 1.32 / 1; }
.ce-collections .ce-collection-card:nth-child(n + 2) .ce-collection-card__image { aspect-ratio: 0.74 / 1; }

.ce-collection-card {
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.ce-collection-card:hover { box-shadow: none; }

.ce-collection-card__image {
  border-radius: 0.25rem 2.75rem 0.25rem 0.25rem;
  background:
    linear-gradient(145deg, rgba(31, 90, 166, 0.12), rgba(191, 217, 210, 0.48)),
    var(--ce-paper-deep);
  box-shadow: var(--ce-editorial-shadow);
}

.ce-collection-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 34, 56, 0.48));
  pointer-events: none;
}

.ce-collection-card__num,
.ce-collection-card__cta { z-index: 1; }

.ce-collection-card__num {
  top: 1rem;
  left: 1rem;
  min-width: 2rem;
  padding: 0.2rem 0.45rem;
  background: var(--oe-logo-coral);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--ce-abyss);
}

.ce-collection-card__cta {
  opacity: 1;
  transform: none;
}

.ce-collection-card__body {
  padding: 1.2rem 0.2rem 0;
  border-top: 0;
}

.ce-collection-card__name {
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  line-height: 1;
}

/* Product rhythm */
.ce-products-featured { background: var(--ce-foam); }
.ce-products-new { background: var(--ce-paper-deep); }

.ce-product-card__image {
  border-radius: 0.2rem;
  background: #ebe6da;
}

.ce-product-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(16, 42, 67, 0.08);
  pointer-events: none;
}

.ce-product-card__image img { object-fit: cover; }
.ce-product-card__quick-add { z-index: 2; min-height: 44px; display: grid; place-items: center; }
.ce-product-card__badge { z-index: 2; border-radius: 0; color: var(--ce-abyss); background: var(--oe-logo-coral); }
.ce-product-card__badge--unavailable { color: var(--ce-foam); background: var(--ce-water-deep); }
.ce-product-card__body { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.ce-product-card__name { min-width: 0; font-family: var(--ce-font-display); font-size: 1.25rem; line-height: 1.15; overflow-wrap: anywhere; }
.ce-product-card__price { min-width: 0; color: var(--ce-abyss); overflow-wrap: anywhere; }

.ce-product-grid--editorial .ce-product-card:nth-child(2) { transform: translateY(2.5rem); }
.ce-product-grid--editorial { padding-bottom: 2.5rem; }

/* Brand thesis */
.ce-quote-strip {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--ce-seaglass);
}

.ce-quote-strip::before,
.ce-quote-strip::after {
  content: "";
  position: absolute;
  width: 34vw;
  height: 34vw;
  border: 1px solid rgba(16, 42, 67, 0.16);
  border-radius: 50%;
}

.ce-quote-strip::before { left: -18vw; top: -27vw; }
.ce-quote-strip::after { right: -20vw; bottom: -27vw; }
.ce-quote-strip__quote { position: relative; z-index: 1; max-width: 29ch; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.08; }
.ce-quote-strip__attribution { position: relative; z-index: 1; color: var(--ce-abyss); opacity: 1; }
.ce-quote-strip__attribution::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; margin-right: 0.65rem; vertical-align: middle; background: var(--oe-logo-coral); }

/* Story split */
.ce-mission__grid { gap: clamp(3rem, 8vw, 8rem); }
.ce-mission__visual {
  aspect-ratio: 1 / 1;
  overflow: visible;
  background: transparent;
}
.ce-mission__visual::before {
  content: "";
  position: absolute;
  inset: 8% -6% -7% 9%;
  z-index: -1;
  border-radius: 46% 54% 35% 65% / 60% 39% 61% 40%;
  background: var(--ce-paper-deep);
}
.ce-mission__visual img { object-fit: contain; filter: drop-shadow(0 28px 30px rgba(11, 34, 56, 0.16)); }
.ce-mission__ghost-text { right: -1rem; bottom: -1.25rem; color: rgba(16, 42, 67, 0.12); font-size: clamp(4rem, 9vw, 8rem); }
.ce-mission__mark { padding-block: 0.25rem; padding-left: 2rem; font-size: 0.92rem; }
.ce-mission__mark::before { width: 1.1rem; background: var(--ce-coral-soft); }

/* Two narrative discovery paths */
.ce-discovery {
  padding-block: clamp(5rem, 9vw, 8rem);
  color: var(--ce-foam);
  background: var(--ce-abyss);
}
.ce-discovery .ce-h2 { color: var(--ce-foam); }
.ce-discovery .ce-eyebrow { color: var(--ce-seaglass); }
.ce-discovery .ce-section-deck { color: rgba(247, 244, 236, 0.68); }
.ce-discovery__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 1.25rem; }
.ce-discovery-card { position: relative; min-height: 540px; overflow: hidden; background: var(--ce-water-deep); isolation: isolate; }
.ce-discovery-card--life { border-radius: 0 0 6rem 0; }
.ce-discovery-card--coast { border-radius: 6rem 0 0 0; }
.ce-discovery-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ce-ease-out); }
.ce-discovery-card--life img { object-fit: contain; padding: 3rem; background: linear-gradient(145deg, #0d3044, #176477); }
.ce-discovery-card--coast img { object-position: center; }
.ce-discovery-card__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 24, 40, 0.88) 0%, rgba(6, 24, 40, 0.05) 62%); }
.ce-discovery-card__content { position: absolute; z-index: 2; inset-inline: clamp(1.5rem, 4vw, 3.5rem); bottom: clamp(1.75rem, 4vw, 3.5rem); display: grid; gap: 0.65rem; color: var(--ce-foam); }
.ce-discovery-card__kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ce-seaglass); }
.ce-discovery-card--coast .ce-discovery-card__kicker { color: var(--oe-logo-coral); }
.ce-discovery-card__content strong { max-width: 13ch; font-family: var(--ce-font-display); font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 500; line-height: 0.98; }
.ce-discovery-card__link { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ce-discovery-card:hover img { transform: scale(1.025); }

/* Verified aggregate contribution records */
.ce-impact-teaser {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 11vw, 10rem);
  background:
    radial-gradient(circle at 18% 25%, rgba(42, 129, 145, 0.28), transparent 28%),
    radial-gradient(circle at 82% 76%, rgba(217, 120, 97, 0.12), transparent 24%),
    var(--ce-abyss);
}
.ce-impact-teaser::after { content: ""; position: absolute; inset: auto -10% -65% 35%; height: 88%; border: 1px solid rgba(191, 217, 210, 0.12); border-radius: 50%; pointer-events: none; }
.ce-impact-teaser__intro { max-width: 790px; }
.ce-impact-teaser__intro .ce-h2 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.7rem, 5.2vw, 5rem); }
.ce-impact-teaser__sub { max-width: 58ch; margin-inline: auto; }
.ce-impact-teaser__records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto 1.4rem; border-block: 1px solid rgba(247, 244, 236, 0.18); }
.ce-impact-teaser__records[hidden] { display: none; }
.ce-impact-record { display: grid; gap: 0.5rem; padding: 2.4rem; text-align: center; }
.ce-impact-record + .ce-impact-record { border-left: 1px solid rgba(247, 244, 236, 0.18); }
.ce-impact-record__value { font-family: var(--ce-font-display); font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.9; color: var(--ce-foam); }
.ce-impact-record__label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247, 244, 236, 0.62); }
.ce-impact-teaser__method { max-width: 66ch; margin: 0 auto 2.25rem; text-align: center; font-size: 0.78rem; line-height: 1.65; color: rgba(247, 244, 236, 0.58); }

/* Journal */
.ce-journal { background: var(--ce-foam); }
.ce-journal-card { border-top: 1px solid var(--ce-editorial-rule); }
.ce-journal-card__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-top: 1rem; background: var(--ce-paper-deep); }
.ce-journal-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ce-ease-out); }
.ce-journal-card:hover .ce-journal-card__image img { transform: scale(1.025); }
.ce-journal-card__body { padding-top: 1.35rem; }
.ce-journal-card__date { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.75rem; color: var(--ce-water-deep); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.ce-journal-card__date::before { content: ""; width: 1rem; height: 2px; background: var(--oe-logo-coral); }
.ce-journal-card__title { margin-bottom: 0.8rem; font-size: clamp(1.65rem, 2.5vw, 2.3rem); line-height: 1.05; }
.ce-journal-card__excerpt { margin-bottom: 1rem; color: var(--ce-muted); font-size: 0.9rem; line-height: 1.7; }
.ce-journal-card__link { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ce-abyss); }

/* Newsletter */
.ce-newsletter {
  overflow: hidden;
  background: var(--ce-paper-deep);
}
.ce-newsletter__inner {
  position: relative;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.7fr) minmax(260px, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.ce-newsletter__visual { min-height: 310px; overflow: hidden; border-radius: 5rem 0 0 0; }
.ce-newsletter__visual img { width: 100%; height: 100%; object-fit: cover; }
.ce-newsletter .sib-form,
.ce-newsletter form { max-width: 100%; }
.ce-newsletter input[type="email"] { min-height: 52px; border: 1px solid var(--ce-editorial-rule); background: var(--ce-foam); }

/* Policy paths — links, never promises */
.ce-policy-links { background: var(--ce-water-deep); color: var(--ce-foam); }
.ce-policy-links__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.ce-policy-links a { display: grid; gap: 0.35rem; min-height: 142px; padding: 2.25rem clamp(1.25rem, 3vw, 2.75rem); border-right: 1px solid rgba(247, 244, 236, 0.18); align-content: center; transition: background-color 180ms ease; }
.ce-policy-links a:first-child { border-left: 1px solid rgba(247, 244, 236, 0.18); }
.ce-policy-links a:hover { background: rgba(247, 244, 236, 0.08); }
.ce-policy-links a > span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--oe-logo-coral); }
.ce-policy-links strong { font-family: var(--ce-font-display); font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 500; }

/* Tablet */
@media (max-width: 1023px) {
  .ce-header__logo-mark { width: 34px; height: 34px; }
  .ce-hero { min-height: 680px; }
  .ce-hero__background { object-position: 69% center; }
  .ce-hero__content { width: min(590px, 70vw); padding-left: 0; }
  .ce-trust-row__inner { grid-template-columns: 1fr; padding-block: 0.75rem; }
  .ce-trust-row__item { min-height: 0; padding: 1.15rem 0; border-right: 0; border-bottom: 1px solid var(--ce-editorial-rule); }
  .ce-trust-row__item:last-child { border-bottom: 0; }
  .ce-collections .ce-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-collections .ce-collection-card,
  .ce-collections .ce-collection-card:first-child { grid-column: auto; }
  .ce-collections .ce-collection-card:first-child .ce-collection-card__image,
  .ce-collections .ce-collection-card:nth-child(n + 2) .ce-collection-card__image { aspect-ratio: 4 / 5; }
  .ce-discovery__grid { grid-template-columns: 1fr 1fr; }
  .ce-discovery-card { min-height: 450px; }
  .ce-newsletter__inner { grid-template-columns: 1fr 1fr; }
  .ce-newsletter__visual { grid-column: 1 / -1; min-height: 260px; border-radius: 0 4rem 0 0; }
}

/* Mobile */
@media (max-width: 767px) {
  .ce-homepage .ce-section { padding-block: 4.75rem; }
  .ce-homepage .ce-h2 { font-size: clamp(2.55rem, 12vw, 3.5rem); }
  .ce-section-header--split { align-items: flex-start; }
  .ce-header__logo-mark { width: 31px; height: 31px; }
  .ce-header__wordmark { font-size: 1.25rem; }
  .ce-hero { min-height: 720px; }
  .ce-hero::after { right: -20vw; width: 105vw; height: 62px; bottom: -30px; }
  .ce-hero__background { object-position: 72% center; }
  .ce-hero__overlay { background: linear-gradient(90deg, rgba(247, 244, 236, 0.99) 0%, rgba(247, 244, 236, 0.91) 62%, rgba(247, 244, 236, 0.28) 100%); }
  .ce-hero__inner { align-items: flex-end; padding-bottom: 4.4rem; }
  .ce-hero__content { width: 100%; transform: none; }
  .ce-hero__h1 { max-width: 7.6ch; font-size: clamp(3.35rem, 16vw, 4.6rem); }
  .ce-hero__sub { max-width: 29ch; }
  .ce-hero__actions { width: min(100%, 330px); }
  .ce-hero .ce-btn { width: 100%; }
  .ce-collections .ce-grid-4 { grid-template-columns: 1fr; }
  .ce-collections .ce-collection-card:first-child .ce-collection-card__image,
  .ce-collections .ce-collection-card:nth-child(n + 2) .ce-collection-card__image { aspect-ratio: 4 / 4.5; }
  .ce-product-card__quick-add { position: static; opacity: 1; transform: none; border: 1px solid var(--ce-editorial-rule); }
  .ce-product-card__body { display: block; }
  .ce-product-card__name { margin-bottom: 0.35rem; }
  .ce-product-grid--editorial .ce-product-card:nth-child(2) { transform: none; }
  .ce-product-grid--editorial { padding-bottom: 0; }
  .ce-mission__grid { gap: 3.5rem; }
  .ce-mission__ghost-text { right: 0; }
  .ce-discovery__grid { grid-template-columns: 1fr; }
  .ce-discovery-card { min-height: 440px; }
  .ce-discovery-card--life,
  .ce-discovery-card--coast { border-radius: 0 0 3.5rem 0; }
  .ce-impact-teaser__records { grid-template-columns: 1fr; }
  .ce-impact-record { padding: 2rem 1rem; }
  .ce-impact-record + .ce-impact-record { border-left: 0; border-top: 1px solid rgba(247, 244, 236, 0.18); }
  .ce-newsletter__inner { grid-template-columns: 1fr; }
  .ce-newsletter__visual { grid-column: auto; min-height: 220px; border-radius: 0 3.5rem 0 0; }
  .ce-policy-links__inner { grid-template-columns: 1fr; }
  .ce-policy-links a,
  .ce-policy-links a:first-child { min-height: 112px; border-left: 0; border-right: 0; border-bottom: 1px solid rgba(247, 244, 236, 0.18); }
  .ce-footer__inner { gap: 2.75rem; }
}

@media (max-width: 420px) {
  .ce-header__logo-mark { width: 28px; height: 28px; }
  .ce-header__wordmark { font-size: 1.08rem; }
  .ce-header__utils { gap: 0.65rem; }
  .ce-header__bag-count { min-width: 19px; height: 19px; }
  .ce-hero__h1 { font-size: clamp(3rem, 16vw, 4rem); }
  .ce-discovery-card--life img { padding: 1.5rem; }
}

@media (max-width: 340px) {
  .ce-header__utils { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ce-homepage *,
  .ce-homepage *::before,
  .ce-homepage *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ce-motion-ready .ce-reveal {
    opacity: 1;
    transform: none;
  }
}

/* Phase 2 shell invariants live at the end of the later stylesheet so legacy
   page composition cannot reduce global target sizes or skip-link visibility. */
.skip-link {
  position: fixed;
  z-index: calc(var(--oe-layer-modal) + 10);
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 1rem;
  border: 2px solid var(--oe-navy);
  background: var(--oe-surface-foam);
  color: var(--oe-navy);
  transform: translateY(-180%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

.ce-header__logo,
.ce-footer__logo,
.ce-header__link {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 340px) {
  .ce-header__util-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ============================================================
   AMBIENT OCEAN SCENE (decorative)
   Stacks into the same grid cell as the photograph, veil and copy.
   Stays at opacity 0 until ocean-scene.js has actually drawn a frame
   and adds .is-scene-ready, so a failed or skipped boot simply leaves
   the photograph showing rather than an empty box.
   ============================================================ */
.ce-ocean-pause > .ce-ocean-pause__scene {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(var(--ce-duration-slow) * 2) var(--ce-ease-out);
}

.ce-ocean-pause.is-scene-ready > .ce-ocean-pause__scene { opacity: 1; }

/* Not worth the battery on phones, and the composition already works
   without it. The script applies the same breakpoint before booting. */
@media (max-width: 767px) {
  .ce-ocean-pause > .ce-ocean-pause__scene { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ce-ocean-pause > .ce-ocean-pause__scene { display: none; }
}


/* ============================================================
   REVEAL CHOREOGRAPHY
   Sequencing only. The .ce-reveal / .is-visible IntersectionObserver in
   page-homepage.php is unchanged, as is its reduced-motion behaviour.
   Everything below touches only opacity, transform and transition-delay,
   so nothing here can trigger layout.
   ============================================================ */

/* --- Section weight -------------------------------------------------
   Derived from the existing duration tokens rather than new values.
   Full-bleed editorial moments get room; dense grids stay brisk. */
.ce-motion-ready .ce-ocean-pause__content,
.ce-motion-ready .ce-mission__visual,
.ce-motion-ready .ce-brand-story .ce-reveal {
  transition-duration: calc(var(--ce-duration-slow) * 1.5);
}

.ce-motion-ready .ce-grid > .ce-reveal {
  transition-duration: var(--ce-duration-mid);
}

/* --- Hero: lead the eye down the stack ------------------------------
   The wrapper carries the fade only; its children carry the movement,
   so the eyebrow, headline, subhead and actions arrive in order instead
   of as one block. Steps are kept to 80ms because the h1 is the LCP
   element and every millisecond of delay here is measurable. */
.ce-motion-ready .ce-hero__content { transform: none; }

.ce-motion-ready .ce-hero__content > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--ce-duration-slow) var(--ce-ease-out),
              transform var(--ce-duration-slow) var(--ce-ease-out);
}

.ce-motion-ready .ce-hero__content.is-visible > * {
  opacity: 1;
  transform: none;
}

.ce-motion-ready .ce-hero__content.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.ce-motion-ready .ce-hero__content.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.ce-motion-ready .ce-hero__content.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.ce-motion-ready .ce-hero__content.is-visible > *:nth-child(4) { transition-delay: 240ms; }

/* --- Grids: card after card, not all at once ------------------------
   Covers the featured and new product grids, the collections grid and
   the journal grid, all of which are .ce-grid wrappers of .ce-reveal
   cards. 70ms reads as a run rather than a queue. */
.ce-motion-ready .ce-grid > .ce-reveal:nth-child(1) { transition-delay: 0ms; }
.ce-motion-ready .ce-grid > .ce-reveal:nth-child(2) { transition-delay: 70ms; }
.ce-motion-ready .ce-grid > .ce-reveal:nth-child(3) { transition-delay: 140ms; }
.ce-motion-ready .ce-grid > .ce-reveal:nth-child(4) { transition-delay: 210ms; }
.ce-motion-ready .ce-grid > .ce-reveal:nth-child(5) { transition-delay: 280ms; }
.ce-motion-ready .ce-grid > .ce-reveal:nth-child(6) { transition-delay: 350ms; }
.ce-motion-ready .ce-grid > .ce-reveal:nth-child(7) { transition-delay: 420ms; }
.ce-motion-ready .ce-grid > .ce-reveal:nth-child(n+8) { transition-delay: 490ms; }

/* --- Reduced motion: collapse all of the above -----------------------
   Explicitly zeroes transition-delay as well as opacity/transform, so no
   staggering rule can outlive the guard. */
@media (prefers-reduced-motion: reduce) {
  .ce-motion-ready .ce-reveal,
  .ce-motion-ready .ce-hero__content > *,
  .ce-motion-ready .ce-hero__content.is-visible > *,
  .ce-motion-ready .ce-grid > .ce-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}