/* ============================================================
   COASTAL MODERN — format layer  (trial, 2026-08-15)

   Everything here is scoped to [data-theme="coastal-modern"], so the
   cream default and the earlier "coastal" variant are unaffected. This
   file changes FORMAT ONLY — no new content, no new sections, no copy.

   Three moves:
     1. Grey page (#F4F5F7), white bubbles for discrete objects only.
     2. Geist Mono for small uppercase labels; Inter keeps all content.
     3. Pill radius drops from 9999px to 12px; bubbles land at 20px.

   Bubble policy (deliberately selective — NOT everything is a bubble):
     BUBBLE   condition rows (Services), the contact form, modal dialogs,
              service cards, portal actions, the midnight CTA band,
              the standalone hero badge
     NO BUBBLE hero, page headers, approach steps, team bio + credentials,
              contact info column, prose pages (Privacy/Terms), footer
   ============================================================ */

/* ---------- 1. Page surface ---------------------------------- */

[data-theme="coastal-modern"] body {
  background: var(--color-bg);
}

/* The watermark tree sits on grey now instead of cream — pull it back
   slightly so white bubbles read as clean surfaces on top of it. */
[data-theme="coastal-modern"] .page-watermark img {
  opacity: 0.04;
  filter: grayscale(1);
}

/* Sticky header.

   The cream build put the frost on a ::before layer with z-index:-1 inside
   an isolated stacking context, masked to fade out on the right so the tree
   showed through. That construction does not hold up here: because the
   header isolates, the pseudo-element's backdrop-filter has nothing to
   sample, so scrolled body copy passed through the wordmark completely
   sharp on every page long enough to scroll. Raising the gradient's alpha
   did not fix it either.

   So for the inner pages — the ones that actually scroll — the background
   moves onto the header element itself, where it cannot fail. The ::before
   layer is switched off there to avoid a second seam.                     */
[data-theme="coastal-modern"] body.page-shell .site-header {
  background: rgba(244, 245, 247, 0.94) !important;
  backdrop-filter: saturate(160%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px) !important;
}
[data-theme="coastal-modern"] body.page-shell .site-header::before {
  display: none;
}
[data-theme="coastal-modern"] body.page-shell .site-header.scrolled {
  border-bottom-color: var(--color-divider) !important;
}

/* The home page is locked to a single viewport and never scrolls, so
   nothing can pass under its header. It keeps the soft frosted treatment
   so the watermark tree still reads across the top-right — just retinted
   from cream to grey. */
[data-theme="coastal-modern"] body.page-home .site-header::before {
  background: linear-gradient(
    to right,
    rgba(244, 245, 247, 0.55) 0%,
    rgba(244, 245, 247, 0.40) 25%,
    rgba(244, 245, 247, 0.10) 55%,
    rgba(244, 245, 247, 0) 78%
  );
}

/* Bottom drag sheet: retinted grey, and deliberately thinner glass than the
   base cream version. The base sheet was 0.78 opacity over an 18px blur,
   which reads as an opaque panel — you could tell something was behind it
   but not what. At 0.52 over a 7px blur the content underneath stays
   legible as shape and colour (headlines, the tree, image edges) while the
   sheet's own text still passes contrast, because the buttons inside carry
   their own solid fills. Saturation is dialled back with the blur; at 180%
   a light frost oversaturates whatever it samples. */
[data-theme="coastal-modern"] .floating-cta {
  background: rgba(244, 245, 247, 0.52);
  -webkit-backdrop-filter: saturate(120%) blur(7px);
  backdrop-filter: saturate(120%) blur(7px);
  border-top-color: rgba(11, 20, 38, 0.08);
  box-shadow: 0 -8px 28px rgba(11, 20, 38, 0.07);
}
/* Without backdrop-filter there is no glass to see through, so a
   translucent fill would just muddy the text. Fall back to near-opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="coastal-modern"] .floating-cta { background: rgba(244, 245, 247, 0.94); }
}

/* The handle has to match the sheet exactly or the two stop reading as one
   piece of glass where they overlap. It also still carried the cream tint
   from the base theme. */
