/*
 * ═══════════════════════════════════════════════════
 *  AFG REAL ESTATE — Shared Stylesheet
 *  Covers: afg-realestate.html (main landing)
 *          afg-projekt-*.html  (project detail pages)
 *          afg-content-*.html  (content/service pages)
 * ═══════════════════════════════════════════════════
 */

/* ════════════════════════════════════
   RESET & VARIABLES
════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy:       #1C3154;
  --navy-dark:  #152640;
  --navy-mid:   #243D6A;
  --navy-light: #2E5089;
  --steel:      #4A6FA5;
  --sky:        #7B9FCC;
  --white:      #FFFFFF;
  --off:        #F4F6F9;
  --card:       #EEF1F6;
  --ink:        #1A2540;
  --ink-soft:   #4A5568;
  --ink-muted:  #8896AB;
  --border:     rgba(28,49,84,0.10);
  --border-mid: rgba(28,49,84,0.18);
  --fh: 'DM Sans', sans-serif;
  --fb: 'Inter', sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --block-gap: 0;
}

html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--white);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ════════════════════════════════════
   NAV [shared]
════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;height:64px;
  background:rgba(21,38,64,.96);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .4s;
}
#nav.scrolled{box-shadow:0 4px 28px rgba(0,0,0,.3)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-mark{
  width:36px;height:36px;background:var(--white);border-radius:5px;
  display:grid;place-items:center;
  font-family:var(--fh);font-size:.78rem;font-weight:700;
  color:var(--navy);letter-spacing:-.03em;line-height:1;
}
.nav-logo-text{font-family:var(--fb);font-size:.75rem;font-weight:400;
  color:rgba(255,255,255,.5);letter-spacing:.05em;text-transform:uppercase;line-height:1.3}
.nav-logo-text b{display:block;color:var(--white);font-weight:500;font-size:.85rem;letter-spacing:.02em}
.nav-links{display:flex;align-items:center;gap:2.25rem}
.nav-links a{font-family:var(--fb);font-size:1rem;font-weight:400;letter-spacing:.03em;
  color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s;
  position:relative;padding-bottom:2px}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:rgba(255,255,255,.5);transition:width .25s var(--ease)}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{width:100%}
.nav-cta{font-family:var(--fb);font-size:.72rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:8px 20px 8px 22px;border-radius:99px;border:1.5px solid rgba(255,255,255,.32);
  color:var(--white);text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  transition:background .25s,border-color .25s,transform .2s}
.nav-cta svg{width:13px;height:13px;flex-shrink:0;transition:transform .25s var(--ease)}
.nav-cta:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);transform:translateY(-1px)}
.nav-cta:hover svg{transform:translateX(3px)}

/* Back link [project pages] */
.nav-back{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:.72rem;
  font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,.5);text-decoration:none;
  transition:color .2s}
.nav-back:hover{color:var(--white)}
.nav-back svg{width:14px;height:14px}

/* ════════════════════════════════════
   BREADCRUMB [project + content pages]
════════════════════════════════════ */
.breadcrumb{
  background:var(--navy-dark);padding:.85rem 3rem;
  display:flex;align-items:center;gap:.6rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-top:64px;
}
.bc-item{font-family:var(--fb);font-size:.72rem;color:rgba(255,255,255,.4);
  text-decoration:none;transition:color .2s}
.bc-item:hover{color:rgba(255,255,255,.75)}
.bc-sep{color:rgba(255,255,255,.2);font-size:.65rem}
.bc-current{font-family:var(--fb);font-size:.72rem;color:rgba(255,255,255,.7);font-weight:500}

/* ════════════════════════════════════
   LAYOUT HELPERS [shared]
════════════════════════════════════ */
.wrap{max-width:1160px;margin:0 auto;padding:0 2.5rem}
section{padding:6rem 0}
.s-kicker{font-family:var(--fb);font-size:.67rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.9rem}
.s-kicker-w{color:rgba(255,255,255,.45)}
.s-h2{font-family:var(--fh);font-size:clamp(1.8rem,2.6vw,2.5rem);font-weight:600;
  color:var(--ink);line-height:1.12;letter-spacing:-.04em}
.s-h2-w{color:var(--white)}
.s-sub{font-family:var(--fb);font-size:.95rem;font-weight:300;
  color:var(--ink-soft);line-height:1.75;max-width:54ch;margin-top:.9rem}
.s-sub-w{color:rgba(255,255,255,.6)}

/* ════════════════════════════════════
   BUTTON SYSTEM [content + project pages]
════════════════════════════════════ */
.btn{
  font-family:var(--fb);font-size:.72rem;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;padding:12px 22px 12px 26px;border-radius:99px;
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  cursor:pointer;border:none;transition:background .2s,transform .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-mid)}
.btn-white{background:var(--white);color:var(--navy)}
.btn-white:hover{background:var(--off)}
.btn-outline{background:transparent;color:var(--white);
  border:1.5px solid rgba(255,255,255,.35);padding:11px 22px 11px 26px}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.65)}
.btn-outline-dark{background:transparent;color:var(--navy);
  border:1.5px solid var(--border-mid);padding:11px 22px 11px 26px}
.btn-outline-dark:hover{background:var(--off);border-color:var(--border-mid)}

/* Project page CTA buttons */
.btn-primary{
  font-family:var(--fb);font-size:.72rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;
  padding:13px 24px 13px 26px;border-radius:99px;
  background:var(--white);color:var(--navy);
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  border:none;cursor:pointer;
  transition:background .25s,transform .2s;
}
.btn-primary:hover{background:var(--off);transform:translateY(-1px)}
.btn-primary svg{width:14px;height:14px}

/* ════════════════════════════════════
   HERO CAROUSEL [main page]
════════════════════════════════════ */
.carousel{position:relative;width:100%;height:100vh;overflow:hidden;padding-top:64px}
.c-track{display:flex;height:100%;transition:transform .95s cubic-bezier(.77,0,.175,1)}
.c-slide{flex:0 0 100%;height:100%;position:relative}
.c-img{position:absolute;inset:-15% 0;background-size:cover;background-position:center;
  will-change:transform}
.c-overlay{position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(12,24,46,.9) 0%,rgba(12,24,46,.6) 40%,rgba(12,24,46,.12) 75%,transparent 100%)}
.c-content{position:absolute;bottom:14%;left:6%;max-width:580px;
  opacity:0;transform:translateY(22px);
  transition:opacity .8s .2s var(--ease),transform .8s .2s var(--ease)}
.c-slide.active .c-content{opacity:1;transform:translateY(0)}
.c-kicker{font-family:var(--fb);font-size:.67rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.8rem;
  display:flex;align-items:center;gap:.65rem}
.c-kicker::before{content:'';display:block;width:24px;height:1px;background:rgba(255,255,255,.4)}
.c-h1{font-family:var(--fh);font-size:clamp(2.4rem,4.2vw,3.8rem);font-weight:700;
  color:var(--white);line-height:1.08;letter-spacing:-.04em;margin-bottom:1.1rem}
.c-sub{font-family:var(--fb);font-size:.95rem;font-weight:300;
  color:rgba(255,255,255,.7);line-height:1.72;max-width:44ch;margin-bottom:2.25rem}
