/*!
 * File:         profile.css
 * Path:         public_html/profile/assets/profile.css
 * Last updated: 2026-10-10 15:35 IST
 * Change:       Background photos set in the dashboard now show (the sky-blue theme hid them all), under a soft
 *               sky-blue wash so text stays readable. Chapters without a background photo look the same as before.
 *               (15:15) Desktop/laptop: text chapters fit without scrolling. Text column wider (~55-60% instead of 43%),
 *               headings scale with screen height, paragraphs may run longer lines, tighter spacing on short screens.
 *               Phones unchanged.
 *               (15:00) Welcome: a little more space between the globe and the logo (the new see-through logo has no margin).
 *               (14:45) Welcome fits every screen: phones held sideways get the globe beside the logo and tighter spacing
 *               (the Play button was cut off); upright tablets wider than 860 px get the globe above the logo
 *               (it shrank to ~50 px); 1024-1200 px screens get a slightly narrower logo so the globe has room.
 *               (16:15: Welcome: tagline and the "Indo-German B2B DMC" line about 2 pt larger and bold; that line now wine red
 *               like the Play button. Loads the bold font weights they need (Cormorant bold italic, Plex Mono semibold).
 *               (16:05: Welcome: extra greetings fill the empty spaces (above 860 px wide); phone globe no longer stretches tall.
 *               What we do: S / A / S icons 25% larger (84 -> 105 px desktop, 52 -> 65 px phone).
 *               Our team: both paragraphs the same text size.)
 *               (12:25: globe + 16 greetings. 12:10: What we do centred with dividers. 11:51: sky-blue on every chapter. 11:41: Welcome sky-blue.)
 */
@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@1,700&family=IBM+Plex+Mono:wght@600&display=swap");
/* Layout: one full-screen "film" stage; each chapter is a scene that cross-fades in,
   a blurred Ken-Burns photo behind, content left, framed photos right; video-style control bar below. */
:root{
  color-scheme: dark;
  --navy-900:#0b0f2e;
  --navy-700:#1b2263;
  --navy-500:#3a44a0;
  --wine:#9b1c44;
  --wine-soft:#c9456d;
  --paper:#f3efe8;
  --mist:#b9bdd8;
  --line:rgba(185,189,216,.22);
  --scrim:rgba(11,15,46,.72);
  --f-display:"Cormorant","Cormorant Garamond",Garamond,"Times New Roman",serif;
  --f-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --bar-h:76px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
html,body{height:100%;margin:0}
body{margin:0;background:var(--navy-900);color:var(--paper);font-family:var(--f-body);font-size:15px;line-height:1.6;overflow:hidden;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--wine-soft);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- stage ---------- */
.stage{position:fixed;inset:0;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));overflow:hidden;background:var(--navy-900)}
.scene{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s linear .9s}
.scene.is-active{opacity:1;visibility:visible;transition:opacity .9s var(--ease),visibility 0s}
.bg{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:blur(14px) saturate(1.1) brightness(.55);transform:scale(1.08)}
.scene.is-active .bg{animation:kenburns 22s linear forwards}
@keyframes kenburns{from{transform:scale(1.08) translate3d(0,0,0)}to{transform:scale(1.22) translate3d(-2%,-1.5%,0)}}
.scene::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(11,15,46,.94) 0%,rgba(11,15,46,.78) 45%,rgba(11,15,46,.35) 100%),
  radial-gradient(ellipse at 85% 110%,rgba(155,28,68,.35),transparent 60%);pointer-events:none}
.inner{position:relative;z-index:2;height:100%;max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,56px);padding-block:clamp(20px,5vh,56px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,64px);align-items:center}
.copy{min-width:0;max-height:100%;overflow-y:auto;scrollbar-width:thin;padding-right:6px}

/* boarding-pass eyebrow: chapter + route */
.leg{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin:0 0 14px}
.leg b{color:var(--paper);font-weight:500}
.leg .route{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;border:1px dashed var(--line);border-radius:3px}
.leg svg{width:14px;height:14px;fill:var(--wine-soft)}
h1,h2{font-family:var(--f-display);font-weight:600;line-height:1.02;letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance}
h2{font-size:clamp(34px,5.4vw,68px)}
h2 em{font-style:italic;font-weight:500;color:var(--wine-soft)}
.lede{font-size:clamp(16px,1.35vw,19px);color:var(--paper);max-width:58ch;margin:0 0 16px}
.copy p{max-width:62ch;color:#d9dae9;margin:0 0 14px}
.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 22px}
.ticks li{position:relative;padding-left:20px;font-size:14px;color:var(--paper)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--wine-soft);transform:rotate(45deg)}

