/* =========================================================================
   Lucky Petroleum, Faisalabad. Stylesheet.
   An authorised GO retail outlet at Satiyana Jaranwala, Link Lower Canal Road,
   Faisalabad.

   Brand: deep GO green, signal red, warm gold droplet.
   Type:  Barlow Condensed (display), Source Sans 3 (body),
          Noto Nastaliq Urdu (Urdu), IBM Plex Mono (numerals and labels).

   Design language
   ---------------
   One shape runs through the whole site: a hard rectangle with a single
   swept corner, read from the forecourt canopy and the pump signage. It
   appears on every button, chip, icon button and card accent. One accent
   device runs through the type: a short red to gold rule under every major
   heading, read from the price board. Nothing else is decorative.
   ========================================================================= */

:root{
  /* brand */
  --green:        #0E6B3C;
  --green-deep:   #0A4A29;
  --green-dark:   #07301B;
  --green-bright: #168A4E;
  --green-soft:   #E6F2EB;
  --red:          #CB2027;
  --red-deep:     #9A141A;
  --red-bright:   #E63A40;
  --red-soft:     #FCE8E9;
  --gold:         #BE8A1C;
  --gold-bright:  #F0A82C;
  --gold-soft:    #FBF1DC;

  /* neutrals */
  --ink:          #131F1A;
  --ink-2:        #48584F;
  --ink-3:        #78877F;
  --ground:       #F5F7F3;
  --surface:      #FFFFFF;
  --surface-2:    #ECF1EA;
  --rule:         #DBE3DA;
  --rule-strong:  #C2CFC4;

  /* the price board */
  --board-bg:     #08200F;
  --board-ink:    #E9F2EC;
  --board-dim:    #8AA898;
  --board-led:    #F4B63A;

  /* the one shape */
  --sweep:        14px;

  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting","Noto Naskh Arabic",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --wrap: 1200px;
  --shadow-sm: 0 1px 2px rgba(9,26,18,.05), 0 2px 6px rgba(9,26,18,.05);
  --shadow-md: 0 14px 30px -14px rgba(9,26,18,.28), 0 3px 8px rgba(9,26,18,.05);
  --shadow-lg: 0 34px 70px -28px rgba(9,26,18,.45), 0 10px 24px -16px rgba(9,26,18,.2);
  --shadow-key: 0 4px 0 0 rgba(9,26,18,.16);
}

/* ---------- reset & base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 16.5px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
svg{ width:1em; height:1em; flex:none; vertical-align:-0.125em; }
picture{ display:block; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:2px; }
.container{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* ---------- type ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-display); font-weight:700; line-height:.99;
  letter-spacing:-.004em; margin:0 0 .5em; text-wrap:balance;
}
p{ margin:0 0 1em; }

/* body links carry the same swept corner as the buttons */
.prose a, .card-body a, .bio-text a, .faq-a a{
  color:var(--green-deep); text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 2px;
  transition:background-size .25s ease, color .2s ease;
  padding-bottom:1px;
}
.prose a:hover, .card-body a:hover, .bio-text a:hover, .faq-a a:hover{
  color:var(--red-deep); background-size:100% 40%;
}

/* the forecourt rule: one accent, used under every major heading */
.section-head h2::after,
.h-sec::after,
.hero-content h1::after,
.page-header h1::after,
.masjid-panel h2::after,
.cta-band h2::after{
  content:""; display:block; width:74px; height:5px; margin-top:16px;
  background:linear-gradient(90deg,var(--red) 0 46%,var(--gold-bright) 46% 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%);
}
.page-header h1::after, .masjid-panel h2::after{ margin-top:12px; }
.hero-content h1::after{ margin-top:20px; width:96px; height:6px; }
.section-head.center h2::after,
.cta-band h2::after{ margin-left:auto; margin-right:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:700 12.5px/1 var(--f-display); letter-spacing:.18em; text-transform:uppercase;
  color:var(--green);
}
.eyebrow::before{
  content:""; width:24px; height:3px; display:inline-block; flex:none;
  background:linear-gradient(90deg,var(--red) 0 55%,var(--gold-bright) 55% 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.section-head{ max-width:64ch; margin:0 0 40px; }
.section-head h2{
  font-size:clamp(31px,4.1vw,46px); text-transform:uppercase; letter-spacing:.004em;
  color:var(--ink); margin:14px 0 0;
}
.section-head .ur{ font-size:19px; color:var(--ink-2); margin:16px 0 10px; }
.section-head p{ color:var(--ink-2); font-size:17px; max-width:58ch; margin-top:14px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-head.wide{ max-width:74ch; }
.section-tight{ padding:34px 0 6px; }
/* anchors must clear the sticky header */
section[id], main[id]{ scroll-margin-top:104px; }

/* heading sizes that used to live in style attributes */
.h-sec{
  font-size:clamp(29px,3.7vw,42px); text-transform:uppercase;
  margin:14px 0 22px; color:var(--ink);
}
.h-card{
  font-size:clamp(20px,2.2vw,25px); text-transform:uppercase; margin:10px 0 14px;
}

/* lede and small lede */
.lede{ font-size:18.5px; line-height:1.62; color:var(--ink-2); max-width:56ch; margin:0 0 20px; }
.lede-sm{ font-size:16.5px; line-height:1.65; color:var(--ink-2); max-width:54ch; margin:0 0 16px; }

/* ticked lists */
.ticks{ display:grid; gap:13px; margin-top:22px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); font-size:16.5px; }
.ticks svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--red); }

