/*
 * DeepDiveDigital internal content system.
 *
 * Hero h1 sizing and hero art remain page-specific. Shared labels and hero
 * descriptions follow the typography contract below.
 * It normalises repeated content headings and icon components after each
 * page's local stylesheet, while page-specific composition stays local.
 */

:root {
  --ddd-font-family: "Manrope", Arial, sans-serif;
  --ddd-label-size: 12px;
  --ddd-hero-description-size: 18px;
  --ddd-hero-description-leading: 1.65;
  --ddd-content-title-primary: 72px;
  --ddd-content-title-compact: 64px;
  --ddd-content-title-price: 58px;
  --ddd-content-title-technical: 50px;
  --ddd-content-title-article: 36px;
  --ddd-content-title-legal: 27px;
  --ddd-format-icon-box: 82px;
  --ddd-format-icon-art: 56px;
  --ddd-step-icon-box: 68px;
  --ddd-step-icon-art: 46px;
}

/* One typography contract for every regular page, including Privacy.
 * Important declarations intentionally supersede legacy local overrides,
 * including low-landscape and page-specific paragraph rules. Relax is exempt.
 */
body:not(.relax) :is(.eyebrow, .kicker, .privacy-eyebrow, .services-kicker, .not-found-kicker) {
  font-family: var(--ddd-font-family) !important;
  font-size: var(--ddd-label-size) !important;
}

body:not(.relax) .hero-lead,
body:not(.relax) :is(.about-hero-copy, .portfolio-hero-copy, .contacts-hero-copy, .privacy-hero-copy, .trademark-hero-copy) > p:not(.eyebrow):not(.kicker) {
  font-family: var(--ddd-font-family) !important;
  font-size: var(--ddd-hero-description-size) !important;
  line-height: var(--ddd-hero-description-leading) !important;
}

@media (max-width: 760px) {
  :root {
    --ddd-hero-description-size: 16px;
    --ddd-hero-description-leading: 1.6;
  }
}

/* Primary internal section headings. */
body .section-head h2,
body .reviews .section-head h2,
body .section-heading h2,
body .process-head h2,
body .cases-head h2,
body .cases-heading h2,
body .faq-grid > div:first-child > h2,
body .about-intro h2,
body .about-route h2,
body .about-section-head h2,
body .film-head h2,
body .contact-heading h2,
body .office-radar-copy h2,
body .services-directions-head h2,
body .portfolio-heading h2,
body .blog .section-head h2,
body .section-intro h2,
body .seo-results-head h2 {
  font-size: var(--ddd-content-title-primary);
}

/* Compact and conversion-focused sections. */
body .approach-copy h2,
body .consultation h2,
body .audit-summary h2,
html.concept-deep body .audit-summary h2,
body .about-cta h2,
body .services-request h2,
body .portfolio-cta h2,
body .contact-form-copy h2,
body .technologies .section-head h2,
body.reviews-page .reviews-cta h2,
body.blog-page .blog-cta h2,
body .ai-head h2 {
  font-size: var(--ddd-content-title-compact);
}

/* Price, scope and additional-content headings. */
body .dev-price-copy h2,
body .scope-intro h2,
body .price-card h2,
body .article-related .section-head h2,
body .trademark-proof-copy h2 {
  font-size: var(--ddd-content-title-price);
}

/* Dense technical labels and article hierarchy. */
body .certification-head h2 {
  font-size: var(--ddd-content-title-technical);
}

body .article-body h2 {
  font-size: var(--ddd-content-title-article);
}

html.concept-deep body.article-page .article-body h2 {
  font-size: var(--ddd-content-title-article);
}

body .legal-aside h2 {
  font-size: var(--ddd-content-title-legal);
}

/* Service pages carry a high-specificity concept skin on mobile. Keep the
   shared hierarchy authoritative without using !important. */
html.concept-deep body .section-heading h2,
html.concept-deep body .process-head h2,
html.concept-deep body .cases-head h2,
html.concept-deep body .cases-heading h2,
html.concept-deep body .faq-grid > div:first-child > h2,
html.concept-deep body .section-intro h2,
html.concept-deep body .portfolio-heading h2,
html.concept-deep body.blog-page .blog-latest .section-head h2 {
  font-size: var(--ddd-content-title-primary);
}

