/*
Theme Name: FCX World Group
Theme URI: https://www.fcxnetwork.com/
Author: FCX World Group
Author URI: https://www.fcxnetwork.com/
Description: A premium one-page corporate profile theme for FCX World Group, the diversified international business group based in Istanbul, Türkiye. Every heading, paragraph, product, division, statistic, button, link and picture is edited from the FCX Website screen in the dashboard, with no code changes. Includes WooCommerce support.
Version: 1.1.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fcx-world-group
Tags: business, portfolio, one-column, custom-menu, custom-logo, featured-images, full-width-template, translation-ready, block-styles, wide-blocks
*/

/* =====================================================================
   FCX WORLD GROUP
   ---------------------------------------------------------------------
   This stylesheet holds the DESIGN only. Every word, link, number and
   picture on the page is stored by WordPress and edited from
   Dashboard -> FCX Website. Nothing in here needs changing to update
   the site's content.

   Pictures are injected as --img-* custom properties in wp_head, so a
   photo swapped in the Media Library changes here with no CSS edit.
   ===================================================================== */


/* =====================================================================
   FCX WORLD GROUP — corporate website
   ---------------------------------------------------------------------
   This stylesheet holds the DESIGN only. Every word, link, number and
   image on the page comes from data/content.json and is edited in the
   admin editor at /admin/ — nothing in here needs changing to update
   the site's content.

   Images are injected as --img-* custom properties by index.php, so a
   picture swapped in the editor changes here with no CSS edit.
   ===================================================================== */

