/* ===========================================================
   GALLE CONSULTING — [ Care You Can See ]
   Cinematic · Galle Crimson on Warm Black · "The Logo Opens"
   =========================================================== */
:root{
  --black:#14110F;       /* warm black — cinematic ground            */
  --black-2:#1C1815;     /* slightly lifted dark panel               */
  --ivory:#F3EDE4;       /* ivory — light ground / reversed text     */
  --ivory-2:#EAE2D5;
  --crimson:#AD1F24;     /* GALLE CRIMSON — their real brand colour  */
  --crimson-deep:#8E171B;
  --gray:#6D6E71;        /* logo gray                                */
  --ash:#B8B1AA;         /* soft ash neutral                         */

  --bg:var(--ivory);
  --maxw:1240px;
  --gutter:clamp(22px,5vw,72px);
  --radius:2px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.1,1);
  --ease-drama:cubic-bezier(.16,1,.3,1);

  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--black);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--crimson);color:var(--ivory)}

.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.brk{color:var(--crimson);font-style:normal}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-weight:600;font-size:.86rem;
  letter-spacing:.04em;text-transform:uppercase;line-height:1;
  padding:1.05em 1.8em;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  white-space:nowrap;
}
.btn-solid{background:var(--crimson);color:var(--ivory)}
.btn-solid:hover{background:var(--crimson-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.75}
.btn-ghost:hover{opacity:1;border-color:var(--crimson);color:var(--crimson)}
.btn-line{background:transparent;border-color:rgba(243,237,228,.32);color:var(--ivory);font-size:.74rem;padding:.78em 1.2em}
.btn-line:hover{border-color:var(--crimson);background:var(--crimson)}
.btn-lg{padding:1.25em 2.4em;font-size:.92rem}

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;padding:20px 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.site-header.scrolled{
  background:rgba(243,237,228,.86);backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 rgba(20,17,15,.08);padding:11px 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

/* logo swap: light over the dark hero, dark once scrolled onto ivory */
.brand-logo{display:block;height:34px;width:auto;transition:opacity .5s var(--ease)}
.logo-dark{display:none}
.site-header.scrolled .logo-light{display:none}
.site-header.scrolled .logo-dark{display:block}

.nav{display:flex;gap:36px}
.nav a{
  font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ivory);position:relative;padding:4px 0;opacity:.78;transition:opacity .3s var(--ease),color .3s;
}
.site-header.scrolled .nav a{color:var(--black)}
.nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1.5px;background:var(--crimson);transition:width .35s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after{width:100%}

/* Hizmetler dropdown */
.nav .has-sub{position:relative;display:inline-flex;align-items:center}
.nav .sub{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:288px;background:var(--ivory);border:1px solid rgba(20,17,15,.1);
  box-shadow:0 26px 64px rgba(20,17,15,.22);border-radius:3px;
  padding:18px 10px 10px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;z-index:80;
}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav .sub a{padding:9px 14px;font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--black);opacity:1;border-radius:2px;white-space:nowrap}
.nav .sub a::after{display:none}
.nav .sub a:hover{background:rgba(173,31,36,.08);color:var(--crimson);opacity:1}

.header-right{display:flex;align-items:center;gap:18px}
.lang{display:none;align-items:center;gap:7px}
.lang-opt{background:none;border:none;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--ivory);opacity:.5;cursor:pointer;transition:opacity .3s,color .3s}
.site-header.scrolled .lang-opt{color:var(--black)}
.lang-opt.is-active{opacity:1;color:var(--crimson)}
.lang-opt:hover{opacity:1}
.lang-opt:disabled{cursor:default;opacity:.32}
.lang-opt:disabled:hover{opacity:.32}
.lang-sep{opacity:.3;font-size:.7rem;color:inherit}
.header-right .lang-sep{color:var(--ivory)}
.site-header.scrolled .lang-sep{color:var(--black)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--ivory);transition:transform .4s var(--ease),opacity .3s}
.site-header.scrolled .burger span{background:var(--black)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mobile-menu{display:none;flex-direction:column;gap:2px;background:var(--black);padding:8px var(--gutter) 28px;max-height:0;overflow:hidden;visibility:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .35s var(--ease),visibility .35s}
.mobile-menu.open{max-height:1000px;visibility:visible;opacity:1}
.mobile-menu a{padding:15px 0;font-size:1.05rem;color:var(--ivory);border-bottom:1px solid rgba(243,237,228,.1)}
.mobile-menu .mm-sub{padding:11px 0 11px 18px;font-size:.92rem;opacity:.66;border-bottom-color:rgba(243,237,228,.06)}
.mobile-menu .mm-cta{color:var(--crimson);font-weight:700;border-bottom:none}

/* ===========================================================
   HERO · THE LOGO OPENS  (cinematic, warm-black)
   =========================================================== */
.hero{
  position:relative;min-height:calc(100svh - 58px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);
  color:var(--ivory);
}
.hero::before{
  content:"";position:absolute;inset:-20%;z-index:3;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,48%),rgba(243,237,228,.13),transparent 16%);
  opacity:0;mix-blend-mode:screen;transition:opacity .8s var(--ease);
}
.hero.opened::before{opacity:.65}
.hero::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(110deg,transparent 0%,transparent 42%,rgba(243,237,228,.16) 48%,transparent 54%,transparent 100%);
  transform:translateX(-120%);opacity:0;
}
.hero.opened::after{animation:heroGlint 4.8s var(--ease) 1.1s infinite}
@keyframes heroGlint{0%{transform:translateX(-120%);opacity:0}18%{opacity:.42}38%,100%{transform:translateX(120%);opacity:0}}

