/* Brand sub-site. Layout is fixed; colour comes from --b-* set per brand. */
body.brand { background: var(--b-ground); color: var(--b-ink); }

/* 1. Cover ---------------------------------------------------------------- */
.cover {
  position: relative;
  min-height: calc(var(--vh) * 100);
  overflow: hidden;
  background-color: var(--b-paper);
  color: var(--b-text);
  isolation: isolate;
}
.cover--marble { background-image: url("../assets/textures/marble.svg"); background-size: cover; background-position: center; }
.cover--photo { background-image: var(--tex-s); }
@media (min-width: 700px) { .cover--photo { background-image: var(--tex); } }

.cover__back {
  position: absolute;
  z-index: 2;
  top: clamp(1.25rem, 3vw, 2.5rem);
  left: var(--gutter);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.5rem;
}
.cover__back:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* Oversized mark, cropped off the bottom-left edge as on the printed cover. */
.cover__mark {
  position: absolute;
  z-index: -1;
  /* Sized by width on phones, capped by height on tablets so it never
     reaches the wordmark. Offsets scale with the mark. */
  --mw: min(130vw, calc(var(--vh) * 66));
  width: var(--mw);
  max-width: none;
  left: calc(var(--mw) * -0.29);
  bottom: calc(var(--mw) * -0.17);
}
.cover__mark img { width: 100%; height: auto; }
.cover__mark--empty {
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(1.5rem, 5vw, 4.5rem) solid var(--b-text);
  display: grid;
  place-items: center;
}
.cover__mark--empty > span { font-size: var(--step-0); font-weight: 700; transform: translate(12vw, -12vw); }

/* Stacked wordmark, upper right: heavy, then thin and wide. */
.wm {
  position: absolute;
  top: calc(var(--vh) * 22);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 0.9;
  font-size: clamp(3.75rem, 1.5rem + 9vw, 11rem);
}
.wm__heavy { font-weight: 900; letter-spacing: -0.01em; }
.wm__thin { font-weight: 300; letter-spacing: 0.24em; margin-right: -0.24em; font-size: 0.81em; margin-top: 0.08em; }

@media (min-width: 1024px) {
  .cover__mark { width: min(84vw, calc(var(--vh) * 124)); left: max(-24vw, calc(var(--vh) * -36)); bottom: max(-22vw, calc(var(--vh) * -32)); }
  .wm { top: auto; bottom: calc(var(--vh) * 48); right: calc(var(--gutter) + 2vw); }
}

/* 2. Manifesto ------------------------------------------------------------ */
.manifesto { background: var(--b-ground); color: var(--b-ink); padding-block: clamp(5rem, 12vw, 11rem); }
.manifesto__inner { display: grid; gap: clamp(3rem, 8vw, 6rem); }
.manifesto__badge { width: min(68vw, 300px); margin-inline: auto; color: var(--b-ink); }
.badge__arc { font-family: var(--font); font-size: 25px; font-weight: 700; letter-spacing: 0.2em; fill: currentColor; }
.badge__center { font-family: var(--font); font-size: 60px; font-weight: 900; letter-spacing: 0.04em; fill: currentColor; }
.manifesto__h { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.6em; }
.manifesto__text p { max-width: 36em; color: var(--b-muted); line-height: 1.65; }
.manifesto__text p + p { margin-top: 1.1em; }

@media (min-width: 1024px) {
  .manifesto__inner { grid-template-columns: 5fr 7fr; align-items: center; }
  .manifesto__badge { width: min(100%, 440px); }
  .manifesto__text p { font-size: clamp(1.125rem, 0.95rem + 0.35vw, 1.375rem); }
}

/* 3. Environment: full-bleed image with a light text panel ------------------ */
.env { background: var(--b-paper); color: var(--b-text); padding-bottom: clamp(4rem, 9vw, 8rem); }
.env__image { width: 100%; max-height: calc(var(--vh) * 92); }
.env__lower { position: relative; }
.env__panel {
  position: relative;
  background: var(--b-paper);
  padding-top: 2.5rem;
}
.env__panel h2 { margin-bottom: 0.9rem; }
.env__panel p { max-width: 34em; }
.env__second { margin-top: clamp(3rem, 7vw, 6rem); }
@media (min-width: 1024px) {
  .env__lower { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .env__panel { grid-column: 1 / span 6; margin: -12rem 0 0 calc(var(--gutter) * -1); padding: 3.5rem 3.5rem 0 var(--gutter); }
  .env__panel p { font-size: var(--step-1); line-height: 1.55; }
  .env__second { grid-column: 8 / -1; margin-top: 5rem; }
}

/* 4. Core components and highlights: mirrored pair -------------------------- */
.comps { background: var(--b-paper); color: var(--b-text); padding-bottom: clamp(5rem, 10vw, 9rem); }
.comps__inner { display: grid; gap: clamp(4rem, 9vw, 6rem); }
.comp { display: flex; flex-direction: column; gap: 2rem; }
.comp .h-rule { margin-bottom: 1.5rem; }
@media (min-width: 1024px) {
  .comps__inner { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 5vw, 6rem); align-items: start; }
  .comp { gap: 3rem; }
  .comp--image-first { flex-direction: column-reverse; margin-top: 10rem; }
}

