/* Atkinson Film-Arts cross-browser layout corrections — 2026-07-22 revision 2 */

/* Security honeypot: retained for spam detection, never visible or interactive. */
.hp,
form .hp,
[aria-hidden="true"].hp{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
}

/*
  Editorial heroes must grow with their copy. The earlier fixed-height/overflow-hidden
  combination could crop the call-to-action row and allow the following section to
  appear over the buttons. These rules preserve the compact visual target while
  allowing content to establish the true section height.
*/
.page-hero:not(.film-hero){
  height:auto!important;
  min-height:clamp(500px,61svh,660px)!important;
  max-height:none!important;
  overflow:visible!important;
  align-items:stretch;
}
.page-hero.hero-long:not(.film-hero){
  min-height:clamp(540px,64svh,690px)!important;
}
.page-hero.hero-xlong:not(.film-hero){
  min-height:clamp(570px,65svh,720px)!important;
}
.page-hero-copy{
  min-width:0;
  min-height:0;
  overflow:visible!important;
  padding-top:clamp(1.45rem,2.8vw,3.2rem);
  padding-bottom:clamp(1.45rem,2.8vw,3.2rem);
}
.page-hero h1{
  font-size:clamp(2.45rem,4vw,5.15rem);
  line-height:.95;
  max-width:13.25ch;
}
.page-hero.hero-long h1{
  font-size:clamp(2.2rem,3.35vw,4.45rem);
  max-width:15ch;
}
.page-hero.hero-xlong h1{
  font-size:clamp(2rem,2.9vw,3.85rem);
  line-height:.98;
  max-width:17ch;
}
.page-hero .lede{
  margin-top:.78rem;
  font-size:clamp(.95rem,1vw,1.12rem);
  line-height:1.46;
}
.page-hero .hero-actions{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.62rem;
  width:100%;
  margin-top:1rem;
}
.page-hero .hero-actions .button{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:.68rem .82rem;
  font-size:.67rem;
  line-height:1.22;
  white-space:normal;
  text-align:center;
  overflow-wrap:anywhere;
}
.page-hero .hero-actions .button:only-child{
  grid-column:1/-1;
  justify-self:start;
  width:auto;
}
.page-hero-media{
  min-width:0;
  min-height:100%;
}
.page-hero-media picture,
.page-hero-media img{
  display:block;
  width:100%;
  height:100%;
}

/* Paid landing pages use the same safe, content-sized hero model. */
body[data-ppc-landing="true"] .page-hero:not(.film-hero),
.ppc-hero{
  height:auto!important;
  min-height:clamp(520px,62svh,680px)!important;
  max-height:none!important;
}
.ppc-hero h1{
  font-size:clamp(1.95rem,2.75vw,3.7rem);
  line-height:.98;
  max-width:17ch;
}
.ppc-hero .lede{font-size:clamp(.9rem,.92vw,1.03rem);line-height:1.4}

/* Forms retain readable fields and consent copy at every width. */
.form-card{min-width:0}
.form-grid>*{min-width:0}
.field input,.field select,.field textarea{min-width:0}
.consent-wrap{margin-top:1rem}
.consent-row span{min-width:0;overflow-wrap:anywhere}
.form-optional summary{line-height:1.35}

/* Footer artwork and legal navigation retain their intended proportions. */
.footer-brand-mark{
  width:clamp(118px,10vw,158px)!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
}
.footer-bottom{align-items:center;flex-wrap:wrap}
.footer-legal{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end;
  gap:.58rem;
  flex-wrap:wrap;
  white-space:normal;
}
.footer-legal a,.footer-legal span{display:inline-flex!important;flex:0 0 auto}

.button,.site-cta,.panel-cta{max-width:100%}
.actions{position:relative;z-index:5}

