/* ==========================================================================
   Awarez public site.

   Design language lifted from the Awarez flyer (BrandingExample.jpeg):
     · pure black ground, one red, one near-white
     · heavy condensed caps headlines, split two-tone — white line / red line
     · thin red rules flanking letterspaced caps (the "CONNECTING YOU" device)
     · alternating bands: black → near-white → black
     · fully-rounded pill buttons in a white/red pair
   Reds sampled from the supplied artwork:
     #FF4057  the Z mark (screen red, primary)
     #E20D1E  the printed flyer (deeper, used for solid fills on light)
   ========================================================================== */

:root{
  --bg:#000000;
  --surface:#121316;
  --surface-2:#1b1d21;
  --line:#26292e;
  --line-2:#393d44;
  --ink:#f4f5f6;
  --ink-2:#c3c8ce;
  --muted:#8a9299;

  --brand:#FF4057;
  --brand-2:#ff6376;
  --brand-deep:#E20D1E;

  --band:#FBFBFB;
  --band-ink:#0A0A0A;
  --band-ink-2:#3d4247;
  --band-line:#e2e2e2;

  --radius:8px;
  --pill:999px;
  --wrap:1180px;

  --display:"Anton","Archivo Narrow","Arial Narrow",Impact,sans-serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--brand-2)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:680px}
.muted{color:var(--muted)}
.dot{margin:0 6px;color:var(--line-2)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brand);color:#fff;padding:10px 16px;border-radius:var(--radius)}

/* --- shared brand devices ------------------------------------------------ */

/* Letterspaced caps flanked by red rules — the flyer's signature separator. */
.rule-caps{
  display:flex;align-items:center;gap:16px;
  font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);margin:0;
}
.rule-caps::before,.rule-caps::after{content:"";height:2px;background:var(--brand);flex:1 1 auto;min-width:24px}
.rule-caps.rule-left::before{display:none}
.rule-caps.rule-left{justify-content:flex-start}
.rule-caps.rule-left::after{max-width:90px}

.eyebrow{
  font-family:var(--body);
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;font-weight:700;
}

/* Headlines: heavy condensed caps, split across two colours. */
.display{
  font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.94;
  margin:0;text-wrap:balance;
}
.display .hit{color:var(--brand);display:block}

/* --- header -------------------------------------------------------------- */

.site-header{
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.94);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px}
.logo{display:block;line-height:0}
.logo img{width:196px;max-width:46vw}
.site-nav{display:flex;gap:26px}
.site-nav a{
  color:var(--ink-2);text-decoration:none;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.site-nav a:hover{color:var(--brand)}

/* --- hero ---------------------------------------------------------------- */

.hero{
  padding:78px 0 62px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0d0e10 0%,var(--bg) 100%);
  position:relative;overflow:hidden;isolation:isolate;
}
.hero > .wrap{position:relative;z-index:1}

/* The flyer bleeds its photograph off the right edge and dissolves it into the
   black behind the headline. Same idea here: the image runs to the viewport
   edge, and a two-axis gradient hands it back to the page ground so there is no
   hard edge anywhere. */
.hero-bleed{
  position:absolute;top:0;right:0;bottom:0;
  width:min(56%, 820px);
  z-index:0;pointer-events:none;
}
/* Masked, not painted over. An overlay that fades to a flat colour has to match
   whatever is behind it — and the hero's ground is a gradient (#0d0e10 → #000),
   so a black scrim leaves a visible vertical seam at the top. Masking fades the
   image to genuine transparency and lets the hero's own background show through,
   which matches at every point by construction. */
.hero-bleed img{
  width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  filter:brightness(.62) saturate(.92);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.8) 62%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.8) 62%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 74%, transparent 100%);
          mask-composite: intersect;
}

.hero h1{font-size:clamp(42px,8.5vw,86px)}
.lede{font-size:17.5px;color:var(--ink-2);margin:22px 0 0;max-width:52ch}
.hero-rule{height:2px;width:120px;background:var(--brand);margin:26px 0 0;border:0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-inner{max-width:760px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Search: the primary entry point, not a decoration. */
.hero-search{display:flex;gap:10px;margin-top:28px;max-width:560px;flex-wrap:wrap}
.hero-search input{
  flex:1 1 260px;min-width:0;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--pill);
  padding:13px 22px;font:inherit;font-size:15.5px;
}
.hero-search input::placeholder{color:var(--muted)}
.hero-search input:focus-visible{border-color:var(--brand)}

.quick-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:18px 0 0}
.quick-chips a{
  display:inline-block;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--pill);padding:6px 15px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.quick-chips a:hover{border-color:var(--brand);color:var(--brand)}