/* Urdu
   Nastaliq needs a generous line box and must never inherit the wide letter
   spacing used for the Latin display type, because that breaks the joins
   between letters. Urdu runs left aligned inside the English columns so the
   two languages sit on the same margin. */
[lang="ur"], .ur{
  font-family:var(--f-urdu); direction:rtl; unicode-bidi:isolate;
  text-align:left; letter-spacing:0; text-transform:none;
  line-height:2.15; font-weight:400;
}
.ur-md{ font-size:18px; }
.ur-lg{ font-size:23px; margin-bottom:14px; }
.ur-strong{ font-weight:600; }
.eyebrow .ur{ font-size:15px; line-height:1.6; }
.card-body .ur{ font-size:16px; }
.section-deep .ur{ color:rgba(255,255,255,.88); }
.section-head.center .ur, .cta-band .ur, .insta-card .ur, .hours-open .ur{ text-align:center; }
.section-head.center .ur{ margin-left:auto; margin-right:auto; }
/* keep the Latin brand token inside an Urdu run reading the right way round */
.ur .ltr{ direction:ltr; unicode-bidi:embed; }

.skip-link{
  position:absolute; left:14px; top:-70px; z-index:200;
  background:var(--green-dark); color:#fff; padding:12px 18px;
  border-radius:2px 2px var(--sweep) 2px; text-decoration:none;
  font:700 14px/1 var(--f-display); letter-spacing:.08em; text-transform:uppercase;
  transition:top .18s ease;
}
.skip-link:focus{ top:14px; }

/* =========================================================================
   BUTTON SYSTEM
   Four voices, one shape. A hard key with a swept corner, a bold condensed
   uppercase label, a physical under edge, a wipe that sweeps in from the
   leading edge, and one pass of light across the face.
   ========================================================================= */
.btn{
  --btn-bg:var(--green-deep);
  --btn-fg:#fff;
  --btn-wipe:var(--red);
  --btn-edge:rgba(6,22,13,.42);
  --btn-ring:transparent;

  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font:700 15px/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase;
  padding:16px 26px 15px;
  border:2px solid transparent;
  border-radius:3px 3px var(--sweep) 3px;
  background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  box-shadow: 0 4px 0 0 var(--btn-edge), inset 0 0 0 1px var(--btn-ring), var(--shadow-sm);
  transition: transform .18s cubic-bezier(.2,.8,.25,1),
              box-shadow .18s cubic-bezier(.2,.8,.25,1),
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* the wipe */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--btn-wipe);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s cubic-bezier(.66,0,.34,1);
}
/* one pass of light */
.btn::after{
  content:""; position:absolute; top:-45%; bottom:-45%; left:0; width:34%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-170%) skewX(-15deg); pointer-events:none;
}
.btn:hover, .btn:focus-visible{
  transform:translateY(-2px); color:var(--btn-fg);
  box-shadow: 0 6px 0 0 var(--btn-edge), inset 0 0 0 1px var(--btn-ring), var(--shadow-md);
}
.btn:hover::before, .btn:focus-visible::before{ transform:scaleX(1); }
.btn:hover::after, .btn:focus-visible::after{ animation:sweep .8s cubic-bezier(.3,0,.2,1); }
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 0 var(--btn-edge); }
.btn svg{ width:18px; height:18px; flex:none; }
@keyframes sweep{
  from{ transform:translateX(-170%) skewX(-15deg); }
  to{ transform:translateX(340%) skewX(-15deg); }
}

