/* ==========================================================================
   QRI VILLAGE
   Light ground, blue dominant. Palette taken from the Bowen Basin sky
   through a day. One warm tone (--live) exists only to mean "happening now".
   ========================================================================== */

:root{
  --paper:   #F6F8F9;
  --sky:     #DFEAF1;
  --sky-2:   #EDF3F7;
  --deep:    #123449;
  --blue:    #2A6E9C;
  --blue-lt: #86AEC7;
  --muted:   #5C7382;
  --live:    #E8A33C;   /* brand gold — logo centre peak, live markers      */
  /* #E8A33C on paper measures about 2:1 — under the 3:1 floor even for
     large text. Display highlights use a deeper gold; the bright one stays
     for the logo and for anything on the deep ground. */
  --gold-ink:#A87317;

  --line:  rgba(18,52,73,.14);
  --line-d:rgba(232,240,244,.18);

  --display:"Archivo", system-ui, sans-serif;
  --body:   "Archivo", system-ui, sans-serif;
  --edit:   "Newsreader", Georgia, serif;
  --mono:   "IBM Plex Mono", ui-monospace, monospace;

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px}
/* Belt and braces for browsers that ignore scroll-padding on the root. */
[id]{scroll-margin-top:96px}
@media(max-width:520px){html{scroll-padding-top:84px} [id]{scroll-margin-top:84px}}
@media(max-width:700px){.hero{min-height:calc(100svh - 74px)}}
body{
  margin:0; background:var(--paper); color:var(--deep);
  font-family:var(--body); font-size:16.5px; line-height:1.62;
  font-variation-settings:"wdth" 100; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:200;width:auto;height:auto;clip:auto;
  background:var(--deep);color:#fff;padding:12px 18px;font-family:var(--mono);font-size:12px;
}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:0 0 22px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--blue); flex:none}

h1,h2,h3{
  font-family:var(--display); font-weight:600; margin:0; color:var(--deep);
  text-transform:uppercase; letter-spacing:-.015em;
  font-variation-settings:"wdth" 118;
  /* Sub-1 leading clipped ascenders on wrapped lines. 1.02 keeps it tight
     without collisions, and padding-bottom protects descenders in mixed case. */
  line-height:1.02; padding-bottom:.04em;
  /* Never break display type inside a word — "COPPABELL/A" is worse than
     any overflow it might prevent. Long words shrink via the clamp instead. */
  overflow-wrap:normal; word-break:normal; hyphens:none;
}
h1{font-size:clamp(40px,6.4vw,94px); font-weight:700; line-height:.99}
h2{font-size:clamp(30px,4.8vw,62px)}
h3{font-size:clamp(18px,1.9vw,24px); letter-spacing:.005em; font-variation-settings:"wdth" 110; line-height:1.14}
.statement h2{line-height:1.0}
.hl{color:var(--gold-ink)}
.on-deep .hl{color:var(--live)}

