/* ------------------------------------------------------------------
   Classberry — design tokens
   Premium utilitarian minimalism, light Classberry palette.
   Colour is a signal, never decoration. One border weight: 1px #EAEAEA.
   ------------------------------------------------------------------ */

:root {
  /* surfaces */
  --canvas: #ffffff;
  --band: #fbfbfa;
  --band-alt: #f7f8f6;
  --surface: #ffffff;

  /* ink */
  --ink: #2f3437;
  --ink-soft: #6f6d6b;
  --ink-faint: #83817d;

  /* structure */
  --line: #eaeaea;
  --line-strong: #dedddb;

  /* accents — desaturated plates only */
  --blue-bg: #d5ebfa;
  --blue-ink: #1a5c88;
  --green-bg: #e1efe0;
  --green-ink: #2d5731;
  --yellow-bg: #f7ecc7;
  --yellow-ink: #835700;
  --berry-bg: #fbe2e3;
  --berry-ink: #8d2826;
  --plum-bg: #e8e4f5;
  --plum-ink: #413c63;

  /* wide tinted washes — used for section bands and cards so colour reads at
     a glance while text stays charcoal on near-white */
  --wash-blue: #edf5fc;
  --wash-green: #f2f8f1;
  --wash-yellow: #fdf7e8;
  --wash-berry: #fdf3f3;
  --wash-plum: #f5f4fb;
  --edge-blue: #d9eaf8;
  --edge-green: #dbebd8;
  --edge-yellow: #f0e3bf;
  --edge-berry: #f4dcdc;
  --edge-plum: #e0dcf0;
  --accent-rule-blue: #a9d4ef;
  --accent-rule-green: #b4d6ae;
  --accent-rule-yellow: #ead592;
  --accent-rule-berry: #f1c6c5;
  --accent-rule-plum: #c2b9e2;

  /* type */
  --font-sans: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", "Lyon Text", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* geometry */
  --radius: 12px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --shell: 1240px;
  --measure: 62ch;

  /* scale */
  --gap: 24px;
  --section-y: 120px;
  --section-y-mobile: 64px;
}

/* ------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.15rem); text-wrap: balance; max-width: 20ch; }
h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -0.02em; }
h4 { font-size: 1.08rem; letter-spacing: -0.01em; }

p { margin: 0; }

::selection { background: var(--blue-bg); color: var(--blue-ink); }

:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------ */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .shell { padding: 0 20px; } }

.section { padding: var(--section-y) 0; position: relative; }
.section--band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--tight { padding: 80px 0; }

/* tinted section bands — the colour system at full width, still near-white */
.section--wash-blue { background: var(--wash-blue); border-top: 1px solid var(--edge-blue); border-bottom: 1px solid var(--edge-blue); }
.section--wash-green { background: var(--wash-green); border-top: 1px solid var(--edge-green); border-bottom: 1px solid var(--edge-green); }
.section--wash-yellow { background: var(--wash-yellow); border-top: 1px solid var(--edge-yellow); border-bottom: 1px solid var(--edge-yellow); }
.section--wash-berry { background: var(--wash-berry); border-top: 1px solid var(--edge-berry); border-bottom: 1px solid var(--edge-berry); }
.section--wash-plum { background: var(--wash-plum); border-top: 1px solid var(--edge-plum); border-bottom: 1px solid var(--edge-plum); }
@media (max-width: 900px) {
  .section { padding: var(--section-y-mobile) 0; }
  :root { --gap: 16px; }
}

/* quiet ambient light behind large blocks — no colour washes */
.section--lit::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 18% 0%, rgba(31, 108, 159, 0.035), transparent 70%),
    radial-gradient(50% 40% at 88% 12%, rgba(149, 100, 0, 0.03), transparent 70%);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--ink-soft); line-height: 1.6; }
.muted { color: var(--ink-soft); }
.stack-sm > * + * { margin-top: 14px; }
.stack-md > * + * { margin-top: 24px; }
.stack-lg > * + * { margin-top: 40px; }