/* Feature-film hero remains cinematic and bounded; its custom layout is separate. */
@media (min-width:761px){
  .film-hero{height:64svh;min-height:520px;max-height:700px}
  .film-hero-copy{min-height:0;overflow:visible;padding-right:50%}
  .film-hero h1{font-size:clamp(3rem,4.65vw,5.25rem);line-height:.94}
  .film-hero .lede{font-size:clamp(.96rem,1vw,1.1rem);line-height:1.42;margin-top:.72rem}
  .film-hero .hero-actions{flex-wrap:wrap;margin-top:.75rem;gap:.55rem}
  .film-hero .button{min-height:46px;padding:.65rem .78rem;font-size:.66rem}
  .film-status{margin-top:.7rem;font-size:.7rem}
}

/* Tablets and phones: content first, image second, no line clamping or cropping. */
@media (max-width:860px){
  .page-hero:not(.film-hero),
  .home-hero:not(.film-hero),
  body[data-ppc-landing="true"] .page-hero:not(.film-hero),
  .ppc-hero{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto clamp(230px,34svh,360px)!important;
    overflow:visible!important;
  }
  .page-hero-copy{
    padding:1.35rem 1.15rem 1.45rem;
    overflow:visible!important;
  }
  .page-hero h1{font-size:clamp(2rem,8.2vw,3.25rem);max-width:15ch}
  .page-hero.hero-long h1{font-size:clamp(1.9rem,7.3vw,2.9rem);max-width:17ch}
  .page-hero.hero-xlong h1{font-size:clamp(1.72rem,6.45vw,2.55rem);max-width:19ch;line-height:1}
  .page-hero .lede{
    display:block!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
    margin-top:.55rem;
    font-size:.9rem;
    line-height:1.4;
  }
  .page-hero .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.48rem;
    margin-top:.72rem;
  }
  .page-hero .hero-actions .button{width:100%;min-height:42px;padding:.58rem .7rem;font-size:.65rem}
  .page-hero-media{height:auto!important;min-height:0!important}

  .site-header-main{grid-template-columns:minmax(0,1fr) auto auto!important;gap:.5rem!important}
  .language-switch-mobile,.menu-toggle{align-self:center;justify-self:end;min-width:42px;height:42px;margin:0}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;padding:.5rem .62rem}
  .site-brand{min-width:0}.site-brand span{min-width:0}
  .site-brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .context-strip-inner{scrollbar-width:none;-ms-overflow-style:none}
  .context-strip-inner::-webkit-scrollbar{display:none}
  .footer-legal{justify-content:flex-start}
}

@media (max-width:580px){
  .footer-bottom{display:grid;grid-template-columns:1fr;gap:.55rem}
  .footer-legal{font-size:.68rem;gap:.45rem}
}
@media (max-width:420px){
  .site-header-main{width:calc(100% - 1rem)}
  .site-brand{gap:.48rem}.site-brand img{width:44px;height:44px}.site-brand strong{font-size:.98rem}
  .language-switch-mobile,.menu-toggle{min-width:38px;height:38px}
}
@media (max-width:380px){
  .page-hero h1{font-size:1.95rem}
  .page-hero.hero-long h1{font-size:1.78rem}
  .page-hero.hero-xlong h1{font-size:1.58rem}
  .page-hero .lede{font-size:.84rem}
  .page-hero .button{font-size:.61rem}
}

