/* ==========================================================================
   MARINE CRAFT — design system (v2)
   Editorial dark-navy layout: deep navy field, teal accent lifted straight
   from the brand logo, Lora for display type and Plus Jakarta Sans for
   body/UI. Plain CSS by design — no framework, no build step, so the
   client can edit and upload a single file.

   Shared by index.php, contact.php, gallery.php and news.php.
   ========================================================================== */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  /* Colour — anchored on the logo's teal (#32969D) and navy (#12284F) */
  --navy-deep:  #06162E;   /* page field / darkest surface                 */
  --navy:       #0A1F3C;   /* primary dark section                         */
  --navy-soft:  #102A4E;   /* raised card surface on dark                  */
  --navy-line:  #1B355C;   /* hairline on dark                             */

  --teal:       #32969D;   /* BRAND teal — logo mark                       */
  --teal-bright:#4FBAC2;   /* brightened for small text on dark (AA)       */
  --teal-ink:   #1F6B71;   /* darkened for small text on light (AA)        */
  --teal-glow:  rgba(50,150,157,.16);

  --white:      #FFFFFF;
  --sand:       #F4F1EC;   /* warm off-white light section                 */
  --ink:        #0B1B32;   /* body text on light                           */
  --ink-soft:   #5A6B84;   /* secondary text on light                      */
  --fog:        #9DB0C9;   /* secondary text on dark                       */

  --line:       rgba(11,27,50,.12);          /* hairline on light          */
  --line-dark:  rgba(157,176,201,.18);       /* hairline on dark           */

  /* Type */
  --font-display:"Lora", Georgia, "Times New Roman", serif;
  --font-body:   "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --section-pad: clamp(5rem, 11vw, 10rem);
  --gutter:      clamp(1.25rem, 4vw, 3.5rem);
  --maxw:        1320px;
  --radius:      3px;
  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  /* Poster fallback for news items that have no video thumbnail yet */
  --yacht-fallback:url('https://images.unsplash.com/photo-1569263979104-865ab7cd8d13?auto=format&fit=crop&w=1600&q=70');
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
/* Lenis drives scrolling (see main.js); native smooth-scroll would fight it,
   so it is only enabled as a fallback when Lenis is absent. */
html:not(.lenis) { scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:1rem;
  line-height:1.7;
  color:var(--white);
  background:var(--navy-deep);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--teal); color:var(--white); }

:focus-visible{ outline:2px solid var(--teal-bright); outline-offset:3px; }

.container{
  width:min(var(--maxw), 100% - 2*var(--gutter));
  margin-inline:auto;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--white);
  text-wrap:balance;
}
.on-light h1,.on-light h2,.on-light h3,.on-light h4{ color:var(--ink); }

h1{ font-size:clamp(2.6rem, 6.4vw, 5.6rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.6rem); line-height:1.3; }
h3{ font-size:clamp(1.15rem, 1.6vw, 1.4rem); }

em{ font-style:italic; color:var(--teal-bright); }
.on-light em{ color:var(--teal-ink); }

/* Section eyebrow — the technical coordinate motif carried through the site */
.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-size:.7rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--fog);
}
.eyebrow::before{
  content:""; width:2.2rem; height:1px; background:var(--teal); flex-shrink:0;
}
.eyebrow .coord{
  color:var(--teal-bright); letter-spacing:.18em; font-weight:500;
  font-variant-numeric:tabular-nums;
}
.on-light .eyebrow{ color:var(--ink-soft); }
.on-light .eyebrow .coord{ color:var(--teal-ink); }

.section-title{
  font-size:clamp(2rem, 4.4vw, 3.6rem);
  margin:1.4rem 0 1.6rem;
  max-width:18ch;
}
.section-lead{
  color:var(--fog); max-width:58ch; font-size:1.02rem; line-height:1.75;
}
.on-light .section-lead{ color:var(--ink-soft); }

/* ==========================================================================
   Animation primitives (GSAP drives these — see main.js)
   Pre-set the hidden state here so nothing flashes before JS runs; the
   no-GSAP fallback in main.js clears them straight back to visible.
   ========================================================================== */
.reveal{ opacity:0; }
.split-line{ display:block; overflow:hidden; }
.split-inner{ display:block; will-change:transform; }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.word-inner{ display:inline-block; will-change:transform; }
/* Image reveals: the frame wipes open, the photo settles out of a zoom. */
.img-reveal{ overflow:hidden; position:relative; }
.img-reveal img{ width:100%; height:100%; object-fit:cover; }

@media (prefers-reduced-motion: reduce){
  html:not(.lenis){ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; }
}

