/* ==========================================================================
   DERIDENT LTD.
   Typefaces are self-hosted in /assets/fonts — no external requests.
   ========================================================================== */

@import url("fonts.css");

:root{
  /* Navy reads clearly BLUE, not black — richer and a shade lighter than before */
  --ink:        #16294B;   /* primary navy — hero, dark sections          */
  --ink-deep:   #0F1D37;   /* footer                                      */
  --ink-soft:   #1E3663;   /* secondary dark panel                        */
  --red:        #B03A2B;   /* logo red, saturated for screen              */
  --red-dark:   #93301F;
  --red-light:  #EE8F79;   /* accent on dark backgrounds                  */
  --paper:      #FFFFFF;
  --sand:       #F4F1EA;   /* warm alternating section                    */
  --line:       #E0DAD0;
  --line-dark:  rgba(255,255,255,.17);
  --text:       #131A28;
  --muted:      #5E6472;
  --muted-dark: rgba(255,255,255,.72);

--wrap: 1280px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px; }

/* ---------- shared pieces ---------------------------------------------- */

.eyebrow{
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin:0 0 26px;
  display:flex; align-items:center; gap:16px;
}
.eyebrow::before{                     /* signature marker: short rule ending in a dot */
  content:""; flex:0 0 auto; width:42px; height:6px;
  background:
    radial-gradient(circle 3px at right center, currentColor 99%, transparent 100%) right center/8px 6px no-repeat,
    linear-gradient(currentColor,currentColor) left center/34px 1px no-repeat;
}
.on-dark .eyebrow,
.hero .eyebrow,
.door .eyebrow,
.section-dark .eyebrow{ color:var(--red-light); }

.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  letter-spacing:.01em; text-decoration:none;
  padding:19px 32px; border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-dark); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--ink); }

.section{ padding:104px 0; }
.section-alt{ background:var(--sand); }
.section-dark{ background:var(--ink); color:#fff; }
.section-dark p{ color:var(--muted-dark); }

.section-head{ max-width:860px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(36px,4.4vw,56px); }
.section-head p:not(.eyebrow){ margin:26px 0 0; color:var(--muted); font-size:20px; max-width:60ch; }
.section-dark .section-head p:not(.eyebrow){ color:var(--muted-dark); }

/* ---------- utility bar -------------------------------------------------- */

.utility{ background:var(--ink); color:rgba(255,255,255,.72); font-size:14px; }
.utility .wrap{ display:flex; align-items:center; gap:28px; height:46px; }
.utility a{ text-decoration:none; display:inline-flex; align-items:center; gap:9px; }
.utility a:hover{ color:#fff; }
.utility .u-right{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.utility svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; }
.utility .lang a{ font-weight:600; color:rgba(255,255,255,.5); }
.utility .lang a.is-active{ color:#fff; }
.utility .lang{ display:flex; gap:7px; }
.u-tag{ letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.45); }

/* ---------- header ------------------------------------------------------ */

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:40px; height:96px; }
.logo img{ height:46px; width:auto; }
.nav{ display:flex; gap:34px; margin-left:auto; }
.nav a{
  font-size:15px; font-weight:500; text-decoration:none; color:var(--ink);
  padding:8px 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); }

.header-tools{ display:flex; align-items:center; gap:22px; }
.lang{ font-size:14px; font-weight:600; display:flex; gap:6px; color:#A9A7A2; }
.lang a{ text-decoration:none; }
.lang a.is-active{ color:var(--ink); }
.header-tools .btn{ padding:15px 24px; font-size:14px; }

.nav-toggle{
  display:none; margin-left:auto; background:none;
  border:1px solid var(--line); width:48px; height:48px; cursor:pointer; padding:0;
}
.nav-toggle span{ display:block; width:20px; height:1.5px; background:var(--ink); margin:5px auto; }

/* ---------- hero -------------------------------------------------------- */

.hero{
  background:var(--ink); color:#fff;
  position:relative; overflow:hidden;
  padding:84px 0 92px;
}
.hero-art{                              /* technical composition, right side */
  position:absolute; right:-40px; top:50%; transform:translateY(-58%);
  width:min(52vw,760px); opacity:.5; pointer-events:none;
}
.hero-inner{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:60px; align-items:center; }
/* Wallpaper treatment — identical on every page, so all eight images
   read as one commissioned set rather than eight stock photos. */
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(.45) brightness(.66) contrast(1.05) saturate(.85);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    #16294B 0%, rgba(22,41,75,.93) 38%, rgba(22,41,75,.58) 72%, rgba(22,41,75,.44) 100%);
}
.hero::after{                           /* warm depth from the right */
  content:""; position:absolute; right:-14%; top:-30%;
  width:820px; height:820px; border-radius:50%;
  background:radial-gradient(circle, rgba(176,58,43,.40) 0%, transparent 64%);
}
.hero .wrap{ position:relative; z-index:2; }