.btn-primary{ --btn-bg:var(--red); --btn-fg:#fff; --btn-wipe:var(--red-deep); --btn-edge:rgba(110,12,17,.55); }
.btn-secondary{
  --btn-bg:var(--surface); --btn-fg:var(--ink); --btn-wipe:var(--green-deep);
  --btn-edge:rgba(9,40,24,.18);
  border-color:var(--rule-strong);
}
.btn-secondary:hover, .btn-secondary:focus-visible{
  --btn-fg:#fff; border-color:var(--green-deep);
}
.btn-accent{ --btn-bg:var(--gold); --btn-fg:#241703; --btn-wipe:var(--gold-bright); --btn-edge:rgba(120,80,10,.5); }
.btn-ghost-light{
  --btn-bg:rgba(255,255,255,.07); --btn-fg:#fff; --btn-wipe:#fff;
  --btn-edge:rgba(0,0,0,.32);
  border-color:rgba(255,255,255,.6); backdrop-filter:blur(5px);
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible{ --btn-fg:var(--green-dark); border-color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:11px 17px 10px; font-size:13px; letter-spacing:.12em; border-radius:2px 2px 11px 2px; }
.btn-sm svg{ width:15px; height:15px; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(170%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.site-header::after{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg,var(--green) 0 34%,var(--red) 34% 68%,var(--gold-bright) 68% 100%);
  opacity:.9;
}
.header-bar{
  display:flex; align-items:center; gap:18px; padding:10px 22px;
  max-width:var(--wrap); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.brand img{ height:48px; width:auto; }
.main-nav{ margin-left:6px; }
.main-nav ul{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  position:relative; display:block; padding:11px 14px;
  border-radius:2px 2px 10px 2px;
  font:700 14.5px/1 var(--f-display); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
  transition:color .2s ease, background-color .2s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left center;
  transition:transform .28s cubic-bezier(.66,0,.34,1);
}
.main-nav a:hover{ color:var(--green-deep); background:var(--green-soft); }
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a[aria-current="page"]{ color:var(--green-deep); background:var(--green-soft); }
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); background:linear-gradient(90deg,var(--red) 0 55%,var(--gold-bright) 55% 100%); }

.header-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.header-social{ display:flex; align-items:center; gap:5px; }
@media (max-width:1180px){ .header-social .icon-link:not(.is-wa){ display:none; } }

.icon-link{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:2px 2px 12px 2px;
  background:var(--surface-2); color:var(--ink-2); border:1.5px solid var(--rule);
  text-decoration:none;
  transition: transform .18s cubic-bezier(.2,.8,.25,1), background-color .2s ease,
              border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.icon-link:hover, .icon-link:focus-visible{
  transform:translateY(-2px); background:var(--green-deep); color:#fff;
  border-color:var(--green-deep); box-shadow:0 5px 0 0 rgba(9,40,24,.16);
}
.icon-link svg{ width:19px; height:19px; }
.nav-toggle{
  display:none; margin-left:auto; width:46px; height:46px;
  border-radius:3px 3px var(--sweep) 3px; align-items:center; justify-content:center;
  background:var(--surface-2); border:1.5px solid var(--rule); color:var(--ink); cursor:pointer;
}
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width: 900px){
  .brand img{ height:39px; }
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(330px,88vw); height:100dvh;
    background:var(--surface); box-shadow:var(--shadow-lg); padding:92px 22px 26px;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:4px; }
  .main-nav a{ padding:15px 13px; font-size:16.5px; border-bottom:1px solid var(--rule); border-radius:3px; }
  .main-nav a::after{ left:13px; right:auto; width:26px; bottom:11px; }
  .main-nav .nav-social{
    display:flex; gap:8px; margin-top:22px; padding-top:20px; border-top:1px solid var(--rule);
  }
  .nav-toggle{ display:inline-flex; }
  .header-actions .icon-link{ display:none; }
  .nav-scrim{
    position:fixed; inset:0; background:rgba(7,20,13,.5); opacity:0; pointer-events:none;
    transition:opacity .3s ease; z-index:90; backdrop-filter:blur(2px);
  }
  .nav-scrim.show{ opacity:1; pointer-events:auto; }
}
@media (min-width: 901px){ .nav-social{ display:none; } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative; overflow:hidden; background:var(--board-bg);
  min-height:min(90vh, 780px); display:flex; align-items:flex-end;
}
.hero-media{ position:absolute; inset:0; width:100%; height:100%; }
.hero-media video, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 46%;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 15% 95%, rgba(6,16,10,.82) 0%, rgba(6,16,10,0) 62%),
    linear-gradient(180deg, rgba(6,18,12,.42) 0%, rgba(6,16,10,.16) 32%, rgba(5,14,9,.86) 100%);
}
.hero-content{
  position:relative; z-index:2; color:#fff;
  padding:78px 22px 58px; max-width:var(--wrap); margin:0 auto; width:100%;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.32); color:#fff;
  padding:7px 15px 7px 8px; border-radius:2px 2px 14px 2px;
  font:700 12px/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:20px; backdrop-filter:blur(5px);
}
.hero-badge img{ height:17px; width:auto; }
.hero-content h1{
  font-size:clamp(40px,6.4vw,74px); text-transform:uppercase; color:#fff;
  letter-spacing:.002em; line-height:.94; margin-bottom:14px; max-width:15ch;
}
.hero-content .ur{ font-size:clamp(18px,2.3vw,24px); color:rgba(255,255,255,.93); margin:0 0 18px; max-width:34ch; }
.hero-content .lede{ font-size:18.5px; line-height:1.6; color:rgba(255,255,255,.87); max-width:54ch; margin:0 0 30px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }
.hero-strip{ display:flex; flex-wrap:wrap; gap:12px 30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.22); }
.hero-stat{ display:flex; flex-direction:column; gap:3px; }
.hero-stat b{ font:700 15px/1.2 var(--f-display); letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.hero-stat span{ font-size:13px; color:rgba(255,255,255,.72); }
.hero-toggle{
  position:absolute; right:22px; bottom:22px; z-index:3;
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px;
  background:rgba(8,18,12,.55); color:#fff; border:1px solid rgba(255,255,255,.38);
  border-radius:2px 2px 14px 2px;
  font:600 12.5px/1 var(--f-body); backdrop-filter:blur(6px); cursor:pointer;
  transition:background-color .2s ease, transform .18s ease;
}
.hero-toggle:hover{ background:rgba(8,18,12,.78); transform:translateY(-2px); }
.hero-toggle svg{ width:15px; height:15px; }

/* =========================================================================
   PAGE HEADER (inner pages)
   ========================================================================= */
.page-header{
  position:relative; color:#fff; overflow:hidden;
  min-height:clamp(320px,40vh,430px); display:flex; align-items:flex-end;
  background:var(--green-dark);
}
.page-header img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 50%; }
.page-header::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 120% at 8% 100%, rgba(5,14,9,.9) 0%, rgba(5,14,9,0) 66%),
    linear-gradient(180deg, rgba(8,20,13,.46) 0%, rgba(5,14,9,.86) 100%);
}
.page-header .container{ position:relative; z-index:2; padding-top:64px; padding-bottom:38px; }
.page-header .eyebrow{ color:#CFE7D8; }
.page-header .eyebrow::before{ background:linear-gradient(90deg,var(--gold-bright) 0 100%); }
.page-header h1{ color:#fff; font-size:clamp(35px,5.2vw,56px); text-transform:uppercase; margin-bottom:10px; }
.page-header .ur{ color:rgba(255,255,255,.9); font-size:18px; margin:0; }
.breadcrumb{ font:600 12.5px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.68); margin-bottom:16px; }
.breadcrumb a{ color:rgba(255,255,255,.88); text-decoration:none; }
.breadcrumb a:hover{ color:#fff; text-decoration:underline; }

/* =========================================================================
   SECTIONS
   ========================================================================= */
section{ padding:clamp(56px,7vw,86px) 0; }
.section-alt{ background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.section-deep{ background:var(--green-deep); color:#fff; }
.section-deep .section-head h2{ color:#fff; }
.section-deep .section-head .ur{ color:rgba(255,255,255,.84); }
.section-deep .section-head p{ color:rgba(255,255,255,.8); }
.section-deep .eyebrow{ color:#CFE7D8; }
.section-deep .eyebrow::before{ background:linear-gradient(90deg,var(--gold-bright) 0 100%); }
.section-deep .h-sec{ color:#fff; }
.section-deep .lede, .section-deep .lede-sm{ color:rgba(255,255,255,.82); }

/* =========================================================================
   GRIDS AND CARDS
   ========================================================================= */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  position:relative; background:var(--surface);
  border:1px solid var(--rule); border-radius:3px 3px var(--sweep) 3px;
  overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease, border-color .22s ease;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
  background:linear-gradient(90deg,var(--red) 0 50%,var(--gold-bright) 50% 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .34s cubic-bezier(.66,0,.34,1);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--rule-strong); }
.card:hover::before{ transform:scaleX(1); }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.card:hover .card-media img{ transform:scale(1.055); }
.card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,16,10,0) 55%,rgba(6,16,10,.34) 100%);
}
.card-tag{
  position:absolute; top:13px; left:13px; z-index:2;
  background:rgba(8,18,12,.72); color:#fff;
  font:700 12px/1 var(--f-display); letter-spacing:.13em; text-transform:uppercase;
  padding:7px 11px; border-radius:2px 2px 10px 2px; backdrop-filter:blur(4px);
}
.card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card-body h3{ font-size:23px; text-transform:uppercase; margin:0; }
.card-body .ur{ font-size:15px; color:var(--ink-2); margin:0; }
.card-body p{ color:var(--ink-2); font-size:15.5px; margin:2px 0 8px; flex:1; }
.card-body .card-link{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font:700 13px/1 var(--f-display); letter-spacing:.11em; text-transform:uppercase;
  color:var(--green-deep); text-decoration:none; padding-bottom:3px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-position:0 100%; background-size:24px 2px;
  transition:background-size .3s cubic-bezier(.66,0,.34,1), color .2s ease;
}
.card-body .card-link:hover{ color:var(--red-deep); background-size:100% 2px; }
.card-body .card-link svg{ width:15px; height:15px; transition:transform .22s ease; }
.card-body .card-link:hover svg{ transform:translateX(4px); }

/* portrait photos sit better slightly above centre inside a landscape card */
.pos-upper img{ object-position:center 33%; }
.pos-mid img{ object-position:center 50%; }

/* =========================================================================
   PRICE BOARD
   ========================================================================= */
.board-inline{ margin:26px 0; }
.board{
  background:var(--board-bg); color:var(--board-ink);
  border-radius:3px 3px 18px 3px;
  padding:28px 28px 20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), var(--shadow-md);
  position:relative; overflow:hidden;
}
.board::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--red) 0 50%,var(--gold-bright) 50% 100%);
}
.board-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  font:700 12.5px/1.2 var(--f-display); letter-spacing:.16em; text-transform:uppercase; color:var(--board-dim);
  padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.14);
}
.board-rows{ display:grid; gap:0; }
.board-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.09); }
.board-row:last-child{ border-bottom:0; }
.board-row .prod{ font:600 18px/1.25 var(--f-body); }
.board-row .prod small{ display:block; font:400 12.5px/1.35 var(--f-body); color:var(--board-dim); margin-top:2px; }
.board-row .led{ font:500 27px/1 var(--f-mono); color:var(--board-led); font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; }
.board-foot{ font:400 12px/1.6 var(--f-mono); color:var(--board-dim); padding-top:15px; }