[data-theme="coastal-modern"] .floating-cta__handle {
  background: rgba(244, 245, 247, 0.52);
  -webkit-backdrop-filter: saturate(120%) blur(7px);
  backdrop-filter: saturate(120%) blur(7px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="coastal-modern"] .floating-cta__handle { background: rgba(244, 245, 247, 0.94); }
}

/* ---------- 2. Type: mono labels ----------------------------- */

/* Small uppercase labels move to Geist Mono. This is the font contrast
   move — proportional Inter for anything a patient reads as a sentence,
   mono for the machine-ish labels that frame it. */
[data-theme="coastal-modern"] .eyebrow,
[data-theme="coastal-modern"] .prose-eyebrow,
[data-theme="coastal-modern"] .crumbs,
[data-theme="coastal-modern"] .hero__meta dt,
[data-theme="coastal-modern"] .team-card__creds dt,
[data-theme="coastal-modern"] .contact-block h3,
[data-theme="coastal-modern"] .form-field label,
[data-theme="coastal-modern"] .condition-row__num,
[data-theme="coastal-modern"] .footer-col h4,
[data-theme="coastal-modern"] .team-card__portrait-caption {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  line-height: 1.4;
}

/* The eyebrow's leading rule is redundant next to mono letterforms. */
[data-theme="coastal-modern"] .eyebrow::before {
  display: none;
}
[data-theme="coastal-modern"] .eyebrow {
  color: var(--color-primary);
}

/* Numbered approach steps read as tabular figures, not italic display. */
[data-theme="coastal-modern"] .approach-item__num {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

/* Content type stays Inter but gets a touch more weight authority in
   headings, since the grey/white split carries less contrast than cream. */
[data-theme="coastal-modern"] .section-title,
[data-theme="coastal-modern"] .page-header h1,
[data-theme="coastal-modern"] .team-card__name,
[data-theme="coastal-modern"] .cta-band__title {
  font-weight: 600;
  letter-spacing: -0.025em;
}
[data-theme="coastal-modern"] .hero__title {
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Role line under a name is a label, but sentence-cased — keep Inter,
   just calm the tracking. */
[data-theme="coastal-modern"] .team-card__role {
  letter-spacing: 0;
  color: var(--color-primary);
}

/* ---------- 3. Shape: pills lose the capsule ----------------- */

[data-theme="coastal-modern"] .btn {
  border-radius: var(--radius-pill);
  font-weight: 500;
  letter-spacing: 0;
}

/* Reserved full-round elements — these stay capsules on purpose. */
[data-theme="coastal-modern"] .theme-toggle,
[data-theme="coastal-modern"] .floating-cta__handle,
[data-theme="coastal-modern"] .hero__badge-icon,
[data-theme="coastal-modern"] .hero__badge--standalone .hero__badge-icon,
[data-theme="coastal-modern"] .service-card__icon,
[data-theme="coastal-modern"] .portal-hero__icon {
  border-radius: var(--radius-full);
}

/* The standalone hero badge is a genuine pill of content — 12px, not 999. */
[data-theme="coastal-modern"] .hero__badge--standalone {
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border-color: var(--color-divider);
  box-shadow: var(--shadow-bubble);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="coastal-modern"] .nav__toggle,
[data-theme="coastal-modern"] .modal__close {
  border-radius: var(--radius-md);
}

/* ---------- 4. Button hierarchy ------------------------------ */

/* Bordeaux is the single loudest action on a page; midnight carries
   portal/system actions; ghost is navigational. */
[data-theme="coastal-modern"] .btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 20, 38, 0.06);
}
[data-theme="coastal-modern"] .btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 14px rgba(139, 36, 52, 0.22);
}

[data-theme="coastal-modern"] .btn--secondary,
[data-theme="coastal-modern"] .btn--navy {
  background: var(--color-surface-dark);
  color: #FFFFFF;
}
[data-theme="coastal-modern"] .btn--secondary:hover,
[data-theme="coastal-modern"] .btn--navy:hover {
  background: #16223A;
}

