/* =========================================================
   FASAHA VOICE LINK — Design System v2
   Cyan #00AFEF · Blue #24408F · Navy #084D78 · Charcoal #231F20
   Type: Montserrat (300–900), one family, weight-driven hierarchy
   Shape: chamfered / cut corners — never rounded cards
   Motif: the waveform from the mark, run as a connective thread
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&display=swap');

:root{
  --cyan: #00AFEF;
  --cyan-deep: #0090C7;
  --blue: #24408F;
  --navy: #084D78;
  --navy-dark: #0B1C2D;

  --white: #FFFFFF;
  --charcoal: #231F20;
  --mist: #EDEEEF;

  --text: var(--charcoal);
  --text-soft: #5B5A5C;
  --surface: var(--white);
  --surface-muted: var(--mist);

  --font: 'Montserrat', Arial, sans-serif;
  --text-xs: 0.8rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --heading-sm: 1.6rem;
  --heading-md: 2.2rem;
  --heading-lg: 3rem;
  --display: clamp(3.2rem, 9vw, 6rem);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --cut-sm: 14px;
  --cut-md: 24px;
  --cut-lg: 40px;

  --wrap: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

:focus-visible{ outline: 3px solid var(--cyan); outline-offset: 3px; }

.skip-link{
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  background: var(--navy-dark);
  color: var(--white);
  padding: 12px 22px;
  z-index: 100;
  font-weight: 700;
  font-size: var(--text-sm);
  transition: top .2s ease;
}
.skip-link:focus{ top: var(--sp-4); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track{ animation: none !important; }
}

.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-6); }
h1,h2,h3{ font-weight: 800; letter-spacing: -0.01em; }

.eyebrow-rule{ display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--cyan-deep); font-weight: 700; font-size: var(--text-sm); }
.eyebrow-rule::before{ content: ""; width: 34px; height: 3px; background: var(--cyan); }

/* ===== Masthead ===== */
.masthead{ background: var(--navy-dark); color: var(--white); }
.masthead .wrap{ display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); letter-spacing: 0.04em; padding-block: 9px; }
.masthead a{ color: var(--white); opacity: 0.85; }
.masthead a:hover{ opacity: 1; color: var(--cyan); }
.masthead__year{ color: var(--cyan); font-weight: 700; }
.masthead__contact{ display: flex; gap: var(--sp-6); }

/* ===== Header / Nav ===== */
.site-header{ position: sticky; top: 0; z-index: 56; background: rgba(255,255,255,0.98); border-bottom: 1px solid #E4E6E8; }
.site-header .wrap{ display: flex; align-items: center; justify-content: space-between; padding-block: var(--sp-3); }
.brand{ display: flex; align-items: center; }
.brand img{ height: 46px; width: auto; }

.nav{ display: flex; align-items: center; gap: var(--sp-8); }
.nav__links{ display: flex; gap: var(--sp-8); }
.nav__links a{ font-size: var(--text-sm); font-weight: 600; color: var(--navy); position: relative; padding-block: 4px; }
.nav__links a::after{ content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--cyan); transition: width 0.2s ease; }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ width: 100%; }
.nav__links a[aria-current="page"]{ color: var(--cyan-deep); }

.nav-cta{ background: var(--cyan); color: var(--white); font-weight: 700; font-size: var(--text-sm); padding: 12px 22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: background 0.2s ease, transform 0.15s ease; }
.nav-cta:hover{ background: var(--navy); transform: translateY(-1px); }

.nav-toggle{ display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: none; border: none; padding: 10px; position: relative; z-index: 60; }
.nav-toggle span{ width: 24px; height: 2.5px; border-radius: 2px; background: var(--navy); display: block; transition: transform .3s ease, opacity .2s ease, background .2s ease; }
.nav-toggle.is-open span{ background: var(--white); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(8.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-8.5px) rotate(-45deg); }

.nav-overlay{ display: none; }

/* Extra items shown only inside the mobile slide-in panel */
.nav__panel-cta, .nav__panel-contact{ display: none; }