/* ==========================================================================
   Buttons
   A circular fill grows out of the centre on hover while the trailing
   arrow swaps to a leading one (per the supplied button-effect2.html),
   kept on the site's fully-rounded pill radius rather than that file's
   16px corners. Arrows are separate spans so setLang() can rewrite only
   .btn-text and leave them intact.
   ========================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 2.1rem; border-radius:999px; overflow:hidden;
  border:1px solid transparent; isolation:isolate;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; top:50%; left:50%;
  width:120%; padding-bottom:120%; border-radius:50%;
  background:var(--btn-fill, var(--teal));
  transform:translate(-50%,-50%) scale(0);
  transition:transform .45s cubic-bezier(.25,1,.5,1);
  z-index:-1;
}
.btn:hover::before{ transform:translate(-50%,-50%) scale(2.2); }
.btn:hover{ transform:translateY(-2px); }

.btn-text,.btn-ar{ position:relative; z-index:1; }
.btn-ar{
  font-size:1.35em; font-weight:300; line-height:1;
  overflow:hidden; white-space:nowrap;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease,
             max-width .35s ease, margin .35s ease;
}
.btn-ar-l{ opacity:0; max-width:0; margin-right:0; transform:translateX(-15px); }
.btn-ar-r{ opacity:.85; max-width:24px; margin-left:12px; transform:translateX(0); }
.btn:hover .btn-ar-l{ opacity:1; max-width:24px; margin-right:12px; transform:translateX(0); }
.btn:hover .btn-ar-r{ opacity:0; max-width:0; margin-left:0; transform:translateX(15px); }

/* Variants only pick the resting colours and the colour the circle brings in */
.btn-solid{ background:var(--teal); color:var(--white); border-color:var(--teal); --btn-fill:#17565B; }
.btn-solid:hover{ border-color:#17565B; }
.btn-ghost{ color:var(--white); border-color:var(--line-dark); --btn-fill:var(--teal); }
.btn-ghost:hover{ border-color:var(--teal); }
.btn-navy{ color:var(--ink); border-color:var(--line); --btn-fill:var(--teal); }
.btn-navy:hover{ color:var(--white); border-color:var(--teal); }

@media (prefers-reduced-motion: reduce){
  .btn::before{ display:none; }
  .btn-ar-l{ display:none; }
}

/* ==========================================================================
   3. About — full-bleed, one photo anchored to each edge
   ========================================================================== */
.mission{
  position:relative; margin-top:2rem; padding-left:2.6rem;
  font-family:var(--font-display); font-style:italic;
  font-size:1.18rem; line-height:1.6; color:var(--ink);
}
.mission::before{
  content:"\201C"; position:absolute; left:0; top:-.4rem;
  font-family:var(--font-display); font-style:normal; font-size:3.6rem;
  line-height:1; color:var(--teal);
}

.craft-points{ margin-top:2.8rem; border-top:1px solid var(--line); }
.feature-row{
  display:flex; gap:1.6rem; align-items:baseline;
  padding:1.6rem 0; border-bottom:1px solid var(--line);
}
.feature-num{
  flex-shrink:0; width:2ch;
  font-family:var(--font-display); font-size:1.5rem; color:var(--teal-ink);
  font-variant-numeric:tabular-nums;
}
.feature-body h3{ color:var(--ink); margin-bottom:.35rem; }
.feature-body p{ color:var(--ink-soft); font-size:.95rem; }

@media (max-width:1000px){
  .about-grid{ grid-template-columns:1fr; }
  .about-img{ min-height:300px; }
  .about-copy{ padding-inline:var(--gutter); margin-block:1.5rem; }
}

/* ==========================================================================
   4. Services — numbered editorial grid on navy
   ========================================================================== */
.services{ padding-block:var(--section-pad); background:var(--navy); position:relative; }
.services-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap;
}
.services-rule{
  height:1px; background:var(--line-dark); margin-bottom:3.4rem;
  transform:scaleX(0); transform-origin:left;
}
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
  perspective:1400px;
}
.service-card{
  position:relative; overflow:hidden;
  background:var(--navy-soft); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:3rem 1.9rem 2.2rem;
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.service-card:hover{
  border-color:rgba(79,186,194,.45);
  box-shadow:0 24px 48px rgba(3,10,22,.45);
}
.service-card-index{
  position:absolute; top:1.1rem; right:1.4rem; pointer-events:none;
  font-family:var(--font-display); font-size:3rem; line-height:1;
  color:rgba(79,186,194,.16); transition:color .45s var(--ease);
  font-variant-numeric:tabular-nums;
}
.service-card:hover .service-card-index{ color:rgba(79,186,194,.34); }
/* Cursor-tracking glow — --mx/--my are set in main.js's pointermove handler */
.service-card-glow{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--teal-glow), transparent 62%);
}
.service-card:hover .service-card-glow{ opacity:1; }
.service-card-rule{
  position:absolute; top:0; left:0; width:100%; height:1px;
  background:var(--line-dark); transform:scaleX(0); transform-origin:left;
}
.service-card::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--teal-bright), transparent);
  transform:scaleX(0); transition:transform .5s var(--ease);
}
.service-card:hover::after{ transform:scaleX(1); }
.service-card svg{ width:30px; height:30px; stroke:var(--teal-bright); fill:none; margin-bottom:1.6rem; position:relative; }
.service-card h3{ margin-bottom:.7rem; position:relative; }
.service-card p{ color:var(--fog); font-size:.92rem; line-height:1.65; position:relative; }

@media (max-width:1000px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .services-rule,.service-card-rule{ transform:scaleX(1) !important; }
}

/* ==========================================================================
   5. Gallery — marquee strip + masonry
   ========================================================================== */
