/* ===========================================================================
   Fiji layer — Pacific (masi/tapa) accents over the shared Solar Hub brand.
   Additive only: the core tokens (navy + solar gold) are unchanged. Loaded
   after components.css/main.css so these accents sit on top.
   =========================================================================== */

/* --- Hero kicker: warm Fijian greeting (Bula) ---------------------------- */
.hero-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}
.hero-kicker .wave { color: var(--on-dark); font-weight: 600; }

/* --- Masi signature strip along the top edge of the footer --------------- */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: url("/assets/img/masi-strip.svg") repeat-x left center;
  background-size: auto 14px;
  opacity: 0.95;
}

/* --- Faint masi watermark behind the dark "Why solar in Fiji" band ------- */
.impact {
  position: relative;
  overflow: hidden;
}
.impact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/img/masi-tile.svg") repeat center;
  background-size: 96px 96px;
  opacity: 0.06; /* barely-there emboss — premium, not loud */
}
.impact > .container {
  position: relative;
  z-index: 1;
}

/* --- Photography-forward homepage hero ----------------------------------- */
/* Only the homepage uses .hero (inner pages use .page-hero), so this layers a
   real solar photo behind the navy brand gradient — kept dark on the left for
   AA text contrast, letting the photo breathe on the right behind the calc. */
.hero {
  background:
    linear-gradient(
      104deg,
      rgba(10, 63, 95, 0.94) 0%,
      rgba(12, 36, 56, 0.86) 42%,
      rgba(12, 36, 56, 0.5) 100%
    ),
    url("/assets/img/case-studies/project-2/01.jpg") center / cover no-repeat;
}

/* --- About section (3-column: stats | copy | features+media) ------------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr 1.05fr;
  gap: var(--s-10);
  align-items: start;
}
.about-stats { display: flex; flex-direction: column; gap: var(--s-5); }
.about-stat .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.about-stat .l { margin-top: var(--s-2); color: var(--text-mid); font-size: var(--fs-sm); }
.about-stat--boxed {
  background: var(--ink);
  border-radius: var(--r);
  padding: var(--s-6);
  box-shadow: var(--sh);
}
.about-stat--boxed .n { color: var(--accent); }
.about-stat--boxed .l { color: var(--on-dark-mid); }

.about-copy h2 { margin-top: var(--s-3); }
.about-copy .btn { margin-top: var(--s-5); }

.about-side__intro { color: var(--text-mid); margin-bottom: var(--s-5); }
.about-features { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.about-features li { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; color: var(--text); }
.about-features .ic { width: 1.3em; height: 1.3em; color: var(--green); flex: none; }

.about-media { position: relative; margin-bottom: var(--s-10); }
.about-media__img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh); display: block; }
.about-callout {
  position: absolute;
  right: var(--s-4);
  bottom: calc(-1 * var(--s-8));
  max-width: 270px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r);
  padding: var(--s-6);
  box-shadow: var(--sh-lg);
}
.about-callout p { margin: 0 0 var(--s-4); font-weight: 600; line-height: 1.45; }
.about-callout .go {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}
.about-callout .go:hover { filter: brightness(1.06); text-decoration: none; }
.about-callout .go .ic { width: 1.25em; height: 1.25em; }

@media (max-width: 1040px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-side { grid-column: 1 / -1; }
  .about-side .about-media { max-width: 560px; }
}
@media (max-width: 700px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .about-callout { position: static; max-width: none; margin-top: var(--s-4); }
  .about-media { margin-bottom: 0; }
}

/* --- Partners & memberships strip ---------------------------------------- */
.partners p {
  text-align: center;
  color: var(--text-soft);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: var(--s-6);
}
.partners-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-8), 6vw, var(--s-20));
}
.partners-logos img {
  height: 44px;
  width: auto;
  opacity: 0.9;
}
.partners-logos img:hover { opacity: 1; }

/* --- Slim top utility bar (desktop only) --------------------------------- */
:root { --topbar-h: 38px; }
.topbar { display: none; }