/* =========================================================================
   PILLARS
   ========================================================================= */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule); }
.pillar{ padding:26px 24px 26px 0; border-bottom:1px solid var(--rule); display:flex; gap:16px; }
.pillar .num{ font:600 26px/1 var(--f-mono); color:var(--red); flex:none; }
.pillar .num svg{ width:26px; height:26px; }
.pillar h3{ font-family:var(--f-body); font-weight:700; font-size:17px; margin:0 0 5px; letter-spacing:0; text-transform:none; }
.pillar p{ color:var(--ink-2); font-size:15px; margin:0; }
.pillars-on-dark{ border-top-color:rgba(255,255,255,.2); }
.pillars-on-dark .pillar{ border-bottom-color:rgba(255,255,255,.2); }
.pillars-on-dark .num{ color:var(--gold-bright); }
.pillars-on-dark h3{ color:#fff; }
.pillars-on-dark p{ color:rgba(255,255,255,.78); }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .pillars{ grid-template-columns:1fr; } .pillar{ padding-right:0; } }

/* =========================================================================
   SPLIT (image beside text)
   ========================================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split-media{
  position:relative; border-radius:3px 3px 18px 3px; overflow:hidden;
  box-shadow:var(--shadow-md); background:var(--surface-2);
}
.split-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(9,26,18,.08);
  border-radius:inherit;
}
.split-media img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.split-media.ratio-tall{ aspect-ratio:4/5; }
.split-media.ratio-wide{ aspect-ratio:16/11; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; } }

/* =========================================================================
   MASJID PANEL
   ========================================================================= */