.hero h1{
  font-size:clamp(42px,4.9vw,68px);
  line-height:1.06; max-width:16ch; margin:0 0 26px;
}
.hero h1 em{ font-style:italic; color:var(--red-light); }
.hero-lead{
  font-size:19px; line-height:1.65; max-width:50ch;
  color:var(--muted-dark); margin:0 0 34px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* quick-enquiry strip, straddling the hero edge */
.quickbar{ position:relative; z-index:5; margin-top:-38px; }
.quickbar form{
  display:flex; align-items:stretch; gap:0;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(10,12,20,.22);
}
.quickbar label{
  display:flex; align-items:center; padding:0 26px; white-space:nowrap;
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); border-right:1px solid var(--line);
}
.quickbar input{
  flex:1; min-width:0; background:transparent; border:none; color:var(--text);
  font-family:var(--sans); font-size:17px; padding:22px 26px;
}
.quickbar input::placeholder{ color:#9B9AA2; }
.quickbar input:focus{ outline:none; background:var(--sand); }

/* stats sit below the overlapping bar, so they need head-room */
.stats{ padding-top:56px; }
.quickbar button{ border:none; }

/* proof numbers */
.stats{ background:var(--sand); border-bottom:1px solid var(--line); }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats div{ padding:40px 40px 40px 0; border-right:1px solid var(--line); }
.stats div:last-child{ border-right:none; }
.stats .n{
  font-family:var(--serif); font-size:clamp(34px,3.4vw,46px); font-weight:600;
  line-height:1; color:var(--ink); display:block; margin-bottom:12px;
}
.stats .t{ font-size:15.5px; color:var(--muted); line-height:1.5; display:block; max-width:24ch; }

/* ---------- two-column layout ------------------------------------------- */

.split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; }
.split h2{ font-size:clamp(32px,3.8vw,48px); }
.split .lead{ font-size:22px; line-height:1.6; margin:0 0 26px; color:var(--text); }
.split p{ color:var(--muted); }
.split p + p{ margin-top:20px; }

/* ---------- numbered items ---------------------------------------------- */

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 90px; }
.item{
  padding:30px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:76px 1fr; gap:26px;
}
.item .num{ font-size:14px; font-weight:600; color:var(--red); padding-top:9px; letter-spacing:.06em; }
.item .ico{ color:var(--red); padding-top:2px; }
.icon{ width:52px; height:52px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.icon-sm{ width:40px; height:40px; }
.item h3{ font-size:25px; margin:0 0 12px; }
.item p{ margin:0; color:var(--muted); font-size:17px; }
.section-dark .item{ border-color:var(--line-dark); }

/* ---------- process spine ------------------------------------------------ */

.steps{ border-top:1px solid var(--line-dark); }
.step{
  display:grid; grid-template-columns:104px 1fr 1.35fr; gap:36px;
  padding:26px 0; border-bottom:1px solid var(--line-dark); align-items:baseline;
  transition:background .22s ease;
}
.step:hover{ background:rgba(255,255,255,.03); }
.step .step-num{
  font-family:var(--serif); font-size:34px; font-weight:600; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.42);
  transition:color .22s ease, -webkit-text-stroke-color .22s ease;
}
.step:hover .step-num{ color:var(--red-light); -webkit-text-stroke-color:transparent; }
.step h3{ font-size:23px; }
.step p{ margin:0; font-size:16.5px; }

