/* ==========================================================================
   Cwmbran 3G - Hwb visual layer
   Brings cwmbran3g.com into the Hwb Torfaen family (rogue-mud.com/hwb and
   the Hwb app): watercolour canvas, glass-pill navigation, Montserrat and
   Nunito Sans, ink navy with leaf-to-cerulean accents, photos framed clean.

   THIS FILE IS PRESENTATION ONLY. It is loaded after every other stylesheet
   and never changes markup, links, scripts, the booking link, analytics or
   the cookie bar's behaviour. It never sets `display` on anything the
   Unify scripts show or hide (menus, collapse, go-to-top), so the menus,
   hamburger and cookie consent work exactly as before. Remove the one
   <link> to this file and the site is back to its original look.
   ========================================================================== */

@import url("fonts.css");

:root {
  --ink: #12354e;
  --ink-deep: #0b2638;
  --ink-soft: #3d5a70;
  --green: #55a02c;
  --green-bright: #8dc63f;
  --green-deep: #3f7d1f;
  --blue: #1786c2;
  --blue-deep: #0e6da3;
  --teal: #64aaad;
  --red-3g: #b91e23;
  --paper: #fbfdf9;
  --line: #e2eae3;
  --grad: linear-gradient(90deg, var(--green-bright), var(--blue));
  --shadow-sm: 0 1px 3px rgba(18, 53, 78, 0.08), 0 4px 14px rgba(18, 53, 78, 0.06);
  --shadow-md: 0 2px 6px rgba(18, 53, 78, 0.08), 0 12px 32px rgba(18, 53, 78, 0.12);
  --shadow-lg: 0 6px 18px rgba(11, 38, 56, 0.14), 0 24px 60px rgba(11, 38, 56, 0.16);
  --radius: 20px;
  --radius-sm: 12px;
  --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Canvas and base type
   -------------------------------------------------------------------------- */

html { background: var(--paper); }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* one fixed watercolour wash behind every page (static: no animation, no
   blend modes - smooth scrolling on iPhone) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60vmax 42vmax at 4% -6%, rgba(141, 198, 63, 0.22), transparent 62%),
    radial-gradient(52vmax 36vmax at 96% 4%, rgba(23, 134, 194, 0.16), transparent 60%),
    radial-gradient(46vmax 40vmax at 100% 78%, rgba(100, 170, 173, 0.14), transparent 62%),
    radial-gradient(50vmax 40vmax at -6% 96%, rgba(141, 198, 63, 0.14), transparent 60%),
    var(--paper);
}
/* ghosted Hwb handprint + paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("img/hand-mark.png") right -4vmin bottom -6vmin / min(52vmin, 520px) auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.4;
}
@media (max-width: 700px) {
  body::after { background-size: 70vw auto, auto; opacity: 0.25; }
}

::selection { background: rgba(141, 198, 63, 0.35); color: var(--ink-deep); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-head);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

p, li, td, th { font-family: var(--font-body); }

.g-color-gray-dark-v4 { color: var(--ink-soft) !important; }
.g-color-black { color: var(--ink) !important; }
.g-color-welsh-padel { color: var(--ink) !important; }
.g-color-primary { color: var(--green-deep) !important; }
.g-line-height-1_8 { line-height: 1.8 !important; }
.lead { font-size: 1.2rem; font-weight: 400; color: var(--ink-soft); }

a { color: var(--blue-deep); transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
a:hover, a:focus { color: #0b5a86; }
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(23, 134, 194, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* in-text links: soft underline that fills on hover */
main article a:not(.btn),
main .lead a:not(.btn) {
  color: var(--blue-deep);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(rgba(23, 134, 194, 0.28), rgba(23, 134, 194, 0.28));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
}
main article a:not(.btn):hover,
main .lead a:not(.btn):hover {
  color: var(--ink-deep);
  background-image: linear-gradient(rgba(141, 198, 63, 0.4), rgba(141, 198, 63, 0.4));
  background-size: 100% 100%;
}

