/* Storey Range vivid layer: photo hero, colour bands, tiles, buttons. Loaded after site.css on every page. */
:root { --sun:#F2B134; --sunbg:#FFF4D6; --coral:#E8643C; --indigo:#2F4A8A; --deep:#0B3B3A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sunbg:#2A2410; --deep:#0A2A29; } }
:root[data-theme="dark"] { --sunbg:#2A2410; --deep:#0A2A29; }
.hero { position:relative; color:#fff; background:#0B2A33 center 35% / cover no-repeat; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,22,30,.25) 0%, rgba(6,22,30,.55) 55%, rgba(6,22,30,.86) 100%); }
.hero .wrap { padding-block:clamp(56px, 12vw, 132px) clamp(70px, 10vw, 110px); }
.hero .eyebrow { display:inline-block; font:700 12.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; background:var(--sun); color:#1B1500;
  padding:5px 10px; border-radius:99px; margin:0 0 16px; }
.hero h1 { font:800 clamp(38px, 8vw, 78px)/1 var(--display); font-stretch:75%; margin:0; max-width:15ch; letter-spacing:-.01em; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--sun); }
.hero .lede { font-size:clamp(17px, 2.4vw, 22px); line-height:1.45; max-width:34ch; margin:16px 0 0; text-shadow:0 1px 12px rgba(0,0,0,.4); }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.btn { display:inline-block; font:700 16px var(--body); padding:13px 22px; border-radius:99px; text-decoration:none; border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.25); }
.btn.primary { background:var(--coral); color:#fff; }
.btn.ghost { border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }
.btn.dark { background:var(--ink); color:var(--paper); }
.statrow { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:14px; margin-top:-56px; position:relative; z-index:2; }
.stat { border-radius:14px; padding:16px 18px; color:#fff; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.stat b { display:block; font:800 clamp(28px, 4.5vw, 40px)/1 var(--display); font-stretch:75%; }
.stat span { display:block; font-size:14px; margin-top:4px; opacity:.95; }
.stat.s1 { background:#0D6B66; } .stat.s2 { background:#C2501C; } .stat.s3 { background:#2F4A8A; } .stat.s4 { background:#7A3FA0; }
.band { padding-block:clamp(36px, 6vw, 64px); }
.band.tint { background:var(--chip); } .band.sun { background:var(--sunbg); }
.band.deep { background:linear-gradient(135deg, var(--deep), #12625C); color:#fff; }
.band h2.big2 { font:800 clamp(28px, 5vw, 42px)/1.05 var(--display); font-stretch:75%; margin:0 0 6px; display:block; text-wrap:balance; }
.band .sub { color:var(--muted); font-size:17px; margin:0 0 22px; max-width:56ch; }
.band.deep .sub { color:#D3EAE7; }
.thisweek { display:grid; grid-template-columns:1.1fr .9fr; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12); background:var(--paper); }
.thisweek .txt { padding:clamp(20px, 4vw, 36px); }
.thisweek .txt h3 { font:800 clamp(24px, 3.6vw, 34px)/1.1 var(--display); font-stretch:80%; margin:6px 0 12px; }
.thisweek .txt p { font-size:18px; line-height:1.5; margin:0 0 16px; }
.thisweek .img { background:center / cover no-repeat; min-height:220px; }
.tag { display:inline-block; font:700 11.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:99px; background:var(--coral); color:#fff; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap:16px; }
.tile { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:300px; border-radius:16px; overflow:hidden; color:#fff;
  text-decoration:none; background:#12302F center / cover no-repeat; isolation:isolate; }
.tile::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(5,20,26,0) 30%, rgba(5,20,26,.88) 100%); }
.tile .bg { position:absolute; inset:0; background:center / cover no-repeat; transition:transform .5s ease; }
.tile:hover .bg { transform:scale(1.06); }
.tile .tt { position:relative; z-index:2; padding:18px; }
.tile b { display:block; font:800 24px/1.1 var(--display); font-stretch:80%; }
.tile span { display:block; font-size:15px; line-height:1.4; margin-top:6px; }
.tile i { font-style:normal; display:inline-block; margin-top:10px; font-weight:700; color:var(--sun); }
.how { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:18px; }
.how div { background:var(--paper); border-radius:16px; padding:20px; border-top:5px solid var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.how div:nth-child(2) { border-top-color:var(--coral); } .how div:nth-child(3) { border-top-color:var(--indigo); } .how div:nth-child(4) { border-top-color:var(--sun); }
.how .n { font:800 40px/1 var(--display); font-stretch:75%; color:var(--accent); }
.how div:nth-child(2) .n { color:var(--coral); } .how div:nth-child(3) .n { color:var(--indigo); } .how div:nth-child(4) .n { color:#B98200; }
.how h3 { font:800 20px/1.15 var(--display); font-stretch:85%; margin:6px 0 6px; } .how p { margin:0; color:var(--muted); font-size:15.5px; }
.pcards { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:18px; }
.pcard { background:var(--paper); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,.08); transition:transform .15s ease, box-shadow .15s ease; }
.pcard:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.16); }
.pcard .ph { aspect-ratio:16 / 9; background:#12302F center / cover no-repeat; position:relative; }
.pcard .ph .tag { position:absolute; left:12px; top:12px; color:#fff; }
.pcard .pb { padding:14px 16px 18px; } .pcard b { display:block; font:700 19px/1.25 var(--display); font-stretch:90%; }
.pcard .pb span { display:block; color:var(--muted); font-size:14.5px; margin-top:6px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.chips li { background:var(--paper); border:2px solid var(--line); border-radius:99px; padding:8px 16px; font-weight:600; }
.chips li:nth-child(1) { border-color:var(--accent); } .chips li:nth-child(2) { border-color:var(--coral); } .chips li:nth-child(3) { border-color:var(--indigo); }
.ctaband { text-align:center; } .ctaband .cta { justify-content:center; }
.ctaband h2 { display:block; font:800 clamp(28px, 5vw, 44px)/1.05 var(--display); font-stretch:75%; margin:0 0 10px; }
.ctaband p { max-width:52ch; margin:0 auto; font-size:18px; color:#D3EAE7; }
.pagehero { position:relative; color:#fff; background:#0B2A33 center 40% / cover no-repeat; isolation:isolate; }
.pagehero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,22,30,.4), rgba(6,22,30,.82)); }
.pagehero .wrap { padding-block:clamp(36px, 7vw, 72px); }
.pagehero h1 { color:#fff; max-width:20ch; } .pagehero p { font-size:19px; max-width:48ch; margin:12px 0 0; }
.credit { font-size:12px; color:var(--muted); }
.price { font:800 34px/1 var(--display); font-stretch:75%; color:var(--accent); }
.perk { border-left:5px solid var(--coral); }
.callout { background:var(--sunbg); border-left:5px solid var(--sun); border-radius:8px; padding:12px 16px; }
.formgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:14px; }
.formgrid label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:14.5px; }
.formgrid input, .formgrid select, .formgrid textarea { font:16px var(--body); padding:10px 12px; border:1.5px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
.formgrid input:focus, .formgrid select:focus, .formgrid textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
.checks { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; border:0; }
.checks label { font-weight:500; flex-direction:row; align-items:flex-start; gap:10px; }
.checks input { margin-top:5px; }
@media (max-width:760px) { .thisweek { grid-template-columns:1fr; } .thisweek .img { order:-1; min-height:180px; } .tile { min-height:230px; } }
@media (prefers-reduced-motion: reduce) { .btn, .pcard, .tile .bg { transition:none; } .btn:hover, .pcard:hover, .tile:hover .bg { transform:none; } }
.offer { border:1.5px solid var(--line); border-radius:10px; padding:10px 14px 14px; margin:0; min-width:0; }
.offer legend { padding:0 6px; }
.formgrid input, .formgrid select, .formgrid textarea { min-width:0; width:100%; }