/* ============================================================ */
/* ZED i FM — DESIGN SYSTEM                                      */
/* Brand tokens, typography, components, motion, signature       */
/* skyline element. This is the hand-written layer; the utility  */
/* layers below (base + responsive) replace the Tailwind CDN.    */
/* ============================================================ */

:root{
  --cream: #F4EEDD;
  --cream-2: #ECE3CC;
  --navy: #16223C;
  --navy-2: #0D1626;
  --orange: #E1712E;
  --orange-dark: #C25A1E;
  --green: #2F4A3C;
  --ink: #24304A;
  --ink-soft: #5B6478;
  --white: #FFFFFF;
}

*{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

html, body{ margin:0; padding:0; }

body{
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.5;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; cursor:pointer; background:none; border:none; padding:0; }
img, svg{ display:block; max-width:100%; }

.font-display{ font-family: 'Big Shoulders Display', sans-serif; letter-spacing: 0.01em; }
.font-mono{ font-family: 'IBM Plex Mono', monospace; }

#siteNav,
#siteNav.scrolled,
#siteNav.transparent,
#siteNav[class] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #e5e0d8 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

#mobileMenu {
  background-color: #ffffff !important;
  border-top: 1px solid #e5e0d8 !important;
}

/* the brand's recurring lowercase italic "i" mark, used as a section eyebrow / bullet across the page */
.i-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9em; height:1.9em; border-radius:9999px;
  background: var(--orange); color: var(--white);
  font-style: italic; font-weight: 700; font-family: 'Big Shoulders Display', sans-serif;
  flex-shrink:0;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:0.6rem;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem;
  font-weight: 600; color: var(--orange-dark);
}

.btn-primary{
  background: var(--orange); color:#fff; font-weight:600;
  padding: 0.85rem 1.9rem; border-radius: 9999px; display:inline-flex; align-items:center; gap:0.5rem;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 24px -8px rgba(225,113,46,0.55);
}
.btn-primary:hover{ background: var(--orange-dark); transform: translateY(-2px); }

