/* ==========================================================================
   SIMORGH — sections.css
   Section-specific layout. Everything here uses tokens from variables.css.
   ========================================================================== */

/* ==========================================================================
   HERO — 184-frame canvas
   ========================================================================== */

/* The runway. 100vh of hero + the scroll distance the sequence plays over.
   --sg-scroll-hero is a unitless percentage (160), so it is multiplied by
   1vh here — one token still controls the whole ratio. */
.hero-pin {
  position: relative;
  height: calc(100vh + var(--sg-scroll-hero) * 1vh);
}

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--sg-teal-900);
  isolation: isolate;
}

/* Without JS the runway collapses and the hero becomes an ordinary block. */
html:not(.sg-js) .hero-pin { height: auto; }
html:not(.sg-js) .hero { position: relative; }

.hero__stage { position: absolute; inset: 0; z-index: 0; }

/* Frame 001 as a plain image: this is the LCP element and it is on screen
   before a single line of sequence JS runs. */
.hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% center;   /* matches the canvas crop bias */
}
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .5s var(--sg-ease-out);
}
.hero.is-ready .hero__canvas { opacity: 1; }
.hero.is-ready .hero__poster { opacity: 0; transition: opacity .5s var(--sg-ease-out); }
.hero.is-static .hero__canvas { display: none; }

/* STATIC HERO LAYOUT
   The animated hero stacks all three captions in one grid cell and reveals
   them one at a time. With no animation there is nothing to reveal them in
   sequence, so the cell must become normal flow — otherwise every caption
   renders on top of every other one. */
.hero.is-static .hero__beats {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-5);
  min-height: 0;
}
.hero.is-static .hero__beat {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hero.is-static .hero__beat:not(.is-visible) { display: none; }
.hero.is-static .hero__cue { display: none; }

/* Legibility scrim. Deepens as the sequence settles so the closing
   positioning line and CTAs hold contrast against the bright room. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,48,46,.55) 0%, rgba(0,48,46,.12) 32%, rgba(0,48,46,.10) 60%, rgba(0,48,46,.62) 100%);
  opacity: .85;
  transition: opacity var(--sg-dur-slow) var(--sg-ease-out);
}
.hero.is-settled .hero__veil { opacity: 1; }

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Three rows: a flexible spacer, the captions, then the actions.
   Nothing is absolutely positioned, so nothing can overlap anything. */
.hero__inner {
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  align-items: center;
  height: 100%;
  padding-top: var(--sg-nav-h);
  padding-bottom: clamp(64px, 10vh, 104px);
  text-align: center;
}

/* All three captions share one grid cell. The cell is as tall as the
   tallest of them, so swapping caption does not shift the layout by a
   single pixel and the actions below never get pushed. */
.hero__beats {
  grid-row: 2;
  display: grid;
  grid-template-areas: "stack";
  align-items: center;
  justify-items: center;
  min-height: clamp(160px, 22vh, 240px);
}
.hero__beat {
  grid-area: stack;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--sg-ease-out), transform .6s var(--sg-ease-out);
  pointer-events: none;
}
.hero__beat.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.hero__wordmark {
  color: var(--sg-gold-600);
  letter-spacing: .04em;
  margin-bottom: var(--sg-s-3);
}
.hero__tagline {
  font-family: var(--sg-font-label);
  font-size: clamp(.8125rem, .7rem + .5vw, 1rem);
  font-weight: var(--sg-fw-semi);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sg-burg-700);
  margin: 0 auto;
  max-width: none;
}
.hero__line {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-fw-bold);
  font-size: clamp(1.625rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.14;
  letter-spacing: var(--sg-ls-head);
  color: var(--sg-white);
  margin: 0 auto;
  max-width: none;
}
.hero__positioning {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-fw-bold);
  font-size: clamp(1.1875rem, .9rem + 1.7vw, 2.125rem);
  line-height: 1.6;
  letter-spacing: var(--sg-ls-head);
  color: var(--sg-white);
  margin: 0 auto;
  max-width: 36ch;
}

.hero__actions {
  grid-row: 3;
  display: flex;
  gap: var(--sg-s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(24px, 4vh, 40px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--sg-ease-out), transform .6s var(--sg-ease-out);
}
.hero.is-settled .hero__actions,
.hero.is-static  .hero__actions { opacity: 1; transform: translateY(0); }

.hero__cue {
  position: absolute;
  left: 50%; bottom: var(--sg-s-5);
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--sg-s-2);
  font-family: var(--sg-font-label);
  font-size: 10px; font-weight: var(--sg-fw-semi);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  transition: opacity var(--sg-dur-fast);
}
.hero__cue span {
  width: 1px; height: 30px;
  background: linear-gradient(180deg, var(--sg-gold-300), transparent);
}
.hero.is-moving .hero__cue { opacity: 0; pointer-events: none; }