.c-btns{display:flex;gap:.85rem;flex-wrap:wrap}
.c-btn{font-family:var(--fb);font-size:.72rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:12px 20px 12px 24px;border-radius:99px;border:1.5px solid rgba(255,255,255,.4);
  color:var(--white);text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  transition:background .25s,border-color .25s,transform .2s}
.c-btn svg{width:15px;height:15px;flex-shrink:0;transition:transform .25s var(--ease)}
.c-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);transform:translateY(-1px)}
.c-btn:hover svg{transform:translateX(3px)}
.c-btn.solid{background:var(--white);color:var(--navy);border-color:var(--white)}
.c-btn.solid:hover{background:var(--off);border-color:var(--off)}
.c-dots{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.55rem;z-index:10}
.c-dot{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.3);
  border:none;cursor:pointer;transition:background .25s,width .3s;padding:0}
.c-dot.active{background:var(--white);width:22px}
.c-arrows{position:absolute;bottom:2.1rem;right:3rem;display:flex;gap:.45rem;z-index:10}
.c-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);
  background:rgba(12,24,46,.25);color:var(--white);cursor:pointer;display:grid;place-items:center;
  transition:background .25s,border-color .25s,transform .2s}
.c-arrow svg{width:15px;height:15px}
.c-arrow:hover{background:rgba(12,24,46,.6);border-color:rgba(255,255,255,.65);transform:scale(1.08)}
.c-scroll{position:absolute;bottom:2.5rem;left:3rem;font-family:var(--fb);font-size:.65rem;
  font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);
  display:flex;align-items:center;gap:.5rem}
.c-scroll svg{width:13px;height:13px;animation:bounce .8s ease infinite alternate}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(4px)}}

/* ════════════════════════════════════
   HIGHLIGHTS STRIP [main page]
════════════════════════════════════ */
.highlights{background:var(--navy-dark);border-top:1px solid rgba(255,255,255,.06)}
.hl-inner{max-width:1160px;margin:0 auto;padding:0 2.5rem;
  display:grid;grid-template-columns:repeat(4,1fr)}
.hl-item{
  padding:2.25rem 1.5rem;border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:.4rem;
  position:relative;overflow:hidden;cursor:default;
}
.hl-item:last-child{border-right:none}
.hl-item::before{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--steel),var(--sky));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.hl-item:hover::before{transform:scaleX(1)}
.hl-num{font-family:var(--fh);font-size:2.1rem;font-weight:600;
  color:var(--white);line-height:1;letter-spacing:-.05em;
  transition:transform .3s var(--ease)}
.hl-item:hover .hl-num{transform:translateY(-2px)}
.hl-unit{font-size:.75em;font-weight:600;opacity:.7}
.hl-label{font-family:var(--fb);font-size:.68rem;font-weight:400;
  letter-spacing:.06em;color:rgba(255,255,255,.4);text-transform:uppercase}
.hl-desc{font-family:var(--fb);font-size:.8rem;font-weight:300;
  color:rgba(255,255,255,.55);margin-top:.15rem;line-height:1.45}

/* ════════════════════════════════════
   SERVICES [main page]
════════════════════════════════════ */
.services{background:var(--white)}
.svc-header{display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:3.5rem;flex-wrap:wrap;gap:1.5rem}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.svc-card{background:var(--card);border-radius:12px;padding:2.25rem;border:1px solid var(--border);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);cursor:default}
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--steel));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.svc-card:hover{box-shadow:0 16px 40px rgba(28,49,84,.12);transform:translateY(-4px)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-num{font-family:var(--fb);font-size:.65rem;font-weight:500;letter-spacing:.12em;
  color:var(--steel);margin-bottom:.85rem}
.svc-line{width:28px;height:2px;background:var(--navy);margin-bottom:1.25rem;border-radius:2px}
.svc-title{font-family:var(--fh);font-size:1rem;font-weight:600;color:var(--navy);
  margin-bottom:.75rem;line-height:1.25;letter-spacing:-.03em}
.svc-desc{font-family:var(--fb);font-size:.875rem;color:var(--ink-soft);
  line-height:1.7;flex:1;font-weight:300}
.svc-cta{display:inline-flex;align-items:center;justify-content:space-between;
  margin-top:1.75rem;padding:10px 12px 10px 20px;border-radius:99px;
  border:1.5px solid var(--navy);color:var(--navy);
  font-family:var(--fb);font-size:.7rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;gap:1rem;transition:background .25s,color .25s}
.svc-cta:hover{background:var(--navy);color:var(--white)}
.svc-cta:hover .svc-circle{background:var(--white)}
.svc-cta:hover .svc-circle svg{color:var(--navy)}
.svc-circle{width:28px;height:28px;background:var(--navy);border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;transition:background .25s}
.svc-circle svg{width:12px;height:12px;color:var(--white)}

/* ════════════════════════════════════
   SEGMENTS [main page]
════════════════════════════════════ */
.segments{background:var(--off);border-top:1px solid var(--border)}
.seg-header{display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:2.75rem;flex-wrap:wrap;gap:1.5rem}
.seg-arrows{display:flex;gap:.45rem}
.seg-arr{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border-mid);
  background:var(--white);color:var(--navy);cursor:pointer;display:grid;place-items:center;
  transition:background .25s,border-color .25s,transform .2s}
.seg-arr:hover{background:var(--navy);border-color:var(--navy);color:var(--white);transform:scale(1.08)}
.seg-arr svg{width:15px;height:15px}
.seg-wrap{overflow:hidden}
.seg-track{display:flex;gap:1.25rem;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.seg-card{flex:0 0 calc(33.333% - .85rem);border-radius:12px;overflow:hidden;
  background:var(--white);border:1px solid var(--border);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);cursor:default}
.seg-card:hover{box-shadow:0 12px 32px rgba(28,49,84,.10);transform:translateY(-4px)}
.seg-img{width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--card)}
.seg-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%);
  transition:filter .4s,transform .5s var(--ease)}
.seg-card:hover .seg-img img{filter:grayscale(0%);transform:scale(1.05)}
.seg-body{padding:1.4rem 1.6rem}
.seg-title{font-family:var(--fh);font-size:1rem;font-weight:600;
  color:var(--navy);margin-bottom:.35rem;line-height:1.3;letter-spacing:-.03em}
.seg-desc{font-family:var(--fb);font-size:.82rem;color:var(--ink-muted);line-height:1.55;font-weight:300}
.seg-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fb);font-size:.68rem;
  font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);
  text-decoration:none;margin-top:.85rem;transition:gap .25s var(--ease),color .2s}
.seg-link:hover{gap:.7rem;color:var(--navy)}
.seg-link svg{width:11px;height:11px}

