/* Option B "The green band": the old townow.ie's deep green hero band and slanted edges, centred stage, dark bento, photo wall.
   Loaded after site.css only when tnw_variant() is "b". */
.v-b { --line: rgba(247,244,237,.12); }
.v-b body, body.v-b { background: var(--forest); color: #E6DFCB; }
.v-b h1, .v-b h2, .v-b h3 { color: #F7F4ED; }
.v-b em { color: var(--gold-l); }
.v-b a { color: var(--gold-l); }
.v-b a.btn, .v-b .btn { color: var(--fg); } .v-b a.store { color: #121211; } .v-b .page a.store { color: #fff; } .v-b .page .pagehead a.store, .v-b .overlay a.store { color: #121211; }
.v-b .topline { background: #012A1E; }
.v-b .island { background: rgba(1,46,33,.72); box-shadow: 0 0 0 1px rgba(247,244,237,.12), 0 18px 40px -20px rgba(0,0,0,.6); }
.v-b .nav a { color: #DCD5C0; } .v-b .nav a:hover { background: rgba(247,244,237,.08); color: #fff; }
.v-b .logo__word { background: linear-gradient(180deg, #F6D26B, #C99A2E); -webkit-background-clip: text; background-clip: text; }
.v-b .burger { background: var(--gold); } .v-b .burger i { background: var(--forest); }
.v-b .pill { background: rgba(247,244,237,.07); box-shadow: inset 0 0 0 1px rgba(247,244,237,.14); color: #EADFBF; }
.v-b .eyebrow { color: var(--gold-l); }
.v-b .btn--line { --fg: #F7F4ED; --ic: rgba(247,244,237,.1); box-shadow: inset 0 0 0 1px rgba(247,244,237,.3); }
.v-b .store { background: #F7F4ED; color: #121211; box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); }
.v-b .store svg path[fill="currentColor"] { fill: #121211; }
.v-b .sec__lead, .v-b .feat p, .v-b .appstep p { color: #CBC4AF; }

/* Hero: full-bleed photo under the green, fine grid, gold glow, slanted bottom like the old site */
.hb-hero { position: relative; isolation: isolate; text-align: center; padding: clamp(4rem, 9vw, 7rem) var(--gut) 0; margin-top: -4.6rem; padding-top: calc(clamp(2.5rem, 5vw, 4.5rem) + 4.6rem); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%); background: var(--green); }
.v-b .tnw-main > .hb-hero { margin-top: -4.6rem; }
.hb-hero__bg { position: absolute; inset: 0; z-index: -2; }
.hb-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.85); }
.hb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 62% 46% at 50% 36%, rgba(1,62,44,.82), rgba(1,62,44,.5) 60%, transparent 100%), linear-gradient(180deg, rgba(31,93,30,.38), rgba(1,62,44,.55) 55%, rgba(1,62,44,.97) 100%); }
.hb-hero__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(247,244,237,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(247,244,237,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 35%, #000 20%, transparent 70%); }
.hb-hero__copy { max-width: 62rem; margin: 0 auto; }
.hb-hero__title { font-size: clamp(2.6rem, 1rem + 6vw, 6.4rem); line-height: .96; letter-spacing: -.055em; margin-bottom: 1.4rem; }
.hb-hero__title em { font-weight: 400; display: inline-block; }
.hb-hero__lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem); color: #DCD5C0; max-width: 40rem; margin: 0 auto; }
.hb-hero__alt { margin: 1.2rem 0 0; font-weight: 600; color: #BFB8A2; } .hb-hero__alt a { color: #F7F4ED; }
.hb-hero .ph { margin-left: auto; margin-right: auto; }
.hb-hero__stage { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 8vw; }
.phone--hb { width: 17rem; max-width: 17rem; position: relative; z-index: 2; margin-bottom: -3rem; }
.hb-card { margin: 0 -2.5rem 3rem; width: clamp(14rem, 24vw, 22rem); position: relative; z-index: 1; }
.hb-card img { aspect-ratio: 4 / 3.2; }
.hb-card--l { transform: rotate(-5deg); } .hb-card--r { transform: rotate(5deg); }
.js .hb-card--l.rv { transform: rotate(-5deg) translateY(2rem); } .js .hb-card--l.rv.in { transform: rotate(-5deg); }
.js .hb-card--r.rv { transform: rotate(5deg) translateY(2rem); } .js .hb-card--r.rv.in { transform: rotate(5deg); }

/* Ticker */
.hb-ticker { overflow: hidden; padding: 1.6rem 0; border-bottom: 1px solid rgba(247,244,237,.08); }
.hb-ticker__track { display: flex; align-items: center; gap: 2rem; width: max-content; animation: ribbon 50s linear infinite; }
.hb-ticker span { font: 600 clamp(1.1rem, 1rem + .8vw, 1.6rem) var(--f-display); letter-spacing: -.03em; color: #F7F4ED; white-space: nowrap; }
.hb-ticker i { width: .55rem; height: .55rem; border-radius: 99px; background: var(--gold-l); flex: none; }
@media (prefers-reduced-motion: reduce) { .hb-ticker__track { animation: none; } }

/* Dark bento */
.hbento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(13rem, auto); gap: 1rem; }
.hbento__photo { margin: 0; position: relative; } .hbento__photo .bezel, .hbento__photo img { height: 100%; }
.hbento__photo--big { grid-column: span 2; grid-row: span 2; }
.hbento__photo figcaption { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; padding: 1rem 1.2rem; border-radius: 1.2rem; background: rgba(1,46,33,.86); color: #F7F4ED; font-weight: 600; }
.hbento__card { padding: 1.8rem; border-radius: var(--r); background: rgba(247,244,237,.05); box-shadow: inset 0 0 0 1px rgba(247,244,237,.1), inset 0 1px 1px rgba(255,255,255,.06); }
.hbento__card p { color: #CBC4AF; margin: 0; }
.hbento__card .feat__ic { background: rgba(226,176,66,.14); color: var(--gold-l); }
.hbento__card--gold { background: linear-gradient(160deg, #D7B672, #A8864A); color: #1D1D1B; }
.hbento__card--gold .eyebrow { color: #3D2C0C; } .hbento__card--gold p { color: #3D2F14; }
.hbento__card--gold .bento__big, .hbento__card--gold .pricetag span { color: var(--forest); }
.hbento__card--wide { grid-column: span 4; }
.v-b .probs li { background: rgba(247,244,237,.06); color: #F7F4ED; } .v-b .probs .ico { color: var(--gold-l); }
.hbento__card--wide .probs { margin: .8rem 0 1rem; }

/* Steps on a cream band between slants */
.hb-steps-sec { position: relative; max-width: none; background: var(--cream); color: var(--ink); clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%); padding-top: calc(clamp(5rem, 10vw, 9rem) + 4vw); padding-bottom: calc(clamp(5rem, 10vw, 9rem) + 6vw); }
.hb-steps-sec > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.hb-steps-sec h2 { color: var(--forest); } .hb-steps-sec em { color: var(--gold-t); }
.hb-steps-sec .pill { background: rgba(31,93,30,.07); color: var(--green); box-shadow: inset 0 0 0 1px rgba(31,93,30,.12); }
.hb-steps-sec .appstep h3 { color: var(--forest); } .hb-steps-sec .appstep p { color: var(--umber); } .hb-steps-sec .appstep__n { color: var(--gold-t); }
.hb-steps-sec .appstep__n { font: 700 2.4rem/1 var(--f-display); letter-spacing: -.05em; }

/* Split for the two audiences */
.hb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: var(--max); margin: clamp(4rem, 8vw, 7rem) auto 0; padding: 0 var(--gut); }
.hb-split__half { position: relative; display: flex; min-height: 34rem; border-radius: 2.4rem; overflow: hidden; text-decoration: none; isolation: isolate; }
.hb-split__img { position: absolute; inset: 0; z-index: -2; } .hb-split__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.hb-split__half:hover .hb-split__img img { transform: scale(1.05); }
.hb-split__half::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1,46,33,.1), rgba(1,46,33,.92) 70%); }
.hb-split__half--op::before { background: linear-gradient(180deg, rgba(31,93,30,.2), rgba(31,93,30,.95) 70%); }
.hb-split__body { margin-top: auto; padding: 2.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.hb-split__t { font: 700 clamp(1.8rem, 1rem + 2vw, 2.8rem)/1 var(--f-display); letter-spacing: -.045em; color: #F7F4ED; }
.hb-split__l { color: #DCD5C0; max-width: 28rem; }
.hb-terms { max-width: var(--max); margin: .8rem auto 0; padding: 0 var(--gut); }

/* Photo wall */
.hb-wall { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; gap: .8rem; margin-bottom: .8rem; }
.hb-wall__item { margin: 0; border-radius: 1.4rem; overflow: hidden; }
.hb-wall__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hb-wall__item:hover img { transform: scale(1.05); }
.hb-wall__item:nth-child(1) { grid-row: span 2; } .hb-wall__item:nth-child(4) { grid-column: span 2; } .hb-wall__item:nth-child(6) { grid-row: span 2; } .hb-wall__item:nth-child(8) { grid-column: span 2; }
.v-b .feed__item { box-shadow: none; }

/* Map section */
.hb-map-sec__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }
.v-b .dmap svg { background: rgba(247,244,237,.04); box-shadow: inset 0 0 0 1px rgba(247,244,237,.1); }
.v-b .dmap { color: #F7F4ED; }
.v-b .dmap__sea { fill: rgba(127,178,217,.08); }
.v-b .dmap__pt circle { fill: var(--gold-l); stroke: var(--forest); }
.v-b .dmap__pt text { fill: #F7F4ED; stroke: rgba(1,62,44,.9); }
.v-b .dmap__lbl { fill: var(--gold-l); } .v-b .dmap__lbl--sea { fill: #9CC3E0; }
.v-b .dmap figcaption { color: #A9A28C; }

/* FAQ and notes on dark */
.v-b .faqlist details { background: rgba(247,244,237,.05); box-shadow: inset 0 0 0 1px rgba(247,244,237,.1); }
.v-b .faqlist summary { color: #F7F4ED; } .v-b .faqlist details p { color: #CBC4AF; }
.v-b .faqlist summary i { background: rgba(226,176,66,.15); } .v-b .faqlist summary i::before, .v-b .faqlist summary i::after { background: var(--gold-l); }
.v-b .note__shell { background: rgba(247,244,237,.05); box-shadow: inset 0 0 0 1px rgba(247,244,237,.1); }
.v-b .note__body { background: #024331; } .v-b .note__title { color: #F7F4ED; } .v-b .note__ex { color: #CBC4AF; } .v-b .note__meta, .v-b .note__go { color: var(--gold-l); }
.v-b .finale__in { background: linear-gradient(160deg, #1F5D1E, #013E2C); box-shadow: inset 0 0 0 1px rgba(247,244,237,.12); }
.v-b .chip { background: rgba(247,244,237,.06); color: #F7F4ED; } .v-b .chip:hover { background: var(--gold); color: var(--forest); }

/* Inner pages: dark green head band with the slanted edge, cream reading area */
.v-b .tnw-main.page { background: var(--cream); color: var(--ink); }
.v-b .page .pagehead { max-width: none; background: var(--green); background-image: linear-gradient(180deg, #1F5D1E, #013E2C); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 4vw); margin-top: -4.6rem; padding-top: calc(clamp(2.5rem, 6vw, 5rem) + 4.6rem); }
.v-b .page .pagehead__wrap { max-width: var(--max); margin: 0 auto; }
.v-b .pagehead__lead { color: #DCD5C0; } .v-b .crumbs { color: #BFB8A2; } .v-b .crumbs a { color: var(--gold-l); }
.v-b .page .prose h2, .v-b .page .prose h3, .v-b .related h2 { color: var(--forest); }
.v-b .page .prose em { color: var(--gold-t); }
.v-b .page .prose a, .v-b .page .related a { color: var(--green); }
.v-b .page .related li a { color: var(--forest); }
.v-b .page .btn--line { --fg: var(--forest); --ic: rgba(31,93,30,.08); box-shadow: inset 0 0 0 1px rgba(31,93,30,.3); }
.v-b .page .store { background: #121211; color: #fff; } .v-b .page .store svg path[fill="currentColor"] { fill: #fff; }
.v-b .page .pagehead .store { background: #F7F4ED; color: #121211; } .v-b .page .pagehead .store svg path[fill="currentColor"] { fill: #121211; }
.v-b .page .chip { background: var(--paper); color: var(--forest); } .v-b .page .chip:hover { background: var(--forest); color: #fff; }
.v-b .page .faqlist details { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); } .v-b .page .faqlist summary { color: var(--forest); } .v-b .page .faqlist details p { color: var(--umber); }
.v-b .page .faqlist summary i { background: rgba(31,93,30,.07); } .v-b .page .faqlist summary i::before, .v-b .page .faqlist summary i::after { background: var(--forest); }
.v-b .page .note__body { background: var(--paper); } .v-b .page .note__title { color: var(--forest); } .v-b .page .note__ex { color: var(--umber); } .v-b .page .note__meta, .v-b .page .note__go { color: var(--gold-t); }
.v-b .page .note__shell { background: rgba(31,93,30,.06); box-shadow: inset 0 0 0 1px rgba(31,93,30,.12); }
.v-b .page .dmap svg { background: var(--paper); } .v-b .page .dmap__pt text { fill: var(--forest); stroke: rgba(255,255,255,.9); } .v-b .page .dmap__pt circle { fill: var(--forest); stroke: #fff; } .v-b .page .dmap__lbl { fill: var(--gold-t); } .v-b .page .dmap figcaption { color: var(--muted); }
.v-b .page .dmap__pt.is-on circle { fill: var(--pin); }
.v-b .page .tform label > span { color: var(--forest); }
.v-b .notfound { background: var(--forest); }
.v-b .notfound__line { color: #CBC4AF; }

@media (max-width: 64rem) {
  .hbento { grid-template-columns: 1fr 1fr; }
  .hbento__photo--big, .hbento__card--wide { grid-column: span 2; }
  .hb-split { grid-template-columns: 1fr; }
  .hb-map-sec__grid { grid-template-columns: 1fr; }
  .hb-wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 48rem) {
  .hb-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%); text-align: left; }
  .hb-hero__lead { margin: 0; } .hb-hero .stores--center { justify-content: flex-start; }
  .hb-hero__stage { padding-bottom: 14vw; }
  .hb-card { display: none; }
  .phone--hb { width: 14rem; margin-bottom: -2rem; }
  .hbento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .hbento__photo--big, .hbento__card--wide { grid-column: auto; grid-row: auto; }
  .hbento__photo img { aspect-ratio: 4 / 3; }
  .hbento__photo figcaption { position: static; margin-top: .6rem; background: none; padding: 0 .4rem; color: #CBC4AF; }
  .hb-split__half { min-height: 28rem; }
  .hb-wall { grid-auto-rows: 9rem; }
  .hb-wall__item:nth-child(4) { grid-column: auto; }
  .v-b .sec__head--center { text-align: left; }
}

/* Pop-up call-back form on the green option: the card stays cream, so its text keeps the light-page colours (23/10) */
.v-b .pop { --line: rgba(31,93,30,.12); }
.v-b .pop .pop__t { color: var(--forest); }
.v-b .pop .pop__t em, .v-b .pop .pop__kick { color: var(--gold-t); }
.v-b .pop a:not(.btn) { color: var(--green); }
.v-b .pop .pop__msg a { color: inherit; }