.gallery{ padding-block:var(--section-pad); background:var(--sand); color:var(--ink); }
.gallery-head,.news-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:3rem; flex-wrap:wrap;
}
.marquee{
  margin-top:1rem; overflow:hidden;
  -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:1.2rem; width:max-content;
  animation:marquee 54s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track figure{ position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; }
.marquee-track img{
  width:auto; height:270px; object-fit:cover;
  transition:transform .8s var(--ease);
}
.marquee-track figure:hover img{ transform:scale(1.05); }
.marquee-track figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.1rem .9rem;
  background:linear-gradient(transparent, rgba(6,22,46,.9));
  color:var(--white); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:.45s var(--ease);
}
.marquee-track figure:hover figcaption{ opacity:1; transform:none; }
.marquee-track figcaption span{ display:block; }
.marquee-track figcaption span + span{ color:var(--teal-bright); font-size:.62rem; margin-top:.2rem; }
@media (max-width:700px){ .marquee-track img{ height:190px; } }
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  .marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}

.masonry{ columns:3; column-gap:1.3rem; }
.masonry figure{
  break-inside:avoid; margin-bottom:1.3rem; position:relative;
  overflow:hidden; border-radius:var(--radius); cursor:pointer;
}
.masonry img{ width:100%; transition:transform .8s var(--ease); }
.masonry figure:hover img{ transform:scale(1.05); }
.masonry figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.2rem 1rem;
  background:linear-gradient(transparent, rgba(6,22,46,.92));
  color:var(--white); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:.45s var(--ease);
}
.masonry figure:hover figcaption{ opacity:1; transform:none; }
.masonry figcaption span{ display:block; }
.masonry figcaption span + span{ color:var(--teal-bright); font-size:.64rem; margin-top:.2rem; }
@media (max-width:900px){ .masonry{ columns:2; } }
@media (max-width:560px){ .masonry{ columns:1; } }

/* ==========================================================================
   6. Certifications
   ========================================================================== */
.certs{ padding-block:var(--section-pad); background:var(--navy-deep); }
.certs-head{ text-align:center; max-width:60ch; margin-inline:auto; }
.certs-head .eyebrow{ justify-content:center; }
.certs-head .section-title{ margin-inline:auto; max-width:20ch; }
.certs-head .section-lead{ margin-inline:auto; }
.certs-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3.4rem;
}
.cert-card{
  background:var(--navy-soft); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:2.2rem 1.7rem;
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.cert-card:hover{ border-color:rgba(79,186,194,.4); transform:translateY(-6px); }
.cert-seal{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--teal); margin-bottom:1.4rem;
}
.cert-seal svg{ width:20px; height:20px; stroke:var(--teal-bright); fill:none; }
.cert-card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.cert-scope{ color:var(--fog); font-size:.88rem; line-height:1.6; }
.cert-no{
  display:block; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line-dark);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-bright);
}
.certs-note{
  margin-top:2.6rem; text-align:center; font-size:.82rem; color:var(--fog);
  max-width:70ch; margin-inline:auto;
}
@media (max-width:1000px){ .certs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .certs-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   7. Testimonials
   ========================================================================== */
.testimonials{ padding-block:var(--section-pad); background:var(--navy); text-align:center; }
.quote-mark{
  display:block; font-family:var(--font-display); font-size:5rem; line-height:1;
  color:var(--teal); margin:1.4rem 0 .4rem;
}
.slider{ position:relative; min-height:230px; max-width:62ch; margin-inline:auto; }
.slide{
  position:absolute; inset:0; opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.slide.active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.slide blockquote{
  font-family:var(--font-display); font-size:clamp(1.25rem,2.2vw,1.75rem);
  font-style:italic; line-height:1.5; color:var(--white);
}
.slide cite{ display:block; margin-top:1.6rem; font-style:normal; }
.slide cite b{
  display:block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-bright); font-weight:600;
}
.slide cite span{ display:block; margin-top:.3rem; font-size:.84rem; color:var(--fog); }
.dots{ display:flex; justify-content:center; gap:.6rem; margin-top:2.4rem; }
.dots button{
  width:28px; height:2px; background:var(--line-dark); border-radius:2px;
  transition:background .35s var(--ease);
}
.dots button.active{ background:var(--teal-bright); }

/* ==========================================================================
   8. News — shared video-card component, used identically on the homepage
   teaser and the full Haberler page. Radial-navy card, gradient overlay,
   a category badge + fullscreen glass button up top, title (+ optional
   date) and a play glass button along the bottom. Items with no video yet
   fall back to a photo instead of a flat panel (.video-frame--novideo).
   ========================================================================== */
.news{ padding-block:var(--section-pad); background:var(--sand); color:var(--ink); }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }

.video-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer;
  border-radius:1.75rem;
  background:radial-gradient(circle at 50% 20%, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  border:1px solid var(--line-dark);
  box-shadow:0 20px 40px rgba(3,10,22,.3);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease);
}
.video-frame:hover{
  transform:translateY(-8px);
  border-color:rgba(79,186,194,.4);
  box-shadow:0 30px 60px rgba(3,10,22,.45);
}
.video-frame img,.video-frame iframe,.video-frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
  z-index:1; transition:transform .7s var(--ease-out);
}
.video-frame:hover img{ transform:scale(1.06); }
/* Once a player is built the poster/overlay chrome must not sit on top of
   it, or the controls become unclickable. */
