/* Shared public typography. Page geometry, artwork and content stay in their own stylesheets. */
:root {
  --type-brand: clamp(3.25rem, 1.45rem + 6.1vw, 7rem);
  --type-display: clamp(2.75rem, 1.15rem + 4.55vw, 5.5rem);
  --type-page: clamp(2.625rem, 1.2rem + 4.4vw, 4.75rem);
  --type-section: clamp(2rem, 1.22rem + 2.6vw, 3.5rem);
  --type-feature: clamp(1.875rem, 1.1rem + 2.35vw, 3.25rem);
  --type-card: clamp(1.75rem, 1.15rem + 1.65vw, 2.75rem);
  --type-panel: clamp(1.625rem, 1.1rem + 1.25vw, 2rem);
  --type-lead: clamp(1.0625rem, .94rem + .42vw, 1.25rem);
  --type-body: clamp(1rem, .94rem + .22vw, 1.125rem);
  --type-ui: .9375rem;
  --type-small: .875rem;
  --type-caption: .8125rem;
  --type-micro: .75rem;
  --type-ink: #f0f5f7;
  --type-copy: #b8c7d1;
  --type-muted: #9fb2bf;
  --type-accent: #b4edf2;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--bogom-font-sans); font-size: 1rem; font-weight: 420; line-height: 1.65;
  font-optical-sizing: auto; font-kerning: normal; font-synthesis: none;
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
}
button,input,textarea,select { font-family: var(--bogom-font-sans); font-optical-sizing: auto; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--bogom-font-sans); font-weight: 600;
  font-optical-sizing: auto; text-wrap: balance; overflow-wrap: break-word;
}
p,li { text-wrap: pretty; }
strong,b { font-weight: 650; }
a { text-decoration-skip-ink: auto; text-decoration-thickness: 1px; }
input,textarea { text-wrap: wrap; }
::selection { color: #f5fbff; background: #275762; text-shadow: none; }

/* A consistent scale, expressed in rem so browser text-size preferences still apply. */
body .service-hero .service-hero-grid h1,
body .sites-v2 .sites-hero h1,
body.apps-page .hero h1,
body.ai-page .ai-hero h1,
body.media-page .hero h1 {
  font-size: var(--type-display); font-weight: 610; line-height: 1.055;
  letter-spacing: -.05em; color: var(--type-ink); text-shadow: 0 3px 24px #01070a29;
}
body .showcase-hero h1 {
  font-size: var(--type-brand); font-weight: 620; line-height: 1.015; letter-spacing: -.057em;
}
body.prices-page .prices-intro h1,
body.showcase-contact-page .showcase-contact h1,
body.v2-inner .page-hero h1 {
  font-size: var(--type-page); font-weight: 610; line-height: 1.065; letter-spacing: -.048em;
}
body .showcase-hero h1 > span,
body .showcase-contact h1 > span,
body.apps-page #web-title span {
  white-space: normal;
}
body main .section-heading h2,
body .message-copy h2,
body .ai-panel h2,
body .manifest h2,
body .sites-v2 .sites-section-heading h2,
body .sites-v2 .sites-approach-copy h2,
body .sites-v2 .sites-contact-panel h2,
body.apps-page .approach-copy h2,
body.apps-page .contact-panel h2,
body.media-page .approach-copy h2,
body.media-page .contact-panel h2,
body.ai-page .section-pair h2,
body.ai-page .ai-contact h2 {
  font-size: var(--type-section); font-weight: 590; line-height: 1.12; letter-spacing: -.04em; color: var(--type-ink);
}
body .sites-v2 .sites-type-card h3,
body .sites-v2 .sites-difference-intro h2,
body.apps-page .type-card h2,
body.apps-page #web-title,
body.apps-page .difference-intro h2,
body.media-page .type-card h2,
body.media-page .difference-intro h2,
body.ai-page .ai-service h2,
body.ai-page .ai-service--illustrated h2,
body .showcase-presence .showcase-presence-copy h2 {
  font-size: var(--type-feature); font-weight: 590; line-height: 1.14; letter-spacing: -.037em;
}
body .direction-card h3,
body.prices-page .barter-copy h2,
body.prices-page .price-contact h2 {
  font-size: var(--type-card); font-weight: 590; line-height: 1.16; letter-spacing: -.034em;
}
body .showcase-compose-heading h2,
body .quick-contact h2,
body .v2-consultant h2,
body.prices-page .price-group h2,
body.v2-inner .legal-prose h2 {
  font-family: var(--bogom-font-sans); font-size: var(--type-panel); font-weight: 600; line-height: 1.2; letter-spacing: -.028em;
}
body .process {
  font-size: var(--type-section); font-weight: 520; line-height: 1.2; letter-spacing: -.035em;
}
body .process strong {
  font-weight: 620;
}