/* ------------------------------------------------------------------
   Eyebrow, section headers
   ------------------------------------------------------------------ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.proof-line { display: flex; align-items: center; flex-wrap: nowrap; gap: 0 7px; color: var(--ink); font-size: 0.7rem; }
.proof-line span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.proof-line span + span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--blue-ink);
}
.proof-line span:nth-child(2)::before { background: var(--green-ink); }
.proof-line span:nth-child(3)::before { background: var(--yellow-ink); }
@media (max-width: 900px) { .proof-line { flex-wrap: wrap; gap: 6px 10px; } }

.section-head { max-width: 720px; }
.section-head h2 { margin-top: 18px; }
.section-head .lede { margin-top: 20px; }

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.head-row .link-quiet { margin-bottom: 6px; }

/* ------------------------------------------------------------------
   Buttons and links
   ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  transition: background 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease;
}
.btn:hover { background: #333; }
.btn:active { transform: scale(0.98); }

.btn--ghost { background: transparent; color: var(--ink); border-color: #8f8d89; }
.btn--ghost:hover { background: var(--band-alt); border-color: var(--ink-faint); }

.btn--small { padding: 9px 15px; font-size: 0.79rem; }

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}
.link-quiet:hover { border-color: var(--ink); }
.link-quiet svg { width: 14px; height: 14px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--band-alt);
  color: var(--ink-soft);
  white-space: nowrap;
}
.tag--blue { background: var(--blue-bg); color: var(--blue-ink); }
.tag--green { background: var(--green-bg); color: var(--green-ink); }
.tag--yellow { background: var(--yellow-bg); color: var(--yellow-ink); }
.tag--berry { background: var(--berry-bg); color: var(--berry-ink); }
.tag--plum { background: var(--plum-bg); color: var(--plum-ink); }

/* ------------------------------------------------------------------
   Cards and bento grids
   ------------------------------------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: box-shadow 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.card h3 { margin-top: 20px; }
.card .card-line { margin-top: 12px; color: var(--ink-soft); font-size: 0.95rem; }

.icon-plate {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--band);
  color: var(--ink);
}
.icon-plate svg { width: 20px; height: 20px; }
.icon-plate--blue { background: var(--blue-bg); color: var(--blue-ink); border-color: transparent; }
.icon-plate--green { background: var(--green-bg); color: var(--green-ink); border-color: transparent; }
.icon-plate--yellow { background: var(--yellow-bg); color: var(--yellow-ink); border-color: transparent; }
.icon-plate--berry { background: var(--berry-bg); color: var(--berry-ink); border-color: transparent; }
.icon-plate--plum { background: var(--plum-bg); color: var(--plum-ink); border-color: transparent; }

.bento { display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr); }
.bento > * { grid-column: span 12; }
@media (min-width: 760px) {
  .span-7 { grid-column: span 7; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-4 { grid-column: span 4; }
  .span-8 { grid-column: span 8; }
}
@media (max-width: 759px) { .bento { gap: 14px; } }

/* ------------------------------------------------------------------
   Colour layer — tinted surfaces, accent rules, coloured eyebrows.
   Every wash is near-white so charcoal text keeps its contrast; the
   accent inks are only used on their own tinted surface.
   ------------------------------------------------------------------ */

.card--blue { background: var(--wash-blue); border-color: var(--edge-blue); }
.card--green { background: var(--wash-green); border-color: var(--edge-green); }
.card--yellow { background: var(--wash-yellow); border-color: var(--edge-yellow); }
.card--berry { background: var(--wash-berry); border-color: var(--edge-berry); }
.card--plum { background: var(--wash-plum); border-color: var(--edge-plum); }
.card--blue:hover { box-shadow: 0 2px 8px rgba(31, 108, 159, 0.07); }
.card--green:hover { box-shadow: 0 2px 8px rgba(52, 101, 56, 0.07); }
.card--yellow:hover { box-shadow: 0 2px 8px rgba(149, 100, 0, 0.07); }
.card--berry:hover { box-shadow: 0 2px 8px rgba(159, 47, 45, 0.07); }
.card--plum:hover { box-shadow: 0 2px 8px rgba(74, 69, 113, 0.07); }

/* a 3px accent rule replaces the hairline on rows that belong to an area */
.rule-top { border-top: 3px solid var(--line); padding-top: 34px; }
.rule-top--blue { border-top-color: var(--accent-rule-blue); }
.rule-top--green { border-top-color: var(--accent-rule-green); }
.rule-top--yellow { border-top-color: var(--accent-rule-yellow); }
.rule-top--berry { border-top-color: var(--accent-rule-berry); }
.rule-top--plum { border-top-color: var(--accent-rule-plum); }

