/*
Theme Name: The Armory
Theme URI: https://thearmoryng.com
Author: Haareke Ltd
Author URI: https://haareke.com
Description: A premium single-page WordPress theme for The Armory Shooting Sports Club, Abuja — Shoot, Train, Shop, Belong. An initiative of DICON Gray Insignia Limited.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-armory
*/


/* =====================================================================
   THE ARMORY — brand tokens
   ===================================================================== */
:root{
  --navy:    #192838;
  --forest:  #3b594b;
  --olive:   #5d624b;
  --brass:   #ae9251;
  --red:     #e12222;

  --paper:     #F2F1EC;
  --paper-dim: #E7E6DD;
  --off-white: #F8F7F3;
  --ink:       #192838;
  --ink-dim:   #52595C;
  --line:      rgba(25,40,56,0.13);

  --display: 'Playfair Display', 'Georgia', serif;
  --sans:    'Jost', -apple-system, Helvetica, Arial, sans-serif;
  --wrap: 1240px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0; color:var(--ink); letter-spacing:-0.01em; }
p{ margin:0; }
::selection{ background:var(--brass); color:var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }

/* ============ BUTTONS ============ */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding:15px 30px; border:1px solid transparent; white-space:nowrap; }
.btn-red{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-red:hover{ background:#c31c1c; border-color:#c31c1c; }
.btn-brass{ background:var(--brass); color:var(--navy); border-color:var(--brass); }
.btn-brass:hover{ background:#c1a86c; }
.btn-line-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.55); }
.btn-line-light:hover{ border-color:var(--brass); color:var(--brass); }
.btn-line-dark{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-line-dark:hover{ border-color:var(--navy); }
.btn-sm{ padding:10px 20px; font-size:12.5px; }

/* ============ HEADER ============ */
header.site-header{ position:sticky; top:0; z-index:100; background:var(--navy); border-bottom:1px solid rgba(255,255,255,0.08); }
.header-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:24px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo img{ height:52px; width:auto; filter:brightness(0) invert(1); }
nav.main-nav ul{ list-style:none; display:flex; gap:4px; margin:0; padding:0; }
nav.main-nav a.nav-link{ background:none; border:none; color:#fff; opacity:0.75; font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; padding:10px 12px; border-bottom:2px solid transparent; display:inline-block; }
nav.main-nav a.nav-link:hover{ opacity:1; }
nav.main-nav a.nav-link[aria-current="page"]{ opacity:1; border-bottom-color:var(--brass); color:var(--brass); }
.header-actions .btn-label{ display:inline; }
.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; width:32px; height:24px; position:relative; flex:none; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; position:absolute; left:0; right:0; height:2px; background:#fff; }
.nav-toggle span{ top:11px; } .nav-toggle span::before{ top:-8px; } .nav-toggle span::after{ top:8px; }

/* ============ HERO SLIDER ============ */
.hero{ position:relative; height:92vh; min-height:620px; overflow:hidden; color:#fff; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; background-size:cover; background-position:center; }
.hero-slide.active{ opacity:1; }
.hero-slide::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,40,56,0.55) 0%, rgba(20,15,10,0.35) 45%, rgba(15,12,10,0.82) 100%); }
.hero-content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:110px; }
.hero-kicker{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:13.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); margin-bottom:22px; }
.hero-kicker .dot{ width:7px; height:7px; background:var(--red); border-radius:50%; }
.hero h1{ color:#fff; font-size:clamp(38px,6vw,76px); line-height:1.06; max-width:16ch; margin-bottom:22px; font-weight:700; letter-spacing:-0.015em; }
.hero p.lede{ font-size:18px; color:rgba(255,255,255,0.85); max-width:50ch; margin-bottom:36px; font-family:var(--sans); text-transform:none; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-dots{ position:absolute; z-index:4; bottom:34px; right:40px; display:flex; gap:10px; }
.hero-dots button{ width:34px; height:3px; background:rgba(255,255,255,0.35); border:none; padding:0; }
.hero-dots button.active{ background:var(--brass); }
.hero-arrows{ position:absolute; z-index:4; right:40px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; }
.hero-arrows button{ width:44px; height:44px; border:1px solid rgba(255,255,255,0.4); background:rgba(25,40,56,0.35); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; }
.hero-arrows button:hover{ border-color:var(--brass); color:var(--brass); }

/* ============ FEATURE STRIP ============ */
.feature-strip{ background:var(--off-white); border-bottom:1px solid var(--line); }
.feature-strip .wrap{ display:grid; grid-template-columns:repeat(3,1fr); }
.feature-item{ display:flex; gap:18px; align-items:flex-start; padding:34px 28px; border-right:1px solid var(--line); }
.feature-item:last-child{ border-right:none; }
.feature-item svg{ flex:none; width:34px; height:34px; color:var(--brass); }
.feature-item h4{ font-size:16px; margin-bottom:6px; }
.feature-item p{ font-size:13.5px; color:var(--ink-dim); text-transform:none; font-family:var(--sans); }

/* ============ SECTIONS ============ */
section{ padding:104px 0; scroll-margin-top:84px; }
.eyebrow{ font-family:var(--sans); font-size:13.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--red); margin:0 0 16px; }
.section-head{ max-width:620px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(28px,3.6vw,44px); line-height:1.15; font-weight:700; }
.section-head p{ margin-top:18px; font-size:16.5px; color:var(--ink-dim); text-transform:none; font-family:var(--sans); max-width:56ch; }

/* ============ INTRO SPLIT ============ */
.intro{ background:var(--paper); }
.intro .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
.intro-media{ position:relative; }
.intro-media img{ width:100%; height:520px; object-fit:cover; }
.intro-media .badge{ position:absolute; bottom:-1px; left:-1px; background:var(--red); color:#fff; padding:24px 28px; max-width:210px; }
.intro-media .badge .big{ font-family:var(--display); font-size:38px; line-height:1; display:block; }
.intro-media .badge .lbl{ font-size:12.5px; margin-top:6px; display:block; text-transform:none; font-family:var(--sans); }
.intro-copy p{ font-size:17px; color:var(--ink-dim); max-width:52ch; margin-bottom:18px; text-transform:none; font-family:var(--sans); }
.intro-values{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin:32px 0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.intro-values div{ padding:20px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.intro-values h5{ font-family:var(--sans); font-size:14.5px; letter-spacing:0.04em; text-transform:uppercase; margin:0 0 6px; color:var(--forest); }
.intro-values p{ font-size:13.5px; margin:0; }

/* ============ SAFETY BAND ============ */
.safety-band{ background:var(--navy); color:#fff; }
.safety-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:36px; flex-wrap:wrap; padding:56px 32px; }
.safety-band h2{ color:#fff; font-size:clamp(24px,3vw,36px); max-width:19ch; font-weight:700; }
.safety-band p{ color:rgba(255,255,255,0.75); margin-top:10px; max-width:46ch; text-transform:none; font-family:var(--sans); }

/* ============ EXPERIENCE PHOTO CARDS ============ */
.experience{ background:var(--off-white); }
.exp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); }
.exp-card{ position:relative; height:440px; overflow:hidden; }
.exp-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.exp-card:hover img{ transform:scale(1.06); }
.exp-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,40,56,0.05) 30%, rgba(15,12,10,0.88) 100%); }
.exp-card-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 24px; color:#fff; }
.exp-card .mark{ font-family:var(--sans); font-size:12.5px; letter-spacing:0.12em; color:var(--brass); display:block; margin-bottom:10px; }
.exp-card h3{ color:#fff; font-size:21px; margin-bottom:8px; }
.exp-card p{ font-size:13px; color:rgba(255,255,255,0.78); text-transform:none; font-family:var(--sans); margin-bottom:14px; }
.exp-card .go{ font-family:var(--sans); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:#fff; border-bottom:1px solid var(--brass); padding-bottom:3px; }

/* ============ TRAINING 3-UP ============ */
.training{ background:var(--paper); }
.train-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.train-card{ background:var(--off-white); }
.train-card img{ width:100%; height:200px; object-fit:cover; }
.train-card-body{ padding:26px 24px 30px; }
.train-card .num{ font-family:var(--sans); color:var(--brass); font-size:13px; letter-spacing:0.06em; display:block; margin-bottom:10px; }
.train-card h4{ font-size:18px; margin-bottom:10px; }
.train-card p{ font-size:14px; color:var(--ink-dim); text-transform:none; font-family:var(--sans); }

/* ============ GALLERY ============ */
.gallery{ background:var(--off-white); }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:4px; }
.gal-item{ position:relative; overflow:hidden; cursor:pointer; }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gal-item:hover img{ transform:scale(1.08); }
.gal-item.tall{ grid-row:span 2; }
.gal-item::after{ content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; background:rgba(25,40,56,0); transition:background .2s; font-family:var(--sans); opacity:0; }
.gal-item:hover::after{ background:rgba(25,40,56,0.45); opacity:1; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(10,10,10,0.92); z-index:1000; display:none; align-items:center; justify-content:center; padding:40px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:85vh; }
.lightbox-close{ position:absolute; top:24px; right:32px; background:none; border:none; color:#fff; font-size:34px; }

/* ============ MEMBERSHIP / CTA STRIP ============ */
.strip-cta{ background:var(--forest); color:#fff; }
.strip-cta .wrap{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; padding:64px 32px; }
.strip-cta h2{ color:#fff; font-size:clamp(26px,3.4vw,38px); max-width:18ch; font-weight:700; }
.strip-cta p{ color:rgba(255,255,255,0.8); margin-top:10px; text-transform:none; font-family:var(--sans); max-width:44ch; }

/* ============ FOOTER / NEWSLETTER (image band) ============ */
footer{ position:relative; color:#fff; background:#0f1620; scroll-margin-top:84px; }
.footer-media{ position:absolute; inset:0; background-size:cover; background-position:center 30%; }
.footer-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,18,22,0.88) 0%, rgba(15,18,22,0.94) 60%, var(--navy) 100%); }
.footer-inner{ position:relative; z-index:2; }
.newsletter{ padding:90px 0 70px; border-bottom:1px solid rgba(255,255,255,0.12); }
.newsletter .wrap{ display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.newsletter h2{ color:#fff; font-size:clamp(24px,3vw,34px); max-width:16ch; font-weight:700; }
.newsletter-form{ display:flex; gap:0; min-width:360px; border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:12px; flex:1; max-width:440px; }
.newsletter-form input{ background:none; border:none; color:#fff; font-family:var(--sans); font-size:15px; flex:1; outline:none; }
.newsletter-form input::placeholder{ color:rgba(255,255,255,0.5); }
.newsletter-form button{ background:none; border:none; color:var(--brass); font-family:var(--sans); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; }
.newsletter-msg{ font-size:13px; color:var(--brass); margin-top:10px; display:none; }
.newsletter-msg.show{ display:block; }

.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding:64px 0 50px; }
.footer-grid img.f-logo{ height:56px; width:auto; filter:brightness(0) invert(1); margin-bottom:18px; }
.footer-grid p{ font-size:14px; color:rgba(255,255,255,0.65); line-height:1.9; text-transform:none; font-family:var(--sans); }
.footer-grid h5{ font-family:var(--sans); color:var(--brass); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 18px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:11px; }
.footer-grid a{ font-size:14px; color:rgba(255,255,255,0.8); text-transform:none; font-family:var(--sans); }
.footer-grid a:hover{ color:var(--brass); }
.footer-grid button.link-btn{ background:none; border:none; padding:0; color:rgba(255,255,255,0.8); font-size:14px; font-family:var(--sans); text-align:left; }
.footer-grid button.link-btn:hover{ color:var(--brass); }
.footer-tag{ text-align:center; padding:26px 0 12px; font-family:var(--sans); font-weight:600; letter-spacing:0.1em; color:var(--brass); font-size:13.5px; text-transform:uppercase; border-top:1px solid rgba(255,255,255,0.12); }
.footer-bottom{ text-align:center; padding:0 0 30px; font-size:12.5px; color:rgba(255,255,255,0.45); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1020px){
  nav.main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .feature-strip .wrap{ grid-template-columns:1fr; }
  .feature-item{ border-right:none; border-bottom:1px solid var(--line); }
  .intro .wrap{ grid-template-columns:1fr; gap:40px; }
  .intro-media img{ height:360px; }
  .exp-grid{ grid-template-columns:repeat(2,1fr); }
  .train-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  section{ padding:70px 0; }
  .exp-grid{ grid-template-columns:1fr; }
  .exp-card{ height:320px; }
  .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:140px; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-arrows{ display:none; }
  .newsletter .wrap{ flex-direction:column; align-items:flex-start; }
  .newsletter-form{ min-width:0; width:100%; }
}

/* =====================================================================
   INTERIOR PAGE COMPONENTS
   (Shoot / Train / Shop / Membership / Institutional / Safety / Contact)
   ===================================================================== */

/* ---- Page banner (small hero for interior pages) ---- */
.page-hero{ position:relative; min-height:320px; display:flex; align-items:flex-end; color:#fff; background-size:cover; background-position:center; overflow:hidden; }
.page-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,40,56,0.30) 0%, rgba(15,12,10,0.85) 100%); }
.page-hero .wrap{ position:relative; z-index:2; padding-top:150px; padding-bottom:52px; }
.page-hero .eyebrow{ color:var(--brass); }
.page-hero h1{ color:#fff; font-size:clamp(32px,4.6vw,56px); font-weight:700; max-width:18ch; letter-spacing:-0.015em; }
.page-hero p.lede{ color:rgba(255,255,255,0.82); margin-top:16px; max-width:56ch; font-family:var(--sans); font-size:16.5px; text-transform:none; }
.page-hero.solid{ background:var(--navy); min-height:260px; }
.page-hero.solid::after{ display:none; }

/* ---- Breadcrumb-ish back link ---- */
.back-link{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--forest); margin-bottom:28px; }
.back-link:hover{ color:var(--brass); }

/* ---- Accordion (Safety principles) ---- */
/* ---- Dark/forest section utilities (background + text color pairing) ---- */
.on-dark{ background:var(--navy); color:#fff; }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff; }
.on-dark .section-head p{ color:rgba(255,255,255,0.75); }
.on-dark .section-head .eyebrow, .on-forest .section-head .eyebrow{ color:var(--brass); }
.on-forest{ background:var(--forest); color:#fff; }
.on-forest h1,.on-forest h2,.on-forest h3,.on-forest h4{ color:#fff; }
.on-forest .section-head p{ color:rgba(255,255,255,0.8); }

.acc{ max-width:760px; border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{ list-style:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--display); font-weight:600; font-size:18px; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .plus{ font-family:var(--sans); font-size:24px; color:var(--brass); transition:transform .2s; flex:none; }
.acc details[open] summary .plus{ transform:rotate(45deg); }
.acc .acc-body{ padding:0 4px 22px; color:var(--ink-dim); font-size:15px; max-width:64ch; font-family:var(--sans); }
.on-dark .acc summary{ color:#fff; }
.on-dark .acc{ border-top-color:rgba(255,255,255,0.14); }
.on-dark .acc details{ border-bottom-color:rgba(255,255,255,0.14); }
.on-dark .acc .acc-body{ color:rgba(255,255,255,0.75); }

/* ---- Steps row (Range Access) ---- */
.steps-row{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:8px; }
.step-box{ flex:1 1 160px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 20px; background:var(--off-white); }
.step-box .n{ font-family:var(--display); color:var(--brass); font-weight:600; font-size:14px; display:block; margin-bottom:10px; }
.step-box p{ font-size:14.5px; font-family:var(--sans); margin:0; }

/* ---- Enquiry form (Institutional / Contact) ---- */
form.enquiry{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; }
form.enquiry .full{ grid-column:1/-1; }
form.enquiry label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-dim); margin-bottom:8px; font-family:var(--sans); text-transform:uppercase; letter-spacing:0.05em; }
form.enquiry input, form.enquiry select, form.enquiry textarea{ width:100%; border:1px solid var(--line); background:var(--off-white); padding:13px 14px; font-family:var(--sans); font-size:14.5px; color:var(--ink); }
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus{ border-color:var(--brass); outline:none; }
form.enquiry textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:13px; color:var(--ink-dim); margin-top:14px; font-family:var(--sans); max-width:60ch; }

/* ---- Simple info table (hours, visit info) ---- */
.info-table{ width:100%; border-collapse:collapse; margin-top:10px; max-width:640px; }
.info-table td{ padding:13px 0; border-bottom:1px solid var(--line); font-size:14.5px; font-family:var(--sans); }
.info-table td:first-child{ font-weight:600; width:45%; color:var(--ink); }

/* ---- Category table (Shop) ---- */
.cat-table{ width:100%; border-collapse:collapse; margin-top:14px; }
.cat-table th{ text-align:left; background:var(--navy); color:#fff; padding:14px 18px; font-family:var(--sans); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; }
.cat-table td{ padding:16px 18px; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:14.5px; background:var(--off-white); }
.cat-table tr:nth-child(even) td{ background:var(--paper-dim); }
.cat-table td:first-child{ font-family:var(--display); font-weight:600; color:var(--brass); white-space:nowrap; }

/* ---- Membership cards (static, no JS tabs needed — one page per plan) ---- */
.member-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.member-card{ background:var(--off-white); padding:36px 30px; display:flex; flex-direction:column; }
.member-card h3{ font-size:23px; margin-bottom:12px; }
.member-card p.desc{ font-size:14.5px; color:var(--ink-dim); margin-bottom:20px; font-family:var(--sans); text-transform:none; }
.member-card ul{ list-style:none; margin:0 0 24px; padding:0; flex:1; }
.member-card ul li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; font-family:var(--sans); display:flex; gap:8px; }
.member-card ul li::before{ content:'—'; color:var(--brass); font-weight:600; }
.member-card .fee{ font-family:var(--sans); font-size:12.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:18px; }
.member-card .fee b{ font-family:var(--display); color:var(--forest); font-size:15px; text-transform:none; letter-spacing:0; }

/* ---- Two-column content layout (used on several interior pages) ---- */
.split-content{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start; }
.split-content .side-card{ background:var(--paper-dim); border:1px solid var(--line); padding:28px; }
.split-content .side-card h4{ font-size:16px; margin-bottom:10px; }
.split-content .side-card p{ font-size:14px; color:var(--ink-dim); font-family:var(--sans); text-transform:none; margin-bottom:16px; }

@media (max-width: 1020px){
  .member-grid{ grid-template-columns:1fr; }
  .split-content{ grid-template-columns:1fr; gap:36px; }
  form.enquiry{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .page-hero .wrap{ padding-top:110px; }
  .steps-row{ flex-direction:column; }
}

/* ---- Generic tile grid (Values, Services, Categories — text-only cards) ---- */
.tile-grid{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); }
.tile-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.tile-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.tile-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.tile{ background:var(--off-white); padding:30px 26px; }
.tile .num{ font-family:var(--display); font-weight:600; color:var(--brass); font-size:14px; display:block; margin-bottom:14px; }
.tile h4{ font-size:19px; margin-bottom:10px; }
.tile p{ font-size:14.5px; color:var(--ink-dim); font-family:var(--sans); text-transform:none; margin:0; }
.tile ul{ margin:14px 0 0; padding-left:18px; font-size:14px; color:var(--ink-dim); font-family:var(--sans); }
.tile ul li{ margin-bottom:6px; }
.on-dark .tile{ background:var(--navy); }
.on-dark .tile h4{ color:#fff; }
.on-dark .tile p, .on-dark .tile ul{ color:rgba(255,255,255,0.78); }
.on-forest .tile{ background:var(--forest); }
.on-forest .tile h4{ color:#fff; }
.on-forest .tile p, .on-forest .tile ul{ color:rgba(255,255,255,0.8); }

@media (max-width: 1020px){
  .tile-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .tile-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .tile-grid.cols-4, .tile-grid.cols-3, .tile-grid.cols-2{ grid-template-columns:1fr; }
}