:root{
  /* --- imagery: replace any one of these with url("photo.webp") --- */

  /* palette — as briefed */
  --navy:#0F172A;
  --deep:#1E3A5F;
  --accent:#2563EB;
  --light:#F5F7FA;
  --white:#FFFFFF;

  --ink:#0F172A;
  --ink-soft:#475569;
  --ink-faint:#7A8699;
  --line:#E2E8F0;
  --line-dark:rgba(255,255,255,.14);
  --on-dark:#E7EDF7;
  --on-dark-soft:#9FB0C9;

  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --container:1280px;
  --gutter:clamp(20px,4vw,48px);
  --section-y:clamp(88px,9.5vw,148px);
  --header-h:88px;
  --header-h-small:66px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
section{scroll-margin-top:var(--header-h-small)}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.section--light{background:var(--light)}
.section--white{background:var(--white)}
.section--dark{background:var(--navy);color:var(--on-dark)}
.section--dark h2,.section--dark h3{color:var(--white)}

.eyebrow{
  font-family:var(--font-body);
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:32px;height:1px;background:currentColor;flex:none}
.section--dark .eyebrow{color:#7FA6F5}

.h-xl{font-size:clamp(38px,6.2vw,80px)}
.h-lg{font-size:clamp(30px,4.4vw,56px)}
.h-md{font-size:clamp(24px,2.6vw,34px)}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.75;color:var(--ink-soft)}
.section--dark .lead{color:var(--on-dark-soft)}
.muted{color:var(--ink-soft)}
.section--dark .muted{color:var(--on-dark-soft)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:2px;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:#1D4FD8}
.btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn--outline{border-color:var(--line);color:var(--ink)}
.btn--outline:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
[dir="rtl"] .btn:hover .arw{transform:translateX(-4px)}

.link-more{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);padding-block:6px;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.link-more:hover{border-color:currentColor;gap:16px}
.section--dark .link-more{color:#8FB2F7}

/* ---------- header ---------- */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(15,23,42,.55),rgba(15,23,42,0));
  transition:height .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(15,23,42,.72);
  opacity:0;transition:opacity .35s var(--ease);
}
@supports (backdrop-filter:blur(4px)){
  .header::before{backdrop-filter:saturate(160%) blur(14px)}
}
.header.is-stuck{height:var(--header-h-small);border-bottom-color:rgba(255,255,255,.1);background:none}
.header.is-stuck::before{opacity:1}
.header__inner{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:24px}

.brand{display:flex;align-items:baseline;gap:9px;color:#fff;flex:none}
.brand__mark{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.16em}
.brand__word{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.62)}

.nav{margin-inline-start:auto;display:flex;align-items:center;gap:34px}
.nav a{
  position:relative;font-size:14px;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.78);
  padding-block:8px;transition:color .25s var(--ease);
}
.nav a::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;height:1px;width:100%;
  background:#fff;transform:scaleX(0);transform-origin:inline-start;transition:transform .3s var(--ease);
}
.nav a:hover,.nav a.is-active{color:#fff}
.nav a.is-active::after,.nav a:hover::after{transform:scaleX(1)}
.header__cta{margin-inline-start:6px;padding:12px 22px;font-size:12px}

.burger{display:none;margin-inline-start:auto;width:44px;height:44px;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:22px;height:1.5px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline-start:0;width:22px;height:1.5px;background:#fff;transition:transform .3s var(--ease)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:99;background:var(--navy);
  padding:calc(var(--header-h) + 24px) var(--gutter) 48px;
  display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  overflow-y:auto;
}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{
  font-family:var(--font-display);font-size:28px;font-weight:700;color:#fff;
  padding-block:14px;border-bottom:1px solid rgba(255,255,255,.09);
}
.mobile-nav .btn{margin-top:28px;width:100%}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;background:var(--navy);
  padding-block:calc(var(--header-h) + 40px) clamp(56px,8vh,96px);
}
.hero__bg{
  position:absolute;inset:-4%;
  background:var(--img-hero) center/cover no-repeat;
  transform:scale(1.06);
  animation:heroPan 26s var(--ease) forwards;
}
@keyframes heroPan{from{transform:scale(1.14) translate3d(1.2%,1%,0)}to{transform:scale(1.02) translate3d(-.6%,-.5%,0)}}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(15,23,42,.94) 6%,rgba(15,23,42,.46) 48%,rgba(15,23,42,.72) 100%),
    radial-gradient(120% 80% at 78% 18%,rgba(37,99,235,.32),transparent 60%);
}
.hero__inner{position:relative;width:100%}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.hero h1{
  font-size:clamp(44px,8.6vw,116px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase;
  margin-bottom:20px;
}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln i{display:block;font-style:normal;transform:translateY(105%);animation:rise .95s var(--ease) forwards}
.hero h1 .ln:nth-child(2) i{animation-delay:.1s}
@keyframes rise{to{transform:none}}
.hero__sub{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(19px,2.3vw,30px);line-height:1.25;letter-spacing:-.01em;color:#fff;
  max-width:18ch;margin-bottom:20px;
}
.hero__text{max-width:52ch;color:rgba(231,237,247,.82);font-size:clamp(15px,1.25vw,18px)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.fade-up-load{opacity:0;transform:translateY(16px);animation:fadeUp .8s var(--ease) forwards}
.d1{animation-delay:.35s}.d2{animation-delay:.5s}.d3{animation-delay:.65s}.d4{animation-delay:.8s}
@keyframes fadeUp{to{opacity:1;transform:none}}

.hero__side{
  border-inline-start:1px solid rgba(255,255,255,.18);
  padding-inline-start:28px;display:grid;gap:22px;min-width:210px;
}
.hero__fact b{display:block;font-family:var(--font-display);font-size:26px;font-weight:800;color:#fff;line-height:1}
.hero__fact span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(231,237,247,.6)}

.hero__scroll{
  position:absolute;inset-block-end:26px;inset-inline-end:var(--gutter);
  display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.hero__scroll i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);animation:scrollPulse 2.4s infinite}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- reveal system ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv--start{transform:translateY(0) translateX(-26px)}
.rv--end{transform:translateY(0) translateX(26px)}
.rv--scale{transform:scale(.97)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}

/* ---------- about ---------- */
.about__top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:start}
.about__title{font-size:clamp(34px,4.6vw,60px);line-height:1.02}
.about__title em{font-style:normal;color:var(--ink-faint);display:block}
.about__body p+p{margin-top:22px}
.about__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);background:#fff;
}
.about__plate{
  margin-top:clamp(48px,6vw,84px);position:relative;border-radius:3px;overflow:hidden;
  min-height:clamp(260px,42vw,460px);
  background:var(--img-about) center/cover no-repeat;
  display:flex;align-items:flex-end;
}
.about__plate::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.9),rgba(15,23,42,.25) 60%,rgba(15,23,42,.5))}
.about__quote{
  position:relative;z-index:1;padding:clamp(28px,4vw,54px);
  font-family:var(--font-display);font-weight:700;color:#fff;
  font-size:clamp(20px,2.6vw,34px);line-height:1.25;max-width:22ch;letter-spacing:-.02em;
}