/* Studio features must shrink with the viewport rather than impose desktop width. */
.character-feature>*{min-width:0}
@media (max-width:760px){
  .character-feature,.character-feature.reverse{width:100%;min-width:0}
  .character-poster,.character-copy{width:100%;max-width:540px;min-width:0;margin-inline:auto}
  .character-copy .actions{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .button,.site-cta,.panel-cta{transition:none!important}
}

/* Remove intrinsic image dimensions from the grid's height calculation. */
@media (min-width:861px){
  .page-hero:not(.film-hero) .page-hero-media{position:relative;overflow:hidden;min-height:0}
  .page-hero:not(.film-hero) .page-hero-media > picture{position:absolute;inset:0;display:block}
  .page-hero:not(.film-hero) .page-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}

/* Compact laptop windows: keep the hero at or below two-thirds of the viewport without cropping content. */
@media (min-width:861px) and (max-height:820px){
  .page-hero:not(.film-hero),
  .page-hero.hero-long:not(.film-hero),
  .page-hero.hero-xlong:not(.film-hero),
  body[data-ppc-landing="true"] .page-hero:not(.film-hero),
  .ppc-hero{
    min-height:66svh!important;
  }
  .page-hero-copy{padding-top:1rem;padding-bottom:1rem}
  .page-hero h1{font-size:clamp(2.15rem,3.35vw,4rem)}
  .page-hero.hero-long h1{font-size:clamp(2rem,3vw,3.65rem)}
  .page-hero.hero-xlong h1{font-size:clamp(1.82rem,2.65vw,3.25rem)}
  .page-hero .lede{font-size:.9rem;line-height:1.36;margin-top:.52rem}
  .page-hero .hero-actions{margin-top:.62rem}
  .page-hero .hero-actions .button{min-height:42px;padding:.56rem .68rem;font-size:.63rem}
}

/* Form-delivery and confirmation-page corrections — 2026-07-23 */
.confirmation-hero .status-title{font-family:var(--sans);font-size:clamp(1rem,1.4vw,1.28rem);font-weight:700;color:var(--accent,var(--gold));margin:.2rem 0 .8rem}
.confirmation-hero .reference{margin:1rem 0 0;font-size:1rem;letter-spacing:.02em}
.compact-confirmation{padding-block:clamp(2rem,4vw,3.6rem)}
@media(max-width:860px){.confirmation-hero{min-height:auto!important;max-height:none!important;height:auto!important}.confirmation-hero .page-hero-copy{overflow:visible!important}.compact-confirmation .editorial-split{grid-template-columns:1fr!important}}


/* Consent, accessibility and contrast hardening — 2026-07-22 */

/* Dark page heroes: secondary actions must remain readable over navy/plum media. */
body[data-route^="/marbles"] .page-hero .button.secondary,
body[data-route^="/products/marbles-os"] .page-hero .button.secondary,
body[data-route^="/studio"] .page-hero .button.secondary,
body[data-route^="/products/immersive-studio"] .page-hero .button.secondary,
body[data-route^="/resources/videos/studio-reel"] .page-hero .button.secondary{
  color:#fff!important;
  border-color:rgba(255,255,255,.88)!important;
  background:rgba(0,0,0,.18)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}
body[data-route^="/marbles"] .page-hero .button.secondary::before,
body[data-route^="/products/marbles-os"] .page-hero .button.secondary::before,
body[data-route^="/studio"] .page-hero .button.secondary::before,
body[data-route^="/products/immersive-studio"] .page-hero .button.secondary::before,
body[data-route^="/resources/videos/studio-reel"] .page-hero .button.secondary::before{
  border-color:rgba(255,255,255,.28)!important;
}

/* Marbles pathway cards use a light institutional surface and deliberate dark copy. */
body[data-route^="/marbles"] .pathway,
body[data-route^="/products/marbles-os"] .pathway{
  background:rgba(210,226,243,.34);
  border-color:rgba(210,226,243,.42);
}
body[data-route^="/marbles"] .pathway-step,
body[data-route^="/products/marbles-os"] .pathway-step{
  background:#f4f7fb!important;
  color:#10273d!important;
  box-shadow:inset 0 4px 0 #d3ab59;
}
body[data-route^="/marbles"] .pathway-step h3,
body[data-route^="/products/marbles-os"] .pathway-step h3{
  color:#071b31!important;
}
body[data-route^="/marbles"] .pathway-step p,
body[data-route^="/products/marbles-os"] .pathway-step p{
  color:#2f4357!important;
}

/* All pathway cards receive explicit text colours instead of relying on inheritance. */
.pathway-step h3{color:var(--pathway-heading,var(--heading,var(--ink)))}
.pathway-step p{color:var(--pathway-copy,var(--muted))}
body[data-route^="/studio"] .pathway-step p,
body[data-route^="/products/immersive-studio"] .pathway-step p,
body[data-route^="/resources/videos/studio-reel"] .pathway-step p{color:#e5d7e6!important}

/* The two primary footer routes need enough physical room for their full names. */
.footer-cta .actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(270px,1fr));
  width:min(100%,680px);
  gap:.8rem;
  margin-top:0;
  flex:0 1 680px;
}
.footer-cta .actions .button{
  width:100%;
  min-width:0;
  min-height:56px;
  padding:.85rem 1rem;
  line-height:1.2;
  white-space:normal;
  text-align:center;
}
@media(max-width:1180px){
  .footer-cta{align-items:flex-start;flex-direction:column}
  .footer-cta .actions{width:100%;flex:auto}
}
@media(max-width:640px){
  .footer-cta .actions{grid-template-columns:1fr}
}