/* ════════════════════════════════════
   FOR WHOM [main page]
════════════════════════════════════ */
.for-whom{position:relative;overflow:hidden;background:var(--navy-dark)}
.for-whom-bg{
  position:absolute;inset:-20%;
  background:url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1600&q=55') center 60%/cover;
  will-change:transform;
}
.for-whom::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(12,24,46,.94) 0%,rgba(12,24,46,.78) 55%,rgba(12,24,46,.42) 100%);
}
.for-whom .wrap{position:relative;z-index:2}
.for-whom .s-kicker{color:rgba(255,255,255,.4)}
.for-list{margin-top:2.75rem}
.for-item{
  display:flex;align-items:center;gap:1.75rem;
  padding:1.35rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:opacity .2s;
  user-select:none;
}
.for-item:first-child{border-top:1px solid rgba(255,255,255,.1)}
.for-item:last-child{border-bottom:none}
.for-item:hover{opacity:.85}
.for-item.open{opacity:1}
.for-num{font-family:var(--fh);font-size:.78rem;font-weight:700;
  color:rgba(255,255,255,.22);min-width:28px;flex-shrink:0;
  letter-spacing:.02em;padding-top:2px}
.for-body{flex:1}
.for-title{font-family:var(--fb);font-size:.95rem;font-weight:500;
  color:rgba(255,255,255,.8);line-height:1.4}
.for-item.open .for-title{color:var(--white)}
.for-desc{
  font-family:var(--fb);font-size:.875rem;font-weight:300;
  color:rgba(255,255,255,.48);line-height:1.72;
  max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease),opacity .35s var(--ease),margin-top .3s;
  opacity:0;margin-top:0;
}
.for-desc ul {     list-style: disc;
  padding-left: 18px;}
.for-item.open .for-desc{max-height:420px;opacity:1;margin-top:.55rem}
/* Kulatý + kroužek — přesně jako FAQ, adaptovaný pro tmavé pozadí */
.for-arrow{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.3);
  display:grid;place-items:center;flex-shrink:0;
  transition:transform .3s var(--ease),background .25s,border-color .25s;
}
.for-arrow svg{width:12px;height:12px;color:rgba(255,255,255,.55);transition:color .2s}
.for-item:hover .for-arrow{border-color:rgba(255,255,255,.55)}
.for-item:hover .for-arrow svg{color:rgba(255,255,255,.8)}
/* Otevřeno: bílý fill s navy × — inverzní logika k FAQ (dark na white → white na dark) */
.for-item.open .for-arrow{
  transform:rotate(45deg);
  background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.92);
}
.for-item.open .for-arrow svg{color:var(--navy)}

/* ════════════════════════════════════
   ABOUT — main page (scoped to .about)
════════════════════════════════════ */
.about{background:var(--white);overflow:hidden;padding:0}
.about .about-grid{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.about-photo-panel{position:relative;overflow:hidden;background:var(--navy-dark)}
.about-photo-bg{
  position:absolute;inset:-20%;
  background:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=900&q=75') center/cover;
  opacity:.22;will-change:transform;
}
.about-grid-lines{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:50px 50px;
}
.blob1,.blob2{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.blob1{width:260px;height:260px;background:rgba(74,111,165,.16);
  top:15%;left:5%;animation:float1 8s ease-in-out infinite}
.blob2{width:200px;height:200px;background:rgba(46,80,137,.12);
  bottom:20%;right:10%;animation:float2 10s ease-in-out infinite}
.about-photo-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;padding:3rem;
}
.about-photo-tagline{
  font-family:var(--fh);font-size:clamp(1.5rem,2.2vw,2rem);font-weight:600;
  color:var(--white);line-height:1.15;letter-spacing:-.04em;margin-bottom:2.5rem;
}
.about-kpis{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;overflow:hidden;
}
.about-kpi{padding:1.35rem 1.5rem;background:rgba(10,20,40,.35);
  backdrop-filter:blur(6px);transition:background .3s}
.about-kpi:hover{background:rgba(10,20,40,.5)}
.about-kpi-num{font-family:var(--fh);font-size:1.75rem;font-weight:600;
  color:var(--white);line-height:1;margin-bottom:.3rem;letter-spacing:-.05em}
.about-kpi-num sup{font-size:.5em;opacity:.65;font-weight:600}
.about-kpi-lbl{font-family:var(--fb);font-size:.65rem;color:rgba(255,255,255,.42);letter-spacing:.06em;text-transform:uppercase}
.about-text-panel{
  display:flex;flex-direction:column;justify-content:center;
  padding:4.5rem 3.5rem;background:var(--white);
}
.about-text-panel .s-h2{margin-bottom:1rem;font-size:clamp(1.7rem,2.2vw,2.3rem)}
.about-intro{
  font-family:var(--fb);font-size:.95rem;font-weight:300;
  color:var(--ink-soft);line-height:1.75;margin-bottom:2.5rem;
  border-left:2px solid var(--navy);padding-left:1rem;
}
.about-timeline{display:flex;flex-direction:column;gap:0;margin-bottom:2.25rem}
.at-item{
  display:flex;gap:1.25rem;padding:1rem 0;
  border-bottom:1px solid var(--border);
  opacity:0;transform:translateX(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),background .2s;
  cursor:default;border-radius:6px;padding-left:.25rem;
}
.at-item.vis{opacity:1;transform:translateX(0)}
.at-item:last-child{border-bottom:none}
.at-item:hover{background:var(--off)}
.at-num{font-family:var(--fh);font-size:.72rem;font-weight:700;
  color:var(--steel);min-width:22px;padding-top:3px;letter-spacing:-.02em;flex-shrink:0}
.at-title{font-family:var(--fb);font-size:.875rem;font-weight:500;color:var(--ink);margin-bottom:.2rem}
.at-desc{font-family:var(--fb);font-size:.8rem;font-weight:300;color:var(--ink-muted);line-height:1.5}
.about-cta{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--fb);font-size:.72rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;
  padding-bottom:2px;border-bottom:1.5px solid var(--navy);
  transition:gap .25s var(--ease),opacity .2s;align-self:flex-start;
}
.about-cta:hover{gap:1rem;opacity:.7}
.about-cta svg{width:13px;height:13px}

/* ════════════════════════════════════
   PORTFOLIO [main page]
════════════════════════════════════ */
.portfolio{background:var(--off);border-top:1px solid var(--border)}
.port-header{display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:2.75rem;flex-wrap:wrap;gap:1.5rem}
.port-tabs{display:flex;gap:3px;background:var(--white);padding:3px;
  border-radius:99px;border:1px solid var(--border)}
.ptab{font-family:var(--fb);font-size:.7rem;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;padding:7px 17px;border-radius:99px;border:none;cursor:pointer;
  background:transparent;color:var(--ink-muted);transition:all .25s}
.ptab.active{background:var(--navy);color:var(--white)}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.proj{border-radius:12px;overflow:hidden;background:var(--white);border:1px solid var(--border);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);cursor:default}
.proj:hover{box-shadow:0 14px 36px rgba(28,49,84,.12);transform:translateY(-4px)}
.proj-img{width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--card)}
.proj-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(10%);
  transition:filter .4s,transform .5s var(--ease)}
.proj:hover .proj-img img{filter:grayscale(0%);transform:scale(1.05)}
.proj-body{padding:1.25rem 1.4rem}
.proj-year{font-family:var(--fb);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:.4rem}
.proj-name{font-family:var(--fh);font-size:1rem;font-weight:600;
  color:var(--navy);margin-bottom:.4rem;letter-spacing:-.03em}