.stat-line{margin:24px 0 0;color:var(--muted);font-size:14.5px}
.stat-line strong{color:var(--ink);font-weight:700}

/* Browse by area — the directory's front door. */
/* auto-fit, not auto-fill: with only two or three cities the tiles stretch to
   fill the row instead of huddling at the left with dead space beside them. */
.city-grid{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
}
.city-tile{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;transition:border-color .15s,transform .15s;
}
.city-tile:hover{border-color:var(--brand);transform:translateY(-2px)}
.city-name{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:21px;line-height:1;letter-spacing:.01em;color:var(--ink);
}
.city-count{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}

.type-row{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:16px 0 0}
.type-row a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink-2);border:1px solid var(--line);border-radius:var(--pill);
  padding:7px 8px 7px 16px;font-size:13px;font-weight:600;
}
.type-row a:hover{border-color:var(--brand);color:var(--brand)}
.type-row a span{
  background:var(--surface-2);color:var(--muted);border-radius:var(--pill);
  padding:2px 9px;font-size:11.5px;font-variant-numeric:tabular-nums;
}

.section-note{margin:-14px 0 22px;color:var(--muted);font-size:13.5px;letter-spacing:.04em}
.see-more{margin:26px 0 0;text-align:center}

/* How it works — a genuine sequence, so numbering carries meaning. */
.steps-row{
  list-style:none;padding:0;margin:0;counter-reset:step;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;
}
.steps-row li{border-top:2px solid var(--brand);padding-top:18px}
.step-n{
  display:block;font-family:var(--display);font-weight:400;
  font-size:26px;line-height:1;color:var(--brand);margin-bottom:10px;
}
.steps-row h3{
  font-size:17px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em;color:var(--ink);
}
.steps-row p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}

.hit-deep{color:var(--brand-deep)}

.page-intro{padding:52px 0 22px;border-bottom:1px solid var(--line)}
.page-intro h1{font-size:clamp(34px,6.5vw,58px)}
.page-intro .lede{font-size:16px;margin-top:14px}

/* --- buttons: fully-rounded pills, as on the flyer ----------------------- */

.btn{
  display:inline-block;padding:12px 26px;border-radius:var(--pill);
  border:2px solid var(--line-2);background:transparent;color:var(--ink);
  font-family:var(--body);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.btn-ghost{color:var(--ink-2)}
.btn-white{background:#fff;border-color:#fff;color:#0a0a0a}
.btn-white:hover{background:var(--ink);border-color:var(--ink);color:#0a0a0a}
.btn-block{display:block;width:100%;text-align:center;margin-bottom:8px}

/* --- filters ------------------------------------------------------------- */

.filter-bar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:24px 0}
.filter span{
  display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;font-weight:700;
}
.filter select,.filter input[type=search]{
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  border-radius:var(--pill);padding:10px 18px;font:inherit;font-size:14.5px;min-width:165px;
}
.filter input[type=search]::placeholder{color:var(--muted)}
.filter-search input{min-width:220px}

/* --- sections ------------------------------------------------------------ */

/* Longhand on purpose: `.section` is used together with `.wrap`, and the
   `padding: 52px 0` shorthand would reset .wrap's horizontal padding to 0. */
.section{padding-top:52px;padding-bottom:52px}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:26px;border-bottom:2px solid var(--brand);padding-bottom:12px;
}
.section-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,3.4vw,32px);letter-spacing:.01em;margin:0;line-height:1}
.section-link{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;
}
.section-link:hover{color:var(--brand)}
.empty-note{color:var(--muted);padding:34px 0}

/* --- the light band: the flyer's benefits strip -------------------------- */

.band-light{background:var(--band);color:var(--band-ink);padding:56px 0}
.band-light h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,4vw,38px);line-height:1;margin:0 0 8px;color:var(--band-ink);
}
.band-light .band-sub{color:var(--band-ink-2);margin:0 0 34px;font-size:16px}
.band-head{text-align:center;max-width:60ch;margin:0 auto}