/* staggered entrance (content is visible at rest; animation only runs on the active scene) */
.scene.is-active .rise{animation:rise .9s var(--ease) both}
.scene.is-active .rise:nth-child(2){animation-delay:.12s}
.scene.is-active .rise:nth-child(3){animation-delay:.24s}
.scene.is-active .rise:nth-child(4){animation-delay:.36s}
.scene.is-active .rise:nth-child(5){animation-delay:.48s}
.scene.is-active .rise:nth-child(6){animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* photo stack, echoing the brochure's framed strip */
.frames{min-width:0;display:grid;gap:14px;justify-items:center}
.frame{margin:0;width:min(100%,360px);aspect-ratio:332/297;max-width:100%;border-radius:10px;overflow:hidden;border:3px solid var(--paper);box-shadow:0 18px 40px rgba(0,0,0,.45);background:var(--navy-700)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frames.tall .frame{transform:rotate(-1.6deg)}
.scene.is-active .frames .frame{animation:drop 1s var(--ease) both}
.scene.is-active .frames .frame:nth-child(2){animation-delay:.25s}
.scene.is-active .frames .frame:nth-child(3){animation-delay:.5s}
@keyframes drop{from{opacity:0;translate:0 -30px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
.frames.tall .frame{width:min(100%,280px);aspect-ratio:658/1042}
.office a[href^="tel"]{white-space:nowrap}

/* ---------- intro ----------
   "safe center": centred when it fits, starts at the top when it does not, so a tall slide on a small
   phone never pushes its heading above the scrollable area. Older browsers ignore it and use plain center. */
/* Opening slide sizes follow the screen HEIGHT as well as width: laptops at 1366x768 leave only ~530px above the
   control bar once the browser's own bars are counted. Scrolls as a last resort instead of hiding the button. */
.intro .inner{grid-template-columns:1fr;justify-items:center;text-align:center;align-content:center;align-content:safe center;row-gap:clamp(8px,2.2vh,24px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.intro .bg{filter:blur(6px) brightness(.45)}
.logo-plate{width:min(720px,88vw,calc((100vh - var(--bar-h)) * 1.15));padding:clamp(12px,min(2.4vw,3.2vh),26px) clamp(16px,3vw,34px);background:#d3e8ef;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.logo-plate img{display:block;width:100%;height:auto}
@supports (height:100dvh){.logo-plate{width:min(720px,88vw,calc((100dvh - var(--bar-h)) * 1.15))}}
.scene.is-active .logo-plate{animation:plate 1.6s var(--ease) both}
@keyframes plate{0%{opacity:0;transform:translateY(30px) scale(.9);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
.tagline{font-family:var(--f-display);font-style:italic;font-size:clamp(20px,min(3vw,5vh),34px);line-height:1.25;margin:clamp(6px,2.6vh,28px) 0 0}
.subline{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin:0}
.greet{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.greet span{position:absolute;font-family:var(--f-display);color:rgba(243,239,232,.10);white-space:nowrap}
.scene.is-active .greet span{animation:float 12s ease-in-out infinite alternate}
@keyframes float{to{transform:translateY(-26px)}}
.play-cta{margin-top:clamp(6px,2.4vh,30px);display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border-radius:999px;border:0;background:var(--wine);color:#fff;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 12px 30px rgba(155,28,68,.45);transition:transform .2s,background .2s}
.play-cta:hover{background:var(--wine-soft);transform:translateY(-2px)}
.play-cta svg{width:18px;height:18px;fill:currentColor}

/* ---------- pillars ---------- */
.pillars .inner{grid-template-columns:1fr;align-content:center;align-content:safe center}
.pillar-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,36px);margin-top:8px}
.pillar{min-width:0;text-align:left}
.pillar img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--paper);margin-bottom:14px;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.pillar h3{font-family:var(--f-display);font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.1;margin:0 0 8px}
.pillar p{font-size:14px;color:#d9dae9;margin:0}

/* ---------- CEO ---------- */
/* Size comes from the screen (vw/vh), never a % of the grid cell: a %-width box with an aspect ratio
   collapses its grid row on mobile browsers and spills over the text. Height is set explicitly for the same reason. */
.ceo-photo{--pw:min(340px,32vw,calc((100vh - var(--bar-h) - 64px) * .636));margin:0;width:var(--pw);height:calc(var(--pw) * 1.571);max-width:100%;align-self:center;border-radius:12px;overflow:hidden;border:3px solid var(--paper);box-shadow:0 24px 60px rgba(0,0,0,.5);justify-self:center}
.ceo-photo img{width:100%;height:100%;object-fit:cover;display:block}
.scene.is-active .ceo-photo{animation:drop 1.1s var(--ease) both}
@supports (height:100dvh){.ceo-photo{--pw:min(340px,32vw,calc((100dvh - var(--bar-h) - 64px) * .636))}}
blockquote{margin:0 0 18px;font-family:var(--f-display);font-size:clamp(22px,2.4vw,32px);line-height:1.25;font-style:italic;max-width:30ch}
.sign{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.sign b{display:block;color:var(--paper);font-weight:500;font-size:14px}

/* ---------- numbers ---------- */
.numbers .inner{grid-template-columns:1fr;align-content:center;align-content:safe center}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:10px}
.stat{background:rgba(11,15,46,.7);padding:clamp(16px,2.4vw,28px);min-width:0}
.stat .n{font-family:var(--f-display);font-size:clamp(40px,5.2vw,72px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--paper)}
.stat .n small{font-size:.5em;color:var(--wine-soft);margin-left:2px}
.stat .l{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-top:10px}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.team-grid figure{margin:0;aspect-ratio:4/3;max-width:100%;border-radius:8px;overflow:hidden;border:2px solid rgba(243,239,232,.8)}
.team-grid figure:first-child{grid-column:span 3;aspect-ratio:675/442}
.team-grid img{width:100%;height:100%;object-fit:cover;display:block}
.scene.is-active .team-grid figure{animation:rise .8s var(--ease) both}
.scene.is-active .team-grid figure:nth-child(2){animation-delay:.1s}.scene.is-active .team-grid figure:nth-child(3){animation-delay:.2s}.scene.is-active .team-grid figure:nth-child(4){animation-delay:.3s}

/* ---------- gallery ---------- */
.gallery .inner{grid-template-columns:1fr;align-content:center;align-content:safe center;gap:22px}
.reel{display:grid;gap:12px;overflow:hidden;padding-block:clamp(16px,3.2vh,30px);margin-block:calc(-1 * clamp(16px,3.2vh,30px));mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:12px;width:max-content}
.track img{position:relative;height:clamp(120px,21vh,230px);width:auto;aspect-ratio:273/211;object-fit:cover;border-radius:8px;border:2px solid rgba(243,239,232,.85);cursor:zoom-in;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.scene.is-active .track{animation:reel 60s linear infinite}
.scene.is-active .track.rev{animation-direction:reverse}
@keyframes reel{to{transform:translateX(-50%)}}
.badge{display:inline-flex;align-items:baseline;gap:10px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.badge b{font-family:var(--f-display);font-size:26px;letter-spacing:0;color:var(--paper)}

/* ---------- contact ---------- */
.offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.office{min-width:0;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:rgba(11,15,46,.55)}
.office h3{margin:0 0 8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--wine-soft);font-weight:500}
.office address{font-style:normal;font-size:14px;color:#dfe0ee;line-height:1.55}
.office a{color:var(--paper);text-underline-offset:3px;overflow-wrap:anywhere}
.addr-city,.office-acts,.pillar-more{display:none}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(243,239,232,.06);color:var(--paper);text-decoration:none;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:rgba(243,239,232,.14);border-color:var(--mist)}
.btn.primary{background:var(--wine);border-color:var(--wine)}
.btn.primary:hover{background:var(--wine-soft)}

/* ---------- control bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));padding:0 clamp(12px,2.5vw,28px) env(safe-area-inset-bottom,0px);background:linear-gradient(180deg,#0d1236,#080b24);border-top:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;z-index:20}
.timeline{display:flex;gap:4px;padding-top:10px}
.seg{flex:1;height:18px;padding:7px 0;border:0;background:none;cursor:pointer;position:relative}
.seg span{display:block;height:4px;border-radius:2px;background:rgba(185,189,216,.22);overflow:hidden}
.seg span i{display:block;height:100%;width:0;background:var(--wine-soft)}
.seg.done span i{width:100%;background:var(--mist)}
.seg:hover span{background:rgba(185,189,216,.4)}
.seg .tip{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;background:var(--paper);color:var(--navy-900);padding:3px 8px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s}
.seg:hover .tip,.seg:focus-visible .tip{opacity:1}
.controls{display:flex;align-items:center;gap:6px;min-width:0}
.ctl{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:none;cursor:pointer;flex:none}
.ctl:hover{background:rgba(243,239,232,.1)}
.ctl svg{width:20px;height:20px;fill:var(--paper)}
.ctl.big{background:var(--wine);width:44px;height:44px}
.ctl.big:hover{background:var(--wine-soft)}
.now{flex:1;min-width:0;padding-left:8px;display:flex;align-items:baseline;gap:12px;overflow:hidden}
.now .t{font-family:var(--f-mono);font-size:12px;color:var(--mist);font-variant-numeric:tabular-nums;white-space:nowrap}
.now .c{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;cursor:pointer;font-weight:600;font-size:13px;flex:none}
.chap-btn:hover{background:rgba(243,239,232,.08)}
.chap-btn svg{width:16px;height:16px;fill:currentColor}

/* side chapter rail: slides in when the cursor reaches the screen edge, or from the Chapters button */
.rail{position:fixed;top:0;right:0;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));width:min(320px,88vw);z-index:25;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);background:rgba(8,11,36,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(0,0,0,.45);transform:translateX(105%);transition:transform .35s var(--ease);visibility:hidden}
.rail.open{transform:none;visibility:visible}
.rail[data-side="left"]{right:auto;left:0;border-left:0;border-right:1px solid var(--line);box-shadow:20px 0 50px rgba(0,0,0,.45);transform:translateX(-105%)}
.rail[data-side="left"].open{transform:none}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px 20px}
.rail-head span{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.rail-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:0 10px 14px;display:flex;flex-direction:column;gap:4px}
.rail-item{position:relative;flex:none;min-height:62px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:8px;border:1px solid transparent;background:none;text-align:left;cursor:pointer;overflow:hidden}
.rail-item:hover{background:rgba(243,239,232,.07)}
.rail-item .th{width:64px;height:44px;border-radius:5px;background-size:cover;background-position:center;background-color:var(--navy-700)}
.rail-item .nm{font-weight:600;font-size:14px;line-height:1.25}
.rail-item .du{font-family:var(--f-mono);font-size:11px;color:var(--mist);font-variant-numeric:tabular-nums}
.rail-item[aria-current="true"]{background:rgba(155,28,68,.22);border-color:rgba(201,69,109,.55)}
.rail-item .pg{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--wine-soft)}
.edge-tab{position:fixed;right:0;top:50%;z-index:24;transform:translateY(-50%);writing-mode:vertical-rl;padding:16px 7px;border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px;background:rgba(8,11,36,.7);color:var(--mist);font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:.55;transition:opacity .2s}
.edge-tab:hover,.edge-tab:focus-visible{opacity:1}
.edge-tab[data-side="left"]{right:auto;left:0;border-right:1px solid var(--line);border-left:0;border-radius:0 8px 8px 0}
.rail.open ~ .edge-tab{opacity:0;pointer-events:none}
@media (hover:none),(pointer:coarse){.edge-tab{display:none}}
.ctl[aria-pressed="true"] svg{fill:var(--mist)}


/* ---------- photo collage (Text-with-photos chapters) ----------
   One large photo over two smaller ones. Width is the smaller of the column width and what the
   screen height allows, so the photos grow with the screen without pushing past the control bar. */
.inner.with-frames{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (min-width:1500px){.inner{max-width:1440px}}
.frames:not(.tall){width:min(100%, calc((100vh - var(--bar-h) - 72px) / 1.06));width:min(100%, calc((100dvh - var(--bar-h) - 72px) / 1.06));grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,16px);justify-self:center;align-content:center}
.frames:not(.tall) .frame{position:relative;width:100%;aspect-ratio:4/3;transform:none;border-width:clamp(2px,.25vw,4px)}
.frames:not(.tall) .frame:first-child{grid-column:1/-1;aspect-ratio:16/10}
.frames:not(.tall) .frame:first-child:nth-last-child(2){grid-column:auto;aspect-ratio:4/3}
.frames:not(.tall) .frame:nth-child(2){transform:rotate(-1.2deg)}
.frames:not(.tall) .frame:nth-child(3){transform:rotate(1.2deg)}
.frames:not(.tall) .frame img{transition:transform .9s var(--ease)}
.frame[tabindex]{cursor:zoom-in}
.frame[tabindex]:focus-visible{outline:3px solid var(--wine-soft);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .frames:not(.tall) .frame{transition:transform .45s var(--ease),box-shadow .45s var(--ease),filter .35s var(--ease)}
  .frames:not(.tall) .frame:hover{transform:rotate(0deg) scale(1.06);box-shadow:0 30px 70px rgba(0,0,0,.6);z-index:3}
  .frames:not(.tall) .frame:hover img{transform:scale(1.08)}
  .frames:not(.tall):hover .frame:not(:hover){filter:brightness(.6) saturate(.85)}
  /* chapter 12 reel: stop scrolling while the cursor is on it, enlarge the photo under the cursor */
  .reel:hover .track{animation-play-state:paused}
  .track img:hover{transform:scale(1.2);z-index:2;box-shadow:0 18px 44px rgba(0,0,0,.6)}
}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr auto;align-items:center;gap:12px;padding:clamp(12px,3vw,40px);padding-bottom:calc(clamp(12px,3vw,40px) + env(safe-area-inset-bottom,0px));background:rgba(6,8,26,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s var(--ease)}
.lightbox.open{opacity:1}
.lightbox figure{grid-column:2;grid-row:1;margin:0;display:grid;place-items:center;min-height:0;height:100%}
.lightbox img{width:100%;height:100%;max-height:calc(100dvh - 120px);object-fit:contain;border-radius:8px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.lightbox .lb-cap{grid-column:1/-1;grid-row:2;text-align:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.lightbox .lb-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(243,239,232,.08);display:grid;place-items:center;cursor:pointer}
.lightbox .lb-btn:hover{background:rgba(243,239,232,.18)}
.lightbox .lb-btn svg{width:22px;height:22px;fill:var(--paper)}
.lightbox .lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px}
.lightbox .lb-prev{grid-column:1;grid-row:1}
.lightbox .lb-next{grid-column:3;grid-row:1}
.lightbox[data-single] .lb-prev,.lightbox[data-single] .lb-next{visibility:hidden}
@media (max-width:600px){.lightbox{grid-template-columns:minmax(0,1fr);}.lightbox figure{grid-column:1}.lightbox .lb-prev,.lightbox .lb-next{display:none}}

/* ---------- responsive ---------- */
@media (max-width:860px){
  :root{--bar-h:70px}
  .inner{grid-template-columns:1fr;align-content:start;gap:16px;padding-block:18px}
  .copy{max-height:none;overflow:visible;padding-right:0}
  /* the slide scrolls on phones, so every row keeps its full content height. Without this the grid squeezes
     rows to fit the screen and blocks that clip their corners (CEO photo, photo reel) collapse under the text. */
  .inner{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;grid-auto-rows:max-content}
  .frames{order:-1;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
  .frames .frame,.frames.tall .frame{width:100%;transform:none!important;border-width:2px;border-radius:8px}
  .inner.with-frames{grid-template-columns:1fr}
  .frames:not(.tall){width:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row}
  .frames:not(.tall) .frame,.frames:not(.tall) .frame:first-child{grid-column:auto;aspect-ratio:4/3}
  .frames.tall{display:none}
  /* ---- automatic phone compaction ---- */
  /* What we do: icon + title, description opens on tap */
  .pillar-row{grid-template-columns:1fr;gap:10px}
  .pillar{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:0 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(11,15,46,.45);cursor:pointer}
  .pillar img{width:52px;height:52px;grid-row:span 1;margin:0;border-width:2px}
  .pillar h3{font-size:20px;margin:0}
  .pillar p{display:none;grid-column:1/-1;margin-top:10px}
  .pillar.open p,.all-open .pillar p{display:block;font-size:13.5px;line-height:1.5;margin-top:6px}
  .all-open .pillar-row{gap:8px}
  .all-open .pillar{cursor:default}
  .all-open .pillar-more{display:none}
  .pillar-more{display:block;width:22px;height:22px;fill:var(--mist);transition:transform .25s var(--ease)}
  .pillar.open .pillar-more{transform:rotate(180deg)}
  /* bullet lists: two columns once there are 4+ items (short lists of long items read better in one) */
  .ticks{grid-template-columns:1fr;gap:6px 14px;margin-top:12px}
  .ticks:has(li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticks li{font-size:13px;line-height:1.4;padding-left:16px}
  .ticks li::before{width:7px;height:7px}
  /* Our team: one large photo */
  .team-grid{order:-1}
  .team-grid figure:first-child{aspect-ratio:2/1}
  .team-grid figure:not(:first-child){display:none}
  /* Contact: city + one-tap buttons instead of full postal addresses */
  .addr-full{display:none}
  .office{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:10px 12px 10px 16px}
  .office h3{margin:0 0 2px}
  .addr-city{display:block;grid-column:1;margin:0;font-size:13px;color:var(--mist)}
  .office-acts{display:flex;gap:8px;grid-column:2;grid-row:1/span 2}
  /* round icon buttons, 44px tap targets; the label stays for screen readers */
  .office-acts .act{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(243,239,232,.08);color:var(--paper);text-decoration:none;font-size:0}
  .office-acts .act svg{width:19px;height:19px;fill:currentColor}
  .cta-row{margin-top:14px}
  .office-acts .act.wa{background:#1f8f4e;border-color:#1f8f4e;color:#fff}
  .offices{gap:10px;margin-top:14px}
  #copyEmail{display:none}
  .ceo-photo{--pw:min(116px,32vw)!important;order:-1;width:var(--pw);height:calc(var(--pw) * 1.25);align-self:start;justify-self:start;border-width:2px;border-radius:10px}
  .reel{padding-block:0;margin-block:0}
  .pillars .inner,.numbers .inner,.gallery .inner{align-content:start}

  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* compact figures so all six fit on one phone screen instead of hiding behind the control bar */
  .numbers .inner{row-gap:10px}
  .numbers h2{font-size:clamp(28px,min(8vw,6.4vh),40px);margin-bottom:12px}
  .numbers .leg{margin-bottom:8px}
  .stats{margin-top:0}
  .stat{padding:clamp(10px,2.2vh,16px) clamp(12px,3.4vw,16px)}
  .stat .n{font-size:clamp(26px,min(8.5vw,6.4vh),40px)}
  .stat .l{font-size:10.5px;letter-spacing:.1em;line-height:1.45;margin-top:6px}
  .offices{grid-template-columns:1fr}
  .now .c{display:none}
  .chap-btn .lbl{display:none}
  .chap-btn{width:40px;padding:0;justify-content:center}
  .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-height:620px) and (min-width:861px){
  h2{font-size:clamp(28px,4vw,48px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .scene{transition:none}
}

img{max-width:100%}
@media (max-width:860px) and (orientation:landscape){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* very narrow phones: one bullet column so words don't break mid-line */
@media (max-width:340px){.ticks{grid-template-columns:1fr}}
/* ---------- loop button + TV mode ---------- */
#loop.on,#fs.on{background:rgba(201,69,109,.22)}
#loop.on svg,#fs.on svg{fill:var(--wine-soft)}
.tv .edge-tab{display:none}
.tv.idle,.tv.idle *,.fsmode.idle,.fsmode.idle *{cursor:none!important}
.bar{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tv.idle .bar,.fsmode.idle .bar{opacity:0;transform:translateY(12px);pointer-events:none}
.tv.idle .stage,.fsmode.idle .stage{bottom:0}
.fsmode .edge-tab{display:none}
@media (max-width:380px){.controls{gap:2px}.ctl{width:36px;height:36px}.ctl.big{width:42px;height:42px}.chap-btn{width:36px;height:36px}.now{padding-left:4px}.now .t{font-size:11px}}
@media (max-width:340px){.now .t{display:none}}
/* "Tap for sound" chip shown when the profile was started from a ?play / ?tv link */
.sound-chip{position:fixed;right:clamp(12px,2.5vw,28px);bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 14px);z-index:22;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(8,11,36,.88);color:var(--paper);font:600 13px var(--f-body);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:chipIn .5s var(--ease) both}
.sound-chip svg{width:18px;height:18px;fill:var(--wine-soft)}
@keyframes chipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tv.idle .sound-chip,.fsmode.idle .sound-chip{opacity:.0;pointer-events:none}
/* while playing, the big "Play the profile" button on the opening slide steps aside */
.play-cta{transition:opacity .4s var(--ease),transform .2s,background .2s}
.is-playing .scene.is-active .play-cta,.is-playing .play-cta{animation:none;opacity:0;pointer-events:none}

/* ===== "← SAS Global Reisen" link back to the website (Profile settings > back_link) ===== */
.site-back{position:fixed;top:calc(env(safe-area-inset-top,0px) + clamp(10px,2vh,18px));left:clamp(10px,2vw,22px);z-index:23;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(8,11,36,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--paper);font:600 12px/1 var(--f-body);letter-spacing:.04em;text-decoration:none;opacity:.8;transition:opacity .2s,background .2s,transform .5s var(--ease)}
.site-back svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.site-back:hover,.site-back:focus-visible{opacity:1;background:rgba(27,34,99,.92)}
.site-back:focus-visible{outline:2px solid var(--wine-soft);outline-offset:2px}
.embedded .site-back,.tv .site-back{display:none}
.idle .site-back,.fsmode.idle .site-back{opacity:0;pointer-events:none}
@media (max-width:640px){.site-back{padding:7px 12px 7px 9px;font-size:11px;min-height:34px}}

/* ---------- Welcome slide: sky-blue cover, matching the brochure front page (2026-10-06) ---------- */
.scene.intro{background:radial-gradient(ellipse 75% 70% at 50% 45%,#d6e9f0 0%,#cde4ec 55%,#badae5 100%)}
.scene.intro .bg{display:none}
.scene.intro::after{background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.35),transparent 60%)}
.intro .logo-plate{background:transparent;box-shadow:none}
.intro .tagline{color:#1b2263}
.intro .subline{color:#4b5f7c}

/* ---------- Sky-blue theme on every chapter, matching the brochure cover (2026-10-06) ---------- */
/* inside the slides, the light tokens flip to dark ones; the control bar, chapter list and photo viewer stay dark */
.stage{--paper:#1b2263;--mist:#4b5f7c;--line:rgba(27,34,99,.16);--ink-soft:#33405e;color:var(--paper);color-scheme:light;background:#cde4ec}
.stage .scene{background:radial-gradient(ellipse 75% 70% at 50% 45%,#d6e9f0 0%,#cde4ec 55%,#badae5 100%)}
.stage .scene .bg{display:none}
.stage .scene::after{background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.35),transparent 60%)}
.stage h2 em{color:var(--wine)}
.stage .copy p,.stage .pillar p,.stage .office address{color:var(--ink-soft)}
.stage .ticks li::before{background:var(--wine)}
.stage .stat .n small{color:var(--wine)}
/* photo frames: white borders, softer shadows on the light background */
.stage .frame,.stage .ceo-photo,.stage .pillar img{border-color:#fff;box-shadow:0 14px 34px rgba(27,34,99,.22)}
.stage .team-grid figure,.stage .track img{border-color:#fff}
.stage .frames:not(.tall) .frame:hover{box-shadow:0 26px 60px rgba(27,34,99,.32)}
.stage .track img:hover{box-shadow:0 16px 40px rgba(27,34,99,.32)}
/* cards become soft white panels */
.stage .stats{background:var(--line);border-color:var(--line)}
.stage .stat{background:rgba(255,255,255,.6)}
.stage .office{background:rgba(255,255,255,.55);border-color:var(--line)}
.stage .badge{background:rgba(255,255,255,.45)}
.stage .btn{background:rgba(27,34,99,.06);color:var(--paper)}
.stage .btn:hover{background:rgba(27,34,99,.12)}
.stage .btn.primary{background:var(--wine);border-color:var(--wine);color:#fff}
.stage .btn.primary:hover{background:var(--wine-soft)}
.stage .office-acts .act{background:rgba(255,255,255,.7)}
.stage .office-acts .act.wa{background:#1f8f4e;color:#fff}
@media (max-width:860px){.stage .pillar{background:rgba(255,255,255,.55)}}
.stage .office h3{color:var(--wine)}
/* leave room for the back button so it never covers a slide's label */
:root:not(.tv):not(.embedded) .stage .inner{padding-top:max(clamp(20px,5vh,56px),58px)}
@media (max-width:860px){:root:not(.tv):not(.embedded) .stage .inner{padding-top:58px}}

/* ---------- What we do, desktop: centred promises with light dividers (2026-10-06 12:10) ---------- */
@media (min-width:861px){
  .pillar-row{gap:0}
  .pillar{text-align:center;padding:4px clamp(18px,2.4vw,34px);position:relative}
  .pillar img{display:block;margin:0 auto 14px}
  .pillar + .pillar::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;background:linear-gradient(180deg,transparent,rgba(27,34,99,.22) 18%,rgba(27,34,99,.22) 82%,transparent)}
  .pillar p{max-width:34ch;margin-inline:auto}
}

/* ---------- Welcome: globe + greetings (2026-10-06 12:25) ---------- */
/* globe: left of the centred logo on desktop, sized to the free space; small above the logo on phones */
.intro{--logo-w:min(720px,88vw,calc((100vh - var(--bar-h)) * 1.15))}
.globe-wrap{pointer-events:none}
.globe-wrap canvas{display:block}
@media (min-width:861px){
  .globe-wrap{position:absolute;z-index:1;left:clamp(12px,3vw,56px);top:50%;transform:translateY(-52%);
    width:clamp(0px,calc((100vw - var(--logo-w)) / 2 - 48px),42vh);aspect-ratio:1}
}
@media (max-width:860px){
  .globe-wrap{width:min(150px,38vw,22vh);aspect-ratio:1;margin:0 auto -6px}
}
/* greetings: positions and styles come from render.php (gs = bold sans, gn = navy, gw = wine) */
.intro .greet span{font-family:var(--f-display);font-weight:600;opacity:.5;color:#84a8c0;line-height:1}
.intro .greet span.gs{font-family:var(--f-body);font-weight:800;letter-spacing:-.01em}
.intro .greet span.gn{color:#30306c;opacity:.42}
.intro .greet span.gw{color:#8e1c3c;opacity:.45}
@media (max-width:860px){.intro .greet span{font-size:min(1em,7vw)!important;opacity:.35}}

/* ---------- 2026-10-06 16:05 ---------- */
/* Welcome: repeated greetings (added by globe.js, class gx, placed only where they touch nothing) */
.intro .greet span.gx{opacity:.32}
.intro .greet span.gx.gn,.intro .greet span.gx.gw{opacity:.3}
.intro .greet span.g-off{visibility:hidden}
@media (max-width:860px){.intro .greet span.gx{display:none}}
/* phones: give the globe a real height; in the grid it was stretched to the row and pushed the logo down */
@media (max-width:860px){.globe-wrap{height:min(150px,38vw,22vh);align-self:center}}
/* What we do: S / A / S icons 25% larger */
.pillar img{width:105px;height:105px}
@media (max-width:860px){
  .pillar{grid-template-columns:65px minmax(0,1fr) auto}
  .pillar img{width:65px;height:65px}
}
/* Our team: the intro paragraph matches the paragraph below it */
.scene:has(.team-grid) .copy .lede{font-size:inherit;color:var(--ink-soft);max-width:62ch;margin:0 0 14px}

/* ---------- 2026-10-06 16:15: Welcome tagline + sub-line larger and bold ---------- */
.intro .tagline{font-size:clamp(23px,calc(min(3vw,5vh) + 3px),37px);font-weight:700}
.intro .subline{font-size:15px;font-weight:600;color:var(--wine)}
@media (max-width:860px){.intro .subline{font-size:13.5px;letter-spacing:.12em;line-height:1.5}}

/* ---------- 2026-10-10 14:45: Welcome slide fits every screen ---------- */
/* small laptops / landscape tablets: a slightly narrower logo leaves room for the globe beside it */
@media (min-width:861px) and (max-width:1200px) and (orientation:landscape){
  .intro{--logo-w:min(640px,60vw,calc((100vh - var(--bar-h)) * 1.15))}
  .intro .logo-plate{width:var(--logo-w)}
}
/* upright tablets wider than 860px (iPad Pro, Surface): no room beside the logo, so the globe sits above it */
@media (min-width:861px) and (orientation:portrait){
  .globe-wrap{position:static;transform:none;width:min(240px,30vw,20vh);height:min(240px,30vw,20vh);margin:0 auto -6px}
}
/* phones held sideways: the stacked layout was ~80px too tall and pushed the Play button under the control bar.
   Globe moves beside the logo (as on desktop) and the gaps tighten so everything fits above the bar. */
@media (max-width:860px) and (orientation:landscape) and (max-height:500px){
  .intro{--logo-w:min(520px,62vw,calc((100vh - var(--bar-h) - 58px) * 2.2))}
  .intro .logo-plate{width:var(--logo-w);padding-block:4px}
  .globe-wrap{position:absolute;z-index:1;left:clamp(8px,2vw,24px);top:50%;transform:translateY(-46%);
    width:clamp(0px,calc((100vw - var(--logo-w)) / 2 - 24px),calc(100vh - var(--bar-h) - 70px));height:auto;aspect-ratio:1;margin:0}
  .intro .inner{row-gap:4px;padding-bottom:8px;align-content:center}
  .intro .tagline{font-size:clamp(17px,4.6vh,22px);margin-top:2px}
  .intro .subline{font-size:11.5px;letter-spacing:.1em}
  .intro .play-cta{margin-top:4px;padding:10px 20px}
}
@supports (height:100dvh){
  @media (max-width:860px) and (orientation:landscape) and (max-height:500px){
    .intro{--logo-w:min(520px,62vw,calc((100dvh - var(--bar-h) - 58px) * 2.2))}
  }
}

/* ---------- 2026-10-10 15:00: keep the globe clear of the logo ---------- */
@media (min-width:861px) and (orientation:landscape){
  .globe-wrap{width:clamp(0px,calc((100vw - var(--logo-w)) / 2 - 72px),42vh)}
}

/* ---------- 2026-10-10 15:15: desktop chapters fit on one screen ----------
   Measured on the live profile: at 1366x657 About us overflowed by 221px, CEO 75, FIT 28, Educational 22,
   Contact 19, because text had 43% of the width and headings were a fixed 68px. Phones are not affected. */
@media (min-width:861px){
  .inner.with-frames{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(20px,3vw,48px)}
  .scene:has(.ceo-photo) .inner,
  .scene:has(.frames.tall) .inner{grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3.5vw,56px)}
  .scene:has(.team-grid) .inner{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .stage h2{font-size:clamp(30px,min(4.4vw,7.6vh),64px);margin-bottom:clamp(10px,2vh,18px)}
  .stage blockquote{font-size:clamp(20px,min(2.2vw,4.4vh),30px);max-width:40ch}
  .stage .copy p{max-width:74ch}
  .stage .copy .lede{font-size:clamp(15.5px,min(1.3vw,2.5vh),19px);max-width:70ch}
  .stage .leg{margin-bottom:clamp(8px,1.6vh,14px)}
}
@media (min-width:861px) and (max-height:800px){
  .stage .copy p{margin-bottom:10px;line-height:1.55}
  .stage .ticks{margin-top:10px;gap:4px 20px}
  .stage .offices{margin-top:12px}
  .stage .office{padding:12px 16px}
  .stage .cta-row{margin-top:12px}
}
@media (min-width:861px) and (max-height:660px){
  .stage h2{font-size:clamp(28px,min(4vw,7vh),56px)}
  .stage .copy p{font-size:14px;line-height:1.5;margin-bottom:8px}
  .stage .copy .lede{font-size:15px}
  .stage .ticks li{font-size:13px}
  .stage blockquote{margin-bottom:12px}
}
@media (min-width:861px) and (max-width:1100px) and (max-height:660px){
  .inner.with-frames{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .stage .ceo-photo{--pw:min(250px,25vw)}
  .stage blockquote{font-size:20px;margin-bottom:10px}
}

/* ---------- 2026-10-10 15:35: show a chapter's background photo when one is set ----------
   The sky-blue theme hid every .bg (the old dark-photo treatment made navy text unreadable). A photo chosen in
   the dashboard now shows, lightly blurred, under a sky-blue wash: strongest behind the text (left), lighter on
   the photo side; on the Welcome slide strongest in the middle behind the logo. */
.stage .scene .bg[style*="background-image"]{display:block;inset:-3%;filter:blur(2px) saturate(1.08);transform:scale(1.04)}
.stage .scene:has(> .bg[style*="background-image"])::after{background:linear-gradient(100deg,rgba(214,233,240,.92) 0%,rgba(210,231,238,.80) 48%,rgba(196,224,234,.50) 100%)}
.stage .scene.intro:has(> .bg[style*="background-image"])::after{background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(220,237,243,.88) 0%,rgba(210,231,238,.70) 55%,rgba(190,220,231,.38) 100%)}
@media (max-width:860px){
  /* phones: text sits over the whole photo, so the wash is even */
  .stage .scene:has(> .bg[style*="background-image"])::after,
  .stage .scene.intro:has(> .bg[style*="background-image"])::after{background:rgba(214,233,240,.84)}
}