/* v955 canonical desktop layout system.
   Desktop >=821px responds to the real content lane, including AI rail width.
   Sections are inline-size containers; children reflow from section width.
   Height changes density continuously. No CSS zoom or transform scaling. */
@media (min-width: 821px) {
  html:root {
    --container: clamp(1380px, 88vw, 3000px);
    --dst-page-gutter: clamp(20px, 2.35vw, 34px);
    --dst-header-height: clamp(62px, min(8vh, 4.2vw), 96px);
    --dst-section-pad-block: clamp(20px, min(3.8vh, 1.8vw), 48px);
    --dst-section-gap: clamp(12px, min(2.2vh, 1.05vw), 26px);
    --dst-card-pad-y: clamp(14px, min(2.6vh, 1.15vw), 28px);
    --dst-control-h: clamp(36px, min(5.5vh, 2.7vw), 52px);
    --dst-body-size: clamp(13.5px, min(1.8vh, .95vw), 18px);
    --dst-small-size: clamp(11.4px, min(1.55vh, .8vw), 14.5px);
    --dst-radius: clamp(18px, min(2.5vh, 1.15vw), 30px);
    /* Contact anchor owns a combined Contact + legal-footer first-screen composition. */
    --dst-contact-footer-reserve: clamp(72px, 7vh, 82px);
    --dst-contact-section-trim: clamp(28px, 2.8vh, 32px);
    --dst-contact-anchor-bottom-breathing: clamp(34px, 3.2vh, 48px);
    --dst-hero-cta-info-gap: clamp(24px, 3vh, 34px);
    --dst-service-card-min: clamp(158px, 19.5vh, 182px);
    --dst-service-icon-size: clamp(36px, 3cqi, 40px);
    --dst-service-icon-inset: clamp(15px, 1.45cqi, 21px);
    --dst-ai-expanded-rail-width: clamp(425px, 18vw, 620px);
  }

  /* Canonical desktop assistant rail. This replaces old 2200/3200 jumps. */
  html.ai-rail-enabled {
    --ai-rail-width: var(--dst-ai-expanded-rail-width) !important;
    --ai-rail-left-shift: calc(var(--ai-rail-width) / -2) !important;
  }
  html.ai-rail-enabled,
  html.ai-rail-collapsed {
    /* The site lane keeps the expanded rail measure in both states. Opening or
       collapsing the assistant therefore never changes section width, text
       wrapping, or grid column count. Only the stable lane position moves. */
    --dst-ai-layout-reserve: var(--dst-ai-expanded-rail-width) !important;
    --site-active-right-rail: var(--dst-ai-layout-reserve) !important;
    --site-active-lane-width: calc(100vw - var(--dst-ai-layout-reserve)) !important;
  }

  html { scroll-padding-top: calc(var(--dst-header-height) + 10px) !important; }
  html body { overflow-x: hidden !important; }
  html :is(#home,#about,#services,#process,#pricing,#faq,#resources,#contact) {
    scroll-margin-top: calc(var(--dst-header-height) + 10px) !important;
  }

  /* One owner for the desktop lane. */
  html body .header-inner,
  html body main > :is(#home,#about,#services,#pricing,#faq,#resources,#contact).section-shell,
  html body .site-footer {
    width: min(var(--container), calc(100% - 2 * var(--dst-page-gutter))) !important;
    max-width: var(--container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }
  html.ai-rail-enabled,
  html.ai-rail-collapsed {
    --site-active-content-width: min(var(--container), calc(var(--site-active-lane-width) - 2 * var(--dst-page-gutter)));
  }
  html.ai-rail-enabled {
    --site-active-left-margin: max(var(--dst-page-gutter), calc((var(--site-active-lane-width) - var(--site-active-content-width)) / 2));
  }
  html.ai-rail-collapsed {
    --site-active-left-margin: max(var(--dst-page-gutter), calc((100vw - var(--ai-rail-collapsed-width) - var(--site-active-content-width)) / 2));
  }
  html.ai-rail-enabled body .header-inner,
  html.ai-rail-enabled body main > :is(#home,#about,#services,#pricing,#faq,#resources,#contact).section-shell,
  html.ai-rail-enabled body .site-footer,
  html.ai-rail-collapsed body .header-inner,
  html.ai-rail-collapsed body main > :is(#home,#about,#services,#pricing,#faq,#resources,#contact).section-shell,
  html.ai-rail-collapsed body .site-footer {
    width: var(--site-active-content-width) !important;
    max-width: var(--container) !important;
    margin-left: var(--site-active-left-margin) !important;
    margin-right: 0 !important;
    transform: none !important;
  }
  html.ai-rail-layout-transition body .header-inner,
  html.ai-rail-layout-transition body main > :is(#home,#about,#services,#pricing,#faq,#resources,#contact).section-shell,
  html.ai-rail-layout-transition body .site-footer {
    transition: margin-left 220ms cubic-bezier(.2,.75,.25,1) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    html.ai-rail-layout-transition body .header-inner,
    html.ai-rail-layout-transition body main > :is(#home,#about,#services,#pricing,#faq,#resources,#contact).section-shell,
    html.ai-rail-layout-transition body .site-footer { transition: none !important; }
  }

  /* Header also responds to its actual measure. */
  html body .site-header .header-inner {
    height: var(--dst-header-height) !important;
    min-height: var(--dst-header-height) !important;
    padding: 0 clamp(8px,.75vw,14px) !important;
    gap: clamp(8px,1vw,18px) !important;
    container-type: inline-size;
    container-name: dst-header;
  }
  html body .site-header .brand { width: clamp(160px,15cqi,188px) !important; min-width: clamp(160px,15cqi,188px) !important; }
  html body .site-header .brand img { width: 100% !important; }
  html body .site-header .main-nav { min-width: 0 !important; flex: 1 1 auto !important; gap: clamp(7px,.9cqi,18px) !important; }
  html body .site-header .header-links { min-width: 0 !important; flex: 1 1 auto !important; justify-content: flex-end !important; gap: clamp(4px,.62cqi,13px) !important; white-space: nowrap !important; }
  html body .site-header .header-links a { padding: 8px clamp(3px,.38cqi,7px) !important; font-size: clamp(10.5px,1.03cqi,13px) !important; line-height: 1 !important; }
  html body .site-header .main-nav > .language-switch:not(.language-switch-mobile) { flex: 0 0 auto !important; gap: 4px !important; padding-left: clamp(6px,.65cqi,14px) !important; }
  html body .site-header .main-nav > .language-switch :is(a,button) { min-width: 32px !important; min-height: 31px !important; padding: 6px 7px !important; font-size: clamp(10.6px,.92cqi,12px) !important; }

  /* Every Home section is a responsive context. */
  html body main > :is(#home,#about,#services,#pricing,#faq,#resources,#contact).section-shell {
    container-type: inline-size;
    container-name: dst-section;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: var(--dst-section-pad-block) !important;
    padding-bottom: var(--dst-section-pad-block) !important;
  }
  html.anchor-focus-mode body main > .section-shell.anchor-focus-target:not(#home):not(#contact) {
    height: auto !important;
    min-height: calc(100svh - var(--dst-header-height)) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: var(--dst-anchor-section-pad-top, var(--dst-anchor-pad-top, clamp(16px,2.35vh,28px))) !important;
    padding-bottom: var(--dst-anchor-section-pad-bottom, var(--dst-anchor-pad-bottom, clamp(12px,1.8vh,22px))) !important;
  }
  html.contact-anchor-mode.anchor-focus-mode body #contact.contact.section-shell.anchor-focus-target {
    height: auto !important;
    min-height: calc(100svh - var(--dst-header-height) - var(--dst-contact-footer-reserve) - var(--dst-contact-section-trim)) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: clamp(16px,2.35vh,28px) !important;
    padding-bottom: clamp(8px,1.15vh,14px) !important;
  }
  html.contact-anchor-mode.anchor-focus-mode body { padding-bottom: 0 !important; }
  html.contact-anchor-mode .site-footer { margin-top: 0 !important; }

  html :is(.section-heading,.about-section-heading,.contact-section-heading) { max-width: min(900px,92%) !important; margin: 0 auto var(--dst-section-gap) !important; }
  html :is(.section-heading,.about-section-heading,.contact-section-heading) h2,
  html body main > :is(#services,#pricing,#resources).section-shell .section-heading h2 { font-size: clamp(30px,min(2.9cqi,4.3vh),48px) !important; line-height: 1.08 !important; letter-spacing: -.035em !important; }
  html :is(.section-heading,.about-section-heading,.contact-section-heading) .section-note,
  html body main > :is(#services,#pricing,#resources).section-shell .section-heading .section-note { max-width: 840px !important; margin-top: clamp(5px,.8vh,8px) !important; font-size: clamp(13px,min(1.9vh,.9vw),17px) !important; line-height: 1.38 !important; }
  html :is(.about-card,.about-process-panel,.info-card,.price-card,.step-card,.faq-columns,.contact-card) { border-radius: var(--dst-radius) !important; }

  /* Hero */
  html #home.hero.section-shell { min-height: calc(100svh - var(--dst-header-height)) !important; padding-top: clamp(12px,1.8vh,22px) !important; padding-bottom: clamp(12px,1.8vh,22px) !important; }
  html #home.hero.section-shell > .hero-card,
  html.home-start-clean #home.hero.section-shell > .hero-card,
  html.anchor-focus-mode #home.hero.section-shell.anchor-focus-target > .hero-card {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(250px,32%) !important;
    align-items: stretch !important;
    gap: clamp(20px,2.4cqi,36px) !important;
    width: 100% !important;
    min-height: calc(100svh - var(--dst-header-height) - clamp(24px,3.6vh,44px)) !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(22px,3.3vh,36px) clamp(22px,2.6cqi,38px) !important;
    overflow: hidden !important;
  }
  html #home .hero-copy { display:flex !important; flex-direction:column !important; justify-content:flex-start !important; min-width:0 !important; max-width:none !important; padding:0 !important; }
  html #home .mobile-hero-intro { display:block !important; margin:0 !important; }
  html #home .mobile-portrait-card { display:none !important; }
  html #home.hero.section-shell > .hero-card > .portrait-card { display:grid !important; align-self:stretch !important; justify-self:stretch !important; grid-template-rows:minmax(0,1fr) auto !important; gap:clamp(8px,1vh,11px) !important; width:100% !important; max-width:none !important; }
  html #home .portrait-frame { width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important; aspect-ratio:auto !important; }
  html #home .portrait-frame img { width:100% !important; height:100% !important; object-fit:cover !important; object-position:50% 16% !important; transform:none !important; }
  html #home h1 { width:auto !important; max-width:none !important; margin:0 !important; font-size:clamp(38px,4.15cqi,68px) !important; line-height:1.055 !important; letter-spacing:-.045em !important; text-wrap:balance !important; }
  html #home .hero-subtitle { margin:clamp(16px,2.25vh,24px) 0 0 !important; gap:clamp(3px,.5vh,5px) !important; }
  html #home .hero-subtitle-main { font-size:clamp(17px,1.7cqi,27px) !important; line-height:1.26 !important; }
  html #home .hero-subtitle-sub { font-size:clamp(14px,1.25cqi,20px) !important; line-height:1.34 !important; }
  html #home .hero-summary-list { margin-top:clamp(16px,2.2vh,23px) !important; gap:clamp(7px,1vh,10px) !important; max-width:none !important; }
  html #home .hero-summary-list span { font-size:clamp(13.2px,1.12cqi,18px) !important; line-height:1.34 !important; }
  html #home .hero-actions { margin:clamp(18px,2.7vh,28px) 0 0 !important; }
  html #home .hero-actions .btn { min-height:clamp(44px,5.5vh,52px) !important; padding:10px clamp(20px,2cqi,30px) !important; font-size:clamp(13.5px,1.15cqi,18px) !important; }
  html #home .hero-trust-badges { margin-top:var(--dst-hero-cta-info-gap) !important; padding-top:0 !important; gap:clamp(6px,.65cqi,9px) !important; }
  html #home .hero-trust-badge { min-height:30px !important; padding:6px clamp(8px,.8cqi,11px) !important; font-size:clamp(10.4px,.92cqi,14.5px) !important; }

  /* About/workflow */
  html #about .about-practice-stack { gap:var(--dst-section-gap) !important; }
  html #about :is(.about-card,.about-process-panel) { min-height:0 !important; height:auto !important; padding:var(--dst-card-pad-y) clamp(16px,1.75cqi,28px) !important; }
  html #about .about-card { display:block !important; grid-template-columns:none !important; }
  html #about .about-text { width:100% !important; max-width:none !important; margin-top:clamp(8px,1.1vh,14px) !important; }
  html #about :is(.about-card > div:first-child h2,.about-process-heading h3) { font-size:clamp(22px,2.05cqi,36px) !important; line-height:1.1 !important; }
  html #about :is(.about-text p,.about-process-heading p) { font-size:var(--dst-body-size) !important; line-height:1.42 !important; }
  html #about .credentials-strip { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)) !important; gap:clamp(8px,.8cqi,12px) !important; }
  html #about .credential-item { min-height:0 !important; padding:clamp(9px,1.25vh,13px) clamp(10px,1cqi,14px) !important; }
  html #about .about-process-steps { grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(255px,22cqi,360px)),1fr)) !important; gap:clamp(8px,.85cqi,12px) !important; }
  html #about .about-process-steps .step-card { min-height:clamp(112px,min(18vh,10vw),220px) !important; padding:clamp(11px,1.55vh,16px) 46px clamp(11px,1.55vh,16px) clamp(12px,1.15cqi,16px) !important; }

  /* Services */
  html #services .services-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(214px,20cqi,320px)),1fr)) !important; gap:clamp(10px,1cqi,16px) !important; grid-auto-rows:auto !important; align-items:stretch !important; }
  html #services .service-card,
  html.anchor-focus-mode #services.anchor-focus-target .info-card.service-card {
    min-height:var(--dst-service-card-min) !important;
    height:auto !important;
    align-self:stretch !important;
    padding:clamp(15px,2vh,20px) calc(var(--dst-service-icon-inset) + var(--dst-service-icon-size) + clamp(10px,.8cqi,14px)) clamp(15px,2vh,20px) clamp(15px,1.45cqi,21px) !important;
  }
  html #services .service-icon,
  html.anchor-focus-mode #services.anchor-focus-target .service-icon { top:clamp(15px,2vh,20px) !important; right:var(--dst-service-icon-inset) !important; width:var(--dst-service-icon-size) !important; height:var(--dst-service-icon-size) !important; }
  html #services .service-card h3,
  html.anchor-focus-mode #services.anchor-focus-target .service-card h3 { margin-bottom:7px !important; padding-right:0 !important; }
  html #services .service-card h3 { font-size:clamp(15px,1.35cqi,22px) !important; line-height:1.2 !important; }
  html #services .service-card p { font-size:var(--dst-body-size) !important; line-height:1.42 !important; }

  /* Pricing
     The section owns one continuous desktop density contract. Spacing responds
     to available height, while type size and business logic stay untouched. */
  html #pricing {
    --dst-pricing-pad-y: clamp(10px, 1.55vh, 18px);
    --dst-pricing-title-gap: clamp(4px, .75vh, 8px);
    --dst-pricing-price-gap: clamp(4px, .85vh, 9px);
    --dst-pricing-chip-pad-y: clamp(5px, .85vh, 8px);
    --dst-pricing-price-size: 15px;
    --dst-section-heading-gap: clamp(9px, 1.6vh, 18px);
    --dst-anchor-section-pad-top: clamp(9px, 1.65vh, 20px);
    --dst-anchor-section-pad-bottom: clamp(7px, 1.1vh, 12px);
  }
  html #pricing .pricing-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(230px,24cqi,300px)),1fr)) !important; gap:clamp(10px,1cqi,16px) !important; }
  html #pricing .price-card { min-height:0 !important; padding:var(--dst-pricing-pad-y) clamp(16px,1.55cqi,22px) !important; }
  html #pricing .price-card h3 { margin-bottom:var(--dst-pricing-title-gap) !important; }
  html #pricing .price-card .price { margin-bottom:var(--dst-pricing-price-gap) !important; font-size:var(--dst-pricing-price-size) !important; line-height:1.05 !important; }
  html #pricing .price-addons-card { display:grid !important; grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr) !important; gap:clamp(12px,1.4cqi,20px) !important; margin-top:clamp(8px,1.45vh,16px) !important; padding:var(--dst-pricing-pad-y) clamp(16px,1.55cqi,22px) !important; }
  html #pricing .price-addons-copy h3 { margin-bottom:var(--dst-pricing-title-gap) !important; }
  html #pricing .price-addons-list { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:clamp(7px,.7cqi,10px) !important; }
  html #pricing .price-factor-chip { padding-top:var(--dst-pricing-chip-pad-y) !important; padding-bottom:var(--dst-pricing-chip-pad-y) !important; }
  html #pricing .pricing-estimator-launch { margin-top:clamp(7px,1.05vh,11px) !important; padding:clamp(7px,1vh,11px) clamp(12px,1cqi,16px) !important; gap:clamp(9px,1cqi,14px) !important; }
  html #pricing .pricing-disclaimer-card { margin-top:clamp(6px,.95vh,10px) !important; padding:clamp(7px,1vh,11px) clamp(12px,1cqi,16px) !important; }
  html #pricing .pricing-disclaimer-card strong { margin-bottom:clamp(2px,.45vh,5px) !important; }

  /* Resources */
  html #resources { --dst-resource-card-min: clamp(132px, 8.25cqi, 165px); }
  html #resources .resources-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(210px,18cqi,300px)),1fr)) !important; gap:clamp(10px,1.05cqi,16px) !important; grid-auto-rows:auto !important; align-items:stretch !important; }
  html #resources .resource-card { min-height:var(--dst-resource-card-min) !important; height:100% !important; align-self:stretch !important; padding:var(--dst-card-pad-y) clamp(15px,1.35cqi,20px) !important; }
  html #resources .resource-card h3 { font-size:clamp(15.5px,1.35cqi,22px) !important; line-height:1.2 !important; }
  html #resources .resource-card p { font-size:var(--dst-body-size) !important; line-height:1.42 !important; }

  /* FAQ */
  html #faq :is(.faq-accordion.faq-columns,.faq-columns) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:clamp(14px,1.5cqi,24px) !important; padding:clamp(12px,1.8vh,20px) clamp(12px,1.4cqi,20px) !important; }
  html #faq .faq-group { margin-bottom:clamp(5px,.8vh,9px) !important; }
  html #faq .faq-group + .faq-group { margin-top:clamp(6px,.9vh,10px) !important; padding-top:clamp(6px,.9vh,10px) !important; }
  html #faq .faq-group-title { margin-bottom:clamp(4px,.65vh,7px) !important; font-size:clamp(11.8px,min(1cqi,1.6vh),15.5px) !important; }
  html #faq :is(.faq-accordion summary,.faq-column summary) { min-height:var(--dst-control-h) !important; padding:clamp(7px,1.05vh,10px) 36px clamp(7px,1.05vh,10px) clamp(11px,1cqi,14px) !important; font-size:clamp(12.7px,min(1.12cqi,1.8vh),17px) !important; line-height:1.2 !important; }

  /* Contact */
  html #contact .contact-card,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-card { display:grid !important; grid-template-columns:minmax(285px,.9fr) minmax(390px,1.1fr) !important; gap:clamp(16px,1.7cqi,26px) !important; align-items:start !important; min-height:0 !important; height:auto !important; padding:var(--dst-card-pad-y) clamp(16px,1.7cqi,26px) !important; }
  html #contact .contact-copy,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-copy { display:flex !important; flex-direction:column !important; min-height:0 !important; height:auto !important; transform:none !important; }
  html #contact .contact-copy > h2 { margin:0 !important; font-size:clamp(25px,2.5cqi,42px) !important; line-height:1.08 !important; }
  html #contact .contact-copy > p[data-i18n="contact.text"] { margin:clamp(7px,1vh,11px) 0 0 !important; font-size:var(--dst-body-size) !important; line-height:1.4 !important; }
  html #contact .contact-methods { width:100% !important; max-width:none !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:clamp(6px,.8cqi,10px) !important; margin-top:clamp(9px,1.35vh,15px) !important; }
  html #contact .contact-link { min-height:clamp(46px,6.2vh,58px) !important; padding:clamp(7px,1vh,10px) clamp(8px,.85cqi,12px) !important; gap:clamp(7px,.75cqi,10px) !important; border-radius:clamp(12px,1.65vh,16px) !important; }
  html #contact .contact-icon { width:clamp(29px,4.3vh,36px) !important; height:clamp(29px,4.3vh,36px) !important; flex-basis:clamp(29px,4.3vh,36px) !important; }
  html #contact .contact-link b { font-size:clamp(12px,1.5vh,13.2px) !important; line-height:1.16 !important; }
  html #contact .contact-link small { font-size:clamp(10px,1.3vh,11.4px) !important; line-height:1.2 !important; }
  html #contact .contact-prepared-materials { min-height:clamp(46px,6.2vh,58px) !important; padding:clamp(7px,1vh,10px) clamp(8px,.85cqi,12px) !important; }
  html #contact :is(.contact-security-note,.form-security-note) { margin:clamp(8px,1.2vh,13px) 0 0 !important; padding:clamp(7px,1.05vh,10px) clamp(9px,.9cqi,12px) !important; font-size:clamp(10.5px,1.35vh,11.8px) !important; line-height:1.32 !important; }
  html #contact .contact-copy > .contact-security-note { width:100% !important; max-width:none !important; box-sizing:border-box !important; }
  html #contact .contact-form,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-form { display:flex !important; flex-direction:column !important; align-self:start !important; height:auto !important; min-height:0 !important; gap:clamp(5px,.8vh,9px) !important; }
  html #contact .contact-form label { font-size:clamp(11.6px,1.45vh,13px) !important; line-height:1.16 !important; }
  html #contact .contact-form :is(input,select,textarea) { min-height:var(--dst-control-h) !important; margin-top:clamp(3px,.45vh,5px) !important; padding:clamp(8px,1.1vh,11px) clamp(10px,.9cqi,13px) !important; border-radius:clamp(9px,1.25vh,12px) !important; font-size:clamp(12px,min(1.7vh,.88vw),16px) !important; }
  html #contact .contact-form textarea,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-form textarea { flex:0 0 auto !important; height:clamp(50px,7.6vh,76px) !important; min-height:clamp(50px,7.6vh,76px) !important; }
  html #contact .human-check { padding:clamp(7px,1vh,10px) clamp(8px,.85cqi,12px) !important; gap:8px !important; border-radius:10px !important; }
  html #contact .human-check span { font-size:clamp(10.7px,min(1.5vh,.76vw),14px) !important; line-height:1.28 !important; }
  html #contact .form-note { font-size:clamp(10px,1.25vh,11.3px) !important; line-height:1.3 !important; }
  html #contact .contact-submit { min-height:var(--dst-control-h) !important; margin-top:0 !important; padding:8px 13px !important; font-size:clamp(11.5px,min(1.6vh,.8vw),14.5px) !important; }
  html.contact-anchor-mode.anchor-focus-mode body .site-footer { margin-top:0 !important; padding-top:3px !important; padding-bottom:3px !important; }
  html.contact-anchor-mode.anchor-focus-mode body .site-footer p:first-child { margin:0 !important; font-size:11px !important; line-height:1.14 !important; }
  html.contact-anchor-mode.anchor-focus-mode body .site-footer .footer-note { width:auto !important; max-width:none !important; margin:2px auto 0 !important; white-space:normal !important; font-size:11px !important; line-height:1.18 !important; }
  html.contact-anchor-mode.anchor-focus-mode body .site-footer .footer-links { margin-top:2px !important; gap:12px !important; font-size:10.5px !important; line-height:1.14 !important; }

  /* Reflow from actual section width, not viewport width. */
  @container dst-section (max-width: 820px) {
    html #home.hero.section-shell > .hero-card,
    html.home-start-clean #home.hero.section-shell > .hero-card,
    html.anchor-focus-mode #home.hero.section-shell.anchor-focus-target > .hero-card { grid-template-columns:minmax(0,1fr) minmax(220px,31%) !important; gap:clamp(16px,2.1cqi,22px) !important; padding-left:clamp(18px,2.4cqi,22px) !important; padding-right:clamp(18px,2.4cqi,22px) !important; }
    #home h1 { font-size:clamp(35px,5.2cqi,42px) !important; }
    #home .hero-trust-badges { padding-top:12px !important; }
    #about .about-process-steps { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    #services .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    html #pricing .pricing-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    html #pricing .price-addons-card { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important; }
    html #pricing .price-addons-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    #resources .resources-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    #faq :is(.faq-accordion.faq-columns,.faq-columns) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
    #contact .contact-card,
    html.contact-anchor-mode.anchor-focus-mode #contact .contact-card { grid-template-columns:minmax(270px,.9fr) minmax(360px,1.1fr) !important; gap:14px !important; padding-left:15px !important; padding-right:15px !important; }
    #contact .contact-copy > h2 { font-size:clamp(24px,3.5cqi,29px) !important; }
    /* At the narrowest desktop lane, let the secondary prepared-material panel
       use the full Contact column width instead of forcing long localized copy
       through a half-width cell. */
    #contact .contact-prepared-materials { grid-column:1 / -1 !important; }
  }
  @container dst-section (max-width: 720px) {
    html #home.hero.section-shell > .hero-card,
    html.home-start-clean #home.hero.section-shell > .hero-card,
    html.anchor-focus-mode #home.hero.section-shell.anchor-focus-target > .hero-card { grid-template-columns:1fr !important; min-height:0 !important; }
    html #home.hero.section-shell > .hero-card > .portrait-card { display:none !important; }
    #home .mobile-hero-intro { display:grid !important; grid-template-columns:minmax(0,1fr) 190px !important; gap:16px !important; }
    #home .mobile-portrait-card { display:grid !important; }
    #services .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    html #pricing .pricing-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    html #pricing .price-addons-card { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important; }
    #resources .resources-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    #faq :is(.faq-accordion.faq-columns,.faq-columns) { grid-template-columns:1fr !important; }
  }
}

/* Canonical desktop Hero width guard. Locale typography may tune wrapping, but
   it may not enlarge the H1 box beyond the actual copy column. */
@media (min-width: 821px) {
  html[lang] body #home h1,
  html[lang] body #home .hero h1 {
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1600px) {
  html.ai-rail-enabled body .ai-widget {
    width: var(--ai-rail-width) !important;
  }
}

/* v958 readable desktop density.
   Materials is the typography reference for all non-Hero content blocks.
   Anchor sections share one top geometry and use available viewport height
   instead of leaving large dead areas on spacious desktop screens. */
@media (min-width: 821px) {
  html:root {
    --dst-anchor-pad-top: clamp(16px, 2.35vh, 28px);
    --dst-anchor-pad-bottom: clamp(12px, 1.8vh, 22px);
    --dst-block-title-size: clamp(15.5px, 1.35cqi, 22px);
    --dst-block-body-size: var(--dst-body-size);
    --dst-block-secondary-size: max(13px, calc(var(--dst-body-size) - 1px));
    --dst-anchor-content-min: max(0px, calc(100svh - var(--dst-header-height) - 170px));
    --dst-anchor-stack-min: max(0px, calc(100svh - var(--dst-header-height) - 170px));
  }

  /* Anchor padding is owned by the canonical section rule above through shared/local tokens. */
  html #contact .contact-section-heading,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-section-heading {
    margin-top: 0 !important;
  }
  html.contact-anchor-mode.anchor-focus-mode body #contact.contact.section-shell.anchor-focus-target {
    margin-top: 0 !important;
  }
  html.contact-anchor-mode.anchor-focus-mode body {
    padding-bottom: var(--dst-contact-anchor-bottom-breathing) !important;
  }

  /* Materials typography is the reference. Override legacy compact anchor
     typography instead of shrinking text to fit a specific viewport. */
  html #about :is(.about-text p,.about-process-heading p,.about-process-steps .step-card p),
  html.anchor-focus-mode #about.anchor-focus-target :is(.about-text p,.about-process-heading p,.about-process-steps .step-card p),
  html #services .service-card p,
  html.anchor-focus-mode #services.anchor-focus-target .info-card.service-card p,
  html #pricing :is(.price-card > p:not(.price),.price-addons-copy p,.pricing-disclaimer-card p,.pricing-estimator-launch-copy span),
  html.anchor-focus-mode #pricing.anchor-focus-target :is(.price-card > p:not(.price),.price-addons-copy p,.pricing-disclaimer-card p,.pricing-estimator-launch-copy span),
  html #faq :is(.faq-accordion p,.faq-column p),
  html.anchor-focus-mode #faq.anchor-focus-target :is(.faq-accordion p,.faq-column p),
  html #contact .contact-copy > p[data-i18n="contact.text"] {
    font-size: var(--dst-block-body-size) !important;
    line-height: 1.42 !important;
  }

  html #about :is(.credential-item b,.about-process-steps .step-card h3),
  html.anchor-focus-mode #about.anchor-focus-target :is(.credential-item b,.about-process-steps .step-card h3),
  html #services .service-card h3,
  html.anchor-focus-mode #services.anchor-focus-target .info-card.service-card h3,
  html #pricing :is(.price-card h3,.price-addons-copy h3),
  html.anchor-focus-mode #pricing.anchor-focus-target :is(.price-card h3,.price-addons-copy h3) {
    font-size: var(--dst-block-title-size) !important;
    line-height: 1.2 !important;
  }

  html #about .credential-item span,
  html.anchor-focus-mode #about.anchor-focus-target .credential-item span,
  html #pricing .price-factor-chip,
  html.anchor-focus-mode #pricing.anchor-focus-target .price-factor-chip,
  html #faq :is(.faq-accordion summary,.faq-column summary),
  html.anchor-focus-mode #faq.anchor-focus-target :is(.faq-accordion summary,.faq-column summary) {
    font-size: var(--dst-block-body-size) !important;
    line-height: 1.3 !important;
  }

  html #faq .faq-group-title,
  html.anchor-focus-mode #faq.anchor-focus-target .faq-group-title {
    font-size: var(--dst-block-title-size) !important;
    line-height: 1.2 !important;
  }

  /* Contact keeps hierarchy, but no longer drops into 10-12px desktop copy. */
  html #contact .contact-link b,
  html #contact .contact-prepared-head strong,
  html #contact .contact-form label,
  html #contact .contact-message-label,
  html #contact .human-check span,
  html #contact .contact-submit {
    font-size: var(--dst-block-body-size) !important;
  }
  html #contact .contact-link small,
  html #contact :is(.contact-security-note,.form-security-note,.form-note,.contact-prepared-empty,.contact-prepared-status) {
    font-size: var(--dst-block-secondary-size) !important;
    line-height: 1.34 !important;
  }
  html #contact .contact-form :is(input,select,textarea) {
    font-size: var(--dst-block-body-size) !important;
  }

  /* Keep the accepted About/FAQ vertical composition. Content-card sections
     use natural row height instead of consuming unused anchor height. */
  html.anchor-focus-mode #about.anchor-focus-target .about-practice-stack {
    min-height: var(--dst-anchor-stack-min) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  html.anchor-focus-mode #about.anchor-focus-target .about-process-panel {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html.anchor-focus-mode #about.anchor-focus-target .about-process-steps {
    flex: 1 1 auto !important;
    grid-auto-rows: 1fr !important;
  }

  html.anchor-focus-mode #services.anchor-focus-target .services-grid {
    min-height: 0 !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
  }
  html.anchor-focus-mode #services.anchor-focus-target .info-card.service-card {
    height: auto !important;
    align-self: stretch !important;
  }
  html.anchor-focus-mode #resources.anchor-focus-target .resources-grid {
    min-height: 0 !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
  }
  html.anchor-focus-mode #resources.anchor-focus-target .resource-card {
    min-height: var(--dst-resource-card-min) !important;
    height: 100% !important;
    align-self: stretch !important;
  }

  html.anchor-focus-mode #faq.anchor-focus-target .faq-columns {
    min-height: var(--dst-anchor-content-min) !important;
  }

  /* Pricing follows intrinsic content height. The old width-based floor was
     another source of visual stretching and is intentionally retired. */
  html #pricing .price-card,
  html.anchor-focus-mode #pricing.anchor-focus-target .price-card {
    min-height: 0 !important;
  }
  html #pricing .price-addons-card,
  html.anchor-focus-mode #pricing.anchor-focus-target .price-addons-card {
    min-height: 0 !important;
  }

  /* Slightly roomier controls compensate for the readable Contact type while
     remaining height-aware on compact desktop windows. */
  html #contact .contact-link,
  html #contact .contact-prepared-materials {
    min-height: clamp(50px, 6.8vh, 64px) !important;
  }
  html #contact .contact-form :is(input,select) {
    min-height: clamp(40px, 5.5vh, 54px) !important;
  }

  html #pricing .pricing-estimator-launch,
  html.anchor-focus-mode #pricing.anchor-focus-target .pricing-estimator-launch,
  html #pricing .pricing-disclaimer-card,
  html.anchor-focus-mode #pricing.anchor-focus-target .pricing-disclaimer-card {
    min-height: 0 !important;
  }

  /* Narrow/low desktop legacy rules used stronger selectors for Contact.
     Canonical v958 readability owns them explicitly as well. */
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-copy > p[data-i18n="contact.text"],
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-link b,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-prepared-head strong,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-form label,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-message-label,
  html.contact-anchor-mode.anchor-focus-mode #contact .human-check span,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-submit,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-form :is(input,select,textarea) {
    font-size: var(--dst-block-body-size) !important;
  }
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-link small,
  html.contact-anchor-mode.anchor-focus-mode #contact :is(.contact-security-note,.form-security-note,.form-note,.contact-prepared-empty,.contact-prepared-status) {
    font-size: var(--dst-block-secondary-size) !important;
    line-height: 1.34 !important;
  }

  /* Contact uses the same top rhythm as other sections and grows on tall
     desktops while preserving the legal-footer reserve. */
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-card {
    min-height: max(0px, calc(100svh - var(--dst-header-height) - var(--dst-contact-footer-reserve) - 175px)) !important;
    align-items: stretch !important;
  }
}

@media (min-width: 821px) and (min-height: 900px) {
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-copy,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-form {
    height: 100% !important;
  }
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-security-note,
  html.contact-anchor-mode.anchor-focus-mode #contact .contact-submit {
    margin-top: auto !important;
  }
}

/* v960 desktop-only readability trial.
   Keep the accepted v958 font family and mobile typography unchanged.
   Only the three copy surfaces under review receive a slightly larger reading scale. */
@media (min-width: 821px) {
  html:root {
    --dst-reading-body-size: clamp(15px, min(1.95vh, 1.02vw), 19px);
  }

  html #resources .resource-card p,
  html.anchor-focus-mode #resources.anchor-focus-target .resource-card p,
  html #about.about-practice-process .about-text p,
  html.anchor-focus-mode #about.about-practice-process.anchor-focus-target .about-text p,
  html #faq :is(.faq-accordion p,.faq-column p),
  html.anchor-focus-mode #faq.anchor-focus-target :is(.faq-accordion p,.faq-column p) {
    font-size: var(--dst-reading-body-size) !important;
    line-height: 1.48 !important;
  }
}