/*
  Readability and layout fixes. Loaded last so it overrides styles.css, updates.css and brand.css.
  - Raises the type scale: the original used 7–13px for nav, buttons, body copy and labels.
  - Stops the hero from overflowing the viewport (horizontal scrollbar).
  - Stacks the hero below 1000px so the 3D graphic no longer covers the headline.
*/

/* ---------- Base type scale ---------- */
body{font-size:16px;line-height:1.6}

.main-nav{font-size:14px}
.nav-contact{font-size:13px}

.eyebrow,.panel-copy .eyebrow{font-size:12px;letter-spacing:.1em}

.hero-intro{font-size:18px;line-height:1.7;max-width:520px}
.button{font-size:14px;min-height:54px;padding:0 22px}
.text-link{font-size:14px}
.text-link span{font-size:16px}
.panel-copy .text-link{font-size:14px}
.hero-note{font-size:13px}

.scene-label,.scene-process-label{font-size:11px}
.hero-art-caption{font-size:12px}
.hero-art-caption strong{font-size:18px}
.hero-index{font-size:11px}

.intro-copy{max-width:400px}
.intro-copy p{font-size:16px;line-height:1.75}
.metric-strip>div{font-size:15px}
.metric-number{font-size:12px}

.section-heading>p{font-size:16px;line-height:1.75;max-width:380px}

.solution-index{font-size:12px}
.solution-title{font-size:16px}
.solution-arrow{font-size:16px}
.solution-tab{height:auto;min-height:80px;padding-top:12px;padding-bottom:12px}
.panel-art-label{font-size:11px}
.panel-copy>p:not(.eyebrow){font-size:15px;line-height:1.75}
.capability-tags span{font-size:12px;padding:10px 13px}

/* Pricing */
.pricing-heading>p{font-size:16px;line-height:1.75;max-width:380px}
.tier-index{font-size:11px}
.tier-top h3{font-size:22px}
.tier-price span,.tier-alt{font-size:12px}
.price-tier li{font-size:14px;line-height:1.55;padding-left:15px}
.price-tier li:before{top:9px}
.tier-link{font-size:14px}
.tier-link span{font-size:16px}
.pricing-footnote{font-size:12px}

/* Approach */
.step-number{font-size:12px}
.journey-heading>p:last-child{font-size:16px;line-height:1.75;max-width:360px}
.journey-step h3{font-size:19px}
.journey-step p{font-size:15px;line-height:1.7}

/* Industries */
.industry-grid article>span,.industry-note>span{font-size:12px}
.industry-grid h3{font-size:19px}
.industry-grid article p{font-size:15px;line-height:1.6;max-width:280px}
.industry-grid article>b{font-size:16px}
.industry-grid article{min-height:210px;padding:26px 28px 52px}
.industry-note p{font-size:19px!important;max-width:280px!important}
.industry-disclaimer{font-size:12px}

/* About */
.about-index{font-size:11px}
.about-copy>p:not(.eyebrow){font-size:16px;line-height:1.8}
.about-placeholder{font-size:13px}

/* Contact */
.contact-heading>p:not(.eyebrow){font-size:16px;line-height:1.75;max-width:380px}
.contact-aside{font-size:13px}
.contact-form label{font-size:13px}
.contact-form input,.contact-form select,.contact-form textarea{font-size:16px}
.field-error{font-size:12px}
.form-status{font-size:13px}

/* Footer */
.back-top{font-size:14px}
.footer-bottom{font-size:11px}

/* ---------- One shared content edge ----------
   Every section's content lines up on the same left/right edge. --max is the
   page width; full-bleed bars (header, hero) pad themselves in to that edge. */
:root{--max:1600px}
@media(min-width:2200px){:root{--max:1800px}}
html,body{overflow-x:clip}
.section-shell,.pricing-inner{max-width:var(--max)}
.solutions>.section-heading,.solutions>.solution-layout,.solutions>.capability-tags,
.pricing-heading,.pricing-grid,.pricing-footnote,.footer-top,.footer-bottom{max-width:calc(var(--max) - 2 * var(--gutter))}

/* Sticky, full-width header (brand.css indented it 24px off the content edge). */
.site-header{position:sticky;top:0;z-index:50;max-width:none;background:rgba(16,16,22,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding-left:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-right:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)))}

/* ---------- Hero ----------
   brand.css shifted the whole hero sideways (horizontal overflow) and
   styles.css offset the graphic toward the centre on wide screens (it covered
   the headline). The hero now spans the full width: copy sits on the shared
   content edge, the graphic runs to the right edge of the screen and fades
   out at the bottom instead of ending in a hard box. */
.hero{transform:none}
.hero-copy{z-index:5;transform:none}
@media(min-width:1001px){
  .hero{max-width:none;
    padding-left:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));
    padding-right:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)))}
  .hero-copy{width:46%}
  .hero-art{right:0;width:52%;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
  .hero-index{left:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)))}
  .intro{padding-top:120px}
}

/* ---------- Section grids ----------
   These used 42%+58%+2% and 43%+57%+2% = 102%, overhanging the content edge. */
.journey-inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
.journey-step{grid-template-columns:48px minmax(40px,120px) 1fr}
.contact{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px}