.btn-ghost{
  border: 1.5px solid var(--navy); color: var(--navy); font-weight:600;
  padding: 0.85rem 1.9rem; border-radius: 9999px; display:inline-flex; align-items:center; gap:0.5rem;
  transition: all .25s ease;
}
.btn-ghost:hover{ background: var(--navy); color: #fff; }

/* skyline signature element - built from data, reused in hero + credentials */
.skyline-bar{
  transform-origin: bottom;
  animation: rise 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{ from{ transform: scaleY(0);} to { transform: scaleY(1);} }

.card{
  background: var(--white);
  border: 1px solid rgba(22,34,60,0.08);
  border-radius: 1.1rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(22,34,60,0.25);
  border-color: rgba(225,113,46,0.35);
}

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

.nav-link{
  position: relative; font-weight: 500; color: var(--navy); font-size: 0.92rem;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0%;
  background: var(--orange); transition: width .25s ease;
}
.nav-link:hover::after{ width:100%; }

.pin{ animation: bob 3s ease-in-out infinite; }
.pin:nth-child(even){ animation-delay: .6s; }
.pin:nth-child(3n){ animation-delay: 1.1s; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }

.timeline-dot::before{
  content:''; position:absolute; left:-2.05rem; top: 0.35rem; width:0.9rem; height:0.9rem; border-radius:9999px;
  background: var(--orange); box-shadow: 0 0 0 5px rgba(225,113,46,0.18);
}

.counter{ font-variant-numeric: tabular-nums; }

::selection{ background: var(--orange); color:#fff; }

/* ============================================================ */
/* UTILITY LAYER — plain CSS equivalents of the utility classes  */
/* used across zedifm.html. No external framework required.     */
/* ============================================================ */

*, *::before, *::after{ box-sizing: border-box; }
body{ margin:0; }
.antialiased{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.block{ display:block; }
.hidden{ display:none; }
.flex{ display:flex; }
.grid{ display:grid; }
.inline-flex{ display:inline-flex; }
.relative{ position:relative; }
.absolute{ position:absolute; }
.fixed{ position:fixed; }
.inset-0{ top:0; right:0; bottom:0; left:0; }
.top-0{ top:0; }
.bottom-0{ bottom:0; }
.left-0{ left:0; }
.right-0{ right:0; }
.left-1\/2{ left:50%; }
.-translate-x-1\/2{ transform:translateX(-50%); }
.z-10{ z-index:10; }
.z-50{ z-index:50; }

.flex-col{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.items-end{ align-items:flex-end; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }
.justify-end{ justify-content:flex-end; }
.grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.gap-1\.5{ gap:0.375rem; }
.gap-2{ gap:0.5rem; }
.gap-3{ gap:0.75rem; }
.gap-4{ gap:1rem; }
.gap-5{ gap:1.25rem; }
.gap-6{ gap:1.5rem; }
.gap-8{ gap:2rem; }
.gap-12{ gap:3rem; }
.gap-14{ gap:3.5rem; }
.gap-x-10{ column-gap:2.5rem; }
.gap-x-12{ column-gap:3rem; }
.gap-x-16{ column-gap:4rem; }
.gap-y-6{ row-gap:1.5rem; }
.gap-y-8{ row-gap:2rem; }
.gap-y-14{ row-gap:3.5rem; }

.p-5{ padding:1.25rem; }
.p-6{ padding:1.5rem; }
.p-7{ padding:1.75rem; }
.p-8{ padding:2rem; }
.p-10{ padding:2.5rem; }
.px-5{ padding-left:1.25rem; padding-right:1.25rem; }
.px-6{ padding-left:1.5rem; padding-right:1.5rem; }
.px-8{ padding-left:2rem; padding-right:2rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }
.py-6{ padding-top:1.5rem; padding-bottom:1.5rem; }
.py-20{ padding-top:5rem; padding-bottom:5rem; }
.pt-8{ padding-top:2rem; }
.pt-20{ padding-top:5rem; }
.pt-36{ padding-top:9rem; }
.pb-4{ padding-bottom:1rem; }
.pb-10{ padding-bottom:2.5rem; }
.pb-16{ padding-bottom:4rem; }
.pl-8{ padding-left:2rem; }

.mt-1{ margin-top:0.25rem; }
.mt-2{ margin-top:0.5rem; }
.mt-3{ margin-top:0.75rem; }
.mt-4{ margin-top:1rem; }
.mt-5{ margin-top:1.25rem; }
.mt-6{ margin-top:1.5rem; }
.mt-8{ margin-top:2rem; }
.mt-14{ margin-top:3.5rem; }
.mt-16{ margin-top:4rem; }
.mt-20{ margin-top:5rem; }
.mb-4{ margin-bottom:1rem; }
.mx-auto{ margin-left:auto; margin-right:auto; }

.space-y-2 > * + *{ margin-top:0.5rem; }
.space-y-3 > * + *{ margin-top:0.75rem; }

.w-6{ width:1.5rem; }
.h-6{ height:1.5rem; }
.w-10{ width:2.5rem; }
.h-10{ height:2.5rem; }
.w-12{ width:3rem; }
.h-12{ height:3rem; }
.wh{ height:4rem;}
.w-14{ width:3.5rem; }
.h-14{ height:3.5rem; }
.h-0\.5{ height:0.125rem; }
.w-full{ width:100%; }
.h-full{ height:100%; }
.w-\[1500px\]{ width:1500px; }
.max-w-none{ max-width:none; }
.max-w-2xl{ max-width:42rem; }
.max-w-3xl{ max-width:48rem; }
.max-w-7xl{ max-width:80rem; }

.text-xs{ font-size:0.75rem; line-height:1.2; }
.text-sm{ font-size:0.875rem; line-height:1.5; }
.text-lg{ font-size:1.125rem; line-height:1.6; }
.text-xl{ font-size:1.25rem; line-height:1.4; }
.text-2xl{ font-size:1.5rem; line-height:1.3; }
.text-3xl{ font-size:1.875rem; line-height:1.25; }
.text-4xl{ font-size:2.25rem; line-height:1.15; }
.text-6xl{ font-size:3.75rem; line-height:1; }
.text-\[11px\]{ font-size:11px; }
.text-\[13vw\]{ font-size:13vw; }
.text-center{ text-align:center; }
.text-white{ color:#fff; }
.leading-relaxed{ line-height:1.7; }
.leading-\[0\.95\]{ line-height:0.95; }
.leading-\[1\.02\]{ line-height:1.02; }
.tracking-tight{ letter-spacing:-0.02em; }
.font-semibold{ font-weight:600; }
.font-700{ font-weight:700; }
.font-800{ font-weight:800; }
.font-900{ font-weight:900; }
.opacity-70{ opacity:0.7; }

.border-t{ border-top-width:1px; border-top-style:solid; }
.border-\[var\(--cream-2\)\]{ border-color:var(--cream-2); }
.rounded-full{ border-radius:9999px; }
.rounded-xl{ border-radius:0.75rem; }
.rounded-t-md{ border-top-left-radius:0.375rem; border-top-right-radius:0.375rem; }

.bg-white{ background-color:#fff; }
.bg-\[var\(--navy\)\]{ background-color:var(--navy); }

.overflow-hidden{ overflow:hidden; }
.transition-all{ transition-property:all; transition-duration:.2s; transition-timing-function:ease; }
.transition-colors{ transition-property:color,background-color,border-color; transition-duration:.2s; transition-timing-function:ease; }
.duration-300{ transition-duration:.3s; }
.hover\:text-white:hover{ color:#fff; }

.sm\:col-span-2, .md\:col-span-2{ }
/* ============================================================ */
/* RESPONSIVE UTILITIES                                          */
/* sm: min-width 640px | md: min-width 768px | lg: min-width 1024px */
/* ============================================================ */

@media (min-width: 640px){
  .sm\:block{ display:block; }
  .sm\:flex-row{ flex-direction:row; }
  .sm\:col-span-2{ grid-column: span 2 / span 2; }
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .sm\:mt-24{ margin-top:5rem; }
  .sm\:pb-24{ padding-bottom:5rem; }
  .sm\:pt-28{ padding-top:5rem; }
  .sm\:pt-44{ padding-top:5rem; }
  .sm\:px-8{ padding-left:2rem; padding-right:2rem; }
  .sm\:py-28{ padding-top:5rem; padding-bottom:5rem; }
  .sm\:text-5xl{ font-size:3rem; line-height:1.1; }
  .sm\:text-xl{ font-size:1.25rem; line-height:1.5; }
  .sm\:text-\[8\.5vw\]{ font-size:8.5vw; }
  .sm\:w-full{ width:100%; }
}

@media (min-width: 768px){
  .md\:col-span-2{ grid-column: span 2 / span 2; }
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width: 1024px){
  .lg\:col-span-1{ grid-column: span 1 / span 1; }
  .lg\:col-span-2{ grid-column: span 2 / span 2; }
  .lg\:col-span-3{ grid-column: span 3 / span 3; }
  .lg\:col-span-4{ grid-column: span 4 / span 4; }
  .lg\:col-span-8{ grid-column: span 8 / span 8; }
  .lg\:flex{ display:flex; }
  .lg\:hidden{ display:none; }
  .lg\:inline-flex{ display:inline-flex; }
  .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lg\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .lg\:grid-cols-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .lg\:text-\[6vw\]{ font-size:6vw; }
}

/* small "!important" overrides used for the nav's compact state and button sizing */
.\!px-5{ padding-left:1.25rem !important; padding-right:1.25rem !important; }
.\!py-2\.5{ padding-top:0.625rem !important; padding-bottom:0.625rem !important; }
.\!text-sm{ font-size:0.875rem !important; }

/* ---- Page Breadcrumb ---- */
.page-breadcrumb{
  position:relative;
  background-image:url('../assets/img/breadcrumb.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:200px 0 100px;
  overflow:hidden;
}
.page-breadcrumb-overlay{
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgb(1 7 20 / 41%) 0%);
}
.page-breadcrumb-inner{ position:relative; z-index:2; }
.breadcrumb-nav{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:.8rem; margin-top:14px; }
.breadcrumb-nav a{ color:#F4EEDD; text-decoration:none; opacity:.85; }
.breadcrumb-nav a:hover{ opacity:1; color:var(--orange); }
.breadcrumb-sep{ color:var(--orange); }
.breadcrumb-current{ color:var(--orange); font-weight:600; }


/* ---- Team avatar w/ image + fallback ---- */
.team-avatar{ position:relative; width:56px; height:56px; }
.team-avatar img{
  width:56px; height:56px; border-radius:9999px;
  object-fit:cover; display:block;
}
.team-avatar-fallback{
  position:absolute; inset:0;
  width:56px; height:56px; border-radius:9999px;
  display:none; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-family:inherit;
}

/* ---- contact info cards (call / email / visit) ---- */
.contact-info-card{
  background: var(--white);
  border: 1px solid rgba(22,34,60,0.08);
  border-radius: 1.1rem;
  padding: 2rem 1.75rem;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contact-info-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(22,34,60,0.2);
  border-color: rgba(225,113,46,0.35);
}
.contact-icon{
  width: 3.25rem; height: 3.25rem; border-radius: 9999px;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem auto;
  color: #fff;
}
.contact-icon.navy{ background: var(--navy); }
.contact-icon.green{ background: var(--green); }
 
/* ---- contact form ---- */
.contact-form-wrap{
  background: var(--white);
  border: 1px solid rgba(22,34,60,0.08);
  border-radius: 1.4rem;
  padding: 2.25rem;
  box-shadow: 0 24px 60px -30px rgba(22,34,60,0.25);
}
.form-row{ display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px){
  .form-row.form-row-2{ grid-template-columns: 1fr 1fr; }
}
.form-group{ display: flex; flex-direction: column; gap: 0.4rem; }
.form-label{
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--navy);
}
.form-input, .form-textarea, .form-select{
  width: 100%;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid rgba(22,34,60,0.12);
  border-radius: 0.7rem;
  padding: 0.85rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-input::placeholder, .form-textarea::placeholder{ color: #9AA1B4; }
.form-input:focus, .form-textarea:focus, .form-select:focus{
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(225,113,46,0.14);
}
.form-textarea{ resize: vertical; min-height: 140px; font-family: inherit; }
.form-submit{
  border: none; cursor: pointer;
}
.form-note{ font-size: 0.78rem; color: var(--ink-soft); }
.form-success{
  display: none;
  background: #EAF4EE; border: 1px solid rgba(47,74,60,0.25); color: var(--green);
  padding: 0.9rem 1.1rem; border-radius: 0.7rem; font-size: 0.88rem; font-weight: 500;
}
.form-success.show{ display: block; }
 
/* ---- office cards grid (regional offices, expanded view) ---- */
.office-grid{ display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px){ .office-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .office-grid{ grid-template-columns: repeat(3, 1fr); } }
.office-card{
  background: var(--white);
  border: 1px solid rgba(22,34,60,0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.office-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -22px rgba(22,34,60,0.22);
  border-color: rgba(225,113,46,0.3);
}
.office-card.is-hq{
  border-color: var(--orange);
  background: linear-gradient(180deg, #FFF9F2 0%, #fff 100%);
}
.office-tag{
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--orange-dark); background: #FCE9DA;
  padding: 0.2rem 0.6rem; border-radius: 9999px; margin-bottom: 0.6rem;
}
.office-card.is-hq .office-tag{ background: var(--orange); color: #fff; }
 
/* ---- map frame ---- */
.map-frame{
  border-radius: 1.25rem; overflow: hidden; border: 1px solid rgba(22,34,60,0.08);
  box-shadow: 0 24px 60px -30px rgba(22,34,60,0.25);
  aspect-ratio: 16 / 9; width: 100%;
}
.map-frame iframe{ width: 100%; height: 100%; border: 0; display: block; }