.video-frame:has(iframe) .video-poster,
.video-frame:has(video) .video-poster{ display:none; }
.video-frame:has(iframe)::after,
.video-frame:has(video)::after,
.video-frame:has(iframe) .video-card-bottom,
.video-frame:has(video) .video-card-bottom,
.video-frame:has(iframe) .video-card-badge,
.video-frame:has(video) .video-card-badge{ display:none; }
.video-frame video{ z-index:4; object-fit:contain; background:#000; }

/* Fallback photo — a full card for items with no video yet; a faint
   texture wash under any real thumbnail otherwise. */
.video-frame::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--yacht-fallback);
  background-size:cover; background-position:center;
  opacity:.28; filter:saturate(.7);
  transition:opacity .4s ease;
}
/* Two classes chained (rather than one) gives this strictly higher
   specificity than .video-frame::before above, so it wins unambiguously
   regardless of source order — a tie there was observed not to always
   resolve to the later rule as the cascade spec says it should. */
.video-frame.video-frame--novideo::before{ opacity:.62; filter:saturate(.85); }

.video-frame::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,22,46,.15) 0%, rgba(6,22,46,.05) 38%,
    rgba(6,22,46,.65) 72%, rgba(6,22,46,.95) 100%);
}

.video-card-badge{
  position:absolute; top:1.1rem; left:1.1rem; z-index:3;
  font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:999px;
  color:var(--white); background:var(--teal); border:1px solid var(--teal);
  box-shadow:0 4px 14px rgba(50,150,157,.35);
}
.video-card-fs{
  position:absolute; top:1.1rem; right:1.1rem; z-index:3;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--white); border:1px solid var(--line-dark); background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.video-card-fs:hover{ background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.5); transform:scale(1.08); }
.video-card-fs svg{ width:16px; height:16px; fill:currentColor; }

.video-card-bottom{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:1.5rem; display:flex; justify-content:space-between; align-items:flex-end; gap:.8rem;
}
/* Chained class keeps this above the section-level heading colour rules
   regardless of source order. */
.video-card .video-card-text h3{
  color:var(--white); font-size:clamp(1.25rem, 1.5vw, 1.5rem);
  line-height:1.25; text-wrap:balance;
}
.video-card-date{
  margin-top:.35rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.65); font-variant-numeric:tabular-nums;
}
.video-card-play{
  flex-shrink:0; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  color:var(--white); border:1.5px solid rgba(255,255,255,.85); background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.video-frame:hover .video-card-play{ background:rgba(255,255,255,.3); transform:scale(1.08); }
.video-card-play svg{ width:18px; height:18px; fill:currentColor; margin-left:2px; }

@media (max-width:1000px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .video-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

/* ==========================================================================
   9. Contact + form
   ========================================================================== */
.contact{ padding-block:var(--section-pad); background:var(--navy-deep); position:relative; }
.contact-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.contact-details{ margin-top:2.6rem; display:grid; gap:1.7rem; }
.detail{ display:flex; gap:1.1rem; align-items:flex-start; }
.detail svg{ width:20px; height:20px; stroke:var(--teal-bright); fill:none; margin-top:.3rem; flex-shrink:0; }
.detail h3{
  font-family:var(--font-body); font-size:.68rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--fog); margin-bottom:.3rem;
}
.detail p{ color:var(--white); font-size:.98rem; }
.detail a:hover{ color:var(--teal-bright); }

.form{
  background:rgba(255,255,255,.03); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:clamp(1.8rem,4vw,2.8rem);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ margin-bottom:1.5rem; }
.field label{
  display:block; font-size:.66rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fog); margin-bottom:.6rem;
}
.field input,.field textarea{
  width:100%; background:transparent; border:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding:.65rem 0; color:var(--white); font:inherit; font-size:.98rem;
  transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--teal-bright); }
.field textarea{ resize:vertical; min-height:120px; }
.form .btn{ width:100%; justify-content:center; margin-top:.5rem; }
.form .btn[disabled]{ opacity:.6; cursor:not-allowed; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-note{ margin-top:1.2rem; font-size:.78rem; color:var(--fog); text-align:center; }
.form-note.is-error{ color:#E2896B; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; gap:0; }
}

/* ==========================================================================
   10. Inner page hero + CTA band
   ========================================================================== */
.page-hero{ position:relative; overflow:hidden; background:var(--navy-deep); }
.page-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,22,46,.8) 0%, rgba(6,22,46,.55) 50%, rgba(6,22,46,.95) 100%);
}
.page-hero-inner{ position:relative; padding:10rem 0 4rem; }
.breadcrumb{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fog); margin-bottom:1.6rem;
}
.breadcrumb a{ color:var(--teal-bright); transition:opacity .3s; }
.breadcrumb a:hover{ opacity:.75; }
.page-hero h1{ font-size:clamp(2.3rem,5.2vw,4rem); max-width:22ch; margin-bottom:1.1rem; }
.page-hero-lead{ color:var(--fog); max-width:56ch; }