/* Strong, consistent keyboard focus. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid #f4c95d!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 5px rgba(7,27,49,.88)!important;
}

/* Cookie consent */
.consent-banner{
  position:fixed;z-index:10020;left:1rem;right:1rem;bottom:1rem;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem;align-items:center;
  max-width:1180px;margin-inline:auto;padding:1.1rem 1.2rem;
  background:#fffaf0;color:#17242a;border:1px solid #a9792d;
  box-shadow:0 24px 90px rgba(0,0,0,.28);
}
.consent-banner[hidden]{display:none!important}
.consent-banner h2{font-size:1.35rem;color:#073e31;margin-bottom:.25rem}
.consent-banner p{font-size:.88rem;line-height:1.48;margin:0;max-width:78ch}
.consent-banner a{color:#073e31;font-weight:750}
.consent-actions{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}
.consent-actions button,.consent-settings-actions button{
  min-height:44px;padding:.64rem .9rem;border:1px solid #073e31;background:#073e31;color:#fff;
  font:760 .72rem/1.2 var(--sans);letter-spacing:.035em;text-transform:uppercase;cursor:pointer;
}
.consent-actions button[data-consent-reject]{background:#fff;color:#073e31}
.consent-actions button[data-consent-manage]{background:#f1e7d5;color:#3b2b18;border-color:#a9792d}
.consent-dialog,.accessibility-dialog{
  width:min(720px,calc(100% - 2rem));max-height:min(86vh,780px);padding:0;border:1px solid #a9792d;
  background:#fffaf0;color:#17242a;box-shadow:0 30px 100px rgba(0,0,0,.38);overflow:auto;
}
.consent-dialog::backdrop,.accessibility-dialog::backdrop{background:rgba(3,13,22,.72);backdrop-filter:blur(3px)}
.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.2rem 1.25rem;border-bottom:1px solid #d8cdbb}
.dialog-head h2{font-size:1.8rem;color:#073e31}
.dialog-close{border:1px solid #073e31;background:#fff;color:#073e31;width:42px;height:42px;cursor:pointer;font-weight:800}
.dialog-body{padding:1.2rem 1.25rem}
.consent-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding:1rem 0;border-bottom:1px solid #d8cdbb}
.consent-option h3{font:750 1rem/1.3 var(--sans);letter-spacing:0;color:#17242a;margin-bottom:.25rem}
.consent-option p{font-size:.86rem;line-height:1.45;color:#45545a;margin:0}
.consent-option input{width:24px;height:24px;accent-color:#073e31}
.consent-settings-actions{display:flex;gap:.6rem;flex-wrap:wrap;padding-top:1.1rem}
.consent-settings-actions button[data-consent-save]{background:#073e31}
.consent-settings-actions button[data-consent-reject-all]{background:#fff;color:#073e31}
.footer-legal button{
  display:inline-flex;align-items:center;border:0;background:transparent;color:var(--footer-link,rgba(255,255,255,.86));
  font:inherit;padding:.2rem 0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.footer-legal button:hover{color:var(--footer-accent,#fff)}

/* Accessibility control */
.accessibility-launcher{
  position:fixed;z-index:10010;left:1rem;bottom:1rem;width:48px;height:48px;
  border:2px solid #fff;background:#073e31;color:#fff;box-shadow:0 9px 28px rgba(0,0,0,.28);
  font:800 .9rem/1 var(--sans);cursor:pointer;
}
body.has-consent-banner .accessibility-launcher{bottom:clamp(10rem,22vh,13rem)}
.accessibility-grid{display:grid;gap:1rem}
.accessibility-group{padding:1rem;border:1px solid #d8cdbb;background:#fff}
.accessibility-group h3{font:750 1rem/1.3 var(--sans);color:#17242a;margin-bottom:.65rem}
.accessibility-choice{display:flex;align-items:center;gap:.65rem;margin:.5rem 0;font-size:.94rem}
.accessibility-choice input{width:22px;height:22px;accent-color:#073e31}
.accessibility-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.accessibility-actions button{min-height:44px;padding:.65rem .9rem;border:1px solid #073e31;background:#073e31;color:#fff;cursor:pointer;font-weight:750}
.accessibility-actions button[data-a11y-reset]{background:#fff;color:#073e31}

html[data-a11y-text="large"]{font-size:112.5%}
html[data-a11y-text="xlarge"]{font-size:125%}
html[data-a11y-font="readable"] body,
html[data-a11y-font="readable"] h1,
html[data-a11y-font="readable"] h2,
html[data-a11y-font="readable"] h3,
html[data-a11y-font="readable"] h4{font-family:Arial,"Helvetica Neue",sans-serif!important;letter-spacing:0!important}
html[data-a11y-links="underline"] a:not(.button):not(.site-cta):not(.panel-cta){text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px!important}
html[data-a11y-motion="reduce"]{scroll-behavior:auto!important}
html[data-a11y-motion="reduce"] *,html[data-a11y-motion="reduce"] *::before,html[data-a11y-motion="reduce"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

html[data-a11y-contrast="high"] body{background:#fff!important;color:#000!important}
html[data-a11y-contrast="high"] :where(.block,.section,.media-story,.visual-archive,.page-hero-copy,.card,.course-card,.pathway-step,.notice,.quote,.form-card,.consent-banner,.dialog-body,.accessibility-group){background:#fff!important;color:#000!important}
html[data-a11y-contrast="high"] :where(h1,h2,h3,h4,p,li,label,legend,.lede,.kicker,.eyebrow,.panel-kicker,.help){color:#000!important;text-shadow:none!important}
html[data-a11y-contrast="high"] :where(.top-ribbon,.site-header,.context-strip,.site-footer,.band){background:#000!important;color:#fff!important}
html[data-a11y-contrast="high"] :where(.top-ribbon,.site-header,.context-strip,.site-footer,.band) :where(a,button,h1,h2,h3,h4,p,span,strong){color:#fff!important}
html[data-a11y-contrast="high"] :where(.button,.site-cta,.panel-cta){background:#000!important;border:2px solid #ffdf57!important;color:#fff!important}
html[data-a11y-contrast="high"] :where(.button,.site-cta,.panel-cta):hover{background:#ffdf57!important;color:#000!important}
html[data-a11y-contrast="high"] img{filter:none!important}

@media(max-width:900px){
  .consent-banner{grid-template-columns:1fr;gap:.8rem}
  .consent-actions{justify-content:flex-start}
}
@media(max-width:580px){
  .consent-banner{left:.55rem;right:.55rem;bottom:.55rem;padding:.9rem}
  .consent-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .consent-actions button[data-consent-manage]{grid-column:1/-1}
  .accessibility-launcher{left:.55rem;bottom:.55rem}
  body.has-consent-banner .accessibility-launcher{bottom:15.5rem}
  .consent-option{grid-template-columns:1fr auto}
}