@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&family=Figtree:wght@400;500;600;700&display=swap');
/* Layout: navy hero with a big tilting Ribtrax tile and live colour chips; light bands below, with the 40 cm tile as the unit for every grid. Single light brand look. */
.rx{--tile-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l9 9-9 9-9-9z M10 5l5 5-5 5-5-5z' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E");--navy:#071F60;--navy2:#0d2a7a;--gold:#FFC300;--sky:#6EC5EF;--paper:#F5F7FB;--ink:#0f1a33;--muted:#4b5672;--line:#d9dfec;--white:#fff;
  --display:"Tilt Warp","Arial Black",system-ui,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--body);font-size:16px;line-height:1.65;color:var(--ink)}
.rx *{box-sizing:border-box!important}
.rx h1,.rx h2,.rx h3{font-family:var(--display)!important;font-weight:400!important;line-height:1.1!important;margin:0!important;text-wrap:balance!important}
.rx p{margin:0!important}
.rx a:not(.rx-btn){color:inherit!important}
.rx-wrap{max-width:1200px!important;margin:0 auto!important;padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(16px,env(safe-area-inset-right,0px))!important}
.rx-band{padding-block:clamp(56px,8vw,100px)!important;background:var(--white)!important}
.rx-paper{background:var(--paper)!important}
.rx-navy{background:var(--navy)!important;color:#fff!important}
.rx-navy p{color:rgba(255,255,255,.88)!important}
.rx-head{display:grid!important;gap:12px!important;margin-bottom:32px!important;max-width:720px!important}
.rx-head h2{font-size:clamp(28px,3.6vw,44px)!important;color:var(--navy)!important}
.rx-navy h2{color:#fff!important}
.rx-head p{color:var(--muted)!important}
.rx-eyebrow{display:inline-flex!important;align-items:center!important;gap:10px!important;font-weight:700!important;font-size:12px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--navy)!important}
.rx-eyebrow::before{content:""!important;width:16px!important;height:16px!important;flex:none!important;background:currentColor!important;-webkit-mask:var(--tile-mask) center/contain no-repeat!important;mask:var(--tile-mask) center/contain no-repeat!important;color:var(--gold)!important}
.rx-navy .rx-eyebrow,.rx-hero .rx-eyebrow{color:var(--gold)!important}

.rx-btn{display:inline-flex!important;align-items:center!important;gap:10px!important;padding:14px 22px!important;border-radius:10px!important;background:var(--gold)!important;color:var(--navy)!important;font-weight:700!important;font-size:15px!important;text-decoration:none!important;border:2px solid var(--gold)!important;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease!important}
.rx-btn:hover{transform:translateY(-2px)!important;box-shadow:0 12px 24px -12px rgba(7,31,96,.6)!important}
.rx-btn:focus-visible,.rx button:focus-visible,.rx input:focus-visible{outline:3px solid var(--sky)!important;outline-offset:3px!important}
.rx-ghost{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.5)!important}
.rx-ghost:hover{border-color:var(--gold)!important;color:var(--gold)!important}
.rx-ctas{display:flex!important;flex-wrap:wrap!important;gap:12px!important}