/* the field — warm-black cinema; a crimson aura breathes in on .opened */
.hero-bg{position:absolute;inset:0;z-index:1;overflow:hidden;
  background:
    radial-gradient(120% 82% at 50% 116%,rgba(190,128,74,.06),transparent 60%),
    linear-gradient(180deg,#1E1916 0%,var(--black) 58%,#100D0B 100%);
}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 54% at 50% 36%,rgba(196,140,86,.08),transparent 64%);
  opacity:0;transition:opacity 1.25s var(--ease-soft);
}
.hero.opened .hero-bg::before{opacity:1}
/* cinematic grade: faint column hairlines + edge vignette */
.hero-grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(243,237,228,.025) 0 1px,transparent 1px 92px),
    radial-gradient(120% 80% at 50% 42%,transparent 40%,rgba(15,12,10,.55) 100%);
}

/* stage 1 — the sacred logo, now a full-page curtain: the same warm-black
   field as the hero, fixed above everything (header, marquee) until the
   assembly completes, then it dissolves and hands off to the open hero */
.intro{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 82% at 50% 116%,rgba(190,128,74,.06),transparent 60%),
    linear-gradient(180deg,#1E1916 0%,var(--black) 58%,#100D0B 100%);
  transition:opacity .85s var(--ease-soft),visibility .85s var(--ease-soft);
}
.intro::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 42%,transparent 40%,rgba(15,12,10,.55) 100%);
}
.intro.is-leaving{opacity:0;visibility:hidden}
.intro-logo{
  width:clamp(240px,34vw,440px);height:auto;
  filter:drop-shadow(0 8px 40px rgba(0,0,0,.5));
}
.intro.is-leaving .intro-logo{opacity:0;transform:translateY(-42px) scale(.86);transition:opacity .55s var(--ease),transform .8s var(--ease-drama)}
html.intro-active{overflow:hidden}
html.intro-active .site-header{opacity:0;pointer-events:none}
.site-header{transition:opacity .7s var(--ease) .25s,background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease)}

/* the logo assembles from its own DNA: the two ivory l's rise first
   like columns; the crimson letters settle against them from the sides;
   "consulting" tracks in letter by letter underneath */
.hl-l{clip-path:inset(101% 0 0 0);animation:hlRise .9s var(--ease-drama) forwards}
.hl-l1{animation-delay:.15s}
.hl-l2{animation-delay:.38s}
@keyframes hlRise{to{clip-path:inset(-2% 0 0 0)}}

.hl-cap{
  opacity:0;filter:blur(7px);
  transform-box:fill-box;transform-origin:center;
  animation:hlSettle .85s var(--ease-drama) forwards;
}
.hl-g{transform:translateX(-16px);animation-delay:.75s}
.hl-a{transform:translateX(-9px);animation-delay:.88s}
.hl-e{transform:translateX(11px);animation-delay:.88s}
@keyframes hlSettle{to{opacity:1;filter:blur(0);transform:translateX(0)}}

.hl-sub path{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:translateY(5px);
  animation:hlSub .55s var(--ease) forwards;
  animation-delay:calc(1.35s + var(--i,0)*.05s);
}
@keyframes hlSub{to{opacity:1;transform:translateY(0)}}

/* stage 2 — full-bleed sepia slider behind the message; a left-weighted
   scrim keeps the warm-black ground under the text so it stays readable */
.hero-split{position:relative;z-index:7;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter)}
.hero-content{max-width:36rem}

.ap-core{max-width:none;text-align:left;opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease) .32s,transform .85s var(--ease) .32s}
.hero.opened .ap-core{opacity:1;transform:none}

.hero-eyebrow{display:inline-flex;align-items:center;gap:.85em;font-size:.76rem;font-weight:700;
  letter-spacing:.4em;text-transform:uppercase;color:rgba(243,237,228,.82);margin-bottom:24px}
.he-dot{width:7px;height:7px;background:var(--crimson);border-radius:50%;flex:none}
.ap-core h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,4.7vw,4.1rem);line-height:1.05;letter-spacing:-.02em;
  font-variation-settings:"opsz" 144;color:var(--ivory);
  text-shadow:0 4px 40px rgba(0,0,0,.5);
  text-wrap:balance;
}
.ap-core h1 em{font-style:italic;color:var(--ivory)}
.hero-sub{max-width:46ch;margin:24px 0 0;font-size:clamp(1rem,1.45vw,1.14rem);color:rgba(243,237,228,.76);line-height:1.65}
.hero-cta{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;margin-top:32px}

/* full-bleed sepia slider — covers the whole hero, edge to edge.
   Reveal is opacity-only (no scale) so it can't fight the per-frame fade. */
.hero-visual{position:absolute;inset:0;z-index:1;margin:0;width:100%;height:100%;
  opacity:0;transition:opacity 1.2s var(--ease) .3s}
.hero.opened .hero-visual{opacity:1}

/* legibility scrim: heavy warm-black on the left (under the text), opening up
   toward the right so the picture breathes; plus a soft top+bottom darken */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,17,15,.96) 0%,rgba(20,17,15,.9) 30%,rgba(20,17,15,.62) 62%,rgba(20,17,15,.5) 100%),
    linear-gradient(0deg,rgba(20,17,15,.66) 0%,rgba(20,17,15,0) 34%),
    linear-gradient(180deg,rgba(20,17,15,.5) 0%,rgba(20,17,15,0) 24%)}
/* NOTE: scope to .hero-visual so this beats the later `.duo{position:relative}`
   rule — otherwise the frame collapses to 0 height and the photo vanishes. */
.hero-visual .hv-frame{position:absolute;inset:0;opacity:0;animation:heroFade 21s var(--ease) infinite}
/* frame 1 is the static base — always on, so the layer reveals to a steady
   picture with no fade-in flicker; frames 2 & 3 cross-fade in over it */