.masjid-panel{
  position:relative; border-radius:3px 3px 22px 3px; overflow:hidden;
  aspect-ratio:16/9; min-height:clamp(380px,46vh,600px);
  display:flex; align-items:flex-end;
  box-shadow:var(--shadow-lg); background:var(--green-dark);
}
.masjid-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 12%; }
.masjid-panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,14,9,.9) 0%, rgba(5,14,9,.5) 52%, rgba(5,14,9,.06) 100%);
}
.masjid-panel .panel-inner{ position:relative; z-index:2; color:#fff; padding:40px; max-width:540px; }
.masjid-panel h2{ color:#fff; font-size:clamp(28px,3.7vw,40px); text-transform:uppercase; }
.masjid-panel .ur{ color:rgba(255,255,255,.9); font-size:19px; margin-bottom:14px; }
.masjid-panel p{ color:rgba(255,255,255,.86); }
.masjid-facts{ display:grid; gap:10px; margin:18px 0 24px; }
.masjid-facts li{ display:flex; gap:11px; align-items:flex-start; color:rgba(255,255,255,.92); font-size:15.5px; }
.masjid-facts svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--gold-bright); }
@media (max-width:640px){ .masjid-panel .panel-inner{ padding:26px 22px; } }

/* =========================================================================
   VIDEO BLOCK (Lube Bay)
   ========================================================================= */
.video-block{
  position:relative; border-radius:3px 3px 18px 3px; overflow:hidden;
  box-shadow:var(--shadow-lg); background:#050D09;
}
.video-16x9{ aspect-ratio:16/9; margin-bottom:30px; }
.video-block::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); border-radius:inherit;
}
.video-block video, .video-block img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-block .play-btn{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(5,14,9,.16),rgba(5,14,9,.42));
  border:0; cursor:pointer; color:#fff; padding:0;
}
.video-block .play-btn .ring{
  width:84px; height:84px; border-radius:50%;
  background:rgba(203,32,39,.9); border:2px solid rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  transition:transform .22s cubic-bezier(.2,.8,.25,1), background-color .2s ease;
}
.video-block .play-btn:hover .ring{ transform:scale(1.09); background:var(--red-bright); }
.video-block .play-btn svg{ width:28px; height:28px; margin-left:5px; }
.video-block.playing .play-btn{ display:none; }
.video-caption{
  display:flex; justify-content:space-between; gap:10px; margin-top:12px;
  font:600 12px/1.4 var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); flex-wrap:wrap;
}