.page-cta{ padding-block:var(--section-pad); background:var(--navy); text-align:center; }
.page-cta .section-title{ margin-inline:auto; }
.page-cta p{ color:var(--fog); max-width:46ch; margin:0 auto 2rem; }

/* ==========================================================================
   11. Footer — three stacked rows separated by hairlines, after the
   reference layout: logo + text social links, then contact details in a
   single row, then nav links / copyright / coordinates.
   ========================================================================== */
.footer{ background:var(--navy-deep); border-top:1px solid var(--line-dark); color:var(--fog); }
.footer-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  padding-block:2.2rem; border-bottom:1px solid var(--line-dark);
  /* pre-JS hidden state for the scroll reveal (see main.js) */
  opacity:0; transform:translateY(24px);
}
.footer-row-3{ border-bottom:none; padding-block:1.8rem 2.4rem; }

.footer-logo svg{ height:44px; width:auto; }

.footer-social{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.footer-social a{
  position:relative; font-size:.82rem; font-weight:500; letter-spacing:.04em;
  color:var(--white); transition:color .3s var(--ease);
}
.footer-social a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--teal-bright); transition:width .35s var(--ease);
}
.footer-social a:hover{ color:var(--teal-bright); }
.footer-social a:hover::after{ width:100%; }

.footer-contact{ display:flex; gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap; width:100%; }
.footer-contact a{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.9rem; color:var(--white); transition:color .3s var(--ease);
}
.footer-contact a:hover{ color:var(--teal-bright); }
.footer-contact svg{ width:17px; height:17px; stroke:var(--teal-bright); flex-shrink:0; }