[data-theme="coastal-modern"] .btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: 0 1px 2px rgba(11, 20, 38, 0.04);
}
@media (hover: hover) {
  [data-theme="coastal-modern"] .btn--ghost:hover {
    background: var(--color-surface);
    border-color: var(--color-text);
    box-shadow: var(--shadow-bubble);
  }
}

/* Ghost buttons inside the frosted drag sheet stay translucent so the
   glass still reads as glass. */
/* Raised from 0.72 to 0.92 when the sheet behind it was thinned. The buttons
   are the part that has to stay crisp — letting page content read through
   both the sheet AND the buttons on top of it made the labels noisy. Now
   the transparency lives in the sheet's gaps, not in the controls. */
[data-theme="coastal-modern"] .floating-cta .btn--ghost {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

/* ---------- 5. Bubbles (selective) -------------------------- */

/* Override the earlier trial rule that made cards translucent cream
   over the watermark. In this theme a bubble is opaque white. */
[data-theme="coastal-modern"] .service-card,
[data-theme="coastal-modern"] .portal-action,
[data-theme="coastal-modern"] .contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-bubble);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="coastal-modern"] .portal-action:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-bubble-hover);
  transform: translateY(-2px);
}

/* Midnight CTA band is a bubble too — the one dark object per page. */
[data-theme="coastal-modern"] .cta-band {
  border-radius: var(--radius-2xl);
  box-shadow: 0 1px 2px rgba(11, 20, 38, 0.06), 0 16px 40px rgba(11, 20, 38, 0.14);
}