/* --------------------------------------------------------------------------
   Header: logo left, glass pill centre, mailing list right
   -------------------------------------------------------------------------- */

#js-header,
#js-header .u-header__section { background: transparent !important; box-shadow: none !important; border: 0 !important; }
#js-header .u-header__section { padding-top: 18px !important; padding-bottom: 10px !important; }

/* the logo: same link, same <img> and alt text - the tired banner PNG is
   swapped for a clean emblem lockup by the image-replacement technique */
#logo-header {
  box-sizing: border-box;
  display: block;
  width: 214px;
  height: 53px;
  padding-left: 214px;
  overflow: hidden;
  background: url("img/3g-lockup.png") left center / contain no-repeat;
  filter: drop-shadow(0 6px 14px rgba(18, 53, 78, 0.14));
}
#js-header .navbar-brand { padding: 4px 0; margin-right: 1.5rem; border-radius: 10px; }

@media (min-width: 992px) {
  #js-header .navbar > .container { flex-wrap: nowrap; }
  #nav-placeholder-upper {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }
  #navBar { flex-grow: 0 !important; margin: 0 !important; padding: 0 !important; }
  #navBar > .navbar-nav {
    position: relative;
    margin: 0 !important;
    padding: 0.38rem 0.5rem;
    border-radius: 999px;
    background:
      url("img/pill-wash.jpg") center / cover no-repeat,
      linear-gradient(100deg, #e5f1d8, #f1f6ef 45%, #dcecf6);
    background-blend-mode: multiply;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 2px 6px rgba(18, 53, 78, 0.06),
      0 14px 40px rgba(18, 53, 78, 0.13);
  }
  /* gradient ring */
  #navBar > .navbar-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(100deg, rgba(141, 198, 63, 0.7), rgba(100, 170, 173, 0.5), rgba(23, 134, 194, 0.65));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  #navBar > .navbar-nav > .nav-item { margin: 0 0.1rem !important; }
  #navBar > .navbar-nav > .nav-item > .nav-link {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--ink) !important;
    padding: 0.62rem 1.05rem !important;
    border-radius: 999px;
    white-space: nowrap;
  }
  #navBar > .navbar-nav > .nav-item > .nav-link:hover,
  #navBar > .navbar-nav > .nav-item.hs-sub-menu-opened > .nav-link {
    background: rgba(255, 255, 255, 0.75);
    color: var(--ink-deep) !important;
    box-shadow: 0 1px 4px rgba(18, 53, 78, 0.1);
  }
  #register { flex: 0 0 auto; }
}

/* dropdowns: glass cards (the Unify script still owns when they show) */
#js-header .hs-sub-menu {
  border: 0 !important;
  border-radius: 16px;
  padding: 0.5rem !important;
  background: #fff;
  box-shadow: 0 2px 6px rgba(18, 53, 78, 0.08), 0 18px 44px rgba(18, 53, 78, 0.18) !important;
  margin-top: 14px !important;
  min-width: 230px;
}
/* invisible bridge over the gap so the pointer never "falls out" of the menu */
#js-header .hs-sub-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 16px;
}
/* top accent stripe */
#js-header .hs-sub-menu::after {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--grad);
  pointer-events: none;
}
#js-header .hs-sub-menu .dropdown-item { padding: 0 !important; background: transparent !important; }
#js-header .hs-sub-menu .nav-link {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink) !important;
  padding: 0.62rem 0.95rem !important;
  border-radius: 10px;
}
#js-header .hs-sub-menu .nav-link:hover {
  background: #eef6e6;
  color: var(--green-deep) !important;
}