.footer-legal{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-legal a{ font-size:.8rem; color:var(--fog); transition:color .3s var(--ease); }
.footer-legal a:hover{ color:var(--white); }
.footer-copy{ font-size:.78rem; }
.footer-row-3 .coord{ font-size:.75rem; letter-spacing:.14em; color:var(--teal-bright); }

@media (max-width:820px){
  .footer-row{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .footer-contact{ flex-direction:column; gap:1rem; }
}

/* ==========================================================================
   12. WhatsApp floating button
   ========================================================================== */
.whatsapp-fab{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:90;
  display:flex; align-items:center; height:58px;
  border-radius:999px; background:#25D366; color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
  overflow:hidden;
}
.whatsapp-fab:hover{ box-shadow:0 14px 34px rgba(0,0,0,.38); transform:translateY(-2px); }
.whatsapp-fab .wa-icon{
  width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center;
}
.whatsapp-fab .wa-icon svg{ width:30px; height:30px; fill:#fff; }
.whatsapp-fab .wa-label{
  max-width:0; opacity:0; white-space:nowrap; overflow:hidden;
  font-size:.8rem; font-weight:600; letter-spacing:.04em;
  transition:max-width .45s var(--ease), opacity .3s var(--ease), padding .45s var(--ease);
}
.whatsapp-fab:hover .wa-label,
.whatsapp-fab:focus-visible .wa-label{ max-width:200px; opacity:1; padding-right:1.4rem; }
@media (max-width:560px){
  .whatsapp-fab{ right:1.1rem; bottom:1.1rem; height:52px; }
  .whatsapp-fab .wa-icon{ width:52px; height:52px; flex-basis:52px; }
  .whatsapp-fab .wa-icon svg{ width:26px; height:26px; }
}

/* ==========================================================================
   13. Lightbox
   ========================================================================== */
.lightbox{
  border:none; padding:0; background:transparent; max-width:100vw; max-height:100vh;
  width:100%; height:100%; overflow:hidden;
}
.lightbox::backdrop{ background:rgba(6,22,46,.94); backdrop-filter:blur(6px); }
.lightbox-inner{
  position:absolute; inset:0; display:grid; place-items:center; padding:4rem 5rem;
}
.lightbox-inner img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--radius); }
.lightbox-caption{
  margin-top:1.2rem; text-align:center; color:var(--fog);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
}
.lightbox-btn,.lightbox-close{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%; color:var(--white);
  border:1px solid var(--line-dark); background:rgba(16,42,78,.6);
  transition:border-color .3s, background .3s;
}
.lightbox-btn:hover,.lightbox-close:hover{ border-color:var(--teal); background:var(--teal); }
.lightbox-btn svg,.lightbox-close svg{ width:20px; height:20px; }
.lightbox-prev{ left:1.2rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1.2rem; top:50%; transform:translateY(-50%); }
.lightbox-close{ right:1.2rem; top:1.2rem; }
@media (max-width:640px){
  .lightbox-inner{ padding:4.5rem 1rem; }
  .lightbox-prev{ left:.6rem; } .lightbox-next{ right:.6rem; }
}

/* ==========================================================================
   14. Light-section type overrides
   The base theme is white-on-navy, so the sand sections (.about, .gallery,
   .news) flip headings, eyebrows and leads back to ink here rather than
   each rule repeating the colour.
   ========================================================================== */
.about-hero, .about-split, .gallery, .news{ color:var(--ink); }
/* .news h3 deliberately excluded: the only h3s inside .news are the video
   card titles, which sit on a dark card and must stay white. */
.about-hero h2,.about-split h2,.about-split h3,
.gallery h1,.gallery h2,.gallery h3,.gallery h4,
.news h1,.news h2,.news h4{ color:var(--ink); }
.about-hero em,.about-split em,.gallery em,.news em{ color:var(--teal-ink); }
.about-hero .eyebrow,.gallery .eyebrow,.news .eyebrow{ color:var(--ink-soft); }
.about-hero .eyebrow .coord,.gallery .eyebrow .coord,.news .eyebrow .coord{ color:var(--teal-ink); }
.about-hero .section-lead,.about-split .section-lead,.gallery .section-lead,.news .section-lead{ color:var(--ink-soft); }

/* Logo draw — the stroked overlay sits exactly on top of the solid lockup.
   main.js clones the symbol's paths into .logo-draw, animates their
   stroke-dashoffset, then cross-fades to the solid mark. */
.logo-stack{ position:relative; display:block; }
.logo-draw{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:var(--teal-bright); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none; opacity:0;
}

/* ==========================================================================
   15. Header — three zones split by hairlines: MENU (left), centred logo,
   actions (right). All navigation lives in the fullscreen overlay below,
   so the bar itself stays quiet.
   ========================================================================== */
.hdr{ position:fixed; inset:0 0 auto; z-index:100; }
.hdr-bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  border-bottom:1px solid var(--line-dark);
  background:rgba(6,22,46,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .5s var(--ease);
}
.hdr.scrolled .hdr-bar{ background:rgba(6,22,46,.92); }

.hdr-menu{
  display:flex; align-items:center; gap:.85rem;
  padding:1.4rem clamp(1rem,2.4vw,2rem);
  border-right:1px solid var(--line-dark);
  justify-self:start;
  font-size:.7rem; font-weight:600; letter-spacing:.24em; color:var(--white);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.hdr-menu:hover{ background:rgba(50,150,157,.14); color:var(--teal-bright); }
.hdr-menu-icon{ display:grid; gap:4px; width:20px; }
.hdr-menu-icon span{ height:1.5px; background:currentColor; border-radius:2px; }
.hdr-menu-icon span:nth-child(3){ width:60%; margin-left:auto; }

.hdr-logo{ padding:.7rem clamp(1rem,3vw,2.6rem); display:block; }
.logo-stack{ position:relative; display:block; }
.logo-h{ height:54px; width:auto; transition:height .5s var(--ease); }
.hdr.scrolled .logo-h{ height:44px; }
.logo-draw{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:var(--teal-bright); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none; opacity:0;
}

.hdr-actions{ display:flex; align-items:stretch; justify-self:end; }
.hdr-act{
  display:flex; align-items:center; gap:.6rem;
  padding:1.4rem clamp(.9rem,1.8vw,1.6rem);
  border-left:1px solid var(--line-dark);
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--white); transition:background .35s var(--ease), color .35s var(--ease);
}
.hdr-act:hover{ background:rgba(50,150,157,.14); color:var(--teal-bright); }
.hdr-act svg{ width:17px; height:17px; }
.hdr-actions .lang-toggle{ align-self:center; margin-right:clamp(.6rem,1.4vw,1.2rem); }

@media (max-width:900px){
  .hdr-menu-label{ display:none; }
  /* Galeri + İletişim are already in the overlay menu on small screens,
     so the bar drops them rather than repeating them as bare icons. */
  .hdr-act{ display:none; }
  .hdr-menu{ padding-inline:1rem; }
  .logo-h{ height:40px; }
}

/* --------------------------------------------------------------------------
   Fullscreen overlay navigation
   -------------------------------------------------------------------------- */
.menu{ position:fixed; inset:0; z-index:120; }
.menu[hidden]{ display:none; }
.menu-bg{ position:absolute; inset:0; background:rgba(3,10,22,.6); opacity:0; }
.menu-panel{
  position:absolute; inset:0;
  background:var(--navy-deep);
  display:flex; flex-direction:column;
  clip-path:inset(0 0 100% 0);
}
.menu-close{
  position:absolute; top:1.3rem; right:clamp(1rem,3vw,2.4rem); z-index:2;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-dark); color:var(--white);
  transition:border-color .3s, background .3s, transform .3s;
}
.menu-close:hover{ border-color:var(--teal); background:var(--teal); transform:rotate(90deg); }
.menu-close svg{ width:20px; height:20px; }
.menu-inner{
  flex:1; display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(2rem,6vw,6rem); align-content:center;
  width:min(var(--maxw),100% - 2*var(--gutter)); margin-inline:auto;
  padding:7rem 0 3rem;
}
.menu-main{ display:grid; align-content:center; gap:.2rem; }
.menu-link{
  display:flex; align-items:baseline; gap:1.4rem;
  padding:.75rem 0; border-bottom:1px solid var(--line-dark);
  overflow:hidden;
}
.menu-num{
  font-family:var(--font-body); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; color:var(--teal-bright); font-variant-numeric:tabular-nums;
}
.menu-word{
  font-family:var(--font-display); font-size:clamp(2rem,5.2vw,3.8rem);
  line-height:1.1; color:var(--white);
  transition:color .35s var(--ease), transform .5s var(--ease-out);
}
.menu-link:hover .menu-word{ color:var(--teal-bright); transform:translateX(14px); }