/* ---------- UX ---------- */
/* Industry cards aren't links, so don't show link arrows on them. */
.industry-grid article>b{display:none}
.industry-grid article:not(.industry-note){padding-bottom:30px}
/* Placeholder copy from the handoff shouldn't be shown to visitors. */
.about-placeholder{display:none}
/* Give the highlighted plan a real call to action. */
.price-tier{transition:background .2s}
.price-tier:not(.price-tier-featured):hover{background:rgba(255,255,255,.03)}
.price-tier-featured .tier-link{border-top:0;padding:14px 16px;background:var(--brand-purple);color:#fff;box-shadow:0 0 22px rgba(132,43,151,.3);transition:background .2s}
.price-tier-featured .tier-link span{color:#fff}
.price-tier-featured .tier-link:hover{background:#9C3EAF;color:#fff}
/* Current section in the sticky nav (set by main.js). */
.main-nav>a[aria-current=true]:not(.nav-contact){color:#E4B1FF}
.main-nav>a[aria-current=true]:not(.nav-contact):after{right:0}

/* ---------- Very large screens ---------- */
@media(min-width:2200px){
  h1{font-size:120px}
  .hero-intro{font-size:20px;max-width:580px}
  .intro h2,.section-heading h2,.pricing-heading h2,.journey h2,.contact h2{font-size:84px}
  .about-copy h2{font-size:68px}
}

/* ---------- Tablet / small laptop: hamburger nav ----------
   The full nav no longer fits beside the logo at the larger type size. */
@media(max-width:1000px){
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:transparent;border:1px solid var(--line);cursor:pointer}
  .menu-toggle span{height:1px;width:16px;background:var(--ink);margin:auto;transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:18px var(--gutter) 22px;background:#14131B;border-bottom:1px solid var(--line);align-items:stretch;flex-direction:column;gap:0;font-size:16px}
  .main-nav.is-open{display:flex}
  .main-nav>a{padding:14px 0;border-bottom:1px solid var(--line)}
  .main-nav .nav-contact{margin-top:12px;padding:14px;border:1px solid var(--line);font-size:15px}
}

/* ---------- Tablet / mobile: stack the hero ----------
   Copy first, graphic underneath, so they never overlap. */
@media(max-width:1000px){
  .hero{display:block;height:auto;min-height:0;margin-top:0;padding-top:72px;padding-bottom:0;padding-left:var(--gutter)}
  .hero-copy{width:100%;max-width:640px;padding-bottom:0;transform:none}
  .hero-note{display:none}
  .hero-index{display:none}
  .hero-actions{margin-bottom:48px}
  /* Headline and side copy collide at this width; stack them. */
  .intro-content,.section-heading,.pricing-heading{display:block}
  .intro-copy{padding:24px 0 0;max-width:560px}
  .section-heading>p,.pricing-heading>p{margin:20px 0 0;max-width:560px}
  .hero-art{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:calc(100% + var(--gutter)*2);margin-left:calc(-1 * var(--gutter));height:min(70vw,520px);opacity:1}
  .hero-art:after{background:linear-gradient(0deg,rgba(12,10,17,.35),transparent 30%,transparent 80%,rgba(12,10,17,.3))}
}

/* ---------- Mid widths ---------- */
@media(max-width:900px){
  .solution-layout{display:block}
  .solution-list{padding:0}
  .solution-tab{min-height:64px}
  .solution-panel{margin-top:24px;min-height:380px}
  .about-inner{display:flex;flex-direction:column;min-height:0}
  .about-mark{min-height:320px}
  .about-copy{padding:64px var(--gutter) 72px}
  .contact{display:block}
  .contact-heading>p:not(.eyebrow){max-width:560px}
  .contact-aside{margin-top:32px}
  .contact-form{padding-top:40px}
}

/* ---------- Mobile ---------- */
@media(max-width:650px){
  body{font-size:16px}
  .hero{padding-top:56px}
  .hero-intro{font-size:17px;line-height:1.7}
  .button{font-size:14px;min-height:50px;padding:0 18px;gap:18px}
  .hero-index{font-size:10px;margin:32px 0 20px}
  .hero-art{height:340px}

  .intro-copy p{font-size:16px}
  .metric-strip>div{font-size:14px}
  .section-heading>p,.pricing-heading>p,.journey-heading>p:last-child,.contact-heading>p:not(.eyebrow){font-size:16px}

  .solution-tab{min-height:64px}
  .solution-title{font-size:16px}
  .panel-copy>p:not(.eyebrow){font-size:15px}
  .capability-tags span{font-size:11px;padding:9px 11px}

  .price-tier li{font-size:14px}
  .pricing-footnote{font-size:11px}

  .journey-step p{font-size:15px}

  .industry-grid{grid-template-columns:1fr}
  .industry-grid article{min-height:0;padding:22px 20px 26px}
  .industry-grid .industry-note{padding-bottom:52px}
  .industry-grid h3{font-size:18px;margin-top:18px}
  .industry-grid article p{font-size:15px;max-width:none}
  .industry-note p{font-size:18px!important;max-width:none!important}
  .industry-disclaimer{font-size:11px;text-align:left}

  .about-copy>p:not(.eyebrow){font-size:16px}

  .footer-bottom{font-size:11px}
}