/* =====================================================================
   General Strike U.S. - Detroit / Downriver  |  Joomla 6 template
   Design system. All brand values are CSS custom properties so the
   palette/typography can be re-themed from the template Options
   (which inject :root overrides) or from css/user.css.
   Everything is scoped under .gs-site to avoid collisions with
   Joomla/Bootstrap component output.
   ===================================================================== */

:root {
  /* Brand colors (overridable via template Options -> injected :root, or user.css) */
  --gs-ink:    #070D0D;
  --gs-teal:   #017369;
  --gs-orange: #F39D52;
  --gs-red:    #8C0404;
  --gs-paper:  #F4EFE3;
  --gs-card:   #FBF8F0;

  /* Supporting tints */
  --gs-ink-2:      #161817;
  --gs-on-dark:    #CDC6B8;
  --gs-on-dark-2:  #B7B0A3;
  --gs-on-dark-3:  #8B857A;
  --gs-brown:      #5C3A10;
  --gs-brown-2:    #7A4D16;
  --gs-text:       #2C2E2D;
  --gs-muted:      #5A5D5A;

  /* Typography (overridable) */
  --gs-font-display: 'Passion One', sans-serif;   /* big numerals / wordmark */
  --gs-font-head:    'Staatliches', sans-serif;    /* headlines / attention */
  --gs-font-body:    'Asap', system-ui, sans-serif;/* body / UI */

  /* Structural */
  --gs-radius: 3px;
  --gs-pad-x: 56px;
}

/* ---- reset within template scope ---- */
.gs-site * { box-sizing: border-box; }
.gs-site { width: 100%; position: relative; overflow-x: clip;
  background: var(--gs-paper); color: var(--gs-ink-2);
  font-family: var(--gs-font-body); }
.gs-site a { text-decoration: none; color: inherit; }
.gs-site img { display: block; }
.gs-site .sec { position: relative; }

/* utility font classes */
.gs-pass  { font-family: var(--gs-font-display); font-weight: 900; line-height: .92; }
.gs-staat { font-family: var(--gs-font-head); letter-spacing: .04em; }
.gs-asap  { font-family: var(--gs-font-body); }

/* generic button base */
.gs-site .btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 0; font-family: var(--gs-font-body); text-align: center; }

/* =====================  HEADER  ===================== */
.gs-hdr { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px; background: var(--gs-ink); position: sticky; top: 0; z-index: 40; }
.gs-brand { display: flex; align-items: center; gap: 13px; }
.gs-brand img { width: 50px; height: 50px; border-radius: 50%; }
.gs-bwrap { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.gs-bname { font-family: var(--gs-font-display); font-weight: 700; font-size: 24px;
  letter-spacing: .03em; line-height: 1; color: #F2EDE3; }
.gs-btag { font-family: var(--gs-font-head); font-size: 10.5px; letter-spacing: .2em;
  color: var(--gs-orange); margin-top: 2px; }

/* header nav (mod_menu output, styled via override -> nav.gs-nav) */
.gs-nav { display: flex; gap: 26px; font-family: var(--gs-font-head); font-size: 15px;
  letter-spacing: .05em; color: var(--gs-on-dark); margin: 0; padding: 0; list-style: none; }
.gs-nav li { list-style: none; }
.gs-nav a { cursor: pointer; display: inline-block; }
.gs-nav .current > a,
.gs-nav .active > a { color: var(--gs-orange); }

.gs-cta { background: var(--gs-orange); color: var(--gs-ink); font-weight: 700;
  font-size: 14px; padding: 11px 19px; border-radius: 2px; transform: rotate(-1.5deg); }

.gs-hamburger { display: none; font-size: 26px; line-height: 1; color: var(--gs-orange);
  cursor: pointer; background: none; border: 0; padding: 4px 6px; }
.gs-mmenu { display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #0B0F0F; border-top: 2px solid var(--gs-orange); padding: 12px 30px 20px;
  z-index: 30; flex-direction: column; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); }
.gs-mmenu.open { display: flex; }
.gs-mmenu a { font-family: var(--gs-font-head); letter-spacing: .06em; font-size: 19px;
  color: var(--gs-paper); padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.08);
  cursor: pointer; }