/* ---------- network ------------------------------------------------------ */

.countries{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px,3.8vw,46px); line-height:1.32;
  letter-spacing:-.015em; margin:0 0 26px; max-width:19ch;
}
.countries span{ color:#B4B0A9; }
.refs{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.refs li{ padding:20px 0; border-bottom:1px solid var(--line); }
.refs strong{ font-family:var(--serif); font-size:20px; font-weight:600; display:block; margin-bottom:5px; }
.refs em{ font-style:normal; color:var(--muted); font-size:16.5px; }

/* ---------- compact process flow ------------------------------------------ */

.flow{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line-dark);
}
.flow li{
  padding:22px 0 0; position:relative;
  font-family:var(--serif); font-size:20px; font-weight:600; color:#fff;
}
.flow li::before{
  content:""; position:absolute; top:-5px; left:0;
  width:9px; height:9px; border-radius:50%; background:var(--red-light);
}
.flow li b{
  display:block; font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.16em; color:rgba(255,255,255,.5); margin-bottom:6px;
}

@media (max-width:900px){
  .flow{ grid-template-columns:repeat(2,1fr); gap:18px 20px; }
}

/* ---------- network map (drawn in SVG, not generated) -------------------- */

.map{ margin-top:8px; }
.map svg{ width:100%; height:auto; display:block; }

/* real country outlines — Natural Earth 1:110m, public domain */
.map .land path{ fill:#22406E; stroke:#4062A0; stroke-width:.5; }
.map .arcs path{ fill:none; stroke:var(--red-light); stroke-width:1.5; stroke-opacity:.85; }
.map .dots circle{ fill:#fff; stroke:var(--ink); stroke-width:2; }
.map .halo{ fill:var(--red); opacity:.20; }
.map .hub{ fill:var(--red); stroke:#fff; stroke-width:2.5; }
.map text{ paint-order:stroke fill; stroke:var(--ink); stroke-width:5px; stroke-linejoin:round; }
.map .labels text{ font-family:var(--sans); font-size:15px; font-weight:600; fill:#fff; }
.map .hub-label{ font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:.16em; fill:#fff; }
.map .hub-sub{ font-family:var(--sans); font-size:15px; font-weight:500; fill:rgba(255,255,255,.72); }
/* ---------- industries --------------------------------------------------- */

.ind-list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.ind-list li{ border-bottom:1px solid var(--line); }
.ind-list a{
  display:flex; align-items:center; gap:30px; padding:26px 6px;
  text-decoration:none; color:inherit;
  font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); font-weight:600;
  transition:padding .22s ease, color .22s ease;
}
.ind-list a:hover{ padding-left:20px; color:var(--red); }
.ind-list .icon{ color:var(--red); flex:0 0 auto; opacity:.85; }
.ind-list .tag{
  margin-left:auto; font-family:var(--sans); font-size:15px;
  font-weight:400; color:var(--muted);
}

/* ---------- two doors ---------------------------------------------------- */

.doors{ display:grid; grid-template-columns:repeat(2,1fr); }
.door{ padding:76px 60px; }
.door-a{ background:var(--ink); color:#fff; }
.door-b{ background:var(--ink-soft); color:#fff; }
.door h3{ font-size:36px; margin:0 0 22px; }
.door > p{ color:var(--muted-dark); margin:0 0 34px; font-size:18px; }
.door ul{ margin:0 0 42px; padding:0; list-style:none; }
.door li{
  padding:13px 0 13px 26px; position:relative; font-size:17px;
  color:rgba(255,255,255,.82); border-bottom:1px solid rgba(255,255,255,.09);
}
.door li::before{ content:""; position:absolute; left:0; top:24px; width:10px; height:1px; background:var(--red-light); }

/* ---------- form ---------------------------------------------------------- */

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.field input, .field textarea{
  font-family:var(--sans); font-size:17px; color:var(--text);
  background:#fff; border:1px solid var(--line); padding:14px 16px; width:100%;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--ink); }
.form-note{ font-size:15px; color:var(--muted); margin:20px 0 0; }

.contact-aside h4{
  font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.contact-aside p{ margin:0 0 34px; font-size:18px; line-height:1.65; }
.contact-aside a{ color:var(--ink); }

/* ---------- footer -------------------------------------------------------- */

.site-footer{ background:var(--ink-deep); color:rgba(255,255,255,.62); padding:96px 0 0; font-size:16px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:56px; padding-bottom:70px; }
.site-footer h5{
  font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; margin:0 0 22px;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:12px; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.footer-logo{ height:40px; margin-bottom:24px; filter:brightness(0) invert(1); opacity:.88; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:26px 0 34px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14.5px;
}

/* ---------- service cards (icon tile overlapping the card) ------------------ */

.svc-cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:58px 28px; margin-top:46px;
}
.svc-card{
  position:relative; background:var(--paper);
  border:1px solid var(--line); padding:56px 30px 32px;
}
.svc-card .tile{
  position:absolute; top:-36px; left:34px;
  width:72px; height:72px; background:var(--red);
  display:flex; align-items:center; justify-content:center;
}
.svc-card .tile .icon{ width:38px; height:38px; color:#fff; stroke-width:1.5; }
.svc-card h3{ font-size:23px; margin:0 0 12px; }
.svc-card p{ margin:0; color:var(--muted); font-size:16.5px; }
.svc-card .n{
  position:absolute; top:22px; right:26px;
  font-family:var(--serif); font-size:20px; font-weight:600; color:var(--line);
}

/* ---------- inner-page hero ------------------------------------------------ */

.hero-page{ padding:96px 0 100px; }
.hero-page h1{ max-width:20ch; }
.hero-page .hero-lead{ max-width:64ch; margin-bottom:0; }

/* ---------- checklist ------------------------------------------------------ */

.checklist{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.checklist li{
  padding:18px 0 18px 40px; border-bottom:1px solid var(--line);
  position:relative; color:var(--muted); font-size:17px;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:33px;
  width:18px; height:8px; border-left:1.5px solid var(--red);
  border-bottom:1.5px solid var(--red); transform:rotate(-45deg);
}
.checklist b{ color:var(--text); font-weight:600; }

/* ---------- industry cards -------------------------------------------------- */

.ind-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 80px; }
.ind-card{
  display:grid; grid-template-columns:70px 1fr; gap:24px;
  padding:34px 0; border-top:1px solid var(--line);
}
.ind-card .ico{ color:var(--red); }
.ind-card h3{ font-size:26px; margin:0 0 14px; }
.ind-card p{ margin:0; color:var(--muted); font-size:17px; }
.ind-tags{
  margin-top:16px !important; font-size:14.5px !important;
  color:var(--red) !important; letter-spacing:.01em;
}

/* ---------- founder timeline ------------------------------------------------ */

.timeline{ margin:0 0 30px; padding:0; list-style:none; border-top:1px solid var(--line); }
.timeline li{
  display:grid; grid-template-columns:130px 1fr; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.timeline b{ font-family:var(--serif); font-size:19px; font-weight:600; }
.timeline span{ color:var(--muted); font-size:16.5px; }

/* ---------- closing call to action ------------------------------------------ */

.cta-band{ display:flex; align-items:center; gap:60px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(30px,3.4vw,42px); max-width:20ch; }
.cta-band p{ margin:18px 0 0; max-width:56ch; }
.cta-band .btn{ margin-left:auto; flex:0 0 auto; }

/* ---------- embedded map ----------------------------------------------------- */

.map-embed{ border:1px solid var(--line); background:var(--paper); }
.map-embed iframe{ width:100%; height:420px; border:0; display:block; filter:grayscale(.35); }

/* ---------- demo-only placeholder ------------------------------------------ */

/* photo slot — marks exactly where a real photograph must be dropped in */
.photo-slot{
  background:var(--sand); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:40px; aspect-ratio:4/5; text-align:center;
}
.photo-slot svg{
  width:52px; height:52px; fill:none; stroke:var(--muted);
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.7;
}
.photo-slot b{
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.photo-slot span{ font-size:15px; color:var(--muted); max-width:26ch; line-height:1.5; }

/* ---------- responsive ------------------------------------------------------ */

/* contact block: the form needs the wide column, not the address */
.split.contact-split{ grid-template-columns:1.5fr .7fr; }

@media (max-width:1080px){
  .split{ grid-template-columns:1fr; gap:44px; }
  .svc-cards{ grid-template-columns:repeat(2,1fr); }
  .ind-cards{ grid-template-columns:1fr; gap:0; }
  .cta-band{ gap:32px; }
  .cta-band .btn{ margin-left:0; }
  .split.contact-split{ grid-template-columns:1fr; }
  .stats .wrap{ grid-template-columns:repeat(2,1fr); }
  .stats div:nth-child(2){ border-right:none; }
  .quickbar form{ flex-wrap:wrap; }
  .quickbar label{ width:100%; border-right:none; border-bottom:1px solid var(--line); padding:16px 22px; }
  .quickbar button{ width:100%; justify-content:center; }
  .grid-2{ grid-template-columns:1fr; gap:0; }
  .step{ grid-template-columns:96px 1fr; gap:28px; }
  .step p{ grid-column:2; margin-top:10px; }
  .doors{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  body{ font-size:17px; }
  /* The hero is a two-column grid on desktop; the second column holds the
     absolutely-positioned globe, so on a phone it was reserving half the
     width for nothing and squeezing the headline into ~140px. */
  .hero-inner{ grid-template-columns:1fr; gap:0; }
  .hero h1{ font-size:clamp(34px,8.4vw,44px); max-width:none; }
  .hero-lead{ font-size:17px; max-width:none; }
  .hero .eyebrow{ font-size:11.5px; letter-spacing:.16em; gap:12px; }
  .hero .eyebrow::before{ width:28px; background-size:8px 6px, 20px 1px; }
  .hero-art{ width:150%; right:-45%; top:58%; opacity:.3; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  /* service cards were left at three columns on phones — the tile, the title
     and the paragraph all need the full width to stay legible */
  .svc-cards{ grid-template-columns:1fr; gap:52px 0; margin-top:52px; }
  .svc-card{ padding:52px 24px 30px; }
  .svc-card .tile{ width:64px; height:64px; top:-32px; left:24px; }
  .wrap{ padding:0 24px; }
  .utility{ font-size:13px; }
  .utility .wrap{ height:auto; padding-top:10px; padding-bottom:10px; gap:14px; flex-wrap:wrap; }
  .utility .u-tag{ display:none; }
  .utility .u-right{ margin-left:0; gap:14px 18px; flex-wrap:wrap; max-width:100%; }
  .utility a{ font-size:13px; word-break:break-word; }
  .stats .wrap{ grid-template-columns:1fr; }
  .stats div{ border-right:none; border-bottom:1px solid var(--line); padding:26px 0; }
  .stats div:last-child{ border-bottom:none; }
  .quickbar{ margin-top:44px; }
  .nav{
    display:none; position:absolute; top:96px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:10px 24px 22px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:16px 0; border-bottom:1px solid var(--line); font-size:17px; }
  .nav-toggle{ display:block; }
  .header-tools .btn{ display:none; }
  .header-inner{ gap:16px; height:82px; }
  .logo img{ height:38px; }
  .section{ padding:68px 0; }
  .section-head{ margin-bottom:48px; }
  .hero{ padding:96px 0 88px; }
  .factband div{ flex:1 1 100%; border-right:none; border-bottom:1px solid var(--line); padding:22px 0; }
  .factband div:last-child{ border-bottom:none; }
  .form-grid{ grid-template-columns:1fr; }
  .door{ padding:60px 24px; }
  .hero-page{ padding:72px 0 76px; }
  .ind-card, .item{ grid-template-columns:56px 1fr; gap:20px; }
  .icon{ width:42px; height:42px; }
  .timeline li{ grid-template-columns:1fr; gap:4px; padding:16px 0; }
  .map-embed iframe{ height:320px; }
  .map{ margin-top:0; }
  .map .labels text{ font-size:20px; }        /* svg scales down; keep labels readable */
  .map .hub-label{ font-size:22px; }
  .cta-band h2{ font-size:26px; }
  .pullquote .wrap{ padding-top:64px; padding-bottom:64px; }
  .quickbar{ margin-top:-24px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
}


/* ==========================================================================
   QUALITY PASS
   1. scroll reveal   2. interactive states   3. surface depth   4. detail
   ========================================================================== */

/* --- 1. scroll reveal: content rises into place, once, subtly ------------- */

@media (prefers-reduced-motion:no-preference){
  /* scoped to html.reveal-on, which JS adds only once it is running —
     if the script fails or is blocked, every element stays visible */
  html.reveal-on .reveal{
    opacity:0; transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),
               transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  html.reveal-on .reveal.is-in{ opacity:1; transform:none; }
  .reveal-d1{ transition-delay:.08s }
  .reveal-d2{ transition-delay:.16s }
  .reveal-d3{ transition-delay:.24s }
}

/* --- 2. interactive states ------------------------------------------------ */

.svc-card{
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
.svc-card:hover{
  transform:translateY(-6px);
  border-color:#D3CABA;
  box-shadow:0 26px 50px -28px rgba(19,26,40,.35);
}
.svc-card .tile{ transition:transform .35s cubic-bezier(.34,1.4,.64,1), background .3s ease; }
.svc-card:hover .tile{ transform:scale(1.06) rotate(-2deg); background:var(--red-dark); }

.btn{ position:relative; overflow:hidden; }
.btn-red::after{
  content:""; position:absolute; inset:0; background:#fff; opacity:0;
  transition:opacity .3s ease;
}
.btn-red:hover::after{ opacity:.08; }

.refs li, .ind-card, .item{ transition:background .3s ease; }
.refs li:hover{ background:linear-gradient(90deg, rgba(176,58,43,.05), transparent 60%); }

.map .dots circle{ transition:r .3s ease; }
.map:hover .dots circle{ r:5; }

/* --- map: routes draw outward from Izmir, cities land as each arrives ----- */
.map .arcs path{ transition:stroke-dashoffset 1.1s cubic-bezier(.33,.7,.4,1); }
.map .dots circle, .map .labels text{
  transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.3,.64,1);
  transform-box:fill-box; transform-origin:center;
}

/* --- 3. surface depth ----------------------------------------------------- */

.hero::before{                     /* fine grain stops the flat-gradient look */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.section-dark{ position:relative; }
.section-dark::before{           /* hairline light at the top of dark bands */
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 22%, rgba(255,255,255,.16) 78%, transparent);
}

/* --- 4. editorial pull quote --------------------------------------------- */

.pullquote{
  background:var(--paper);
  border-top:1px solid var(--line);
}
.pullquote .wrap{ max-width:1000px; text-align:center; padding-top:78px; padding-bottom:78px; }
.pullquote blockquote{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(28px,3.6vw,46px); line-height:1.24; letter-spacing:-.02em;
  color:var(--text); text-wrap:balance;
}
.pullquote blockquote em{ font-style:italic; color:var(--red); }
.pullquote cite{
  display:block; margin-top:30px; font-family:var(--sans); font-style:normal;
  font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.pullquote .rule{
  width:52px; height:2px; background:var(--red); margin:0 auto 34px;
}

/* --- typographic detail --------------------------------------------------- */

h1{ font-variation-settings:"opsz" 40; }
.hero h1, .section-head h2{ letter-spacing:-.022em; }
::selection{ background:var(--red); color:#fff; }


/* ---------- accessibility ---------------------------------------------------
   Visible keyboard focus everywhere, a skip link, and a larger tap target on
   touch devices. Mouse users see nothing change.                            */

:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}
.section-dark :focus-visible, .hero :focus-visible, .door :focus-visible,
.utility :focus-visible, .site-footer :focus-visible{
  outline-color:var(--red-light);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:14px 22px;
  font-size:15px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }

@media (hover:none){
  .nav a{ padding:14px 0; }
  .utility a{ padding:6px 0; }
}

/* honour reduced-motion for every transition we added */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}


/* ==========================================================================
   MOBILE POLISH
   Reviewed at 375px. Everything here exists because it was wrong on a phone.
   ========================================================================== */

@media (max-width:900px){

  /* --- the world map -----------------------------------------------------
     The SVG is 1440 units wide. Scaled to a 375px screen the city labels
     render around 4px — unreadable. Instead the map keeps a legible minimum
     width and scrolls sideways inside its own container, which is the normal
     pattern for wide diagrams on phones. */
  /* No sideways scrolling. JS crops the viewBox to the region that carries
     the routes, so the whole map fits and the labels stay readable. */
  .map{ margin-inline:-6px; }
  .map .labels text{ font-size:20px; }
  .map .hub-label{ font-size:22px; }
  .map .dots circle{ r:5; }
  .map-hint{ display:none; }

  /* --- calls to action --------------------------------------------------- */
  .cta-band{ display:block; }
  .cta-band .btn{ width:100%; justify-content:center; margin-top:28px; }
  .door .btn, .btn-outline{ width:100%; justify-content:center; }
  .quickbar .btn{ width:100%; justify-content:center; }

  /* --- process steps ------------------------------------------------------ */
  .step{ grid-template-columns:1fr; gap:6px; padding:22px 0; }
  .step .step-num{ font-size:26px; }
  .step h3{ font-size:21px; }
  .step p{ grid-column:1; margin-top:6px; }

  /* --- reading comfort ---------------------------------------------------- */
  .section-head h2{ font-size:clamp(26px,7vw,34px); }
  .section-head p:not(.eyebrow){ font-size:17px; margin-top:18px; }
  .split .lead{ font-size:19px; }
  .pullquote blockquote{ font-size:clamp(22px,6vw,28px); }
  .pullquote cite{ font-size:12px; letter-spacing:.14em; }
  .eyebrow{ font-size:11.5px; letter-spacing:.16em; }
  .ind-list a{ font-size:19px; gap:18px; padding:20px 4px; }
  .ind-list .tag{ display:none; }        /* too long to sit beside the title */
  .ind-card h3, .svc-card h3{ font-size:21px; }
  .refs strong{ font-size:18px; }
  .contact-aside p{ font-size:16.5px; margin-bottom:26px; }
  .countries{ font-size:clamp(24px,6.5vw,30px); }

  /* --- tap targets -------------------------------------------------------- */
  .btn{ padding:17px 26px; }
  .field input, .field textarea{ font-size:16px; }   /* 16px stops iOS zooming in */
  .footer-grid a, .nav a{ display:inline-block; padding-block:4px; }
}

@media (max-width:420px){
  .wrap{ padding:0 20px; }
  .map{ margin-inline:-20px; padding-inline:20px; }
  .hero h1{ font-size:32px; }
  .door{ padding:52px 20px; }
  .svc-card{ padding:48px 20px 28px; }
}

/* hint that the map can be swiped — desktop never sees it */
.map-hint{
  display:none; margin:12px 0 0;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}


/* ==========================================================================
   MOBILE, SECOND PASS — measured on a 375px screen
   ========================================================================== */

@media (max-width:900px){

  /* --- tighter reading rhythm: the desktop leading is too airy on a phone -- */
  body{ line-height:1.6; }
  .section{ padding:60px 0; }
  .section-head{ margin-bottom:34px; }
  .hero-lead{ line-height:1.5; margin-bottom:28px; }
  .split p + p{ margin-top:14px; }
  .split{ gap:30px; }
  .item{ padding:22px 0; }
  .ind-card{ padding:26px 0; }
  .refs li{ padding:16px 0; }
  .checklist li{ padding:14px 0 14px 34px; }
  .checklist li::before{ top:24px; }
  .timeline li{ padding:12px 0; }
  .svc-cards{ gap:46px 0; margin-top:44px; }

  /* --- utility bar: one line, no wrapping ---------------------------------- */
  .utility .wrap{ height:44px; padding-top:0; padding-bottom:0; gap:16px; flex-wrap:nowrap; }
  .utility a[href^="mailto"]{ display:none; }     /* it is in the footer and on contact */
  .utility .u-right{ width:100%; justify-content:space-between; gap:10px; flex-wrap:nowrap; }
  .utility a{ font-size:13.5px; }

  /* --- hero: keep the globe away from the words --------------------------- */
  .hero{ padding:56px 0 64px; }
  .hero-art{ width:150%; right:-56%; top:74%; opacity:.22; }
  .hero-actions{ gap:10px; }

  /* --- how we work: a vertical rail, not a broken two-column grid ---------- */
  .flow{
    display:block; border-top:none;
    position:relative; padding-left:26px; margin-top:4px;
  }
  .flow::before{
    content:""; position:absolute; left:4px; top:10px; bottom:10px;
    width:1px; background:var(--line-dark);
  }
  .flow li{
    padding:0 0 22px; font-size:19px; position:relative;
    display:flex; align-items:baseline; gap:12px;
  }
  .flow li:last-child{ padding-bottom:0; }
  .flow li::before{
    top:9px; left:-26px; width:9px; height:9px;
  }
  .flow li b{
    display:inline; margin:0; font-size:12px; letter-spacing:.14em;
    color:rgba(255,255,255,.45); min-width:22px;
  }
}


/* ==========================================================================
   MOBILE DENSITY PASS
   The page was 16 screens tall. Spacing tokens were already correct, so the
   savings come from content that stacks: the two audience panels, the footer,
   and the industry rows.
   ========================================================================== */

@media (max-width:900px){

  .section{ padding:48px 0; }

  /* --- the two audience panels ------------------------------------------
     817px each on a phone. The bullet lists repeat what the Services and
     For Suppliers pages already say in full, so on mobile the panels become
     a heading, a sentence and the button. */
  .door{ padding:44px 24px; }
  .door ul{ display:none; }
  .door h3{ font-size:25px; margin-bottom:14px; }
  .door > p{ margin-bottom:24px; font-size:16.5px; }

  /* --- industry rows: one line each rather than two -------------------- */
  .ind-list a{ font-size:17px; padding:17px 4px; gap:16px; }
  .ind-list .icon-sm{ width:30px; height:30px; }

  /* --- cards and form: gaps were slightly loose ------------------------ */
  .svc-cards{ gap:34px 0; margin-top:36px; }
  .svc-card{ padding:46px 22px 26px; }
  .form-grid{ gap:18px; }
  .field textarea{ min-height:130px; }
  .field label{ font-size:11.5px; }

  /* --- footer: two columns instead of one long stack ------------------- */
  .site-footer{ padding-top:56px; font-size:15px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px 24px; padding-bottom:40px; }
  .footer-grid > div:first-child{ grid-column:1 / -1; }
  .site-footer h5{ margin-bottom:12px; }
  .site-footer li{ margin-bottom:7px; }
  .footer-logo{ height:32px; margin-bottom:14px; }
  .footer-bottom{ padding:18px 0 24px; font-size:13px; }

  /* --- misc tightening -------------------------------------------------- */
  .pullquote .wrap{ padding-top:48px; padding-bottom:48px; }
  .quickbar label{ padding:14px 20px; }
  .quickbar input{ padding:16px 20px; }
  .photo-slot{ padding:30px; }
}


/* ==========================================================================
   MOBILE: stack the icon above the text
   A 70px icon column costs ~30% of a 327px screen, forcing five-word lines
   and breaking headings across two lines. On a phone the icon goes above.
   ========================================================================== */

@media (max-width:900px){
  .item, .ind-card{ display:block; }
  .item > .ico, .ind-card > .ico{ display:block; margin-bottom:14px; }
  .item > .num{ display:block; margin-bottom:10px; padding-top:0; }
  .item h3, .ind-card h3{ margin-bottom:10px; }
  .ind-card .ind-tags{ margin-top:12px !important; }
  .icon{ width:44px; height:44px; }
}


/* --------------------------------------------------------------------------
   Two dark sections in a row read as one band with a 200px hole in the middle.
   The second one takes a slightly deeper tone and less top padding, so the
   boundary is visible and the gap is not paid for twice.
   -------------------------------------------------------------------------- */
.section-dark + .section-dark{
  background:#132340;
  padding-top:72px;
}
@media (max-width:900px){
  .section-dark + .section-dark{ padding-top:40px; }
}