/* ==========================================================================
   Seashore Medical & Industrial Waste Factory
   style.css — page sections (home hero, splits, bands) & per-page layouts
   ========================================================================== */

/* ==========================================================================
   Home hero
   ========================================================================== */
.smw-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(90vh, 860px);
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(4.5rem, 9vw, 7rem);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* ---- Hero slideshow stack ----------------------------------------------
   .smw-hero__media holds one .smw-hero__slide per photo. Slides crossfade
   via opacity; each active slide runs a slow Ken Burns pan/zoom. The
   advance timer lives in js/main.js (section 11).
   ------------------------------------------------------------------------ */
.smw-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background-color: var(--smw-navy-900);
}

.smw-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--smw-hero-fade) ease-in-out;
  will-change: opacity;
}

.smw-hero__slide.is-active {
  opacity: 1;
}

.smw-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
}

/* Ken Burns runs while a slide is on screen and keeps running through the
   fade-out (.is-leaving) so the outgoing photo never snaps back. */
.smw-hero__slide.is-active img,
.smw-hero__slide.is-leaving img {
  animation: var(--smw-hero-kb, smw-kb-zoom-in) var(--smw-hero-kb-time) linear both;
}

/* A different move per slide keeps the loop from feeling mechanical. */
.smw-hero__slide:nth-child(1) { --smw-hero-kb: smw-kb-zoom-in; }
.smw-hero__slide:nth-child(2) { --smw-hero-kb: smw-kb-settle; }
.smw-hero__slide:nth-child(3) { --smw-hero-kb: smw-kb-zoom-out; }
.smw-hero__slide:nth-child(4) { --smw-hero-kb: smw-kb-pan-right; }
.smw-hero__slide:nth-child(5) { --smw-hero-kb: smw-kb-drift-up; }
.smw-hero__slide:nth-child(6) { --smw-hero-kb: smw-kb-pan-left; }

@keyframes smw-kb-zoom-in {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -0.8%, 0); }
}

@keyframes smw-kb-zoom-out {
  from { transform: scale(1.15) translate3d(1.2%, 0.8%, 0); }
  to   { transform: scale(1.02) translate3d(0, 0, 0); }
}

/* For photos whose subject already fills the frame (the signed facade): ends
   at scale 1 so nothing important is cropped once the slide has settled. */
@keyframes smw-kb-settle {
  from { transform: scale(1.09) translate3d(0, -1%, 0); }
  to   { transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes smw-kb-pan-left {
  from { transform: scale(1.12) translate3d(2%, 0.4%, 0); }
  to   { transform: scale(1.12) translate3d(-2%, -0.4%, 0); }
}

@keyframes smw-kb-pan-right {
  from { transform: scale(1.12) translate3d(-2%, -0.4%, 0); }
  to   { transform: scale(1.12) translate3d(2%, 0.4%, 0); }
}

@keyframes smw-kb-drift-up {
  from { transform: scale(1.04) translate3d(0, 1.6%, 0); }
  to   { transform: scale(1.16) translate3d(0, -1.6%, 0); }
}

/* Silent opening video layered over the slides. It stays invisible until
   main.js confirms playback (.is-video on the hero), so a blocked autoplay
   or a slow connection never leaves a black hole behind the headline. When
   it finishes, main.js drops .is-video: the video fades out over 1.2 s while
   the slide underneath un-pauses its Ken Burns move — a dissolve, not a cut. */
.smw-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}

.smw-hero.is-video .smw-hero__video {
  opacity: 1;
}

/* While the video is up, hold the slideshow underneath (no wasted Ken Burns). */
.smw-hero.is-video .smw-hero__slide img {
  animation-play-state: paused;
}

/* No JS, or motion turned down: the first photo simply stays put. */
.no-js .smw-hero__slide:first-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .smw-hero__slide.is-active img,
  .smw-hero__slide.is-leaving img {
    animation: none;
    transform: scale(1.02);
  }
}

.smw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--smw-grad-hero);
}

.smw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-radial-gradient(circle at 106% 118%,
    transparent 0 120px, rgba(255, 255, 255, 0.04) 120px 122px);
  pointer-events: none;
}