.gs-mmenu .current > a, .gs-mmenu .active > a, .gs-mmenu a:first-child { color: var(--gs-orange); }
.gs-mmenu .mcta { margin-top: 16px; background: var(--gs-orange); color: var(--gs-ink);
  font-weight: 700; font-size: 15px; padding: 14px; border-radius: 2px; text-align: center;
  border: 0; font-family: var(--gs-font-body); cursor: pointer; display: block; }

/* =====================  HERO / SHOWCASE  ===================== */
.gs-hero { position: relative; background: var(--gs-ink); min-height: 500px; display: flex;
  align-items: center; padding: 0 var(--gs-pad-x); overflow: hidden; }
.gs-hero .gs-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: .32; mix-blend-mode: luminosity; }
.gs-hero::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 40%, rgba(140,4,4,.35), transparent 60%),
              linear-gradient(180deg, rgba(7,13,13,.2), rgba(7,13,13,.85)); }
.gs-hero .gs-in { position: relative; z-index: 2; max-width: 720px; }
.gs-tape { display: inline-block; background: var(--gs-orange); color: var(--gs-ink);
  font-family: var(--gs-font-head); letter-spacing: .16em; font-size: 14px; padding: 7px 16px;
  transform: rotate(-2deg); margin-bottom: 20px; box-shadow: 2px 3px 0 rgba(0,0,0,.4); }
.gs-h1 { font-family: var(--gs-font-head); font-size: 96px; line-height: .86; margin: 0;
  color: var(--gs-paper); text-transform: uppercase; letter-spacing: .01em; }
