/* Approved 941px design canvas. Decorative frame slices never contain live text. */
:root {
  color-scheme: dark;
  --u: min(1px, calc(100vw / 941));
  --ink: #fff5e4;
  --gold: #ffdb72;
  --muted: #c6dce6;
  --line: #d9b660;
  --panel: #032e43;
  --navy: #03243a;
  --deep: #001b2d;
  --cyan: #40e5ff;
  --serif: "Times New Roman", Times, serif;
  --metal: linear-gradient(180deg,#fffbd2 3%,#ffe681 24%,#ffb72e 49%,#fff2a1 66%,#bd680d 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 12px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--navy);
  background-image: radial-gradient(ellipse at 0 50%,#00688348,transparent 70%), radial-gradient(ellipse at 100% 50%,#17286650,transparent 75%), linear-gradient(180deg,transparent 640px,#03243a 900px),url('/assets/website/approved/palace-backdrop.webp');
  background-repeat: repeat-y,repeat-y,no-repeat,no-repeat;
  background-position: center top;
  background-size: 100% 1100px,100% 1100px,100% 100%,1600px auto;
  font: 16px/1.4 var(--serif);
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
svg { width: 22px; height: 22px; flex-shrink: 0; }
.visual-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
[hidden] { display: none!important; }
:focus-visible { outline: 3px solid #85efff; outline-offset: 4px; }
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 110; padding: 10px 18px; background: #ffdb72; color: #03243a; border-radius: 8px; }
.skip-link:focus { top: 8px; }
.dimensional-icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 3px #0008); }

/* Header uses the original, user-approved GAMA crest. */
.site-header { position: relative; z-index: 20; background: linear-gradient(110deg,#002b3f,#001a29); border-bottom: max(1px,calc(2 * var(--u))) solid #dfbb47; }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 941px; min-height: calc(98 * var(--u)); margin: auto; padding: calc(8 * var(--u)) calc(30 * var(--u)); gap: calc(18 * var(--u)); }
.brand { display: flex; align-items: center; gap: calc(16 * var(--u)); min-width: 0; }
.brand img { width: calc(114 * var(--u)); height: calc(82 * var(--u)); object-fit: contain; flex-shrink: 0; }
.brand span { font-size: calc(44 * var(--u)); line-height: 1.08; font-weight: 700; white-space: normal; overflow-wrap: anywhere; background: var(--metal); background-clip: text; -webkit-background-clip: text; color: transparent; filter: url(#gold-bevel); }
.menu-toggle { position: relative; display: grid; place-items: center; flex-shrink: 0; width: calc(64 * var(--u)); height: calc(64 * var(--u)); padding: 0; margin-right: calc(4 * var(--u)); border: 0; background: none; color: #ffe992; }
.menu-toggle::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(44px,100%); height: max(44px,100%); transform: translate(-50%,-50%); }
.menu-toggle svg { width: calc(58 * var(--u)); height: calc(58 * var(--u)); stroke-width: 2.7; filter: drop-shadow(0 1px 0 #ad7418); }

/* Drawer interactions and readable controls are retained at every viewport. */
.menu-overlay { position: fixed; inset: 0; z-index: 90; background: #00121bdb; backdrop-filter: blur(5px); }
.site-menu { position: fixed; right: 0; top: 0; bottom: 0; z-index: 100; width: min(360px,92vw); overflow: auto; padding: 22px; background: linear-gradient(130deg,#064358,#001f35); border-left: 2px solid #d9b76b; box-shadow: -8px 0 35px #000b; }
.menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #ffe194; font-size: 24px; padding-bottom: 16px; border-bottom: 1px solid #647b75; }
.menu-close { width: 44px; height: 44px; font: 32px/1 Arial,sans-serif; color: #ffe7a1; background: #01273c; border: 1px solid #d8b659; border-radius: 50%; }
.site-menu>a:not(.download-button) { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 49px; border-bottom: 1px solid #ffffff1d; font-size: 18px; }
.site-menu a[aria-current] { color: #ffe081; }
.site-menu .download-button { width: 100%; margin-top: 22px; font-size: 21px; min-height: 60px; }
.site-menu .android-medallion { width: 38px; height: 38px; }

.site-main { width: 100%; max-width: 941px; margin: 0 auto; padding: 0 calc(20 * var(--u)) max(30px,calc(60 * var(--u))); }
.home-page { padding-inline: 0; }
.inner-page { padding-top: calc(16 * var(--u)); }
.hero { position: relative; isolation: isolate; margin: 0; }
.hero--reference::before,.hero--reference::after { content: ""; position: absolute; top: calc(680 * var(--u)); z-index: 1; width: calc(36 * var(--u)); height: calc(130 * var(--u)); pointer-events: none; background: url('/assets/website/exact/reference-scroll-left.webp') center/100% 100% no-repeat; }
.hero--reference::before { left: 0; }
.hero--reference::after { right: 0; width: calc(33 * var(--u)); background-image: url('/assets/website/exact/reference-scroll-right.webp'); }
.hero-stage { position: relative; width: 100%; height: calc(685 * var(--u)); overflow: hidden; background: #03243a; }
.hero-scene,.hero-scene img,.approved-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero--reference .approved-hero-art { object-fit: fill; }
.hero--reference .hero-copy { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.hero-copy { position: absolute; left: 5.5%; top: 25%; width: 46.5%; z-index: 1; text-align: center; }
.hero-eyebrow { position: relative; margin: 0 0 calc(16 * var(--u)); color: #fff9e9; font-size: calc(40 * var(--u)); line-height: 1.15; font-weight: 700; letter-spacing: calc(2.7 * var(--u)); text-shadow: 0 2px 3px #00111d; }
.hero-eyebrow::before { content: ""; display: block; width: 90%; height: max(1px,calc(2 * var(--u))); margin: 0 auto calc(15 * var(--u)); background: linear-gradient(90deg,transparent,#dbac3d 15%,#fff2a5 50%,#dbac3d 85%,transparent); }
.hero-eyebrow::after { content: ""; position: absolute; width: calc(13 * var(--u)); height: calc(13 * var(--u)); left: calc(50% - 6.5 * var(--u)); top: calc(-6 * var(--u)); border: max(1px,calc(2 * var(--u))) solid #ffe285; transform: rotate(45deg); background: #062438; }
.hero h1 { width: 100%; margin: 0; line-height: 1; }
.sculpted-title img { width: 100%; height: auto; }
.hero-tagline { margin: calc(18 * var(--u)) calc(-9 * var(--u)) 0; color: #fff9e9; font-size: calc(36 * var(--u)); line-height: 1.16; letter-spacing: calc(-.6 * var(--u)); text-shadow: 0 2px 3px #000; white-space: normal; }
.editable-title { font-size: calc(112 * var(--u)); color: #ffe387; text-shadow: 1px 1px #ab6b06,2px 3px #7d3b00,0 5px 9px #0008; }
.editable-title span { display: block; overflow-wrap: anywhere; }

/* 9-slice frames use only reference edge pixels; labels remain real controls. */
.download-button,.small-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 3px 6px;
  color: #04141e;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  border-style: solid;
  border-color: transparent;
  border-width: 7px 15px 9px;
  border-image: url('/assets/website/exact/gold-button-frame.webp') 18 40 23 40 / 7px 15px 9px stretch;
  background: #ffcc3e url('/assets/website/exact/gold-button-surface.webp') center/100% 100% no-repeat;
  background-clip: padding-box;
}
.download-button:hover,.small-button:hover { filter: brightness(1.055); }
.download-button:active,.small-button:active { transform: translateY(1px); }
.hero-download { display: flex; justify-content: flex-start; margin: calc(-15 * var(--u)) calc(36 * var(--u)) 0; height: calc(142 * var(--u)); min-height: 0; padding: 0 calc(3 * var(--u)); gap: calc(31 * var(--u)); border-width: calc(18 * var(--u)) calc(40 * var(--u)) calc(23 * var(--u)); border-image-width: calc(18 * var(--u)) calc(40 * var(--u)) calc(23 * var(--u)); font-size: calc(68 * var(--u)); line-height: 1; letter-spacing: calc(-.35 * var(--u)); z-index: 2; white-space: nowrap; }
.hero-download .android-medallion { width: calc(132 * var(--u)); height: calc(116 * var(--u)); }
.hero-download { gap: calc(35 * var(--u)); font-size: calc(72 * var(--u)); border-image: none; background: transparent url('/assets/website/exact/gold-button-skin.webp') center/100% 100% no-repeat border-box; }
.hero-download>span:last-child { transform: translateY(calc(-2 * var(--u))) scaleX(.952); transform-origin: left center; -webkit-text-stroke: calc(.75 * var(--u)) currentColor; }
.android-medallion { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; }
.android-medallion .dimensional-icon { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #67410080); }

.shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: calc(16 * var(--u)); height: calc(238 * var(--u)); margin: calc(11 * var(--u)) calc(16 * var(--u)) 0; padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)); border: max(1px,calc(2 * var(--u))) solid #24cee9; border-radius: calc(58 * var(--u)); background: radial-gradient(ellipse at 15% 10%,#0e647a66,transparent 65%),linear-gradient(125deg,#003149e8,#002137ed); box-shadow: inset 0 0 calc(26 * var(--u)) #20bdda33; }
.shortcuts a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); min-width: 0; height: calc(190 * var(--u)); padding: calc(9 * var(--u)) calc(3 * var(--u)) calc(8 * var(--u)); color: #fff8ec; border-style: solid; border-color: transparent; border-width: calc(8 * var(--u)) calc(20 * var(--u)) calc(9 * var(--u)); border-image: url('/assets/website/exact/quick-tile-frame.webp') 8 20 9 20 / calc(8 * var(--u)) calc(20 * var(--u)) calc(9 * var(--u)) stretch; background: #022d40 url('/assets/website/exact/quick-surface.webp') center/100% 100% no-repeat; background-clip: padding-box; }
.shortcuts a>span { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(130 * var(--u)); height: calc(112 * var(--u)); }
.shortcuts .dimensional-icon { width: 100%; height: 100%; object-fit: contain; }
.shortcuts strong { font-size: calc(43 * var(--u)); line-height: 1; font-weight: 400; text-shadow: 0 calc(1 * var(--u)) calc(1 * var(--u)) #0009; transform: translateY(calc(-4 * var(--u))) scaleX(.83); }
.shortcuts a { border-image: none; background: transparent url('/assets/website/exact/quick-tile-skin.webp') center/100% 100% no-repeat border-box; }
.shortcuts .dimensional-icon { transform: translateY(calc(-3 * var(--u))) scale(1.1); }
.shortcuts a:first-child .dimensional-icon { transform: translateY(calc(-5 * var(--u))) scale(.88,.94); }
.shortcuts a:last-child .dimensional-icon { transform: translateY(calc(4 * var(--u))) scale(1.1); }
.shortcuts a:hover { filter: brightness(1.08); }

.contact-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: calc(15 * var(--u)); margin: calc(-6 * var(--u)) calc(38 * var(--u)) 0; }
.contact-button { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(17 * var(--u)); min-width: 0; height: calc(128 * var(--u)); padding: 0 calc(8 * var(--u)); color: #fff8e9; font-size: calc(42 * var(--u)); font-weight: 700; line-height: 1; white-space: nowrap; border-style: solid; border-color: transparent; border-width: calc(17 * var(--u)) calc(21 * var(--u)); border-image: url('/assets/website/exact/blue-button-frame.webp') 17 21 17 21 / calc(17 * var(--u)) calc(21 * var(--u)) stretch; background: #03354b url('/assets/website/exact/blue-button-surface.webp') center/100% 100% no-repeat; background-clip: padding-box; text-shadow: 0 calc(3 * var(--u)) calc(3 * var(--u)) #001018; }
.contact-button .dimensional-icon { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.contact-button svg { width: calc(22 * var(--u)); height: calc(31 * var(--u)); color: #fff1d6; stroke-width: 2.4; }
.contact-button.whatsapp { border-width: calc(18 * var(--u)) calc(24 * var(--u)); border-image-source: url('/assets/website/exact/green-button-frame.webp'); border-image-slice: 18 24 18 24; border-image-width: calc(18 * var(--u)) calc(24 * var(--u)); background-image: url('/assets/website/exact/green-button-surface.webp'); background-color: #004329; color: #fff3cb; }
.contact-button:hover { filter: brightness(1.07); }
.contact-button { font-size: calc(43 * var(--u)); font-weight: 400; text-shadow: 0 calc(1 * var(--u)) calc(1 * var(--u)) #001018; }
.contact-button.call { border-image: none; background: transparent url('/assets/website/exact/blue-button-skin.webp') center/100% 100% no-repeat border-box; }
.contact-button.whatsapp { border-image: none; background: transparent url('/assets/website/exact/green-button-skin.webp') center/100% 100% no-repeat border-box; }
.contact-button>span { transform: scaleX(.88); }
.contact-button { display: grid; grid-template-columns: calc(96 * var(--u)) minmax(0,1fr) calc(22 * var(--u)); gap: calc(12 * var(--u)); padding-inline: calc(14 * var(--u)); text-align: center; }
.contact-button .dimensional-icon { width: calc(84 * var(--u)); height: calc(84 * var(--u)); justify-self: center; transform: translateX(calc(5 * var(--u))); }
.contact-button.whatsapp .dimensional-icon { width: calc(108 * var(--u)); height: calc(108 * var(--u)); max-width: none; }
.hero-download:focus-visible,.shortcuts a:focus-visible,.contact-button:focus-visible { outline-offset: -5px; }
.unavailable { cursor: default; }

.home-rates-section { margin: calc(22 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)); padding: 0 calc(22 * var(--u)) calc(26 * var(--u)); border: max(1px,calc(2 * var(--u))) solid #25c8e8; border-radius: calc(54 * var(--u)); background: linear-gradient(130deg,#002b40e8,#001c30ec); box-shadow: inset 0 calc(2 * var(--u)) calc(2 * var(--u)) #8ee6ec55; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); margin: 0 0 calc(20 * var(--u)); min-height: calc(92 * var(--u)); }
.section-title>div { flex: 1; min-width: 0; }
.section-title .eyebrow:empty { display: none; }
.section-title h2 { position: relative; display: flex; align-items: center; gap: calc(20 * var(--u)); margin: 0; color: #fff7eb; font-size: calc(64 * var(--u)); line-height: 1.05; text-shadow: 0 calc(3 * var(--u)) calc(3 * var(--u)) #000d; }
.section-title h2::after { content: ""; flex: 1; height: calc(2 * var(--u)); max-width: calc(250 * var(--u)); background: linear-gradient(90deg,#bc8421,#fff0a5 45%,#c39432 70%,transparent); }
.section-title>a { display: flex; align-items: center; gap: calc(10 * var(--u)); flex-shrink: 0; color: #ffdb65; font-size: calc(32 * var(--u)); font-weight: 700; line-height: 1.1; }
.section-title>a svg { width: calc(23 * var(--u)); height: calc(32 * var(--u)); }
.home-rates-section .section-title { height: calc(101 * var(--u)); min-height: 0; margin: 0; padding: 0 calc(18 * var(--u)); }
.home-rates-section .section-title h2 { white-space: nowrap; font-size: calc(61 * var(--u)); letter-spacing: calc(-1.8 * var(--u)); }
.home-rates-section .section-title h2::after { transform: translateY(calc(6 * var(--u))); }
.home-rates-section .section-title h2::before { content: ""; position: absolute; width: calc(12 * var(--u)); height: calc(12 * var(--u)); left: calc(410 * var(--u)); top: calc(50% + 6 * var(--u)); border: max(1px,calc(2 * var(--u))) solid #ffdf76; background: #012a3d; transform: translateY(-50%) rotate(45deg); z-index: 1; }
.home-page .home-rates-section .rate-card { background: transparent; }
.home-page .home-rates-section .rate-card::before { border-image: none; border: max(1px,calc(2 * var(--u))) solid transparent; border-radius: calc(32 * var(--u)); background: url('/assets/website/exact/quick-surface.webp') center/100% 100% no-repeat padding-box,linear-gradient(135deg,#fff1a8,#c1a448 28%,#fff2bd 62%,#ae7a2d) border-box; }

/* Non-home headings retain real text and expand for custom content. */
.page-intro { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: max(10px,calc(22 * var(--u))); padding: max(12px,calc(28 * var(--u))) max(10px,calc(24 * var(--u))); margin: 0 calc(-20 * var(--u)) max(12px,calc(28 * var(--u))); background: linear-gradient(90deg,#00283b20,#00375090,#00283b30); border-bottom: 1px solid #38d7e7; box-shadow: 0 5px 16px #00c5e929; }
.page-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('/assets/website/approved/palace-backdrop.webp') center 25%/cover; opacity: .65; }
.page-intro-art { display: block; flex-shrink: 0; }
.page-intro-art .dimensional-icon { width: max(42px,calc(100 * var(--u))); height: max(42px,calc(100 * var(--u))); }
.page-intro-copy { min-width: 0; }
.page-intro h1 { margin: 0; color: #ffdd77; font-size: max(25px,calc(62 * var(--u))); line-height: 1.1; overflow-wrap: anywhere; text-shadow: 0 -1px #fff7c3,1px 1px #a85d06,1px 2px #4f2600,0 3px 4px #0009; }
.page-intro-copy>p { margin: 6px 0 0; color: var(--ink); font-size: max(15px,calc(34 * var(--u))); overflow-wrap: anywhere; }
.page-intro--reference { display: block; height: calc(135 * var(--u)); min-height: 0; padding: 0; border: 0; margin-bottom: 0; box-shadow: none; background: none; }
.page-intro--reference::before { display: none; }
.page-intro--reference .approved-result-title-art,.page-intro--reference .approved-title-art { display: block; width: 100%; height: 100%; object-fit: fill; }
.page-intro--reference .page-intro-copy,.page-intro--reference .page-intro-art { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.page-results.inner-page { padding-top: 0; }
.page-game-rates .page-intro-art { order: 2; }
.page-game-rates .page-intro-copy { order: 1; }
.page-about .page-intro,.page-contact .page-intro,.page-faq .page-intro,.page-download .page-intro { align-items: flex-start; justify-content: flex-start; padding: 22px 15px; border-radius: 18px; margin-inline: 0; }
.page-about .page-intro-copy,.page-contact .page-intro-copy,.page-faq .page-intro-copy,.page-download .page-intro-copy { flex: 1; }
.page-notes { max-width: 900px; margin: 22px auto 0; padding: 12px 16px; border-top: 1px solid #5b7c7e; color: var(--muted); font-size: 14px; line-height: 1.6; }
.page-notes p { margin: 0 0 10px; }

label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
input,select,textarea { min-width: 0; max-width: 100%; min-height: 44px; padding: 10px 12px; color: #fff4df; background: #002338; border: 1px solid #d8b872; border-radius: 10px; line-height: 1.15; box-shadow: inset 0 2px 4px #00131f; }
input[type=date] { color-scheme: dark; }
select option { background: #032d43; color: #fff; }
input::placeholder { color: #a8c1cb; }
input:focus,select:focus,textarea:focus { border-color: #7feefa; box-shadow: 0 0 8px #25d3f56b; }
.text-link { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; color: #ffe28a; text-decoration: underline; text-underline-offset: 4px; }
.story-panel,.download-panel,.email-card { display: block; padding: 24px; border: 1px solid #d2b66b; border-radius: 20px; background: linear-gradient(130deg,#073d50,#002238); box-shadow: inset 0 1px 12px #0acde42b,0 4px 9px #0005; }
.download-panel .download-button { display: flex; max-width: 520px; margin: 0 auto; font-size: 26px; }
.download-panel .android-medallion { width: 55px; height: 55px; }
.download-panel p { color: var(--muted); text-align: center; }
.download-panel .text-link { display: flex; justify-content: center; }
.email-card { margin: 20px 0; color: #ffe098; overflow-wrap: anywhere; }
.faq-list { display: grid; gap: 14px; }
.faq-list details { padding: 14px 17px; border: 1px solid #bea45f; border-radius: 15px; background: linear-gradient(140deg,#043e50,#012238); box-shadow: 0 2px 8px #001622; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 30px; color: #ffe198; font-size: 18px; font-weight: 700; cursor: pointer; }
.faq-list summary::marker { content: ""; }
.faq-list summary>span { font: 23px Arial,sans-serif; }
.faq-list details[open] summary>span { transform: rotate(45deg); }
.faq-list p { color: #d2e4e8; line-height: 1.7; }

.site-footer { max-width: 941px; margin: 0 auto; padding: 25px 18px 28px; color: #c4d6dd; border-top: 1px solid #c7b16c; background: linear-gradient(#022a3d,#001826); text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: #ffe193; font-size: 22px; }
.footer-brand img { width: 45px; height: 45px; object-fit: contain; }
.site-footer p { font-size: 14px; }
.site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 16px; margin: 15px 0; font-size: 14px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 34px; }
.site-footer small { font-size: 12px; }
.local-preview-note { padding: 9px; color: #bdced4; background: #001c2d; border-top: 1px solid #506568; font: 11px Arial,sans-serif; text-align: center; }
.card-ornament { position: absolute; top: calc(-3 * var(--u)); width: calc(62 * var(--u)); height: calc(62 * var(--u)); z-index: 2; pointer-events: none; background: url('/assets/website/approved/card-corner.webp') center/contain no-repeat; }
.card-ornament-start { left: 0; }
.card-ornament-end { right: 0; transform: scaleX(-1); }

/* Long admin copy gets genuine text flow, never cropped to the sample artwork. */
.hero--expanded .hero-stage { height: auto; min-height: 330px; padding: 24px 5% 200px; overflow: visible; }
.hero--expanded .hero-copy { position: relative; left: auto; top: auto; width: 100%; text-align: left; }
.hero--expanded .hero-scene img { object-position: center bottom; opacity: .48; }
.hero--expanded .hero-copy::before { content: ""; position: absolute; inset: -15px; z-index: -1; background: #001b2dbf; border-radius: 12px; }
.hero--expanded .hero-eyebrow { font-size: 18px; }
.hero--expanded h1 { font-size: clamp(32px,7vw,68px); }
.hero--expanded .hero-tagline { margin: 12px 0; font-size: 18px; }
.hero--expanded .hero-download { font-size: max(22px,calc(68 * var(--u))); min-height: 62px; }

/* A continuous widescreen hero and wider content canvas for laptops/desktops.
   The mobile reference layout above is unchanged. */
@media (min-width:1024px) {
  .header-inner,.site-main,.site-footer { max-width: 1280px; }
  .header-inner { min-height: 80px; padding: 8px 32px; }
  .brand { gap: 14px; }
  .brand img { width: 90px; height: 64px; }
  .brand span { font-size: 36px; }
  .menu-toggle { width: 44px; height: 44px; margin: 0; }
  .menu-toggle svg { width: 34px; height: 34px; }
  .site-main { padding-inline: 28px; }
  .home-page { padding-inline: 0; }
  .hero--reference .hero-stage { height: auto; aspect-ratio: 2/1; background: transparent; }
  .hero--reference::before,.hero--reference::after { top: auto; bottom: 0; height: 110px; }
  .hero--reference::before { left: calc(50% - 484px); width: 36px; background-image: url('/assets/website/exact/reference-scroll-left-alpha.webp'); }
  .hero--reference::after { right: calc(50% - 481px); width: 33px; background-image: url('/assets/website/exact/reference-scroll-right-alpha.webp'); }
  .approved-hero-picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .hero--reference .approved-hero-art {
    object-fit: cover;
    mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(0deg,transparent,#000 12%,#000);
    mask-composite: intersect;
  }
  .hero--reference .hero-reference-copy {
    position: absolute!important;
    left: 5.5%;
    top: 22%;
    width: 43%!important;
    height: auto!important;
    padding: 0!important;
    margin: 0!important;
    overflow: visible!important;
    clip: auto!important;
    white-space: normal!important;
    border: 0!important;
    text-align: center;
  }
  .hero-reference-copy .hero-eyebrow { margin-bottom: 13px; font-size: clamp(28px,2.65vw,38px); line-height: 1.15; letter-spacing: 2.7px; }
  .hero-reference-copy .hero-eyebrow::before { margin-bottom: 14px; }
  .hero-reference-copy .sculpted-title { position: relative; }
  .hero-reference-copy .sculpted-title img { width: 100%; height: auto; }
  .hero-reference-copy .sculpted-title::after { content: ""; display: block; height: 2px; width: 90%; margin: 16px auto 0; background: linear-gradient(90deg,transparent,#d9a234 15%,#fff0ac 50%,#d9a234 85%,transparent); }
  .hero-reference-copy .sculpted-title::before { content: ""; position: absolute; left: calc(50% - 7px); bottom: -6px; width: 14px; height: 14px; border: 2px solid #ffe28a; background: #052d41; transform: rotate(45deg); z-index: 1; }
  .hero-reference-copy .hero-tagline { margin: 17px -10px 0; font-size: clamp(25px,2.25vw,32px); line-height: 1.15; letter-spacing: -.5px; }
  .hero-download { justify-content: center; width: min(900px,calc(100% - 120px)); height: 120px; margin: -34px auto 0; gap: 28px; font-size: 56px; border-width: 15px 34px 18px; padding: 0; }
  .hero-download .android-medallion { width: 110px; height: 96px; }
  .hero-download>span:last-child { transform: translateY(-1px) scaleX(.97); transform-origin: center; }
  .shortcuts { height: auto; margin: 24px 32px 0; padding: 17px 24px 21px; gap: 22px; border-radius: 38px; }
  .shortcuts a { height: 168px; padding: 5px 14px; gap: 5px; }
  .shortcuts a>span { width: 114px; height: 100px; }
  .shortcuts strong { font-size: 36px; transform: translateY(-3px) scaleX(.86); }
  .contact-actions { width: min(1020px,calc(100% - 80px)); margin: 20px auto 0; gap: 24px; }
  .contact-button { display: flex; height: 108px; padding: 0 16px; gap: 17px; font-size: 38px; }
  .contact-button .dimensional-icon { width: 82px; height: 82px; transform: none; }
  .contact-button.whatsapp .dimensional-icon { width: 82px; height: 82px; transform: none; }
  .contact-button svg { width: 20px; height: 28px; }
  .home-rates-section { margin: 30px 32px; padding: 0 24px 26px; border-radius: 38px; }
  .home-rates-section .section-title { height: 100px; padding-inline: 10px; }
  .home-rates-section .section-title h2 { font-size: 52px; letter-spacing: -1.2px; }
  .home-rates-section .section-title h2::before { left: 366px; }
  .home-rates-section .section-title>a { font-size: 28px; }
  .hero--expanded .hero-stage { min-height: 580px; }
  .hero--expanded .hero-copy { max-width: 700px; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; }
}

/* The mobile hero already contains the wordmark: fetch the separate decorative art only for desktop. */
.hero--reference .sculpted-title img { display: none; }
@media(min-width:1024px) { .hero--reference .sculpted-title img { display: block; } }

/* Keep the exact original crest; improve its legibility at the small header size. */
.brand img { transform: scale(1.09); filter: brightness(1.25) saturate(1.08) drop-shadow(0 0 .2px #ffd36b); }
/* Descriptive content follows the complete market list; no approved upper layout changes. */
.home-content { margin: 28px clamp(12px,2.2vw,32px) 0; padding: clamp(18px,3vw,30px); }
.home-content h2 { margin: 0 0 14px; color: #ffdf80; font-size: clamp(24px,3vw,34px); line-height: 1.15; }
.home-content-intro { max-width: 76ch; }
.home-content p { margin: 0 0 12px; color: #d9e9ed; font-size: 16px; line-height: 1.65; }
.home-content-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; margin-top: 22px; }
.home-content-grid article { min-width: 0; border-top: 1px solid #39bdc467; padding-top: 18px; }
.home-content h3 { margin: 0 0 10px; color: #ffe5a0; font-size: 20px; line-height: 1.25; }
.home-content a { color: #fff0b5; text-decoration: underline; text-underline-offset: 3px; }
.home-content a:hover { color: #fff; }
.home-content p:last-child { margin-bottom: 0; }
@media(min-width:1024px) { .home-content-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; } }

/* Keep section titles inside the same mobile gutter as their live cards. */
.home-page > .section-title {
  margin: 24px clamp(12px,2.5vw,32px) 14px;
  min-height: 0;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.home-page > .section-title > div { flex: 1 1 260px; }
.home-page > .section-title h2 {
  font-size: clamp(28px,5vw,48px);
  line-height: 1.1;
  overflow-wrap: normal;
}
.home-page > .section-title > a { font-size: clamp(16px,2.8vw,24px); }
.home-rates-section .section-title h2::before { content: none; }

/* Preserve the button art's native proportions on the wider hero. The edge
   fragments belong to the mobile canvas and do not float beside desktop CTA. */
@media (min-width:1024px) {
  .hero--reference { --download-width: min(780px,calc(100% - 140px)); }
  .hero--reference .hero-download {
    width: var(--download-width);
    height: auto;
    min-height: 0;
    aspect-ratio: 869 / 142;
    margin: -18px auto 0;
    border-width: 13px 30px 17px;
    padding: 0 12px;
    gap: 24px;
    font-size: clamp(42px,4.4vw,52px);
  }
  .hero--reference .hero-download .android-medallion { width: 94px; height: 84px; }
  .hero--reference::before,.hero--reference::after {
    display: none;
    top: auto;
    bottom: 13px;
    width: 31px;
    height: 100px;
    background-size: contain;
    background-position: center bottom;
  }
  .hero--reference::before { left: calc((100% - var(--download-width)) / 2 - 29px); }
  .hero--reference::after { right: calc((100% - var(--download-width)) / 2 - 29px); }
}