/* ---------- stats ---------- */
.stats{border-block-start:1px solid var(--line);margin-top:clamp(48px,6vw,84px);padding-top:clamp(38px,4.5vw,62px)}
.stats__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.stat{border-inline-start:1px solid var(--line);padding-inline-start:clamp(16px,2vw,28px)}
.stat > b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1;letter-spacing:-.035em;color:var(--navy)}
.stat > b span{font-variant-numeric:tabular-nums}
.stat > b i{font-style:normal;color:var(--accent)}
.stat > em{display:block;font-style:normal;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.stat > small{display:block;margin-top:8px;font-size:14px;color:var(--ink-faint);line-height:1.55}

/* ---------- section head ---------- */
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(38px,5vw,66px)}
.head p{max-width:56ch}

/* ---------- activities grid ---------- */
.acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-dark)}
.act{
  position:relative;isolation:isolate;overflow:hidden;background:var(--navy);
  min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;color:#fff;transition:transform .5s var(--ease);
}
.act__img{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;transform:scale(1.02);transition:transform .8s var(--ease)}
.act::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(15,23,42,.93) 12%,rgba(15,23,42,.42) 62%,rgba(15,23,42,.18));
  transition:background .5s var(--ease);
}
.act:hover .act__img,.act:focus-visible .act__img{transform:scale(1.1)}
.act:hover::after{background:linear-gradient(to top,rgba(15,23,42,.95) 10%,rgba(30,58,95,.55) 65%,rgba(37,99,235,.25))}
.act__no{font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-bottom:auto}
.act h3{font-size:19px;line-height:1.2;margin-bottom:8px;transition:transform .45s var(--ease)}
.act:hover h3{transform:translateY(-4px)}
.act p{font-size:14px;line-height:1.6;color:rgba(231,237,247,.72);margin-bottom:14px}
.act__go{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#9CBBFA;opacity:.85;transition:opacity .35s var(--ease),gap .35s var(--ease);
}
.act:hover .act__go{opacity:1;gap:14px}
.act__link{position:absolute;inset:0;z-index:2}