.gs-h1 em { font-style: normal; color: var(--gs-orange); }
.gs-lead { font-size: 18px; line-height: 1.55; color: #D7D0C3; margin: 22px 0 30px; max-width: 500px; }
.gs-herobtns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.gs-site .gs-b-fill { background: var(--gs-red); color: #fff; font-family: var(--gs-font-head);
  letter-spacing: .06em; font-size: 19px; padding: 15px 28px; border-radius: 2px; transform: rotate(-1deg); }
.gs-site .gs-b-out { background: transparent; color: var(--gs-orange); font-family: var(--gs-font-head);
  letter-spacing: .06em; font-size: 19px; padding: 14px 24px; border: 2px solid var(--gs-orange);
  border-radius: 2px; }

/* hero alert (alert-a) - hidden until a module is published */
.gs-heroalert { position: absolute; top: 50%; right: 48px; transform: translateY(-50%);
  width: 312px; padding: 26px 24px; background: rgba(7,13,13,.84); border: 2px solid var(--gs-orange);
  border-radius: 4px; box-shadow: 0 16px 44px -14px rgba(0,0,0,.75); z-index: 6; }
.gs-heroalert .ak { font-family: var(--gs-font-head); letter-spacing: .2em; font-size: 12px;
  color: var(--gs-orange); margin-bottom: 8px; }
.gs-heroalert h4 { font-family: var(--gs-font-head); font-size: 30px; margin: 0 0 9px;
  color: var(--gs-paper); text-transform: uppercase; line-height: .98; }
.gs-heroalert .ameta { font-size: 14px; color: var(--gs-on-dark); line-height: 1.5; margin: 0 0 17px; }
.gs-heroalert .abtn { background: var(--gs-orange); color: var(--gs-ink); font-family: var(--gs-font-head);
  letter-spacing: .05em; font-size: 16px; padding: 11px 20px; border-radius: 2px; cursor: pointer; border: 0; }

/* =====================  STRIKE COUNTER (custom module)  ===================== */
.gs-count { background: var(--gs-orange); padding: 40px var(--gs-pad-x); display: flex;
  align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; position: relative; }
.gs-count .cwrap { display: flex; flex-direction: column; gap: 12px; }
.gs-count .cl { display: flex; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.gs-count .stat { display: flex; flex-direction: column; gap: 3px; }
.gs-count .cnum { font-family: var(--gs-font-display); font-weight: 900; font-size: 82px;
  line-height: .85; color: var(--gs-ink); }
.gs-count .slab { font-family: var(--gs-font-head); letter-spacing: .12em; font-size: 15px; color: var(--gs-brown); }
.gs-count .cnote { font: 600 9px ui-monospace, Menlo, monospace; color: rgba(92,58,16,.75); margin-top: 8px; }
.gs-site .gs-csign { background: var(--gs-red); color: #fff; font-family: var(--gs-font-head);
  letter-spacing: .08em; font-size: 22px; padding: 18px 34px; border-radius: 2px;
  transform: rotate(1deg); box-shadow: 3px 4px 0 rgba(60,4,4,.6); }

/* =====================  EVENT  ===================== */
.gs-event { background: var(--gs-teal); padding: 26px var(--gs-pad-x); display: flex;
  align-items: center; gap: 26px; flex-wrap: wrap; position: relative; }
.gs-event .date { background: var(--gs-paper); text-align: center; padding: 10px 18px;
  border-radius: var(--gs-radius); line-height: 1; transform: rotate(-2deg); box-shadow: 3px 4px 0 rgba(0,0,0,.28); }
.gs-event .mo { font-family: var(--gs-font-head); font-size: 15px; letter-spacing: .12em; color: var(--gs-red); }
.gs-event .dy { font-family: var(--gs-font-display); font-weight: 900; font-size: 38px; color: var(--gs-ink); }
.gs-event .etx { flex: 1; min-width: 220px; }
.gs-event .ek { font-family: var(--gs-font-head); letter-spacing: .16em; font-size: 12px; color: var(--gs-orange); }
.gs-event h3 { font-family: var(--gs-font-head); font-size: 34px; margin: 3px 0 5px; color: #fff;
  text-transform: uppercase; line-height: .95; }
.gs-event .emeta { font-size: 14px; color: #CDEEE8; }
.gs-event .ebtn { background: var(--gs-orange); color: var(--gs-ink); font-family: var(--gs-font-head);
  letter-spacing: .06em; font-size: 18px; padding: 14px 26px; border-radius: 2px; transform: rotate(1deg);
  box-shadow: 3px 4px 0 rgba(0,0,0,.25); }

/* =====================  PROGRAM CARDS (feature-a)  ===================== */
.gs-progs { padding: 60px var(--gs-pad-x) 30px; }
.gs-shead { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.gs-shead h2 { font-family: var(--gs-font-head); font-size: 52px; margin: 0; color: var(--gs-ink-2);
  text-transform: uppercase; transform: rotate(-1deg); }
.gs-rule { flex: 1; height: 4px; background: repeating-linear-gradient(90deg, var(--gs-ink-2) 0 10px, transparent 10px 18px); }
.gs-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.gs-card { background: var(--gs-card); border: 2px solid var(--gs-ink-2); border-radius: var(--gs-radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: 5px 6px 0 rgba(22,24,23,.9); }
.gs-card:nth-child(2) { transform: rotate(-.8deg); }
.gs-card:nth-child(3) { transform: rotate(.6deg); }
.gs-card .im { height: 180px; width: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05); }
.gs-card .cb { padding: 20px 20px 24px; }
.gs-card .ck { display: inline-block; background: var(--gs-teal); color: #fff; font-family: var(--gs-font-head);
  letter-spacing: .12em; font-size: 11px; padding: 3px 9px; transform: rotate(-1.5deg); }
.gs-card h3 { font-family: var(--gs-font-head); font-size: 30px; margin: 11px 0 8px; color: var(--gs-ink-2);
  text-transform: uppercase; line-height: .95; }
.gs-card p { font-size: 14.5px; line-height: 1.55; color: #4A4D4A; margin: 0 0 13px; }
.gs-card a.more { font-family: var(--gs-font-head); letter-spacing: .08em; font-size: 15px; color: var(--gs-red); }

/* =====================  FOOTER  ===================== */
.gs-ft { background: var(--gs-ink); color: var(--gs-on-dark); padding: 50px var(--gs-pad-x) 26px; }
.gs-ftgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 30px;
  border-bottom: 2px dashed rgba(242,237,227,.16); }
.gs-fbrand img { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 13px; }
.gs-fbrand p { font-size: 13.5px; line-height: 1.6; color: var(--gs-on-dark-3); margin: 0; max-width: 250px; }
.gs-ftcol { position: relative; padding-top: 22px; }
.gs-ft h4, .gs-ftcol h3 { font-family: var(--gs-font-head); letter-spacing: .14em; font-size: 14px;
  color: var(--gs-orange); margin: 0 0 13px; text-transform: uppercase; }
.gs-ft ul { margin: 0; padding: 0; }
.gs-ft li { list-style: none; font-size: 14px; color: var(--gs-on-dark-2); margin-bottom: 9px; }
.gs-ft li a:hover { color: var(--gs-paper); }
.gs-fbot { display: flex; justify-content: space-between; padding-top: 18px; font-size: 12px;
  color: #6F6A60; flex-wrap: wrap; gap: 10px; }

/* =====================  PAGE HEADER BAND (contact / style-guide showcase)  ===================== */
.gs-chead { background: var(--gs-ink); color: var(--gs-paper); padding: 52px var(--gs-pad-x); position: relative; }
.gs-chead .k { font-family: var(--gs-font-head); letter-spacing: .2em; font-size: 13px; color: var(--gs-orange); }
.gs-chead h1 { font-family: var(--gs-font-head); font-size: 66px; margin: 10px 0 0; text-transform: uppercase; }

/* =====================  CONTACT  ===================== */
.gs-page { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.gs-cgrid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; padding: 42px 0 46px; align-items: start; }
.gs-cinfo { position: relative; background: var(--gs-teal); color: var(--gs-paper); border-radius: var(--gs-radius); padding: 30px 28px; }
.gs-cinfo h3 { font-family: var(--gs-font-head); font-size: 24px; margin: 0 0 20px; color: var(--gs-orange); text-transform: uppercase; }
.gs-ci { margin-bottom: 20px; }
.gs-ci .l { font-family: var(--gs-font-head); letter-spacing: .12em; font-size: 12px; color: var(--gs-orange); margin-bottom: 4px; }
.gs-ci .v { font-size: 15px; line-height: 1.5; color: #EAFAF6; }
.gs-map { position: relative; min-height: 360px; border-top: 3px solid var(--gs-ink-2);
  background: repeating-linear-gradient(45deg, #DFD8C8 0 14px, #E7E0D1 14px 28px); }

/* form fields (shared: contact + style guide + com_contact override) */
.gs-site .field, .gs-site .controls .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.gs-site .field label { font-family: var(--gs-font-head); letter-spacing: .1em; font-size: 13px; color: var(--gs-ink-2); }
.gs-site input[type=text], .gs-site input[type=email], .gs-site input[type=tel],
.gs-site input[type=url], .gs-site textarea, .gs-site select {
  font-family: var(--gs-font-body); font-size: 15px; padding: 13px 14px; border: 2px solid var(--gs-ink-2);
  border-radius: var(--gs-radius); background: var(--gs-card); color: var(--gs-ink-2); width: 100%; }
.gs-site textarea { min-height: 150px; resize: vertical; }
.gs-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gs-submit { background: var(--gs-red); color: #fff; font-family: var(--gs-font-head); letter-spacing: .06em;
  font-size: 20px; padding: 15px 32px; border: 0; border-radius: 2px; transform: rotate(-1deg); cursor: pointer;
  margin-top: 6px; box-shadow: 3px 4px 0 rgba(60,4,4,.5); }

/* =====================  ARTICLE  ===================== */
.gs-crumb { background: #ECE5D7; padding: 12px 0; position: relative; }
.gs-crumb .crumbin, .gs-site .breadcrumb { max-width: 1080px; margin: 0 auto; padding: 0 40px;
  font: 600 12px ui-monospace, Menlo, monospace; color: var(--gs-muted); letter-spacing: .04em;
  list-style: none; display: flex; gap: 6px; flex-wrap: wrap; background: transparent; }
.gs-crumb b, .gs-site .breadcrumb .active { color: var(--gs-red); font-weight: 700; }
.gs-artwrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.gs-arthead { max-width: 1080px; margin: 0 auto; padding: 40px 40px 24px; position: relative; }
.gs-artcat { display: inline-block; background: var(--gs-teal); color: #fff; font-family: var(--gs-font-head);
  letter-spacing: .14em; font-size: 12px; padding: 4px 11px; transform: rotate(-1.5deg); }
.gs-arthead h1 { font-family: var(--gs-font-head); font-size: 60px; line-height: .95; margin: 16px 0 14px;
  text-transform: uppercase; max-width: 900px; }
.gs-artmeta { display: flex; gap: 20px; font-size: 14px; color: var(--gs-muted); flex-wrap: wrap; }
.gs-artmeta b { color: var(--gs-ink-2); }
.gs-featwrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; position: relative; }
.gs-featured { width: 100%; height: 430px; object-fit: cover; border: 2px solid var(--gs-ink-2);
  border-radius: var(--gs-radius); filter: grayscale(.3) contrast(1.03); }
.gs-artgrid { max-width: 1080px; margin: 0 auto; padding: 42px 40px 20px; display: grid;
  grid-template-columns: 1fr 320px; gap: 52px; align-items: start; }
.gs-artbody { position: relative; }
.gs-artbody p, .gs-site .com-content-article p { font-size: 17px; line-height: 1.75; color: var(--gs-text); margin: 0 0 20px; }
.gs-artbody h2, .gs-site .com-content-article h2 { font-family: var(--gs-font-head); font-size: 34px; margin: 34px 0 12px; text-transform: uppercase; }
.gs-artbody h3, .gs-site .com-content-article h3 { font-family: var(--gs-font-head); font-size: 23px; margin: 26px 0 10px; text-transform: uppercase; }
.gs-artbody blockquote, .gs-site .com-content-article blockquote { border-left: 5px solid var(--gs-red);
  margin: 28px 0; padding: 6px 0 6px 22px; font-family: var(--gs-font-head); font-size: 26px; line-height: 1.15;
  text-transform: uppercase; color: var(--gs-ink-2); }
.gs-artbody ul, .gs-site .com-content-article ul { font-size: 17px; line-height: 1.8; color: var(--gs-text); padding-left: 22px; margin: 0 0 20px; }
.gs-artbody figure, .gs-site .com-content-article figure { margin: 10px 0 24px; }
.gs-artbody figure img, .gs-site .com-content-article figure img { width: 100%; border: 2px solid var(--gs-ink-2); border-radius: var(--gs-radius); }
.gs-artbody figcaption, .gs-site .com-content-article figcaption { font-size: 13px; color: var(--gs-muted); margin-top: 7px; }
.gs-sidebar { position: relative; display: flex; flex-direction: column; gap: 24px; padding-top: 6px; }
.gs-swidget { background: var(--gs-card); border: 2px solid var(--gs-ink-2); border-radius: var(--gs-radius);
  padding: 20px; box-shadow: 4px 5px 0 rgba(22,24,23,.9); position: relative; }
.gs-swidget h4, .gs-swidget h3 { font-family: var(--gs-font-head); letter-spacing: .08em; font-size: 20px; margin: 0 0 15px; text-transform: uppercase; }
.gs-swidget.dark { background: var(--gs-red); border-color: var(--gs-red); color: #fff; box-shadow: 4px 5px 0 rgba(60,4,4,.7); }
.gs-swidget.dark h4, .gs-swidget.dark h3 { color: #fff; }
.gs-swidget.dark p { font-size: 14px; line-height: 1.55; margin: 0 0 15px; color: #FFDCDC; }
.gs-swidget .wbtn { background: var(--gs-orange); color: var(--gs-ink); font-family: var(--gs-font-head);
  letter-spacing: .05em; font-size: 16px; padding: 11px 18px; border: 0; border-radius: 2px; cursor: pointer; display: inline-block; }
.gs-rel { display: flex; gap: 12px; margin-bottom: 14px; align-items: center; }
.gs-rel:last-child { margin-bottom: 0; }
.gs-rel img { width: 66px; height: 52px; object-fit: cover; border: 1.5px solid var(--gs-ink-2); flex: none; filter: grayscale(.4); }
.gs-rel span { font-family: var(--gs-font-head); font-size: 16px; line-height: 1.05; text-transform: uppercase; }

/* Article Link A/B/C block (from the article's Images and Links tab) */
.gs-artlinks { max-width: 1080px; margin: 0 auto 46px; padding: 0 40px; }
.gs-artlinks h4 { font-family: var(--gs-font-head); letter-spacing: .1em; font-size: 22px;
  text-transform: uppercase; color: var(--gs-ink-2); margin: 0 0 14px; }
.gs-artlinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.gs-artlinks a { display: inline-block; background: var(--gs-teal); color: #fff; font-family: var(--gs-font-head);
  letter-spacing: .05em; font-size: 16px; padding: 12px 20px; border-radius: 2px; }
.gs-artlinks a:hover { background: var(--gs-red); }

/* =====================  MODULE CHROME (gsdiy / gscard)  ===================== */
/* Generic wrappers so any module dropped into a position inherits a title style */
.gs-site .moduletable > h3, .gs-site .moduletable > .mod-title { font-family: var(--gs-font-head);
  letter-spacing: .08em; text-transform: uppercase; }

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 900px) {
  :root { --gs-pad-x: 34px; }
  .gs-hdr { padding: 16px 30px; gap: 14px; }
  .gs-nav,
  .gs-hdr > .mod-menu,
  .gs-hdr > ul.mod-menu { display: none; }
  .gs-cta { margin-left: auto; }
  .gs-hamburger { display: block; }
  .gs-hero { flex-direction: column; align-items: flex-start; justify-content: center; padding: 46px 34px; }
  .gs-hero .gs-in { max-width: 100%; }
  .gs-h1 { font-size: 64px; }
  .gs-heroalert { position: static; transform: none; width: 100%; max-width: 460px; margin-top: 28px; }
  .gs-grid3 { grid-template-columns: 1fr 1fr; }
  .gs-ftgrid { grid-template-columns: 1fr 1fr; }
  .gs-chead { padding: 44px 34px; }
  .gs-chead h1 { font-size: 52px; }
  .gs-cgrid { grid-template-columns: 1fr; gap: 34px; }
  .gs-arthead h1 { font-size: 46px; }
  .gs-featured { height: 330px; }
  .gs-artgrid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .gs-hdr { padding: 14px 20px; }
  .gs-cta { display: none; }
  .gs-hero { min-height: 360px; padding: 38px 20px; }
  .gs-h1 { font-size: 42px; }
  .gs-lead { font-size: 16px; }
  .gs-site .gs-b-fill, .gs-site .gs-b-out { font-size: 16px; padding: 12px 18px; }
  .gs-count { padding: 28px 20px; gap: 20px; }
  .gs-count .cl { gap: 24px; }
  .gs-count .cnum { font-size: 50px; }
  .gs-site .gs-csign { font-size: 18px; padding: 14px 22px; }
  .gs-event { padding: 22px 20px; gap: 16px; }
  .gs-event h3 { font-size: 26px; }
  .gs-progs { padding: 36px 20px 20px; }
  .gs-shead h2 { font-size: 36px; }
  .gs-grid3 { grid-template-columns: 1fr; }
  .gs-ft { padding: 38px 20px 22px; }
  .gs-ftgrid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .gs-chead { padding: 32px 20px; }
  .gs-chead h1 { font-size: 40px; }
  .gs-page { padding: 0 20px; }
  .gs-row2 { grid-template-columns: 1fr; }
  .gs-map { min-height: 240px; }
  .gs-arthead { padding: 28px 20px 18px; }
  .gs-arthead h1 { font-size: 34px; }
  .gs-artgrid { padding: 30px 20px 16px; }
  .gs-featured { height: 210px; }
  .gs-artbody p, .gs-site .com-content-article p { font-size: 16px; }
  .gs-artbody h2 { font-size: 27px; }
  .gs-artbody blockquote { font-size: 22px; }
}

/* Phone: move the header CTA into the mobile dropdown (already full-width there) */
@media (max-width: 560px) { .gs-mmenu .mcta { display: block; } }

/* =====================================================================
   JOOMLA INTEGRATION LAYER
   Maps real Joomla component/module markup onto the design so stock
   modules (menu, articles, breadcrumbs) render on-brand with no override.
   ===================================================================== */

/* ---- Header main menu (mod_menu, chrome "none" -> ul.mod-menu) ---- */
.gs-hdr > .mod-menu,
.gs-hdr > ul.mod-menu { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none;
  font-family: var(--gs-font-head); font-size: 15px; letter-spacing: .05em; color: var(--gs-on-dark); }
.gs-hdr > .mod-menu li { list-style: none; }
.gs-hdr > .mod-menu a { color: var(--gs-on-dark); display: inline-block; }
.gs-hdr > .mod-menu .current > a,
.gs-hdr > .mod-menu .active > a { color: var(--gs-orange); }

/* Hide the desktop horizontal menu at/below the hamburger breakpoint. This must
   come after the .gs-hdr > .mod-menu { display: flex } rule above so it wins on
   source order (equal specificity). */
@media (max-width: 900px) {
  .gs-hdr > .mod-menu,
  .gs-hdr > ul.mod-menu { display: none; }
}

/* ---- Mobile dropdown menu ---- */
.gs-mmenu .mod-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; width: 100%; }
.gs-mmenu .mod-menu li { list-style: none; }
.gs-mmenu .mod-menu a { font-family: var(--gs-font-head); letter-spacing: .06em; font-size: 19px;
  color: var(--gs-paper); padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.08); display: block; }
.gs-mmenu .mod-menu .current > a, .gs-mmenu .mod-menu .active > a { color: var(--gs-orange); }

/* ---- Submenus (parent items with children) ---- */
/* Desktop header: caret marker + dropdown on hover/focus. Scoped with ">" so it
   never touches the mobile menu (which lives inside .gs-mmenu, not a direct
   child of .gs-hdr). */
.gs-hdr > .mod-menu > li { position: relative; }
.gs-hdr > .mod-menu .gs-caret { display: inline-block; margin-left: 5px; font-size: .62em;
  vertical-align: middle; color: var(--gs-orange); }
.gs-hdr > .mod-menu .gs-sub {
  position: absolute; top: calc(100% + 9px); left: 0; min-width: 210px;
  list-style: none; margin: 0; padding: 8px 0;
  background: #0B0F0F; border: 1px solid rgba(255,255,255,.12);
  border-top: 2px solid var(--gs-orange); border-radius: 0 0 4px 4px;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.75);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60; }
/* Invisible bridge over the gap so the pointer can travel to the dropdown. */
.gs-hdr > .mod-menu .gs-has-sub::after { content: ""; position: absolute; left: 0; right: 0;
  top: 100%; height: 11px; }
.gs-hdr > .mod-menu .gs-has-sub:hover > .gs-sub,
.gs-hdr > .mod-menu .gs-has-sub:focus-within > .gs-sub {
  opacity: 1; visibility: visible; transform: translateY(0); }
.gs-hdr > .mod-menu .gs-sub li { list-style: none; }
.gs-hdr > .mod-menu .gs-sub a { display: block; padding: 9px 18px; white-space: nowrap;
  font-size: 14px; color: var(--gs-on-dark); }
.gs-hdr > .mod-menu .gs-sub a:hover { color: var(--gs-orange); background: rgba(255,255,255,.05); }
.gs-hdr > .mod-menu .gs-sub .active > a { color: var(--gs-orange); }

/* Mobile hamburger: show submenu items expanded and indented, no caret/dropdown. */
.gs-mmenu .gs-caret { display: none; }
.gs-mmenu .gs-sub { list-style: none; margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; }
.gs-mmenu .gs-sub li { list-style: none; }
.gs-mmenu .gs-sub a { font-size: 16px; opacity: .82; }

/* ---- Footer link columns (mod_menu / html5 chrome) ---- */
.gs-ftcol .moduletable > h3, .gs-ftcol .mod-title { font-family: var(--gs-font-head);
  letter-spacing: .14em; font-size: 14px; color: var(--gs-orange); margin: 0 0 13px; text-transform: uppercase; }
.gs-ftcol ul { margin: 0; padding: 0; list-style: none; }
.gs-ftcol li { list-style: none; font-size: 14px; color: var(--gs-on-dark-2); margin-bottom: 9px; }
.gs-ftcol a:hover { color: var(--gs-paper); }

/* ---- Sidebar modules rendered with html5 chrome -> .moduletable becomes a card ---- */
.gs-side-col .moduletable { background: var(--gs-card); border: 2px solid var(--gs-ink-2);
  border-radius: var(--gs-radius); padding: 20px; box-shadow: 4px 5px 0 rgba(22,24,23,.9);
  margin-bottom: 24px; }
.gs-side-col .moduletable:last-child { margin-bottom: 0; }
.gs-side-col .moduletable > h3 { font-family: var(--gs-font-head); letter-spacing: .08em;
  font-size: 20px; margin: 0 0 15px; text-transform: uppercase; }

/* ---- Showcase band + floating alert overlay ---- */
.gs-showcase { position: relative; }
.gs-alert-slot { position: absolute; top: 50%; right: 48px; transform: translateY(-50%); z-index: 6; width: 312px; }
@media (max-width: 900px) {
  .gs-alert-slot { position: static; transform: none; width: 100%; max-width: 460px; margin: -8px auto 0; padding: 0 34px 8px; }
}
/* When the floating alert is present, hold the headline narrow enough that it
   never slides under the alert card in the band between full desktop and the
   900px switch (where the alert stacks below instead). Only applies with an alert. */
@media (min-width: 901px) {
  .gs-showcase:has(> .gs-alert-slot) .gs-hero .gs-in { max-width: min(720px, calc(100vw - 450px)); }
}

/* ---- Main content wrapper (article/contact readable column) ---- */
.gs-main-inner { max-width: 1080px; margin: 0 auto; padding: 42px 40px; }
.gs-main-grid { display: block; }
.gs-main-grid.has-side { display: grid; grid-template-columns: 1fr 320px; gap: 52px; align-items: start; }
@media (max-width: 900px) { .gs-main-grid.has-side { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 560px) { .gs-main-inner { padding: 30px 20px; } }

/* Contact form / info can be dropped as modules into .gs-content-col + sidebar-a;
   the two-column contact layout uses .gs-cgrid inside a custom module if preferred. */