.proj-tag{display:inline-block;font-family:var(--fb);font-size:.65rem;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:99px;
  background:var(--card);color:var(--steel);border:1px solid var(--border)}

/* ════════════════════════════════════
   TEAM [main page]
════════════════════════════════════ */
.team{background:var(--navy-dark)}
.team .s-kicker{color:rgba(255,255,255,.4)}
.team .s-h2{color:var(--white)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3.5rem}
.tm-card{cursor:default}
.tm-photo{width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  margin-bottom:1rem;background:var(--navy-mid)}
.tm-photo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(20%) brightness(.88);transition:filter .4s,transform .5s var(--ease)}
.tm-card:hover .tm-photo img{filter:grayscale(0%) brightness(1);transform:scale(1.03)}
.tm-name{font-family:var(--fh);font-size:.95rem;font-weight:600;
  color:var(--white);margin-bottom:.2rem;letter-spacing:-.03em}
.tm-role{font-family:var(--fb);font-size:.67rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}

/* ════════════════════════════════════
   CONTACT SECTION [main page]
════════════════════════════════════ */
.contact-section{background:var(--navy);position:relative;overflow:hidden}
.contact-bg{
  position:absolute;inset:-20%;
  background:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1400&q=40') center/cover;
  opacity:.06;will-change:transform;
}
.contact-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.contact-left .s-kicker{color:rgba(255,255,255,.4)}
.contact-left .s-h2{color:var(--white);margin-bottom:1.25rem}
.contact-left .s-sub{color:rgba(255,255,255,.58);margin-top:0}
.contact-form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:2.25rem;backdrop-filter:blur(6px)}

/* ════════════════════════════════════
   SHARED FORM ELEMENTS
════════════════════════════════════ */
.contact-details{margin-top:2.5rem;display:flex;flex-direction:column;gap:.9rem}
.cd-item{display:flex;align-items:center;gap:.9rem;
  font-family:var(--fb);font-size:.88rem;color:rgba(255,255,255,.6)}
.cd-item a{color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s}
.cd-item a:hover{color:var(--white)}
.cd-icon{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0}
.cd-icon svg{width:15px;height:15px;color:rgba(255,255,255,.55)}
.cf-title{font-family:var(--fh);font-size:1.15rem;font-weight:700;
  color:var(--white);margin-bottom:1.75rem;letter-spacing:-.03em}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.cf-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.cf-label{font-family:var(--fb);font-size:.65rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.cf-input,.cf-select,.cf-textarea{
  width:100%;padding:11px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);font-family:var(--fb);font-size:.875rem;
  font-weight:300;color:var(--white);outline:none;
  transition:border-color .25s,background .25s;-webkit-appearance:none}
.cf-input::placeholder,.cf-textarea::placeholder{color:rgba(255,255,255,.22)}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{
  border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08)}
.cf-select{cursor:pointer;color:rgba(255,255,255,.55)}
.cf-select option{background:#152640;color:var(--white)}
.cf-textarea{min-height:96px;resize:vertical}
.cf-submit{width:100%;margin-top:.75rem;display:inline-flex;align-items:center;
  justify-content:center;gap:10px;padding:13px 28px;border-radius:99px;border:none;
  cursor:pointer;font-family:var(--fb);font-size:.75rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--white);color:var(--navy);transition:background .25s,transform .2s}
.cf-submit svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.cf-submit:hover{background:var(--off);transform:translateY(-1px)}
.cf-submit:hover svg{transform:translateX(3px)}

/* ════════════════════════════════════
   PROJECT HERO [project pages]
════════════════════════════════════ */
.hero{position:relative;width:100%;height:88vh;min-height:520px;
  overflow:hidden;padding-top:64px}
.hero-bg{
  position:absolute;inset:-20% 0;
  background:url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=1600&q=80') center/cover;
  will-change:transform;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,24,46,.55) 0%,rgba(12,24,46,.30) 40%,rgba(12,24,46,.70) 80%,rgba(12,24,46,.88) 100%);
}
.hero-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:0 3rem 3.5rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.hero-cat{
  font-family:var(--fb);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:.6rem;
  display:flex;align-items:center;gap:.6rem;
}
.hero-cat::before{content:'';display:block;width:22px;height:1px;background:rgba(255,255,255,.4)}
.hero-h1{font-family:var(--fh);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700;
  color:var(--white);line-height:1.04;letter-spacing:-.05em;margin-bottom:.5rem}
.hero-sub{font-family:var(--fb);font-size:1rem;font-weight:300;
  color:rgba(255,255,255,.65);letter-spacing:.01em}
.hero-badge{
  background:rgba(10,20,40,.55);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:1.5rem 2rem;min-width:220px;flex-shrink:0;
}
.hero-badge-label{font-family:var(--fb);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.5rem}
.hero-badge-val{font-family:var(--fh);font-size:1.6rem;font-weight:600;
  color:var(--white);line-height:1;margin-bottom:.2rem;letter-spacing:-.04em}
.hero-badge-sub{font-family:var(--fb);font-size:.75rem;color:rgba(255,255,255,.45)}

/* ════════════════════════════════════
   STATS ROW [project pages]
════════════════════════════════════ */
.stats-row{background:var(--navy-dark)}
.stats-inner{
  max-width:1160px;margin:0 auto;padding:0 2.5rem;
  display:grid;grid-template-columns:repeat(4,1fr);
}

/* ════════════════════════════════════
   INTRO SPLIT [project pages]
════════════════════════════════════ */
.intro{background:var(--white)}
.intro-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start}
.intro-left .s-h2{margin-bottom:1.25rem}
.intro-lead{font-family:var(--fb);font-size:1rem;font-weight:400;
  color:var(--ink-soft);line-height:1.75;margin-bottom:1.25rem}
.intro-body{font-family:var(--fb);font-size:.9rem;font-weight:300;
  color:var(--ink-muted);line-height:1.75}

/* ════════════════════════════════════
   ABOUT PROJEKT — project pages (scoped)
════════════════════════════════════ */
.about-proj{background:var(--off);border-top:1px solid var(--border)}
.about-proj .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.about-proj .s-h2{margin-bottom:3rem}
.about-col-label{font-family:var(--fb);font-size:.65rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  margin-bottom:1.5rem;padding-bottom:.85rem;border-bottom:1px solid var(--border)}
.about-text p{font-family:var(--fb);font-size:.9rem;font-weight:300;
  color:var(--ink-soft);line-height:1.8;margin-bottom:1rem}
.about-text p:last-child{margin-bottom:0}

/* ════════════════════════════════════
   TECH CARDS [project pages]
════════════════════════════════════ */
.tech{background:var(--white);border-top:1px solid var(--border)}
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3rem}
.tech-card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:1.75rem;position:relative;overflow:hidden;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);cursor:default;
}
.tech-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--navy),var(--steel));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.tech-card:hover{box-shadow:0 10px 30px rgba(28,49,84,.10);transform:translateY(-3px)}
.tech-card:hover::after{transform:scaleX(1)}
.tech-icon{width:40px;height:40px;border-radius:8px;background:rgba(28,49,84,.08);
  display:grid;place-items:center;margin-bottom:1.1rem}
