/* v58 Flagship page refinements. Loaded after each route's original styles.
   Existing artwork, character stages, section order and interactions are retained. */

body.ref-home-page {
  --ref-shell: min(1440px, calc(100% - 80px));
  --ref-muted: #b9b3a9;
}
body.ref-home-page .ref-about { padding-block: clamp(48px, 6vw, 88px); }
body.ref-home-page .ref-about__grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(130px, .3fr);
  gap: clamp(24px, 3vw, 48px);
}
body.ref-home-page .ref-about__copy h2 { font-size: clamp(32px, 3.25vw, 52px); text-wrap: balance; }
body.ref-home-page .ref-about__copy > p:not(.ref-kicker) {
  color: #b9b3a9;
  font-size: 15px;
  line-height: 1.8;
}
body.ref-home-page .ref-stat {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  padding-block: 18px;
}
body.ref-home-page .ref-stat span { color: #b3aea5; font-size: 11px; line-height: 1.5; }
body.ref-home-page .ref-made-in-kuwait { color: #c9c2b7; font-size: 11px; }
body.ref-home-page .ref-projects { padding-block: 12px 32px; }
body.ref-home-page .ref-section-head { margin-bottom: 30px; }
body.ref-home-page .ref-projects h2 { font-size: clamp(36px, 4.5vw, 68px); line-height: 1.04; }
body.ref-home-page .ref-kicker { font-size: 11px; line-height: 1.6; }
body.ref-home-page :is(.ref-outline-btn,.ref-gold-btn,.ref-text-link) { font-size: 12px; min-height: 46px; }
body.ref-home-page .ref-project-rail { gap: 20px; align-items: stretch; }
body.ref-home-page .ref-project-card { border-color: rgba(219,183,122,.2); border-radius: 10px; }
body.ref-home-page .ref-project-card__body { padding: 22px; min-height: 124px; align-items: center; }
body.ref-home-page .ref-project-card__body p { color: #b5aea3; font-size: 13px; line-height: 1.7; }
body.ref-home-page .ref-project-badge { font-size: 10px; letter-spacing: .09em; }
body.ref-home-page .ref-project-card--locked:hover { transform: none; }
body.ref-home-page .ref-capabilities { padding-block: 12px clamp(48px, 6vw, 80px); }
body.ref-home-page .ref-capability { min-height: 132px; gap: 16px; padding: 24px; }
body.ref-home-page .ref-capability h3 { font-size: 12px; line-height: 1.5; letter-spacing: .035em; }
body.ref-home-page .ref-capability p { color: #b2aca3; font-size: 13px; line-height: 1.65; }
body.ref-home-page .ref-cta { min-height: 440px; padding-block: 64px; }
body.ref-home-page .ref-cta h2 { line-height: 1.05; }
body.ref-home-page .ref-cta__center > p:not(.ref-kicker) { color: #ddd5c9; font-size: 15px; line-height: 1.75; }
body.ref-home-page :is(.ref-cta__rail,.ref-cta__mark) { color: #b8afa2; font-size: 10px; }

/* Studio: give the story and team the same calm rhythm as the home page. */
body.studio-about-v33 .about-container { width: min(1440px, calc(100% - 80px)); }
body.studio-about-v33 .about-hero { grid-template-columns: 1fr 1.12fr; }
body.studio-about-v33 .about-hero__copy {
  direction: inherit;
  padding-inline-start: max(40px, calc((100vw - 1440px) / 2));
  padding-inline-end: clamp(32px, 4vw, 64px);
}
body.studio-about-v33 .about-hero h1 {
  max-width: 13ch;
  font-size: clamp(48px, 4.5vw, 76px);
  line-height: 1.1;
  letter-spacing: -.035em;
}
body.studio-about-v33 .about-hero__lead { color: #c7c0b4; font-size: 16px; line-height: 1.85; }
body.studio-about-v33 .about-kicker { color: #dfb579; font-size: 13px; letter-spacing: .08em; margin-bottom: 18px; }
body.studio-about-v33 .about-stats { box-shadow: none; border-radius: 0 0 10px 10px; }
body.studio-about-v33 .about-stat { background: transparent; border: 0; box-shadow: none; padding: 24px 14px; gap: 6px; }
body.studio-about-v33 .about-stat span { font-size: 13px; line-height: 1.5; }
body.studio-about-v33 .about-section { padding-block: clamp(48px, 6vw, 88px); }
body.studio-about-v33 .about-story { gap: clamp(28px, 5vw, 76px); }
body.studio-about-v33 .about-story__media { border-radius: 10px; }
body.studio-about-v33 .section-copy { color: #beb8ad; line-height: 1.85; }
body.studio-about-v33 .about-pillars { margin-block: 0 24px; }
body.studio-about-v33 .about-pillar {
  background: transparent;
  border: 0;
  box-shadow: none;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 20px;
  padding: 32px 24px;
  direction: inherit;
}
body.studio-about-v33 .about-pillar img { width: 48px; height: 48px; }
body.studio-about-v33 .about-pillar p { color: #bfb8ac; font-size: 15px; line-height: 1.8; }
body.studio-about-v33 .about-team { padding-block: 32px 72px; }
body.studio-about-v33 .about-team__head { margin-bottom: 28px; }
body.studio-about-v33 .about-team__title h2 { font-size: 28px; }
body.studio-about-v33 .about-team-grid { gap: 20px; }
body.studio-about-v33 .team-card { border-radius: 8px; aspect-ratio: 4 / 4.5; min-height: 0; }
body.studio-about-v33 .team-card span { bottom: 18px; font-size: 14px; }
body.studio-about-v33 .about-cta { min-height: 320px; }
body.studio-about-v33 .about-cta__inner { padding-block: 52px; }

/* HN Gunslinger keeps its cinematic hero and scrollable artwork rails. */
body.hn40-page { --hn40-shell: min(1440px, calc(100% - 80px)); }
body.hn40-page .hn40-section { padding-block: clamp(48px, 5.5vw, 80px) 24px; }
body.hn40-page .hn40-section-head { margin-bottom: 28px; gap: 32px; }
body.hn40-page .hn40-section-head h2 { text-wrap: balance; }
body.hn40-page .hn40-section-head__side { color: #bdb4a5; line-height: 1.8; }
body.hn40-page :is(.hn40-step-card,.hn40-feature-card,.hn40-arsenal-card,.hn40-media-card) { border-radius: 9px; }
body.hn40-page .hn40-feature-card { min-height: 340px; }
body.hn40-page .hn40-feature-card > div:last-child { inset-inline: 22px; bottom: 24px; }
body.hn40-page .hn40-feature-card h3 { font-size: 23px; line-height: 1.25; }
body.hn40-page :is(.hn40-card-copy p,.hn40-feature-card p,.hn42-arsenal-card p) { color: #d5cbbd; font-size: 13px; line-height: 1.65; }
body.hn40-page .hn40-card-copy { bottom: 22px; }
body.hn40-page .hn40-rail { scrollbar-width: thin; scrollbar-color: #6e5940 transparent; scroll-padding-inline: 2px; }
body.hn40-page .hn40-rail::-webkit-scrollbar { display: block; height: 3px; }
body.hn40-page .hn40-rail::-webkit-scrollbar-thumb { background: #6e5940; border-radius: 4px; }
body.hn40-page .hn40-actions { flex-wrap: wrap; }
body.hn40-page .hn40-btn { min-height: 48px; }
body.hn40-page .hn40-cta { min-height: 390px; }

/* Download: retain the provided scene, platform artwork and red accent. */
body.download-page .download-hero__content::before { border-color: rgba(225,214,199,.13); border-radius: 20px; }
body.download-page .download-hero__title { text-wrap: balance; letter-spacing: -.02em; }
body.download-page .download-platform { border-radius: 14px; border-color: rgba(225,214,199,.15); padding-block: 28px 24px; }
body.download-page .download-platform__subline { color: #c0b9b2; }
body.download-page :is(.download-platform__status,.download-hero__note,.download-hero__footer) { color: #b5ada7; }
body.download-page .download-platform__button { min-height: 48px; border-radius: 8px; }
body.download-page .download-hero__note { font-size: 13px; line-height: 1.7; }

/* Support: quieter panels, readable labels and practical space for messages. */
body.support-v51-page { --support-muted: #bcb3ad; }
body.support-v51-page .support-v51__hero h1 { line-height: 1.06; text-wrap: balance; }
body.support-v51-page :is(.support-v51__eyebrow,.support-v51__mini-en,.support-v51__tagline,.support-v51__section-head p) { color: #b6a9a0; }
body.support-v51-page .support-v51__help-grid { gap: 20px; max-width: 1360px; }
body.support-v51-page .support-v51__help-card { border-color: rgba(222,113,108,.26); padding: 28px 22px; border-radius: 10px; }
body.support-v51-page .support-v51__help-card p { font-size: 14px; line-height: 1.75; }
body.support-v51-page .support-v51__contact-wrap { max-width: 1360px; gap: 24px; padding: 0; border: 0; background: transparent; }
body.support-v51-page .support-v51__form-card { padding: clamp(24px, 3vw, 44px); }
body.support-v51-page :is(.support-v51__form-card,.support-v51__before) { border-color: rgba(218,173,146,.18); border-radius: 12px; }
body.support-v51-page .support-v51__form { gap: 18px; }
body.support-v51-page .support-v51__form-title { margin-bottom: 26px; }
body.support-v51-page .support-v51__label { color: #d8cec4; font-size: 13px; }
body.support-v51-page .support-v51__control { font-size: 16px; border-color: rgba(219,190,172,.26); background: #131212; }
body.support-v51-page .support-v51__control::placeholder { color: #a09891; opacity: 1; }
body.support-v51-page .support-v51__control:focus { border-color: #ed8c82; box-shadow: 0 0 0 3px rgba(239,96,91,.16); }
body.support-v51-page .support-v51__message { min-height: 190px; }
body.support-v51-page .support-v51__privacy-note { color: #b2a69c; font-size: 12px; line-height: 1.7; }
body.support-v51-page .support-v51__before { padding: clamp(24px, 3vw, 44px); }
body.support-v51-page .support-v51__before-copy { width: 100%; }
body.support-v51-page .support-v51__checklist { gap: 18px; }
body.support-v51-page .support-v51__checklist li { font-size: 14px; line-height: 1.7; }

body.preorder-private-page .preorder-copy h2 { max-width: 14ch; font-size: clamp(44px, 5.5vw, 80px); line-height: 1.05; text-wrap: balance; }
body.preorder-private-page .preorder-copy > p:not(.preorder-badge) { font-size: 16px; line-height: 1.85; }
body.preorder-private-page .preorder-actions { flex-wrap: wrap; gap: 12px; margin-top: 28px; }
body.preorder-private-page .preorder-btn { min-height: 48px; }

@media (max-width: 1100px) {
  body.ref-home-page { --ref-shell: calc(100% - 48px); }
  body.ref-home-page .ref-about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 124px; gap: 24px; }
  body.ref-home-page .ref-capability { grid-template-columns: 36px minmax(0,1fr); padding: 18px; gap: 12px; }
  body.ref-home-page .ref-project-card__body { padding: 18px; }
  body.hn40-page { --hn40-shell: calc(100% - 48px); }
  body.studio-about-v33 .about-container { width: calc(100% - 48px); }
  body.studio-about-v33 .about-pillar { padding-inline: 18px; gap: 14px; }
}

@media (max-width: 980px) {
  body.studio-about-v33 .about-hero { grid-template-columns: 1fr; }
  body.studio-about-v33 .about-hero__copy { padding: 40px 24px 48px; }
  body.studio-about-v33 .about-hero h1 { max-width: 18ch; }
  body.studio-about-v33 .about-pillars { padding-block: 8px; }
  body.studio-about-v33 .about-pillar { padding: 26px 0; }
  body.ref-home-page .ref-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.ref-home-page .ref-capability { min-height: 112px; }
  body.ref-home-page .ref-capability:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  body.ref-home-page .ref-capability:nth-child(2n) { border-inline-end: 0; }
}

@media (max-width: 768px) {
  body.ref-home-page { --ref-shell: calc(100% - 32px); }
  body.ref-home-page .ref-about { padding-block: 40px; }
  body.ref-home-page .ref-about__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 24px 20px; border: 0; background: none; overflow: visible; }
  body.ref-home-page .ref-about__media { grid-column: 1; grid-row: 1; min-height: 0; height: 100%; aspect-ratio: auto; border-radius: 8px; }
  body.ref-home-page .ref-about__copy { grid-column: 2; grid-row: 1; padding: 0; }
  body.ref-home-page .ref-about__copy .ref-kicker { font-size: 10px; margin-bottom: 12px; }
  body.ref-home-page .ref-about__copy h2 { font-size: clamp(23px, 4.5vw, 34px); line-height: 1.15; }
  body.ref-home-page .ref-about__copy > p:not(.ref-kicker) { margin-block: 14px 18px; font-size: 13px; line-height: 1.75; }
  body.ref-home-page .ref-stat-stack { grid-column: 1 / -1; display: block; border: 0; padding: 0; }
  body.ref-home-page .ref-stat-list { flex-direction: row; border-block: 1px solid rgba(255,255,255,.12); }
  body.ref-home-page .ref-stat { flex: 1; min-width: 0; min-height: 86px; padding: 14px 10px; border: 0; border-inline-end: 1px solid rgba(255,255,255,.12); }
  body.ref-home-page .ref-stat:last-child { border: 0; }
  body.ref-home-page .ref-stat strong { font-size: 30px; }
  body.ref-home-page .ref-stat span { font-size: 10px; margin-top: 4px; }
  body.ref-home-page .ref-made-in-kuwait { min-height: 36px; padding-top: 14px; gap: 8px; font-size: 11px; }
  body.ref-home-page .ref-made-in-kuwait img { width: 22px; height: 15px; }
  body.ref-home-page :is(.ref-outline-btn,.ref-gold-btn,.ref-text-link) { font-size: 11px; padding-inline: 14px; gap: 14px; }
  body.ref-home-page .ref-outline-btn { min-width: 0; max-width: 100%; }
  body.ref-home-page .ref-section-head { align-items: flex-start; gap: 18px; margin-bottom: 24px; }
  body.ref-home-page .ref-projects h2 { font-size: clamp(31px, 7vw, 44px); }
  body.ref-home-page .ref-text-link { padding-inline: 0; gap: 8px; white-space: normal; text-align: end; }
  body.ref-home-page .ref-project-rail { display: flex; width: 100%; gap: 14px; padding-inline: 0; padding-bottom: 12px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #6e5940 transparent; }
  body.ref-home-page .ref-project-card { flex: 0 0 82%; }
  body.ref-home-page .ref-project-card:not(.ref-project-card--featured) { flex-basis: 72%; }
  body.ref-home-page .ref-project-card__body { min-height: 126px; padding: 20px; }
  body.ref-home-page .ref-project-card__body h3 { font-size: 23px; }
  body.ref-home-page .ref-project-card__body p { font-size: 13px; }
  body.ref-home-page .ref-circle-arrow { flex-basis: 40px; width: 40px; height: 40px; }
  body.ref-home-page .ref-project-card__media,
  body.ref-home-page .ref-project-card:not(.ref-project-card--featured) .ref-project-card__media { height: clamp(210px, 42vw, 300px); }
  body.ref-home-page .ref-capability { grid-template-columns: 1fr; align-content: start; padding: 22px 18px; gap: 14px; }
  body.ref-home-page .ref-capability svg { width: 32px; height: 32px; }
  body.ref-home-page .ref-capability h3 { font-size: 11px; }
  body.ref-home-page .ref-capability p { font-size: 12px; }
  body.ref-home-page .ref-cta { min-height: 370px; padding-block: 48px; }
  body.ref-home-page .ref-cta__content { grid-template-columns: 1fr; gap: 22px; }
  body.ref-home-page .ref-cta__rail { justify-content: center; }
  body.ref-home-page .ref-cta__mark { justify-self: center; text-align: center; }
  body.ref-home-page .ref-cta h2 { font-size: clamp(34px, 8vw, 52px); }
  body.ref-home-page .ref-cta__center > p:not(.ref-kicker) { max-width: 32ch; font-size: 14px; }
  body.studio-about-v33 .about-container { width: calc(100% - 32px); }
  body.studio-about-v33 .about-hero__copy { padding: 36px 20px 44px; }
  body.studio-about-v33 .about-hero h1 { font-size: clamp(38px, 8.8vw, 62px); max-width: 17ch; }
  body.studio-about-v33 .about-team { padding-block: 28px 48px; }
  body.studio-about-v33 .about-team-grid { gap: 12px; }
  body.studio-about-v33 .team-card span { bottom: 14px; font-size: 12px; }
  body.hn40-page { --hn40-shell: calc(100% - 32px); }
  body.hn40-page .hn40-hero { height: auto; min-height: 560px; }
  body.hn40-page .hn40-hero__layout { min-height: 560px; padding-top: 140px; padding-bottom: 30px; display: flex; align-items: flex-end; }
  body.hn40-page .hn40-hero__copy { position: relative; inset: auto; max-width: 100%; }
  body.hn40-page .hn40-hero__copy h1 { font-size: clamp(35px, 10vw, 54px); }
  body.hn40-page .hn40-hero__desc { font-size: 14px; line-height: 1.7; }
  body.hn40-page .hn40-btn { font-size: 12px; padding-inline: 16px; white-space: normal; }
  body.hn40-page .hn40-section-head { gap: 16px; margin-bottom: 24px; }
  body.hn40-page .hn40-section-head h2 { font-size: clamp(26px, 6vw, 36px); }
  body.hn40-page .hn40-arrow-link { white-space: normal; font-size: 12px; text-align: end; }
  body.hn40-page .hn40-feature-card { min-height: 290px; }
  body.hn40-page .hn40-feature-card h3 { font-size: 22px; }
  body.hn40-page .hn40-rail--steps-four .hn40-card-copy p { font-size: 13px; }
  body.hn40-page .hn40-rail--steps-four .hn40-step-card { min-height: max(360px, 96vw); }
  body.hn40-page .hn42-arsenal-card { height: 240px; }
  body.hn40-page .hn40-filter-pills { max-width: 45%; }
  body.download-page .download-hero__content { padding-inline: 16px; }
  body.download-page .download-platform { padding: 22px 12px 18px; gap: 10px; }
  body.download-page .download-platform__subline { font-size: 12px; }
  body.download-page .download-platform__name { font-size: 16px; }
  body.download-page .download-platform__button { font-size: 13px; }
  body.support-v51-page .support-v51__hero { min-height: 570px; align-items: end; padding: 200px 20px 48px; }
  body.support-v51-page .support-v51__hero-copy { width: 100%; gap: 14px; }
  body.support-v51-page .support-v51__hero::before { background: linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.75) 42%,rgba(0,0,0,.88)); }
  body.support-v51-page .support-v51__game-mark { inset-block-start: 108px; inset-inline-start: 20px; width: auto; }
  body.support-v51-page .support-v51__game-mark strong { font-size: 24px; }
  body.support-v51-page .support-v51__game-mark span { font-size: 9px; }
  body.support-v51-page .support-v51__hero h1 { font-size: clamp(36px, 9vw, 56px); }
  body.support-v51-page .support-v51__intro { max-width: 40ch; font-size: 14px; line-height: 1.8; }
  body.support-v51-page :is(.support-v51__eyebrow,.support-v51__tagline) { font-size: 10px; letter-spacing: .14em; }
  body.support-v51-page .support-v51__email { width: min(100%, 380px); padding-inline: 12px; gap: 10px; }
  body.support-v51-page .support-v51__email span { font-size: 13px; letter-spacing: 0; overflow-wrap: anywhere; }
  body.support-v51-page .support-v51__section { padding: 40px 16px; }
  body.support-v51-page .support-v51__help-grid { grid-auto-columns: min(80vw, 340px); gap: 14px; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: #72433c transparent; }
  body.support-v51-page .support-v51__help-card { min-height: 230px; padding: 26px 22px; }
  body.support-v51-page .support-v51__contact-wrap { grid-auto-flow: row; grid-template-columns: minmax(0,1fr); grid-auto-columns: auto; overflow: visible; gap: 24px; padding: 0; }
  body.support-v51-page :is(.support-v51__form-card,.support-v51__before) { min-height: 0; padding: 24px 20px; }
  body.support-v51-page .support-v51__form-title h3,
  body.support-v51-page .support-v51__before h3 { font-size: 26px; line-height: 1.3; }
  body.support-v51-page .support-v51__form { grid-template-columns: minmax(0,1fr); gap: 18px; }
  body.support-v51-page .support-v51__submit { min-height: 54px; font-size: 15px; }
  body.support-v51-page .support-v51__before p { font-size: 14px; line-height: 1.8; }
  body.preorder-private-page .preorder-copy h2 { font-size: clamp(38px, 10vw, 60px); max-width: 16ch; }
}

@media (max-width: 380px) {
  body.ref-home-page .ref-about__grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 20px 14px; }
  body.ref-home-page .ref-about__copy h2 { font-size: 23px; }
  body.ref-home-page .ref-outline-btn { padding-inline: 10px; gap: 8px; font-size: 10px; }
  body.ref-home-page .ref-section-head { flex-direction: column; gap: 10px; }
  body.ref-home-page .ref-text-link { min-height: 36px; }
  body.ref-home-page .ref-project-card__body { padding: 16px; }
  body.download-page .download-platform { padding-inline: 8px; }
  body.download-page .download-platform__name { font-size: 14px; }
  body.download-page .download-hero__title { font-size: 32px; }
}

html[dir="rtl"] body.ref-home-page :is(.ref-kicker,.ref-text-link,.ref-capability h3,.ref-project-badge) { letter-spacing: 0; }
html[dir="rtl"] body.studio-about-v33 .about-hero h1 { letter-spacing: 0; line-height: 1.3; }
html[dir="rtl"] body.studio-about-v33 :is(.about-hero__copy,.about-pillar) { direction: rtl; }
html[dir="rtl"] body.support-v51-page :is(.support-v51__eyebrow,.support-v51__mini-en,.support-v51__tagline) { letter-spacing: 0; }
html[dir="rtl"] body.support-v51-page .support-v51__hero-copy { text-shadow: 0 2px 20px #000; }
html[dir="rtl"] body.support-v51-page .support-v51__hero {
  background-image:
    linear-gradient(270deg, rgba(5,5,5,.16) 0%, rgba(5,5,5,.16) 43%, rgba(5,5,5,.68) 63%, rgba(5,5,5,.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.48)),
    url('/assets/support-v49/hero-saloon.png');
}
/* Clear the taller v57 navigation without shrinking the original character art. */
body.ref-home-page .character-mode-toggle { inset-block-start: 120px; }
body.download-page .download-hero { padding-top: 140px; }
@media(max-width:1120px) {
  body.ref-home-page .character-hero { margin-block-start: 72px; }
  body.ref-home-page .character-mode-toggle { inset-block-start: 70px; }
}
body.hn40-page .hn40-hero__copy h1 { font-size: clamp(48px, 5vw, 72px); overflow-wrap: normal; word-break: normal; }
@media(max-width:768px) {
  body.hn40-page .hn40-hero__copy h1 { font-size: clamp(32px, 8.8vw, 50px); }
}
@media(min-width:673px) and (max-width:1120px) {
  body.ref-home-page .character-hero { margin-block-start: 112px; }
}