.benefits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:36px;
}
.benefit{padding:6px 26px;text-align:center;border-left:1px solid var(--band-line)}
.benefit:first-child{border-left:0}
.benefit svg{width:44px;height:44px;margin:0 auto 16px;display:block;color:var(--brand-deep)}
.benefit h3{
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 2px;color:var(--band-ink);
}
.benefit .benefit-sub{
  font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-deep);margin:0 0 10px;
}
.benefit p{font-size:14.5px;color:var(--band-ink-2);margin:0;line-height:1.5}

.band-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:38px}
/* Buttons on the light band need the ink colour too — the dark-ground default
   (--ink) is near-white and vanishes here. */
.band-light .btn{border-color:var(--band-ink);color:var(--band-ink)}
.band-light .btn:hover{border-color:var(--brand-deep);color:var(--brand-deep)}
.band-light .btn-primary{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.band-light .btn-primary:hover{background:#c10a19;border-color:#c10a19;color:#fff}

/* --- featured placement (paid) ------------------------------------------- */

/* A different shape from the standard grid on purpose: horizontal, wider, more
   room for the poster. A featured slot has to look worth paying for. */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:16px}

.feature-card{
  background:linear-gradient(135deg,#1b1216 0%,var(--surface) 62%);
  border:1px solid rgba(255,64,87,.42);border-radius:var(--radius);
  overflow:hidden;transition:border-color .15s,transform .15s;
}
.feature-card:hover{border-color:var(--brand);transform:translateY(-2px)}

.feature-link{display:grid;grid-template-columns:170px minmax(0,1fr);color:inherit;text-decoration:none}

.feature-media{background:var(--surface-2);overflow:hidden}
.feature-media img{width:100%;height:100%;object-fit:cover;min-height:170px}
.feature-media-empty{
  width:100%;height:100%;min-height:170px;display:grid;place-items:center;
  background:linear-gradient(135deg,#241a1d 0%,#16181b 100%);
}
.feature-media-empty img{width:46px;height:auto;opacity:.55;min-height:0}

.feature-body{padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.feature-flag{
  margin:0 0 2px;font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);
}
.feature-title{
  font-size:19px;font-weight:700;line-height:1.22;margin:0;letter-spacing:-.012em;
}
.feature-when{margin:2px 0 0;font-size:14.5px;color:var(--ink-2)}
.feature-when strong{color:var(--ink);font-weight:700}
.feature-where{margin:0;font-size:14px;color:var(--muted)}
.feature-card .card-tags{margin-top:10px}

.section-featured .section-head{border-bottom-color:var(--brand)}

@media (max-width:560px){
  .feature-grid{grid-template-columns:1fr}
  .feature-link{grid-template-columns:1fr}
  .feature-media img,.feature-media-empty{min-height:0;aspect-ratio:16/9}
}

/* --- cards --------------------------------------------------------------- */

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card-featured{border-color:var(--brand)}
.card-link{display:block;color:inherit;text-decoration:none}

.card-media{position:relative;aspect-ratio:4/5;background:var(--surface-2);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}

/* No poster: a short branded plate rather than a tall void. */
.card-media-blank{aspect-ratio:16/7;background:linear-gradient(135deg,#1d2026 0%,#141619 100%)}
.card-media-empty{width:100%;height:100%;display:grid;place-items:center}
.card-media-empty img{width:42px;height:auto;opacity:.5}

.card-date{
  position:absolute;left:10px;top:10px;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--pill);
}
/* Businesses have no date — a neutral badge keeps the red for actual dates. */
.card-date-open{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-2)}

.card-body{padding:16px 17px 18px}
.card-title{font-size:17px;font-weight:700;line-height:1.28;margin:0 0 6px;letter-spacing:-.01em}
.card-meta{font-size:14px;color:var(--ink-2);margin:0 0 3px}
.card-time{font-size:13.5px;color:var(--muted);margin:0}

.card-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:13px 0 0}
.tag{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--muted);border:1px solid var(--line-2);border-radius:var(--pill);padding:4px 9px;
}
.tag-type{color:var(--brand);border-color:rgba(255,64,87,.45)}

/* --- detail -------------------------------------------------------------- */

.detail{padding:44px 0 64px}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:44px;align-items:start}
.detail-main h1{font-size:clamp(32px,5.4vw,54px);margin-bottom:18px}
.detail-when{font-size:17px;margin:0 0 4px}
.detail-when strong{font-weight:700}
.detail-recurrence{color:var(--muted);font-size:13.5px;margin:0 0 12px;letter-spacing:.04em}
.detail-rule{height:2px;width:100px;background:var(--brand);border:0;margin:0 0 28px}
.detail-poster{margin:0 0 30px}
.detail-poster img{border-radius:var(--radius);border:1px solid var(--line);width:100%}
.detail-body p{color:var(--ink-2);max-width:65ch}
.detail-tags{margin-top:24px}
.detail-back{margin-top:48px;border-top:1px solid var(--line);padding-top:22px}
.detail-back a{
  color:var(--muted);text-decoration:none;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.detail-back a:hover{color:var(--brand)}

.detail-side{display:grid;gap:16px;position:sticky;top:92px}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.side-card h2{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);
  margin:0 0 14px;font-weight:700;font-family:var(--body);
}
.side-address{margin:0 0 16px;line-height:1.55}
.side-organiser{margin:0 0 14px;font-weight:700}
.side-list{margin:0}
.side-list > div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.side-list > div:last-child{border-bottom:none}
.side-list dt{color:var(--muted);font-size:13.5px;margin:0}
.side-list dd{margin:0;font-size:13.5px;text-align:right;font-weight:500}