/* hero */
.rx-hero{background:radial-gradient(1200px 500px at 85% 40%,#123596 0%,transparent 60%),var(--navy)!important;color:#fff!important;overflow:hidden!important;position:relative!important}
.rx-hero::before{content:""!important;position:absolute!important;inset:0!important;opacity:.07!important;background:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 12px),repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 12px)!important}
.rx-hero-grid{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important;gap:48px!important;align-items:center!important;padding-block:clamp(56px,8vw,110px)!important}
.rx-hero-copy{display:grid!important;gap:20px!important}
.rx-hero h1{font-size:clamp(34px,5vw,62px)!important;color:var(--gold)!important}
.rx-lede{font-size:18px!important;color:rgba(255,255,255,.88)!important;max-width:56ch!important}
.rx-chips{list-style:none!important;margin:8px 0 0!important;padding:0!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important}
.rx-chips li{display:flex!important;align-items:baseline!important;gap:6px!important;padding:8px 14px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important}
.rx-chips b{font-family:var(--display)!important;font-weight:400!important;font-size:20px!important;color:var(--gold)!important;font-variant-numeric:tabular-nums!important}
.rx-chips span{font-size:13px!important;color:rgba(255,255,255,.8)!important}
.rx-stage{display:grid!important;justify-items:center!important;gap:22px!important;perspective:1100px!important}
.rx-tile3d{position:relative!important;width:min(100%,420px)!important;aspect-ratio:1!important;transform-style:preserve-3d!important;transform:rotateX(18deg) rotateZ(-8deg)!important;transition:transform .25s ease-out!important;animation:rxFloat 7s ease-in-out infinite!important}
.rx-tile-face{position:absolute!important;inset:0!important;color:#0a4fc6!important;transition:color .45s ease!important;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))!important}
.rx-tile-face svg{width:100%!important;height:100%!important;display:block!important;overflow:visible!important}
.rx-tile-shadow{position:absolute!important;left:8%!important;right:8%!important;bottom:-14%!important;height:14%!important;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)!important;transform:translateZ(-60px)!important;filter:blur(6px)!important}
@keyframes rxFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.rx-picker{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px!important}
.rx-picker button,.rx-paint button{width:36px!important;height:36px!important;border-radius:8px!important;border:2px solid rgba(255,255,255,.35)!important;background:var(--c)!important;cursor:pointer!important;transition:transform .2s ease,border-color .2s ease!important;padding:0!important}
.rx-picker button:hover{transform:translateY(-3px)!important}
.rx-picker button[aria-checked="true"],.rx-paint button[aria-checked="true"]{border-color:var(--gold)!important;transform:translateY(-3px) scale(1.08)!important;box-shadow:0 0 0 3px rgba(255,195,0,.35)!important}
.rx-picked{display:grid!important;justify-items:center!important;gap:2px!important}
.rx-picked span{font-family:var(--display)!important;font-size:22px!important}
.rx-picked small{color:rgba(255,255,255,.6)!important;font-size:12px!important;letter-spacing:.04em!important}

