/* Oleg Shakov International Consulting — shared styles */

/* Self-hosted webfonts (SIL Open Font License). Mirrors the Google Fonts
   css2 output for Archivo 400/500/600/700 + Libre Baskerville 400/700,
   served same-origin so they no longer block render on a third party. */

@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Libre Baskerville'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/librebaskerville-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Libre Baskerville'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/librebaskerville-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Libre Baskerville'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/librebaskerville-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Libre Baskerville'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/librebaskerville-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  --osic-bg:#F4F4F4; --osic-navBg:rgba(244,244,244,.97); --osic-ink:#1A1F3D; --osic-muted:#5B6480;
  --osic-accent:#2D6CDF; --osic-accent2:#BC432B; --osic-accent2Hover:#9E3520; --osic-accentHover:#1E55C0; --osic-accentText:#FFFFFF;
  --osic-dark:#1B2150; --osic-darkText:#EAEEF7; --osic-darkMuted:#9AA6CC; --osic-darkFaint:#8A93B6; --osic-darkAccent:#EE8A6E;
  --osic-aboutBg:#F4F4F4; --osic-border:rgba(26,31,61,.12);
  --osic-marker:#E25C3D; --osic-markerPulse:#F0876B; --osic-tipName:#BC432B; --osic-tipBg:#FFFFFF; --osic-tipText:#3A4263;
  --osic-ctaSoft:#9DBEFF; --osic-chipBorder:rgba(226,92,61,.34); --osic-dot:rgba(120,150,220,0.34);
}

* { box-sizing:border-box; }
html, body { margin:0; }

body {
  font-family:Archivo,system-ui,sans-serif;
  background:var(--osic-bg);
  color:var(--osic-ink);
  overflow-x:hidden;
}

.sans { font-family:Archivo,system-ui,sans-serif; }
.serif { font-family:'Libre Baskerville',Georgia,serif; }

a { color:inherit; }

@keyframes osicPulse {
  0%   { transform:translate(-50%,-50%) scale(1);   opacity:.65; }
  70%  { transform:translate(-50%,-50%) scale(2.8); opacity:0; }
  100% { opacity:0; }
}
@keyframes osicDotPulse {
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.14); }
}