.smw-hero__inner {
  max-width: 780px;
}

.smw-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.15rem;
  margin-bottom: 1.6rem;
  border-radius: var(--smw-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--smw-font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.smw-hero__label .smw-i {
  color: var(--smw-emerald-bright);
  width: 1.05em;
  height: 1.05em;
}

.smw-hero h1 {
  color: #fff;
  margin-bottom: 0.5em;
}

.smw-hero__accent {
  background: var(--smw-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.smw-hero__lead {
  max-width: 620px;
  font-size: var(--smw-fs-lead);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 2.2rem;
}

.smw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.95rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.smw-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.smw-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.52rem 1.05rem;
  border-radius: var(--smw-radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--smw-font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.smw-hero__trust .smw-i {
  color: var(--smw-emerald-bright);
}

/* ==========================================================================
   Facility tour (home page video section)
   ========================================================================== */
.smw-tour {
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(31, 169, 113, 0.22), transparent 70%),
    var(--smw-grad-navy);
}

.smw-tour__player {
  position: relative;
  margin: 0 auto;
  max-width: 1160px;
  border-radius: var(--smw-radius-lg);
  overflow: hidden;
  background: #041a12;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.smw-tour__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 690;
  background: #041a12;
}

/* Big play affordance over the poster; hidden as soon as playback starts. */
.smw-tour__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(72px, 8vw, 96px);
  height: clamp(72px, 8vw, 96px);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--smw-green-900);
  font-size: 2.1rem;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(255, 255, 255, 0.14);
  transition: transform var(--smw-dur) var(--smw-ease),
              background var(--smw-dur) var(--smw-ease),
              opacity var(--smw-dur) var(--smw-ease);
}

.smw-tour__play .smw-i {
  margin-left: 0.12em; /* optical centring of the triangle */
}

.smw-tour__play:hover,
.smw-tour__play:focus-visible {
  transform: scale(1.06);
  background: #fff;
}

.smw-tour__player.is-playing .smw-tour__play {
  opacity: 0;
  pointer-events: none;
}

/* Caption overlays the bottom of the poster (so the figure is exactly the
   video's height and the play button centres on the picture). It gets out of
   the way once native controls appear. */
.smw-tour__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 2.2rem 1.25rem 0.95rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  pointer-events: none;
  transition: opacity var(--smw-dur) var(--smw-ease);
}

.smw-tour__player.is-playing .smw-tour__caption {
  opacity: 0;
}

.smw-tour__caption .smw-i {
  color: var(--smw-emerald-bright);
}

/* ==========================================================================
   Home — intro split extras
   ========================================================================== */
.smw-intro__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.9rem;
}

/* ==========================================================================
   Sector split sections (medical / industrial on home & landing pages)
   ========================================================================== */
.smw-sector {
  position: relative;
}

.smw-sector__list-title {
  font-family: var(--smw-font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smw-muted-2);
  margin: 1.6rem 0 0.85rem;
}

/* ==========================================================================
   Safety section
   ========================================================================== */
.smw-safety__panel {
  padding: 1.7rem 1.8rem;
  border-radius: var(--smw-radius);
  background: #fff;
  border: 1px solid var(--smw-line);
  box-shadow: var(--smw-shadow-sm);
}

/* ==========================================================================
   Group band (Backed by Seashore Group)
   ========================================================================== */
.smw-group-band {
  background:
    radial-gradient(640px 320px at 90% 20%, rgba(31, 169, 113, 0.08), transparent 70%),
    var(--smw-bg-soft);
  border-block: 1px solid var(--smw-line);
}

.smw-group-band__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}

.smw-group-band__mark {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  /* Neutral shadow — the Seashore Group seal is navy, so the old green glow
     no longer belonged under it. */
  filter: drop-shadow(0 10px 22px rgba(20, 22, 60, 0.18));
}

.smw-group-band h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-bottom: 0.4rem;
}

.smw-group-band p {
  color: var(--smw-muted);
  font-size: 0.98rem;
  max-width: 640px;
  margin: 0;
}

/* ==========================================================================
   Sustainability band (home, dark)
   ========================================================================== */
.smw-sustain {
  position: relative;
  overflow: hidden;
}