/* 5. Extensions: alternating modules with a category badge -------------------- */
.exts { background: var(--b-paper); color: var(--b-text); padding-block: clamp(4rem, 8vw, 7rem) clamp(5rem, 10vw, 9rem); border-top: var(--hair) solid rgba(0,0,0,0.15); }
.exts__h { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.ext { display: grid; gap: 2rem; }
.ext + .ext { margin-top: clamp(4rem, 9vw, 8rem); }
.ext__media { position: relative; }
.ext__badge {
  position: absolute;
  left: 1rem;
  bottom: -2.5rem;
  width: clamp(7.5rem, 22vw, 10rem);
  color: var(--b-text);
  --badge-fill: var(--b-paper);
}
.ext__badge .badge__arc { font-size: 34px; letter-spacing: 0.16em; }
.ext__text { padding-top: 2.5rem; }
.ext__text .caps { margin-bottom: 1rem; }
.ext__text p { max-width: 34em; margin-bottom: 1.5rem; }
.ext__partners { list-style: none; padding: 0; margin-top: 1.5rem; display: flex; gap: 2rem; flex-wrap: wrap; }
@media (min-width: 1024px) {
  .ext { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
  .ext__media { grid-column: 1 / span 7; }
  .ext__text { grid-column: 9 / -1; padding-top: 0; }
  .ext--image-right .ext__media { grid-column: 6 / -1; grid-row: 1; }
  .ext--image-right .ext__text { grid-column: 1 / span 4; grid-row: 1; }
  .ext--image-right .ext__badge { left: auto; right: 1.5rem; }
  .ext__badge { left: 1.5rem; bottom: 1.5rem; }
}

/* 6. Close: framed wordmark, tagline breaking the frame, contact ------------- */
.close { background: var(--b-ground); color: var(--b-ink); padding-top: clamp(6rem, 14vw, 12rem); }
.close__inner { display: grid; justify-items: center; text-align: center; gap: 3rem; }
.close__frame { position: relative; width: min(100%, 38rem); color: var(--b-ink); }
.close__framed { width: 100%; height: auto; filter: invert(1); }
.close__frame:not(.close__frame--art) { border: clamp(6px, 1.2vw, 12px) solid currentColor; padding: 2.2em 1.5em; }
.close__typeset { font-size: var(--step-3); font-weight: 900; letter-spacing: 0.06em; line-height: 1; }
.close__tagline {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  background: var(--b-ground);
  padding: 0.2em 0.9em;
  white-space: nowrap;
  font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.close__frame--art .close__tagline { bottom: 2.6%; }
/* Phones: the tagline is too long to break the frame at a readable size,
   so it sits under the frame instead. */
@media (max-width: 767px) {
  .close__tagline { position: static; transform: none; white-space: normal; padding: 0; margin-top: 1.5rem; background: none; }
  .close__frame:not(.close__frame--art) .close__tagline { margin-top: 1rem; }
}
.close__contact { color: var(--b-muted); margin-top: 1rem; }

.foot {
  margin-top: clamp(5rem, 12vw, 10rem);
  padding-block: 2.5rem;
  border-top: var(--hair) solid rgba(255,255,255,0.25);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  color: var(--b-muted);
  font-size: 1rem;
}
.foot img { width: 112px; height: auto; }
.foot p { flex: 1; min-width: 16rem; }
.foot a { color: var(--b-ink); font-weight: 700; }

/* Optional per-brand pieces. Market uses none of these; brand stylesheets in
   styles/brands/ position and colour them. -------------------------------- */
.draft {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.15rem 0.6rem;
  border: 1.5px dashed currentColor;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  opacity: 0.9;
}
.cover__logo { position: absolute; z-index: 1; height: auto; }
.cover__tag { position: absolute; z-index: 1; }
.manifesto__logo { width: 100%; height: auto; }
.comp__intro, .exts__intro { max-width: 34em; margin-bottom: 1.5rem; }
.exts__intro { margin-top: -2rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

/* Numbered steps, drawn like the chevron strip on a service counter. */
.bullets--steps { counter-reset: step; display: grid; gap: 0.5rem; }
.bullets--steps li {
  counter-increment: step;
  margin: 0 !important;
  padding: 0.7rem 1rem 0.7rem 5.5rem;
  background: var(--b-accent);
  color: var(--b-ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%);
}
.bullets--steps li::before {
  content: "Step " counter(step);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--b-accent-2, currentColor);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}
@media (min-width: 600px) { .bullets--steps { grid-template-columns: 1fr 1fr; } }

.close__logo-wrap { display: grid; justify-items: center; gap: 1.75rem; }
.close__logo { width: min(70vw, 22rem); height: auto; }
.close__tagline--plain { position: static; left: auto; bottom: auto; transform: none; background: none; padding: 0; white-space: normal; }

/* Menu items with a short description under the name */
.bullets--menu li + li { margin-top: 0.9em; }
.bullets--menu li strong { display: block; }

/* Market Grab N Go: longer second line, kept clear of the circle M */
.brand--market .wm__thin { letter-spacing: 0.1em; margin-right: -0.1em; font-size: 0.62em; }

/* A components block straight after the manifesto needs its own top space. */
.manifesto + .comps { padding-top: clamp(4rem, 8vw, 7rem); }