/* mailing list: the green Hwb pill button */
#js-header a[href="mailing_List.html"] {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.8rem 1.35rem !important;
  background: linear-gradient(180deg, #46891f 0%, #3f7d1f 50%, #33661a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(63, 125, 31, 0.32);
}
#js-header a[href="mailing_List.html"]:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 24px rgba(63, 125, 31, 0.42);
}

/* phones and tablets: the collapsed menu opens as a clean card */
@media (max-width: 991.98px) {
  #js-header .u-header__section { padding-top: 14px !important; }
  #js-header .navbar > .container { position: relative; }
  #logo-header { width: 186px; height: 46px; padding-left: 186px; }
  /* pinned to the logo row, so it stays put (and tappable) when the menu opens */
  #js-header .navbar-toggler {
    top: 4px !important;
    right: 15px !important;
    width: 46px;
    height: 46px;
    border-radius: 999px !important;
    background: linear-gradient(100deg, #e5f1d8, #f1f6ef 45%, #dcecf6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 18px rgba(18, 53, 78, 0.14);
  }
  #js-header .navbar-toggler .hamburger { padding: 0 !important; transform: scale(0.72); }
  #js-header .hamburger-inner,
  #js-header .hamburger-inner::before,
  #js-header .hamburger-inner::after { background-color: var(--ink) !important; }
  #nav-placeholder-upper { flex-basis: 100%; }
  #navBar > .navbar-nav {
    margin: 12px 0 6px !important;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
  }
  #navBar > .navbar-nav > .nav-item > .nav-link {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    color: var(--ink) !important;
    padding: 0.85rem 1rem !important;
    border-radius: 12px;
  }
  #navBar > .navbar-nav > .nav-item + .nav-item { border-top: 1px solid var(--line); }
  #js-header .hs-sub-menu {
    box-shadow: none !important;
    background: #f3f8ef;
    margin: 0 0.5rem 0.6rem !important;
    border-radius: 12px;
  }
  #js-header .hs-sub-menu::after { display: none; }
}

/* --------------------------------------------------------------------------
   Inner pages: centred intro, swoosh, then the photo framed clean below
   -------------------------------------------------------------------------- */

section.container.g-brd-around.g-py-15 {
  border: 0 !important;
  padding-top: clamp(2rem, 5vw, 3.6rem) !important;
  padding-bottom: clamp(1.4rem, 3vw, 2.2rem) !important;
  background: transparent;
}
section.container.g-brd-around.g-py-15 .text-center::before {
  content: "Cwmbran 3G \00B7  Woodland Road";
  display: block;
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 0.9rem;
}
section.container.g-brd-around.g-py-15 h1 {
  font-family: var(--font-head);
  font-weight: 800 !important;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  color: var(--ink) !important;
  margin-bottom: 0 !important;
}
section.container.g-brd-around.g-py-15 h1 strong { font-weight: 800; }
section.container.g-brd-around.g-py-15 h1::after {
  content: "";
  display: block;
  width: 76px;
  height: 5px;
  border-radius: 99px;
  background: var(--grad);
  margin: 1.1rem auto 1.2rem;
}
section.container.g-brd-around.g-py-15 p {
  font-size: 1.16rem;
  color: var(--ink-soft) !important;
  max-width: 44rem;
  margin: 0 auto;
}