/* eyebrows carry their area's colour */
.eyebrow--blue, .eyebrow--green, .eyebrow--yellow, .eyebrow--berry, .eyebrow--plum { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow--blue::before, .eyebrow--green::before, .eyebrow--yellow::before, .eyebrow--berry::before, .eyebrow--plum::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.eyebrow--blue::before { background: var(--blue-ink); }
.eyebrow--green::before { background: var(--green-ink); }
.eyebrow--yellow::before { background: var(--yellow-ink); }
.eyebrow--berry::before { background: var(--berry-ink); }
.eyebrow--plum::before { background: var(--plum-ink); }

/* tinted card headers for the five areas and the price bands */
.tint-head { display: flex; align-items: center; gap: 14px; margin: -30px -30px 24px; padding: 22px 30px; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.tint-head--blue { background: var(--blue-bg); border-bottom-color: var(--edge-blue); }
.tint-head--green { background: var(--green-bg); border-bottom-color: var(--edge-green); }
.tint-head--yellow { background: var(--yellow-bg); border-bottom-color: var(--edge-yellow); }
.tint-head--berry { background: var(--berry-bg); border-bottom-color: var(--edge-berry); }
.tint-head--plum { background: var(--plum-bg); border-bottom-color: var(--edge-plum); }
.tint-head h3 { margin: 0; }
.tint-head .mono { color: var(--ink-soft); }

/* hero wash + tinted browser chrome */
.hero-wash { background: var(--wash-blue); border-bottom: 1px solid var(--edge-blue); }
.hero-wash--blue { background: var(--wash-blue); border-bottom-color: var(--edge-blue); }
.hero-wash--green { background: var(--wash-green); border-bottom-color: var(--edge-green); }
.hero-wash--yellow { background: var(--wash-yellow); border-bottom-color: var(--edge-yellow); }
.hero-wash--berry { background: var(--wash-berry); border-bottom-color: var(--edge-berry); }
.hero-wash--plum { background: var(--wash-plum); border-bottom-color: var(--edge-plum); }
.hero-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(31, 108, 159, 0.1), transparent 70%),
    radial-gradient(46% 44% at 100% 100%, rgba(149, 100, 0, 0.07), transparent 70%);
}
.hero-wash > * { position: relative; }
.frame--tinted .frame__bar { background: var(--wash-blue); border-bottom-color: var(--edge-blue); }

/* journey steps take the accent of the stage they describe */
.journey__step--blue { background: var(--wash-blue); border-color: var(--edge-blue); }
.journey__step--green { background: var(--wash-green); border-color: var(--edge-green); }
.journey__step--yellow { background: var(--wash-yellow); border-color: var(--edge-yellow); }
.journey__step--plum { background: var(--wash-plum); border-color: var(--edge-plum); }

/* tables */
.table-tinted thead tr { background: var(--wash-blue); }
.table-tinted thead th { border-bottom-color: var(--edge-blue) !important; }
.table-tinted tbody tr:hover { background: #fbfcfe; }

/* dock: the active chip takes its area's tint */
.dock__chip[data-active="true"] { border-color: var(--line); }
.dock__chip--blue[data-active="true"] { background: var(--wash-blue); border-color: var(--edge-blue); }
.dock__chip--green[data-active="true"] { background: var(--wash-green); border-color: var(--edge-green); }
.dock__chip--yellow[data-active="true"] { background: var(--wash-yellow); border-color: var(--edge-yellow); }
.dock__chip--berry[data-active="true"] { background: var(--wash-berry); border-color: var(--edge-berry); }
.dock__chip--plum[data-active="true"] { background: var(--wash-plum); border-color: var(--edge-plum); }
.dock__panel { background: var(--canvas); }

.footer { background: var(--wash-plum); border-top-color: var(--edge-plum); }

/* ------------------------------------------------------------------
   Lists
   ------------------------------------------------------------------ */

.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 0.95rem;
}
.rule-list li:first-child { border-top: 1px solid var(--line); }
.rule-list svg { width: 15px; height: 15px; flex: none; color: var(--ink-faint); position: relative; top: 2px; }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { padding: 9px 0; display: flex; gap: 12px; font-size: 0.95rem; }
.check-list svg { width: 16px; height: 16px; flex: none; margin-top: 5px; color: var(--green-ink); }

/* ------------------------------------------------------------------
   Browser frame (faux window chrome for software screens)
   ------------------------------------------------------------------ */

.frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--band);
}
.frame__dot { width: 9px; height: 9px; border-radius: 50%; background: #e2e1df; }
.frame__label {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  /* truncate rather than widen the page: this label is the widest thing in the frame bar */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frame__body { background: var(--surface); }
/* a fixed-height window onto a product screen: the frame ends, the software continues */
.frame__body--window { height: 400px; overflow: hidden; }
.frame__body--window img { width: 100%; height: auto; }
.frame__body img { width: 100%; }

/* placeholder for a screen that does not exist yet — holds exact final size */
.screen-placeholder {
  aspect-ratio: 16 / 10;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background: #fcfcfb;
  outline: 1px dashed var(--line-strong);
  outline-offset: -18px;
}
.screen-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* interface wireframe — a designed stand-in that holds the exact space a real
   Classberry screen will occupy, so nothing shifts when screens are dropped in */
.wire { display: grid; grid-template-columns: 132px 1fr; }
.wire__side {
  border-right: 1px solid var(--line);
  padding: 16px 14px;
  display: grid;
  gap: 11px;
  align-content: start;
  background: var(--band);
}
.wire__side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wire__side-head i { width: 14px; height: 14px; border-radius: 4px; background: var(--blue-bg); display: block; }
.wire__side-item { height: 9px; border-radius: 4px; background: #e3e7ea; }
.wire__side-item--active { background: var(--blue-bg); border-left: 3px solid var(--blue-ink); height: 12px; width: 92%; }
.wire__side-item--green { background: var(--green-bg); width: 74%; }
.wire__bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.wire__bars i { flex: 1; border-radius: 3px 3px 0 0; display: block; }
.wire__bars i:nth-child(1) { height: 40%; background: var(--blue-bg); }
.wire__bars i:nth-child(2) { height: 72%; background: var(--green-bg); }
.wire__bars i:nth-child(3) { height: 55%; background: var(--yellow-bg); }
.wire__bars i:nth-child(4) { height: 88%; background: var(--berry-bg); }
.wire__tr--head { background: var(--wash-blue); }
.wire__dot-row { display: flex; align-items: center; gap: 9px; }
.wire__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wire__dot--blue { background: var(--blue-ink); }
.wire__dot--green { background: var(--green-ink); }
.wire__dot--yellow { background: var(--yellow-ink); }
.wire__main { padding: 16px; display: grid; gap: 12px; align-content: start; }
.wire__line { height: 8px; border-radius: 4px; background: #e3e7ea; }
.wire__line--strong { background: #ccd4da; }
.wire__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wire__chip {
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 9999px;
  white-space: nowrap;
}
.wire__chip--blue { background: var(--blue-bg); color: var(--blue-ink); }
.wire__chip--green { background: var(--green-bg); color: var(--green-ink); }
.wire__chip--yellow { background: var(--yellow-bg); color: var(--yellow-ink); }
.wire__chip--berry { background: var(--berry-bg); color: var(--berry-ink); }
.wire__chip--plum { background: var(--plum-bg); color: var(--plum-ink); }
.wire__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wire__card { border: 1px solid #e2e1de; border-radius: 8px; padding: 12px; display: grid; gap: 9px; background: #fff; }
.wire__card i { display: block; width: 18px; height: 18px; border-radius: 5px; }
.wire__card i:nth-of-type(1) { background: var(--blue-bg); }
.wire__card i:nth-of-type(2) { background: var(--green-bg); }
.wire__card i:nth-of-type(3) { background: var(--yellow-bg); }
.wire__table { border: 1px solid #e2e1de; border-radius: 8px; overflow: hidden; }
.wire__tr {
  display: grid;
  grid-template-columns: 1.7fr 1fr 0.8fr;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.wire__tr:last-child { border-bottom: 0; }
.wire__tr > span { height: 8px; border-radius: 4px; background: #e3e7ea; display: block; }
.wire__tr--head > span { background: #bfdcf1; }
.wire__tr > span.wire__dot-row { height: auto; background: none; display: flex; }
@media (max-width: 560px) { .wire { grid-template-columns: 1fr; } .wire__side { display: none; } }

/* ------------------------------------------------------------------
   Nav
   ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 64px;
}
@media (max-width: 640px) { .nav__inner { padding: 0 20px; } }
.nav__links { display: flex; align-items: center; gap: 22px; }
.nav__link { font-size: 0.86rem; color: var(--ink-soft); transition: color 200ms ease; white-space: nowrap; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); }
.nav__service { display: flex; align-items: center; gap: 10px; }
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.nav__toggle svg { width: 18px; height: 18px; }
@media (max-width: 1260px) {
  .nav__service .btn--ghost { display: none; }
}
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
}
/* On a phone the bar has three things to fit and only one of them can give: the brand text.
   Let it truncate, never let the menu button squash (it was shrinking to 22px and pushing its
   icon out of its own border), and drop the tagline and the CTA — the mobile panel below
   already carries every link and the Cloud call-to-action.
   These overrides sit AFTER the base .brand__* rules below, because a later rule wins a tie
   on specificity: placed above them, the tagline stayed visible on a phone. */
.nav__toggle { flex: none; }
.brand { min-width: 0; }
.brand__word { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
/* The Classberry mark is a tall emblem (berries + leaves on a stem), so it is sized by
   height, not width. 34px is the smallest size at which the berry bunch still reads as a
   bunch — at 26px it collapses into a dark speck. */
.brand .mark { height: 44px; width: auto; }
@media (max-width: 640px) { .brand .mark { height: 36px; } }
.footer .brand .mark { height: 30px; }
.brand__word {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}
.brand__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1px;
}

/* Phone and small-tablet bar: the tagline and the CTA stand down, the bar keeps brand + menu. */
@media (max-width: 640px) {
  .nav__inner { gap: 12px; }
  .brand__sub { display: none; }
}
@media (max-width: 560px) {
  .nav__service .btn { display: none; }
}

.nav__mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--canvas);
  padding: 18px 0 24px;
}
.nav__mobile[data-open="true"] { display: block; }
.nav__mobile a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }

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

.footer { border-top: 1px solid var(--line); background: var(--band); padding: 72px 0 40px; }
.footer__grid { display: grid; gap: 40px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer h4 { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.footer ul { list-style: none; margin: 16px 0 0; padding: 0; }
.developer-credit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
/* the DataSmith mark ships with its own white background, so it sits on a plate */
.brand-plate {
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.brand-plate img { display: block; }
.developer-credit img { display: block; padding: 3px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.footer li { padding: 4px 0; font-size: 0.9rem; color: var(--ink-soft); }
.footer a:hover { color: var(--ink); }
.footer__base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   Floating dock
   ------------------------------------------------------------------ */

.dock {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 26px);
  width: min(1040px, calc(100vw - 40px));
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 320ms;
}
.dock[data-visible="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.dock__shell {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.dock__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
}
.dock__spacer { flex: 1 1 auto; }

.dock__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 0.83rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  white-space: nowrap;
}
.dock__chip:hover { background: var(--band); color: var(--ink); }
.dock__chip[data-active="true"] { background: var(--band-alt); color: var(--ink); border-color: var(--line); }
.dock__chip[data-active="true"] .dock__chip-label { font-weight: 500; }
.dock__chip-label--blue { color: var(--blue-ink); }
.dock__chip-label--green { color: var(--green-ink); }
.dock__chip-label--yellow { color: var(--yellow-ink); }
.dock__chip-label--berry { color: var(--berry-ink); }
.dock__chip-label--plum { color: var(--plum-ink); }
.dock__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dock__dot--blue { background: var(--blue-ink); }
.dock__dot--green { background: var(--green-ink); }
.dock__dot--yellow { background: var(--yellow-ink); }
.dock__dot--berry { background: var(--berry-ink); }
.dock__dot--plum { background: var(--plum-ink); }

.dock__price {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  padding-left: 12px;
  white-space: nowrap;
}
.dock__divider { width: 1px; align-self: stretch; background: var(--line); margin: 2px 8px; }
.dock__all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.83rem;
  color: var(--ink);
  white-space: nowrap;
}
.dock__all:hover { text-decoration: underline; }
.dock__cta { margin-left: 12px; }

.dock__panel {
  display: none;
  border-top: 1px solid var(--line);
  padding: 20px 22px 22px;
  background: #fefefe;
  max-height: min(46vh, 420px);
  overflow-y: auto;
}
.dock__panel[data-open="true"] { display: block; animation: dockPanel 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes dockPanel {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dock__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.dock__panel-line { color: var(--ink-soft); font-size: 0.88rem; }
.dock__panel-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.dock__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  cursor: pointer;
}
.dock__close:hover { color: var(--ink); background: var(--band); }
.dock__modules { display: grid; gap: 0; grid-template-columns: 1fr 1fr; margin-top: 4px; }
.dock__module {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: background 180ms ease;
}
.dock__module:hover { background: var(--band); }
.dock__module b { font-weight: 500; font-size: 0.9rem; min-width: 132px; flex: none; }
.dock__module span { color: var(--ink-soft); font-size: 0.82rem; }
@media (max-width: 760px) { .dock__modules { grid-template-columns: 1fr; } }

/* mobile dock: single pill that opens a sheet */
.dock__mobile { display: none; }
.dock__sheet-toggle { display: none; }
.dock__chev { margin-left: auto; display: inline-flex; color: var(--ink-soft); }
@media (max-width: 1360px) { .dock__price { display: none; } }
@media (max-width: 900px) {
  .dock__mobile { display: block; }
  .dock { bottom: 14px; width: calc(100vw - 28px); }
  .dock__row { display: none; }
  .dock__close--desktop { display: none; }
  .dock__sheet-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    text-align: left;
  }
  .dock__sheet-toggle b { font-weight: 500; }
  .dock__sheet-toggle .tag { margin-left: 4px; }
  .dock__sheet {
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dock__sheet[data-open="true"] { max-height: 68vh; overflow-y: auto; }
  .dock__sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
  }
  .dock__mobile-group { padding: 14px 18px 4px; }
  .dock__mobile-group h4 {
    position: sticky;
    top: 49px;
    z-index: 1;
    background: var(--canvas);
    margin: 0;
    padding: 8px 0 10px;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .dock__mobile-group h4 .dock__dot { display: inline-block; margin-right: 9px; position: relative; top: -1px; }
  .dock__mobile-group ul { list-style: none; margin: 0; padding: 0; }
  .dock__mobile-group li a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .dock__mobile-group li:last-child a { border-bottom: none; }
  .dock__mobile-group b { font-weight: 500; font-size: 0.92rem; display: block; }
  .dock__mobile-group span { font-size: 0.82rem; color: var(--ink-soft); }
  .dock__mobile-cta { padding: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
}

/* ------------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--index, 0) * 80ms);
  will-change: transform, opacity;
}
.reveal[data-shown="true"] { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .dock { transition: opacity 200ms ease, visibility 200ms; }
}

/* ------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------ */

.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* The hero's 1.08/0.92 split belongs here, not in an inline style: an inline
   grid-template-columns outranks the media query below, so the hero could never collapse to
   one column on a phone and the screenshot frame pushed the whole page sideways. */
.hero-grid { align-items: center; gap: 56px; grid-template-columns: 1.08fr 0.92fr; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
/* A grid child that cannot shrink is what turns a wide image or a long label into a sideways
   page scroll: min-width:0 lets the tracks actually honour their fr sizes. */
.grid-2 > *, .grid-3 > *, .grid-auto > *, .hero-grid > * { min-width: 0; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.mono { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ink-soft); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm);
}
.skip:focus { left: 16px; top: 12px; }

/* ==================================================================
   2026 landing-page refresh
   A restrained, high-trust school administration aesthetic.
   ================================================================== */

:root {
  --navy-950: #061a2f;
  --navy-900: #08233f;
  --navy-800: #10395f;
  --gold-500: #c69a4a;
  --gold-400: #d5ad64;
  --classberry-green: #69c63c;

  /* The previous display face was a serif. Classberry now uses one
     sans-serif family throughout for a cleaner software/product feel. */
  --font-serif: var(--font-sans);
  --ink: #172233;
  --ink-soft: #5f6977;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.035em;
}
h3 { letter-spacing: -0.025em; }
h4 { letter-spacing: -0.015em; }

.brand__word {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.btn {
  background: var(--navy-900);
  border-radius: 5px;
  font-weight: 600;
}
.btn:hover { background: var(--navy-800); }
.btn--ghost { color: var(--navy-900); }

/* Home navigation floats over the hero image, allowing the photograph
   and its navy treatment to continue behind the top navigation. */
.nav--home {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 80;
  background: rgba(4, 22, 40, 0.22);
  backdrop-filter: blur(4px);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.nav--home .brand__word,
.nav--home .nav__link,
.nav--home .brand__sub {
  color: #fff;
}
.nav--home .brand__sub { opacity: 0.72; }
.nav--home .nav__link { opacity: 0.9; }
.nav--home .nav__link:hover,
.nav--home .nav__link[aria-current="page"] { color: #fff; opacity: 1; }
.nav--home .nav__service .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.04);
}
.nav--home .nav__service .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.nav--home .nav__service .btn:not(.btn--ghost) {
  background: var(--gold-500);
  color: var(--navy-950);
}
.nav--home .nav__service .btn:not(.btn--ghost):hover { background: var(--gold-400); }
.nav--home .nav__toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}
.nav--home .nav__mobile {
  background: rgba(6, 26, 47, 0.97);
  border-top-color: rgba(255,255,255,0.15);
}
.nav--home .nav__mobile a { color:#fff; border-bottom-color:rgba(255,255,255,0.12); }

/* Landing hero */
.home-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--navy-950);
  background-image:
    linear-gradient(90deg, rgba(5, 25, 45, 0.98) 0%, rgba(5, 25, 45, 0.94) 34%, rgba(5, 25, 45, 0.77) 56%, rgba(5, 25, 45, 0.34) 78%, rgba(5, 25, 45, 0.20) 100%),
    linear-gradient(0deg, rgba(5, 25, 45, 0.18), rgba(5, 25, 45, 0.18)),
    url('/img/hero/classberry-leadership.webp');
  background-size: cover;
  background-position: center 34%;
  border-bottom: 1px solid rgba(6, 26, 47, 0.18);
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,26,47,0), rgba(6,26,47,0.22));
}
.home-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 104px;
  padding-bottom: 56px;
}
.home-hero__copy { max-width: 760px; }
.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.home-hero__eyebrow::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--gold-500);
}
.home-hero h1 {
  max-width: 13ch;
  margin-top: 24px;
  font-size: clamp(2.75rem, 5.4vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: #fff;
  text-wrap: balance;
}
.home-hero h1 span,
.home-hero h1 strong { display: block; }
.home-hero h1 strong {
  color: var(--gold-400);
  font-weight: 700;
}
.home-hero__lede {
  max-width: 67ch;
  margin-top: 18px;
  color: rgba(255,255,255,0.86);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.65;
}
.home-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.btn--hero {
  background: var(--gold-500);
  color: var(--navy-950);
  border-color: var(--gold-500);
}
.btn--hero:hover { background: var(--gold-400); }
.btn--hero-ghost {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-color: rgba(255,255,255,0.48);
}
.btn--hero-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.74);
}
.home-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 20px;
  color: rgba(255,255,255,0.72);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-hero__proof span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.home-hero__proof span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--classberry-green);
  box-shadow: 0 0 0 3px rgba(105,198,60,0.14);
}

@media (max-width: 900px) {
  .home-hero {
    min-height: 420px;
    background-position: center 32%;
    background-image:
      linear-gradient(90deg, rgba(5,25,45,0.98) 0%, rgba(5,25,45,0.94) 55%, rgba(5,25,45,0.60) 100%),
      url('/img/hero/classberry-leadership.webp');
  }
  .home-hero__copy { max-width: 650px; }
  .home-hero h1 { max-width: 12ch; }
}

@media (max-width: 640px) {
  .home-hero {
    min-height: 600px;
    align-items: flex-end;
    background-position: center 30%;
    background-image:
      linear-gradient(0deg, rgba(5,25,45,0.98) 0%, rgba(5,25,45,0.94) 56%, rgba(5,25,45,0.55) 100%),
      url('/img/hero/classberry-leadership.webp');
  }
  .home-hero__inner { padding-top: 104px; padding-bottom: 48px; }
  .home-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); max-width: 11ch; }
  .home-hero__lede { font-size: 1rem; line-height: 1.55; }
  .home-hero__actions .btn { width: 100%; justify-content: center; }
  .home-hero__proof { display: grid; gap: 8px; }
}
.nav--home .brand .mark {
  box-sizing: content-box;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ------------------------------------------------------------------
   Immersive photographic page hero
   Used on the Platform landing banner so the navigation sits over the
   same photographic field instead of occupying a separate white strip.
   ------------------------------------------------------------------ */
.page-photo-hero {
  --page-hero-image: none;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--navy-950);
  background-image:
    linear-gradient(90deg, rgba(4, 22, 40, 0.96) 0%, rgba(4, 22, 40, 0.90) 40%, rgba(4, 22, 40, 0.58) 68%, rgba(4, 22, 40, 0.28) 100%),
    linear-gradient(0deg, rgba(4,22,40,0.16), rgba(4,22,40,0.16)),
    var(--page-hero-image);
  background-size: cover;
  background-position: center 34%;
  border-bottom: 1px solid rgba(6, 26, 47, 0.2);
}
.page-photo-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,26,47,0), rgba(6,26,47,0.20));
}
.page-photo-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 104px;
  padding-bottom: 50px;
}
.page-photo-hero__copy {
  max-width: 760px;
}
.page-photo-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.page-photo-hero__eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--gold-500);
}
.page-photo-hero h1 {
  margin-top: 22px;
  max-width: 13ch;
  font-family: var(--font-sans);
  font-size: clamp(2.65rem, 5.2vw, 4.7rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: #fff;
  text-wrap: balance;
}
.page-photo-hero__lede {
  max-width: 64ch;
  margin-top: 20px;
  color: rgba(255,255,255,0.88);
  font-size: clamp(1rem, 1.55vw, 1.18rem);
  line-height: 1.65;
}
@media (max-width: 900px) {
  .page-photo-hero {
    min-height: 390px;
    background-position: center 32%;
    background-image:
      linear-gradient(90deg, rgba(4,22,40,0.97) 0%, rgba(4,22,40,0.92) 58%, rgba(4,22,40,0.48) 100%),
      var(--page-hero-image);
  }
}
@media (max-width: 640px) {
  .page-photo-hero {
    min-height: 520px;
    align-items: flex-end;
    background-position: center 30%;
    background-image:
      linear-gradient(0deg, rgba(4,22,40,0.98) 0%, rgba(4,22,40,0.91) 58%, rgba(4,22,40,0.36) 100%),
      var(--page-hero-image);
  }
  .page-photo-hero__inner { padding-top: 102px; padding-bottom: 48px; }
  .page-photo-hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); max-width: 11ch; }
  .page-photo-hero__lede { font-size: 1rem; line-height: 1.55; }
}