.hv-frame:nth-child(1){opacity:1;animation:none}
.hv-frame:nth-child(2){animation-delay:7s}
.hv-frame:nth-child(3){animation-delay:14s}
.hv-frame img{transform:scale(1.04);animation:heroDrift 21s ease-in-out infinite}
.hv-frame:nth-child(2) img{animation-delay:7s}
.hv-frame:nth-child(3) img{animation-delay:14s}
/* lift the duotone shadow to a warm charcoal so the picture reads as a soft
   panel against the warm-black ground, while the mask melts its edges away */
.hero-visual .duo::before{background:#2C231C}
.hero-visual .duo img{filter:grayscale(1) contrast(1.02) brightness(1.12) sepia(.18)}
@keyframes heroFade{0%{opacity:0}5%{opacity:1}28%{opacity:1}36%{opacity:0}100%{opacity:0}}
@keyframes heroDrift{0%{transform:scale(1.04)}33%{transform:scale(1.09)}100%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  .hv-frame{animation:none}
  .hv-frame:nth-child(1){opacity:1}
  .hv-frame:nth-child(n+2){opacity:0}
  .hv-frame img{animation:none}
}

.hero-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ash);opacity:0;transition:opacity 1s var(--ease) 1.6s}
.hero.opened .hero-scroll{opacity:.8}
.hero-scroll span{width:1px;height:36px;background:linear-gradient(var(--ash),transparent);animation:scrollPulse 2.4s var(--ease) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- MARQUEE BAND ---------- */
.marquee-band{
  position:relative;overflow:hidden;background:var(--black);color:var(--ivory);
  border-top:1px solid rgba(243,237,228,.1);
  border-bottom:1px solid rgba(173,31,36,.35);
}
.marquee-band::before,.marquee-band::after{
  content:"";position:absolute;top:0;bottom:0;width:18vw;z-index:2;pointer-events:none;
}
.marquee-band::before{left:0;background:linear-gradient(90deg,var(--black),transparent)}
.marquee-band::after{right:0;background:linear-gradient(270deg,var(--black),transparent)}
.marquee-track{
  display:flex;width:max-content;gap:0;
  animation:marqueeFlow 34s linear infinite;
}
.marquee-track span{
  display:inline-flex;align-items:center;min-height:58px;
  padding-inline:clamp(28px,5vw,76px);
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,237,228,.72);white-space:nowrap;
}
.marquee-track span::before{
  content:"";width:7px;height:7px;margin-right:clamp(28px,4vw,52px);
  border:1px solid var(--crimson);transform:rotate(45deg);
}
@keyframes marqueeFlow{to{transform:translateX(-50%)}}

/* ===========================================================
   SECTION SCAFFOLD + heads
   =========================================================== */
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:var(--crimson);margin-bottom:22px}
.sec-head{max-width:880px;margin-bottom:clamp(50px,8vh,96px)}
.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.02;letter-spacing:-.022em;color:inherit}
.sec-lead{margin-top:24px;font-size:1.1rem;line-height:1.7;max-width:64ch;opacity:.74}

/* ---------- POSITIONING — big statement ---------- */
.stmt{background:var(--ivory);padding-block:clamp(90px,15vw,200px)}
.stmt-big{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,6.4vw,5.2rem);line-height:1.08;letter-spacing:-.022em;
  max-width:20ch;color:var(--black);
}
.stmt-big em{font-style:italic;color:var(--crimson)}
.stmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,60px);margin-top:clamp(56px,8vw,96px)}
.stmt-cell{border-top:2px solid var(--crimson);padding-top:24px}
.stmt-cell .ci{font-family:var(--serif);font-size:1rem;color:var(--crimson);display:block;margin-bottom:16px}
.stmt-cell h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:12px}
.stmt-cell p{font-size:.98rem;opacity:.72;line-height:1.65}

/* ===========================================================
   THE WAY OF GALLE — dark process scene + travelling aperture
   =========================================================== */
.process{position:relative;background:var(--black);color:var(--ivory);padding-block:clamp(90px,13vw,170px);overflow:hidden}
.process::before{content:"";position:absolute;inset:0;background:url("assets/hero-city-orig.jpg") center/cover;opacity:.1;filter:brightness(.72) saturate(.9);pointer-events:none}
.process::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background:
    linear-gradient(rgba(173,31,36,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(173,31,36,.1) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 42%,black,transparent 72%);
}
.process .shell{position:relative;z-index:2}
.process .sec-title{color:var(--ivory)}
.way{position:relative;margin-top:clamp(30px,5vw,60px)}
.steps{list-style:none}
.step{
  position:relative;padding:clamp(34px,5vw,64px) clamp(24px,5vw,70px);
  border-top:1px solid rgba(173,31,36,.32);
  opacity:.34;filter:blur(3px) saturate(.5);transform:translateY(6px);
  transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease);
  overflow:hidden;
}
.step::before{
  content:attr(data-step);position:absolute;right:clamp(20px,4vw,72px);top:50%;
  transform:translateY(-50%);font-family:var(--serif);font-size:clamp(4.8rem,14vw,12rem);
  color:rgba(243,237,228,.035);line-height:1;opacity:0;transition:opacity .7s var(--ease);
}
.step::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(173,31,36,.14),transparent);
  transform:translateX(-120%);opacity:0;
}
.step.is-active::before{opacity:1}
.step.is-active::after{animation:scanPass 1.8s var(--ease) both}
@keyframes scanPass{0%{transform:translateX(-120%);opacity:0}35%{opacity:1}100%{transform:translateX(120%);opacity:0}}
.step:last-child{border-bottom:1px solid rgba(173,31,36,.32)}
.step.clear{opacity:1;filter:none;transform:none}
.step-xray{position:absolute;inset:14px;pointer-events:none}
.xray-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(243,237,228,.22),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.xray-line:nth-child(1){top:30%}
.xray-line:nth-child(2){top:55%;transition-delay:.12s}
.xray-line:nth-child(3){top:80%;transition-delay:.24s}
.step.clear .xray-line{transform:scaleX(1)}
.step-body{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:start}
.step-no{font-family:var(--serif);font-size:clamp(2.6rem,6vw,5rem);font-weight:300;color:var(--crimson);line-height:.78}
.step-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.5rem);letter-spacing:-.01em;margin-bottom:8px;color:var(--ivory)}
.step-en{font-style:italic;font-family:var(--serif);color:var(--ash);font-size:1.04rem;margin-bottom:12px}
.step-text p:not(.step-en){font-size:1rem;color:rgba(243,237,228,.7);max-width:54ch;line-height:1.65}

