/* Shared material finish. Load after the page's component styles. */
:root {
  --blue: #c9d4c4;
  --blue-soft: #e8ece3;
  --apricot: #a58a58;
  --apricot-soft: #e6dcc6;
  --link: #26382d;
  --line: #cbd1c4;
  --shadow-small: 0 2px 3px #26382d1f, 0 7px 12px -3px #26382d29, inset 0 1px 0 #ffffffcc;
  --shadow-card: 0 3px 5px #26382d1a, 0 13px 25px -5px #26382d38, inset 0 1px 0 #ffffffe0;
  --shadow-raised: 0 4px 7px #26382d24, 0 20px 36px -6px #26382d47, inset 0 1px 0 #ffffffeb;
}

/* Local component palettes follow the same site-wide colors. */
.service-modules {
  --service-modules-blue: var(--blue);
  --service-modules-apricot: var(--apricot);
  --service-modules-link: var(--link);
}
.founder-paths {
  --founder-paths-blue: var(--blue);
  --founder-paths-apricot: var(--apricot);
  --founder-paths-link: var(--link);
}
.work-compare {
  --work-compare-blue: var(--blue);
  --work-compare-peach: var(--apricot);
  --work-compare-link: var(--link);
}
.sys-flow {
  --sys-flow-blue: var(--blue);
  --sys-flow-apricot: var(--apricot);
  --sys-flow-accent: var(--link);
}
.project-trio { --trio-ground: var(--blue); }
.project-trio.theme-apricot { --trio-ground: var(--apricot-soft); }
.project-trio.theme-slate { --trio-ground: #cfddd4; }
.work-card-visual.orange, .company-metric:last-child { background: var(--apricot-soft); }
.call-note.customer { background: var(--apricot); }
.brand-promise, .direct-build { background: var(--blue-soft); }

/* Keep supporting copy legible on the more saturated surfaces. */
:is(.blue-surface, .work-band, .contact-band, .audit-card,
    .phone-stage, .system-stage, .search-stage, .work-detail-images figure,
    .services-project-image, .company-metric:last-child, .booking-host) {
  --muted: #3c5142;
}
.company-metric:last-child dt { color: var(--ink); }

/* One quiet edge highlight and two shadow layers give surfaces thickness. */
@media screen {
  :is(.premium-offer, .package, .service-outcome, .audit-card,
      .contact-form, .booking-shell, .company-metric, .services-project-image,
      .offer-product-view, .work-detail-images figure, .work-card-visual,
      .project-trio, .phone-stage, .system-stage, .search-stage, .swatch-card,
      .design-stage .type-card, .contact-band, .session-agenda-shell,
      .work-compare-stage, .founder-paths__origin, .founder-paths__convergence) {
    box-shadow: var(--shadow-card);
  }
  .work-card-visual:has(.project-trio) { box-shadow: none; }
  :is(.premium-offer, .package, .service-outcome, .contact-form) {
    background: linear-gradient(150deg, #ffffffb3, #ffffff00 48%), var(--paper);
    border-color: #c2cfc7;
  }
  .company-metric { border-color: #c9d3cd; }
  .company-metric:last-child { border-color: #c8b899; }
  .browser-frame { box-shadow: var(--shadow-raised); }
  :is(.call-note, .system-window, .system-line, .search-result,
      .work-compare-voicemail, .work-compare-message, .work-compare-job,
      .work-compare-followup, .founder-paths__project) { box-shadow: var(--shadow-small); }

  .glass {
    box-shadow: 0 2px 5px #1111110d, 0 14px 32px -12px #11111133,
      inset 0 1.5px 0 #fffffff0, inset 0 -1px 0 #779e8638;
  }
  .site-header, .site-header.scrolled {
    box-shadow: 0 3px 7px #1111110a, 0 16px 35px -13px #11111138,
      inset 0 1px 0 #ffffffe0, inset 0 -1px 0 #7f9e8b2e;
  }
  .btn, .round-link, .dock-cta {
    box-shadow: var(--shadow-small), inset 0 1px 0 #ffffff78;
  }
  .btn-primary {
    background: linear-gradient(170deg, #cfc1a6, var(--apricot) 70%);
    border-color: #ad95674d;
    color: var(--ink);
    box-shadow: 0 2px 3px #7b684412, 0 9px 18px -8px #90794e42,
      inset 0 1px 0 #ffffff8c;
  }
  .btn-secondary { background: #f8f7f259; }
  .btn-ink { box-shadow: 0 3px 4px #11111112, 0 10px 20px -8px #11111150, inset 0 1px 0 #ffffff30; }
  .btn:active, .round-link:active { box-shadow: inset 0 2px 4px #1111111a; }
}

/* Selected tiles carry the full blue and orange; the tray stays recessed. */
.service-modules__tray {
  background-color: var(--blue-soft);
  box-shadow: inset 0 2px 5px #11111112, inset 0 1px 0 #88aa952b;
}
.service-modules__module {
  box-shadow: var(--shadow-small), inset 0 1px 0 #ffffffc9;
}
.service-modules__module[aria-pressed="true"] {
  background: linear-gradient(150deg, #d4e1d9, #aac3b4);
  border-color: #86a993;
  box-shadow: 0 2px 4px #11111112, 0 9px 18px -8px #26382d48, inset 0 1px 0 #ffffffbb;
}
.service-modules__module--follow-through[aria-pressed="true"] {
  background: linear-gradient(150deg, #dacfba, #c3b290);
  border-color: #b39e78;
}
.service-modules__module[aria-pressed="true"] :is(.service-modules__number,
  .service-modules__module-summary, .service-modules__selected-mark,
  .service-modules__icon) { color: var(--ink); }
.service-modules__module[aria-pressed="true"] .service-modules__icon { stroke: var(--ink); }
.session-agenda { background: linear-gradient(125deg, #d4e0d9, #c9d4c4); }
.session-agenda-intro>p, .session-agenda-status,
.work-compare-after .work-compare-owner-label,
.work-compare-next small, .work-compare-next div>span,
.founder-paths__convergence p:last-child { color: #3c5142; }
.session-agenda-picker { background: #e8eeeab3; }
.session-agenda-icon { background: var(--blue); border-color: #a3bdad; }
.work-compare-captured, .work-compare-next { background: var(--blue-soft); border-color: #b8ccc0; }
.work-compare-after .work-compare-owner { background: var(--blue); color: var(--ink); }
.work-compare-icon-peach, .founder-paths__track-tag { background: var(--apricot-soft); color: var(--ink); }
.founder-paths__track--dylan .founder-paths__track-tag { background: var(--blue); color: var(--ink); }
.founder-paths__origin { background: #e7eeea; }
.founder-paths__convergence { background: var(--blue-soft); border-color: #bccfc3; }
.booking-host { background: linear-gradient(145deg, #d4e1d9, #e4ece7); }
.booking-days button:not(:disabled) { background: var(--blue-soft); }
.booking-days button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.booking-confirmation { background: var(--blue-soft); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .round-link:hover { box-shadow: var(--shadow-card); }
  .btn-primary:hover { background: linear-gradient(170deg, #d1c3a9, #bda985); }
  .premium-offer:hover, .premium-offer:focus-within,
  .js.motion-on .premium-offer[data-tilt].is-visible.tilt-active {
    box-shadow: var(--shadow-raised);
  }
  .service-modules__module:hover { box-shadow: var(--shadow-card); }
  .booking-days button:not(:disabled):not([aria-pressed="true"]):hover { background: var(--blue); color: var(--ink); }
  .booking-days button[aria-pressed="true"]:hover { background: var(--ink); color: var(--cream); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .round-link, .service-modules__module { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .btn-secondary { background: var(--paper); }
}

/* A visible contact shadow keeps the lift apparent even without movement. */
@media screen {
  :is(.founder-portrait, .founder-duo img, .story-picture,
      .page-hero-media>img, .company-story-photo>img, .crew-photo>img,
      .story-wide>img, .services-note img) {
    box-shadow: var(--shadow-raised);
  }
  .founder-portrait { border: 1px solid #ffffffc9; }
  .offer-hero .page-hero-media.offer-editorial>img { box-shadow: var(--shadow-raised); }
  :is(.direct-build, .free-call-strip, .service-modules,
      .founder-paths__crew, .founder-paths .founder-paths__proof,
      .booking-picked-summary, .booking-topic-note, .booking-confirmation,
      .booking-demo-note) { box-shadow: var(--shadow-card); }
  :is(.work-compare-note, .work-compare-draft, .work-compare-next,
      .sys-flow-tool, .sys-flow-founder, .availability-day,
      .service-modules__links a, .phone-controls button,
      .booking-times button, .booking-sample-button) { box-shadow: var(--shadow-small); }
  .search-query, .session-agenda-options button { box-shadow: var(--shadow-small); }
  .session-agenda-options button[aria-pressed=true],
  .session-agenda-options button:not(:disabled):hover,
  .founder-paths__project:hover { box-shadow: var(--shadow-card); }

  /* Framed images inside an already raised frame need only an edge. */
  .offer-hero .offer-product-view>img { box-shadow: var(--shadow-small); }

  :where(.btn, .dock-cta, .round-link, .service-modules__links a) {
    --cta-top: #f8f7f2;
    --cta-bottom: #e4ece7;
    --cta-edge: #96b0a0;
    --cta-shadow: #26382d38;
  }
  :is(.btn, .dock-cta, .round-link, .service-modules__links a) {
    background: linear-gradient(172deg, #ffffff42, #ffffff00 52%),
      linear-gradient(var(--cta-top), var(--cta-bottom));
    border: 1px solid #94af9e5e;
    box-shadow: 0 3px 0 var(--cta-edge), 0 9px 16px -3px var(--cta-shadow),
      inset 0 1px 0 #ffffffbd, inset 0 -1px 0 #26382d1a;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
  }
  .btn-primary {
    --cta-top: #cdbda1;
    --cta-bottom: #c0ad89;
    --cta-edge: #9f895f;
    --cta-shadow: #77644145;
    border-color: #a6906873;
  }
  .btn-ink, .dock-cta {
    --cta-top: #44614f;
    --cta-bottom: #26382d;
    --cta-edge: #1b251f;
    --cta-shadow: #26382d50;
    border-color: #374d3f;
    color: var(--cream);
  }
  .service-modules__module {
    box-shadow: 0 3px 0 #b7c6bd, 0 9px 16px -3px #26382d38,
      inset 0 1px 0 #ffffffeb, inset 0 -1px 0 #26382d12;
  }
  .service-modules__module[aria-pressed="true"] {
    box-shadow: 0 3px 0 #7da38c, 0 13px 20px -3px #26382d42, inset 0 1px 0 #ffffffd9;
  }
  .service-modules__module--follow-through[aria-pressed="true"] {
    box-shadow: 0 3px 0 #a79470, 0 13px 20px -3px #7d6b4a42, inset 0 1px 0 #ffffffd9;
  }
  @media (hover: hover) and (pointer: fine) {
    :is(.btn, .dock-cta, .round-link, .service-modules__links a):hover {
      background: linear-gradient(172deg, #ffffff52, #ffffff00 52%),
        linear-gradient(var(--cta-top), var(--cta-bottom));
      box-shadow: 0 3px 0 var(--cta-edge), 0 13px 21px -3px var(--cta-shadow),
        inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #26382d1a;
    }
    .service-modules__module:not([aria-pressed="true"]):hover {
      box-shadow: 0 3px 0 #a6bbae, 0 12px 20px -3px #26382d42, inset 0 1px 0 #ffffffeb;
    }
  }
  :is(.btn, .dock-cta, .round-link, .service-modules__links a):active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--cta-edge), 0 3px 6px #26382d24, inset 0 2px 4px #26382d20;
  }
  @media (prefers-reduced-motion: reduce) {
    :is(.btn, .dock-cta, .round-link, .service-modules__links a) { transition: none; }
  }
}

/* Forest edition: color roles only; original structure and effects retained. */
@media screen {
 .btn-primary,.btn-ink,.dock-cta {--cta-top:#38503f;--cta-bottom:#26382d;--cta-edge:#17251c;--cta-shadow:#11111145;border-color:#a58a5866;color:#f5f3ed;}
 .btn-primary:hover,.btn-ink:hover,.dock-cta:hover {color:#f5f3ed;}
 .btn-primary {background:linear-gradient(172deg,#ffffff42,#ffffff00 52%),linear-gradient(var(--cta-top),var(--cta-bottom));}
 .btn-primary:hover {background:linear-gradient(172deg,#ffffff42,#ffffff00 52%),linear-gradient(#45604e,#334938);}
 .service-modules__module[aria-pressed="true"] {background:linear-gradient(150deg,#38503f,#26382d);border-color:#a58a58;color:#f5f3ed;}
 .service-modules__module[aria-pressed="true"] :is(.service-modules__number,.service-modules__module-summary,.service-modules__selected-mark,.service-modules__icon){color:#f5f3ed;}
 .service-modules__module[aria-pressed="true"] .service-modules__icon {stroke:#f5f3ed;}
 .service-modules__module--follow-through[aria-pressed="true"] {background:linear-gradient(150deg,#b9a171,#a58a58);color:#111111;border-color:#8e7546;}
 .service-modules__module--follow-through[aria-pressed="true"] :is(.service-modules__number,.service-modules__module-summary,.service-modules__selected-mark,.service-modules__icon){color:#111111;}
 .service-modules__module--follow-through[aria-pressed="true"] .service-modules__icon{stroke:#111111;}
 .service-modules__module[aria-pressed="true"]:disabled {-webkit-text-fill-color:#f5f3ed;}
 .service-modules__module--follow-through[aria-pressed="true"]:disabled {-webkit-text-fill-color:#111111;}
}