/* ---------- division rail (signature) ---------- */
.rail{
  position:fixed;inset-inline-start:18px;inset-block-start:50%;transform:translateY(-50%);
  z-index:60;display:none;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.rail.is-visible{opacity:1;pointer-events:auto}
.rail::after{
  content:"";position:absolute;inset:-22px -18px;z-index:-1;border-radius:4px;
  background:rgba(255,255,255,.86);opacity:0;transition:opacity .3s var(--ease);
}
@supports (backdrop-filter:blur(4px)){.rail::after{backdrop-filter:blur(6px)}}
.rail:hover::after{opacity:1}
.rail.on-dark::after{background:rgba(15,23,42,.86)}
.rail::before{
  content:"Divisions";position:absolute;inset-block-start:-34px;inset-inline-start:0;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);
}
.rail a{
  display:flex;align-items:center;gap:12px;padding-block:7px;
  font-size:12px;letter-spacing:.04em;color:var(--ink-faint);
  transition:color .3s var(--ease);
}
.rail a i{display:block;width:16px;height:1px;background:currentColor;opacity:.5;transition:width .35s var(--ease),opacity .3s var(--ease)}
.rail a span{opacity:.001;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease);white-space:nowrap}
.rail:hover a span{opacity:.75;transform:none}
.rail:hover a.is-active span{opacity:1}
.rail a:hover{color:var(--navy)}
.rail a.is-active{color:var(--accent)}
.rail a.is-active i{width:34px;opacity:1}
.rail.on-dark::before{color:rgba(255,255,255,.45)}
.rail.on-dark a{color:rgba(255,255,255,.5)}
.rail.on-dark a:hover{color:#fff}
.rail.on-dark a.is-active{color:#8FB2F7}
@media (min-width:1360px){.rail{display:flex}}

/* ---------- division blocks ---------- */
.div-block{position:relative;padding-block:var(--section-y)}
.div-block__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.div-block__media{
  grid-column:span 6;position:relative;border-radius:3px;overflow:hidden;
  aspect-ratio:4/3;background-position:center;background-size:cover;
}
.div-block__media::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,23,42,.15),rgba(15,23,42,.5))}
.div-block__body{grid-column:span 6}
.div-block--flip .div-block__media{order:2}
.div-block__kicker{
  font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.section--dark .div-block__kicker{color:#7FA6F5}
.div-block h3{font-size:clamp(28px,3.6vw,46px);margin-bottom:10px}
.div-block__sub{
  font-family:var(--font-body);font-size:clamp(15px,1.3vw,18px);font-weight:500;letter-spacing:.02em;
  color:var(--ink-faint);margin-bottom:24px;
}
.section--dark .div-block__sub{color:var(--on-dark-soft)}
.div-block__text{max-width:52ch}
.div-block__text p+p{margin-top:16px}
.div-block .btn,.div-block .link-more{margin-top:30px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tag{
  font-size:12.5px;letter-spacing:.05em;padding:8px 14px;border-radius:2px;
  border:1px solid var(--line);color:var(--ink-soft);background:#fff;
}
.section--dark .tag{border-color:var(--line-dark);color:var(--on-dark);background:rgba(255,255,255,.05)}

.div-mark{
  position:absolute;inset-block-start:calc(var(--section-y) * .55);inset-inline-end:var(--gutter);
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);opacity:.55;
}
.section--dark .div-mark{color:rgba(255,255,255,.42)}

/* ---------- other businesses ---------- */
.other{border:1px solid var(--line);border-radius:3px;background:#fff;overflow:hidden}
.other summary{
  list-style:none;cursor:pointer;padding:clamp(22px,3vw,34px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.other summary::-webkit-details-marker{display:none}
.other summary h3{font-size:clamp(20px,2.2vw,28px)}
.other summary small{display:block;margin-top:8px;color:var(--ink-soft);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none}
.other__sign{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease),transform .4s var(--ease)}
.other__sign::before{content:"";width:14px;height:1.5px;background:var(--navy)}
.other__sign::after{content:"";position:absolute;width:1.5px;height:14px;background:var(--navy);transition:opacity .3s var(--ease)}
.other[open] .other__sign{background:var(--navy);border-color:var(--navy);transform:rotate(180deg)}
.other[open] .other__sign::before{background:#fff}
.other[open] .other__sign::after{opacity:0}
.other__panel{padding:0 clamp(22px,3vw,34px) clamp(26px,3vw,36px);border-top:1px solid var(--line)}
.other__panel p{max-width:70ch;padding-top:24px}
.other__slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.slot{border:1px dashed var(--line);border-radius:3px;padding:22px;color:var(--ink-faint);font-size:14px;line-height:1.55}
.slot b{display:block;font-family:var(--font-display);font-size:15px;color:var(--ink-soft);margin-bottom:6px}

/* ---------- global reach ---------- */
.reach{position:relative;overflow:hidden}
.reach__facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px);
  margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--line-dark);
}
.reach__fact{border-inline-start:1px solid var(--line-dark);padding-inline-start:20px}
.reach__fact b{display:block;font-family:var(--font-display);font-size:clamp(17px,1.7vw,22px);color:#fff;letter-spacing:-.01em;line-height:1.3}
.reach__fact span{font-size:14px;color:var(--on-dark-soft)}
.map{position:relative;width:100%;aspect-ratio:2200/900;margin-top:clamp(28px,4vw,56px)}
.map__dots{position:absolute;inset:0;background:var(--img-worldmap) center/contain no-repeat;opacity:.62}
.map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map .arc{fill:none;stroke:url(#flow);stroke-width:3;stroke-linecap:round}
.map.is-in .arc{animation:draw 2.6s var(--ease) forwards}
.map.is-in .arc.a2{animation-delay:.3s}
.map.is-in .arc.a3{animation-delay:.6s}
.map.is-in .arc.a4{animation-delay:.9s}
.map.is-in .arc.a5{animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
.map .hub{fill:#fff}
.map .pulse{fill:none;stroke:#5B8DEF;stroke-width:2.5;transform-origin:1216px 254px;opacity:0}
.map.is-in .pulse{animation:pulse 3.6s ease-out infinite}
.map.is-in .pulse.p2{animation-delay:1.8s}
@keyframes pulse{0%{transform:scale(.4);opacity:.85}100%{transform:scale(4.2);opacity:0}}
.map__label{
  position:absolute;inset-block-start:28.3%;inset-inline-start:55.3%;
  transform:translateY(-50%);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;white-space:nowrap;
  padding-inline-start:20px;
}
.map__label{text-shadow:0 1px 10px rgba(15,23,42,.95),0 0 3px rgba(15,23,42,.9)}
.map__label::before{content:"";position:absolute;inset-inline-start:2px;inset-block-start:50%;width:12px;height:1px;background:rgba(255,255,255,.65)}

/* ---------- approach ---------- */
.values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.value{background:var(--white);padding:clamp(26px,2.6vw,38px) clamp(20px,2vw,30px);transition:background .4s var(--ease)}
.value:hover{background:var(--light)}
.value svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.4;margin-bottom:22px}
.value h3{font-size:19px;margin-bottom:10px}
.value p{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}

/* ---------- business model ---------- */
.model{position:relative;overflow:hidden;background:var(--navy)}
.model__bg{position:absolute;inset:0;background:var(--img-model) center/cover no-repeat;opacity:.4}
.model__veil{position:absolute;inset:0;background:linear-gradient(to right,rgba(15,23,42,.96),rgba(15,23,42,.7) 55%,rgba(15,23,42,.94))}
.model .wrap{position:relative}
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(34px,4vw,58px)}
.flow__step{position:relative;padding-top:34px}
.flow__step::before{content:"";position:absolute;inset-block-start:6px;inset-inline-start:0;width:100%;height:1px;background:rgba(255,255,255,.16)}
.flow__step::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:0;width:9px;height:9px;border-radius:50%;background:#5B8DEF;box-shadow:0 0 0 5px rgba(91,141,239,.16)}
.flow__step b{display:block;font-family:var(--font-display);font-size:clamp(15px,1.35vw,19px);font-weight:700;color:#fff;line-height:1.25;letter-spacing:-.01em}
.flow__step span{display:block;margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--on-dark-soft)}
.flow__step em{position:absolute;inset-block-start:-22px;inset-inline-start:0;font-style:normal;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.4)}

/* ---------- division websites ---------- */
.sites{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.site{
  border:1px solid var(--line);border-radius:3px;background:#fff;padding:26px;
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.site:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(15,23,42,.5)}
.site__lock{display:flex;align-items:baseline;gap:7px;color:var(--navy)}
.site__lock b{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.14em}
.site__lock span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.site h3{font-size:17px;line-height:1.25}
.site p{font-size:14px;color:var(--ink-soft);line-height:1.6;flex:1}
.site__url{font-size:12.5px;letter-spacing:.06em;color:var(--accent);font-weight:600;word-break:break-word}
.site__soon{font-size:12.5px;letter-spacing:.06em;color:var(--ink-faint)}
.site__link{position:absolute;inset:0}

/* ---------- contact ---------- */
.contact{position:relative;overflow:hidden;background:var(--navy);color:var(--on-dark)}
.contact__bg{position:absolute;inset:0;background:var(--img-contact) center/cover no-repeat;opacity:.55}
.contact__veil{position:absolute;inset:0;background:linear-gradient(115deg,rgba(15,23,42,.96) 40%,rgba(30,58,95,.78))}
.contact .wrap{position:relative}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:start}
.contact h2{margin-bottom:20px}
.contact__list{display:grid;gap:2px;margin-block:6px 30px}
.cline{display:flex;align-items:center;gap:16px;padding-block:16px;border-bottom:1px solid var(--line-dark)}
.cline:first-child{border-top:1px solid var(--line-dark)}
.cline em{flex:none;width:112px;font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft)}
.cline b{font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.5vw,20px);color:#fff;letter-spacing:-.01em}
.cline a:hover{color:#8FB2F7}
.contact__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- footer ---------- */
.footer{background:#0A1020;color:var(--on-dark-soft);padding-block:clamp(52px,6vw,84px) 0}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.footer h4{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:20px;font-family:var(--font-body)}
.footer__brand{display:flex;align-items:baseline;gap:9px;color:#fff;margin-bottom:18px}
.footer__brand b{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.16em}
.footer__brand span{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.footer p{font-size:14.5px;line-height:1.7;max-width:44ch}
.footer li{margin-bottom:11px;font-size:14.5px}
.footer li a{transition:color .25s var(--ease)}
.footer li a:hover{color:#fff}
.footer__bottom{
  margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.1);
  padding-block:26px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:13px;color:rgba(159,176,201,.75);
}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sites{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
}
@media (max-width:1080px){
  .nav,.header__cta{display:none}
  .burger{display:flex}
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__side{border-inline-start:0;border-block-start:1px solid rgba(255,255,255,.18);padding-inline-start:0;padding-block-start:22px;grid-template-columns:repeat(3,minmax(0,1fr));display:grid;gap:18px}
  .about__top{grid-template-columns:minmax(0,1fr);gap:28px}
  .head{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  .reach__grid{grid-template-columns:minmax(0,1fr)}
  .contact__grid{grid-template-columns:minmax(0,1fr)}
  .div-block__grid{grid-template-columns:minmax(0,1fr)}
  .div-block__media,.div-block__body{grid-column:auto}
  .div-block--flip .div-block__media{order:0}
  .div-mark{display:none}
  .footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:1080px){
  .rv--start,.rv--end{transform:translateY(26px)}
}
@media (max-width:720px){
  body{font-size:16px}
  .stats__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .stat{border-inline-start:0;border-block-start:1px solid var(--line);padding-inline-start:0;padding-block-start:20px}
  .stats__grid .stat:first-child{border-block-start:0;padding-block-start:0}
  .acts{grid-template-columns:minmax(0,1fr)}
  .act{min-height:260px}
  .values{grid-template-columns:minmax(0,1fr)}
  .sites{grid-template-columns:minmax(0,1fr)}
  .other__slots{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:minmax(0,1fr);gap:26px}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .hero__side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cline{flex-direction:column;align-items:flex-start;gap:6px}
  .cline em{width:auto}
  .hero__scroll{display:none}
  .map__label{font-size:10px;letter-spacing:.1em;padding-inline-start:14px}
  .map{width:132%;margin-inline-start:-16%}
  .reach__facts{grid-template-columns:minmax(0,1fr);gap:22px}
  .btn{width:100%}
  .hero__actions .btn,.contact__actions .btn{width:auto;flex:1 1 220px}
}
@media (max-width:430px){
  /* long uppercase labels must wrap rather than overflow their button */
  .btn{white-space:normal;text-align:center;padding-inline:20px;font-size:13px;letter-spacing:.05em}
  .hero__actions .btn,.contact__actions .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .hero h1 .ln i{transform:none}
  .fade-up-load{opacity:1;transform:none}
  .map .arc{stroke-dashoffset:0}
}




/* =====================================================================
   WordPress content — posts, pages, archives, comments, widgets
   These rules only apply to standard WordPress screens; the one-page
   profile above is unaffected.
   ===================================================================== */
.page-shell{padding-block:clamp(96px,10vw,150px);background:var(--light)}
.page-shell .wrap{max-width:var(--wrap)}
.page-head{max-width:64ch;margin-bottom:clamp(30px,4vw,52px)}
.page-head h1{font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(32px,5vw,56px);line-height:1.04;color:var(--primary)}
.page-head p{margin:14px 0 0;color:var(--muted);font-size:17px;line-height:1.65}
.entry{background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:clamp(24px,4vw,60px);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.entry-content{max-width:72ch;font-size:17px;line-height:1.75;color:#243044}
.entry-content > * + *{margin-top:1.15em}
.entry-content h2,.entry-content h3,.entry-content h4{font-family:var(--font-head);
  color:var(--primary);letter-spacing:-.02em;margin-top:1.8em;line-height:1.2}
.entry-content h2{font-size:clamp(24px,3vw,34px)}
.entry-content h3{font-size:clamp(20px,2.4vw,26px)}
.entry-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--secondary)}
.entry-content img,.entry-content iframe,.entry-content video{max-width:100%;height:auto;border-radius:3px}
.entry-content blockquote{border-inline-start:3px solid var(--accent);padding-inline-start:22px;
  margin-inline-start:0;color:var(--muted);font-style:normal}
.entry-content ul,.entry-content ol{padding-inline-start:1.3em}
.entry-content li + li{margin-top:.45em}
.entry-content table{width:100%;border-collapse:collapse;font-size:15px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 12px;text-align:start}
.entry-content th{background:var(--light);font-family:var(--font-head)}
.entry-content pre{background:var(--primary);color:#E7EEFB;padding:18px;border-radius:3px;overflow:auto;font-size:14px}
.entry-content code{background:var(--light);padding:2px 6px;border-radius:2px;font-size:.92em}
.entry-content .alignwide{max-width:min(100%,1100px)}
.entry-content .alignfull{max-width:none;width:100%}
.entry-thumb{margin-bottom:clamp(20px,3vw,34px);border-radius:3px;overflow:hidden}
.entry-thumb img{display:block;width:100%;height:auto}
.entry-meta{font-family:var(--font-head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}

.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(16px,2vw,26px)}
.post-card{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s,transform .3s,box-shadow .3s}
.post-card:hover{border-color:#C9D5EA;transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,23,42,.09)}
.post-card__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--primary)}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.post-card:hover .post-card__img img{transform:scale(1.05)}
.post-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-card__body h2{font-family:var(--font-head);font-size:20px;letter-spacing:-.02em;color:var(--primary);line-height:1.25}
.post-card__body h2 a{color:inherit;text-decoration:none}
.post-card__body h2 a:hover{color:var(--accent)}
.post-card__body p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}

.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,4vw,50px)}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--muted);
  text-decoration:none;font-family:var(--font-head);font-size:14px;transition:all .25s}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}

.searchform{display:flex;gap:8px;max-width:460px}
.searchform input[type=search]{flex:1;border:1px solid var(--line);border-radius:3px;padding:12px 14px;
  font:inherit;font-size:15px;background:#fff;color:var(--primary)}
.searchform input[type=search]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

.widget-area{display:grid;gap:22px}
.widget{background:#fff;border:1px solid var(--line);border-radius:3px;padding:22px 24px}
.widget-title{font-family:var(--font-head);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);margin-bottom:14px}
.widget ul{list-style:none;padding:0;margin:0}
.widget li + li{margin-top:9px}
.widget a{color:var(--muted);text-decoration:none;font-size:15px}
.widget a:hover{color:var(--accent)}
.with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(22px,3vw,44px);align-items:start}
@media (max-width:960px){.with-sidebar{grid-template-columns:1fr}}

.comments{margin-top:clamp(30px,4vw,50px);background:#fff;border:1px solid var(--line);
  border-radius:3px;padding:clamp(22px,3vw,40px)}
.comments h2{font-family:var(--font-head);font-size:22px;color:var(--primary);margin-bottom:20px}
.comments ol{list-style:none;padding:0;margin:0}
.comments .comment-body{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.comments .children{padding-inline-start:26px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],
.comment-form textarea{width:100%;border:1px solid var(--line);border-radius:3px;padding:11px 13px;font:inherit}
.comment-form textarea{min-height:130px;resize:vertical}
.comment-form .submit{background:var(--accent);color:#fff;border:0;border-radius:3px;
  padding:13px 26px;font-family:var(--font-head);font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.comment-form .submit:hover{background:var(--secondary)}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:fixed!important;inset-block-start:12px;inset-inline-start:12px;width:auto;height:auto;
  clip:auto;clip-path:none;z-index:300;background:var(--accent);color:#fff;padding:12px 20px;border-radius:3px}
.admin-bar .header{top:32px}
@media screen and (max-width:782px){.admin-bar .header{top:46px}}
.alignnone{max-width:100%;height:auto}
.aligncenter{display:block;margin-inline:auto}
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:13px;color:var(--muted);margin-top:8px}
.sticky,.gallery-caption,.bypostauthor{}


/* =====================================================================
   PHOTOGRAPHY SYSTEM
   ---------------------------------------------------------------------
   Real photography will arrive from several sources — commissioned
   shots, licensed stock, supplier images — and untreated that always
   looks like a folder of pictures rather than one commissioned shoot.
   Every photographic surface therefore passes through one grade, set
   here in a single place. Adjust --photo-grade and the whole site moves
   together; no image needs re-editing.
   ===================================================================== */
:root{
  --photo-grade:saturate(.86) contrast(1.07) brightness(.95);
  --scrim-soft:linear-gradient(180deg,rgba(9,14,28,.10) 0%,rgba(9,14,28,.62) 100%);
  --scrim-side:linear-gradient(100deg,rgba(9,14,28,.86) 0%,rgba(9,14,28,.42) 46%,rgba(9,14,28,.12) 100%);
}
.hero__bg,.about__plate,.act__img,.div-block__media,.model__bg,.contact__bg,
.entry-thumb img,.post-card__img img,.woocommerce ul.products li.product a img{
  filter:var(--photo-grade);
}
/* The map is a graphic, not a photograph — it must not be graded. */
.map__dots{filter:none}

/* Text over photography always needs a scrim, whatever picture is used. */
.act__img::after{content:"";position:absolute;inset:0;background:var(--scrim-soft)}
.div-block__media::after{background:var(--scrim-side)}

/* =====================================================================
   TYPOGRAPHIC + RHYTHM REFINEMENTS
   Tightened display tracking, a quieter eyebrow, and a consistent
   optical rhythm between sections.
   ===================================================================== */
.h-lg,.about__title,.hero h1{text-wrap:balance}
.lead{text-wrap:pretty}
.eyebrow{font-size:11px;letter-spacing:.22em}
.hero__sub{letter-spacing:-.015em}
.hero__text{max-width:52ch}

/* Statistics: the figure carries the weight, the label steps back. */
.stat b{letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.stat em{letter-spacing:.12em}

/* Division blocks: a hairline rule under the number mark gives the
   full-width bands a shared horizon line. */
.div-mark{position:relative;padding-bottom:14px}
.div-mark::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:44px;height:1px;
  background:currentColor;opacity:.34}

/* Cards: one shared hover contract across the whole site. */
.act,.site,.value,.slot{transition:border-color .35s var(--ease),transform .35s var(--ease),
  box-shadow .35s var(--ease)}
.act:hover,.site:hover{transform:translateY(-4px)}

/* Quiet status text: "in preparation" should read as a note, never as a
   headline that makes the site look unfinished. */
.site__soon{opacity:.62;font-size:12px;letter-spacing:.14em}


/* Focal point: keep the working part of a wide photograph in frame on the
   hero and the full-bleed bands, rather than centring on empty foreground. */
.hero__bg{background-position:center 34%}
.model__bg,.contact__bg{background-position:center 40%}
@media (max-width:760px){
  .hero__bg{background-position:60% 34%}
}


/* Card imagery: a 4:3 card crops a wide photograph hard, and the subject in
   these frames sits low. Bias the crop downward and lighten the treatment so
   the sector is readable at card size, which is the whole point of the grid. */
.act__img{
  background-position:center 64%;
  filter:saturate(.92) contrast(1.04) brightness(1.12);
}
.act__img::after{
  background:linear-gradient(180deg,rgba(9,14,28,.04) 0%,rgba(9,14,28,.30) 46%,rgba(9,14,28,.88) 100%);
}
.act__no{color:rgba(233,240,252,.72)}
.act h3{text-shadow:0 1px 14px rgba(9,14,28,.6)}

/* Full-bleed division media can stay darker — there is far more of it, and
   the body copy sits beside it rather than on top. */
.div-block__media{background-position:center 56%;filter:saturate(.88) contrast(1.05) brightness(1.02)}