.menu-meta{ align-self:center; color:var(--fog); font-size:.9rem; }
.menu-meta-label{
  font-size:.64rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--teal-bright); margin-top:1.6rem;
}
.menu-meta-label:first-child{ margin-top:0; }
.menu-meta-val{ margin-top:.35rem; color:var(--white); max-width:28ch; }
.menu-meta-val a:hover{ color:var(--teal-bright); }
.menu-coord{ margin-top:2.4rem; font-size:.72rem; letter-spacing:.14em; color:var(--teal-bright); }
@media (max-width:820px){
  .menu-inner{ grid-template-columns:1fr; gap:2.5rem; align-content:start; padding-top:6rem; overflow-y:auto; }
  .menu-meta{ align-self:start; }
}

/* ==========================================================================
   16. Hero — centred editorial stack over a parallaxing photo
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; overflow:hidden; background:var(--navy-deep); }
.hero-bg{ position:absolute; inset:-8% 0; overflow:hidden; will-change:transform; }
.hero-bg-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  will-change:transform;
}
/* Two overlays, matching the reference: a flat tint for legibility plus a
   tall bottom gradient that melts the photo into the page field. */
.hero-veil{ position:absolute; inset:0; background:rgba(6,22,46,.58); }
.hero-veil::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:45%;
  background:linear-gradient(180deg, rgba(6,22,46,0) 0%, var(--navy-deep) 100%);
}
.hero-inner{
  position:relative; z-index:5;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; min-height:100svh;
  max-width:920px; margin-inline:auto; padding:7rem var(--gutter) 5rem;
}
.hero-eyebrow{
  font-size:clamp(.9rem,1.3vw,1.15rem); font-weight:300; color:var(--fog);
  margin-bottom:1rem; letter-spacing:.02em;
}
.hero h1{ font-size:clamp(2.6rem,6.6vw,5.4rem); margin:0 auto; max-width:15ch; }
.hero-tagline{ color:rgba(255,255,255,.82); max-width:52ch; margin:1.8rem auto 0; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; justify-content:center; }
.scroll-cue{
  position:absolute; left:50%; transform:translateX(-50%); bottom:2rem; z-index:5;
  font-size:.64rem; letter-spacing:.36em; text-transform:uppercase; color:var(--fog);
  display:grid; justify-items:center; gap:.7rem;
}
.scroll-cue::after{ content:""; width:1px; height:40px; background:linear-gradient(var(--teal),transparent); }

/* ==========================================================================
   17. Horizontal scroll gallery — the reference's signature device.
   A tall spacer drives a sticky viewport whose row is translated
   sideways by scroll progress (see main.js).
   ========================================================================== */
.hscroll{ background:var(--navy-deep); }
.hscroll-intro{
  width:min(var(--maxw),100% - 2*var(--gutter)); margin:0 auto clamp(2rem,5vw,3.5rem);
  text-align:center;
}
/* Copper-style gradient text, retuned to the brand teal */
.grad-text{
  background:linear-gradient(94deg, var(--teal) 16%, var(--teal-bright) 42%, var(--teal-bright) 60%, var(--teal) 85%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* ScrollTrigger pins .hscroll-track and scrubs the row (see main.js).
   CSS position:sticky fought the scrub — a real pin is what keeps the
   panel locked while the row translates, and it survives keyboard/space
   scrolling, which sticky + scrub did not. */
.hscroll-track{ position:relative; }
.hscroll-sticky{ height:100svh; display:flex; align-items:center; overflow:hidden; }
.hscroll-row{ display:flex; gap:1.4rem; padding-inline:var(--gutter); will-change:transform; }
.hscroll-item{
  position:relative; flex:0 0 auto;
  width:clamp(260px, 34vw, 460px); aspect-ratio:1/1;
  overflow:hidden; border-radius:var(--radius); background:var(--navy-soft);
}
.hscroll-item img{ width:100%; height:100%; object-fit:cover; }
.hscroll-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2rem 1.3rem 1.1rem;
  background:linear-gradient(transparent, rgba(6,22,46,.92));
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--white);
}
.hscroll-item figcaption span{ display:block; }
.hscroll-item figcaption span + span{ color:var(--teal-bright); font-size:.63rem; margin-top:.25rem; }
/* No sticky pinning without JS — fall back to a normal swipeable row. */
.no-js-hscroll .hscroll-sticky{ position:static; height:auto; }
.no-js-hscroll .hscroll-row{ overflow-x:auto; }
@media (max-width:700px){ .hscroll-item{ width:78vw; } }

/* ==========================================================================
   18. Parallax photo band — full-bleed section break
   ========================================================================== */
.photo-band{ position:relative; height:clamp(280px,42vh,460px); overflow:hidden; }
.photo-band-bg{ position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform; }
.photo-band::after{ content:""; position:absolute; inset:0; background:rgba(6,22,46,.4); }