.way-aperture{position:absolute;left:-2px;right:-2px;top:0;height:0;pointer-events:none;opacity:0;z-index:3;transform:translateY(0);transition:transform .6s var(--ease),height .6s var(--ease),opacity .5s var(--ease)}
.way-aperture.on{opacity:1}
.wa-c{position:absolute;width:30px;height:30px;border:2px solid var(--crimson)}
.wa-tl{top:0;left:0;border-right:none;border-bottom:none}
.wa-tr{top:0;right:0;border-left:none;border-bottom:none}
.wa-bl{bottom:0;left:0;border-right:none;border-top:none}
.wa-br{bottom:0;right:0;border-left:none;border-top:none}
.wa-scan{position:absolute;left:30px;right:30px;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(173,31,36,.7),transparent)}

/* ===========================================================
   CRIMSON MANIFESTO BAND
   =========================================================== */
.manifesto{background:var(--crimson);color:var(--ivory);padding-block:clamp(100px,16vw,200px)}
.man-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:rgba(243,237,228,.7);margin-bottom:36px}
.man-text{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,5.2vw,3.8rem);line-height:1.24;letter-spacing:-.01em;max-width:18ch}
.man-text em{font-style:italic;color:var(--black)}

/* ===========================================================
   VALUES
   =========================================================== */
.values{background:var(--ivory);padding-block:clamp(90px,13vw,170px)}
.value-list{list-style:none;border-top:1px solid rgba(20,17,15,.14)}
.value{display:grid;grid-template-columns:64px minmax(220px,1fr) 2fr;gap:clamp(16px,4vw,52px);align-items:baseline;padding:clamp(28px,3.6vw,44px) 0;border-bottom:1px solid rgba(20,17,15,.14);transition:padding-left .45s var(--ease)}
.value:hover{padding-left:14px}
.v-no{font-family:var(--serif);color:var(--crimson);font-size:1.05rem}
.value h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.01em}
.value p{font-size:1rem;opacity:.72;line-height:1.6}

/* ===========================================================
   SERVICES
   =========================================================== */
.services{background:var(--black-2);color:var(--ivory);padding-block:clamp(90px,13vw,170px)}
.services .sec-title{color:var(--ivory)}
.svc-rows{border-top:1px solid rgba(243,237,228,.16)}
.svc-row{position:relative;display:grid;grid-template-columns:66px 1fr 44px;gap:clamp(14px,3vw,40px);align-items:start;padding:clamp(26px,3.2vw,40px) 6px;border-bottom:1px solid rgba(243,237,228,.16);transition:padding-left .45s var(--ease),background .45s var(--ease);scroll-margin-top:96px;overflow:hidden}
.svc-row::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(243,237,228,.1),rgba(173,31,36,.22),transparent);
  transform:translateX(-110%);opacity:0;
}
.svc-row:hover{padding-left:24px;background:rgba(173,31,36,.1)}
.svc-row:hover::before{animation:rowLight 1.1s var(--ease) both}
@keyframes rowLight{0%{transform:translateX(-110%);opacity:0}25%{opacity:1}100%{transform:translateX(110%);opacity:0}}
.svc-idx{font-family:var(--serif);color:var(--crimson);font-size:1rem;padding-top:.35em}
.svc-main{display:flex;flex-direction:column;gap:10px}
.svc-name{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.8vw,2.1rem);letter-spacing:-.01em;color:var(--ivory);line-height:1.05}
.svc-desc{font-size:.96rem;color:rgba(243,237,228,.6);line-height:1.6;max-width:62ch}
.svc-arrow{font-size:1.4rem;color:var(--crimson);transform:translateX(-6px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);padding-top:.2em}
.svc-row:hover .svc-arrow{transform:translateX(0);opacity:1}

/* ===========================================================
   TEAM + NETWORK (dark — portraits shot on black blend into the field)
   =========================================================== */
.team{background:var(--black);color:var(--ivory);padding-block:clamp(90px,13vw,170px)}
.team .sec-title{color:var(--ivory)}
.team-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(18px,2.2vw,34px)}
.team-member{position:relative;display:flex;flex-direction:column}
.team-member::before{
  content:"";position:absolute;inset:-10px -10px auto -10px;aspect-ratio:4/3;
  border:1px solid rgba(173,31,36,0);transform:scale(.98);pointer-events:none;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.team-member:first-child::before{border-color:rgba(173,31,36,.42);transform:scale(1)}
.team-member:first-child::after{
  content:"Kurucu";position:absolute;top:14px;left:14px;z-index:2;
  font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory);background:rgba(173,31,36,.92);padding:7px 9px;
}
.team-photo{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 28%;border-radius:2px;background:#0d0b0a;filter:grayscale(.85) contrast(1.05) brightness(.82);transition:filter .7s var(--ease),transform .7s var(--ease)}
.team-member:hover::before{border-color:rgba(173,31,36,.5);transform:scale(1)}
.team-member:hover .team-photo{filter:grayscale(0) contrast(1.04) brightness(1);transform:translateY(-4px)}
.team-member h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.01em;margin:18px 0 6px}
.team-member span{font-size:.84rem;color:var(--crimson);font-weight:600;letter-spacing:.02em;line-height:1.4}