/* =========================================================================
   TEAM
   ========================================================================= */
.team-photo{ border-radius:3px 3px 18px 3px; overflow:hidden; box-shadow:var(--shadow-md); }
.team-photo img{ width:100%; height:auto; }
.team-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
.team-role{
  position:relative; background:var(--surface); border:1px solid var(--rule);
  border-radius:2px 2px 12px 2px; padding:17px 18px 17px 20px; overflow:hidden;
}
.team-role::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--red) 0 50%,var(--gold-bright) 50% 100%);
}
.team-role b{ display:block; font:700 14.5px/1.2 var(--f-display); letter-spacing:.08em; text-transform:uppercase; }
.team-role span{ display:block; font-size:13.5px; color:var(--ink-2); margin-top:3px; }
@media (max-width:700px){ .team-list{ grid-template-columns:1fr; } }

/* =========================================================================
   MANAGING DIRECTOR BIOGRAPHY
   ========================================================================= */
.bio-layout{ display:grid; grid-template-columns:340px 1fr; gap:52px; align-items:start; }
.bio-photo{
  border-radius:3px 3px 20px 3px; overflow:hidden; box-shadow:var(--shadow-lg);
  position:sticky; top:110px; border:1px solid var(--rule);
}
.bio-photo img{ width:100%; height:auto; }
.bio-name{ font-size:clamp(31px,3.7vw,42px); text-transform:uppercase; margin-bottom:4px; }
.bio-role{
  font:700 13.5px/1.3 var(--f-display); letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin-bottom:20px;
}
.bio-text p{ font-size:17px; line-height:1.68; color:var(--ink-2); max-width:64ch; }
.bio-quote{
  position:relative; font:italic 600 21px/1.5 var(--f-body); color:var(--ink);
  border-left:4px solid transparent; padding:6px 0 6px 24px; margin:26px 0; max-width:56ch;
  background:linear-gradient(180deg,var(--red) 0 50%,var(--gold-bright) 50% 100%) left top / 4px 100% no-repeat;
}
.bio-social{ display:flex; gap:11px; margin-top:24px; flex-wrap:wrap; }
@media (max-width:860px){ .bio-layout{ grid-template-columns:1fr; gap:34px; } .bio-photo{ position:static; max-width:330px; } }

/* =========================================================================
   SOCIAL
   ========================================================================= */
.social-strip{ display:grid; grid-template-columns:1.15fr 1fr; gap:30px; align-items:stretch; }
@media (max-width:900px){ .social-strip{ grid-template-columns:1fr; } }
.fb-wrap{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:3px 3px 18px 3px; padding:20px; box-shadow:var(--shadow-sm);
  min-height:360px; display:flex; flex-direction:column; justify-content:center;
}
.fb-wrap .fb-fallback{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:20px 4px; }
/* the fallback must yield the moment Facebook draws the real timeline */
.fb-fallback[hidden]{ display:none !important; }
.fb-page:empty{ display:none; }
.fb-page blockquote{ margin:0; }
.insta-card{
  border-radius:3px 3px 18px 3px; overflow:hidden; position:relative;
  min-height:360px; display:flex; align-items:flex-end;
  background:linear-gradient(158deg,#3B2168 0%,#A62A66 40%,#DD7333 74%,#F2B23A 100%);
  box-shadow:var(--shadow-md);
}
.insta-card .panel-inner{ position:relative; z-index:2; color:#fff; padding:30px; width:100%; }
.insta-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 62%); }
.insta-card h3{ color:#fff; font-size:25px; text-transform:uppercase; margin-bottom:8px; }
.insta-card p{ color:rgba(255,255,255,.92); margin-bottom:18px; }
.insta-handle{ font:600 15px var(--f-mono); letter-spacing:.03em; }
.social-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* =========================================================================
   GALLERY
   ========================================================================= */
.filter-bar, .jump-nav{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:32px; }
.jump-nav{ margin-bottom:0; }
.filter-btn, .jump-link{
  position:relative; isolation:isolate; overflow:hidden;
  font:700 12.5px/1 var(--f-display); letter-spacing:.13em; text-transform:uppercase;
  padding:12px 18px 11px; border-radius:2px 2px 12px 2px;
  border:1.5px solid var(--rule); background:var(--surface); color:var(--ink-2);
  cursor:pointer; text-decoration:none;
  transition:color .2s ease, border-color .2s ease, transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s ease;
}
.filter-btn::before, .jump-link::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--green-soft);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .34s cubic-bezier(.66,0,.34,1);
}
.filter-btn:hover, .jump-link:hover{ color:var(--green-deep); border-color:var(--green); transform:translateY(-2px); }
.filter-btn:hover::before, .jump-link:hover::before{ transform:scaleX(1); }
.filter-btn[aria-pressed="true"]{
  background:var(--green-deep); border-color:var(--green-deep); color:#fff;
  box-shadow:0 4px 0 0 rgba(9,40,24,.22);
}
.filter-btn[aria-pressed="true"]::before{ display:none; }