/* --- brand lockup: colonnade mark | divider | OSIC + full name --- */
.brand-lockup { display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand-lockup img { height:44px; width:auto; display:block; }
.brand-divider { width:1px; align-self:stretch; background:rgba(26,31,61,.2); }
.brand-text { display:flex; flex-direction:column; gap:4px; }
.brand-osic {
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:22px; line-height:1; letter-spacing:1px; color:var(--osic-ink);
}
.brand-name {
  font-family:Archivo,system-ui,sans-serif; text-transform:uppercase; white-space:nowrap;
  font-size:8.5px; font-weight:600; letter-spacing:2.1px; color:var(--osic-muted);
}

/* keep the lockup + nav on one line in the narrow-desktop band */
@media (max-width:900px) and (min-width:761px) {
  .brand-lockup { gap:10px; }
  .brand-lockup img { height:38px; }
  .brand-osic { font-size:18px; }
  .brand-name { font-size:7px; letter-spacing:1.6px; }
}

/* --- hover behaviours (replace the wireframe's custom style-hover attribute) --- */
.h-logo:hover      { opacity:.7; }
.h-ink:hover       { color:var(--osic-ink); }
.h-coral:hover     { background:var(--osic-accent2Hover); }
.h-underline:hover { border-color:var(--osic-accent); }
.h-dark:hover      { color:var(--osic-darkText); }

/* --- contact form fields --- */
.fld {
  width:100%; font-family:inherit; font-size:15px; color:#1A1F3D; background:#fff;
  border:1px solid rgba(26,31,61,.18); border-radius:9px; padding:13px 14px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.fld:focus { border-color:var(--osic-accent); box-shadow:0 0 0 3px rgba(45,108,223,.15); }
.fld::placeholder { color:#9aa1b4; }
.fld--error { border-color:var(--osic-accent2); }
.field-error { display:none; font-size:12.5px; color:var(--osic-accent2); margin-top:6px; }
.field-error.show { display:block; }

.hero-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center; z-index:0;
}

/* --- map (home) --- */
#osic-map { position:relative; width:100%; aspect-ratio:288/118; margin-top:44px; }
#osic-map canvas { position:absolute; inset:0; width:100%; height:100%; }
.map-marker {
  position:absolute; transform:translate(-50%,-50%); background:transparent; border:0;
  padding:14px; cursor:pointer;
}
.map-marker .pulse {
  position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;
  background:var(--osic-markerPulse); animation:osicPulse 2.4s ease-out infinite;
}
.map-marker .dot {
  position:relative; display:block; width:11px; height:11px; border-radius:50%;
  background:var(--osic-marker);
  box-shadow:0 0 0 4px var(--osic-markerPulse), 0 1px 4px rgba(0,0,0,.4);
  animation:osicDotPulse 2.4s ease-in-out infinite;
}
.map-marker .label {
  position:absolute; left:50%; top:calc(50% + 12px); transform:translateX(-50%);
  white-space:nowrap; font-size:11px; font-weight:600; letter-spacing:.2px;
  color:#BAC6E6; text-shadow:0 1px 3px rgba(0,0,0,.5); pointer-events:none;
  transition:color .15s ease;
}
.map-marker .label--above { top:auto; bottom:calc(50% + 12px); }
/* --- map: accessible country picker (drives the same detail as the pins) --- */
.map-legend { display:none; }
.map-detail { display:none; }

@media (max-width:760px) {
  /* pins cluster too tightly at phone width to be reliable touch targets
     (Colombia/Ecuador sit ~13px apart), so the chip list takes over there */
  .map-legend {
    display:flex; flex-wrap:wrap; gap:8px;
    list-style:none; margin:20px 0 0; padding:0;
  }
  .map-legend button {
    font-family:inherit; font-size:13px; font-weight:500; line-height:1;
    min-height:40px; padding:12px 14px; border-radius:22px; cursor:pointer;
    color:var(--osic-darkText); background:transparent;
    border:1px solid rgba(255,255,255,.22);
  }
  .map-legend button[aria-pressed="true"] {
    background:var(--osic-darkAccent); color:var(--osic-dark);
    border-color:var(--osic-darkAccent); font-weight:600;
  }
  .map-detail {
    display:block; margin:18px 0 0; padding:16px 18px; border-radius:10px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  }
  .map-detail:empty { display:none; }
  .map-detail .d-name {
    font-family:'Libre Baskerville',Georgia,serif;
    font-size:18px; font-weight:600; color:var(--osic-darkAccent);
  }
  .map-detail .d-text { font-size:13.5px; line-height:1.55; margin-top:7px; color:var(--osic-darkText); }
  .map-tip { display:none !important; }
}

.map-tip {
  position:absolute; display:none; width:268px; background:var(--osic-tipBg); color:var(--osic-tipText);
  border-radius:10px; padding:16px 18px; box-shadow:0 14px 40px rgba(0,0,0,.4); pointer-events:none; z-index:60;
}
/* --- taste pass: accessibility + premium micro-detail (trust-first, low motion) --- */

/* smooth in-page scrolling, with the sticky header accounted for */
html { scroll-behavior:smooth; }
[id] { scroll-margin-top:92px; }
/* full-bleed navy map should land flush under the (opaque) sticky header */
#map { scroll-margin-top:70px; }

/* visible keyboard focus on every interactive element (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:2px solid var(--osic-accent); outline-offset:3px; border-radius:4px;
}

/* smooth interactive feedback + a physical pressed state */
a, button { transition:background-color .18s ease, color .18s ease, opacity .18s ease, border-color .18s ease, transform .12s ease; }
.h-coral:active, button[type="submit"]:active, .h-underline:active { transform:translateY(1px); }

/* typographic polish — kill orphans and ragged wraps */
h1, h2, h3, blockquote { text-wrap:balance; }
p { text-wrap:pretty; }

/* skip-to-content link for keyboard / screen-reader users */
.skip-link {
  position:absolute; left:12px; top:-52px; z-index:200;
  background:var(--osic-ink); color:#fff; padding:10px 16px; border-radius:8px;
  font-size:14px; font-weight:600; text-decoration:none; transition:top .15s ease;
}
.skip-link:focus { top:12px; }

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* inline country list on light backgrounds (e.g. About page) */
.country-inline { font-size:16px; line-height:2.1; color:var(--osic-ink); }
.country-inline span:not(.sep) { white-space:nowrap; }
.country-inline .sep { color:rgba(26,31,61,.28); margin:0 3px; user-select:none; }

/* --- disclaimer note under the map (popover; never reflows the section) --- */
.map-note { position:relative; display:inline-block; margin:30px 0 0; text-align:left; }
.map-note summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--osic-darkMuted); transition:color .15s ease;
}
.map-note summary::-webkit-details-marker { display:none; }
.map-note summary:hover, .map-note[open] summary { color:var(--osic-darkText); }
.map-note .i {
  width:17px; height:17px; flex:none; border:1px solid currentColor; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-style:italic; font-family:Georgia,serif; line-height:1;
}
.map-note p {
  position:absolute; bottom:calc(100% + 14px); left:0; z-index:70; margin:0;
  width:460px; max-width:86vw;
  background:var(--osic-tipBg); color:var(--osic-tipText);
  border-radius:12px; padding:16px 18px; box-shadow:0 18px 50px rgba(0,0,0,.4);
  font-size:12.5px; line-height:1.65;
}
.map-note p::after { /* caret pointing down to the (i) trigger */
  content:""; position:absolute; top:100%; left:22px;
  border:8px solid transparent; border-top-color:var(--osic-tipBg);
}