.network{background:var(--black-2);color:var(--ivory);padding-block:clamp(80px,12vw,150px)}
.network .sec-title{color:var(--ivory)}
.net-lead{margin-top:22px;font-size:1.08rem;line-height:1.78;color:rgba(243,237,228,.78);max-width:64ch}
.net-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin-top:clamp(40px,6vw,64px)}
.net-member{display:flex;flex-direction:column}
.net-photo{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 28%;border-radius:2px;background:#0d0b0a;filter:grayscale(.2);transition:filter .5s var(--ease)}
.net-member:hover .net-photo{filter:grayscale(0)}
.net-member h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.9vw,1.5rem);margin:16px 0 5px}
.net-member span{font-size:.82rem;color:var(--crimson);font-weight:600;letter-spacing:.02em}

/* ===========================================================
   EKİBİMİZ — architectural blueprint / section panels
   =========================================================== */
.crew{position:relative;background:var(--ivory);padding-block:clamp(64px,9vw,120px);
  background-image:linear-gradient(rgba(20,17,15,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,17,15,.032) 1px,transparent 1px);
  background-size:40px 40px}
.crew-grid{display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(18px,2.4vw,40px);row-gap:clamp(48px,6vw,86px)}
.crew-panel{grid-column:var(--c) / span var(--s);position:relative;display:flex;flex-direction:column}
.crew-photo{position:relative;aspect-ratio:7/5;border-radius:2px;overflow:hidden}
.crew-lead .crew-photo{aspect-ratio:8/5}
/* corner section brackets (TL + BR), drawn in warm-black */
.crew-photo::before,.crew-photo::after{content:"";position:absolute;width:16px;height:16px;z-index:3;
  border:1px solid var(--black);pointer-events:none}
.crew-photo::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.crew-photo::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
/* hover: the section frame completes into a full rectangle */
.crew-frame{position:absolute;inset:-7px;z-index:2;border:1px solid var(--black);opacity:0;
  transform:scale(.985);transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft);pointer-events:none}
.crew-panel:hover .crew-frame,.iunit-member:hover .crew-frame{opacity:.5;transform:scale(1)}
/* hover: photo gains a touch of life (duotone relaxes) */
.crew-photo img{transition:transform .6s var(--ease),filter .5s var(--ease)}
.crew-panel:hover .crew-photo img,.iunit-member:hover .crew-photo img{filter:grayscale(.62) contrast(1.04) brightness(1.07) sepia(.08)}
.crew-panel:hover .duo::after,.iunit-member:hover .duo::after{opacity:.74;transition:opacity .5s var(--ease)}
/* measure label */
.crew-label{margin-top:16px;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(20,17,15,.74);font-family:var(--sans)}
.crew-label--dark{color:rgba(243,237,228,.66)}
.crew-name{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:8px 0 5px;
  font-size:clamp(1.4rem,2.1vw,1.85rem);line-height:1.08;display:flex;align-items:baseline;flex-wrap:wrap;gap:.12em}
.crew-lead .crew-name{font-size:clamp(1.9rem,3.1vw,2.6rem)}
.crew-name em{font-style:italic}
.crew-plus{font-style:normal;color:var(--crimson);opacity:0;font-size:.7em;font-family:var(--sans);font-weight:400;
  transform:translateX(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.crew-panel:hover .crew-plus{opacity:1;transform:none}
.crew-role{font-size:.92rem;color:rgba(20,17,15,.62);line-height:1.45;font-weight:500}

/* the empty quadrant beside the founder — axis + motto */
.crew-aside{grid-column:var(--c) / span var(--s);position:relative;display:flex;flex-direction:column;
  justify-content:center;padding-left:clamp(8px,2vw,34px)}
.crew-axis-v{position:absolute;left:0;top:8%;bottom:8%;width:1px;background:rgba(20,17,15,.12)}
.crew-motto{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,2.6vw,2.2rem);
  line-height:1.25;color:var(--black)}
.crew-motto .dot{color:var(--crimson)}
.crew-coord{margin-top:18px;font-size:.64rem;font-weight:600;letter-spacing:.16em;color:rgba(20,17,15,.4);font-family:var(--sans)}

/* ---- i-unit network — dark band, inverted blueprint ---- */
.iunit{position:relative;background:var(--black);color:var(--ivory);padding-block:clamp(70px,10vw,140px);overflow:hidden;
  background-image:linear-gradient(rgba(243,237,228,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,237,228,.04) 1px,transparent 1px);
  background-size:40px 40px}
.iunit-route{display:flex;align-items:center;gap:clamp(14px,2vw,26px);margin-bottom:clamp(34px,5vw,58px)}
.ir-line{flex:1;height:0;border-top:1px dashed rgba(243,237,228,.28)}
.ir-tag{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--crimson);white-space:nowrap}
.iunit-head{max-width:760px}
.iunit .sec-title{color:var(--ivory)}
.iunit-lead{margin-top:20px;font-size:1.06rem;line-height:1.78;color:rgba(243,237,228,.76);max-width:62ch}
.iunit-lead strong{color:var(--ivory);font-weight:600}
.iunit-grid{list-style:none;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(18px,2.4vw,40px);
  margin-top:clamp(44px,6vw,72px)}