/* the empty coloured strip under every page title becomes the framed photo */
section.container.u-ns-bg-v1-bottom {
  border: 0 !important;
  padding: 0 !important;
  height: clamp(150px, 19vw, 250px);
  border-radius: var(--radius);
  background-color: #cfe3c4 !important;
  background-image: url("img/site-panorama.jpg");
  background-image: image-set(url("img/site-panorama.webp") type("image/webp"), url("img/site-panorama.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
section.container.u-ns-bg-v1-bottom::before,
section.container.u-ns-bg-v1-bottom::after { display: none !important; }
/* thin white inner frame, like a mounted print */
section.container.u-ns-bg-v1-bottom {
  outline: 1px solid rgba(255, 255, 255, 0.6);
  outline-offset: -8px;
}
@media (max-width: 575.98px) {
  section.container.u-ns-bg-v1-bottom { width: calc(100% - 30px); border-radius: 16px; }
}

/* a photo for each page, chosen from what the page itself contains; the
   pitch, booking, lights, access and location pages get the full-height frame,
   the plain text pages (terms, legal, cookies, mailing list) keep the slim one */
body:has(a[href*="tinyurl.com"]) section.container.u-ns-bg-v1-bottom,
body:has(.col-lg-3 img[src$="pitch.png"]) section.container.u-ns-bg-v1-bottom,
body:has(.col-lg-9 ul.list-unstyled) section.container.u-ns-bg-v1-bottom,
body:has(#Installing) section.container.u-ns-bg-v1-bottom,
body:has(iframe[src*="google.com/maps"]) section.container.u-ns-bg-v1-bottom { height: clamp(190px, 30vw, 400px); }
body:has(a[href*="tinyurl.com"]) section.container.u-ns-bg-v1-bottom {
  background-image: url("img/pitch-aerial.jpg");
  background-image: image-set(url("img/pitch-aerial.webp") type("image/webp"), url("img/pitch-aerial.jpg") type("image/jpeg"));
  background-position: 50% 40%;
}
body:has(.col-lg-3 img[src$="pitch.png"]) section.container.u-ns-bg-v1-bottom {
  background-image: url("img/pitch-overhead.jpg");
  background-image: image-set(url("img/pitch-overhead.webp") type("image/webp"), url("img/pitch-overhead.jpg") type("image/jpeg"));
  background-position: 50% 62%;
}
body:has(.col-lg-9 ul.list-unstyled) section.container.u-ns-bg-v1-bottom,
body:has(#Installing) section.container.u-ns-bg-v1-bottom {
  background-image: url("img/pitch-wide.jpg");
  background-image: image-set(url("img/pitch-wide.webp") type("image/webp"), url("img/pitch-wide.jpg") type("image/jpeg"));
  background-position: 50% 55%;
}
body:has(iframe[src*="google.com/maps"]) section.container.u-ns-bg-v1-bottom {
  background-image: url("img/site-panorama.jpg");
  background-image: image-set(url("img/site-panorama.webp") type("image/webp"), url("img/site-panorama.jpg") type("image/jpeg"));
  background-position: 50% 50%;
}

/* --------------------------------------------------------------------------
   Inner pages: body copy in a white card, logo in a card beside it
   -------------------------------------------------------------------------- */

.container.g-pt-50 { padding-top: clamp(2rem, 5vw, 3.4rem) !important; padding-bottom: clamp(2.6rem, 6vw, 4.5rem) !important; }

.container.g-pt-50 > .row > .col-lg-9 > .g-pl-20--lg {
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 3rem) !important;
  border: 1px solid rgba(226, 234, 227, 0.8);
}
.container.g-pt-50 article { margin-bottom: 0 !important; }

.container.g-pt-50 > .row > .col-lg-3 { border: 0 !important; }
.container.g-pt-50 > .row > .col-lg-3 > .g-pr-20--lg {
  padding: 0 !important;
  position: sticky;
  top: 24px;
}
.container.g-pt-50 > .row > .col-lg-3 .g-mb-50 {
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(226, 234, 227, 0.8);
  padding: 1.6rem 1.4rem;
  margin-bottom: 1.5rem !important;
  text-align: center;
}
.container.g-pt-50 > .row > .col-lg-3 .g-mb-50 img { margin: 0 auto; }
/* the pitch page shows a photo in that card - give it the full card */
.container.g-pt-50 > .row > .col-lg-3 .g-mb-50:has(img[src$="pitch.png"]) { padding: 0.55rem; }
.container.g-pt-50 > .row > .col-lg-3 .g-mb-50 img[src$="pitch.png"] { border-radius: 14px; }
@media (max-width: 991.98px) {
  .container.g-pt-50 > .row > .col-lg-3 > .g-pr-20--lg { position: static; }
  .container.g-pt-50 > .row > .col-lg-3 .g-mb-50 { max-width: 230px; margin: 0.5rem auto 0 !important; padding: 1.1rem 1rem; }
}

/* section headings inside the card */
.container.g-pt-50 article h2,
.container.g-pt-50 article .h4 {
  font-family: var(--font-head);
  font-weight: 800 !important;
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  color: var(--ink) !important;
  margin-top: 2.2rem;
  margin-bottom: 0.9rem !important;
  padding-top: 0;
  scroll-margin-top: 24px;
}
.container.g-pt-50 article h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--grad);
  margin-bottom: 0.75rem;
}
.container.g-pt-50 article > h2:first-child,
.container.g-pt-50 article h2:first-of-type { margin-top: 0; }
.container.g-pt-50 article p { font-size: 1.06rem; color: var(--ink-soft) !important; }
.container.g-pt-50 article p strong { color: var(--ink); }

/* arrow lists become green tick-dots */
main .list-unstyled > li.d-flex { align-items: flex-start; }
main .list-unstyled > li > i.icon-arrow-right-circle {
  flex: 0 0 auto;
  font-size: 0 !important;
  width: 22px;
  height: 22px;
  margin-top: 0.22rem !important;
  margin-right: 0.8rem !important;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat,
    linear-gradient(135deg, var(--green-bright), var(--green-deep));
  box-shadow: 0 3px 8px rgba(63, 125, 31, 0.28);
}
main .list-unstyled > li > i.icon-arrow-right-circle::before { content: none !important; }

/* screenshots and photos inside the copy: framed like phone captures */
.container.g-pt-50 article img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 6px solid #fff;
  margin: 0.4rem auto 0.6rem;
}
.container.g-pt-50 article img[src$="mailinglist.png"] {
  border-radius: 12px;
  border-width: 0;
  box-shadow: none;
  padding: 0.7rem 1rem;
  background: #fff;
  outline: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* tables */
.container.g-pt-50 .table-responsive { border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.container.g-pt-50 table.table { margin: 0; background: #fff; }
.container.g-pt-50 table.table,
.container.g-pt-50 table.table th,
.container.g-pt-50 table.table td { border-color: var(--line) !important; }
.container.g-pt-50 table.table thead th {
  background: #eef6e6;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ink) !important;
  border-bottom: 0 !important;
  padding: 0.95rem 1.1rem;
}
.container.g-pt-50 table.table td { padding: 1.1rem; font-size: 1rem; color: var(--ink-soft) !important; }
.container.g-pt-50 table.table td img { border-width: 4px; margin: 0; }

/* the map */
main iframe[src*="google.com/maps"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 6px solid #fff !important;
  background: #e8efe6;
  margin: 0.4rem 0 0.2rem;
}
@media (min-width: 768px) { main iframe[src*="google.com/maps"] { aspect-ratio: 16 / 9; } }

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */

main > section.g-py-100 { padding-top: clamp(2.2rem, 6vw, 4.4rem) !important; padding-bottom: clamp(3rem, 7vw, 5rem) !important; }
main > section.g-py-100 > .container > header { width: 100% !important; max-width: 820px; margin-bottom: clamp(2.4rem, 5vw, 3.6rem) !important; }
main > section.g-py-100 > .container > header::before {
  content: "Floodlit 3G \00B7  Croesyceiliog, Cwmbran";
  display: block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 1rem;
}
main > section.g-py-100 .u-heading-v2-3--bottom { border: 0 !important; margin-bottom: 1.2rem !important; }
main > section.g-py-100 .u-heading-v2-3--bottom::before,
main > section.g-py-100 .u-heading-v2-3--bottom::after { display: none !important; }
main > section.g-py-100 .u-heading-v2__title {
  font-family: var(--font-head);
  font-weight: 800 !important;
  font-size: clamp(2.3rem, 6vw, 3.9rem) !important;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: none !important;
  color: var(--ink) !important;
}
main > section.g-py-100 .u-heading-v2__title::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  border-radius: 99px;
  background: var(--grad);
  margin: 1.3rem auto 0;
}
main > section.g-py-100 header .lead { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--ink-soft); margin-bottom: 0.6rem; }
/* social links: two soft pills */
main > section.g-py-100 header .lead a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0.2rem;
  padding: 0.5rem 1.1rem 0.5rem 0.95rem;
  border-radius: 999px;
  background: #fff !important;
  background-image: none !important;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink) !important;
  text-decoration: none;
}
main > section.g-py-100 header .lead a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--green-deep) !important;
}
main > section.g-py-100 header .lead a .fa { font-size: 1.05em; color: var(--blue-deep); }