@media (min-width: 920px) {
  .topbar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 102; /* above promo (101) + header (100) */
    height: var(--topbar-h);
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: 0 var(--s-8);
    background: var(--ink);
    color: var(--on-dark-mid);
    font-size: 0.82rem;
    line-height: 1;
  }
  .topbar a { color: var(--on-dark); }
  .topbar a:hover { color: var(--accent); text-decoration: none; }
  .topbar__left { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
  .topbar__left .ic {
    width: 1.05em;
    height: 1.05em;
    color: var(--accent);
    vertical-align: -0.18em;
    margin-right: 0.35em;
  }
  .topbar__hq { color: var(--on-dark-mid); }
  .topbar__social { display: flex; align-items: center; gap: var(--s-5); }

  /* Push the fixed header (and hero clearance) down by the bar height. */
  .site-header { top: var(--topbar-h); }
  .has-promo .promo { top: var(--topbar-h); }
  .has-promo .site-header { top: calc(var(--topbar-h) + var(--promo-h)); }
  .hero { padding-top: calc(var(--header-h) + var(--topbar-h) + var(--s-16)); }
}

/* --- Clean logo treatment (no white boxes, full colour) ------------------- */
.trust-logos img {
  mix-blend-mode: normal;
  filter: none;
  opacity: 0.92;
}
.trust-logos img:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}
.trust-logos { gap: clamp(2rem, 6vw, 4.5rem); }
.partners-logos img { height: 48px; }

/* --- "As seen in" press marquee ------------------------------------------ */
.press-band { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.press-band__label {
  text-align: center;
  color: var(--text-soft);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: var(--s-8);
}
.marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
  width: max-content;
  animation: sh-marquee 30s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee a { flex: none; display: inline-flex; align-items: center; }
.marquee img {
  height: clamp(26px, 3.4vw, 40px);
  width: auto;
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.marquee a:hover img { opacity: 1; }
@keyframes sh-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: clamp(2rem, 6vw, 4.5rem);
  }
}

/* --- Unified credentials / proof panel ----------------------------------- */
.proof-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem);
  max-width: 1060px;
  margin: 0 auto;
}
.proof-cred { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 3.5rem); }
.proof-col:first-child {
  border-right: 1px solid var(--line);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.proof-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: var(--text-soft);
  margin: 0 0 var(--s-6);
}
.proof-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  min-height: 48px;
}
.proof-logos img {
  height: 44px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.proof-logos img:hover { opacity: 1; transform: translateY(-2px); }
.proof-press {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.proof-press .proof-label { margin-bottom: var(--s-5); }
@media (max-width: 760px) {
  .proof-cred { grid-template-columns: 1fr; gap: var(--s-8); }
  .proof-col:first-child {
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--s-8);
  }
}

/* --- Answer-first intro: editorial "deck", not a notice box --------------- */
/* The GEO value is the text, not the box — present it as a clean intro lead. */
.answer-block {
  max-width: 60ch;
  margin: 0 auto var(--s-12);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  text-align: center;
}
.answer-block p {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  line-height: 1.5;
  color: var(--text-mid);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.answer-block strong,
.answer-block b { color: var(--ink); font-weight: 700; }

/* --- Inner-page heroes: photo backdrop behind the navy overlay ------------ */
/* Each .page-hero sets --hero-img (per page); falls back to the brand radial
   gradient if unset. Overlay tuned for centered white text + the bottom curve. */
.page-hero {
  background:
    linear-gradient(180deg, rgba(12,36,56,0.82) 0%, rgba(10,63,95,0.74) 45%, rgba(12,36,56,0.9) 100%),
    var(--hero-img, none) center / cover no-repeat,
    radial-gradient(120% 120% at 85% -20%, #1c7aa8 0%, var(--brand) 42%, var(--brand-deep) 100%);
}
.page-hero::before {
  background: radial-gradient(circle, rgba(255, 198, 56, 0.22) 0%, rgba(255, 198, 56, 0) 60%);
}

/* --- Video case-study / testimonial cards -------------------------------- */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-8);
}
.vid-card { display: flex; flex-direction: column; }
.vid-card .video-frame { cursor: pointer; }
.vid-card__body { padding: var(--s-4) var(--s-1) 0; }
.vid-card__tag {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-2);
}
.vid-card h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.vid-card__meta { color: var(--text-soft); font-size: var(--fs-sm); margin: 0 0 var(--s-2); }
.vid-card p { color: var(--text-mid); margin: 0; }
.vid-card .video-frame .play span { width: 64px; height: 64px; font-size: 1.4rem; }

/* --- Equipment brands marquee (chips) ------------------------------------ */
.brand-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 var(--s-4); white-space: nowrap; }
.brand-chip .b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--ink); }
.brand-chip .c { font-size: var(--fs-sm); color: var(--text-soft); }
.brand-chip img { height: 38px; width: auto; opacity: 0.9; }