.iunit-member{grid-column:var(--c) / span var(--s);position:relative;display:flex;flex-direction:column}
.iunit-member .crew-photo::before,.iunit-member .crew-photo::after{border-color:rgba(243,237,228,.55)}
.iunit-member .crew-frame{border-color:rgba(243,237,228,.55)}
.iunit-member .crew-role{color:rgba(243,237,228,.6)}
.iunit-member .crew-name{color:var(--ivory)}
/* inverted duotone for photos on the dark band: shadows warm-black, highlights ivory */
.duo--dark::after{background:#F1E7D6}
.duo--dark img{filter:grayscale(1) contrast(1.05) brightness(1.04) sepia(.1)}

/* ---- team teaser (on hakkimizda) ---- */
.team-teaser{background:var(--ivory);padding-block:clamp(70px,10vw,140px)}
.teaser-strip{display:flex;align-items:center;gap:clamp(20px,4vw,52px);flex-wrap:wrap;
  margin-top:clamp(34px,5vw,56px);width:fit-content}
.ts-faces{display:flex}
.ts-face{position:relative;width:clamp(58px,7vw,82px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin-left:-14px;border:2px solid var(--ivory);transition:transform .4s var(--ease)}
.ts-face:first-child{margin-left:0}
.ts-face img{object-position:50% 22%}
.teaser-strip:hover .ts-face{transform:translateY(-3px)}
.ts-go{font-family:var(--sans);font-size:.84rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--black);display:inline-flex;align-items:center;gap:.6em;border-bottom:1px solid rgba(20,17,15,.2);padding-bottom:6px}
.ts-go i{color:var(--crimson);font-style:normal;transition:transform .4s var(--ease)}
.teaser-strip:hover .ts-go i{transform:translateX(5px)}

/* ===========================================================
   BRIDGE — the real bridge (Germany · Türkiye)
   =========================================================== */
/* ---- DUOTONE — grayscale image mapped to warm-black → warm ivory ----
   reusable: shadows resolve to warm black, highlights to a soft champagne
   ivory — an editorial sepia. Crimson stays a line accent (brackets, route),
   never the photograph's tone, so imagery reads refined, not lurid. */
.duo{position:relative;overflow:hidden;isolation:isolate;background:var(--black)}
.duo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04) brightness(1.06) sepia(.16);transition:transform .7s var(--ease)}
.duo::before{content:"";position:absolute;inset:0;z-index:1;background:#15110E;mix-blend-mode:lighten}
.duo::after{content:"";position:absolute;inset:0;z-index:1;background:#E9DDC9;mix-blend-mode:darken}

/* ---- BRIDGE — text column + framed duotone Istanbul panel ---- */
.bridge{position:relative;background:var(--black);color:var(--ivory);overflow:hidden}
.bridge .shell{position:relative;z-index:2}
.bridge-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(36px,5vw,84px);align-items:center;
  padding-block:clamp(80px,12vw,150px)}
.bridge-inner{max-width:560px}
.bridge-inner .eyebrow{color:var(--crimson)}
.bridge-inner .sec-title{color:var(--ivory)}
.bridge-inner p{margin-top:22px;font-size:1.08rem;line-height:1.75;color:rgba(243,237,228,.82);max-width:50ch}
.bridge-inner strong{color:var(--crimson);font-weight:600}
.bridge-media{position:relative;aspect-ratio:7/5;border-radius:var(--radius);overflow:hidden}
.bridge-media .duo{position:absolute;inset:0}
.bridge-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(20,17,15,.72))}
.bridge:hover .bridge-media img{transform:scale(1.04)}
.bridge-route{position:absolute;left:0;right:0;bottom:clamp(16px,2.4vw,26px);z-index:3;
  display:flex;align-items:center;gap:14px;padding-inline:clamp(16px,2.4vw,26px);pointer-events:none}
.route-line{position:relative;flex:1;height:1px;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(173,31,36,.1),rgba(173,31,36,.95),rgba(243,237,228,.6));
  animation:routeDraw 5.8s var(--ease) infinite}
.route-line::before,.route-line::after{content:"";position:absolute;top:50%;width:9px;height:9px;
  border:1px solid var(--crimson);background:rgba(20,17,15,.8);transform:translateY(-50%) rotate(45deg)}
.route-line::before{left:-3px}
.route-line::after{right:-3px}
.route-city{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,237,228,.92);text-shadow:0 2px 14px rgba(0,0,0,.9);white-space:nowrap}
@keyframes routeDraw{0%{transform:scaleX(0);opacity:0}20%{opacity:1}54%,100%{transform:scaleX(1);opacity:1}}

/* ---- EDITORIAL BAND — full-bleed duotone breath between sections ---- */
.ed-band{position:relative;height:clamp(280px,40vw,520px);overflow:hidden;background:var(--black);
  display:flex;align-items:center;justify-content:center}
.ed-band .duo{position:absolute;inset:0}
.ed-band::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(46% 40% at 50% 50%,rgba(15,12,10,.7),transparent 76%),
    linear-gradient(180deg,rgba(15,12,10,.42),rgba(15,12,10,.22) 40%,rgba(15,12,10,.5))}
.ed-line{position:relative;z-index:3;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,3.4vw,2.6rem);color:var(--ivory);text-align:center;padding-inline:var(--gutter);
  text-shadow:0 2px 30px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.8)}