/* ===== On-page sub-nav (About) ===== */
.subnav{ position: sticky; top: 70px; z-index: 30; background: var(--white); border-bottom: 1px solid #E4E6E8; }
.subnav__track{ display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: var(--sp-3); scrollbar-width: none; }
.subnav__track::-webkit-scrollbar{ display: none; }
.subnav a{ flex: none; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; color: var(--navy); padding: 8px 16px; border: 1.5px solid #DDE3E7; white-space: nowrap; transition: all .2s ease; }
.subnav a:hover, .subnav a.is-active{ background: var(--navy-dark); border-color: var(--navy-dark); color: var(--white); }

/* ===== Waveform divider ===== */
.wave-divider{ display: block; width: 100%; height: 34px; color: var(--cyan); }
.wave-divider--soft{ color: #C9E9F8; }
.wave-divider path{ fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Buttons ===== */
.btn{ display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--text-sm); padding: 15px 28px; border: 2px solid transparent; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color .2s ease, box-shadow .2s ease; clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.btn--primary{ background: var(--cyan); color: var(--white); }
.btn--primary:hover{ background: var(--navy); transform: translateY(-2px); }
.btn--ghost{ border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover{ background: var(--navy); color: var(--white); }
.btn--on-dark{ border-color: var(--cyan); color: var(--white); }
.btn--on-dark:hover{ background: var(--cyan); color: var(--navy-dark); }

/* ===== Chamfer utility ===== */
.cut{ clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-md)), calc(100% - var(--cut-md)) 100%, 0 100%); }

/* ===== Hero ===== */
.hero{ position: relative; overflow: hidden; padding-block: var(--sp-24) var(--sp-16); background: var(--white); }
.hero__ghost{ position: absolute; top: -0.12em; left: -0.02em; font-size: clamp(6rem, 22vw, 16rem); font-weight: 900; color: var(--mist); line-height: 1; z-index: 0; user-select: none; white-space: nowrap; }
.hero .wrap{ position: relative; z-index: 1; }
.hero-grid{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-16); align-items: center; }
.hero h1{ font-size: var(--display); line-height: 1.02; margin-top: var(--sp-4); color: var(--navy-dark); }
.hero h1 em{ font-style: normal; color: var(--cyan); }
.hero p.lede{ margin-top: var(--sp-6); font-size: var(--text-lg); color: var(--text-soft); max-width: 46ch; }
.hero__actions{ display: flex; gap: var(--sp-4); margin-top: var(--sp-8); flex-wrap: wrap; }
.hero__figure{ position: relative; animation: float 6s ease-in-out infinite; }
.hero__figure img{ width: 100%; height: auto; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
.hero__figure::before{ content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--cyan); z-index: -1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

/* ===== Page header ===== */
.page-header{ padding-block: var(--sp-20) var(--sp-12); background: var(--surface-muted); position: relative; overflow: hidden; }
.page-header__ghost{ position: absolute; right: -0.03em; top: -0.22em; font-size: clamp(5rem, 16vw, 11rem); font-weight: 900; color: #E3E9EC; z-index: 0; line-height: 1; }
.page-header .wrap{ position: relative; z-index: 1; }
.page-header h1{ font-size: clamp(2.4rem, 5vw, var(--heading-lg)); color: var(--navy-dark); margin-top: var(--sp-4); max-width: 24ch; }
.page-header p{ margin-top: var(--sp-4); max-width: 62ch; color: var(--text-soft); font-size: var(--text-lg); }

/* ===== Sections ===== */
section{ padding-block: var(--sp-20); }
.section--tight{ padding-block: var(--sp-16); }
.section--muted{ background: var(--surface-muted); }
.section--dark{ background: var(--navy-dark); color: var(--white); }
.section--cyan{ background: var(--cyan); color: var(--navy-dark); }

.section-head{ max-width: 62ch; margin-bottom: var(--sp-12); }
.section--dark .section-head .eyebrow-rule{ color: var(--white); }
.section--cyan .section-head .eyebrow-rule{ color: var(--navy-dark); }
.section--dark .section-head .eyebrow-rule::before{ background: var(--white); }
.section--cyan .section-head .eyebrow-rule::before{ background: var(--navy-dark); }
.section-head h2{ font-size: var(--heading-md); margin-top: var(--sp-3); color: var(--navy-dark); }
.section--dark .section-head h2{ color: var(--white); }
.section--cyan .section-head h2{ color: var(--navy-dark); }
.section--dark .section-head p{ color: #C7D6E4; }
.section--cyan .section-head p{ color: var(--navy-dark); }
.section-head p{ margin-top: var(--sp-4); color: var(--text-soft); font-size: var(--text-lg); }

/* ===== Grids ===== */
.grid{ display: grid; gap: var(--sp-8); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }

.card{ background: var(--white); border: 1px solid #E4E6E8; border-top: 4px solid var(--cyan); padding: var(--sp-8) var(--sp-6) var(--sp-6); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 34px rgba(8,30,48,0.12); }
.card__num{ font-size: var(--text-xs); font-weight: 800; color: var(--cyan-deep); letter-spacing: 0.06em; }
.card h3{ font-size: var(--heading-sm); margin-top: var(--sp-3); color: var(--navy-dark); }
.card p{ margin-top: var(--sp-3); color: var(--text-soft); font-size: var(--text-sm); }
.card--on-dark{ background: #0F2A40; border: 1px solid #17415F; border-top: 4px solid var(--cyan); color: var(--white); }
.card--on-dark h3{ color: var(--white); }
.card--on-dark p{ color: #B9CCDA; }

.tile{ display: flex; gap: var(--sp-4); align-items: flex-start; }
.tile__icon{ flex: none; width: 52px; height: 52px; background: var(--cyan); display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: transform .25s ease; }
.tile:hover .tile__icon{ transform: rotate(-8deg) scale(1.08); }
.tile__icon svg{ width: 26px; height: 26px; stroke: var(--white); fill: none; stroke-width: 2; }
.tile h3{ font-size: var(--text-lg); color: var(--navy-dark); }
.tile p{ margin-top: var(--sp-2); color: var(--text-soft); font-size: var(--text-sm); }

.split{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }

.check-list li{ display: flex; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid #E4E6E8; font-size: var(--text-sm); }
.check-list li:first-child{ padding-top: 0; }
.check-list li::before{ content: ""; flex: none; width: 9px; height: 9px; margin-top: 7px; background: var(--cyan); }

/* ===== Language pills w/ flags ===== */
.pills{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pill{ display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--cyan); color: var(--navy); font-weight: 600; font-size: var(--text-sm); padding: 8px 20px 8px 10px; border-radius: 9999px; background: var(--white); }
.pill--filled{ background: var(--navy); color: var(--white); border-color: var(--navy); }
.pill img{ width: 22px; height: 16px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.pill__flag--sign{ width: 22px; height: 22px; display: grid; place-items: center; background: var(--cyan); border-radius: 50%; }
.pill--filled .pill__flag--sign{ background: var(--white); }
.pill__flag--sign svg{ width: 14px; height: 14px; stroke: var(--white); fill: none; stroke-width: 2.2; }
.pill--filled .pill__flag--sign svg{ stroke: var(--navy); }

/* ===== Marquee (partners + languages) ===== */
.marquee{ overflow: hidden; position: relative; -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; align-items: center; gap: var(--sp-10); width: max-content; animation: marquee-left 42s linear infinite; }
.marquee__track--reverse{ animation-name: marquee-right; animation-duration: 30s; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marquee-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes marquee-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }
.marquee__logo{ height: 56px; width: auto; flex: none; filter: grayscale(1) opacity(0.55); transition: filter .25s ease, transform .25s ease; }
.marquee__logo:hover{ filter: grayscale(0) opacity(1); transform: translateY(-3px); }
.marquee--pills .marquee__track{ gap: var(--sp-5); }

/* ===== Gallery ===== */
.gallery{ display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: var(--sp-4); }
.gallery__item{ position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.gallery__item--wide{ grid-column: span 2; }
.gallery__item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery__item:hover img{ transform: scale(1.07); }
.gallery__caption{ position: absolute; inset: auto 0 0 0; padding: var(--sp-4); background: linear-gradient(0deg, rgba(8,30,48,0.88), transparent); color: var(--white); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; transform: translateY(6px); opacity: 0.92; }

/* ===== Timeline ===== */
.timeline{ position: relative; }
.timeline::before{ content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(to bottom, var(--cyan) 0 8px, transparent 8px 16px); }
.timeline__item{ position: relative; padding-left: 84px; padding-bottom: var(--sp-12); }
.timeline__item:last-child{ padding-bottom: 0; }
.timeline__num{ position: absolute; left: 0; top: 0; width: 56px; height: 56px; background: var(--navy-dark); color: var(--cyan); font-weight: 800; font-size: 1.4rem; display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); transition: transform .3s ease; }
.timeline__item:hover .timeline__num{ transform: scale(1.1) rotate(-6deg); }
.timeline__item h3{ font-size: var(--heading-sm); color: var(--navy-dark); }
.timeline__item p{ margin-top: var(--sp-2); color: var(--text-soft); max-width: 60ch; }

/* ===== Process teaser (Home) ===== */
.process-teaser{ display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.process-teaser__step{ text-align: center; }
.process-teaser__num{ width: 44px; height: 44px; margin-inline: auto; background: var(--cyan); color: var(--white); font-weight: 800; display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.process-teaser__step p{ margin-top: var(--sp-3); font-size: var(--text-xs); font-weight: 700; color: var(--navy-dark); }

/* ===== Featured photo band ===== */
.photo-band{ position: relative; height: 460px; overflow: hidden; }
.photo-band img{ width: 100%; height: 100%; object-fit: cover; }
.photo-band__overlay{ position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,30,48,0.85) 0%, rgba(8,30,48,0.35) 55%, rgba(8,30,48,0.1) 100%); display: flex; align-items: center; }
.photo-band__text{ color: var(--white); max-width: 44ch; padding-inline: var(--sp-6); }
.photo-band__text p.eyebrow-rule{ color: var(--cyan); }
.photo-band__text h2{ font-size: var(--heading-md); margin-top: var(--sp-3); }

/* ===== CTA band ===== */
.cta-band{ background: var(--navy-dark); color: var(--white); padding-block: var(--sp-16); position: relative; overflow: hidden; }
.cta-band .wrap{ display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.cta-band h2{ font-size: var(--heading-md); max-width: 16ch; }
.cta-band p{ color: #B9CCDA; margin-top: var(--sp-2); }

/* ===== Contact ===== */
.contact-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-16); }
.contact-info{ background: var(--navy-dark); color: var(--white); padding: var(--sp-10); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%); }
.contact-info h3{ font-size: var(--text-lg); color: var(--cyan); margin-top: var(--sp-8); }
.contact-info h3:first-child{ margin-top: 0; }
.contact-info p, .contact-info a{ color: #D8E4EC; font-size: var(--text-sm); margin-top: var(--sp-2); display: block; }
.contact-info a:hover{ color: var(--cyan); }
.social-row{ display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.social-row a{ width: 40px; height: 40px; border: 1.5px solid #2C5470; display: grid; place-items: center; transition: all .2s ease; }
.social-row a:hover{ border-color: var(--cyan); background: rgba(0,175,239,0.12); transform: translateY(-2px); }
.social-row svg{ width: 18px; height: 18px; stroke: var(--cyan); fill: none; stroke-width: 2; }

.field{ margin-bottom: var(--sp-5); }
.field label{ display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; color: var(--navy-dark); margin-bottom: var(--sp-2); }
.field input, .field textarea, .field select{ width: 100%; padding: 13px 16px; border: 1.5px solid #D5D9DC; background: var(--white); color: var(--text); appearance: none; }
.field select{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23084D78' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--cyan); outline: none; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form-note{ font-size: var(--text-xs); color: var(--text-soft); margin-top: var(--sp-3); }
.form-success{ display: none; align-items: center; gap: var(--sp-3); background: #E7F8EF; border-left: 4px solid #1E9A5B; padding: var(--sp-4) var(--sp-5); font-size: var(--text-sm); font-weight: 600; color: #14603A; margin-bottom: var(--sp-5); }
.form-success.is-visible{ display: flex; }
.form-error{ display: none; align-items: center; gap: var(--sp-3); background: #FBEAEA; border-left: 4px solid #C23B3B; padding: var(--sp-4) var(--sp-5); font-size: var(--text-sm); font-weight: 600; color: #7A1F1F; margin-bottom: var(--sp-5); }
.form-error.is-visible{ display: flex; }
.btn[disabled]{ opacity: 0.65; cursor: not-allowed; transform: none !important; }

/* ===== Footer ===== */
.site-footer{ background: var(--navy-dark); color: #B9CCDA; padding-block: var(--sp-16) var(--sp-8); }
.footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-10); }
.footer-brand img{ height: 40px; margin-bottom: var(--sp-4); }
.footer-brand p{ font-size: var(--text-sm); max-width: 32ch; }
.footer-col h4{ color: var(--white); font-size: var(--text-sm); letter-spacing: 0.04em; margin-bottom: var(--sp-4); }
.footer-col li{ margin-bottom: var(--sp-2); font-size: var(--text-sm); }
.footer-col a:hover{ color: var(--cyan); }
.footer-bottom{ margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid #17324A; display: flex; justify-content: space-between; font-size: var(--text-xs); flex-wrap: wrap; gap: var(--sp-3); }
.footer-bottom a{ text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover{ color: var(--cyan); }

/* ===== Preloader (home only) ===== */
.preloader{ position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--cyan), var(--navy-dark)); transition: clip-path 0.9s cubic-bezier(.77,0,.18,1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.preloader.is-done{ clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); pointer-events: none; }
.preloader__inner{ text-align: center; color: var(--white); }
.preloader__mark{ width: 46px; height: 46px; margin-inline: auto; animation: mark-pop 0.8s ease; }
@keyframes mark-pop{ 0%{ transform: scale(0.4); opacity: 0; } 60%{ transform: scale(1.12); opacity: 1; } 100%{ transform: scale(1); } }
.preloader__bars{ display: flex; gap: 4px; align-items: flex-end; height: 20px; justify-content: center; margin-top: var(--sp-4); }
.preloader__bars span{ width: 4px; background: var(--white); animation: bar-pulse 1.1s ease-in-out infinite; }
.preloader__bars span:nth-child(1){ animation-delay: 0s; } .preloader__bars span:nth-child(2){ animation-delay: 0.1s; }
.preloader__bars span:nth-child(3){ animation-delay: 0.2s; } .preloader__bars span:nth-child(4){ animation-delay: 0.3s; }
.preloader__bars span:nth-child(5){ animation-delay: 0.4s; } .preloader__bars span:nth-child(6){ animation-delay: 0.3s; }
.preloader__bars span:nth-child(7){ animation-delay: 0.2s; } .preloader__bars span:nth-child(8){ animation-delay: 0.1s; }
.preloader__bars span:nth-child(9){ animation-delay: 0s; }
@keyframes bar-pulse{ 0%, 100%{ height: 5px; opacity: 0.6; } 50%{ height: 20px; opacity: 1; } }
.preloader__word{ margin-top: var(--sp-4); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.03em; height: 1.4em; position: relative; }
.preloader__word span{ position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.preloader__word span.is-active{ opacity: 1; transform: translateY(0); }
.preloader__progress{ width: 140px; height: 2px; background: rgba(255,255,255,0.25); margin: var(--sp-4) auto 0; overflow: hidden; }
.preloader__progress span{ display: block; height: 100%; width: 0%; background: var(--white); transition: width 1.3s cubic-bezier(.4,0,.2,1); }

body.is-loading{ overflow: hidden; }

/* ===== Reveal-on-load (hero) ===== */
.reveal{ opacity: 0; transform: translateY(14px); }
body:not(.is-loading) .reveal{ animation: reveal-up 0.7s ease forwards; }
body.is-loading .reveal{ animation: none; }
@keyframes reveal-up{ to{ opacity: 1; transform: translateY(0); } }
.reveal--1{ animation-delay: 0.05s; } .reveal--2{ animation-delay: 0.16s; } .reveal--3{ animation-delay: 0.27s; }

/* ===== Scroll reveal (whole site) ===== */
.reveal-io{ opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal-io.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-io-group > *{ opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal-io-group.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-io-group.is-visible > *:nth-child(1){ transition-delay: .05s; }
.reveal-io-group.is-visible > *:nth-child(2){ transition-delay: .12s; }
.reveal-io-group.is-visible > *:nth-child(3){ transition-delay: .19s; }
.reveal-io-group.is-visible > *:nth-child(4){ transition-delay: .26s; }
.reveal-io-group.is-visible > *:nth-child(5){ transition-delay: .33s; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap: var(--sp-10); }
  .split{ grid-template-columns: 1fr; gap: var(--sp-10); }
  .grid--3{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .process-teaser{ grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
  .gallery{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .gallery__item--wide{ grid-column: span 2; }
  .photo-band{ height: 380px; }
}

@media (max-width: 760px){
  .nav__links{
    position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 340px);
    background: var(--navy-dark); flex-direction: column; align-items: stretch;
    padding: 96px var(--sp-8) var(--sp-8); gap: 0;
    box-shadow: -18px 0 40px rgba(0,0,0,0.25);
    transform: translateX(100%); transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    z-index: 55; overflow-y: auto;
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__links li{ border-bottom: 1px solid rgba(255,255,255,0.1); }
  .nav__links li:first-child{ border-top: 1px solid rgba(255,255,255,0.1); }
  .nav__links a{ color: var(--white); font-size: var(--text-lg); display: block; padding-block: 16px; }
  .nav__links a::after{ display: none; }
  .nav__links a[aria-current="page"]{ color: var(--cyan); }

  .nav__links li{ opacity: 0; transform: translateX(16px); transition: opacity .35s ease, transform .35s ease; }
  .nav__links.is-open li{ opacity: 1; transform: translateX(0); }
  .nav__links.is-open li:nth-child(1){ transition-delay: .08s; }
  .nav__links.is-open li:nth-child(2){ transition-delay: .13s; }
  .nav__links.is-open li:nth-child(3){ transition-delay: .18s; }
  .nav__links.is-open li:nth-child(4){ transition-delay: .23s; }
  .nav__links.is-open li:nth-child(5){ transition-delay: .28s; }
  .nav__links.is-open li:nth-child(6){ transition-delay: .33s; }

  .nav-toggle{ display: flex; }
  .nav-cta{ display: none; }

  .nav-overlay{
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(8,20,32,0.65);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .nav-overlay.is-open{ opacity: 1; pointer-events: auto; }

  .nav__panel-cta{
    display: block; border: none !important; margin-top: var(--sp-6); padding-top: 0 !important;
  }
  .nav__panel-cta a{ display: flex; justify-content: center; align-items: center; padding: 15px 20px; color: var(--white); }
  .nav__panel-contact{
    display: flex; flex-direction: column; gap: var(--sp-2);
    border: none !important; margin-top: var(--sp-6); padding-top: 0 !important;
  }
  .nav__panel-contact a{ padding-block: 3px; color: #B9CCDA; font-size: var(--text-sm); font-weight: 500; }
  .nav__panel-contact a:hover{ color: var(--cyan); }

  body.nav-open{ overflow: hidden; }
  .grid--3{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: var(--sp-8); }
  .field-row{ grid-template-columns: 1fr; }
  .cta-band .wrap{ flex-direction: column; align-items: flex-start; }
  .process-teaser{ grid-template-columns: repeat(5, 1fr); }
  .process-teaser__step p{ font-size: 0.65rem; }
  .gallery{ grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery__item--wide{ grid-column: span 1; }
  .timeline{ padding-left: 0; }
  .timeline__item{ padding-left: 66px; }
  .timeline__num{ width: 46px; height: 46px; font-size: 1.15rem; }
  .timeline::before{ left: 22px; }
}

@media (max-width: 520px){
  .grid--3, .grid--2{ grid-template-columns: 1fr; }
  section{ padding-block: var(--sp-12); }
  .hero{ padding-block: var(--sp-16) var(--sp-10); }
  .process-teaser{ grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-4); }
  .photo-band{ height: 320px; }
}