.lead{
  font-family:var(--edit); font-style:italic; font-weight:300; color:var(--deep);
  font-size:clamp(21px,2.5vw,32px); line-height:1.34; letter-spacing:-.005em;
}
.lead--sm{font-size:clamp(19px,2.1vw,27px)}
p{margin:0 0 1.1em}
.dim{color:var(--muted)}
.section-intro{max-width:46ch;margin-top:24px}
.section-head{margin-bottom:44px}
.note{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; margin-top:18px; line-height:1.7}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--blue)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.section{padding:clamp(76px,10vw,148px) 0}
.section--tight{padding:clamp(52px,6vw,88px) 0}
.on-sky{background:var(--sky)}
.on-deep{background:var(--deep); color:#DCE7EE}
.on-deep h1,.on-deep h2,.on-deep h3,.on-deep .lead{color:#F1F6F9}
.on-deep .dim,.on-deep .eyebrow,.on-deep .note{color:#93AEBE}
.on-deep .eyebrow::before{background:var(--blue-lt)}
.on-deep a{color:#F1F6F9}

.grid{display:grid; gap:clamp(28px,4vw,64px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.grid--top{align-items:start}
.grid--middle{align-items:center}
.grid--bottom{align-items:end}
@media(max-width:900px){.g-2,.g-3,.g-4,.split{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  padding:15px 24px; border:1px solid var(--blue); background:var(--blue);
  color:#fff; transition:.22s ease; cursor:pointer;
}
.btn:hover{background:var(--deep); border-color:var(--deep); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--deep)}
.btn-ghost:hover{background:var(--deep); border-color:var(--deep); color:#fff}
.on-deep .btn-ghost{border-color:var(--line-d); color:#F1F6F9}
.on-deep .btn-ghost:hover{background:#F1F6F9; border-color:#F1F6F9; color:var(--deep)}
.btn .ar{transition:transform .22s ease}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{
  /* Sticky rather than fixed, so the bar occupies flow space and the banner
     begins beneath it — a white gap, instead of the image running up behind
     a floating bar. */
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:32px;
  padding:18px var(--gut); transition:box-shadow .3s ease;
  background:#fff; border-bottom:1px solid var(--line);
}
/* Scrolled state adds lift. */
.nav.stuck{box-shadow:0 10px 30px -22px rgba(18,52,73,.55)}


.brand{display:block; text-decoration:none; line-height:0}
.qri-logo--horizontal{width:196px; height:auto; display:block}
@media(max-width:520px){.qri-logo--horizontal{width:152px}}
.nav-links{margin-left:auto}
.nav-menu{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav-menu a{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--deep); transition:.2s;
  position:relative; padding-bottom:3px; font-weight:500;
}
.nav-menu a:hover{color:var(--blue)}
.nav-menu .current-menu-item > a{color:var(--deep)}
.nav-menu .current-menu-item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--blue);
}
.nav__end{display:flex; align-items:center; gap:10px; margin-left:auto}
.nav .btn{padding:12px 18px}
.nav-links__cta{display:none}
.nav-toggle{display:none}

/* ---------- mobile navigation ----------
   Below 1040px the inline list becomes a full-height panel. Without this the
   inner pages are unreachable on a phone. */
@media(max-width:1040px){
  .nav__cta{display:none}
  .nav-toggle{
    display:grid; place-items:center; width:46px; height:46px;
    background:transparent; border:1px solid var(--line); cursor:pointer; padding:0;
  }
  .nav-toggle__bars{display:block; width:20px; height:12px; position:relative}
  .nav-toggle__bars i{
    position:absolute; left:0; right:0; height:1.5px; background:var(--deep);
    transition:transform .28s ease, opacity .2s ease;
  }
  .nav-toggle__bars i:first-child{top:0}
  .nav-toggle__bars i:last-child{bottom:0}
  .nav-toggle[aria-expanded=true] .nav-toggle__bars i:first-child{transform:translateY(5px) rotate(45deg)}
  .nav-toggle[aria-expanded=true] .nav-toggle__bars i:last-child{transform:translateY(-5px) rotate(-45deg)}

  .nav-links{
    position:fixed; inset:0; margin:0; background:#fff;
    padding:calc(var(--gut) + 74px) var(--gut) var(--gut);
    display:flex; flex-direction:column; justify-content:space-between; gap:32px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .26s ease, transform .26s ease, visibility .26s;
    overflow-y:auto; z-index:-1;
  }
  .nav-links.is-open{opacity:1; visibility:visible; transform:none; z-index:1}
  .nav-menu{
    flex-direction:column; gap:0; border-top:1px solid var(--line);
  }
  .nav-menu li{border-bottom:1px solid var(--line)}
  .nav-menu a{
    display:block; padding:20px 0; font-family:var(--display); font-size:26px;
    font-variation-settings:"wdth" 114; font-weight:500; letter-spacing:.01em;
    color:var(--deep); text-transform:uppercase; padding-bottom:20px;
  }
  .nav-menu .current-menu-item > a{color:var(--blue)}
  .nav-menu .current-menu-item > a::after{display:none}
  .nav-links__cta{display:block}
  .nav-links__cta .btn{width:100%; justify-content:center; padding:18px 24px}
  body.nav-open{overflow:hidden}
}
@media(max-width:520px){
  .nav-menu a{font-size:22px; padding:16px 0}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:calc(100svh - 82px); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}

/* Full-bleed photographic hero — the image fills the viewport and the
   navigation floats over it. */
.hero--full .sky{position:absolute; inset:0; height:auto; min-height:0}
.hero--full .sky::after{display:none}
.hero--full .sky__img{width:100%; height:100%; object-fit:cover; object-position:center 50%}
.hero--full .sky__scrim{
  background:
    linear-gradient(180deg, rgba(9,26,38,.62) 0%, rgba(9,26,38,.18) 34%, rgba(9,26,38,.20) 55%, rgba(9,26,38,.86) 100%);
}
.hero--full .hero-inner{padding-top:clamp(84px,13vh,160px); padding-bottom:clamp(40px,7vh,86px)}
.hero--full h1,.hero--full .lead{color:#fff}
.hero--full h1 .thin{color:rgba(255,255,255,.62)}
.hero--full .eyebrow{color:rgba(255,255,255,.78)}
.hero--full .eyebrow::before{background:rgba(255,255,255,.6)}
.hero--full .lead{max-width:26ch}
.hero--full .btn-ghost{border-color:rgba(255,255,255,.55); color:#fff}
.hero--full .btn-ghost:hover{background:#fff; border-color:#fff; color:var(--deep)}
.hero--full .strip{
  background:rgba(9,26,38,.42); backdrop-filter:blur(10px);
  border-top-color:rgba(255,255,255,.18);
}
.hero--full .strip-in div{border-left-color:rgba(255,255,255,.18)}
.hero--full .strip .n{color:#fff}
.hero--full .strip .l{color:rgba(255,255,255,.66)}
.hero--full .clock{
  background:rgba(9,26,38,.5); backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.2); border-top-color:#fff; box-shadow:none;
}
.hero--full .clock .time{color:#fff}
.hero--full .clock .loc{color:rgba(255,255,255,.66)}
.hero--full .clock .next{color:#fff; border-top-color:rgba(255,255,255,.2)}
.hero--full .clock .next b{color:#B9D2E2}

/* Inner pages get the same treatment as the home hero, shorter.
   Every page uses it — with a photograph where one exists, and a deep tint
   where none does. A light nav on one page and a white bar on the next reads
   as a fault, so the treatment stays constant and only the art changes. */
.hero--page.hero--banner,
.hero--page.hero--tint{min-height:58svh}
@media(max-width:700px){
  .hero--page.hero--banner,
  .hero--page.hero--tint{min-height:46svh}
}

.hero--page.hero--banner .sky{position:absolute; inset:0; height:auto; min-height:0}
.hero--page.hero--banner .sky::after{display:none}
.hero--page.hero--banner .sky__scrim{
  background:linear-gradient(180deg, rgba(9,26,38,.6) 0%, rgba(9,26,38,.22) 40%, rgba(9,26,38,.8) 100%);
}

/* No image: the basin-blue tint, with the roof mark ghosted into it so the
   banner still has something to look at. */
.hero--page.hero--tint .sky{
  position:absolute; inset:0; height:auto; min-height:0;
  background:linear-gradient(160deg,#17475F 0%,#123449 52%,#0C2637 100%);
}
.hero--page.hero--tint .sky::after{display:none}
.hero--page.hero--tint .sky::before{
  content:""; position:absolute; right:-4%; bottom:-18%;
  width:min(52%,620px); aspect-ratio:96/26; opacity:.07;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 26'%3E%3Cpolygon points='14,0 28,26 0,26'/%3E%3Cpolygon points='48,0 62,26 34,26'/%3E%3Cpolygon points='82,0 96,26 68,26'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 26'%3E%3Cpolygon points='14,0 28,26 0,26'/%3E%3Cpolygon points='48,0 62,26 34,26'/%3E%3Cpolygon points='82,0 96,26 68,26'/%3E%3C/svg%3E") no-repeat center/contain;
}

.hero--page.hero--banner .hero-inner,
.hero--page.hero--tint .hero-inner{padding-top:clamp(76px,11vh,132px)}
.hero--page.hero--banner h1,
.hero--page.hero--banner .lead,
.hero--page.hero--tint h1,
.hero--page.hero--tint .lead{color:#fff}
.hero--page.hero--banner .eyebrow,
.hero--page.hero--tint .eyebrow{color:rgba(255,255,255,.78)}
.hero--page.hero--banner .eyebrow::before,
.hero--page.hero--tint .eyebrow::before{background:rgba(255,255,255,.6)}
.sky{position:absolute; top:0; left:0; right:0; height:34vh; min-height:220px; z-index:0; transition:background 2s linear; overflow:hidden}
.sky::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--deep); opacity:.25}
.sky__img{width:100%; height:100%; object-fit:cover; object-position:center 55%}
.sky--photo{background:none!important}
/* Legibility for the mono label, and a soft join into the paper below so a
   photograph doesn't end in a hard horizontal cut. */
.sky__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(18,52,73,.42) 0%, rgba(18,52,73,0) 38%),
    linear-gradient(180deg, rgba(246,248,249,0) 62%, rgba(246,248,249,.9) 100%);
}
.sky--photo{height:42vh; min-height:280px}
.sky--photo + .sky-note{color:#fff; mix-blend-mode:normal; text-shadow:0 1px 12px rgba(18,52,73,.5)}
@media(max-width:700px){.sky--photo{height:34vh; min-height:210px}}
.sky-note{
  position:absolute; z-index:2; top:0; left:0; right:0;
  padding:96px var(--gut) 0; display:flex; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.82); mix-blend-mode:difference; pointer-events:none;
}
.hero-inner{position:relative; z-index:2; padding-bottom:clamp(30px,5vw,54px); padding-top:calc(28vh + 24px)}
@media(max-width:600px){.hero-inner{padding-top:calc(28vh + 18px)}}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:flex-end}
@media(max-width:1100px){.hero-grid{grid-template-columns:1fr}}
h1 .thin{display:block; font-weight:300; font-variation-settings:"wdth" 100; color:var(--blue-lt)}
.hero p.lead{max-width:22ch; margin:26px 0 32px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}

/* roster clock */
.clock{
  border:1px solid var(--line); border-top:3px solid var(--blue);
  background:#fff; padding:22px 26px; min-width:268px;
  box-shadow:0 18px 44px -28px rgba(18,52,73,.55);
}
.clock .loc{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.clock .time{
  font-family:var(--mono); font-weight:500; font-size:46px; line-height:1.1; color:var(--deep);
  letter-spacing:-.02em; margin:6px 0 2px; font-variant-numeric:tabular-nums;
}
.clock .time small{font-size:16px; color:var(--blue-lt); letter-spacing:.1em; margin-left:6px}
.clock .next{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--deep);
  border-top:1px solid var(--line); margin-top:14px; padding-top:14px; line-height:1.5;
}
.clock .next b{color:var(--blue); font-weight:500}
.clock .next b.imminent{color:#A96F14}

/* stat strip */
.strip{border-top:1px solid var(--line); position:relative; z-index:2; background:var(--sky-2)}
.strip-in{display:grid; grid-template-columns:repeat(4,1fr)}
.strip-in div{padding:22px 0 22px 22px; border-left:1px solid var(--line)}
.strip-in div:first-child{border-left:0; padding-left:0}
.strip .n{font-family:var(--mono); font-size:22px; font-weight:500; display:block; line-height:1.2; color:var(--blue)}
.strip .l{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
@media(max-width:720px){
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-in div:nth-child(3){border-left:0; padding-left:0}
}

/* ---------- statement ---------- */
/* max-width lives on the heading, where 1ch is measured against the display
   size rather than the 16.5px body size it was silently inheriting. */
.statement{max-width:none}
.statement h2{font-size:clamp(34px,5.4vw,78px); font-weight:700; max-width:13ch}

/* ---------- feature rows ---------- */
.rows{border-top:1px solid var(--line); margin-top:0}
.on-deep .rows{border-top-color:var(--line-d)}
.row{
  display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,1.5fr);
  gap:20px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.on-deep .row{border-bottom-color:var(--line-d)}
.row--last{border-bottom:0}
.row .idx{font-family:var(--mono); font-size:11px; color:var(--blue-lt); letter-spacing:.1em}
.row h3{margin:0}
.row p{margin:0; font-size:15px; color:var(--muted)}
.on-deep .row p{color:#93AEBE}
@media(max-width:760px){.row{grid-template-columns:44px 1fr; gap:8px 16px} .row p{grid-column:2}}

/* ---------- image slots ---------- */
.slot{position:relative; border:1px solid var(--line); overflow:hidden; margin:0}
.slot__img{width:100%; height:100%; object-fit:cover}
.slot.is-empty{
  display:flex; align-items:flex-end; min-height:300px;
  background:linear-gradient(150deg,#C6D9E5 0%,#DCE8EF 55%,#EAF1F5 100%);
}
.slot.is-empty::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(18,52,73,.045) 0 1px,transparent 1px 11px);
}
.slot.is-empty span{
  position:relative; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#6A8496; padding:14px 16px;
}
.slot.tall{margin-top:32px}
.slot.tall.is-empty{min-height:520px}
.slot.wide.is-empty{min-height:400px}
.on-deep .slot.is-empty{background:linear-gradient(150deg,#1C4A64 0%,#173F57 55%,#123449 100%); border-color:var(--line-d)}
.on-deep .slot.is-empty span{color:#7C9BAF}
.mess-banner{margin:clamp(40px,5vw,64px) 0}
.mess-closing{margin-top:clamp(46px,6vw,80px); max-width:56ch}
.mess-menu{margin-top:36px}

/* ---------- refurb band ---------- */
.band{border:1px solid var(--blue); padding:clamp(26px,4vw,44px); position:relative; background:var(--sky-2); margin-top:46px}
.band .tag{
  position:absolute; top:-10px; left:clamp(20px,3vw,32px); background:var(--sky);
  padding:0 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue);
}
.band h3{margin-bottom:14px}
.band .rows{border-top-color:var(--line)}
/* Inside the panel the row grid is much narrower than the page grid, so the
   three-column split has to give way earlier. */
.band .row{grid-template-columns:32px minmax(0,1fr); gap:6px 14px}
.band .row p{grid-column:2}

/* ---------- floor plan ---------- */
.plan{border:1px solid var(--line); background:#fff; padding:clamp(20px,3vw,36px)}
.plan svg,.plan__img{width:100%; height:auto; display:block}

/* ---------- roster timeline ---------- */
.tl{border-top:1px solid var(--line); margin-top:44px}
.tl-item{
  display:grid; grid-template-columns:130px 1fr; gap:24px;
  padding:20px 0; border-bottom:1px solid var(--line); position:relative;
  transition:background .25s ease;
}
.tl-item .t{font-family:var(--mono); font-size:15px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums}
.tl-item h3{margin-bottom:5px}
.tl-item p{margin:0; font-size:15px; color:var(--muted); max-width:62ch}
.tl-item.now{background:rgba(232,163,60,.09)}
.tl-item.now .t{color:#A96F14}
.tl-item.now::before{content:""; position:absolute; left:calc(var(--gut) * -1); top:0; bottom:0; width:3px; background:var(--live)}
.tl-item .now-tag{
  display:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--deep); background:var(--live); padding:2px 7px; margin-left:10px;
  vertical-align:3px;
}
.tl-item.now .now-tag{display:inline-block}
@media(max-width:640px){.tl-item{grid-template-columns:1fr; gap:6px}}

/* ---------- facilities ---------- */
.fac{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.fac > div{
  padding:26px 0 26px 22px; border-bottom:1px solid var(--line); border-left:1px solid var(--line);
  font-family:var(--display); text-transform:uppercase; font-variation-settings:"wdth" 112;
  font-weight:500; font-size:clamp(16px,1.6vw,20px); letter-spacing:.01em; color:var(--deep);
  line-height:1.15;
}
.fac > div:nth-child(3n+1){border-left:0; padding-left:0}
.fac em{display:block; font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.14em; color:var(--blue); margin-top:6px; text-transform:uppercase}
@media(max-width:760px){
  .fac{grid-template-columns:repeat(2,1fr)}
  .fac > div:nth-child(3n+1){border-left:1px solid var(--line); padding-left:22px}
  .fac > div:nth-child(2n+1){border-left:0; padding-left:0}
}

/* ---------- venue cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); padding:clamp(22px,2.6vw,32px);
  display:flex; flex-direction:column; gap:12px; transition:.25s ease; text-decoration:none;
}
.card--link:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:0 20px 40px -30px rgba(18,52,73,.6)}
.card .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue)}
.card p{margin:0; font-size:15px; color:var(--muted)}
.card__media{margin:calc(clamp(22px,2.6vw,32px) * -1) calc(clamp(22px,2.6vw,32px) * -1) 4px; border:0}
.card__go{
  margin-top:auto; padding-top:12px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; gap:8px; align-items:center;
}
.card--link:hover .card__go .ar{transform:translateX(4px)}
.card__go .ar{transition:transform .22s ease}

/* ---------- gallery ---------- */
/* ---------- carousel ---------- */
.carousel__head{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px}
.carousel__head .eyebrow{margin:0}
.carousel__nav{display:flex; align-items:center; gap:10px}
.carousel__count{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted);
  font-variant-numeric:tabular-nums; margin-right:6px;
}
.carousel__btn{
  width:42px; height:42px; border:1px solid var(--line); background:transparent;
  color:var(--deep); font-size:16px; line-height:1; cursor:pointer; transition:.2s ease;
}
.carousel__btn:hover:not(:disabled){background:var(--deep); border-color:var(--deep); color:#fff}
.carousel__btn:disabled{opacity:.3; cursor:default}

.carousel__track{
  display:flex; gap:14px; list-style:none; margin:0; padding:0 0 6px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:2px solid var(--blue); outline-offset:4px}
.carousel__slide{
  flex:0 0 clamp(260px, 30%, 420px); scroll-snap-align:start;
  border:1px solid var(--line); background:#fff;
}
.carousel__slide figure{margin:0}
.carousel__slide img{width:100%; aspect-ratio:4/3; object-fit:cover}
.carousel__slide figcaption{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:11px 13px; line-height:1.5;
}
@media(max-width:700px){.carousel__slide{flex-basis:82%}}
@media(prefers-reduced-motion:reduce){.carousel__track{scroll-behavior:auto}}

/* ---------- rates ---------- */
.rate{border:1px solid var(--line); background:#fff; padding:clamp(26px,3.4vw,42px); display:flex; flex-direction:column; height:100%}
.rate.feature{border-color:var(--blue); border-top:3px solid var(--blue)}
.rate .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:20px}
.rate .price{font-family:var(--mono); font-weight:500; font-size:clamp(34px,4.4vw,56px); line-height:1.05; letter-spacing:-.03em; color:var(--deep); overflow-wrap:break-word}
.rate .price sup{font-size:.4em; vertical-align:super; letter-spacing:0; margin-right:2px; color:var(--blue)}
.rate .per{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.1em; margin-top:10px}
.rate ul{list-style:none; padding:0; margin:26px 0; border-top:1px solid var(--line)}
.rate li{padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; display:flex; gap:12px; color:var(--muted)}
.rate li::before{content:"—"; color:var(--blue); flex:none}
.rate .btn{margin-top:auto; justify-content:center}

/* ---------- enquiry / form styling ----------
   Targets Gravity Forms and Contact Form 7 markup so the client's chosen
   plugin inherits the design without a separate stylesheet. */
.contact{margin-top:34px}
.contact__lines{font-size:15px; margin:0}
.contact__lines a{color:#F1F6F9; text-decoration:none; border-bottom:1px solid var(--blue-lt)}

.qri-form label,
.qri-form .gfield_label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#93AEBE; font-weight:400; display:block; margin-bottom:8px;
}
.qri-form input[type=text],
.qri-form input[type=email],
.qri-form input[type=tel],
.qri-form input[type=url],
.qri-form input[type=number],
.qri-form input[type=date],
.qri-form select,
.qri-form textarea{
  font-family:var(--body); font-size:15.5px; color:#F1F6F9;
  background:transparent; border:0; border-bottom:1px solid var(--line-d);
  padding:11px 0; outline:none; transition:.2s; width:100%; border-radius:0;
}
.qri-form input::placeholder,.qri-form textarea::placeholder{color:#6E8DA0}
.qri-form input:focus,.qri-form select:focus,.qri-form textarea:focus{border-bottom-color:var(--blue-lt)}
.qri-form textarea{resize:vertical; min-height:88px}
.qri-form select option{background:var(--deep); color:#F1F6F9}
.qri-form .gform_fields{gap:6px 28px}
.qri-form .gfield{margin-bottom:18px}
.qri-form input[type=submit],
.qri-form button[type=submit],
.qri-form .gform_button{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 24px; border:1px solid var(--blue); background:var(--blue); color:#fff;
  transition:.22s ease; cursor:pointer; border-radius:0; width:auto;
}
.qri-form input[type=submit]:hover,
.qri-form button[type=submit]:hover,
.qri-form .gform_button:hover{background:#F1F6F9; border-color:#F1F6F9; color:var(--deep)}
.qri-form .gfield_required{color:var(--live)}

/* ---- WPForms ----
   WPForms ships selectors like `div.wpforms-container-full .wpforms-form
   .wpforms-field-label` (0,3,1). Anything less specific loses, so these
   deliberately match that shape and force the properties that matter.
   Written for the dark enquiry section. */

.qri-form .wpforms-container,
.qri-form div.wpforms-container-full{
  margin:0!important;
  --wpforms-field-border-radius:0px;
  --wpforms-field-background-color:transparent;
  --wpforms-field-border-color:rgba(232,240,244,.18);
  --wpforms-field-text-color:#F1F6F9;
  --wpforms-label-color:#93AEBE;
  --wpforms-label-sublabel-color:#7C9BAF;
  --wpforms-label-error-color:#E8A33C;
  --wpforms-button-border-radius:0px;
  --wpforms-button-background-color:#2A6E9C;
  --wpforms-button-text-color:#FFFFFF;
  --wpforms-field-size-font-size:15.5px;
  --wpforms-field-size-input-height:auto;
  --wpforms-field-size-padding-h:0px;
}

/* Two columns automatically, by field type — no CSS classes to remember.
   Short fields pair up; anything that needs room takes the full width. */
.qri-form .wpforms-field-container{
  display:grid; grid-template-columns:1fr 1fr; gap:0 28px;
}
.qri-form .wpforms-field{
  grid-column:span 1; padding:0!important; margin:0 0 20px!important; clear:none!important;
}
.qri-form .wpforms-field-textarea,
.qri-form .wpforms-field-address,
.qri-form .wpforms-field-checkbox,
.qri-form .wpforms-field-radio,
.qri-form .wpforms-field-html,
.qri-form .wpforms-field-divider,
.qri-form .wpforms-field-content,
.qri-form .wpforms-field.qri-full{grid-column:1 / -1}
.qri-form .wpforms-field.qri-half{grid-column:span 1}
@media(max-width:700px){
  .qri-form .wpforms-field-container{grid-template-columns:1fr}
  .qri-form .wpforms-field{grid-column:1 / -1}
}

/* Labels */
.qri-form div.wpforms-container-full .wpforms-form .wpforms-field-label,
.qri-form .wpforms-form .wpforms-field-label,
.qri-form .wpforms-form legend.wpforms-field-label{
  font-family:var(--mono)!important;
  font-size:10.5px!important;
  font-weight:400!important;
  line-height:1.5!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:#93AEBE!important;
  margin:0 0 8px!important;
  display:block!important;
}
.qri-form .wpforms-form .wpforms-field-sublabel{
  font-family:var(--mono)!important; font-size:10px!important; letter-spacing:.12em!important;
  text-transform:uppercase!important; color:#6E8DA0!important;
}
.qri-form .wpforms-form .wpforms-field-description{
  color:#7C9BAF!important; font-size:13.5px!important; font-family:var(--body)!important;
}
.qri-form .wpforms-form .wpforms-required-label{color:var(--live)!important}

/* Inputs — underline only, no box, no radius */
.qri-form div.wpforms-container-full .wpforms-form input[type=text],
.qri-form div.wpforms-container-full .wpforms-form input[type=email],
.qri-form div.wpforms-container-full .wpforms-form input[type=tel],
.qri-form div.wpforms-container-full .wpforms-form input[type=url],
.qri-form div.wpforms-container-full .wpforms-form input[type=number],
.qri-form div.wpforms-container-full .wpforms-form input[type=date],
.qri-form div.wpforms-container-full .wpforms-form input[type=password],
.qri-form div.wpforms-container-full .wpforms-form select,
.qri-form div.wpforms-container-full .wpforms-form textarea,
.qri-form .wpforms-form input[type=text],
.qri-form .wpforms-form input[type=email],
.qri-form .wpforms-form input[type=tel],
.qri-form .wpforms-form input[type=url],
.qri-form .wpforms-form input[type=number],
.qri-form .wpforms-form input[type=date],
.qri-form .wpforms-form select,
.qri-form .wpforms-form textarea{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(232,240,244,.18)!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:#F1F6F9!important;
  font-family:var(--body)!important;
  font-size:15.5px!important;
  padding:11px 0!important;
  height:auto!important;
  max-width:100%!important;
  width:100%!important;
  transition:border-color .2s ease;
}
/* WPForms sizes fields with these — override so the grid controls width. */
.qri-form .wpforms-form .wpforms-field-small,
.qri-form .wpforms-form .wpforms-field-medium,
.qri-form .wpforms-form .wpforms-field-large{max-width:100%!important; width:100%!important}

.qri-form .wpforms-form input:focus,
.qri-form .wpforms-form select:focus,
.qri-form .wpforms-form textarea:focus{
  border-bottom-color:#86AEC7!important; outline:none!important; box-shadow:none!important;
}
.qri-form .wpforms-form input::placeholder,
.qri-form .wpforms-form textarea::placeholder{color:#6E8DA0!important; opacity:1}
.qri-form .wpforms-form select option{background:var(--deep); color:#F1F6F9}
.qri-form .wpforms-form textarea{min-height:104px!important; resize:vertical}

/* Submit */
.qri-form .wpforms-form .wpforms-submit-container{padding:10px 0 0!important; margin:0!important}
.qri-form div.wpforms-container-full .wpforms-form button[type=submit],
.qri-form .wpforms-form button[type=submit],
.qri-form .wpforms-form input[type=submit]{
  font-family:var(--mono)!important; font-size:12px!important; font-weight:400!important;
  letter-spacing:.14em!important; text-transform:uppercase!important;
  padding:15px 24px!important; border-radius:0!important; height:auto!important;
  background:var(--blue)!important; border:1px solid var(--blue)!important; color:#fff!important;
  box-shadow:none!important; transition:.22s ease; width:auto!important;
}
.qri-form div.wpforms-container-full .wpforms-form button[type=submit]:hover,
.qri-form .wpforms-form button[type=submit]:hover,
.qri-form .wpforms-form input[type=submit]:hover{
  background:#F1F6F9!important; border-color:#F1F6F9!important; color:var(--deep)!important;
}

/* Choices, errors, confirmation */
.qri-form .wpforms-form .wpforms-field-label-inline,
.qri-form .wpforms-form .wpforms-field-radio label,
.qri-form .wpforms-form .wpforms-field-checkbox label{
  color:#DCE7EE!important; font-size:15px!important; font-family:var(--body)!important;
  text-transform:none!important; letter-spacing:0!important;
}
.qri-form .wpforms-form label.wpforms-error,
.qri-form .wpforms-form em.wpforms-error{
  font-family:var(--mono)!important; font-size:11px!important; letter-spacing:.06em!important;
  color:var(--live)!important; margin-top:6px!important; text-transform:none!important;
}
.qri-form .wpforms-form input.wpforms-error,
.qri-form .wpforms-form textarea.wpforms-error,
.qri-form .wpforms-form select.wpforms-error{border-bottom-color:var(--live)!important}
.qri-form .wpforms-confirmation-container-full,
.qri-form div[class*=wpforms-confirmation]{
  background:transparent!important; border:1px solid rgba(232,240,244,.18)!important;
  color:#F1F6F9!important; padding:18px!important; margin:0!important; border-radius:0!important;
  font-family:var(--mono)!important; font-size:12.5px!important; letter-spacing:.04em; line-height:1.7;
}
.qri-form div[class*=wpforms-confirmation] p{margin:0; color:#F1F6F9!important}

/* ---------- footer ---------- */
.foot{background:var(--deep); color:#93AEBE; padding:56px 0 40px; font-size:14.5px}
/* Sized to the number of columns that have content, so removing one closes
   the gap rather than leaving an empty track. */
.foot-grid{display:grid; gap:36px; grid-template-columns:1.4fr 1fr 1fr 1fr}
.foot-grid--3{grid-template-columns:1.4fr 1fr 1fr 1fr}
.foot-grid--2{grid-template-columns:1.5fr 1fr 1fr}
.foot-grid--1{grid-template-columns:1.6fr 1fr}
.foot-grid--0{grid-template-columns:1fr}
@media(max-width:820px){
  .foot-grid,.foot-grid--3,.foot-grid--2,.foot-grid--1{grid-template-columns:1fr 1fr}
}
.qri-logo--stacked{width:200px; height:auto; display:block; margin-left:-14px}
.foot-blurb{margin-top:20px; font-size:14px; max-width:30ch}
.foot h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-lt); margin:0 0 16px; font-weight:400}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin-bottom:9px}
.foot a{text-decoration:none; color:#93AEBE; transition:.2s}
.foot a:hover{color:#F1F6F9}
.legal{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:52px; padding-top:22px; border-top:1px solid var(--line-d);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#6E8DA0;
}

/* ---------- motion ---------- */
.rise{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none; transition:none}
  .sky{transition:none}
}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* ---------- admin bar offset ---------- */
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* ---------- sparse hero ----------
   An unconfigured hero shouldn't occupy a full viewport of nothing. */
.hero--sparse{min-height:auto}
.hero--sparse .hero-inner{padding-bottom:clamp(40px,6vw,72px)}

/* ---------- setup checklist (logged-in editors only) ---------- */
.qri-setup{background:var(--deep); color:#DCE7EE; padding:clamp(40px,5vw,64px) 0; border-bottom:3px solid var(--live)}
.qri-setup__eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--live); margin:0 0 18px; display:flex; align-items:center; gap:14px;
}
.qri-setup__eyebrow span{
  color:#93AEBE; border:1px solid var(--line-d); padding:3px 9px; letter-spacing:.1em;
}
.qri-setup__title{
  font-family:var(--display); text-transform:uppercase; font-variation-settings:"wdth" 118;
  font-weight:600; font-size:clamp(24px,3.4vw,40px); line-height:1; color:#F1F6F9; margin:0 0 14px;
}
.qri-setup__intro{color:#93AEBE; max-width:60ch; margin:0 0 30px; font-size:15.5px}
.qri-setup__list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-d)}
.qri-setup__list li{
  display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--line-d);
}
.qri-setup__mark{
  width:22px; height:22px; border:1px solid var(--line-d); display:grid; place-items:center;
  font-size:13px; color:var(--deep); margin-top:2px;
}
.qri-setup__list .is-done .qri-setup__mark{background:var(--blue-lt); border-color:var(--blue-lt)}
.qri-setup__list .is-done strong{color:#93AEBE; text-decoration:line-through; font-weight:400}
.qri-setup__list strong{color:#F1F6F9; font-size:16px; display:block}
.qri-setup__list p{color:#93AEBE; font-size:14.5px; margin:5px 0 10px; max-width:62ch}
.qri-setup__list a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--live); text-decoration:none; border-bottom:1px solid rgba(232,163,60,.4);
}
.qri-setup__list a:hover{border-bottom-color:var(--live)}

/* ==========================================================================
   INNER PAGES
   Sections reuse the home page's components so a subpage reads as the same
   site rather than something bolted on.
   ========================================================================== */

/* Page banner — shorter than the home hero, which owns the full viewport. */
.hero--page{min-height:auto}
.hero--page .hero-inner{
  padding-top:calc(28vh + 20px); padding-bottom:clamp(36px,5vw,64px); max-width:var(--maxw);
}
.hero--page.hero--banner .hero-inner{padding-top:calc(32vh + 20px)}
.hero--page h1{font-size:clamp(38px,5.6vw,84px)}
.hero--page .lead{max-width:34ch; margin:24px 0 0}
@media(max-width:700px){
  .hero--page .hero-inner,
  .hero--page.hero--banner .hero-inner{padding-top:calc(34vh + 26px)}
}

/* Sections */
.sec__lead{margin:22px 0 20px}
.sec__text .prose{max-width:52ch}
.sec__btn{margin-top:26px}
.sec__actions{margin:34px 0 0}
.sec__banner{margin-top:clamp(34px,4vw,56px)}
.sec--flip .sec__text{order:2}
.sec--flip .sec__media{order:1}
@media(max-width:900px){
  .sec--flip .sec__text{order:1}
  .sec--flip .sec__media{order:2}
}

/* Full-bleed plan / map images sit on white, like the floor plan. */
.sec__plan{margin-top:clamp(34px,4vw,56px)}
.plan-slot{background:#fff; padding:clamp(14px,2vw,28px); border:1px solid var(--line)}
.plan-slot .slot__img{width:100%; height:auto; object-fit:contain}
.on-deep .plan-slot{background:rgba(255,255,255,.04); border-color:var(--line-d)}

/* Detail rows: narrow inside a split, full width on their own. */
.rows--wide{margin-top:clamp(30px,3.5vw,48px)}
.rows--narrow{margin-top:28px}

/* A list inside a split section only has half the page to work with, so three
   tracks cannot hold a word like WHEELCHAIR. Stack the description under the
   title instead of squeezing it alongside. */
.rows--narrow .row{grid-template-columns:44px minmax(0,1fr); gap:6px 16px}
.rows--narrow .row p{grid-column:2}

.rows--wide .row{grid-template-columns:64px minmax(0,1.15fr) minmax(0,1.6fr)}
@media(max-width:900px){.rows--wide .row{grid-template-columns:52px minmax(0,1fr); gap:6px 16px}
  .rows--wide .row p{grid-column:2}}

/* Safety net. minmax(0,1fr) lets a track shrink below its min-content width,
   so an unbreakable word overflows into the neighbouring column and collides
   with it. Display headings must never break mid-word, but these row titles
   are 18-24px — a break is far better than an overlap. */
.row h3{overflow-wrap:break-word; word-break:break-word}

/* Carousel inside a section needs air above it. */
.sec .carousel{margin-top:clamp(30px,3.5vw,52px)}
.carousel__head:empty{display:none}
.carousel__head{min-height:0}
.on-deep .carousel__btn{border-color:var(--line-d); color:#F1F6F9}
.on-deep .carousel__btn:hover:not(:disabled){background:#F1F6F9; border-color:#F1F6F9; color:var(--deep)}
.on-deep .carousel__slide{background:rgba(255,255,255,.04); border-color:var(--line-d)}
.on-deep .carousel__count{color:#93AEBE}

/* Inner-page closing CTA */
.page-cta__actions{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0}
.page-cta__actions .btn{margin:0}

/* Unpublished-section notice — logged-in editors only. */
/* Editor-only notice. Must sit clear of the banner wedge, and must not read
   as a design element — a full-bleed gold bar looked like one. */
.qri-draft-note{
  position:relative; z-index:1;
  background:rgba(232,163,60,.13);
  border-top:1px solid rgba(168,115,23,.35);
  border-bottom:1px solid rgba(168,115,23,.35);
  color:var(--deep); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
}
.qri-draft-note p{
  margin:0; padding:16px 0 16px 18px; line-height:1.7;
  border-left:3px solid var(--live);
}
.qri-draft-note strong{color:#7A5310}
.qri-draft-note a{color:var(--deep); text-decoration:underline; text-underline-offset:2px}
.qri-draft-note a:hover{color:#7A5310}


/* ==========================================================================
   BANNER: ANGLED EDGE + ROOF FACETS
   ========================================================================== */

/* The banner does not end on a horizontal. A shallow diagonal cuts into the
   page below — thicker on the right, about 2.5 degrees at desktop width. */
:root{--wedge:clamp(38px,5vw,104px)}

.hero--full,
.hero--page{padding-bottom:var(--wedge)}

.hero--full::after,
.hero--page::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:var(--wedge); background:var(--paper); z-index:4;
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
/* Sections directly beneath a banner already have their own top padding, so
   the wedge sits flush without doubling the gap. */
.hero--full + .section,
.hero--page + .section{margin-top:calc(var(--wedge) * -0.35)}

/* The stats strip has to clear the wedge rather than be sliced by it. */
.hero--full .strip{position:relative; z-index:3}

/* ---- roof facets ----
   Entrance Control lays arbitrary prisms over its photography. We have a
   geometry already — the three gables of the mark — so the overlay is the
   logo at architectural scale rather than decoration borrowed from someone
   else's brand. Centre gable lighter, same rule as the mark. */
.hero__facets{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden}
.hero__facets i{position:absolute; inset:0; display:block; mix-blend-mode:multiply}

/* Left gable — the big one, running off the top and bottom edges. */
.hero__facets i:nth-child(1){
  background:#2A6E9C; opacity:.20;
  clip-path:polygon(-6% 118%, 17% -18%, 40% 118%);
}
/* Centre gable — lighter, the "one of them is yours" note. */
.hero__facets i:nth-child(2){
  background:#86AEC7; opacity:.15;
  clip-path:polygon(14% 118%, 33% -22%, 52% 118%);
}
/* Right gable — a sliver, just enough to read as a set of three. */
.hero__facets i:nth-child(3){
  background:#123449; opacity:.13;
  clip-path:polygon(34% 118%, 49% -14%, 64% 118%);
}
/* On the tinted fallback there is no photograph to compete with — the facets
   are the only artwork, so they hold their weight rather than following the
   softened setting used over imagery. */
.hero--tint .hero__facets i{mix-blend-mode:screen; opacity:.06}
.hero--tint .hero__facets i:nth-child(2){opacity:.09}

@media(max-width:900px){
  /* Narrower viewport: pull the facets left so they sit behind the type
     rather than across the middle of the photograph. */
  .hero__facets i:nth-child(1){clip-path:polygon(-24% 118%, 4% -18%, 30% 118%)}
  .hero__facets i:nth-child(2){clip-path:polygon(-4% 118%, 22% -22%, 46% 118%)}
  .hero__facets i:nth-child(3){display:none}
}

/* Content sits above the facets. */
.hero-inner,.sky-note{z-index:5}
.hero--full .strip{z-index:5}

/* Mobile panel keeps the bar solid. */
.nav--panel-open{background:#fff}


/* ---------- opening Coppabella section ---------- */
.intro__media{margin-top:clamp(28px,3.4vw,44px)}
.intro__media.is-empty{min-height:260px}
.intro__body{max-width:60ch}
.intro__body p:first-child{margin-top:0}

/* ---------- the mess ---------- */
.mess-body{margin-top:20px; max-width:52ch}

/* ---------- facilities closing note ---------- */
.fac-outro{margin-top:clamp(34px,4vw,56px); max-width:56ch}


/* ---------- return to top ----------
   The glyph is a single gable over a rule — the mark's own geometry doing
   the job of an arrow, rather than a borrowed chevron. */
.to-top{
  position:fixed; right:clamp(16px,3vw,34px); bottom:clamp(16px,3vw,34px); z-index:55;
  width:50px; height:50px; display:grid; place-items:center;
  background:var(--deep); border:1px solid var(--deep); color:#fff; text-decoration:none;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .26s ease, transform .26s ease, visibility .26s, background .2s ease, border-color .2s ease;
}
.to-top.is-visible{opacity:1; visibility:visible; transform:none}
.to-top svg{width:17px; height:17px; fill:var(--live); transition:fill .2s ease}
.to-top:hover{background:var(--blue); border-color:var(--blue)}
.to-top:hover svg{fill:#fff}
.to-top:focus-visible{outline:2px solid var(--live); outline-offset:3px}
/* The mobile panel covers the page; a floating button over it is noise. */
body.nav-open .to-top{opacity:0; visibility:hidden}
@media(max-width:520px){.to-top{width:44px; height:44px} .to-top svg{width:15px; height:15px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .01s, visibility .01s}}


/* ---------- section media matched to the text column ----------
   A split section looked unbalanced when a portrait photograph ran past the
   end of the copy. The media column now matches the text column's height. */
/* Vertical placement of the media column against the copy beside it. */
.sec--align-stretch .grid.split{align-items:stretch}
.sec--align-top .grid.split{align-items:start}
.sec--align-middle .grid.split{align-items:center}
.sec--align-bottom .grid.split{align-items:end}

.sec--split .sec__media,
.sec--split-reverse .sec__media{display:flex}
.sec--split .sec__media .slot,
.sec--split-reverse .sec__media .slot{flex:1; margin-top:0}
/* Only a stretched column needs a floor under it; the others take their
   own height. */
.sec--align-stretch .sec__media .slot{min-height:340px}
.sec--align-top .sec__media .slot,
.sec--align-middle .sec__media .slot,
.sec--align-bottom .sec__media .slot{min-height:0}
.sec--align-top .sec__media .slot__img,
.sec--align-middle .sec__media .slot__img,
.sec--align-bottom .sec__media .slot__img{height:auto!important; object-fit:contain}
.sec--split .sec__media--cover .slot__img,
.sec--split-reverse .sec__media--cover .slot__img{width:100%; height:100%; object-fit:cover}

/* Anything with text or faces in it has to show whole. Cropping a board
   line-up or an org chart to fit a text column destroys the thing. */
.sec__media--contain .slot{
  background:#fff; padding:clamp(12px,1.6vw,26px);
  align-items:center; justify-content:center;
}
.sec__media--contain .slot__img{
  width:100%; height:auto; max-height:100%; object-fit:contain; margin:auto;
}
.on-deep .sec__media--contain .slot{background:rgba(255,255,255,.05)}

/* No matching at all — the image simply is its own height. */
.sec--split .sec__media--natural,
.sec--split-reverse .sec__media--natural{display:block}
.sec__media--natural .slot{min-height:0}
.sec__media--natural .slot__img{width:100%; height:auto; object-fit:contain}
@media(max-width:900px){
  .sec--align-stretch .sec__media .slot{min-height:280px}
}

/* ---------- multiple buttons ---------- */
.sec__actions{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0}

/* ---------- video embed ---------- */
.sec__video{margin-top:clamp(30px,3.5vw,52px)}
.embed{position:relative; aspect-ratio:16/9; background:var(--sky); border:1px solid var(--line)}
.embed iframe,.embed object,.embed embed{position:absolute; inset:0; width:100%; height:100%; border:0}
.on-deep .embed{background:rgba(255,255,255,.05); border-color:var(--line-d)}

/* ---------- enquiry form: white fields ----------
   Underlined transparent inputs on navy looked handsome and tested badly —
   people could not see where to type. */
.qri-form div.wpforms-container-full .wpforms-form input[type=text],
.qri-form div.wpforms-container-full .wpforms-form input[type=email],
.qri-form div.wpforms-container-full .wpforms-form input[type=tel],
.qri-form div.wpforms-container-full .wpforms-form input[type=url],
.qri-form div.wpforms-container-full .wpforms-form input[type=number],
.qri-form div.wpforms-container-full .wpforms-form input[type=date],
.qri-form div.wpforms-container-full .wpforms-form input[type=password],
.qri-form div.wpforms-container-full .wpforms-form select,
.qri-form div.wpforms-container-full .wpforms-form textarea,
.qri-form .wpforms-form input[type=text],
.qri-form .wpforms-form input[type=email],
.qri-form .wpforms-form input[type=tel],
.qri-form .wpforms-form input[type=url],
.qri-form .wpforms-form input[type=number],
.qri-form .wpforms-form input[type=date],
.qri-form .wpforms-form select,
.qri-form .wpforms-form textarea,
.qri-form input[type=text],.qri-form input[type=email],.qri-form input[type=tel],
.qri-form select,.qri-form textarea{
  background:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:0!important;
  color:var(--deep)!important;
  padding:13px 14px!important;
}
.qri-form .wpforms-form input:focus,
.qri-form .wpforms-form select:focus,
.qri-form .wpforms-form textarea:focus,
.qri-form input:focus,.qri-form select:focus,.qri-form textarea:focus{
  border-color:var(--live)!important; box-shadow:0 0 0 2px rgba(232,163,60,.35)!important;
}
.qri-form .wpforms-form input::placeholder,
.qri-form .wpforms-form textarea::placeholder,
.qri-form input::placeholder,.qri-form textarea::placeholder{color:#8296A2!important}
.qri-form .wpforms-form select option{background:#fff; color:var(--deep)}
/* One complete background declaration, not a shorthand plus patches.
   The previous arrow was two gradients, and the white-field rule above uses
   the `background` shorthand — which resets background-size and -repeat, so
   the gradients tiled across the whole control at full size. */
.qri-form select,
.qri-form .wpforms-form select,
.qri-form div.wpforms-container-full .wpforms-form select{
  appearance:none!important; -webkit-appearance:none!important; -moz-appearance:none!important;
  cursor:pointer;
  background-color:#FFFFFF!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.4 6 6.6 11 1.4' fill='none' stroke='%235C7382' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:12px 8px!important;
  padding-right:40px!important;
  text-indent:0;
}
.qri-form select::-ms-expand{display:none}


/* ---------- compact page heading ----------
   For pages where a full banner is dead weight — the enquiries page, where
   the job is to get someone into the form, not to admire a photograph. */
.page-head{background:var(--paper); padding:clamp(48px,7vw,96px) 0 clamp(36px,5vw,68px)}
.page-head h1{font-size:clamp(34px,5vw,72px)}
.page-head .lead{max-width:38ch; margin:22px 0 0}
.page-head + .section{padding-top:clamp(52px,6vw,96px)}
.page-head + .section.on-deep,
.page-head + .qri-draft-note{margin-top:0}


/* First section on a page with no banner: the sticky white bar sits directly
   above it, so it carries the space the banner would have. */
.nav + #main > .section:first-child,
#main > div:first-child + .section{padding-top:clamp(56px,7vw,104px)}


/* Two text columns side by side: body copy runs at a looser line height than
   the heading beside it, so its first line sits lower even when both columns
   start at the same y. Trim the difference so the cap-heights agree. */
.grid--top > .rise > .lead:first-child{margin-top:-.22em}
.grid--top > .rise > .prose:first-child{margin-top:-.34em}
@media(max-width:900px){
  .grid--top > .rise > .lead:first-child,
  .grid--top > .rise > .prose:first-child{margin-top:0}
}


/* ==========================================================================
   SMALL PHONE REFINEMENTS
   Verified by rendering at 320, 390 and 768px.
   ========================================================================== */

/* The facilities grid holds two columns down to 760px, but on a phone
   "Australia Post agency" and "Basketball court" both wrap, leaving rows of
   uneven height. One column reads cleaner below that. */
@media(max-width:560px){
  .fac{grid-template-columns:1fr}
  .fac > div,
  .fac > div:nth-child(3n+1),
  .fac > div:nth-child(2n+1){border-left:0; padding-left:0}
}

/* Two footer columns squeeze the stacked logo and leave the third column
   orphaned underneath it. Stack them. */
@media(max-width:560px){
  .foot-grid,.foot-grid--3,.foot-grid--2,.foot-grid--1{grid-template-columns:1fr; gap:34px}
  .qri-logo--stacked{margin-left:0}
  .foot-blurb{max-width:none}
}

/* The roster clock's 268px floor pushed the hero 3px past a 320px viewport. */
@media(max-width:400px){
  .clock{min-width:0; width:100%; padding:18px 20px}
  .clock .time{font-size:40px}
}