/* --- footer -------------------------------------------------------------- */

.site-footer{border-top:1px solid var(--line);padding:44px 0 0;margin-top:44px}
.footer-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between}
.footer-brand img{width:172px;margin-bottom:12px}
.footer-brand p{color:var(--muted);margin:0;font-size:14.5px;max-width:38ch}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-nav a{
  color:var(--ink-2);text-decoration:none;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.footer-nav a:hover{color:var(--brand)}

/* "DON'T JUST HOST IT. GET IT SEEN." — the flyer's closing line. */
.strapline{
  display:flex;align-items:center;gap:18px;margin:40px 0 0;padding:22px 0;
  border-top:1px solid var(--line);
}
.strapline p{
  margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(15px,2.4vw,22px);letter-spacing:.03em;white-space:nowrap;line-height:1;
}
.strapline .hit{color:var(--brand)}
.strapline::before,.strapline::after{content:"";height:2px;background:var(--brand);flex:1 1 auto;min-width:16px}

/* --- responsive ---------------------------------------------------------- */

/* Below ~900px there is no room for the headline and the photo side by side —
   the text would sit on the image. The photo becomes a band across the foot of
   the hero instead, with the copy on solid black above it. The hero reserves
   more bottom padding than the band is tall, so they never meet. */
@media (max-width:900px){
  .hero{padding:56px 0 232px}
  .hero-bleed{width:100%;top:auto;height:208px}
  .hero-bleed img{
    object-position:58% 46%;
    filter:brightness(.52) saturate(.9);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 34%, #000 74%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 34%, #000 74%, transparent 100%);
  }
}

@media (max-width:860px){
  .detail-grid{grid-template-columns:1fr;gap:30px}
  .detail-side{position:static}
  .benefit{border-left:0;border-top:1px solid var(--band-line);padding:24px 20px}
  .benefit:first-child{border-top:0}
}
@media (max-width:600px){
  /* Three nav items no longer fit beside the logo at 375px, so let the nav
     drop to its own line rather than shrinking the type to the point of
     illegibility. This also leaves room for a fourth item later. */
  .header-inner{padding:10px 16px;gap:10px;flex-wrap:wrap;row-gap:8px}
  .logo img{width:150px;max-width:42vw}
  .site-nav{width:100%;gap:20px}
  .site-nav a{font-size:11.5px;letter-spacing:.1em}

  .hero{padding:44px 0 226px}

  /* Longhand again — see the note on .section above. */
  .section{padding-top:36px;padding-bottom:36px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
  .strapline{flex-direction:column;gap:12px}
  .strapline p{white-space:normal;text-align:center}
  .footer-inner{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- contact / advertise -------------------------------------------------- */

.enquiry-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
.enquiry-main{min-width:0}

.notice{border-radius:var(--radius);padding:14px 18px;margin:0 0 20px;font-size:15px;border:1px solid}
.notice-ok{background:rgba(79,195,172,.1);border-color:rgba(79,195,172,.4);color:#8fe3d2}
.notice-error{background:rgba(255,64,87,.1);border-color:rgba(255,64,87,.42);color:#ff98a6}
.notice a{color:inherit}

.enquiry-about{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;margin:0 0 20px;font-size:15px;
}
.enquiry-clear{margin-left:10px;font-size:12.5px;color:var(--muted)}

.enquiry-form .field{display:block;margin-bottom:18px}
.enquiry-form .field > span{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.enquiry-form .req{color:var(--brand)}
.enquiry-form input,.enquiry-form textarea{
  width:100%;padding:13px 18px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);font:inherit;font-size:15.5px;
}
.enquiry-form textarea{resize:vertical;line-height:1.6;border-radius:var(--radius)}
.enquiry-form input::placeholder,.enquiry-form textarea::placeholder{color:var(--muted)}
.enquiry-form input:focus-visible,.enquiry-form textarea:focus-visible{border-color:var(--brand)}
/* min-width:0 for the same reason as the admin panels — grid items default to
   min-width:auto and form controls have an intrinsic minimum that props the
   track open, pushing content past its column. */
.enquiry-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.enquiry-form .field-row > *,
.enquiry-form input,
.enquiry-form textarea{min-width:0}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.enquiry-side{display:grid;gap:16px;position:sticky;top:92px}
.side-note{font-size:13.5px;color:var(--muted);margin:14px 0 0;line-height:1.55}

/* --- share --------------------------------------------------------------- */

.share{margin-top:34px;border-top:1px solid var(--line);padding-top:20px}
.share-label{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.share-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.share-list a{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--pill);padding:8px 16px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:color .15s ease,border-color .15s ease;
}

/* Each button hovers to its own brand colour, so the mark is recognised before
   the label is read. X has no usable brand colour on a black ground, so it
   takes the page ink instead of a near-invisible black. */
.share-list a{--share-accent:var(--brand)}
.share-list a[data-share="whatsapp"]{--share-accent:#25D366}
.share-list a[data-share="facebook"]{--share-accent:#1877F2}
.share-list a[data-share="x"]{--share-accent:var(--ink)}
.share-list a:hover,
.share-list a:focus-visible{border-color:var(--share-accent);color:var(--share-accent)}

/* Optical alignment: the cap height of the label sits slightly above the
   glyph centre, so nudge the icon down rather than centring on the box. */
.brand-icon{flex:none;display:block;transform:translateY(.5px)}

 (prefers-reduced-motion:reduce){.share-list a{transition:none}}

/* --- footer contact ------------------------------------------------------- */

.footer-contact{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.footer-label{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px;
}
.footer-contact > a{color:var(--ink-2);text-decoration:none;font-size:14.5px}
.footer-contact > a:hover{color:var(--brand)}
.socials{list-style:none;display:flex;gap:14px;padding:0;margin:10px 0 0}
.socials a{
  color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.socials a:hover{color:var(--brand)}

@media (max-width:860px){
  .enquiry-layout{grid-template-columns:1fr;gap:28px}
  .enquiry-side{position:static}
}
@media (max-width:600px){
  .enquiry-form .field-row{grid-template-columns:1fr}
}

/* --- listing gallery ------------------------------------------------------ */

.gallery{
  list-style:none;padding:0;margin:30px 0 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
}
.gallery li{margin:0}
.gallery a{
  display:block;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);transition:border-color .15s,transform .15s;
}
.gallery a:hover{border-color:var(--brand);transform:translateY(-2px)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-2)}

/* --- gallery lightbox ------------------------------------------------------ */

html.lightbox-open{overflow:hidden}

/* The dialog paints its own ground rather than leaning on ::backdrop alone —
   that pseudo-element composites inconsistently and let the page read through. */
.lightbox{
  border:0;padding:0;color:var(--ink);
  background:rgba(0,0,0,.94);
  max-width:100vw;max-height:100vh;width:100%;height:100%;
}
.lightbox::backdrop{background:rgba(0,0,0,.94)}

.lightbox-figure{
  margin:0;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:56px 64px;
}
.lightbox-img{
  max-width:100%;max-height:calc(100vh - 150px);
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--radius);
}
.lightbox-figure figcaption{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  font-size:14px;color:var(--ink-2);text-align:center;
}
.lightbox-count{
  font-size:12px;letter-spacing:.12em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.lightbox button{
  position:absolute;z-index:1;cursor:pointer;
  background:rgba(0,0,0,.55);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--pill);
  display:grid;place-items:center;line-height:1;
}
.lightbox button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.lightbox button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.lightbox-close{top:16px;right:16px;width:44px;height:44px;font-size:26px}
.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px}
.lightbox-prev{left:12px}
.lightbox-next{right:12px}

@media (max-width:600px){
  .lightbox-figure{padding:64px 12px 20px}
  .lightbox-img{max-height:calc(100vh - 170px)}
  .lightbox-nav{width:42px;height:42px;font-size:26px}
  .lightbox-prev{left:6px}
  .lightbox-next{right:6px}
}

/* ---------------------------------------------------- rich-text description */
/* The description is authored in the admin editor and passed through the
   allowlist sanitiser, so exactly these elements can appear here and no more.
   Everything is scoped under .detail-body so listing copy can never restyle the
   page around it. */
.detail-body{color:var(--ink-2);max-width:65ch}
.detail-body > *{max-width:65ch}
.detail-body p{color:var(--ink-2);margin:0 0 16px}
.detail-body > *:last-child{margin-bottom:0}

.detail-body h3,
.detail-body h4{
  color:var(--ink);font-family:var(--body);font-weight:700;
  letter-spacing:-.01em;margin:28px 0 10px;
}
.detail-body h3{font-size:19px}
.detail-body h4{font-size:16px}
.detail-body h3:first-child,
.detail-body h4:first-child{margin-top:0}

.detail-body strong{color:var(--ink);font-weight:700}
.detail-body em{font-style:italic}
.detail-body del{color:var(--muted);text-decoration:line-through}

.detail-body ul,
.detail-body ol{margin:0 0 16px;padding-left:22px}
.detail-body li{margin-bottom:6px}
.detail-body li::marker{color:var(--brand)}

.detail-body blockquote{
  margin:20px 0;padding:2px 0 2px 18px;
  border-left:2px solid var(--brand);color:var(--ink);
}

/* Long unbroken URLs are common in pasted copy and would otherwise force the
   whole detail column wider than its track. */
.detail-body a{color:var(--brand);overflow-wrap:anywhere}
.detail-body a:hover{color:var(--brand-2)}

.detail-body pre{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;overflow-x:auto;font-size:13px;margin:0 0 16px;
}

/* Remote images in a description. Width and height attributes come from the
   validator at save time, so the browser reserves the right space before the
   file arrives; height:auto keeps that from fighting the responsive width. */
.detail-body img{
  display:block;max-width:100%;height:auto;
  margin:20px 0;border-radius:var(--radius);
  background:var(--surface);
}
.detail-body p > img:only-child{margin:20px 0}

/* --------------------------------------------------------------- video embed */
/* A poster image with a play badge until it is clicked, then the provider's own
   iframe replaces the whole card. aspect-ratio holds the space in both states so
   the page does not jump at the swap. */
.video{
  position:relative;margin:28px 0;
  aspect-ratio:16/9;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.video iframe{display:block;width:100%;height:100%;border:0}

.video-play{
  position:absolute;inset:0;display:block;
  text-decoration:none;color:var(--ink);
}
.video-thumb{
  width:100%;height:100%;object-fit:cover;
  /* Provider thumbnails are often letterboxed 4:3; cover crops rather than
     pillarboxing inside a card that is already 16:9. */
}

/* The play badge. Drawn rather than shipped as an asset — it is a triangle. */
.video-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:66px;height:46px;border-radius:12px;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.22);
  transition:background .16s ease,transform .16s ease;
}
.video-icon::after{
  content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.video-play:hover .video-icon,
.video-play:focus-visible .video-icon{
  background:var(--brand);border-color:var(--brand);
  transform:translate(-50%,-50%) scale(1.06);
}

/* Title strip along the bottom, over a gradient so it stays legible on any
   thumbnail. */
.video-label{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:2px;
  padding:34px 16px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,0));
}
.video-label b{
  color:#fff;font-size:14.5px;font-weight:700;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.video-label em{
  color:rgba(255,255,255,.72);font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

@media (prefers-reduced-motion:reduce){
  .video-icon{transition:none}
  .video-play:hover .video-icon,
  .video-play:focus-visible .video-icon{transform:translate(-50%,-50%)}
}