[data-theme="coastal-modern"] .modal__dialog {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Modal scrim, same thinking as the drag sheet: was navy at 0.55 over a 4px
   blur, which flattened the page into a dark wash. 0.34 over 2px keeps the
   page readable behind the dialog, so the dialog feels layered on top of
   something rather than replacing it. The dialog itself is solid white, so
   nothing inside it loses contrast. */
[data-theme="coastal-modern"] .modal__backdrop {
  background: rgba(11, 20, 38, 0.34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Inputs sit INSIDE a white bubble, so they need to be a shade back from
   white rather than the page grey (which would look like a hole). */
[data-theme="coastal-modern"] .form-field input,
[data-theme="coastal-modern"] .form-field textarea,
[data-theme="coastal-modern"] .form-field select {
  background: var(--color-surface-2);
  border-color: transparent;
  border-radius: var(--radius-md);
}
[data-theme="coastal-modern"] .form-field input:focus,
[data-theme="coastal-modern"] .form-field textarea:focus,
[data-theme="coastal-modern"] .form-field select:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

/* ---------- 6. Deliberately NOT bubbles --------------------- */

/* These stay flat on the grey page and are separated by type, spacing
   and hairlines instead. Keeping them open is what stops the site from
   looking like a wall of identical white boxes. */
[data-theme="coastal-modern"] .approach-item,
[data-theme="coastal-modern"] .team-card,
[data-theme="coastal-modern"] .contact-block,
[data-theme="coastal-modern"] .hero__meta > div,
[data-theme="coastal-modern"] .prose-container,
[data-theme="coastal-modern"] .page-header,
[data-theme="coastal-modern"] .site-footer {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Approach steps get a left hairline rule instead of a card edge. */
[data-theme="coastal-modern"] .approach-item {
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-divider);
}

/* Condition rows ARE bubbles — each one is a discrete treatment area, and
   they are the main content object on the Services page. Hairline dividers
   become card edges; the row grid gets real gaps to separate them. */
[data-theme="coastal-modern"] .condition-grid {
  gap: var(--space-4);
}
[data-theme="coastal-modern"] .condition-row {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-bubble);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
/* Square bullet markers become small rounded ticks to match the softer
   corner language. */
[data-theme="coastal-modern"] .condition-row li::before {
  border-radius: 2.5px;
  width: 7px;
  height: 7px;
}

/* Hero meta: mono label over Inter value, divided by a hairline. */
[data-theme="coastal-modern"] .hero__meta > div {
  border-left: 1px solid var(--color-divider);
  padding-left: var(--space-4);
}
[data-theme="coastal-modern"] .hero__meta dt {
  color: var(--color-text-faint);
  margin-bottom: 0.35rem;
}
[data-theme="coastal-modern"] .hero__meta dd {
  font-weight: 500;
  color: var(--color-text);
}

/* Non-compact page headers lose the grey band — on a grey page a grey
   band is invisible anyway. Hairline does the work. */
[data-theme="coastal-modern"] .page-header {
  border-bottom: 1px solid var(--color-divider);
}

/* Footer: hairline top edge instead of a filled block. */
[data-theme="coastal-modern"] .site-footer {
  border-top: 1px solid var(--color-divider);
}
[data-theme="coastal-modern"] .footer-col h4 {
  color: var(--color-text-faint);
}

/* Prose pages: h3 subheadings had no margins at all (only h2 was styled),
   so numbered subsections like "4.5 Your mobile information" ran flush
   against the paragraph above them. Give them the same rhythm as h2, one
   step smaller. */
[data-theme="coastal-modern"] .prose-container h3 {
  font-size: clamp(1rem, 2vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: var(--space-6) 0 var(--space-2);
}

/* ------------------------------------------------------------------ *
 * CV page                                                             *
 *                                                                     *
 * cv.html carries its own <style> block, written against the cream    *
 * page, and the first pass of this theme never reached it. These       *
 * rules win on specificity (the theme attribute adds a level) while    *
 * leaving the cream themes on the original look.                      *
 *                                                                     *
 * The CV is the densest data on the site — dated rows and definition   *
 * lists — so it earns bubbles by the same rule as the services        *
 * condition rows: one white card per section, mono for the labels and  *
 * the dates, hairlines inside.                                        *
 * ------------------------------------------------------------------ */
[data-theme="coastal-modern"] .cv-section {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-bubble);
  padding: clamp(var(--space-4), 2.5vw, var(--space-6));
  margin-top: var(--space-4);
}
[data-theme="coastal-modern"] .cv-section:first-child {
  margin-top: var(--space-2);
}

/* Section titles become mono eyebrows. The bordeaux underline stays — it
   is one of the few places the accent earns its keep — but thins out. */
[data-theme="coastal-modern"] .cv-section__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text);
  border-bottom-width: 1.5px;
  padding-bottom: 6px;
  margin-bottom: var(--space-3);
}

/* Drop the italic on the section descriptions — it reads as a holdover
   from the old serif-flavoured build. */
[data-theme="coastal-modern"] .cv-section__descr {
  font-style: normal;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Dates in mono, tabular, so year ranges line up down the column. */
[data-theme="coastal-modern"] .cv-role__dates {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
[data-theme="coastal-modern"] .cv-role__org {
  color: var(--color-text-muted);
}

/* The two-column lists hold either a year range or a short label in the
   dt — both read well in mono, so long as it is not also uppercased. */
[data-theme="coastal-modern"] .cv-two-col dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
[data-theme="coastal-modern"] .cv-two-col dd {
  color: var(--color-text);
}

/* Hairlines inside a white card need to be lighter than they were on
   cream, and the last row's divider is dropped by the page's own CSS. */
[data-theme="coastal-modern"] .cv-role,
[data-theme="coastal-modern"] .cv-list__item,
[data-theme="coastal-modern"] .cv-two-col dt,
[data-theme="coastal-modern"] .cv-two-col dd {
  border-bottom-color: var(--color-divider);
}

/* Print: strip the card treatment back to a flat document. */
@media print {
  [data-theme="coastal-modern"] .cv-section {
    background: none;
    box-shadow: none;
    padding: 0;
    margin-top: var(--space-4);
  }
}

/* Team credentials divider. */
[data-theme="coastal-modern"] .team-card__creds {
  border-top-color: var(--color-divider);
}
[data-theme="coastal-modern"] .team-card__creds dt {
  color: var(--color-text-faint);
}

/* Portrait keeps a soft rounded frame — it is an image, not a bubble. */
[data-theme="coastal-modern"] .team-card__portrait-img,
[data-theme="coastal-modern"] .team-card__portrait-placeholder {
  border-radius: var(--radius-lg);
}