.tech-icon svg{width:20px;height:20px;color:var(--navy)}
.tech-title{font-family:var(--fh);font-size:.95rem;font-weight:600;
  color:var(--navy);margin-bottom:.5rem;letter-spacing:-.02em}
.tech-desc{font-family:var(--fb);font-size:.82rem;font-weight:300;
  color:var(--ink-muted);line-height:1.6}

/* ════════════════════════════════════
   GALLERY [project pages]
════════════════════════════════════ */
.gallery{background:var(--navy-dark)}
.gallery .s-kicker{color:rgba(255,255,255,.4)}
.gallery .s-h2{color:var(--white);margin-bottom:3rem}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto;gap:1rem;
}
.gallery-item{border-radius:10px;overflow:hidden;background:var(--navy-mid);
  cursor:pointer;position:relative}
.gallery-item:first-child{grid-column:span 2;grid-row:span 2}
.gallery-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(12%);
  transition:filter .4s,transform .5s var(--ease);display:block}
.gallery-item:hover img{filter:grayscale(0%);transform:scale(1.04)}
.gallery-item:first-child img{min-height:400px}
.gallery-item:not(:first-child) img{min-height:190px}
.gallery-overlay{position:absolute;inset:0;background:rgba(12,24,46,0);
  transition:background .3s;display:flex;align-items:center;justify-content:center}
.gallery-item:hover .gallery-overlay{background:rgba(12,24,46,.15)}
.gallery-zoom{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);
  display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.gallery-item:hover .gallery-zoom{opacity:1;transform:scale(1)}
.gallery-zoom svg{width:15px;height:15px;color:var(--navy)}

/* ════════════════════════════════════
   CTA STRIP [project pages]
════════════════════════════════════ */
.cta-strip{position:relative;overflow:hidden;background:var(--navy)}
.cta-strip-bg{
  position:absolute;inset:-20%;
  background:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1400&q=50') center/cover;
  opacity:.07;will-change:transform;
}
.cta-strip-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:3rem;padding:4.5rem 0;flex-wrap:wrap;
}
.cta-strip-text .s-kicker{color:rgba(255,255,255,.4)}
.cta-strip-text .s-h2{color:var(--white);font-size:clamp(1.5rem,2vw,2rem)}
.cta-strip-text p{font-family:var(--fb);font-size:.9rem;font-weight:300;
  color:rgba(255,255,255,.55);margin-top:.65rem;max-width:46ch;line-height:1.65}
.cta-btns{display:flex;gap:.85rem;flex-shrink:0;flex-wrap:wrap}

/* ════════════════════════════════════
   RELATED PROJECTS [project pages]
════════════════════════════════════ */
.related{background:var(--off);border-top:1px solid var(--border)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
.rel-card{border-radius:12px;overflow:hidden;background:var(--white);
  border:1px solid var(--border);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
  text-decoration:none;display:block;cursor:pointer}
.rel-card:hover{box-shadow:0 10px 30px rgba(28,49,84,.10);transform:translateY(-3px)}
.rel-img{width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--card)}
.rel-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(12%);
  transition:filter .35s,transform .45s var(--ease)}
.rel-card:hover .rel-img img{filter:grayscale(0%);transform:scale(1.04)}
.rel-body{padding:1.25rem 1.4rem}
.rel-year{font-family:var(--fb);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:.4rem}
.rel-name{font-family:var(--fh);font-size:1rem;font-weight:600;
  color:var(--navy);margin-bottom:.4rem;letter-spacing:-.03em}
.rel-tag{display:inline-block;font-family:var(--fb);font-size:.65rem;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:99px;
  background:var(--card);color:var(--steel);border:1px solid var(--border)}

/* ════════════════════════════════════
   LIGHTBOX [project pages]
════════════════════════════════════ */
.lightbox{display:none;position:fixed;inset:0;z-index:500;
  background:rgba(5,12,25,.92);backdrop-filter:blur(8px);
  align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:8px;object-fit:contain}
.lightbox-close{
  position:absolute;top:1.5rem;right:1.5rem;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:var(--white);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-close svg{width:18px;height:18px}

/* ════════════════════════════════════
   [A] PAGE HERO [content pages]
════════════════════════════════════ */
.page-hero{position:relative;overflow:hidden;min-height:420px;display:flex;align-items:flex-end}
.page-hero--photo{background:var(--navy-dark);color:var(--white)}
.page-hero--light{background:var(--off);border-bottom:1px solid var(--border);min-height:320px}
.page-hero--dark{background:var(--navy-dark);min-height:320px}
.ph-bg{position:absolute;inset:-20% 0;background-size:cover;background-position:center;
  will-change:transform;opacity:.18}
.ph-overlay{position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(12,24,46,.9) 0%,rgba(12,24,46,.5) 55%,transparent 100%)}
.ph-content{position:relative;z-index:2;padding:4rem 0 3.5rem;width:100%}
.page-hero--light .ph-content{padding:3.5rem 0}
.ph-tag{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;
  font-family:var(--fb);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}
.page-hero--photo .ph-tag,.page-hero--dark .ph-tag{color:rgba(255,255,255,.5)}
.page-hero--photo .ph-tag::before,.page-hero--dark .ph-tag::before{
  content:'';display:block;width:22px;height:1px;background:rgba(255,255,255,.4)}
.page-hero--light .ph-tag{color:var(--steel)}
.page-hero--light .ph-tag::before{content:'';display:block;width:22px;height:1px;background:var(--steel)}
.ph-h1{font-family:var(--fh);font-size:clamp(2.2rem,4vw,3.8rem);font-weight:700;
  line-height:1.08;letter-spacing:-.05em;margin-bottom:.85rem}
.page-hero--photo .ph-h1,.page-hero--dark .ph-h1{color:var(--white)}
.page-hero--light .ph-h1{color:var(--ink)}
.ph-perex{font-family:var(--fb);font-size:1rem;font-weight:300;
  line-height:1.7;max-width:52ch;margin-bottom:2rem}
.page-hero--photo .ph-perex,.page-hero--dark .ph-perex{color:rgba(255,255,255,.68)}
.page-hero--light .ph-perex{color:var(--ink-soft)}
.ph-actions{display:flex;gap:.85rem;flex-wrap:wrap}

/* ════════════════════════════════════
   [B] BLOCK LEAD [content pages]
════════════════════════════════════ */
.block-lead{padding:5rem 0;background:var(--white);border-bottom:1px solid var(--border)}
.lead-inner{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:start}
.lead-label{padding-top:.25rem}
.lead-label .s-kicker{margin-bottom:.6rem}
.lead-label .s-h2{font-size:clamp(1.5rem,2vw,2rem)}
.lead-text{font-family:var(--fb);font-size:1.1rem;font-weight:300;
  color:var(--ink-soft);line-height:1.8;
  border-left:2px solid var(--navy);padding-left:1.5rem}
.lead-text strong{font-weight:500;color:var(--ink)}