/* features */
.rx-feats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.rx-feat{border:1px solid var(--line)!important;border-radius:14px!important;padding:24px!important;display:grid!important;gap:10px!important;align-content:start!important;background:var(--white)!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important}
.rx-feat:hover{transform:translateY(-5px)!important;box-shadow:0 22px 40px -26px rgba(7,31,96,.5)!important;border-color:var(--gold)!important}
.rx-ico{width:52px!important;height:52px!important;border-radius:12px!important;background:var(--navy)!important;display:grid!important;place-items:center!important;transition:transform .35s ease!important}
.rx-feat:hover .rx-ico{transform:rotate(-6deg) scale(1.05)!important}
.rx-ico svg{width:28px!important;height:28px!important;fill:none!important;stroke:var(--gold)!important;stroke-width:3!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.rx-feat h3{font-size:21px!important;color:var(--navy)!important}
.rx-feat p{color:var(--muted)!important;font-size:15px!important}

/* specs */
.rx-spec{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;gap:clamp(28px,5vw,64px)!important;align-items:center!important}
.rx-dim{width:100%!important;max-width:440px!important;height:auto!important;display:block!important;background:var(--white)!important;border:1px solid var(--line)!important;border-radius:14px!important;padding:12px!important}
.rx-dimt{font-family:var(--body)!important;font-size:13px!important;font-weight:700!important;fill:var(--navy)!important}
.rx-sheet{list-style:none!important;margin:0!important;padding:0!important;border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden!important;background:var(--white)!important}
.rx-sheet li{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)!important;gap:16px!important;padding:14px 20px!important;border-top:1px solid var(--line)!important;transition:background .2s ease!important}
.rx-sheet li:first-child{border-top:0!important}
.rx-sheet li:hover{background:#fff8dc!important}
.rx-sheet b{color:var(--navy)!important;font-size:14px!important}
.rx-sheet span{font-variant-numeric:tabular-nums!important}

/* colours */
.rx-swatches{display:grid!important;grid-template-columns:repeat(9,minmax(0,1fr))!important;gap:12px!important;margin-bottom:48px!important}
.rx-sw{display:grid!important;gap:8px!important;justify-items:center!important;background:none!important;border:0!important;padding:0!important;cursor:pointer!important;font:600 13px/1.3 var(--body)!important;color:var(--ink)!important;text-align:center!important}
.rx-sw svg{width:100%!important;aspect-ratio:1!important;display:block!important;overflow:visible!important;filter:drop-shadow(0 6px 10px rgba(7,31,96,.18))!important;transition:transform .3s ease!important}
.rx-sw:hover svg,.rx-sw[aria-pressed="true"] svg{transform:translateY(-6px) rotate(-4deg)!important}
.rx-sw[aria-pressed="true"]{color:var(--navy)!important;text-decoration:underline!important;text-decoration-color:var(--gold)!important;text-decoration-thickness:3px!important;text-underline-offset:5px!important}
.rx-planner{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;gap:32px!important;align-items:start!important;background:var(--paper)!important;border-radius:18px!important;padding:clamp(18px,3vw,32px)!important}
.rx-planner-tools{display:grid!important;gap:14px!important}
.rx-planner h3{font-size:26px!important;color:var(--navy)!important}
.rx-planner p{color:var(--muted)!important}
.rx-paint{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.rx-paint button{border-color:var(--line)!important}
.rx-presets{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.rx-presets button{font:600 13px var(--body)!important;padding:8px 12px!important;border-radius:8px!important;border:1px solid var(--line)!important;background:var(--white)!important;color:var(--navy)!important;cursor:pointer!important;transition:border-color .2s ease,background .2s ease!important}
.rx-presets button:hover{border-color:var(--navy)!important;background:#fff8dc!important}
.rx-count{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-wrap:wrap!important;gap:6px 12px!important;font-size:13px!important;color:var(--muted)!important;min-height:20px!important}
.rx-count i{display:inline-block!important;width:10px!important;height:10px!important;border-radius:2px!important;background:var(--c)!important;margin-right:5px!important;vertical-align:-1px!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)!important}
.rx-count b{color:var(--ink)!important;font-variant-numeric:tabular-nums!important}
.rx-floor{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:2px!important;padding:10px!important;background:#3b4048!important;border-radius:10px!important;touch-action:none!important;user-select:none!important;box-shadow:inset 0 2px 10px rgba(0,0,0,.4)!important}
.rx-floor span{aspect-ratio:1!important;cursor:crosshair!important;transition:transform .15s ease!important}
.rx-floor span:hover{transform:scale(1.05)!important}
.rx-floor svg{width:100%!important;height:100%!important;display:block!important;overflow:visible!important;pointer-events:none!important}

/* special order */
.rx-special{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:40px!important;align-items:center!important}
.rx-special>div:first-child{display:grid!important;gap:16px!important;justify-items:start!important}
.rx-fan{position:relative!important;height:260px!important}
.rx-fan svg{position:absolute!important;left:50%!important;top:50%!important;width:170px!important;height:170px!important;margin:-85px 0 0 -85px!important;transform-origin:50% 120%!important;transition:transform .5s cubic-bezier(.3,.7,.3,1)!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))!important}
.rx-special:hover .rx-fan svg{transform:rotate(var(--r2)) translateY(-8px)!important}

/* uses */
.rx-uses{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.rx-use{margin:0!important;position:relative!important;aspect-ratio:3/4!important;border-radius:14px!important;overflow:hidden!important;background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 4px,transparent 4px 12px),linear-gradient(160deg,var(--navy2),var(--navy))!important}
.rx-use img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .6s ease!important}
.rx-use:hover img{transform:scale(1.07)!important}
.rx-use::after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,transparent 45%,rgba(7,31,96,.9))!important}
.rx-use figcaption{position:absolute!important;left:18px!important;right:18px!important;bottom:16px!important;z-index:1!important;font-family:var(--display)!important;font-size:22px!important;color:var(--gold)!important}