/* Loading hairline — the "subtle loading indicator" of brief §8. */
.hero::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 2px; z-index: 4;
  width: calc(var(--load, 0) * 100%);
  background: var(--sg-gold-500);
  opacity: .7;
  transition: width .3s linear, opacity .4s;
}
.hero.is-loaded::after { opacity: 0; }

@media (max-width: 767px) {
  .hero__inner { text-align: left; }
  .hero__beats { justify-items: start; min-height: clamp(180px, 26vh, 260px); }
  .hero__tagline, .hero__line, .hero__positioning { margin-inline: 0; }
  .hero__actions { justify-content: flex-start; }
  .hero__actions .sg-btn { flex: 1 1 100%; }
  .hero__cue { display: none; }
  .page-hero {
 
    background-position: right!important;
  
}
.svc-hero__bg {
 
    object-position: right center!important;
}
}

/* No JS: the hero becomes an ordinary stacked block, fully readable. */
html:not(.sg-js) .hero { height: auto; min-height: 0; }
html:not(.sg-js) .hero__inner { grid-template-rows: none; padding-block: var(--sg-s-9); }
html:not(.sg-js) .hero__beats { display: block; min-height: 0; }
html:not(.sg-js) .hero__beat { opacity: 1; transform: none; margin-bottom: var(--sg-s-5); }
html:not(.sg-js) .hero__actions { opacity: 1; transform: none; }
html:not(.sg-js) .hero__cue { display: none; }


/* ==========================================================================
   MARQUEE — assistive technology experience centre
   Continuous auto-loop. Nothing here is tied to scroll position, so moving
   through this section behaves exactly like every other section.
   ========================================================================== */

.marquee {
  margin-top: var(--sg-s-7);
  overflow: hidden;
  /* Fades both edges so cards enter and leave instead of being chopped off
     at the viewport boundary. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--sg-s-5);
  width: max-content;
  animation: sg-marquee 56s linear infinite;
  will-change: transform;
}

/* -50% is exactly one full set of six cards, because the track holds the set
   twice. Any other value and the loop visibly jumps. */
@keyframes sg-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee__item { flex: 0 0 320px; }
.marquee__item .sg-card__media { background: var(--sg-teal-800); }

/* Pause on hover and on keyboard focus — a visitor reading a card should not
   have it slide away from under them. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* Set by the IntersectionObserver when the section is off screen, and by the
   reduced-motion path. */
.marquee.is-paused .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee__track { animation: none; width: auto; }
}

@media (max-width: 767px) {
  .marquee__item { flex: 0 0 264px; }
  .marquee__track { animation-duration: 42s; }
}

/* ==========================================================================
   FACILITY — full-width architectural showcase
   ========================================================================== */

.facility { position: relative; overflow: hidden; background: var(--sg-teal-900); }
.facility__media { height: clamp(380px, 62vh, 680px); }
.facility__media img { width: 100%; height: 120%; object-fit: cover; }
.facility__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-block: var(--sg-s-7);
  background: linear-gradient(180deg, transparent, rgba(0,48,46,.9));
}


/* ==========================================================================
   CHIPS ROW
   ========================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: var(--sg-s-3); }


/* ==========================================================================
   PAGE HERO — inner pages
   ========================================================================== */

.page-hero {
    position: relative;
    background: url(../img/inner-bg.jpg);
    color: var(--sg-text-invert);
    padding-block: clamp(120px, 16vh, 180px) var(--sg-s-5);
    overflow: hidden;
    background-position: bottom;
    background-size: cover;
}
.page-hero h1 { color: var(--sg-white); max-width: 20ch; }
.page-hero .sg-lede { margin-top: var(--sg-s-4); color: var(--sg-white); }
.page-hero__crumbs { margin-bottom: var(--sg-s-6); }
.page-hero .sg-crumbs { color: var(--sg-text-invert-muted); }
.page-hero .sg-crumbs a:hover { color: var(--sg-white); }
.page-hero .sg-crumbs [aria-current="page"] { color: var(--sg-teal-500); }


/* ==========================================================================
   ASSET PLACEHOLDERS
   Every one of these marks a client asset that is still outstanding. They
   are deliberately visible rather than filled with stock photography, so
   nothing ships looking finished when it is not (brief §39).
   ========================================================================== */

