/* =====================================================================
   ARM Investments — Static Site
   style.css  (main stylesheet)
   ---------------------------------------------------------------------
   Structure:
   1. Design tokens (CSS custom properties)
   2. Base / reset
   3. Typography
   4. Layout helpers
   5. Header / navigation
   6. Buttons
   7. Hero
   8. Sections & cards
   9. Forms
   10. Testimonials
   11. Footer
   12. Cookie banner
   13. Utilities / misc
   NOTE: Responsive overrides live in responsive.css.
   Colours/fonts approximate the live brand; confirm exact hex/fonts
   against the original site before go-live (see documentation/README).
   ===================================================================== */

/* ----------------------------------------------------------------- */
/* 1. DESIGN TOKENS                                                   */
/* ----------------------------------------------------------------- */
:root {
  --navy-900: #0a2240;
  --navy-800: #0e2c52;
  --navy-700: #13315c;
  --gold-500: #c69749;
  --gold-400: #d4ab63;
  --gold-600: #ad7f33;
  --green-600: #2e7d5b;
  --ink: #182230;
  --muted: #20262e;
  --line: #e6e2d8;
  --cream: #faf8f3;
  --white: #ffffff;

  --container: 1180px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(10, 34, 64, .08);
  --shadow-md: 0 10px 30px rgba(10, 34, 64, .10);
  --shadow-lg: 0 24px 60px rgba(10, 34, 64, .16);

  --ff-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(.76rem, .74rem + .08vw, .82rem);
  --step-0:  clamp(.92rem, .9rem + .1vw, .98rem);
  --step-1:  clamp(1.05rem, 1rem + .2vw, 1.15rem);
  --step-2:  clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --step-4:  clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
}

/* ----------------------------------------------------------------- */
/* 2. BASE / RESET                                                    */
/* ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-700); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold-600); }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy-900);
  color: #fff;
  padding: .7rem 1.1rem;
  z-index: 2000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ----------------------------------------------------------------- */
/* 3. TYPOGRAPHY                                                      */
/* ----------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  color: var(--navy-900);
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); font-weight: 700; }
p  { margin: 0 0 1.1rem; color: #15181d; }
p.lead { font-size: var(--step-1); color: var(--ink); line-height: 1.55; }

.eyebrow {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: .9rem;
}

/* ----------------------------------------------------------------- */
/* 4. LAYOUT HELPERS                                                  */
/* ----------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy-900); color: #d7e0ec; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4, .section--navy h5 { color: #fff; }
.section--navy p { color: #aebccf; }

.section-head { max-width: 760px; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: 1.75rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }

/* ----------------------------------------------------------------- */
/* 5. HEADER / NAVIGATION                                             */
/* ----------------------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: #cdd8e6;
  font-size: .82rem;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.topbar a { color: #cdd8e6; }
.topbar a:hover { color: var(--gold-400); }
.topbar .social { display: flex; gap: .85rem; align-items: center; }
.topbar .social a { display: inline-flex; align-items: center; line-height: 0; transition: color .15s ease; }
.topbar .social svg, .footer-social svg { display: block; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 1rem; }
.brand img { width: 168px; height: auto; }

.main-nav { display: flex; align-items: center; gap: .35rem; }
.main-nav a {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .96rem;
  color: var(--navy-900);
  padding: .6rem .85rem;
  border-radius: 8px;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--gold-600); background: rgba(198, 151, 73, .08); }

/* dropdown */
.has-sub { position: relative; }
.submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .18s ease;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { display: block; padding: .55rem .75rem; border-radius: 6px; font-size: .92rem; }
.caret { font-size: .65em; margin-left: .25rem; opacity: .7; }

.nav-toggle {
  display: none;
  background: var(--navy-900);
  border: 0;
  color: #fff;
  width: 46px; height: 42px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
}