/* the big framed aerial photo under the welcome */
main > section.g-py-100 > .container > header::after {
  content: "";
  display: block;
  width: min(1110px, calc(100vw - 30px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 21 / 9;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  border-radius: 24px;
  background-color: #cfe3c4;
  background-image: url("img/pitch-aerial.jpg");
  background-image: image-set(url("img/pitch-aerial.webp") type("image/webp"), url("img/pitch-aerial.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 42%;
  box-shadow: var(--shadow-lg);
  outline: 1px solid rgba(255, 255, 255, 0.6);
  outline-offset: -8px;
}
@media (max-width: 575.98px) {
  main > section.g-py-100 > .container > header::after { aspect-ratio: 4 / 3; border-radius: 18px; }
}

/* features: the pitch photo and the key features side by side in one card */
main > section.g-py-100 > .container > .row {
  margin: 0;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(226, 234, 227, 0.8);
  padding: clamp(0.9rem, 2.4vw, 1.6rem);
  align-items: center;
}
main > section.g-py-100 > .container > .row > .col-lg-5 { padding: 0 !important; }
main > section.g-py-100 > .container > .row > .col-lg-5 img {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
main > section.g-py-100 > .container > .row > .col-lg-6 {
  padding: clamp(1.4rem, 3vw, 2rem) clamp(0.4rem, 2.6vw, 2.4rem) clamp(0.6rem, 2vw, 1.2rem) !important;
  margin-bottom: 0 !important;
  flex-grow: 1;
  max-width: none;
}
main > section.g-py-100 > .container > .row > .col-lg-6 > p {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--ink);
  margin-bottom: 1.3rem !important;
}
main > section.g-py-100 > .container > .row > .col-lg-6 > p::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--grad);
  margin-bottom: 0.75rem;
}
main > section.g-py-100 .list-unstyled { margin-bottom: 0 !important; }
main > section.g-py-100 .list-unstyled > li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink) !important;
  line-height: 1.45;
  background: #f5faf1;
  border: 1px solid #e3eedb;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.7rem !important;
}
main > section.g-py-100 .list-unstyled > li br { display: none; }
main > section.g-py-100 .list-unstyled > li > i.icon-arrow-right-circle { margin-top: 0 !important; }
@media (min-width: 992px) {
  main > section.g-py-100 > .container > .row > .col-lg-5 { flex: 0 0 44%; max-width: 44%; }
}

/* --------------------------------------------------------------------------
   Footer: deep navy, gradient edge
   -------------------------------------------------------------------------- */

#footer footer.g-bg-gray-dark-v1 {
  background: var(--ink-deep) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--font-body);
}
#footer footer.g-bg-gray-dark-v1:first-of-type {
  margin-top: clamp(1rem, 4vw, 2.5rem);
  padding-top: 1.9rem !important;
  background:
    radial-gradient(60% 140% at 100% 0%, rgba(23, 134, 194, 0.22), transparent 60%),
    var(--ink-deep) !important;
  position: relative;
}
#footer footer.g-bg-gray-dark-v1:first-of-type::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--grad);
}
#footer footer.g-bg-gray-dark-v1 + footer.g-bg-gray-dark-v1 {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.3rem !important;
  padding-bottom: 1.2rem !important;
}
#footer footer small { font-size: 0.85rem !important; line-height: 1.6; }
#footer footer a { color: rgba(255, 255, 255, 0.86) !important; text-decoration: none; }
#footer footer a:hover { color: var(--green-bright) !important; }
#footer .u-list-inline a,
#footer .u-list-inline span { font-family: var(--font-head); font-weight: 600; font-size: 0.88rem !important; }
#footer .u-list-inline span { color: rgba(255, 255, 255, 0.28); }
#footer footer .list-inline-item a .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 1rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#footer footer .list-inline-item a:hover .fa {
  background: rgba(141, 198, 63, 0.18);
  border-color: rgba(141, 198, 63, 0.5);
  transform: translateY(-2px);
}
#footer footer .list-inline-item.g-mx-10 { vertical-align: middle; }
#footer footer .list-inline-item small.g-font-size-default {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.74rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-bright);
}