/* ==========================================================================
   19. Slim CTA band
   ========================================================================== */
.cta-band{
  background:var(--navy); border-block:1px solid var(--line-dark);
  padding-block:clamp(2.5rem,5vw,3.6rem);
}
.cta-band-inner{
  width:min(var(--maxw),100% - 2*var(--gutter)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(1.5rem,2.8vw,2.3rem); margin:0; }

/* ==========================================================================
   20. Header CTA — outlined pill, top right beside the language toggle
   ========================================================================== */
.hdr-cta{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-right:clamp(1rem,2.4vw,2rem);
  padding:.62rem 1.5rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.32); color:var(--white);
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.hdr-cta::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--teal); transition:background .35s var(--ease);
}
.hdr-cta:hover{ background:var(--teal); border-color:var(--teal); transform:translateY(-1px); }
.hdr-cta:hover::before{ background:var(--white); }
@media (max-width:760px){ .hdr-cta{ display:none; } } /* surfaced in the overlay menu instead */

/* ==========================================================================
   21. About 1 — pinned, image expands from half to full width
   The photo is laid out at a fixed 100vw inside a wrapper that grows from
   50vw, so the picture never rescales: the wrapper simply uncovers it.
   ========================================================================== */
.about-hero{
  position:relative; width:100%; height:100svh; overflow:hidden;
  background:var(--sand); color:var(--ink);
}
.about-hero-inner{ position:relative; width:100%; height:100%; display:flex; }
.about-hero-copy{
  width:50%; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:0 4vw 0 max(var(--gutter), 6vw); z-index:1;
}
.about-hero-copy .section-title{ margin:1.2rem 0 1.4rem; max-width:14ch; }
.about-hero-copy .section-lead{ max-width:46ch; }
.about-hero-img{
  position:absolute; top:0; right:0;
  width:50vw; height:100svh; overflow:hidden; z-index:2; will-change:width;
}
.about-hero-img img{
  position:absolute; top:0; right:0;
  width:100vw; height:100svh; object-fit:cover;
}

/* ==========================================================================
   22. About 2 — photo left, copy right
   ========================================================================== */
.about-split{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
  padding:var(--section-pad) max(var(--gutter),4vw) var(--section-pad) 0;
  background:var(--sand); color:var(--ink);
}
.about-split-img{ position:relative; height:min(78vh,760px); overflow:hidden; }
.about-split-img img{ width:100%; height:100%; object-fit:cover; }
.about-split-copy{ max-width:56ch; }

@media (max-width:900px){
  .about-hero{ height:auto; }
  .about-hero-inner{ flex-direction:column; }
  .about-hero-copy{ width:100%; padding:7rem var(--gutter) 2.5rem; }
  .about-hero-img{ position:relative; width:100%; height:60svh; }
  .about-hero-img img{ position:relative; width:100%; height:100%; }
  .about-split{ grid-template-columns:1fr; padding:var(--section-pad) 0; }
  .about-split-img{ height:52svh; }
  .about-split-copy{ padding-inline:var(--gutter); }
}


/* ==========================================================================
   23. Language toggle — a sliding pill in the logo's own colours: teal
   thumb on a navy track. main.js publishes --lang-i (0/1/2); the thumb's
   position is that index multiplied by one option's width, so the slide
   is a single transform rather than three separate rules.
   ========================================================================== */
.lang-toggle{
  --lang-w:42px;
  position:relative; display:inline-flex; align-items:center;
  padding:4px; border-radius:999px;
  background:rgba(18,40,79,.72); border:1px solid var(--line-dark);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.lang-toggle-thumb{
  position:absolute; top:4px; left:4px; z-index:0;
  width:var(--lang-w); height:calc(100% - 8px);
  border-radius:999px; background:var(--teal);
  box-shadow:0 2px 10px rgba(50,150,157,.45);
  transform:translateX(calc(var(--lang-i, 0) * var(--lang-w)));
  transition:transform .45s var(--ease-out);
}
.lang-opt{
  position:relative; z-index:1;
  width:var(--lang-w); padding:.38rem 0;
  font-size:.68rem; font-weight:600; letter-spacing:.08em;
  color:var(--fog); text-align:center;
  transition:color .3s var(--ease);
}
.lang-opt:hover{ color:var(--white); }
.lang-opt.is-active{ color:var(--white); }

@media (max-width:560px){
  /* Compact rather than hidden — switching language has to stay reachable
     on phones, where the bar is the only always-visible chrome. */
  .lang-toggle{ --lang-w:30px; }
  .lang-opt{ font-size:.6rem; letter-spacing:.02em; }
  .hdr-actions .lang-toggle{ margin-right:.5rem; }
}



/* Brand mark under the contact details — same draw treatment as the header
   logo (main.js walks every .logo-stack). */
.contact-mark{ margin-top:3rem; max-width:260px; }
.contact-mark .logo-h{ height:auto; width:100%; }
.contact-mark .logo-draw{ stroke-width:3; }
@media (max-width:900px){ .contact-mark{ margin-top:2.2rem; max-width:210px; } }