/* ==================================================================
   2026 landing hero sizing + transparent enlarged brand mark (v4)
   The desktop hero deliberately uses a shallow cinematic ratio so the
   supplied real meeting photograph is shown almost full-width rather
   than being enlarged and cropped around a single person.
   ================================================================== */

/* Keep the supplied Classberry mark transparent and make the grape mark
   materially larger in the primary navigation. */
.nav .brand .mark {
  height: 56px;
  width: auto;
  flex: none;
  object-fit: contain;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nav__inner { height: 72px; }
.nav--home .brand,
.nav--home .brand .mark { background: transparent !important; }
.footer .brand .mark { height: 32px; }

/* Compact desktop landing hero: approximately half the previous visual
   height at a 1080px desktop viewport. `cover` now crops vertically, not
   aggressively from the sides, so the meeting group remains visible. */
@media (min-width: 901px) {
  .home-hero {
    height: 470px;
    min-height: 470px;
    max-height: 470px;
    background-size: cover;
    background-position: center 45%;
  }
  .home-hero::after { height: 90px; }
  .home-hero__inner {
    padding-top: 86px;
    padding-bottom: 22px;
  }
  .home-hero__copy { max-width: 760px; }
  .home-hero__eyebrow { font-size: 0.66rem; }
  .home-hero h1 {
    max-width: 16ch;
    margin-top: 14px;
    font-size: clamp(2.45rem, 2.8vw, 3.1rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
  }
  .home-hero__lede {
    max-width: 66ch;
    margin-top: 14px;
    font-size: 0.98rem;
    line-height: 1.48;
  }
  .home-hero__actions { margin-top: 18px; }
  .home-hero__proof { display: none; }

  .page-photo-hero {
    height: 380px;
    min-height: 380px;
    max-height: 380px;
    background-size: cover;
    background-position: center center;
  }
  .page-photo-hero__inner { padding-top: 92px; padding-bottom: 30px; }
  .page-photo-hero h1 {
    max-width: 17ch;
    margin-top: 14px;
    font-size: clamp(2.35rem, 3.2vw, 3.35rem);
    line-height: 1;
  }
  .page-photo-hero__lede {
    margin-top: 14px;
    font-size: 0.98rem;
    line-height: 1.5;
  }
}


@media (min-width: 1500px) {
  .home-hero,
  .page-photo-hero { background-size: 100% auto; }
}

@media (max-width: 900px) and (min-width: 641px) {
  .nav .brand .mark { height: 50px; }
  .nav__inner { height: 68px; }
  .home-hero { min-height: 470px; background-position: center center; }
  .home-hero__inner { padding-top: 92px; padding-bottom: 36px; }
  .home-hero h1 { font-size: clamp(2.5rem, 7vw, 3.5rem); max-width: 14ch; }
  .home-hero__proof { display: none; }
  .page-photo-hero { min-height: 390px; background-position: center center; }
}

@media (max-width: 640px) {
  .nav .brand .mark { height: 44px; }
  .nav__inner { height: 64px; }
}

/* v5 — frosted navigation over photographic heroes */
.nav--home{background:linear-gradient(90deg,rgba(246,248,249,.94) 0%,rgba(239,242,243,.90) 18%,rgba(224,229,231,.82) 36%,rgba(197,205,210,.70) 58%,rgba(159,171,179,.58) 78%,rgba(122,138,150,.50) 100%);-webkit-backdrop-filter:blur(15px) saturate(.82);backdrop-filter:blur(15px) saturate(.82);border-bottom:1px solid rgba(15,38,58,.16);box-shadow:0 1px 0 rgba(255,255,255,.28) inset}.nav--home .brand,.nav--home .brand .mark,.nav--home .brand>span{background:transparent!important;border:0!important;box-shadow:none!important}.nav--home .brand__word{color:var(--navy-950);font-weight:750}.nav--home .brand__sub{color:rgba(6,26,47,.72);opacity:1}.nav--home .nav__link{color:rgba(6,26,47,.86);opacity:1;font-weight:500}.nav--home .nav__link:hover,.nav--home .nav__link[aria-current=page]{color:var(--navy-950);opacity:1}.nav--home .nav__service .btn--ghost{color:var(--navy-950);border-color:rgba(6,26,47,.38);background:rgba(255,255,255,.18)}.nav--home .nav__service .btn--ghost:hover{background:rgba(255,255,255,.42);border-color:rgba(6,26,47,.52)}.nav--home .nav__service .btn:not(.btn--ghost){background:var(--gold-500);color:var(--navy-950);border-color:var(--gold-500)}.nav--home .nav__toggle{color:var(--navy-950);border-color:rgba(6,26,47,.34);background:rgba(255,255,255,.18)}.nav--home .nav__mobile{background:rgba(241,244,245,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top-color:rgba(6,26,47,.14)}.nav--home .nav__mobile a{color:var(--navy-950);border-bottom-color:rgba(6,26,47,.12)}@media (min-width:901px){.nav .brand .mark{height:62px}.nav__inner{height:72px}.nav--home .brand__word{font-size:1.26rem}}@media (max-width:900px){.nav--home{background:linear-gradient(90deg,rgba(246,248,249,.95) 0%,rgba(231,235,237,.88) 52%,rgba(188,198,204,.72) 100%);-webkit-backdrop-filter:blur(14px) saturate(.84);backdrop-filter:blur(14px) saturate(.84)}}


/* v6 — modules visual banner ------------------------------------------------
   Uses the approved 18-module artwork as a clean, edge-to-edge catalogue
   banner. On desktop it crops only the unused white space above/below the
   two rows; on smaller screens the full artwork is shown without cropping. */
.visual-banner {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid rgba(6, 26, 47, 0.08);
}
.visual-banner img {
  display: block;
  width: 100%;
  height: clamp(390px, 30vw, 480px);
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 900px) {
  .visual-banner img {
    height: auto;
    object-fit: contain;
  }
}

/* v12 — Classberry page-intro cleanup: remove the former gold-rule micro-label motif. */
.home-hero__eyebrow,.modules-hero__eyebrow,.page-photo-hero__eyebrow,.hero-wash .reveal>.eyebrow:first-child{display:none!important}.home-hero__eyebrow+h1,.page-photo-hero__eyebrow+h1,.hero-wash .reveal>.eyebrow:first-child+h1{margin-top:0!important}