/* ramps + calc */
.rx-ramps{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:clamp(28px,5vw,64px)!important;align-items:center!important}
.rx-ramps>div{display:grid!important;gap:14px!important}
.rx-ramps>div>p{color:var(--muted)!important}
.rx-ticks{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:8px!important}
.rx-ticks li{padding-left:28px!important;position:relative!important}
.rx-ticks li::before{content:""!important;position:absolute!important;left:0!important;top:4px!important;width:18px!important;height:18px!important;border-radius:5px!important;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23071F60' stroke-width='3'/%3E%3C/svg%3E") center/12px no-repeat!important}
.rx-calc{background:var(--navy)!important;color:#fff!important;border-radius:18px!important;padding:28px!important;display:grid!important;gap:14px!important;box-shadow:0 30px 60px -36px rgba(7,31,96,.8)!important}
.rx-calc h3{font-size:26px!important;color:var(--gold)!important}
.rx-row{display:grid!important;grid-template-columns:minmax(0,1fr) 120px!important;gap:12px!important;align-items:center!important}
.rx-row label{font-size:14px!important;color:rgba(255,255,255,.85)!important}
.rx-row input{width:100%!important;padding:10px 12px!important;border-radius:8px!important;border:1px solid rgba(255,255,255,.3)!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font:600 16px var(--body)!important;font-variant-numeric:tabular-nums!important}
.rx-out{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:6px!important}
.rx-out div{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,195,0,.35)!important;border-radius:12px!important;padding:14px!important;display:grid!important}
.rx-out b{font-family:var(--display)!important;font-weight:400!important;font-size:40px!important;color:var(--gold)!important;line-height:1!important;font-variant-numeric:tabular-nums!important}
.rx-out span{font-size:13px!important;color:rgba(255,255,255,.75)!important}
.rx-note{font-size:12px!important;color:rgba(255,255,255,.6)!important}

/* faq preview */
.rx-faq{display:grid!important;gap:12px!important;max-width:860px!important}
.rx-faq details{background:var(--white)!important;border:1px solid var(--line)!important;border-radius:12px!important}
.rx-faq details[open]{border-color:var(--navy)!important}
.rx-faq summary{list-style:none!important;cursor:pointer!important;padding:18px 54px 18px 20px!important;font-weight:700!important;color:var(--navy)!important;position:relative!important}
.rx-faq summary::-webkit-details-marker{display:none!important}
.rx-faq summary::after{content:""!important;position:absolute!important;right:20px!important;top:50%!important;width:18px!important;height:18px!important;margin-top:-9px!important;border-radius:4px!important;background:var(--gold)!important;transition:transform .3s ease!important}
.rx-faq details[open] summary::after{transform:rotate(45deg)!important}
.rx-faq p{padding:0 20px 20px!important;color:var(--muted)!important}

/* closer */
.rx-closer{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important;gap:32px!important;align-items:center!important}
.rx-closer>div:first-child{display:grid!important;gap:14px!important}
.rx-closer-cta{display:grid!important;gap:16px!important;justify-items:start!important}
.rx-phone{font-family:var(--display)!important;font-size:clamp(28px,3.4vw,40px)!important;user-select:all!important}

@media (max-width:960px){
  .rx-hero-grid,.rx-spec,.rx-planner,.rx-special,.rx-ramps,.rx-closer{grid-template-columns:minmax(0,1fr)!important}
  .rx-stage{order:-1!important}
  .rx-tile3d{width:min(78vw,340px)!important}
  .rx-feats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rx-swatches{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .rx-uses{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rx-fan{height:220px!important}
}
@media (max-width:560px){
  .rx-feats{grid-template-columns:minmax(0,1fr)!important}
  .rx-swatches{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .rx-sheet li{grid-template-columns:minmax(0,1fr)!important;gap:2px!important}
  .rx-row{grid-template-columns:minmax(0,1fr) 100px!important}
  .rx-hero-grid{padding-block:32px 48px!important;gap:28px!important}
}
@media (prefers-reduced-motion:reduce){.rx *,.rx *::before,.rx *::after{animation:none!important;transition:none!important}}

section.faq-section{background:#F5F7FB!important;padding:72px max(16px,env(safe-area-inset-left,0px))!important;font-family:"Figtree",system-ui,sans-serif!important}
section.faq-section>header,section.faq-section>details{max-width:860px!important;margin-left:auto!important;margin-right:auto!important}
section.faq-section>header h2{font-family:"Tilt Warp","Arial Black",sans-serif!important;font-weight:400!important;color:#071F60!important;font-size:clamp(28px,3.6vw,44px)!important;margin:0 auto 24px!important}
section.faq-section>details{background:#fff!important;border:1px solid #d9dfec!important;border-radius:12px!important;margin-bottom:12px!important}
section.faq-section>details[open]{border-color:#071F60!important}
section.faq-section summary{list-style:none!important;cursor:pointer!important;padding:18px 54px 18px 20px!important;font-weight:700!important;color:#071F60!important;position:relative!important}
section.faq-section summary::-webkit-details-marker{display:none}
section.faq-section summary::after{content:""!important;position:absolute!important;right:20px!important;top:50%!important;width:18px!important;height:18px!important;margin-top:-9px!important;border-radius:4px!important;background:#FFC300!important;transition:transform .3s ease!important}
section.faq-section details[open] summary::after{transform:rotate(45deg)!important}
section.faq-section details>div{padding:0 20px 20px!important;color:#4b5672!important;white-space:pre-line!important;line-height:1.65!important}

/* picker fixes: tile never intercepts the pointer, chips sit above it, readable label */
html body .rx .rx-tile3d,html body .rx .rx-tile3d *{pointer-events:none!important}
html body .rx .rx-picker,html body .rx .rx-picked{position:relative!important;z-index:5!important}
html body .rx .rx-picker button{position:relative!important;z-index:1!important}
html body .rx .rx-hero .rx-picked span{color:#ffffff!important;font-size:22px!important}
html body .rx .rx-hero .rx-picked small{color:rgba(255,255,255,.7)!important}

/* real-photo gallery */
html body .rx .rx-gallery{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,220px))!important;gap:14px!important}
html body .rx .rx-g{margin:0!important;position:relative!important;overflow:hidden!important;border-radius:14px!important;background:linear-gradient(160deg,#0d2a7a,#071F60)!important;min-height:0!important}
html body .rx .rx-g.rx-g-big{grid-column:span 2!important;grid-row:span 2!important}
html body .rx .rx-g picture,html body .rx .rx-g img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important}
html body .rx .rx-g img{object-fit:cover!important;transition:transform .7s ease!important}
html body .rx .rx-g:hover img{transform:scale(1.06)!important}
html body .rx .rx-g::after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,transparent 55%,rgba(7,31,96,.85))!important;pointer-events:none!important}
html body .rx .rx-g figcaption{position:absolute!important;left:16px!important;right:16px!important;bottom:12px!important;z-index:1!important;font-family:"Tilt Warp","Arial Black",sans-serif!important;font-size:18px!important;color:#FFC300!important;line-height:1.2!important}
html body .rx .rx-g.rx-g-big figcaption{font-size:26px!important}
html body .rx .rx-use picture{position:absolute!important;inset:0!important;display:block!important}
html body .rx .rx-use picture img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
@media (max-width:960px){html body .rx .rx-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:180px!important}html body .rx .rx-g.rx-g-big{grid-column:span 2!important;grid-row:span 2!important}}
@media (max-width:560px){html body .rx .rx-gallery{grid-auto-rows:150px!important}}

/* gallery v2: 12-col layout for the uploaded photos */
html body .rx .rx-gallery{grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:210px!important}
html body .rx .rx-g{grid-column:span 3!important}
html body .rx .rx-g.rx-g-big{grid-column:span 6!important;grid-row:span 2!important}
html body .rx .rx-g.rx-g-wide{grid-column:span 12!important;grid-row:span 1!important}
html body .rx .rx-g.rx-g-wide img{object-position:center 40%!important}
@media (max-width:960px){html body .rx .rx-gallery{grid-auto-rows:190px!important}html body .rx .rx-g{grid-column:span 6!important}html body .rx .rx-g.rx-g-big,html body .rx .rx-g.rx-g-wide{grid-column:span 12!important}}
@media (max-width:560px){html body .rx .rx-gallery{grid-auto-rows:150px!important}}

/* gallery v3: tall slot for portrait shots */
html body .rx .rx-g.rx-g-tall{grid-column:span 3!important;grid-row:span 2!important}
html body .rx .rx-g.rx-g-tall img{object-position:center 65%!important}
html body .rx .rx-g.rx-g-half{grid-column:span 6!important}
@media (max-width:960px){html body .rx .rx-g.rx-g-tall{grid-column:span 6!important;grid-row:span 2!important}html body .rx .rx-g.rx-g-half{grid-column:span 12!important}}

/* photo visibility: landscape use cards, lighter overlays */
html body .rx .rx-uses{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
html body .rx .rx-use{aspect-ratio:16/10!important}
html body .rx .rx-use::after{background:linear-gradient(180deg,transparent 68%,rgba(7,31,96,.78) 100%)!important}
html body .rx .rx-use figcaption{font-size:24px!important;text-shadow:0 2px 8px rgba(0,0,0,.45)!important}
html body .rx .rx-g::after{background:linear-gradient(180deg,transparent 70%,rgba(7,31,96,.75) 100%)!important}
html body .rx .rx-g figcaption{text-shadow:0 2px 8px rgba(0,0,0,.45)!important}
@media (max-width:640px){html body .rx .rx-uses{grid-template-columns:minmax(0,1fr)!important}}

/* use cards: keep the floor in frame, captions up top */
html body .rx .rx-use picture img{object-position:center bottom!important}
html body .rx .rx-use::after{background:linear-gradient(0deg,transparent 62%,rgba(7,31,96,.8) 100%)!important}
html body .rx .rx-use figcaption{top:16px!important;bottom:auto!important}

/* bottom two use cards back to centred crop, captions at the bottom */
html body .rx .rx-uses .rx-use:nth-child(n+3) picture img{object-position:center center!important}
html body .rx .rx-uses .rx-use:nth-child(n+3)::after{background:linear-gradient(180deg,transparent 68%,rgba(7,31,96,.78) 100%)!important}
html body .rx .rx-uses .rx-use:nth-child(n+3) figcaption{top:auto!important;bottom:16px!important}

/* gallery lightbox */
html body .rx .rx-g{cursor:zoom-in!important}
html body .rx .rx-g:focus-visible{outline:3px solid #6EC5EF!important;outline-offset:3px!important}
html body .rx .rx-g-zoom{position:absolute!important;top:12px!important;right:12px!important;z-index:2!important;width:38px!important;height:38px!important;border-radius:50%!important;background:rgba(7,31,96,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC300' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/20px no-repeat!important;opacity:0!important;transform:scale(.85)!important;transition:opacity .25s ease,transform .25s ease!important;pointer-events:none!important}
html body .rx .rx-g:hover .rx-g-zoom,html body .rx .rx-g:focus-visible .rx-g-zoom{opacity:1!important;transform:none!important}
@media (hover:none){html body .rx .rx-g-zoom{opacity:.9!important;transform:none!important;width:32px!important;height:32px!important;background-size:17px!important}}
html body .rx-lb{position:fixed!important;inset:0!important;z-index:2147483000!important;background:rgba(4,14,44,.95)!important;display:none!important;align-items:center!important;justify-content:center!important;padding:56px 72px!important;font-family:"Figtree",system-ui,sans-serif!important}
html body .rx-lb.rx-lb-open{display:flex!important;animation:rxLbIn .25s ease both}
@keyframes rxLbIn{from{opacity:0}to{opacity:1}}
html body .rx-lb-f{margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important;max-width:min(1500px,100%)!important;max-height:100%!important}
html body .rx-lb-f img{display:block!important;max-width:100%!important;max-height:calc(100vh - 150px)!important;width:auto!important;height:auto!important;object-fit:contain!important;border-radius:12px!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)!important;background:#0d2a7a!important;animation:rxLbImg .3s ease both}
@keyframes rxLbImg{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
html body .rx-lb-f figcaption{font-family:"Tilt Warp","Arial Black",sans-serif!important;font-size:22px!important;color:#FFC300!important;text-align:center!important;line-height:1.2!important}
html body .rx-lb button{position:absolute!important;width:52px!important;height:52px!important;border-radius:50%!important;border:2px solid rgba(255,195,0,.7)!important;background:rgba(7,31,96,.85)!important;color:#FFC300!important;font:400 30px/1 system-ui,sans-serif!important;display:grid!important;place-items:center!important;cursor:pointer!important;padding:0!important;transition:background .2s ease,transform .2s ease!important}
html body .rx-lb button:hover{background:#FFC300!important;color:#071F60!important;transform:scale(1.06)!important}
html body .rx-lb button:focus-visible{outline:3px solid #6EC5EF!important;outline-offset:3px!important}
html body .rx-lb .rx-lb-x{top:max(14px,env(safe-area-inset-top,0px))!important;right:max(14px,env(safe-area-inset-right,0px))!important}
html body .rx-lb .rx-lb-p{left:max(12px,env(safe-area-inset-left,0px))!important;top:50%!important;margin-top:-26px!important}
html body .rx-lb .rx-lb-n{right:max(12px,env(safe-area-inset-right,0px))!important;top:50%!important;margin-top:-26px!important}
html body .rx-lb .rx-lb-c{position:absolute!important;top:max(26px,env(safe-area-inset-top,0px))!important;left:max(20px,env(safe-area-inset-left,0px))!important;color:rgba(255,255,255,.75)!important;font-size:14px!important;font-weight:600!important;letter-spacing:.06em!important;font-variant-numeric:tabular-nums!important}
@media (max-width:640px){
html body .rx-lb{padding:64px 12px 92px!important}
html body .rx-lb-f img{max-height:calc(100vh - 210px)!important}
html body .rx-lb .rx-lb-p,html body .rx-lb .rx-lb-n{top:auto!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important;margin-top:0!important}
html body .rx-lb .rx-lb-p{left:calc(50% - 64px)!important}
html body .rx-lb .rx-lb-n{right:calc(50% - 64px)!important}
html body .rx-lb-f figcaption{font-size:18px!important}
}
@media (prefers-reduced-motion:reduce){html body .rx-lb.rx-lb-open,html body .rx-lb-f img{animation:none!important}}

/* lightbox buttons: centred drawn icons */
html body .rx-lb button svg{display:block!important;width:22px!important;height:22px!important;margin:0!important;fill:none!important;stroke:currentColor!important;stroke-width:2.6!important;stroke-linecap:round!important;stroke-linejoin:round!important;pointer-events:none!important}
html body .rx-lb button{line-height:0!important;font-size:0!important}

/* use cards join the photo viewer */
html body .rx .rx-use{cursor:zoom-in!important}
html body .rx .rx-use:focus-visible{outline:3px solid #6EC5EF!important;outline-offset:3px!important}
html body .rx .rx-use:hover .rx-g-zoom,html body .rx .rx-use:focus-visible .rx-g-zoom{opacity:1!important;transform:none!important}