.smw-sustain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at -6% 116%, transparent 0 105px, rgba(255, 255, 255, 0.045) 105px 107px),
    radial-gradient(900px 520px at 92% -12%, rgba(31, 169, 113, 0.32), transparent 70%);
  pointer-events: none;
}

.smw-sustain > .smw-container {
  position: relative;
}

/* ==========================================================================
   Services page — detail rows
   ========================================================================== */
.smw-service-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
  border-top: 1px solid var(--smw-line);
  scroll-margin-top: calc(var(--smw-nav-h) + 24px);
}

.smw-service-detail:first-of-type {
  border-top: 0;
}

.smw-service-detail__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}

.smw-service-detail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 17px;
  background: var(--smw-grad-brand);
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 8px 18px rgba(23, 140, 93, 0.28);
}

.smw-service-detail h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin: 0;
}

.smw-service-detail__aside {
  padding: 1.6rem 1.6rem;
  border-radius: var(--smw-radius);
  background: var(--smw-bg-soft);
  border: 1px solid var(--smw-line);
  position: sticky;
  top: calc(var(--smw-nav-h) + 24px);
}

.smw-service-detail__aside h3 {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smw-muted-2);
  margin-bottom: 0.9rem;
}

/* ==========================================================================
   About page — vision & mission / values
   ========================================================================== */
.smw-vm-card {
  position: relative;
  height: 100%;
  padding: 2.1rem 1.9rem 1.9rem;
  border-radius: var(--smw-radius);
  background: #fff;
  border: 1px solid var(--smw-line);
  box-shadow: var(--smw-shadow-sm);
  overflow: hidden;
}

.smw-vm-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--smw-grad-brand);
}

.smw-vm-card .smw-i {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--smw-emerald-strong);
  margin-bottom: 1rem;
}

.smw-vm-card blockquote {
  margin: 0;
  color: var(--smw-muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* ==========================================================================
   Sustainability page — commitment rows
   ========================================================================== */
.smw-commit {
  display: flex;
  gap: 1.3rem;
  padding: 1.8rem 1.7rem;
  height: 100%;
  background: #fff;
  border: 1px solid var(--smw-line);
  border-radius: var(--smw-radius);
  box-shadow: var(--smw-shadow-sm);
  transition: transform var(--smw-dur) var(--smw-ease),
              box-shadow var(--smw-dur) var(--smw-ease),
              border-color var(--smw-dur) var(--smw-ease);
}

.smw-commit:hover {
  transform: translateY(-5px);
  box-shadow: var(--smw-shadow-lg);
  border-color: rgba(31, 169, 113, 0.4);
}

.smw-commit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--smw-bg-mist);
  color: var(--smw-green-700);
  font-size: 1.45rem;
}

.smw-commit h3 {
  font-size: 1.12rem;
  margin-bottom: 0.4rem;
}

.smw-commit p {
  font-size: 0.94rem;
  color: var(--smw-muted);
  margin: 0;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.smw-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.smw-contact-card {
  display: flex;
  gap: 1.05rem;
  align-items: flex-start;
  padding: 1.4rem 1.45rem;
  background: #fff;
  border: 1px solid var(--smw-line);
  border-radius: var(--smw-radius);
  box-shadow: var(--smw-shadow-sm);
  transition: transform var(--smw-dur) var(--smw-ease),
              border-color var(--smw-dur) var(--smw-ease);
}

.smw-contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 169, 113, 0.4);
}

.smw-contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--smw-grad-brand);
  color: #fff;
  font-size: 1.3rem;
}

.smw-contact-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.2rem;
}

.smw-contact-card p,
.smw-contact-card a {
  font-size: 0.94rem;
  color: var(--smw-muted);
  margin: 0;
  word-break: break-word;
}

.smw-contact-card a:hover {
  color: var(--smw-green-700);
}

/* Direct-contact panel — replaces the old inquiry form on contact.html */
.smw-reach {
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--smw-line);
  border-radius: var(--smw-radius-lg);
  box-shadow: var(--smw-shadow-lg);
}

.smw-reach > h2 {
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}

.smw-reach > .smw-lead {
  font-size: 1rem;
  margin-bottom: 1.9rem;
}