/* ════════════════════════════════════
   [C] BLOCK RICH TEXT [content pages]
════════════════════════════════════ */
.block-text{padding:5.5rem 0}
.block-text--white{background:var(--white)}
.block-text--off{background:var(--off)}
.bt-header{margin-bottom:3rem}
.bt-body-full{font-family:var(--fb);font-size:.95rem;font-weight:300;
  color:var(--ink-soft);line-height:1.8;max-width:72ch}
.bt-body-full p+p{margin-top:1.1rem}
.bt-body-full h3{font-family:var(--fh);font-size:1.15rem;font-weight:600;
  color:var(--ink);letter-spacing:-.03em;margin:2rem 0 .65rem}
.bt-two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
.bt-col{font-family:var(--fb);font-size:.9rem;font-weight:300;
  color:var(--ink-soft);line-height:1.8}
.bt-col p+p{margin-top:1rem}
.bt-col h3{font-family:var(--fh);font-size:1.05rem;font-weight:600;
  color:var(--ink);letter-spacing:-.03em;margin:1.5rem 0 .5rem}

/* ════════════════════════════════════
   [D] BLOCK CARDS [content pages]
════════════════════════════════════ */
.block-cards{padding:5.5rem 0}
.block-cards--white{background:var(--white)}
.block-cards--off{background:var(--off);border-top:1px solid var(--border)}
.block-cards--dark{background:var(--navy-dark)}
.bc-header{display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:2.75rem;flex-wrap:wrap;gap:1.5rem}
.cards-grid{display:grid;gap:1.25rem}
.cards-grid--2{grid-template-columns:repeat(2,1fr)}
.cards-grid--3{grid-template-columns:repeat(3,1fr)}
.cards-grid--4{grid-template-columns:repeat(4,1fr)}
.c-card{background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:2.25rem;display:flex;flex-direction:column;
  position:relative;overflow:hidden;cursor:default;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.block-cards--dark .c-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.c-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--navy),var(--steel));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.block-cards--dark .c-card::after{background:linear-gradient(90deg,var(--steel),var(--sky))}
.c-card:hover{box-shadow:0 12px 32px rgba(28,49,84,.10);transform:translateY(-3px)}
.c-card:hover::after{transform:scaleX(1)}
.c-card-icon{width:44px;height:44px;border-radius:8px;
  background:rgba(28,49,84,.07);border:1px solid var(--border);
  display:grid;place-items:center;margin-bottom:1.4rem;flex-shrink:0}
.block-cards--dark .c-card-icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
.c-card-icon svg{width:20px;height:20px;color:var(--navy)}
.block-cards--dark .c-card-icon svg{color:rgba(255,255,255,.7)}
.c-card-num{font-family:var(--fb);font-size:.65rem;font-weight:500;
  letter-spacing:.12em;color:var(--steel);margin-bottom:.85rem}
.c-card-line{width:26px;height:2px;background:var(--navy);margin-bottom:1.2rem;border-radius:2px}
.block-cards--dark .c-card-line{background:var(--steel)}
.c-card-title{font-family:var(--fh);font-size:1rem;font-weight:600;
  color:var(--navy);margin-bottom:.65rem;line-height:1.25;letter-spacing:-.02em}
.block-cards--dark .c-card-title{color:var(--white)}
.c-card-desc{font-family:var(--fb);font-size:.875rem;font-weight:300;
  color:var(--ink-soft);line-height:1.7;flex:1}
.block-cards--dark .c-card-desc{color:rgba(255,255,255,.5)}
.c-card-link{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--fb);font-size:.7rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--steel);text-decoration:none;margin-top:1.5rem;
  transition:gap .25s var(--ease),color .2s}
.block-cards--dark .c-card-link{color:var(--sky)}
.c-card-link:hover{gap:.8rem;color:var(--navy)}
.block-cards--dark .c-card-link:hover{color:var(--white)}
.c-card-link svg{width:12px;height:12px}

/* ════════════════════════════════════
   [E] BLOCK NUMBERED [content pages]
════════════════════════════════════ */
.block-numbered{position:relative;overflow:hidden}
.block-numbered--dark{background:var(--navy-dark)}
.block-numbered--photo{background:var(--navy-dark)}
.bn-bg{position:absolute;inset:-20% 0;background-size:cover;background-position:center;
  will-change:transform}
.bn-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,24,46,.93) 0%,rgba(12,24,46,.75) 55%,rgba(12,24,46,.40) 100%)}
.bn-inner{position:relative;z-index:1;padding:6rem 0}
.bn-inner .s-kicker{color:rgba(255,255,255,.4)}
.bn-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 5rem;
  margin-top:3rem;align-items:start}
.bn-list{border-top:1px solid rgba(255,255,255,.08)}
.bn-item{display:flex;align-items:flex-start;gap:1.75rem;
  padding:1.35rem 0;border-bottom:1px solid rgba(255,255,255,.08);
  cursor:default;transition:padding-left .25s var(--ease)}
.bn-item:hover{padding-left:.5rem}
.bn-num{font-family:var(--fh);font-size:1rem;font-weight:700;
  color:rgba(255,255,255,.22);min-width:30px;flex-shrink:0;
  letter-spacing:-.03em;padding-top:2px}
.bn-title{font-family:var(--fb);font-size:.9rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--white);
  margin-bottom:.3rem;line-height:1.3}
.bn-desc{font-family:var(--fb);font-size:.82rem;font-weight:300;
  color:rgba(255,255,255,.48);line-height:1.55}
.bn-aside{padding-top:.5rem}
.bn-aside-title{font-family:var(--fh);font-size:clamp(1.4rem,2vw,1.9rem);font-weight:600;
  color:var(--white);line-height:1.15;letter-spacing:-.04em;margin-bottom:1rem}
.bn-aside-text{font-family:var(--fb);font-size:.9rem;font-weight:300;
  color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:2rem}
.bn-aside-stats{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}
.bn-stat-num{font-family:var(--fh);font-size:2rem;font-weight:600;
  color:var(--white);letter-spacing:-.05em;line-height:1}
.bn-stat-lbl{font-family:var(--fb);font-size:.65rem;color:rgba(255,255,255,.38);
  letter-spacing:.07em;text-transform:uppercase;margin-top:.25rem}

/* ════════════════════════════════════
   [F] BLOCK STATS [content pages]
   Shared stat-cell styles also used by project pages' .stats-inner
════════════════════════════════════ */
.block-stats{background:var(--navy-dark);border-top:1px solid rgba(255,255,255,.06)}
.block-stats .stats-row{
  display:grid;
  grid-template-columns:repeat(var(--cols,4),1fr);
  padding:0;
}
.stat-cell{padding:2.25rem 2rem;border-right:1px solid rgba(255,255,255,.07);
  position:relative;overflow:hidden;cursor:default}
.stat-cell:last-child{border-right:none}
.stat-cell::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--steel),var(--sky));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.stat-cell:hover::after{transform:scaleX(1)}
.stat-val{font-family:var(--fh);font-size:2rem;font-weight:600;
  color:var(--white);line-height:1;letter-spacing:-.06em;margin-bottom:.35rem;
  transition:transform .3s var(--ease)}