.ed-line em{color:#E8B9A0;font-style:italic}
.ed-brk{position:absolute;width:40px;height:40px;border:2px solid var(--crimson);z-index:3}
.ed-tl{top:24px;left:24px;border-right:none;border-bottom:none}
.ed-tr{top:24px;right:24px;border-left:none;border-bottom:none}
.ed-bl{bottom:24px;left:24px;border-right:none;border-top:none}
.ed-br{bottom:24px;right:24px;border-left:none;border-top:none}

/* ===========================================================
   CTA
   =========================================================== */
.cta{background:var(--ivory);padding-block:clamp(50px,8vw,110px)}
.cta-inner{position:relative;text-align:center;background:var(--black);color:var(--ivory);border-radius:var(--radius);padding:clamp(64px,11vw,140px) clamp(28px,6vw,90px);max-width:1000px;margin-inline:auto;overflow:hidden}
.cta-inner::before{content:"";position:absolute;inset:0;background:url("assets/hero-city-orig.jpg") center/cover;opacity:.16;filter:brightness(.75) saturate(.9)}
.cta-brk{position:absolute;width:46px;height:46px;border:2px solid var(--crimson);z-index:2}
.cta-tl{top:26px;left:26px;border-right:none;border-bottom:none}
.cta-tr{top:26px;right:26px;border-left:none;border-bottom:none}
.cta-bl{bottom:26px;left:26px;border-right:none;border-top:none}
.cta-br{bottom:26px;right:26px;border-left:none;border-top:none}
.cta-inner>*:not(.cta-brk){position:relative;z-index:3}
.cta-eyebrow{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.3rem);color:var(--crimson);margin-bottom:22px}
.cta-title{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.6rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:22px}
.cta-sub{color:rgba(243,237,228,.78);font-size:1.06rem;max-width:48ch;margin:0 auto 38px}
.cta-fine{margin-top:26px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,237,228,.5)}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{background:var(--black);color:var(--ivory);padding-block:clamp(60px,8vw,90px) 44px}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:44px;align-items:start}
.foot-logo{height:30px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:.95rem;color:rgba(243,237,228,.62);line-height:1.6;max-width:38ch}
.foot-nav{display:flex;flex-direction:column;gap:13px}
.foot-nav a{font-size:.9rem;color:rgba(243,237,228,.78);text-transform:uppercase;letter-spacing:.04em;transition:color .3s}
.foot-nav a:hover{color:var(--crimson)}
.foot-meta p{font-size:.84rem;color:rgba(243,237,228,.5);line-height:1.6;margin-bottom:8px}

/* ===========================================================
   INNER PAGE HEADER (dark banner — keeps header logic identical)
   =========================================================== */
.page-header{position:relative;background:var(--black);color:var(--ivory);padding:clamp(140px,20vh,224px) 0 clamp(58px,9vw,104px);overflow:hidden}
.page-header::before{content:"";position:absolute;inset:0;background:url("assets/hero-city-orig.jpg") center/cover;opacity:.26;filter:brightness(.78) saturate(.95)}
.page-header::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,15,.66),rgba(20,17,15,.34) 45%,rgba(20,17,15,.78))}
.page-header .shell{position:relative;z-index:3}
.page-header .eyebrow{color:var(--crimson)}
.page-header h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6.2vw,4.8rem);line-height:1.02;letter-spacing:-.022em;color:var(--ivory)}
.page-header h1 em{font-style:italic;color:var(--crimson)}
.page-header .ph-lead{margin-top:24px;font-size:1.14rem;color:rgba(243,237,228,.78);max-width:60ch;line-height:1.72}

/* ===========================================================
   HOMEPAGE — AREAS TEASER (links to inner pages)
   =========================================================== */
.areas{background:var(--ivory);padding-block:clamp(90px,13vw,170px)}
.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);margin-top:clamp(40px,6vw,72px)}
.area-card{position:relative;display:flex;flex-direction:column;background:var(--black);color:var(--ivory);padding:clamp(30px,3vw,46px);border-radius:var(--radius);min-height:clamp(360px,30vw,420px);overflow:hidden;transition:transform .5s var(--ease)}
.area-card:hover{transform:translateY(-6px)}
.ac-media{position:absolute;inset:0;z-index:0}
.area-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,15,.32) 0%,rgba(20,17,15,.44) 38%,rgba(20,17,15,.92) 100%)}
.area-card>:not(.ac-media){position:relative;z-index:2}
.area-card:hover .ac-media img{transform:scale(1.05)}
.area-card .ac-no{font-family:var(--serif);color:var(--ivory);font-size:1.05rem;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.area-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.01em;margin-top:auto}
.area-card p{margin-top:12px;font-size:.96rem;color:rgba(243,237,228,.78);line-height:1.6}
.area-card .ac-go{margin-top:22px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--crimson)}
.area-card .ac-go::after{content:" →";transition:margin-left .4s var(--ease)}
.area-card:hover .ac-go::after{margin-left:6px}

/* ===========================================================
   ABOUT — philosophy intro block
   =========================================================== */
.about-intro{background:var(--ivory);padding-block:clamp(80px,12vw,150px)}
.about-lede{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.32;letter-spacing:-.01em;max-width:24ch}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);margin-top:clamp(40px,6vw,68px)}
.about-cols p{font-size:1.06rem;line-height:1.78;color:rgba(20,17,15,.76)}
.about-cols p+p{margin-top:18px}

/* ===========================================================
   INSIGHTS
   =========================================================== */
.insights{background:var(--ivory);padding-block:clamp(80px,12vw,150px)}
.insights-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(20,17,15,.12);border:1px solid rgba(20,17,15,.12)}
.insight{background:var(--ivory);padding:clamp(34px,4vw,56px);display:flex;flex-direction:column;gap:14px;transition:background .4s var(--ease)}
.insight:hover{background:#fff}
.insight .ins-tag{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson)}
.insight h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.12;letter-spacing:-.01em}
.insight p{font-size:1rem;color:rgba(20,17,15,.72);line-height:1.65}
.insight .ins-soon{margin-top:auto;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(20,17,15,.45)}

/* ===========================================================
   SERVICE DETAIL
   =========================================================== */