.gallery-grid{ columns:4 260px; column-gap:18px; }
.gallery-item{
  break-inside:avoid; margin:0 0 18px; padding:0; width:100%;
  border-radius:3px 3px 14px 3px; overflow:hidden; position:relative;
  box-shadow:var(--shadow-sm); background:var(--surface-2); border:0; cursor:zoom-in; display:block;
  transition:box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.25,1);
}
.gallery-item::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 0 1px rgba(9,26,18,.1); border-radius:inherit;
  transition:box-shadow .22s ease;
}
.gallery-item:hover, .gallery-item:focus-visible{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.gallery-item:hover::after{ box-shadow:inset 0 0 0 2px var(--gold-bright); border-radius:inherit; }
.gallery-item img{ width:100%; height:auto; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item .g-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:26px 14px 11px;
  background:linear-gradient(0deg,rgba(5,14,9,.86),rgba(5,14,9,0));
  color:#fff; font:700 12.5px/1.3 var(--f-display); letter-spacing:.09em; text-transform:uppercase;
  text-align:left; opacity:0; transform:translateY(8px);
  transition:opacity .24s ease, transform .24s ease;
}
.gallery-item:hover .g-caption, .gallery-item:focus-visible .g-caption{ opacity:1; transform:translateY(0); }
@media (hover:none){
  .gallery-item .g-caption{ opacity:1; transform:none; }
}
@media (max-width:960px){ .gallery-grid{ columns:3 200px; } }
@media (max-width:620px){ .gallery-grid{ columns:2 160px; column-gap:11px; } .gallery-item{ margin-bottom:11px; } }

.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(5,11,8,.95);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:5vh 4vw;
  opacity:0; visibility:hidden; pointer-events:none;
  /* visibility flips at once on open so focus can move in, and only after the fade on close */
  transition:opacity .24s ease, visibility 0s linear .24s;
}
.lightbox.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .24s ease, visibility 0s linear 0s;
}
.lightbox figure{ margin:0; max-width:min(1120px,92vw); max-height:88vh; display:flex; flex-direction:column; gap:14px; align-items:center; }
.lightbox img{ max-width:100%; max-height:76vh; width:auto; border-radius:3px 3px 16px 3px; box-shadow:0 40px 90px -20px rgba(0,0,0,.7); }
.lightbox figcaption{ color:#fff; font:700 14px/1.4 var(--f-display); letter-spacing:.1em; text-transform:uppercase; text-align:center; }
.lightbox-count{ color:rgba(255,255,255,.6); font:500 12px/1 var(--f-mono); letter-spacing:.1em; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.4); color:#fff;
  border-radius:2px 2px 12px 2px; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background-color .2s ease, transform .18s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(255,255,255,.24); }