/* ----------------------------------------------------------------- */
/* 6. BUTTONS                                                         */
/* ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .98rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gold-500); color: #1a1205; }
.btn-primary:hover { background: var(--gold-400); color: #1a1205; }
.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }
.btn-outline { border-color: var(--navy-900); color: var(--navy-900); background: transparent; }
.btn-outline:hover { background: var(--navy-900); color: #fff; }
.btn-ghost-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--navy-900); }

/* ----------------------------------------------------------------- */
/* 7. HERO                                                            */
/* ----------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(198,151,73,.16), transparent 55%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, #0c2747 100%);
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 80% at 70% 20%, #000, transparent 75%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 7rem); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero p { color: #c2cee0; max-width: 60ch; font-size: var(--step-1); }
.hero .hero-cta { margin-top: 1.8rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.hero-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.page-hero {
  background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.page-hero h1 { color: #fff; }
.page-hero p { color: #b9c6d8; max-width: 65ch; }
.page-hero .eyebrow { color: var(--gold-400); }

/* ----------------------------------------------------------------- */
/* 8. SECTIONS & CARDS                                                */
/* ----------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card-body h3 { font-size: var(--step-1); margin: 0; }
.card-body .btn { margin-top: auto; align-self: flex-start; }
.card-body h3 a { color: var(--navy-900); }
.card-body h3 a:hover { color: var(--gold-600); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.stat .num { font-family: var(--ff-display); font-size: var(--step-2); font-weight: 800; color: var(--navy-900); }
.stat .label { color: var(--muted); font-size: .95rem; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.feature-list li { position: relative; padding-left: 1.9rem; color: var(--ink); }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 11px; height: 11px;
  background: var(--gold-500);
  border-radius: 3px;
  transform: rotate(45deg);
}
.section--navy .feature-list li { color: #cdd8e6; }

.icon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.icon-card { text-align: center; padding: 1.5rem; }
.icon-card img { width: 72px; height: 72px; margin: 0 auto 1rem; object-fit: contain; }
.icon-card h4 { font-size: var(--step-0); }

.leader-card { text-align: center; }
.leader-card img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; box-shadow: var(--shadow-sm); }
.leader-card h4 { margin-bottom: .2rem; font-size: 1.1rem; }
.leader-card .role { color: var(--gold-600); font-weight: 600; font-family: var(--ff-display); font-size: .9rem; margin-bottom: .5rem; }
.leader-card p { font-size: .9rem; }

/* FAQ page ------------------------------------------------------- */
.faq-layout { display: grid; grid-template-columns: 320px 1fr; gap: 3.5rem; align-items: start; }
.faq-aside { position: sticky; top: 96px; }
.faq-aside .eyebrow { color: var(--gold-600); }
.faq-aside h2 { font-size: var(--step-2); margin: .5rem 0 .9rem; }
.faq-aside p { color: var(--muted); }
.faq-help { margin-top: 1.8rem; padding: 1.7rem; background: linear-gradient(165deg, var(--navy-800), var(--navy-900)); border-radius: var(--radius-lg); }
.faq-help h3 { color: #fff; font-size: var(--step-1); margin: 0 0 .5rem; }
.faq-help p { color: #aebccf; margin: 0 0 1.2rem; font-size: .95rem; }

.faq-group + .faq-group { margin-top: 2.6rem; }
.faq-group-title {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--ff-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy-700); margin: 0 0 1.1rem;
}
.faq-group-title::before { content: ""; width: 28px; height: 2px; background: var(--gold-500); flex: none; }

.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; margin-bottom: .8rem; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover { border-color: #d8d2c4; }
.faq-item:has(.faq-q[aria-expanded="true"]) { border-color: var(--gold-500); box-shadow: var(--shadow-sm); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left;
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1.05rem; line-height: 1.4; color: var(--navy-900);
  padding: 1.15rem 3rem 1.15rem 1.3rem; cursor: pointer; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%); font-size: 1.35rem; line-height: 1; font-weight: 400;
  color: var(--gold-600); background: var(--cream); border-radius: 50%;
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq-q[aria-expanded="true"]::after { content: "\2212"; transform: translateY(-50%) rotate(180deg); background: var(--gold-500); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a > div { padding: 0 1.3rem 1.3rem; }
.faq-a p { color: var(--ink); margin: 0; }
.faq-a p:last-child { margin-bottom: 0; }

/* News page ------------------------------------------------------ */
.news-tag {
  display: inline-block; font-family: var(--ff-display); font-weight: 700;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: .15rem;
}
.news-card { position: relative; }
.news-card .card-media { overflow: hidden; }
.news-card .card-media img { transition: transform .5s ease; }
.news-card:hover .card-media img { transform: scale(1.05); }
.news-card .read-more {
  margin-top: auto; align-self: flex-start; font-family: var(--ff-display);
  font-weight: 600; color: var(--navy-700); display: inline-flex; align-items: center; gap: .4rem;
}
.news-card .read-more::after { content: "\2192"; transition: transform .2s ease; }
.news-card:hover .read-more { color: var(--gold-600); }
.news-card:hover .read-more::after { transform: translateX(4px); }

.news-featured {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 2.5rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-featured .news-featured-media { overflow: hidden; }
.news-featured .news-featured-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; transition: transform .5s ease; }
.news-featured:hover .news-featured-media img { transform: scale(1.04); }
.news-featured .news-featured-body { padding: clamp(1.8rem, 3vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; }
.news-featured .news-featured-body h2 { font-size: var(--step-2); margin: .3rem 0 1rem; }
.news-featured .news-featured-body h2 a { color: var(--navy-900); }
.news-featured .news-featured-body h2 a:hover { color: var(--gold-600); }
.news-featured .news-featured-body p { color: var(--muted); margin-bottom: 1.4rem; }

/* ----------------------------------------------------------------- */
/* 9. FORMS                                                           */
/* ----------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--ff-display); font-weight: 600; font-size: .9rem; color: var(--navy-900); margin-bottom: .4rem; }
.field .req { color: #c0392b; }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 1rem;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(198,151,73,.18);
  outline: none;
}
.field input.invalid,
.field select.invalid,
.field textarea.invalid { border-color: #c0392b; }
.field .error-msg { color: #c0392b; font-size: .82rem; margin-top: .3rem; display: none; }
.field input.invalid ~ .error-msg,
.field select.invalid ~ .error-msg,
.field textarea.invalid ~ .error-msg { display: block; }
.field-check { display: flex; gap: .6rem; align-items: flex-start; }
.field-check input { width: auto; margin-top: .3rem; }
.field-check label { font-weight: 400; font-family: var(--ff-body); color: var(--muted); margin: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { font-size: .82rem; color: var(--muted); }
.form-status { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 8px; font-weight: 600; display: none; }
.form-status.success { display: block; background: #e8f5ee; color: #1d6a45; border: 1px solid #b7e0c8; }
.form-status.error { display: block; background: #fdecea; color: #a8321f; border: 1px solid #f3c4bc; }

/* inline mini CTA form on home */
.cta-form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: .75rem; }
.cta-form input { padding: .8rem .9rem; border-radius: 999px; border: 0; }
.cta-form .btn { white-space: nowrap; }

/* ----------------------------------------------------------------- */
/* 10. TESTIMONIALS                                                   */
/* ----------------------------------------------------------------- */
.quote-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.quote-card::before {
  content: "\201C";
  font-family: var(--ff-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--gold-500);
  opacity: .35;
  position: absolute;
  top: .6rem; left: 1.2rem;
}
.quote-card blockquote { margin: 1.5rem 0 1.2rem; font-size: 1.05rem; color: var(--ink); line-height: 1.6; }
.quote-meta { display: flex; align-items: center; gap: .8rem; }
.quote-meta .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); }
.quote-meta .who { font-family: var(--ff-display); font-weight: 700; color: var(--navy-900); font-size: .95rem; }
.quote-meta .loc { font-size: .85rem; color: var(--muted); }

/* ----------------------------------------------------------------- */
/* 11. FOOTER                                                         */
/* ----------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #aebccf; padding-block: clamp(3rem, 5vw, 4.5rem) 0; }
.site-footer h5 { color: #fff; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.site-footer a { color: #aebccf; }
.site-footer a:hover { color: var(--gold-400); }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.footer-social { display: flex; gap: 1rem; margin-top: 1.2rem; }
.footer-social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.footer-social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding-block: 1.4rem; font-size: .85rem; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom a { margin-left: 1.2rem; }

/* ----------------------------------------------------------------- */
/* 12. COOKIE BANNER                                                  */
/* ----------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 1rem; left: 1rem; right: 1rem;
  max-width: 560px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.3rem 1.5rem;
  z-index: 1500;
  display: none;
}
.cookie-banner.show { display: block; }
.cookie-banner p { font-size: .9rem; margin-bottom: 1rem; }
.cookie-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.cookie-actions .btn { padding: .6rem 1.2rem; font-size: .9rem; }

/* ----------------------------------------------------------------- */
/* 13. UTILITIES / MISC                                               */
/* ----------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in { opacity: 1; transform: none; }

.media-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.media-frame img { width: 100%; }

.back-to-top {
  position: fixed;
  right: 1.2rem; bottom: 1.2rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 900;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--gold-500); color: var(--navy-900); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fade-up { opacity: 1; transform: none; }
}

/* ============================================================
   Update pass: legibility, link visibility, new sections,
   spacing + responsive polish
   ============================================================ */

/* Keep dark-background text light after base <p> was darkened (Task 8) */
.site-footer p,
.footer-about p { color: #aebccf; }
.section--navy p,
.section--navy li { color: #cdd8e6; }
.page-hero p { color: #c8d4e4; }
.hero p { color: #c8d4e4; }

/* Task 3: make in-content links visible on dark hero backgrounds */
.hero p a,
.page-hero p a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 2px; }
.hero p a:hover,
.page-hero p a:hover { color: #fff; }

/* About Us — Sugarland Petroleum (SLP) intro section (Task 4) */
.slp-intro { align-items: center; }
.slp-logo { max-width: 280px; height: auto; margin-bottom: 1.4rem; }
.slp-collage { width: 100%; height: auto; }
.slp-intro .btn { margin-top: .6rem; }

/* About Us — certificates / "Finding the right opportunity" (Task 4) */
.certs-img { max-width: 360px; width: 100%; height: auto; margin: 1.5rem auto 0; display: block; }
.make-easier { font-weight: 600; color: var(--navy-700); margin-top: .2rem; }

/* SIF — content images (Task 1) */
.sif-chart { width: 100%; max-width: 480px; height: auto; margin: 0 auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.sif-banner { width: 100%; max-width: 340px; height: auto; margin: 0 auto; display: block; border-radius: var(--radius); }
.sif-figure { margin: 1.6rem auto 0; text-align: center; }
.deploy-icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: .6rem; }

/* Legal pages (Privacy / Terms) layout (Tasks 6 & 7) */
.legal-body { max-width: 860px; margin-inline: auto; }
.legal-body h2 { font-size: var(--step-1); margin: 2.2rem 0 .6rem; color: var(--navy-900); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; color: var(--navy-800); }
.legal-body p { margin: 0 0 1rem; line-height: 1.7; }
.legal-body ul { margin: 0 0 1.2rem 1.1rem; }
.legal-body li { margin-bottom: .45rem; line-height: 1.6; }
.legal-body strong { color: var(--navy-900); }

/* Task 9: trim excessive vertical whitespace, tighten rhythm */
.section { padding-block: clamp(2.6rem, 5vw, 4rem); }
.page-hero { padding-block: clamp(2.4rem, 5vw, 3.4rem); }
.section-head { margin-bottom: 1.8rem; }
.section-head.center { margin-inline: auto; }

/* Task 9: responsive refinements for small screens */
@media (max-width: 768px) {
  .slp-intro, .split, .grid-2 { gap: 1.6rem; }
  .certs-img { max-width: 280px; }
  .sif-chart { max-width: 100%; }
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .stat-grid { gap: 1rem; }
}
@media (max-width: 480px) {
  .container { padding-inline: 1.1rem; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
}

/* Task 2: contact form country-code + phone layout */
.phone-row { display: flex; gap: .5rem; }
.phone-row .country-select { flex: 0 0 9.5rem; max-width: 9.5rem; }
.phone-row input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .phone-row { flex-direction: column; }
  .phone-row .country-select { flex-basis: auto; max-width: 100%; }
}

/* SIF deployment icon row */
.deploy-icons { display: flex; gap: 1.4rem; margin: 0 0 1rem; }
.deploy-icons .deploy-icon { margin-bottom: 0; }
.eyebrow h3 { margin: 0; display: inline; }

/* ============================================================
   PHP build: normalise image + font sizes (were rendering large)
   ============================================================ */
.media-frame img { max-width: 460px; width: 100%; height: auto; margin-inline: auto; }
.hero-media img { max-width: 480px; width: 100%; height: auto; margin-inline: auto; }
.hero-split { align-items: center; }
.slp-collage { max-width: 440px; }
.slp-logo { max-width: 210px; }
.certs-img { max-width: 290px; }
.sif-chart { max-width: 480px; }
.deploy-icons .deploy-icon { width: 42px; height: 42px; }
.deploy-icons { gap: 1.1rem; }
.news-featured .news-featured-media img { min-height: 230px; }
.brand img { width: 148px; }
.leader-card img { width: 120px; height: 120px; }
.page-hero h1 { font-size: var(--step-3); }
.hero h1 { font-size: var(--step-4); }
.stat .num { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }

/* tighten section rhythm a touch more on large screens */
@media (min-width: 992px) {
  .section { padding-block: clamp(2.4rem, 3.5vw, 3.4rem); }
}

/* Center the primary navigation on desktop (logo stays left) */
@media (min-width: 993px) {
  .site-header .main-nav { flex: 1 1 auto; justify-content: center; }
}

/* Space the Contact Us button away from the FAQs link in the top nav */
@media (min-width: 993px) {
  .site-header .main-nav a.btn { margin-left: .9rem; }
}

/* ============================================================
   CMS build: styles for markup that is now generated from
   editable content blocks
   ============================================================ */

/* The "Market opportunity" copy on the navy panel used to carry inline
   colour on every <strong>. Rich-text blocks are sanitised, so the emphasis
   colour lives here instead and survives editing. */
.section--navy .navy-prose strong { color: #fff; }
.section--navy .navy-prose p { color: #cdd8e6; }
.section--navy .navy-prose a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 2px; }
.section--navy .navy-prose a:hover { color: #fff; }

/* Optional "last updated" line on the legal pages. */
.legal-updated { color: var(--muted); font-size: var(--step--1); margin-bottom: 1.6rem; }

/* Editable list items may contain links; keep them visible on light panels. */
.feature-list a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 2px; }
.feature-list a:hover { color: var(--gold-600); }
.section--navy .feature-list a { color: var(--gold-400); }
.section--navy .feature-list a:hover { color: #fff; }

/* ============================================================
   Responsive hardening
   Breakpoints: 1400 / 1200 / 992 / 768 / 560 / 420 / 360
   Base layout is mobile-first; these are correctness guards so no
   viewport can produce horizontal overflow or unreachable controls.
   ============================================================ */

/* Nothing may push the page sideways — long URLs, wide images, big numbers. */
.container { width: 100%; }
img, svg, video, iframe { max-width: 100%; }
.legal-body, .faq-a, .card-body, .quote-card blockquote { overflow-wrap: break-word; }
.legal-body a, .footer-contact a { overflow-wrap: anywhere; }

/* Any wide block scrolls inside itself rather than widening the page. */
.legal-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.legal-body pre { overflow-x: auto; }

/* Tap targets: keep interactive elements finger-sized on touch devices. */
@media (hover: none) and (pointer: coarse) {
  .main-nav a, .footer-links a, .footer-contact a { min-height: 44px; display: flex; align-items: center; }
  .footer-social a, .topbar .social a { padding: .35rem; }
  .faq-q { min-height: 48px; }
  .back-to-top { width: 50px; height: 50px; }
}

/* Very wide screens: stop the hero art from dominating. */
@media (min-width: 1400px) {
  .hero-media img { max-width: 520px; }
  .media-frame img { max-width: 500px; }
}

/* Small desktop / large tablet: the 3-up grids get cramped before 992. */
@media (max-width: 1200px) {
  .grid-3 { gap: 1.4rem; }
  .stat-grid { gap: 1.2rem; }
  .news-featured { gap: 1.6rem; }
}

/* Tablet portrait: leadership cards read better 2-up than 3-up. */
@media (max-width: 992px) {
  .leader-card p { font-size: var(--step--1); }
  .deploy-icons { gap: .9rem; }
  .deploy-icons .deploy-icon { width: 38px; height: 38px; }
  .footer-grid { gap: 1.8rem; }
  /* The nav drawer must scroll if the menu is taller than a short viewport. */
  .main-nav { max-height: 100vh; max-height: 100dvh; }
}

@media (max-width: 768px) {
  .topbar .container { justify-content: center; }
  .topbar .social { gap: .4rem; }
  .section-head { margin-bottom: 1.4rem; }
  .quote-card blockquote { font-size: var(--step-0); }
  .form-card { padding: 1.2rem; }
  .faq-help { margin-top: 1.2rem; }
  /* Cards that carried inline 2rem padding get roomier margins back. */
  .card[style*="padding"] { padding: 1.25rem !important; }
}

/* Large phones. */
@media (max-width: 560px) {
  .hero { padding-block: clamp(2rem, 8vw, 3rem); }
  .stat .num { font-size: 1.5rem; }
  .leader-card img { width: 104px; height: 104px; }
  .news-featured .news-featured-media img { min-height: 180px; }
  .slp-logo { max-width: 170px; }
  .footer-bottom .container { gap: .5rem; }
  .legal-body h2 { margin-top: 1.7rem; }
}

/* Small phones (iPhone SE and similar). */
@media (max-width: 420px) {
  .container { padding-inline: .95rem; }
  h1 { font-size: clamp(1.55rem, 8vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .eyebrow { font-size: .68rem; letter-spacing: .1em; }
  .brand img { width: 128px; }
  .stat-grid { gap: .8rem; }
  .stat { padding: 1rem; }
  .card-body { padding: 1rem; }
  .quote-card { padding: 1.1rem; }
  .form-card { padding: 1rem; }
  .cookie-banner { padding: 1rem; }
  .cookie-actions { flex-direction: column; }
  .cookie-actions .btn { width: 100%; justify-content: center; }
  .back-to-top { right: .8rem; bottom: .8rem; }
  .footer-social { flex-wrap: wrap; }
}

/* Narrowest supported width — nothing should clip or overflow at 320px. */
@media (max-width: 360px) {
  .container { padding-inline: .8rem; }
  .deploy-icons { gap: .6rem; }
  .deploy-icons .deploy-icon { width: 32px; height: 32px; }
  .leader-card img { width: 92px; height: 92px; }
  .topbar .container { font-size: .7rem; }
}

/* Short landscape phones: the full-height hero would hide the content. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero, .page-hero { padding-block: 1.6rem; }
  .hero[style*="min-height"] { min-height: auto !important; }
  .main-nav { padding-top: 3.5rem; }
}

/* Print: drop navigation and interactive chrome. */
@media print {
  .topbar, .site-header, .site-footer, .back-to-top, .cookie-banner,
  .nav-toggle, .nav-backdrop, .hero-cta, .form-card { display: none !important; }
  body { color: #000; background: #fff; }
  .section, .page-hero { padding-block: 1rem; }
  a { color: #000; text-decoration: underline; }
  .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Brand mark sizing (2026 logo)
   The logo changed from a 2.65:1 wordmark to a 1.89:1 stacked
   lockup (arc / ARM / INVESTMENTS), so sizing it by width alone
   now drives the header height. Size by height instead and let
   the width follow, which keeps the 76px header intact at every
   breakpoint and makes the mark legible rather than merely small.
   ============================================================ */
/* 66px is the largest the mark can be before it starts driving the header's
   76px min-height, so it reads as prominently as the old wordmark did without
   making the header taller. */
.brand img { width: auto; height: 66px; max-width: 60vw; }

@media (max-width: 992px) {
  .brand img { height: 58px; }
}
@media (max-width: 560px) {
  .brand img { height: 50px; }
}
@media (max-width: 420px) {
  .brand img { height: 44px; }
}
@media (max-width: 360px) {
  .brand img { height: 38px; }
}

/* ============================================================
   Heading levels corrected for document outline (SEO / a11y).
   The footer section headings and these two in-page headings
   were visually right but semantically skipped levels (h2 -> h5,
   h2 -> h4), which breaks the outline screen readers and search
   engines build. Levels are now correct; appearance is unchanged.
   ============================================================ */
.site-footer h2 { color: #fff; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 700; }
.gold-subhead { color: var(--gold-400); font-size: var(--step-0); font-weight: 700; margin-bottom: .6rem; }
.leader-card h3 { margin-bottom: .2rem; font-size: 1.1rem; }

/* ============================================================
   Base element reset
   Bootstrap was loaded but entirely unused (no Bootstrap class,
   no data-bs-* attribute, no jQuery call), so it was removed —
   391 KB of CSS and JS off every page load. The one thing it was
   silently providing was its Reboot normalisation, which these
   rules replace for the elements this site actually uses.
   Without them the browser default figure{margin:0 40px} narrows
   the testimonial cards, and blockquote/button inherit UA styling.
   ============================================================ */
figure { margin: 0; }
figcaption { margin: 0; }
blockquote { margin: 0; }
button { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }