/* ==========================================================================
   GENESIS DIRECT MARKETING
   Creating the Beginning of Your Brand's Success
   Built by Global Solutions Group
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --navy:        #163A5C;
  --navy-900:    #0B2038;
  --navy-800:    #0F2B46;
  --navy-700:    #12314F;
  --steel:       #4E7095;
  --mist:        #C7D4E2;
  --paper:       #F1F2F4;
  --paper-2:     #E6EAEF;
  --white:       #FFFFFF;
  --ink:         #0A1A2B;
  --muted:       #6D7F91;

  --line:        rgba(22,58,92,.16);
  --line-soft:   rgba(22,58,92,.09);
  --line-light:  rgba(255,255,255,.18);

  --display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans:    "Jost", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(22px, 5vw, 76px);
  --gutter: clamp(28px, 4vw, 56px);
  --sec: clamp(84px, 11vw, 168px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --frame: 14px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:350;
  line-height:1.75;
  letter-spacing:.005em;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--navy); color:var(--white); }
:focus-visible{ outline:2px solid var(--navy); outline-offset:4px; }

/* ---------- 3. TYPE SCALE ---------- */
.display{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.012em;
}
.d1{ font-size:clamp(2.6rem, 6.4vw, 5.4rem); }
.d2{ font-size:clamp(2.05rem, 4.3vw, 3.6rem); }
.d3{ font-size:clamp(1.55rem, 2.5vw, 2.2rem); line-height:1.14; }
.d4{ font-size:clamp(1.15rem, 1.6vw, 1.42rem); line-height:1.24; }
.italic{ font-style:italic; }

.eyebrow{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--steel);
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 26px;
}
.eyebrow::before{
  content:""; width:38px; height:1px; background:currentColor; flex:none;
}
.eyebrow.on-dark{ color:var(--mist); }
.lead{
  font-size:clamp(1.02rem, 1.35vw, 1.16rem);
  line-height:1.85;
  color:#33475C;
}
.small{ font-size:.86rem; line-height:1.7; color:var(--muted); }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0 var(--pad); }
.wrap-tight{ max-width:1040px; }
.section{ padding:var(--sec) 0; position:relative; }
.section--flush-top{ padding-top:0; }
.section--dark{ background:var(--navy-900); color:var(--white); }
.section--tint{ background:var(--paper-2); }
.section--paper{ background:var(--paper); }

.grid{ display:grid; gap:var(--gutter); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,110px); align-items:center; }
.split--rev > *:first-child{ order:2; }

/* the fine frame that holds the whole site */
.frame{ position:fixed; inset:var(--frame); border:1px solid var(--line); pointer-events:none; z-index:60; }

/* ---------- 5. BUTTONS ---------- */
.btn{
  --bg:var(--navy); --fg:#fff; --bd:var(--navy);
  display:inline-flex; align-items:center; gap:13px;
  padding:16px 30px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  font-size:.71rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--fg);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.btn:hover::after{ transform:scaleY(1); }
.btn:hover{ color:var(--bg); }
.btn .arw{ position:relative; z-index:2; transition:transform .45s var(--ease); }
.btn:hover .arw{ transform:translateX(6px); }

.btn--ghost{ --bg:transparent; --fg:var(--navy); --bd:var(--line); }
.btn--ghost:hover{ color:#fff; }
.btn--ghost::after{ background:var(--navy); }
.btn--light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.35); }
.btn--light:hover{ color:var(--navy-900); }
.btn--light::after{ background:#fff; }

.link-u{
  display:inline-flex; align-items:center; gap:11px;
  font-size:.71rem; letter-spacing:.26em; text-transform:uppercase; font-weight:500;
  padding-bottom:7px; border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease), gap .4s var(--ease);
}
.link-u:hover{ border-color:var(--navy); gap:18px; }
.on-dark .link-u, .link-u.on-dark{ border-color:var(--line-light); }
.link-u.on-dark:hover{ border-color:#fff; }

/* ---------- 6. HEADER ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:70;
  padding:0 calc(var(--pad) + var(--frame));
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .4s var(--ease);
}
.hdr__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:96px;
  border-bottom:1px solid transparent;
  transition:height .4s var(--ease), border-color .5s var(--ease);
}
.hdr__logo img{ height:44px; width:auto; transition:height .4s var(--ease), filter .5s var(--ease); }
.hdr__logo{ display:flex; align-items:center; }
.hdr__nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.hdr__nav a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  position:relative; padding:6px 0; color:var(--navy-900);
  transition:color .4s var(--ease), opacity .4s var(--ease);
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.hdr__nav a:hover::after,.hdr__nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.hdr__cta{ padding:13px 24px; font-size:.66rem; }
.hdr__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.hdr__burger i{ display:block; width:24px; height:1px; background:var(--navy-900); position:relative; transition:background .3s; }
.hdr__burger i::before,.hdr__burger i::after{
  content:""; position:absolute; left:0; width:24px; height:1px; background:inherit;
  transition:transform .4s var(--ease), top .3s;
}
.hdr__burger i::before{ top:-7px; }
.hdr__burger i::after{ top:7px; }

/* transparent state over hero */
.hdr.is-over .hdr__nav a{ color:#fff; }
.hdr.is-over .hdr__logo img{ filter:brightness(0) invert(1); }
.hdr.is-over .btn--ghost{ --fg:#fff; --bd:rgba(255,255,255,.4); }
.hdr.is-over .btn--ghost::after{ background:#fff; }
.hdr.is-over .btn--ghost:hover{ color:var(--navy-900); }
.hdr.is-over .hdr__burger i{ background:#fff; }
.hdr.is-stuck{ background:rgba(241,242,244,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line-soft); }
.hdr.is-stuck .hdr__in{ height:76px; border-color:transparent; }
.hdr.is-stuck .hdr__logo img{ height:36px; }
.hdr.is-hidden{ transform:translateY(-100%); }
.hdr{ transition:transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:69;
  background:var(--navy-900); color:#fff;
  padding:calc(var(--pad) + 96px) var(--pad) var(--pad);
  display:flex; flex-direction:column; justify-content:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease);
}
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu a{
  font-weight:600;
  font-family:var(--display); font-size:clamp(2rem,9vw,3.2rem); line-height:1.5;
  display:block; opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.menu.is-open a{ opacity:1; transform:none; }
.menu.is-open a:nth-child(1){ transition-delay:.18s; }
.menu.is-open a:nth-child(2){ transition-delay:.24s; }
.menu.is-open a:nth-child(3){ transition-delay:.30s; }
.menu.is-open a:nth-child(4){ transition-delay:.36s; }
.menu.is-open a:nth-child(5){ transition-delay:.42s; }
.menu__foot{ margin-top:auto; padding-top:40px; border-top:1px solid var(--line-light); font-size:.8rem; color:var(--mist); }

/* light text on navy: antialias here only — on the pale background it thins the serif */
.hero, .phero, .section--dark, .cta, .ftr, .menu, .lbox{ -webkit-font-smoothing:antialiased; }

/* ---------- 7. HERO CAROUSEL ---------- */
.hero{ position:relative; height:100svh; min-height:620px; overflow:hidden; background:var(--navy-900); }
.hero__stage{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1.25s var(--ease), visibility 1.25s;
}
.hero__slide.is-active{ opacity:1; visibility:visible; }
.hero__img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
}
.hero__slide.is-active .hero__img{ animation:kenburns 9s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1.19); } }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,32,56,.93) 0%, rgba(11,32,56,.72) 42%, rgba(11,32,56,.30) 100%),
    linear-gradient(to top, rgba(11,32,56,.85) 0%, rgba(11,32,56,0) 55%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.hero__in{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(80px,12vh,130px);
  color:#fff;
}
.hero__plate{ max-width:min(880px, 92%); }
.hero h1{ margin:0 0 26px; font-size:clamp(2.4rem, 4.9vw, 4.5rem); }
.hero h1 em{ font-style:italic; color:var(--mist); }
.hero__sub{ max-width:520px; color:rgba(255,255,255,.78); font-size:1.02rem; line-height:1.85; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* slide text swap */
.hero__slide .s-line{ display:block; overflow:hidden; }
.hero__slide .s-line > span{ display:block; transform:translateY(110%); transition:transform 1s var(--ease); }
.hero__slide.is-active .s-line > span{ transform:none; transition-delay:.25s; }

.hero__ui{
  position:absolute; z-index:4; right:calc(var(--pad) + var(--frame)); bottom:clamp(46px,7vh,70px);
  display:flex; align-items:center; gap:22px; color:#fff;
}
.hero__count{ font-size:.72rem; letter-spacing:.22em; color:rgba(255,255,255,.65); }
.hero__count b{ color:#fff; font-weight:500; }
.hero__btns{ display:flex; gap:10px; }
.hero__btn{
  width:48px; height:48px; border:1px solid rgba(255,255,255,.32);
  display:grid; place-items:center; border-radius:50%;
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.hero__btn:hover{ background:#fff; color:var(--navy-900); border-color:#fff; }
.hero__bar{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:rgba(255,255,255,.14); z-index:4; }
.hero__bar i{ display:block; height:100%; width:0; background:#fff; }
.hero__bar i.run{ animation:barfill 9s linear forwards; }
@keyframes barfill{ from{ width:0; } to{ width:100%; } }

.hero__side{
  position:absolute; left:calc(var(--pad) + var(--frame) - 8px); top:50%; z-index:4;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.45);
  white-space:nowrap;
}
@media (max-height:700px){ .hero__side{ display:none; } }
.hero__scroll{
  position:absolute; z-index:4; left:calc(var(--pad) + var(--frame)); bottom:clamp(46px,7vh,70px);
  font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.6);
  display:flex; align-items:center; gap:12px;
}
.hero__scroll::after{ content:""; width:52px; height:1px; background:rgba(255,255,255,.45); animation:pulseline 2.4s var(--ease) infinite; transform-origin:left; }
@keyframes pulseline{ 0%,100%{ transform:scaleX(.35); opacity:.5; } 50%{ transform:scaleX(1); opacity:1; } }

/* page hero (inner pages) */
.phero{
  position:relative; min-height:clamp(420px,58vh,600px);
  display:flex; align-items:flex-end;
  background:var(--navy-900); color:#fff; overflow:hidden;
  padding-bottom:clamp(56px,8vh,88px); padding-top:150px;
}
.phero__img{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); animation:kenburns 22s linear forwards; }
.phero__veil{ position:absolute; inset:0; background:linear-gradient(105deg, rgba(11,32,56,.94), rgba(11,32,56,.62)); }
.phero__in{ position:relative; z-index:2; }
.crumbs{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:22px; }
.crumbs a:hover{ color:#fff; }

/* ---------- 8. THE ARC — signature motif ---------- */
.arc{ display:block; width:clamp(120px,14vw,200px); height:auto; overflow:visible; }
.arc path,.arc line,.arc polyline{
  fill:none; stroke:var(--navy); stroke-width:1.25;
  stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.6s var(--ease);
}
.arc.on-dark path,.arc.on-dark polyline{ stroke:var(--mist); }
.is-in .arc path,.is-in .arc polyline,.arc.is-in path,.arc.is-in polyline{ stroke-dashoffset:0; }
.arc-row{ display:flex; justify-content:center; padding:clamp(40px,6vw,74px) 0; }

/* ---------- 9. REVEALS ---------- */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal],.rise > span{ backface-visibility:hidden; }
[data-reveal].is-in,.rise.is-in > span{ backface-visibility:visible; }

.mask{ overflow:hidden; display:block; }
.mask > img,.mask > .ph{
  transform:scale(1.16); clip-path:inset(0 0 100% 0);
  transition:clip-path 1.35s var(--ease), transform 1.9s var(--ease);
  transition-delay:var(--d,0s);
}
.mask.is-in > img,.mask.is-in > .ph{ transform:scale(1); clip-path:inset(0 0 0 0); }

.rise{ display:block; overflow:hidden; }
.rise > span{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease); transition-delay:var(--d,0s); }
.rise.is-in > span{ transform:none; }

/* ---------- 10. FIGURES ---------- */
.fig{ position:relative; }
.fig img{ width:100%; height:100%; object-fit:cover; }
.fig--tall{ aspect-ratio:4/5; }
.fig--wide{ aspect-ratio:16/10; }
.fig--sq{ aspect-ratio:1/1; }
.fig__cap{ margin-top:16px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.fig__badge{
  position:absolute; right:-1px; bottom:-1px;
  background:var(--navy); color:#fff; padding:22px 26px; max-width:230px;
}
.fig__badge b{ font-weight:600; font-family:var(--display); font-size:2.3rem; line-height:1; display:block; }
.fig__badge span{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mist); }
.fig-stack{ position:relative; }
.fig-stack .fig:last-child{
  position:absolute; right:-8%; bottom:-14%; width:52%; border:8px solid var(--paper);
}
.ceo .fig{ height:auto; aspect-ratio:auto; }
.ceo .fig img{ width:100%; height:auto; max-height:550px; object-fit:contain; }
.section--tint .fig-stack .fig:last-child{ border-color:var(--paper-2); }

/* ---------- 11. STATS ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-light); }
.stats li{ padding:44px 26px 40px; border-right:1px solid var(--line-light); }
.stats li:last-child{ border-right:0; }
.stats b{ font-weight:600; font-family:var(--display); font-size:clamp(2.3rem,4vw,3.5rem); line-height:1; display:block; margin-bottom:12px; }
.stats li > span{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mist); }

/* ---------- 12. MARQUEE ---------- */
.marq{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; background:var(--paper); }
.marq__track{ display:flex; gap:0; width:max-content; animation:slide 42s linear infinite; }
.marq span{
  font-weight:600;
  font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2rem); font-style:italic;
  padding:0 34px; color:var(--navy); opacity:.75; white-space:nowrap;
  display:flex; align-items:center; gap:34px;
}
.marq span::after{ content:""; width:6px; height:6px; background:var(--steel); border-radius:50%; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marq:hover .marq__track{ animation-play-state:paused; }

/* ---------- 13. SERVICE CARDS ---------- */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.svc__item{
  padding:52px 38px 46px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative; background:transparent; transition:background .55s var(--ease), color .55s var(--ease);
}
.svc__item:nth-child(3n){ border-right:0; }
.svc__item::before{
  content:""; position:absolute; inset:0; background:var(--navy);
  transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease); z-index:0;
}
.svc__item:hover::before{ transform:scaleY(1); transform-origin:top; }
.svc__item > *{ position:relative; z-index:1; }
.svc__item:hover{ color:#fff; }
.svc--4{ grid-template-columns:repeat(2,1fr); }
.svc--4 .svc__item{ border-right:1px solid var(--line); }
.svc--4 .svc__item:nth-child(2n){ border-right:0; }
.svc__ico{ width:46px; height:46px; margin-bottom:30px; color:var(--steel); transition:color .55s var(--ease); }
.svc__item:hover .svc__ico{ color:var(--mist); }
.svc__item h3{ font-weight:600; font-family:var(--display); font-size:1.5rem; margin-bottom:14px; }
.svc__item p{ font-size:.94rem; line-height:1.8; color:#4A5D71; transition:color .55s var(--ease); }
.svc__item:hover p{ color:rgba(255,255,255,.78); }

/* detailed service rows */
.srow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(34px,6vw,96px); align-items:center; padding:clamp(56px,7vw,92px) 0; border-bottom:1px solid var(--line); }
.srow:last-child{ border-bottom:0; }
.srow:nth-child(even) .srow__txt{ order:2; }
.srow__no{ font-family:var(--display); font-size:.95rem; letter-spacing:.2em; color:var(--steel); margin-bottom:20px; display:block; }
.srow__no{ font-weight:600; }
.srow ul{ margin-top:26px; display:grid; gap:12px; }
.srow ul li{ position:relative; padding-left:26px; font-size:.95rem; color:#42566A; }
.srow ul li::before{ content:""; position:absolute; left:0; top:11px; width:12px; height:1px; background:var(--steel); }

/* ---------- 14. PROCESS (a real sequence) ---------- */
.proc{ counter-reset:p; display:grid; gap:0; }
.proc__step{
  display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(20px,4vw,60px); align-items:start;
  padding:46px 0; border-top:1px solid var(--line-light);
}
.proc__step:last-child{ border-bottom:1px solid var(--line-light); }
.proc__n{ font-weight:600; font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--steel); }
.proc__step h3{ font-weight:600; font-family:var(--display); font-size:1.65rem; }
.proc__step p{ color:rgba(255,255,255,.7); font-size:.96rem; }

/* light variant of the step list, for the join page on a pale background */
.proc--light .proc__step{ border-top-color:var(--line); }
.proc--light .proc__step:last-child{ border-bottom-color:var(--line); }
.proc--light .proc__n{ color:var(--steel); }
.proc--light .proc__step p{ color:#4A5D71; }

/* ---------- 15. TEAM ---------- */
.ceo{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,96px); align-items:center; }
.ceo__sig{ font-weight:600; font-family:var(--display); font-style:italic; font-size:1.6rem; margin-top:34px; }
.ceo__role{ font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--steel); margin-top:8px; }
.quote{
  font-weight:500;
  font-family:var(--display); font-style:italic; font-size:clamp(1.5rem,2.8vw,2.35rem);
  line-height:1.35; letter-spacing:-.01em;
}
.quote--mark::before{ content:"“"; display:block; font-size:3.4em; line-height:.6; color:var(--steel); opacity:.35; margin-bottom:14px; }

.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px); max-width:900px; }
.team__card{ position:relative; }
.team__ph{ position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--paper-2); }
.team__ph img{ width:100%; height:100%; object-fit:contain; transition:transform 1.1s var(--ease), filter .7s var(--ease); }
.team__card:hover .team__ph img{ transform:scale(1.05); }
.team__ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,32,56,.72), rgba(11,32,56,0) 52%);
  opacity:0; transition:opacity .6s var(--ease);
}
.team__card:hover .team__ph::after{ opacity:1; }
.team__meta{ padding-top:16px; }
.team__meta h4{ font-weight:600; font-family:var(--display); font-size:1.28rem; }
.team__meta span{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--steel); }
.team__line{ width:26px; height:1px; background:var(--line); margin:14px 0 0; transition:width .6s var(--ease); }
.team__card:hover .team__line{ width:64px; background:var(--navy); }

/* ---------- 16. VALUES ---------- */
.vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.vals li{ background:var(--navy-900); padding:42px 34px; }
.vals h4{ font-weight:600; font-family:var(--display); font-size:1.35rem; margin-bottom:12px; }
.vals p{ font-size:.92rem; color:rgba(255,255,255,.68); }
.vals__k{ font-size:.64rem; letter-spacing:.26em; color:var(--steel); text-transform:uppercase; display:block; margin-bottom:18px; }

/* ---------- 17. GALLERY ---------- */
.gfilter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:52px; }
.gfilter button{
  padding:11px 22px; border:1px solid var(--line);
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.gfilter button:hover{ border-color:var(--navy); }
.gfilter button.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.gal{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,22px); }
.gal__it{ position:relative; overflow:hidden; grid-column:span 4; aspect-ratio:1/1; cursor:pointer; background:var(--paper-2); }
.gal__it.wide{ grid-column:span 8; aspect-ratio:16/9; }
.gal__it.tallx{ grid-column:span 4; aspect-ratio:3/4; }
.gal__it.half{ grid-column:span 6; aspect-ratio:4/3; }
.gal__it img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gal__it:hover img{ transform:scale(1.06); }
.gal__ov{
  position:absolute; inset:0; background:linear-gradient(to top, rgba(11,32,56,.82), rgba(11,32,56,0) 60%);
  opacity:0; transition:opacity .55s var(--ease);
  display:flex; align-items:flex-end; padding:26px; color:#fff;
}
.gal__it:hover .gal__ov{ opacity:1; }
.gal__ov h4{ font-weight:600; font-family:var(--display); font-size:1.2rem; }
.gal__ov span{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mist); }
.gal__it.is-hidden{ display:none; }

.lbox{
  position:fixed; inset:0; z-index:90; background:rgba(11,32,56,.96);
  display:flex; align-items:center; justify-content:center; padding:6vw;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.lbox.is-open{ opacity:1; visibility:visible; }
.lbox img{ max-width:100%; max-height:82vh; object-fit:contain; }
.lbox__x{ position:absolute; top:28px; right:34px; color:#fff; font-size:1.6rem; width:48px; height:48px; }
.lbox__nav{ position:absolute; top:50%; color:#fff; width:56px; height:56px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:grid; place-items:center; transform:translateY(-50%); transition:background .35s,color .35s; }
.lbox__nav:hover{ background:#fff; color:var(--navy-900); }
.lbox__nav.prev{ left:2vw; }
.lbox__nav.next{ right:2vw; }
.lbox__cap{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:var(--mist); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; }

/* ---------- 18. FORMS ---------- */
.form{ display:grid; gap:26px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.field{ position:relative; }
.field label{
  display:block; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--steel); margin-bottom:10px;
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 2px; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--line);
  font-family:var(--sans); font-size:.98rem;
  transition:border-color .4s var(--ease);
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--navy); }
.field input[readonly]{ color:var(--muted); }
.field select{ background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%); background-position:calc(100% - 14px) 22px,calc(100% - 8px) 22px; background-size:6px 6px; background-repeat:no-repeat; }
.field--file input{ padding:12px 0; font-size:.86rem; color:var(--muted); }
.form__note{ font-size:.78rem; color:var(--muted); }
.formmsg{
  display:none;
  padding:16px 20px;
  font-size:.92rem; line-height:1.6;
  background:#fff;                 /* white card, readable on navy and on paper */
  color:var(--ink);                /* never inherits the white text of a dark section */
  border:1px solid var(--line);
  border-left:3px solid var(--steel);
}
.formmsg.ok{ display:block; border-left-color:#2E7D5B; }
.formmsg.err{ display:block; border-left-color:#B0413E; }

.info{ display:grid; gap:34px; }
.info__it h4{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--steel); margin-bottom:12px; }
.info__it p,.info__it a{ font-size:1.02rem; line-height:1.7; }
.info__it a:hover{ color:var(--navy); text-decoration:underline; text-underline-offset:4px; }
.map{ width:100%; height:clamp(320px,44vh,460px); border:0; filter:grayscale(1) contrast(1.05); transition:filter .6s var(--ease); }
.map:hover{ filter:grayscale(0); }

/* ---------- 19. CTA BAND ---------- */
.cta{ position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:clamp(72px,9vw,120px) 0; }
.cta__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; }
.cta__in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,70px); align-items:center; }