.stat-cell:hover .stat-val{transform:translateY(-2px)}
.stat-unit{font-size:.6em;font-weight:500;opacity:.6}
.stat-lbl{font-family:var(--fb);font-size:.65rem;color:rgba(255,255,255,.38);
  letter-spacing:.07em;text-transform:uppercase}
.stat-sub{font-family:var(--fb);font-size:.78rem;color:rgba(255,255,255,.45);
  margin-top:.2rem;font-weight:300}

/* ════════════════════════════════════
   [G] BLOCK CTA STRIP [content pages]
════════════════════════════════════ */
.block-cta{position:relative;overflow:hidden;background:var(--navy);padding:5rem 0}
.bcta-bg{position:absolute;inset:-20% 0;background-size:cover;background-position:center;
  opacity:.07;will-change:transform}
.bcta-inner{position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:3rem;flex-wrap:wrap}
.bcta-text .s-kicker{color:rgba(255,255,255,.4)}
.bcta-text .s-h2{font-size:clamp(1.5rem,2.2vw,2.1rem)}
.bcta-text .s-sub{max-width:48ch}
.bcta-actions{display:flex;gap:.85rem;flex-shrink:0;flex-wrap:wrap}

/* ════════════════════════════════════
   [H] BLOCK FAQ [content pages]
════════════════════════════════════ */
.block-faq{padding:5.5rem 0;background:var(--white);border-top:1px solid var(--border)}
.faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:start}
.faq-label{padding-top:.25rem;position:sticky;top:5rem}
.faq-label .s-sub{max-width:28ch}
.faq-label .btn{margin-top:1.5rem}
.faq-list{margin-top:0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;cursor:pointer;
  font-family:var(--fb);font-size:.95rem;font-weight:500;color:var(--ink);
  transition:color .2s;user-select:none}
.faq-q:hover{color:var(--navy)}
.faq-icon{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border-mid);
  display:grid;place-items:center;flex-shrink:0;
  transition:transform .3s var(--ease),background .25s,border-color .25s}
.faq-icon svg{width:12px;height:12px;color:var(--navy)}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--navy);border-color:var(--navy)}
.faq-item.open .faq-icon svg{color:var(--white)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s}
.faq-a-inner{font-family:var(--fb);font-size:.88rem;font-weight:300;
  color:var(--ink-soft);line-height:1.75;padding-bottom:1.35rem}
.faq-item.open .faq-a{max-height:400px}

/* ════════════════════════════════════
   [I] BLOCK MEDIA [content pages]
════════════════════════════════════ */
.block-media{padding:5.5rem 0}
.block-media--white{background:var(--white)}
.block-media--off{background:var(--off);border-top:1px solid var(--border)}
.bm-grid{display:grid;align-items:center;gap:4.5rem}
.bm-grid--img-left{grid-template-columns:1.2fr 1fr}
.bm-grid--img-right{grid-template-columns:1fr 1.2fr}
.bm-grid--img-right .bm-media{order:2}
.bm-grid--img-right .bm-text{order:1}
.bm-media{position:relative;border-radius:12px;overflow:hidden}
.bm-media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(10%);transition:filter .4s}
.bm-media:hover img{filter:grayscale(0%)}
.bm-media-badge{position:absolute;bottom:1.5rem;left:1.5rem;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-radius:8px;padding:1rem 1.25rem;border:1px solid var(--border)}
.bm-badge-label{font-family:var(--fb);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:.3rem}
.bm-badge-val{font-family:var(--fh);font-size:1.3rem;font-weight:600;
  color:var(--navy);letter-spacing:-.04em}
.bm-text .s-h2{margin-bottom:1rem}
.bm-body{font-family:var(--fb);font-size:.9rem;font-weight:300;
  color:var(--ink-soft);line-height:1.8;margin-bottom:1.5rem}
.bm-body p+p{margin-top:.85rem}
.bm-checklist{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:2rem}
.bm-checklist li{display:flex;align-items:flex-start;gap:.75rem;
  font-family:var(--fb);font-size:.875rem;font-weight:300;color:var(--ink-soft)}
.bm-check{width:18px;height:18px;border-radius:50%;background:var(--card);
  border:1px solid var(--border-mid);display:grid;place-items:center;
  flex-shrink:0;margin-top:2px}
.bm-check svg{width:9px;height:9px;color:var(--navy)}

/* ════════════════════════════════════
   [J] BLOCK CTA FORM [content pages]
════════════════════════════════════ */
.block-cta-form{background:var(--navy);position:relative;overflow:hidden;padding:6rem 0}
.bcf-bg{position:absolute;inset:-20% 0;background-size:cover;background-position:center;
  opacity:.06;will-change:transform}
.bcf-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.bcf-left .s-kicker{color:rgba(255,255,255,.4)}
.bcf-left .s-h2{margin-bottom:1.25rem}
.bcf-left .s-sub{margin-top:0}
.cf-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:2.25rem;backdrop-filter:blur(6px)}

/* ════════════════════════════════════
   FOOTER [shared]
════════════════════════════════════ */
footer{background:#0C1929;padding:4rem 0 2rem;border-top:1px solid rgba(255,255,255,.05)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:4rem;
  margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.06)}
.f-brand{font-family:var(--fh);font-size:1.05rem;font-weight:600;
  color:var(--white);margin-bottom:.65rem;letter-spacing:-.04em}
.f-tag{font-family:var(--fb);font-size:.82rem;font-weight:300;
  color:rgba(255,255,255,.33);line-height:1.6;max-width:28ch;margin-bottom:1.5rem}
.f-contact a{display:block;font-family:var(--fb);font-size:.82rem;
  color:rgba(255,255,255,.48);text-decoration:none;margin-bottom:.3rem;transition:color .2s}
.f-contact a:hover{color:var(--white)}
.f-contact p{font-family:var(--fb);font-size:.75rem;color:rgba(255,255,255,.26);
  margin-top:.5rem;line-height:1.5}