.placeholder {
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,89,85,.045) 14px 28px),
    var(--sg-teal-100);
  border: 1px dashed var(--sg-border-strong);
  display: grid; place-items: center;
}
.placeholder__inner {
  position: static !important;
  padding: var(--sg-s-5);
  max-width: 30ch;
  text-align: center;
  font-family: var(--sg-font-mono);
  font-size: var(--sg-fs-xs);
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--sg-teal-700);
}
.sg-on-dark .placeholder { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
.sg-on-dark .placeholder__inner { color: var(--sg-text-invert-muted); }


/* ==========================================================================
   SPLIT-HEADING LINE MASKS (used by animations.js)
   ========================================================================== */

.line-mask { display: block; overflow: hidden; }
.line { display: block; }


/* ==========================================================================
   FORM PAGE
   ========================================================================== */

.form-card {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-md);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--sg-sh-2);
}
.form-note {
  display: flex; gap: var(--sg-s-3);
  padding: var(--sg-s-4);
  background: var(--sg-teal-100);
  border-radius: var(--sg-r-sm);
  font-size: var(--sg-fs-xs);
  color: var(--sg-text-soft);
  margin-bottom: var(--sg-s-6);
}

/* Map facade — iframe only loads on click */
.map-facade { cursor: pointer; position: relative; }
.map-facade::after {
  content: "Load map";
  position: absolute; inset: auto auto 16px 16px;
  background: var(--sg-white); color: var(--sg-teal-700);
  padding: 10px 18px; border-radius: var(--sg-r-sm);
  font-size: var(--sg-fs-xs); font-weight: var(--sg-fw-semi);
  box-shadow: var(--sg-sh-2);
}


/* ==========================================================================
   STICKY COLUMNS
   CSS position:sticky, not a ScrollTrigger pin. A pin without spacing was
   what let the next section ride up over this one.
   ========================================================================== */

@media (min-width: 992px) {
  [data-sticky-pin] {
    position: sticky;
    top: calc(var(--sg-nav-h-scrolled) + var(--sg-s-6));
    align-self: start;
  }
}

/* ==========================================================================
   SECTION RHYTHM GUARDS
   Two adjacent sections sharing a surface would read as one over-long block,
   so the seam gets a hairline instead of doubled padding.
   ========================================================================== */



/* Nothing may exceed the viewport width and create a horizontal scrollbar,
   which on touch devices reads as the page "sliding" while scrolling. */
main, section { max-width: 100vw; }


/* ==========================================================================
   CARD MEDIA
   Fixed aspect so a replacement photograph of any size drops in without
   changing the card height or re-flowing the row.
   ========================================================================== */

.sg-card__media img { width: 100%; height: 100%; object-fit: cover; }

.sg-card__body img {
    border-radius: 10px;
}
/* ==========================================================================
   SERVICE PAGES
   ========================================================================== */

/* ---- banner hero ---- */
.svc-hero {
  position: relative;
  overflow: hidden;
  background: var(--sg-teal-900);
  padding-block: clamp(140px, 18vh, 200px) clamp(56px, 8vh, 88px);
}
.svc-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .9;
}
.svc-hero__inner { position: relative; z-index: 1; }
.svc-hero .sg-crumbs { margin-bottom: var(--sg-s-5); color: var(--sg-text-invert-muted); }
.svc-hero .sg-crumbs a { color: inherit; }
.svc-hero .sg-crumbs a:hover { color: var(--sg-white); }
.svc-hero .sg-crumbs [aria-current="page"] { color: var(--sg-gold-200); }
.svc-hero h1 { color: var(--sg-white); max-width: 18ch; }
.svc-hero .sg-lede { max-width: 54ch; margin-top: var(--sg-s-4);  color: var( --sg-teal-050);}
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sg-s-3); margin-top: var(--sg-s-6); }

/* ---- sticky summary card ---- */
.svc-aside__card {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-top: 3px solid var(--sg-accent);
  border-radius: var(--sg-r-md);
  padding: var(--sg-s-6);
  box-shadow: var(--sg-sh-2);
}
.svc-aside__count {
  display: block;
  font-family: var(--sg-font-display);
  font-weight: var(--sg-fw-extra);
  font-size: 3rem;
  line-height: 1;
  color: var(--sg-teal-700);
  letter-spacing: -0.03em;
}
.svc-aside__label {
  font-size: var(--sg-fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
  margin: var(--sg-s-2) 0 var(--sg-s-5);
}
.svc-aside__list { margin: 0 0 var(--sg-s-5); }
.svc-aside__list li {
  position: relative;
  padding: 7px 0 7px var(--sg-s-5);
  font-size: var(--sg-fs-sm);
  color: var(--sg-text-soft);
  border-bottom: 1px solid var(--sg-border);
}
.svc-aside__list li::before {
  content: "";
  position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sg-accent);
}
.svc-aside__list li.is-more { color: var(--sg-text-muted); font-style: italic; border-bottom: 0; }
.svc-aside__list li.is-more::before { background: var(--sg-border-strong); }




section#robotic img {
    margin-bottom: 20px;
    border-radius: 20px;
    mask-image: radial-gradient(circle, black 60%, rgba(0, 0, 0, 0.2) 100%);
    -webkit-mask-image: radial-gradient(circle, #000000a8 60%, rgb(0 0 0 / 0%) 100%);
}


.sg-surface-dark img {
    border-radius: 20px;
}
section#serv2{
position: relative;
    overflow: clip;

}

section#serv2 img {
    margin-top: 20px;
    border-radius: 20px;
    mask-image: radial-gradient(circle, black 60%, rgba(0, 0, 0, 0.2) 100%);
    -webkit-mask-image: radial-gradient(circle, #000000a8 60%, rgb(0 0 0) 100%);
}

section#serv3 img {
  width: 100%;
      margin-bottom: 20px;
       mask-image: radial-gradient(circle, black 60%, rgba(0, 0, 0, 0.2) 100%);
    -webkit-mask-image: radial-gradient(circle, #000000a8 60%, rgb(0 0 0 / 0%) 100%);
}

h3.sg-card__title.OC {
    color: inherit;
    font-weight: 600;
    line-height: 26px;
}





/* ---- service item cards ---- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sg-s-4);
}
.svc-card {
  position: relative;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-md);
  padding: var(--sg-s-6) var(--sg-s-5) var(--sg-s-5);
  transition: border-color var(--sg-dur-fast) var(--sg-ease-out),
              box-shadow var(--sg-dur-fast) var(--sg-ease-out),
              transform var(--sg-dur-fast) var(--sg-ease-out);
}
.svc-card:hover {
  border-color: var(--sg-border-strong);
  box-shadow: var(--sg-sh-3);
  transform: translateY(-3px);
}
/* The gold rule grows on hover — the same gesture as the buttons and the
   eyebrow device, so the page has one idea rather than several. */
.svc-card::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--sg-accent);
  transform: scaleX(0); transform-origin: left;
  border-radius: 0 0 0 var(--sg-r-md);
  transition: transform var(--sg-dur-fast) var(--sg-ease-out);
}
.svc-card:hover::after { transform: scaleX(1); }

.svc-card__num {
  position: absolute; top: var(--sg-s-4); right: var(--sg-s-5);
  font-size: var(--sg-fs-xs);
  font-weight: var(--sg-fw-semi);
  letter-spacing: .1em;
  color: var(--sg-border-strong);
}
.svc-card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--sg-s-4);
  background: var(--sg-teal-100);
  border-radius: var(--sg-r-sm);
  color: var(--sg-teal-700);
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card:hover .svc-card__icon { background: var(--sg-teal-700); color: var(--sg-white); }
.svc-card__title { font-size: 1.0625rem; font-weight: var(--sg-fw-semi); line-height: 1.35; }
.svc-card__text { font-size: var(--sg-fs-sm); color: var(--sg-text-muted); margin-top: var(--sg-s-2); }

/* ---- condition cards are links ---- */
.cond-card { text-decoration: none; display: block; }

/* ---- other programmes ---- */
.svc-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sg-s-3); }
.svc-link {
  display: flex; align-items: center; gap: var(--sg-s-4);
  padding: var(--sg-s-4) var(--sg-s-5);
  border: 1px solid var(--sg-border-invert);
  border-radius: var(--sg-r-md);
  text-decoration: none;
  transition: border-color var(--sg-dur-fast) var(--sg-ease-out),
              background var(--sg-dur-fast) var(--sg-ease-out);
}
.svc-link:hover { border-color: var(--sg-gold-300); background: rgba(255,255,255,.05); }
.svc-link__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: var(--sg-r-sm);
  background: rgba(255,255,255,.08);
  color: var(--sg-gold-200);
}
.svc-link__icon svg { width: 22px; height: 22px; }
.svc-link__name { display: block; font-weight: var(--sg-fw-semi); color: var(--sg-white); font-size: var(--sg-fs-sm); }
.svc-link__note { display: block; font-size: var(--sg-fs-xs); color: var(--sg-text-invert-muted); margin-top: 2px; }

@media (max-width: 991px) {
  .svc-aside { margin-top: var(--sg-s-6); }
}


/* Two adjacent sections on the same surface would read as one over-long
   block, so the seam gets a hairline rather than doubled padding. */
.sg-surface-light + .sg-surface-light,
.sg-surface-tint  + .sg-surface-tint { border-top: 1px solid var(--sg-border); }
.sg-surface-dark  + .sg-surface-dark,
.sg-surface-deep  + .sg-surface-deep { border-top: 1px solid var(--sg-border-invert); }

/* Bootstrap's .row is display:flex; the marquee track must not inherit
   row gutters. */
.marquee__track { --bs-gutter-x: 0; }