html.concept-deep body .audit-summary h2,
html.concept-deep body .ai-head h2,
html.concept-deep body.reviews-page .reviews-cta h2,
html.concept-deep body.blog-page .blog-cta h2 {
  font-size: var(--ddd-content-title-compact);
}

html.concept-deep body .dev-price-copy h2,
html.concept-deep body .scope-intro h2,
html.concept-deep body .price-card h2 {
  font-size: var(--ddd-content-title-price);
}

/* Repeated direction-card icons. Images and SVGs share one optical frame. */
body:not(.service-hub-page) .format-icon {
  width: var(--ddd-format-icon-box);
  height: var(--ddd-format-icon-box);
}

html.concept-deep body .context-formats .format-icon,
html.concept-deep body.automation-page:not(.service-hub-page) .format-card .format-icon {
  width: var(--ddd-format-icon-box);
  height: var(--ddd-format-icon-box);
}

body:not(.service-hub-page) .format-icon > :is(svg, img) {
  width: var(--ddd-format-icon-art);
  height: var(--ddd-format-icon-art);
  object-fit: contain;
}

html.concept-deep body .context-formats .format-icon > :is(svg, img),
html.concept-deep body.automation-page:not(.service-hub-page) .format-card .format-icon > :is(svg, img) {
  width: var(--ddd-format-icon-art);
  height: var(--ddd-format-icon-art);
  object-fit: contain;
}

/* Repeated process-step icons. */
body .step-icon {
  width: var(--ddd-step-icon-box);
  height: var(--ddd-step-icon-box);
}

body .step-icon > :is(svg, img) {
  width: var(--ddd-step-icon-art);
  height: var(--ddd-step-icon-art);
  object-fit: contain;
}

/* Optical corrections: same frame, deliberately different inner scale. */
body .content-icon--sonar > :is(svg, img),
body .format-icon--sonar > :is(svg, img) {
  transform: scale(1.12);
}

body .content-icon--light > :is(svg, img),
body .format-icon--light > :is(svg, img) {
  transform: scale(1.06);
}

body .content-icon--dense > :is(svg, img),
body .format-icon--dense > :is(svg, img) {
  transform: scale(.95);
}

/* Desktop case carousels keep one complete central project while revealing
   the adjacent cards as a clear cue that the track can be navigated. */
@media (min-width: 761px) {
  body .dev-cases .case-viewport {
    --ddd-case-card-width: min(1180px, calc(100vw - 48px));
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    overflow: hidden;
    border-radius: 0;
  }

  body .dev-cases .case-track {
    width: 100%;
    gap: 22px;
    padding: 10px max(24px, calc((100vw - var(--ddd-case-card-width)) / 2)) 32px;
    scroll-padding-inline: max(24px, calc((100vw - var(--ddd-case-card-width)) / 2));
    box-sizing: border-box;
  }

  body .dev-cases .dev-case-card {
    width: var(--ddd-case-card-width);
    min-width: var(--ddd-case-card-width);
    max-width: var(--ddd-case-card-width);
    flex: 0 0 var(--ddd-case-card-width);
    /* Explicit zero minima avoid Safari's intrinsic grid sizing inside the
       horizontal flex track, which otherwise leaves unused space on the right. */
    grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
  }

  body .dev-cases .dev-case-card > :is(.dev-case-info, .dev-case-shot) {
    min-width: 0;
  }

  body .dev-cases .dev-case-info h3 {
    overflow-wrap: anywhere;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  :root {
    --ddd-content-title-primary: 56px;
    --ddd-content-title-compact: 50px;
    --ddd-content-title-price: 46px;
    --ddd-content-title-technical: 42px;
    --ddd-content-title-article: 34px;
    --ddd-content-title-legal: 25px;
    --ddd-format-icon-box: 76px;
    --ddd-format-icon-art: 52px;
    --ddd-step-icon-box: 58px;
    --ddd-step-icon-art: 39px;
  }
}

@media (max-width: 760px) {
  :root {
    --ddd-content-title-primary: 46px;
    --ddd-content-title-compact: 42px;
    --ddd-content-title-price: 42px;
    --ddd-content-title-technical: 37px;
    --ddd-content-title-article: 32px;
    --ddd-content-title-legal: 24px;
    --ddd-format-icon-box: 72px;
    --ddd-format-icon-art: 49px;
    --ddd-step-icon-box: 48px;
    --ddd-step-icon-art: 33px;
  }
}