.smw-reach__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
}

.smw-reach__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 0.85rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--smw-line);
  border-radius: var(--smw-radius);
  background: var(--smw-bg-soft);
  color: var(--smw-ink);
  transition: border-color var(--smw-dur) var(--smw-ease),
              transform var(--smw-dur) var(--smw-ease),
              box-shadow var(--smw-dur) var(--smw-ease);
}

.smw-reach__card:hover,
.smw-reach__card:focus-visible {
  color: var(--smw-ink);
  border-color: var(--smw-emerald);
  transform: translateY(-2px);
  box-shadow: var(--smw-shadow-md);
}

.smw-reach__icon {
  grid-row: 1 / 4;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--smw-grad-brand);
  color: #fff;
}

.smw-reach__label {
  font-family: var(--smw-font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smw-muted-2);
}

.smw-reach__value {
  font-family: var(--smw-font-head);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.smw-reach__hint {
  font-size: 0.82rem;
  color: var(--smw-muted);
  margin-top: 0.15rem;
}

.smw-reach__note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.6rem;
  padding: 1.05rem 1.2rem;
  border-radius: var(--smw-radius-sm);
  background: rgba(31, 169, 113, 0.08);
  border: 1px solid rgba(31, 169, 113, 0.24);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--smw-green-800);
}

.smw-reach__note .smw-i {
  margin-top: 0.2em;
  flex-shrink: 0;
  color: var(--smw-emerald);
}

/* ==========================================================================
   Permits, licences & certifications (about.html#certificates)
   ========================================================================== */
.smw-cred-heading {
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  margin: 0 0 1.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--smw-line);
}

.smw-cred-heading:not(:first-of-type) {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.smw-cred-note {
  margin: -0.35rem 0 1.4rem;
  max-width: 78ch;
  color: var(--smw-muted);
  font-size: 0.93rem;
  line-height: 1.7;
}

.smw-cred-grid {
  display: grid;
  gap: 1.25rem;
}

.smw-cred-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smw-cred-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.smw-cred {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.65rem;
  background: #fff;
  border: 1px solid var(--smw-line);
  border-radius: var(--smw-radius);
  box-shadow: var(--smw-shadow-sm);
  transition: border-color var(--smw-dur) var(--smw-ease),
              box-shadow var(--smw-dur) var(--smw-ease);
}

.smw-cred:hover {
  border-color: var(--smw-emerald);
  box-shadow: var(--smw-shadow-md);
}

.smw-cred__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.05rem;
  border-radius: 13px;
  background: var(--smw-grad-brand);
  color: #fff;
}

.smw-cred h4 {
  font-size: 1.12rem;
  margin-bottom: 0.35rem;
}

.smw-cred__issuer {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--smw-green-800);
}

.smw-cred__issuer span {
  font-weight: 500;
  color: var(--smw-muted);
}

.smw-cred__meta {
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.55rem;
}

.smw-cred__meta > div {
  display: grid;
  grid-template-columns: minmax(9.5rem, auto) minmax(0, 1fr);
  gap: 0.85rem;
  font-size: 0.88rem;
  line-height: 1.6;
}

.smw-cred__meta dt {
  font-family: var(--smw-font-head);
  font-weight: 700;
  color: var(--smw-muted-2);
}

.smw-cred__meta dd {
  margin: 0;
  color: var(--smw-ink);
}

.smw-cred--compact .smw-cred__meta > div {
  grid-template-columns: auto minmax(0, 1fr);
}

.smw-cred__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-family: var(--smw-font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--smw-green-700);
}

.smw-cred__link:hover {
  color: var(--smw-emerald);
}

/* ==========================================================================
   Legal pages & 404
   ========================================================================== */
.smw-prose {
  max-width: 780px;
}

.smw-prose h2 {
  font-size: 1.35rem;
  margin-top: 2.2rem;
}

.smw-prose p,
.smw-prose li {
  color: var(--smw-muted);
}

.smw-404 {
  min-height: 55vh;
  display: flex;
  align-items: center;
  text-align: center;
}

.smw-404__code {
  font-family: var(--smw-font-head);
  font-size: clamp(4.5rem, 12vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  background: var(--smw-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}