/* ---------- 20. FOOTER ---------- */
.ftr{ background:var(--navy-900); color:#fff; padding-top:clamp(64px,8vw,104px); }
.ftr__top{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr) minmax(0,.7fr) minmax(0,1fr); gap:clamp(30px,4vw,58px); padding-bottom:64px; }
.ftr__logo img{ width:100%; max-width:230px; height:auto; margin-bottom:26px; filter:brightness(0) invert(1); }
.ftr p{ color:rgba(255,255,255,.65); font-size:.94rem; }
.ftr h5{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--steel); margin:0 0 20px; font-weight:500; }
.ftr__links li{ margin-bottom:11px; }
.ftr__links a{ font-size:.94rem; color:rgba(255,255,255,.72); transition:color .35s, padding-left .35s var(--ease); }
.ftr__links a:hover{ color:#fff; padding-left:8px; }
.ftr__gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.ftr__gal a{ display:block; aspect-ratio:1/1; overflow:hidden; background:rgba(255,255,255,.06); }
.ftr__gal img{ width:100%; height:100%; object-fit:cover; opacity:.62; transition:opacity .45s var(--ease), transform .7s var(--ease); }
.ftr__gal a:hover img{ opacity:1; transform:scale(1.08); }
.ftr__gal-link{ display:inline-block; margin-top:18px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); border-bottom:1px solid var(--line-light); padding-bottom:6px; transition:color .35s, border-color .35s; }
.ftr__gal-link:hover{ color:#fff; border-color:#fff; }

.ftr__contact{ display:grid; gap:18px; }
.ftr__contact li{ display:flex; align-items:flex-start; gap:13px; font-size:.94rem; line-height:1.65; color:rgba(255,255,255,.72); }
.ftr__contact a{ color:rgba(255,255,255,.72); transition:color .35s; }
.ftr__contact a:hover{ color:#fff; }
.ftr__ico{ flex:none; width:17px; height:17px; margin-top:4px; color:var(--steel); }
.ftr__ico svg{ width:100%; height:100%; display:block; }

.ftr__soc{ display:flex; gap:11px; margin-top:24px; }
.ftr__soc a{
  width:40px; height:40px; border:1px solid var(--line-light); border-radius:50%;
  display:grid; place-items:center; transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.ftr__soc a:hover{ background:#fff; color:var(--navy-900); border-color:#fff; }
.ftr__word{
  font-weight:600;
  font-family:var(--display); font-size:clamp(3rem,13vw,11rem); line-height:.82;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14);
  text-align:center; padding-bottom:14px; user-select:none; overflow:hidden;
}
.ftr__bot{
  border-top:1px solid var(--line-light); padding:26px 0 30px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:.78rem; color:rgba(255,255,255,.5);
}
.ftr__bot a{ color:rgba(255,255,255,.72); }
.ftr__bot a:hover{ color:#fff; }

/* to-top */
.totop{
  position:fixed; right:calc(var(--frame) + 14px); bottom:calc(var(--frame) + 14px); z-index:65;
  width:50px; height:50px; border-radius:50%; background:var(--navy); color:#fff;
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s, background .35s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--navy-900); }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1080px){
  .ftr__top{ grid-template-columns:1fr 1fr; }
  .svc{ grid-template-columns:1fr 1fr; }
  .svc__item:nth-child(3n){ border-right:1px solid var(--line); }
  .svc__item:nth-child(2n){ border-right:0; }
  .team{ grid-template-columns:repeat(2,1fr); }
  .vals{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stats li:nth-child(2n){ border-right:0; }
  .stats li{ border-bottom:1px solid var(--line-light); }
}
@media (max-width:900px){
  :root{ --frame:8px; }
  .hdr__nav{ display:none; }
  .hdr__burger{ display:flex; }
  .hdr__cta{ display:none; }
  .split,.ceo,.cta__in,.srow{ grid-template-columns:1fr; }
  .split--rev > *:first-child{ order:0; }
  .srow:nth-child(even) .srow__txt{ order:0; }
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .proc__step{ grid-template-columns:64px 1fr; }
  .proc__step > p{ grid-column:2; }
  .fig-stack .fig:last-child{ position:static; width:100%; border:0; margin-top:16px; }
  .gal__it,.gal__it.wide,.gal__it.tallx,.gal__it.half{ grid-column:span 6; aspect-ratio:1/1; }
  .hero__side{ display:none; }
  .hero__scroll{ display:none; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .form__row{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:1fr; }
  .svc__item,.svc__item:nth-child(3n),.svc__item:nth-child(2n),.svc--4 .svc__item{ border-right:0; }
  .team,.vals,.stats{ grid-template-columns:1fr; }
  .vals li{ padding:34px 26px; }
  .stats li{ border-right:0; }
  .gal__it,.gal__it.wide,.gal__it.tallx,.gal__it.half{ grid-column:span 12; }
  .ftr__top{ grid-template-columns:1fr; }
  .hero__ui{ left:calc(var(--pad) + var(--frame)); right:auto; bottom:30px; }
  .hero__in{ padding-bottom:118px; }
  .hero__acts{ margin-top:28px; gap:10px; }
  .hero__acts .btn{ width:100%; justify-content:center; }
  .lbox__nav{ width:44px; height:44px; }
  .lbox__nav.prev{ left:8px; } .lbox__nav.next{ right:8px; }
}

/* ---------- 22. MOTION PREFERENCE ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal],.mask > img,.rise > span{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .arc path,.arc polyline{ stroke-dashoffset:0 !important; }
}

/* ---------- 23. PRINT ---------- */
@media print{
  .hdr,.menu,.totop,.hero__ui,.frame{ display:none !important; }
  body{ background:#fff; }
}