.lightbox-close{ top:22px; right:22px; }
.lightbox-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:18px; top:50%; transform:translateY(-50%); }
.lightbox-prev:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox-next:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox svg{ width:20px; height:20px; }
@media (max-width:640px){ .lightbox-prev, .lightbox-next{ width:42px; height:42px; } .lightbox-close{ top:12px; right:12px; } }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid{ display:grid; grid-template-columns:.95fr 1.15fr; gap:40px; align-items:start; }
@media (max-width:940px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:3px 3px 18px 3px; padding:30px; box-shadow:var(--shadow-sm);
}
.contact-list{ display:grid; gap:22px; margin-top:8px; }
.contact-list li{ display:flex; gap:15px; align-items:flex-start; }
.contact-list .ic{
  width:44px; height:44px; border-radius:2px 2px 13px 2px;
  background:var(--green-soft); color:var(--green-deep); border:1px solid #CFE3D6;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-list .ic svg{ width:21px; height:21px; }
.contact-list b{ display:block; font:700 13.5px/1.3 var(--f-display); letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px; }
.contact-list span, .contact-list a{ display:block; color:var(--ink-2); font-size:15.5px; }
.contact-list a{ color:var(--ink-2); text-decoration:none; }
.contact-list a:hover{ color:var(--green-deep); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
.hours-table{ width:100%; border-collapse:collapse; margin-top:6px; }
.hours-table th, .hours-table td{ padding:10px 0; border-bottom:1px solid var(--rule); font-size:15px; text-align:left; }
.hours-table th{ font-weight:600; color:var(--ink); }
.hours-table td{ text-align:right; color:var(--ink-2); font-family:var(--f-mono); font-size:13.5px; }
.hours-table td a{ color:var(--ink-2); text-decoration:none; }
.hours-table td a:hover{ color:var(--green-deep); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
.hours-table tr:last-child th, .hours-table tr:last-child td{ border-bottom:0; }
.hours-open{ display:flex; gap:18px; align-items:flex-start; margin-top:8px; }
.hours-badge{
  flex:none; width:76px; height:76px; border-radius:3px 3px 20px 3px;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font:700 22px/1 var(--f-display); letter-spacing:.04em;
  box-shadow:0 5px 0 0 rgba(110,12,17,.35);
}
.hours-open b{ display:block; font:700 18px/1.25 var(--f-display); letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px; }
.hours-open p{ margin:0; color:var(--ink-2); font-size:15.5px; }
@media (max-width:420px){ .hours-open{ flex-direction:column; } }
.map-frame{
  border-radius:3px 3px 18px 3px; overflow:hidden;
  box-shadow:var(--shadow-md); border:1px solid var(--rule);
}
.map-frame iframe{ width:100%; height:460px; border:0; display:block; }

/* =========================================================================
   CALL TO ACTION BAND
   ========================================================================= */
.cta-band{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg,var(--red) 0%,var(--red-deep) 100%);
  color:#fff; border-radius:3px 3px 26px 3px; padding:52px 44px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px;
  box-shadow:var(--shadow-lg);
}
.cta-band::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--gold-bright) 0 50%,rgba(255,255,255,.5) 50% 100%);
}
.cta-band h2{ color:#fff; font-size:clamp(27px,3.7vw,38px); max-width:22ch; text-transform:uppercase; }
.cta-band .ur{ color:rgba(255,255,255,.94); font-size:18px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:10px; }
.cta-band .btn-primary{
  --btn-bg:#fff; --btn-fg:var(--red-deep); --btn-wipe:var(--gold-soft);
  --btn-edge:rgba(90,10,15,.4);
}
.cta-band .btn-secondary{
  --btn-bg:transparent; --btn-fg:#fff; --btn-wipe:#fff;
  --btn-edge:rgba(90,10,15,.3);
  border-color:rgba(255,255,255,.65);
}
.cta-band .btn-secondary:hover, .cta-band .btn-secondary:focus-visible{ --btn-fg:var(--red-deep); border-color:#fff; }
@media (max-width:640px){ .cta-band{ padding:38px 22px; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:var(--green-dark); color:rgba(255,255,255,.86); padding:60px 0 0; }
.site-footer::before{
  content:""; display:block; height:4px; margin-top:-60px; margin-bottom:56px;
  background:linear-gradient(90deg,var(--green) 0 30%,var(--red) 30% 62%,var(--gold-bright) 62% 100%);
}
.footer-top{
  display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:38px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.14);
}
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-plate{
  background:#fff; display:inline-flex; padding:14px 18px;
  border-radius:2px 2px 14px 2px; margin-bottom:18px;
}
.footer-plate img{ height:44px; width:auto; }
.footer-col h2{
  font:700 12.5px/1 var(--f-display); letter-spacing:.16em; text-transform:uppercase;
  color:#CFE7D8; margin-bottom:18px;
}
.footer-col p, .footer-col li{ font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.82); }
.footer-col a{ color:rgba(255,255,255,.82); text-decoration:none; }
.footer-col a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--gold-bright); text-underline-offset:3px; }
.footer-col li{ margin-bottom:10px; }
.footer-note{
  display:flex; align-items:center; gap:9px; margin:16px 0 0;
  font:600 12.5px/1.4 var(--f-mono); letter-spacing:.05em; color:var(--gold-bright);
}
.footer-note svg{ width:15px; height:15px; flex:none; }
.footer-social{ display:flex; gap:9px; margin-top:18px; flex-wrap:wrap; }
.footer-social a{
  width:40px; height:40px; border-radius:2px 2px 13px 2px;
  border:1.5px solid rgba(255,255,255,.32);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .2s ease, border-color .2s ease, transform .18s cubic-bezier(.2,.8,.25,1);
}
.footer-social svg{ width:18px; height:18px; color:#fff; transition:color .2s ease; }
.footer-social a:hover{ background:#fff; border-color:#fff; transform:translateY(-2px); }
.footer-social a:hover svg{ color:var(--green-dark); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:24px 0; font-size:13px; color:rgba(255,255,255,.62);
}
.footer-bottom a{ color:rgba(255,255,255,.74); }

/* =========================================================================
   MISC
   ========================================================================= */
.mt-24{ margin-top:24px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; }
.mono{ font-family:var(--f-mono); }
.text-center{ text-align:center; }
.mt-lg{ margin-top:40px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Images fade in once decoded. Both the fade and the scroll motion are scoped
   to a `.js` flag that a tiny inline script sets in the head, so with
   JavaScript switched off every photograph is simply visible and every block
   simply sits in place. */
.js .lazy-fade{ opacity:0; transition:opacity .5s ease; }
.js .lazy-fade.loaded{ opacity:1; }

.js .reveal{ opacity:0; }
.js .reveal.is-in{ opacity:1; animation:rise .7s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes rise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .reveal.is-in{ opacity:1; animation:none; }
}