/* Paragraphs remain crisp and calm, including those next to the illustrated service stories. */
body .service-hero .service-hero-lead,
body .sites-v2 .sites-hero-lead,
body.apps-page .hero-lead,
body.ai-page .ai-hero p,
body.media-page .hero-lead,
body .showcase-hero-lead,
body .showcase-contact-lead,
body .prices-lead,
body.v2-inner .page-hero .lead {
  font-size: var(--type-lead); font-weight: 420; line-height: 1.7; letter-spacing: 0;
  color: var(--type-copy); text-wrap: pretty; text-shadow: none;
}
body .direction-card p,
body .message-copy p,
body .ai-panel p,
body .manifest p,
body .sites-v2 .sites-type-description,
body .sites-v2 .sites-section-heading > p:last-child,
body .sites-v2 .sites-difference-intro > p:last-child,
body .sites-v2 .sites-approach-lead,
body .sites-v2 .sites-approach-note,
body .sites-v2 .sites-contact-panel > p:not(.sites-eyebrow),
body.apps-page .type-description,
body.apps-page .difference-intro p,
body.apps-page .approach-lead,
body.apps-page .contact-copy p,
body.media-page .type-description,
body.media-page .difference-intro p,
body.media-page .approach-lead,
body.media-page .approach-note,
body.media-page .contact-panel p:not(.eyebrow),
body.ai-page .ai-service p,
body.ai-page .section-pair p,
body.ai-page .ai-contact p,
body.prices-page .barter-copy p,
body.prices-page .price-contact p,
body .showcase-presence-copy > p:not(.showcase-eyebrow) {
  font-size: var(--type-body); font-weight: 420; line-height: 1.7; letter-spacing: 0;
  color: var(--type-copy); text-shadow: none;
}
body .ai-capability strong {
  font-size: 1.125rem; font-weight: 570; line-height: 1.4; letter-spacing: -.012em;
}
body .ai-capability span {
  font-size: 1rem; font-weight: 420; line-height: 1.65; color: var(--type-copy);
}
body.v2-inner .legal-prose {
  max-width: 72ch; font-size: var(--type-body);
}
body.v2-inner .legal-prose p,
body.v2-inner .legal-prose li {
  line-height: 1.8; color: var(--type-copy);
}
body .showcase-eyebrow,
body .showcase-contact-intro .showcase-eyebrow,
body .showcase-compose-heading .showcase-eyebrow,
body .showcase-presence-copy .showcase-eyebrow,
body .sites-v2 .sites-eyebrow,
body .sites-v2 .sites-type-label,
body.media-page .eyebrow,
body.apps-page .eyebrow,
body.ai-page .eyebrow,
body .message-ai-label,
body .small-label,
body.v2-inner .eyebrow,
body .v2-consultant .eyebrow {
  font-size: var(--type-micro); font-weight: 580; line-height: 1.6; letter-spacing: .075em; color: #b6c9d4;
}
body .sites-v2 .sites-type-meta {
  font-size: var(--type-caption); font-weight: 550; line-height: 1.6; letter-spacing: .015em;
}