/* --- responsive --- */
@media (max-width:760px) {
  /* header: logo on its own row, nav as a tidy full-width second row */
  .osic-header { padding:14px 22px !important; flex-wrap:wrap; gap:10px; }

  /* brand lockup: compact so the full name fits small screens */
  .brand-lockup { gap:10px; }
  .brand-lockup img { height:34px; }
  .brand-osic { font-size:17px; }
  .brand-name { font-size:7px; letter-spacing:1.6px; }
  .osic-nav { width:100%; justify-content:space-between; gap:10px !important; flex-wrap:nowrap; }
  .osic-nav a:not(.h-coral) { font-size:13px !important; }
  .osic-nav .h-coral { padding:8px 13px !important; font-size:12px !important; }

  .hpad { padding-left:22px !important; padding-right:22px !important; }

  /* stack multi-column layouts and tighten the now-vertical gaps */
  .grid-3, .grid-2, .grid-sidebar, .grid-rows, .grid-hero { grid-template-columns:1fr !important; }
  .grid-2, .grid-sidebar { gap:28px !important; }
  .grid-rows { gap:14px !important; padding-top:26px !important; padding-bottom:26px !important; }
  .grid-3 > div { border-right:0 !important; }
  .grid-sidebar .portrait { max-width:220px !important; }

  /* trim oversized section vertical padding (the hero is handled separately) */
  main > section.hpad:not(#top) { padding-top:54px !important; padding-bottom:54px !important; }

  /* typography */
  h1.serif { font-size:33px !important; }
  h2.serif { font-size:27px !important; }
  blockquote.serif { font-size:24px !important; line-height:1.4 !important; }
  [style*="letter-spacing:2.5px"] { font-size:11.5px !important; letter-spacing:1.5px !important; }

  /* hero: offset for the taller mobile header + a vertical scrim so full-width text stays legible */
  #top.hero-bg { min-height:calc(100svh - 100px) !important; }
  #top.hero-bg .hero-img { object-position:32% center !important; }
  #top.hero-bg > div[aria-hidden] { background:linear-gradient(180deg,rgba(244,244,244,.9) 0%,rgba(244,244,244,.74) 55%,rgba(244,244,244,.56) 100%) !important; }

  /* experience map: taller frame, bigger touch targets, on-screen tooltip; labels reveal on tap */
  #osic-map { aspect-ratio:4/3 !important; }
  .map-marker { padding:16px !important; }
  .map-marker .label { opacity:0; transition:opacity .15s ease; font-size:12px; }
  .map-marker.is-active .label { opacity:1; }
  .map-tip { width:auto !important; max-width:80vw !important; }

  /* contact form: stack the name fields, trim card padding, prevent iOS focus-zoom */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
  [style*="padding:34px 34px 38px"] { padding:22px 20px 26px !important; }
  .fld { font-size:16px !important; }

  /* footer: stack the mark above the links and scale it down */
  footer img { height:64px !important; }
  footer > div:first-child { flex-direction:column; align-items:flex-start; gap:26px !important; }
}