.f-col-title{font-family:var(--fb);font-size:.62rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.26);margin-bottom:1.1rem}
.f-links{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.f-links a{font-family:var(--fb);font-size:.82rem;font-weight:300;
  color:rgba(255,255,255,.42);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--white)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.f-copy{font-family:var(--fb);font-size:.72rem;color:rgba(255,255,255,.2)}
.f-legal{display:flex;gap:1.5rem}
.f-legal a{font-family:var(--fb);font-size:.72rem;color:rgba(255,255,255,.2);
  text-decoration:none;transition:color .2s}
.f-legal a:hover{color:rgba(255,255,255,.55)}

/* ════════════════════════════════════
   SCROLL REVEAL ANIMATIONS [shared]
════════════════════════════════════ */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.vis{opacity:1;transform:translateY(0)}
.rv-left,.rv-l{opacity:0;transform:translateX(-30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-left.vis,.rv-l.vis{opacity:1;transform:translateX(0)}
.rv-right,.rv-r{opacity:0;transform:translateX(30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-right.vis,.rv-r.vis{opacity:1;transform:translateX(0)}
.rv-scale{opacity:0;transform:scale(.95);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv-scale.vis{opacity:1;transform:scale(1)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}
.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* Background float animations */
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12px,-16px) scale(1.04)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10px,14px) scale(1.03)}}

/* Counter animation */
.count-up{display:inline-block}

/* Cursor-following highlight on cards */
.svc-card,.proj,.seg-card{--mx:50%;--my:50%}
.svc-card:hover,.proj:hover,.seg-card:hover{
  background-image:radial-gradient(circle at var(--mx) var(--my),rgba(74,111,165,.06) 0%,transparent 60%)}
.c-card{--mx:50%;--my:50%}

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media(max-width:1024px){
  /* Main page */
  .hl-inner{grid-template-columns:repeat(2,1fr)}
  .hl-item:nth-child(2){border-right:none}
  .hl-item:nth-child(3),.hl-item:nth-child(4){border-top:1px solid rgba(255,255,255,.07)}
  .about .about-grid{grid-template-columns:1fr}
  .about-photo-panel{min-height:380px}
  .contact-inner{grid-template-columns:1fr;gap:3rem}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  /* Project pages */
  .intro-grid,.about-proj .about-grid{grid-template-columns:1fr;gap:3rem}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat-cell:nth-child(2){border-right:none}
  .stat-cell:nth-child(3),.stat-cell:nth-child(4){border-top:1px solid rgba(255,255,255,.07)}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .cta-strip-inner{flex-direction:column;align-items:flex-start}
  /* Content pages */
  .lead-inner,.faq-grid,.bcf-inner,.bm-grid--img-left,.bm-grid--img-right{
    grid-template-columns:1fr;gap:3rem}
  .bm-grid--img-right .bm-media{order:1}
  .bm-grid--img-right .bm-text{order:2}
  .faq-label{position:static}
  .cards-grid--4{grid-template-columns:repeat(2,1fr)}
  .bn-grid{grid-template-columns:1fr;gap:3rem}
  .bcta-inner{flex-direction:column;align-items:flex-start}
  .block-stats .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat-cell:nth-child(2){border-right:none}
  .stat-cell:nth-child(3),.stat-cell:nth-child(4){border-top:1px solid rgba(255,255,255,.07)}
  /* Shared */
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  #nav{padding:0 1.25rem}.nav-links,.nav-cta{display:none}
  .wrap{padding:0 1.25rem}
  section{padding:4.5rem 0}
  /* Main page */
  .svc-grid,.port-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .svc-header,.port-header,.seg-header{flex-direction:column;align-items:flex-start}
  .carousel{height:85vh}.c-h1{font-size:2.1rem}
  .seg-card{flex:0 0 calc(100% - .65rem)}
  .hl-inner{grid-template-columns:repeat(2,1fr);padding:0 1.25rem}
  .about-text-panel{padding:2.5rem 1.25rem}
  /* Project pages */
  .breadcrumb{padding:.75rem 1.25rem}
  .hero-content{flex-direction:column;align-items:flex-start;padding:0 1.25rem 2.5rem}
  .hero-badge{min-width:0;width:100%}
  .stats-inner{grid-template-columns:repeat(2,1fr);padding:0 1.25rem}
  .tech-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item:first-child{grid-column:span 1;grid-row:span 1}
  .related-grid{grid-template-columns:1fr}
  /* Content pages */
  .cards-grid--2,.cards-grid--3,.cards-grid--4{grid-template-columns:1fr}
  .bt-two-col{grid-template-columns:1fr}
  .ph-actions{flex-direction:column;align-items:flex-start}
  .block-stats .stats-row{grid-template-columns:1fr 1fr}
  .cf-row{grid-template-columns:1fr}
  /* Shared */
  .footer-top{grid-template-columns:1fr;gap:2rem}
}

/* ════════════════════════════════════
   MOBILE MENU [shared]
════════════════════════════════════ */
.nav-burger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  width:40px;height:40px;gap:5px;cursor:pointer;
  background:none;border:none;padding:0;flex-shrink:0;
  z-index:310;position:relative;
}
.nav-burger-line{
  display:block;width:22px;height:1.5px;
  background:var(--white);border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s,width .3s var(--ease);
  transform-origin:center;
}
.nav-burger.open .nav-burger-line:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open .nav-burger-line:nth-child(2){opacity:0;width:0}
.nav-burger.open .nav-burger-line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;top:64px;left:0;right:0;bottom:0;z-index:290;
  display:flex;flex-direction:column;
  background:rgba(15,27,50,.98);backdrop-filter:blur(16px);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);overflow-y:auto;
}
.mobile-menu.open{opacity:1;pointer-events:all;transform:translateY(0)}
.mobile-menu-body{display:flex;flex-direction:column;padding:2rem 1.75rem 2.5rem;flex:1}
.mobile-menu-links{display:flex;flex-direction:column;
  border-top:1px solid rgba(255,255,255,.07);margin-bottom:2rem}
.mobile-menu-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--fb);font-size:1.1rem;font-weight:400;
  color:rgba(255,255,255,.75);text-decoration:none;
  opacity:0;transform:translateX(-14px);
  transition:color .2s,padding-left .25s var(--ease),
  opacity .4s var(--ease),transform .4s var(--ease);
}
.mobile-menu.open .mobile-menu-link{opacity:1;transform:translateX(0)}
.mobile-menu.open .mobile-menu-link:nth-child(1){transition-delay:.06s}
.mobile-menu.open .mobile-menu-link:nth-child(2){transition-delay:.10s}
.mobile-menu.open .mobile-menu-link:nth-child(3){transition-delay:.14s}
.mobile-menu.open .mobile-menu-link:nth-child(4){transition-delay:.18s}
.mobile-menu.open .mobile-menu-link:nth-child(5){transition-delay:.22s}
.mobile-menu-link:hover{color:var(--white);padding-left:.35rem}
.mobile-menu-link svg{width:14px;height:14px;opacity:.35;flex-shrink:0}
.mobile-menu-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:99px;
  background:var(--white);color:var(--navy);
  font-family:var(--fb);font-size:.78rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;margin-bottom:2rem;
  opacity:0;transform:translateY(10px);
  transition:background .2s,opacity .4s var(--ease) .26s,transform .4s var(--ease) .26s;
}
.mobile-menu.open .mobile-menu-cta{opacity:1;transform:translateY(0)}
.mobile-menu-cta:hover{background:var(--off)}
.mobile-menu-cta svg{width:14px;height:14px}
.mobile-menu-footer{
  margin-top:auto;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.07);
  opacity:0;transition:opacity .4s var(--ease) .3s;
}
.mobile-menu.open .mobile-menu-footer{opacity:1}
.mobile-menu-footer a{display:block;font-family:var(--fb);font-size:.82rem;
  color:rgba(255,255,255,.4);text-decoration:none;margin-bottom:.4rem;transition:color .2s}
.mobile-menu-footer a:hover{color:rgba(255,255,255,.75)}
.mobile-menu-footer p{font-family:var(--fb);font-size:.75rem;
  color:rgba(255,255,255,.22);margin-top:.75rem;line-height:1.5}

@media(max-width:768px){
  .nav-burger{display:flex}
  body.menu-open{overflow:hidden}
}
.notices {
  padding: 15px!important;
}
.notices.success {
  background-color: #467746;
  color: white;

}