/* Header and buttons share the same reading weight; no letter-spacing jumps on hover. */
body .public-nav a,
body .public-quick-mobile,
body .public-menu {
  font-family: var(--bogom-font-sans); font-size: var(--type-small); font-weight: 500; line-height: 1.4; letter-spacing: 0;
}
body .public-nav a.public-write,
body .public-quick-mobile {
  font-weight: 610;
}
body .public-phone-desktop {
  font-size: var(--type-small); font-weight: 480; font-variant-numeric: lining-nums tabular-nums;
}
body .public-header .public-brand {
  font-family: var(--bogom-font-sans); font-weight: 760;
}
body .public-header .public-brand:is(:hover,:focus-visible) {
  letter-spacing: .155em; transform: none; animation-iteration-count: 1; filter: drop-shadow(0 0 14px #7deaff24);
}
body .showcase-button,
body .showcase-footer .showcase-button,
body .showcase-hero .showcase-button,
body .sites-v2 .sites-primary-button,
body.apps-page .primary-button,
body.media-page .primary-button,
body.ai-page .primary-button,
body.prices-page .primary-button,
body .message-actions button,
body .process-button,
body .quick-submit,
body .showcase-contact .quick-submit,
body.v2-inner .button,
body .v2-consultant .button,
body .not-found-home {
  font-family: var(--bogom-font-sans); font-size: var(--type-ui); font-weight: 610;
  line-height: 1.4; letter-spacing: 0; text-shadow: none;
}
body .showcase-text-link,
body .showcase-hero .showcase-text-link,
body .showcase-presence-copy .showcase-text-link {
  font-size: var(--type-small); font-weight: 520; line-height: 1.5; text-underline-offset: .3em;
}
body .quick-field :is(input,textarea),
body .showcase-contact .quick-field :is(input,textarea),
body .message-box textarea,
body.v2-inner :is(input,select,textarea),
body .v2-consultant :is(input,select,textarea) {
  font-family: var(--bogom-font-sans); font-size: 1rem; font-weight: 420; line-height: 1.6; letter-spacing: 0;
}
body .quick-field label,
body .showcase-contact .quick-field label,
body .contact-form label {
  font-size: var(--type-small); font-weight: 520; line-height: 1.5;
}
body .quick-contact #quick-contact-intro,
body .showcase-compose-heading > p:last-child,
body .quick-status,
body .showcase-contact .quick-status,
body .quick-error,
body .showcase-contact .quick-error {
  font-size: var(--type-small); line-height: 1.65; letter-spacing: 0;
}
body .quick-consent,
body .showcase-contact .quick-consent,
body .showcase-compose-note {
  font-size: var(--type-caption); line-height: 1.65; letter-spacing: 0;
}
body .quick-contact-brand,
body .quick-direct > span,
body .quick-close {
  font-size: var(--type-caption);
}
body .analytics-consent {
  font-family: var(--bogom-font-sans); font-size: var(--type-small); font-weight: 420; line-height: 1.6;
}
body .analytics-consent button {
  font-weight: 570;
}

/* Readable details and stable, aligned numbers. */
body.prices-page .price-group tbody th {
  font-size: 1rem; font-weight: 470; line-height: 1.6;
}
body.prices-page .price-group tbody td {
  font-size: 1rem; font-weight: 600; line-height: 1.6; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.015em;
}
body.prices-page .price-group thead th,
body.prices-page .service-detail,
body.prices-page .price-note {
  font-size: var(--type-caption); line-height: 1.65; color: var(--type-muted);
}
body.prices-page .price-navigation a {
  font-size: var(--type-small); font-weight: 500; line-height: 1.5;
}
body.prices-page .custom-project {
  font-size: 1rem; line-height: 1.6;
}
body.prices-page .custom-project span:last-child {
  font-size: var(--type-small); font-weight: 550;
}
body .showcase-hero-price,
body .showcase-hero-price span,
body .showcase-hero-price strong {
  font-size: var(--type-caption); line-height: 1.6;
}
body .showcase-hero-price strong {
  font-weight: 570;
}
body .showcase-hero-rail,
body .showcase-hero-rail > span,
body .showcase-hero-rail a {
  font-size: var(--type-micro); letter-spacing: 0; line-height: 1.6;
}
body .showcase-hero-art figcaption,
body .showcase-presence-art figcaption,
body .showcase-presence-art figcaption span {
  font-size: var(--type-micro); line-height: 1.6;
}
body .showcase-contact-direct-label,
body .showcase-contact-channel > span,
body .showcase-contact-geography,
body .showcase-footer .showcase-footer-label,
body .showcase-footer .showcase-footer-location {
  font-size: var(--type-caption); color: var(--type-muted); line-height: 1.65;
}
body .showcase-contact-messengers a,
body .showcase-contact-shortcut,
body .showcase-footer .showcase-footer-navigation a,
body .showcase-footer .showcase-footer-social a {
  font-size: var(--type-small); font-weight: 450; line-height: 1.6;
}
body .showcase-contact-channel > strong,
body .showcase-footer .showcase-footer-contacts > a {
  font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.015em;
}
body .showcase-footer .showcase-footer-brand {
  font-size: 1.75rem; font-weight: 720; letter-spacing: .12em;
}
body .showcase-footer .showcase-footer-tagline {
  font-size: var(--type-small); font-weight: 470;
}
body .showcase-footer .showcase-footer-signature,
body .showcase-footer .showcase-footer-top-link,
body .showcase-footer .public-footer-legal a,
body .showcase-footer .public-footer-legal button {
  font-size: var(--type-micro); font-weight: 450; line-height: 1.6;
}
body.media-page .music-toggle__action,
body.media-page .music-platforms__links a {
  font-size: var(--type-caption);
}
body.media-page .music-toggle__title {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em;
}
body.media-page .music-status,
body.media-page .music-platforms__label {
  font-size: var(--type-small); line-height: 1.6;
}
body .not-found-quotation p {
  font-weight: 500; line-height: 1.35; letter-spacing: -.026em;
}
body .not-found-label,
body .not-found-quotation figcaption {
  font-size: var(--type-micro); line-height: 1.6;
}

/* A restrained ice-to-champagne sheen is reserved for the primary headline accents. */
body .showcase-hero h1 > span,
body .service-hero h1 .hero-accent,
body .service-hero h1 .type-accent,
body.ai-page .ai-hero h1 > span,
body .prices-intro h1 > span,
body .showcase-contact h1 > span {
  color: var(--type-accent); text-shadow: 0 1px 0 #edfdff0d;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
body .showcase-hero h1 > span,
body .service-hero h1 .hero-accent,
body .service-hero h1 .type-accent,
body.ai-page .ai-hero h1 > span,
body .prices-intro h1 > span,
body .showcase-contact h1 > span {
  background: linear-gradient(108deg,#eef9fb 0%,#b8f0f4 42%,#d3eef0 68%,#e2ccae 100%) 0 50% / 180% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 20px #83dff41a);
}
}
@media (hover: hover) {
  .public-header .public-nav a:not(.public-write):hover,
  .showcase-footer .showcase-footer-navigation a:hover {
    text-shadow: 0 0 18px #8ce8f32e;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .showcase-hero h1 > span { animation: bogom-type-sheen 2.2s cubic-bezier(.22,1,.36,1) 1; }
}
@keyframes bogom-type-sheen { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@media (max-width: 960px) {
  :root {
    --type-display: clamp(2.625rem, 1rem + 6.5vw, 4.75rem);
    --type-page: clamp(2.5rem, 1rem + 5.4vw, 4.25rem);
    --type-section: clamp(2rem, 1.15rem + 3.1vw, 3.25rem);
    --type-feature: clamp(1.875rem, 1.05rem + 3vw, 3rem);
  }
  body .public-header .public-nav a { font-size: var(--type-ui); }
}
@media (max-width: 620px) {
  :root {
    --type-brand: clamp(3.125rem, 1.65rem + 6.5vw, 4.5rem);
    --type-display: clamp(2.5rem, 1.55rem + 3.7vw, 3.25rem);
    --type-page: clamp(2.375rem, 1.45rem + 3.9vw, 3.125rem);
    --type-section: clamp(1.875rem, 1.1rem + 3.3vw, 2.5rem);
    --type-feature: clamp(1.75rem, 1.05rem + 3.2vw, 2.375rem);
    --type-card: clamp(1.625rem, 1.1rem + 2.5vw, 2.125rem);
  }
  body .showcase-hero h1 { line-height: 1.04; letter-spacing: -.05em; }
  body .service-hero .service-hero-grid h1 { line-height: 1.09; letter-spacing: -.04em; }
  body.prices-page .price-group tbody th,
  body.prices-page .price-group tbody td { font-size: var(--type-small); }
  body.prices-page .price-group thead th { font-size: var(--type-micro); }
  body.prices-page .service-detail { font-size: var(--type-micro); }
  body.prices-page .custom-project { flex-wrap: wrap; gap: 10px 18px; }
  body.prices-page .custom-project span:last-child { white-space: normal; }
  body .showcase-hero-rail { column-gap: 16px; }
  body .showcase-footer .showcase-footer-brand { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-hero h1 > span { animation: none; }
  body .public-header .public-brand:is(:hover,:focus-visible) { animation: none; }
}
@media (forced-colors: active) {
body .showcase-hero h1 > span,
body .service-hero h1 .hero-accent,
body .service-hero h1 .type-accent,
body.ai-page .ai-hero h1 > span,
body .prices-intro h1 > span,
body .showcase-contact h1 > span {
  color: CanvasText; background: none; -webkit-text-fill-color: CanvasText; text-shadow: none; filter: none;
}
  body .public-header .public-brand:is(:hover,:focus-visible) {
    color: LinkText; background: none; -webkit-text-fill-color: LinkText; filter: none;
  }
}