/* --- Case study: "Your Solution" spec cards ------------------------------ */
.solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-6); }
.solution-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-6); box-shadow: var(--sh-sm); }
.solution-card h3 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.solution-card .brand { font-weight: 700; color: var(--brand); margin: 0 0 var(--s-2); }
.solution-card .spec { font-weight: 700; color: var(--ink); margin: 0 0 var(--s-1); }
.solution-card .detail { color: var(--text-mid); font-size: var(--fs-sm); margin: 0; }

/* --- Case study photo gallery -------------------------------------------- */
.cs-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-4); }
.cs-gallery a { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); }
.cs-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; display: block; transition: transform 0.3s ease; }
.cs-gallery a:hover img { transform: scale(1.03); }

/* --- Install crew grid (team photos) ------------------------------------- */
.crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.crew-grid a { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); }
.crew-grid img { width: 100%; height: 300px; object-fit: cover; display: block; transition: transform 0.3s ease; }
.crew-grid a:hover img { transform: scale(1.03); }
@media (max-width: 600px) { .crew-grid img { height: 240px; } }

/* --- Self-hosted case-study video --------------------------------------- */
.cs-video { max-width: 920px; margin: 0 auto; }
.cs-video video { width: 100%; height: auto; display: block; border-radius: var(--r-lg); box-shadow: var(--sh-lg); background: #000; }
.cs-video--portrait { max-width: 400px; }

/* --- Rosie Holidays flagship case study --------------------------------- */
.rosie-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-4);
  text-align: center;
}
.rosie-stat {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e7ebf0);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-4);
  box-shadow: var(--sh-sm);
}
.rosie-stat .num {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.05;
  color: var(--navy, #0c2438);
  letter-spacing: -0.02em;
}
.rosie-stat .num .unit { font-size: 0.45em; font-weight: 700; color: var(--accent); margin-left: 0.15em; }
.rosie-stat .lab { display: block; margin-top: var(--s-2); color: var(--muted, #5a6b7b); font-weight: 600; font-size: 0.95rem; }

.rosie-team { margin: 0 auto; max-width: 760px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); background: #000; }
.rosie-team img { width: 100%; height: auto; display: block; }
.rosie-team figcaption { background: var(--navy, #0c2438); color: #fff; font-weight: 600; font-size: 0.95rem; padding: var(--s-3) var(--s-4); text-align: center; }

.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.partner-card { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md, var(--sh-sm)); background: #000; }
.partner-card img { width: 100%; height: 320px; object-fit: cover; display: block; }
.partner-card figcaption { background: var(--navy, #0c2438); color: #fff; font-weight: 600; font-size: 0.95rem; padding: var(--s-3) var(--s-4); text-align: center; }

.rosie-press { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.press-link {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: #fff; border: 1px solid var(--line, #e7ebf0); border-radius: var(--r-lg);
  padding: var(--s-5); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.press-link:hover { transform: translateY(-3px); box-shadow: var(--sh-md, var(--sh-sm)); border-color: var(--accent); }
.press-link__outlet { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.press-link__title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; color: var(--navy, #0c2438); font-size: 1.05rem; line-height: 1.25; }
.press-link__cta { margin-top: auto; font-weight: 600; color: var(--navy, #0c2438); }

/* Flagship feature band (homepage) + featured card (hub / commercial) */
.flagship {
  display: block; text-decoration: none;
  position: relative; overflow: hidden;
  background-color: #0c2438; /* solid fallback so text is always on dark */
  background-image: linear-gradient(135deg, #0c2438 0%, #12314b 60%, #1a3f5e 100%);
  color: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.flagship, .flagship:hover, .flagship h2, .flagship p, .flagship span { text-decoration: none; }
.flagship__grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.flagship__media { position: relative; min-height: 320px; }
.flagship__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flagship__body { padding: clamp(1.75rem, 4vw, 3rem); }
.flagship__body .eyebrow { color: var(--accent); }
.flagship__body h2 { color: #fff; margin: var(--s-2) 0 var(--s-3); }
.flagship__body p { color: #cdd9e5; }
.flagship__badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 var(--s-5); }
.flagship__badges span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #eaf2f9; font-weight: 600; font-size: 0.85rem; padding: 0.3rem 0.7rem; border-radius: 999px; }
@media (max-width: 760px) {
  .flagship__grid { grid-template-columns: 1fr; }
  .flagship__media { min-height: 220px; }
  .partner-card img { height: 240px; }
}