/* the "Page update" line joins the footer instead of floating under it */
#footer + p {
  margin: 0;
  background: var(--ink-deep);
  text-align: center;
  padding: 0.2rem 1rem 1.3rem;
}
#footer + p small { color: rgba(255, 255, 255, 0.42) !important; font-size: 0.78rem !important; margin: 0 !important; }

/* --------------------------------------------------------------------------
   Back-to-top button
   -------------------------------------------------------------------------- */

.u-go-to-v1 {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #46891f, #33661a) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 22px rgba(18, 53, 78, 0.28);
}
.u-go-to-v1 i { color: #fff !important; }
.u-go-to-v1:hover { background: linear-gradient(180deg, #4d9622, #3a731c) !important; }

/* --------------------------------------------------------------------------
   Cookie consent bar (styling only - its buttons and logic are untouched)
   -------------------------------------------------------------------------- */

#cookie-bar {
  font-family: var(--font-body) !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 10px 40px rgba(11, 38, 56, 0.22) !important;
}
#cookie-bar p { color: var(--ink) !important; font-family: var(--font-body) !important; }
#cookie-bar a { font-family: var(--font-head) !important; font-weight: 700 !important; }
#cookie-bar #cookie-bar-prompt-button,
#cookie-bar #cookie-bar-main-privacy-link { color: var(--blue-deep) !important; }
#cookie-bar #cookie-bar-button,
#cookie-bar #cookie-bar-button-no {
  border-radius: 999px !important;
  padding: 0.62rem 1.3rem !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#cookie-bar #cookie-bar-button {
  background: linear-gradient(180deg, #46891f, #33661a) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(63, 125, 31, 0.3) !important;
}
#cookie-bar #cookie-bar-button-no {
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
}

/* the "Details" panel */
#cookie-bar-prompt { background: rgba(11, 38, 56, 0.55) !important; }
#cookie-bar-prompt-content {
  background: #fff !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(11, 38, 56, 0.35) !important;
  font-family: var(--font-body) !important;
  line-height: 1.65 !important;
}
#cookie-bar-prompt-content p,
#cookie-bar-prompt-content i,
#cookie-bar-prompt-content label { color: var(--ink-soft) !important; font-family: var(--font-body) !important; }
#cookie-bar-prompt-content a:not(#cookie-bar-prompt-logo) { color: var(--blue-deep) !important; font-weight: 700; }
#cookie-bar-prompt-content #cookiebar-save-customized {
  border: 0; border-radius: 999px; padding: 0.55rem 1.2rem;
  background: var(--green-deep); color: #fff; font-family: var(--font-head); font-weight: 700;
}
#cookie-bar-prompt-logo { filter: brightness(0.35) saturate(0.6); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}