.svc-detail{background:var(--ivory);padding-block:clamp(70px,10vw,130px)}
.svc-detail-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.sd-main .lead-para{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.4;letter-spacing:-.01em;color:var(--black);margin-bottom:clamp(36px,5vw,56px)}
.sd-block{margin-bottom:clamp(34px,4vw,50px)}
.sd-block h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.95rem);margin-bottom:20px;letter-spacing:-.01em}
.sd-list{list-style:none}
.sd-list li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid rgba(20,17,15,.1);font-size:1.02rem;line-height:1.6;color:rgba(20,17,15,.82)}
.sd-list li::before{content:"";position:absolute;left:2px;top:20px;width:12px;height:12px;border-left:2px solid var(--crimson);border-bottom:2px solid var(--crimson)}
.sd-aside{position:sticky;top:104px;background:var(--black);color:var(--ivory);padding:clamp(28px,3vw,40px);border-radius:2px}
.sd-aside-title{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson);margin-bottom:18px}
.sd-aside ul{list-style:none;margin-bottom:26px}
.sd-aside ul li a{display:block;padding:9px 0;font-size:.92rem;color:rgba(243,237,228,.78);border-bottom:1px solid rgba(243,237,228,.1);transition:color .3s var(--ease),padding-left .3s var(--ease)}
.sd-aside ul li a:hover{color:var(--crimson);padding-left:6px}
.sd-aside ul li a.is-current{color:var(--crimson);font-weight:600}
.sd-aside .btn{width:100%}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact{background:var(--ivory);padding-block:clamp(80px,12vw,150px)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,90px)}
.contact-info{display:flex;flex-direction:column;gap:clamp(26px,3vw,38px)}
.ci-block .ci-label{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson);margin-bottom:10px}
.ci-block .ci-val{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.3;color:var(--black)}
.ci-block .ci-val a:hover{color:var(--crimson)}
.ci-block .ci-sub{font-size:.96rem;color:rgba(20,17,15,.66);margin-top:6px}
.contact-form{background:var(--black);color:var(--ivory);padding:clamp(32px,4vw,52px);border-radius:var(--radius)}
.contact-form .cf-row{margin-bottom:20px}
.contact-form label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-bottom:8px}
.contact-form input,.contact-form textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(243,237,228,.28);color:var(--ivory);font-family:var(--sans);font-size:1rem;padding:10px 2px;transition:border-color .3s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-bottom-color:var(--crimson)}
.contact-form textarea{resize:vertical;min-height:96px}
.contact-form .btn{margin-top:10px;width:100%}

/* ===========================================================
   REVEAL
   =========================================================== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:920px){
  .nav,.lang,.header-right .btn-line{display:none}
  .burger{display:flex}
  .mobile-menu{display:flex}
  .stmt-grid{grid-template-columns:1fr;gap:0}
  .stmt-cell{padding-block:28px}
  .stmt-cell:not(:first-child){border-top:none}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  .value{grid-template-columns:48px 1fr;row-gap:8px}
  .value p{grid-column:2}
  .svc-row{grid-template-columns:44px 1fr 26px}
  .svc-tr{display:none}
  .areas-grid{grid-template-columns:1fr}
  .insights-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .about-cols{grid-template-columns:1fr;gap:20px}
  .net-grid{grid-template-columns:repeat(2,1fr)}
  .svc-detail-grid{grid-template-columns:1fr;gap:44px}
  .sd-aside{position:static}
  .bridge-grid{grid-template-columns:1fr;gap:34px}
  .bridge-media{aspect-ratio:16/10}
  /* hero stays full-bleed; deepen the scrim so text over the image reads */
  .hero-sub{margin-inline:0}
  .hero-scrim{background:
    linear-gradient(90deg,rgba(20,17,15,.94) 0%,rgba(20,17,15,.82) 52%,rgba(20,17,15,.66) 100%),
    linear-gradient(0deg,rgba(20,17,15,.72) 0%,rgba(20,17,15,0) 42%)}
  /* team blueprint → two even columns, founder + aside full width */
  .crew-grid,.iunit-grid{grid-template-columns:repeat(2,1fr);row-gap:clamp(36px,7vw,56px)}
  .crew-panel,.iunit-member{grid-column:auto!important}
  .crew-lead{grid-column:1 / -1!important}
  .crew-aside{grid-column:1 / -1!important;padding-left:0;margin-top:-12px}
  .crew-axis-v{display:none}
}
@media (max-width:560px){
  .crew-grid,.iunit-grid{grid-template-columns:1fr}
  .iunit-route .ir-line:first-child{display:none}
}
@media (max-width:560px){
  .net-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .ap-core h1{font-size:clamp(1.8rem,7.6vw,2.7rem);white-space:normal}
  .step-body{grid-template-columns:1fr;gap:10px}
  .step::before{right:18px;top:34%;font-size:5.8rem}
  .bridge-route{opacity:.75}
  .route-line{left:22px;right:22px;top:72%}
  .route-de{left:22px;top:64%;font-size:.56rem}
  .route-tr{right:22px;top:64%;font-size:.56rem}
  .cta-brk{width:30px;height:30px}
}

/* ===========================================================
   REDUCED MOTION — settle to final state, no drama
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .hero-img{filter:blur(0) brightness(.84) saturate(1) !important;opacity:1 !important;transform:none !important}
  .intro{display:none !important}
  .ap-core,.hero-scroll{opacity:1 !important;transform:none !important}
  .hero-visual{opacity:1 !important;clip-path:none !important}
  .hv-brk{opacity:1 !important}
  .reveal{opacity:1 !important;transform:none !important}
  .step{opacity:1 !important;filter:none !important;transform:none !important}
  .xray-line{transform:scaleX(1) !important}
  .way-aperture{display:none !important}
  .hero::after,.step::after,.route-line{animation:none !important}
  .route-line{transform:scaleX(1) !important}
}