/* ---------- Light / Blue Brand Theme ---------- */
:root{
  /* Core palette */
  --bg: #f6f9ff;            /* page background */
  --bg-2:#eef4ff;           /* subtle sections */
  --panel:#ffffff;          /* cards/panels */
  --ink:#0b1f3a;            /* main text */
  --muted:#011d4d;          /* secondary text (your choice) */

  --brand:#1b3f78;          /* primary blue */
  --brand-2:#5cc8ff;        /* teal-blue accent */

  /* UI tokens */
  --ring: rgba(45,108,223,.35);
  --border: rgba(10,31,58,.08);
  --shadow-1: 0 6px 20px rgba(21, 56, 116, .10);
  --shadow-2: 0 14px 40px rgba(21, 56, 116, .12);
  --radius: 16px;
}

/* Global reset */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background:
    radial-gradient(1000px 600px at -10% -20%, #e8f2ff 0%, transparent 60%),
    radial-gradient(800px 420px at 110% -10%, #e6fbff 0%, transparent 55%),
    var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; display:block; border-radius: 0.5rem; }

.container{ width:min(1120px, 92%); margin-inline:auto; }

.section{ padding: 88px 0; }
.section.alt{ background: var(--bg-2); }
.section-head{ text-align:center; margin-bottom:40px; }
.section-head h2{
  margin:0 0 10px;
  font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.4rem);
  letter-spacing: -.01em;
}
.section-head p{ color: var(--muted); margin:0; }

/* Header / Nav */
.site-header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(120%) blur(10px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.1px; }
/* header brand image base styles (no fixed height here) */
.brand img{
  width:auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.07));
}

.nav{ display:flex; gap:20px; align-items:center; }
.nav a{ color: var(--ink); text-decoration:none; opacity:.85; font-weight:600; }
.nav a:hover{ opacity:1; }
.nav .btn{ margin-left:6px; }

.nav-toggle{
  display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; border-radius:2px; }

/* Hero */
.hero{ padding: 90px 0 70px; }
.grid-2{
  display:grid; gap:40px; grid-template-columns: 1.15fr 1fr;
}
.hero-copy h1{
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem);
  line-height:1.1;
  margin: 0 0 14px;
  letter-spacing:-.02em;
}
.hero-copy p{ color: var(--muted); font-size: clamp(1rem, .95rem + .3vw, 1.1rem); }
.hero-cta{ display:flex; gap:12px; margin:22px 0 10px; flex-wrap:wrap; }
.trust{ display:flex; gap:16px; list-style:none; padding:0; margin:14px 0 0; color: var(--muted); flex-wrap:wrap; }

/* Hero image (single approach using <img class="hero-img">) */
.hero-art{
  position: relative;
  overflow: hidden;
  min-height: 520px;                 /* desktop height */
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-2);
}
.hero-img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 80% center;       /* focus to the right */
}
.hero-art::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 80% at 0% 10%, rgba(92,200,255,.18) 0%, rgba(45,108,223,.10) 35%, transparent 70%);
  pointer-events:none;
}
@keyframes floatHero{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-8px) }
}
@media (prefers-reduced-motion: no-preference){
  .hero-img { animation: floatHero 8s ease-in-out infinite; }
}

/* Cards */
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(45,108,223,.25);
}
.card h3{ margin:0 0 8px; font-size:1.18rem; letter-spacing:-.01em; }
.card p{ color: var(--muted); margin:0 0 12px; }
.bullets{ margin:0; padding-left:18px; color: var(--ink); opacity:.95; }

/* Case studies */
.case-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
.case{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.case:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
.case-body{ padding:16px; }
.case h3{ margin:0 0 6px; font-size:1.06rem; }
.case p{ color: var(--muted); margin:0 0 8px; }
.link{ color: var(--brand); text-decoration:none; font-weight:600; }
.link:hover{ text-decoration: underline; }

/* Resources */
.resource-list{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
.resource{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:16px;
  text-decoration:none; color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: var(--shadow-1);
}
.resource:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(45,108,223,.25); }
.resource .tag{
  display:inline-block; font-size:.8rem; padding:4px 10px; border-radius:20px;
  background: rgba(45,108,223,.12); color:#1b56c1; margin-bottom:8px; font-weight:700;
}
.resource h3{ margin:0 0 6px; }

/* Check list */
.checks{ list-style: none; padding:0; margin:16px 0 0; }
.checks li{ position:relative; padding-left:26px; margin-bottom:8px;}
.checks li::before{
  content:""; position:absolute; left:0; top:.35em;
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(65% 65% at 35% 35%, var(--brand-2) 0%, var(--brand) 100%);
  box-shadow: 0 0 0 3px rgba(45,108,223,.12);
}

/* About */
.about-card{
  background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding:22px; box-shadow: var(--shadow-1);
}

/* Contact (email card) */
.contact-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-1);
  max-width: 600px;
  margin-inline: auto;
}
.contact-text { font-size: 1.1rem; color: var(--ink); }
.email-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  font-size: 1.2rem;
}
.email-link:hover { text-decoration: underline; color: var(--brand-2); }

/* Footer */
.site-footer {
  display: flex;
  justify-content: space-between;   /* left group vs right button */
  align-items: center;
  padding: 20px 40px;
  background: #f6f9ff;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 6px;   /* spacing between logo, tagline, copyright */
}

.logo {
  font-weight: bold;
  font-size: 18px;
  color: #1f3c88;
  line-height: 1.2;
}

.tagline {
  font-weight: 600;
  font-size: 15px;
  color: #0b2545;
  margin: 0;
}

.footer-left .copyright {
  font-size: 13px;
  color: #555;
  margin: 0;
}

.footer-right .btn {
  background: linear-gradient(90deg, #6ba6e6, #4a8edb);
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
}

.btn {
  background: linear-gradient(90deg, #6ba6e6, #4a8edb);
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
}

/* Buttons */
.btn{
  display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none;
  border:1px solid rgba(27, 86, 193, .18);
  font-weight:800; letter-spacing:.1px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
/* Primary button: light blue gradient */
/* Primary button: calm light blue gradient */
.btn-primary {
  background: linear-gradient(90deg, #3a8dde, #6fb8f0); /* calm medium-light blues */
  color: #1f0246; /* dark blue text for clarity */
  border: none;
  box-shadow: 0 6px 16px rgba(0, 9, 17, 0.25);
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background: linear-gradient(90deg, #3a8dde, #6fb8f0); /* slightly darker on hover */
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(58, 141, 222, 0.35);
}

/* Secondary (ghost) button */
.btn-ghost {
  background: linear-gradient(90deg, #3a8dde, #6fb8f0); /* calm medium-light blues */
  color: #1f0246; /* dark brand blue text */
  border: 2px solid #6fb8f0; /* calm light-blue border */
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}

.btn-ghost:hover {
  background: rgba(111, 184, 240, 0.12); /* soft blue wash */
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(58, 141, 222, 0.2);
}


/* Links */
a{ outline-offset: 2px; }
a:focus-visible{ box-shadow: 0 0 0 4px var(--ring); border-radius: 8px; }

/* Headings in dark blue brand color */
h1, h2, h3, h4, h5, h6 { color: var(--brand); }

/* Tagline in one calm brand blue */
.tagline {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1b3f78;   /* dark brand blue */
  display: inline-block;
  margin-left: 10px;
  letter-spacing: -0.5px;
}

.tagline .arrow {
  font-weight: 900;
}


/* Logo sizes */
.logo { height: 84px; width: auto; }      /* header logo */
.logo-footer { height: 48px; width: auto; } /* footer logo */

/* Responsive */
@media (max-width: 1024px){
  .grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 960px){
  .cards, .case-grid, .resource-list{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .nav{
    position: fixed; inset: 60px 0 auto 0; background: rgba(255,255,255,.98);
    padding: 16px; display: none; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border);
  }
  .nav.open{ display:flex; }
  .nav-toggle{ display:flex; }
  .cards, .case-grid, .resource-list{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .foot-links{ justify-content:center; }
  .logo { height: 64px; }  /* smaller header logo on phones */
  .hero-art{ min-height: 380px; }
  .hero-img{ object-position: 70% center; }
}
/* --- Force hero layout: text left, image right --- */
.hero .grid-2{
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 40px;
  align-items: center;
}

/* Explicit column placement */
.hero-copy{ grid-column: 1; z-index: 1; }
.hero-art { grid-column: 2; z-index: 0; }

/* Make sure the image only fills its own column */
.hero-art{ width: 100%; }

/* Tweak the crop so the person sits toward the column divider */
.hero-img{ object-position: 20% center; } /* 20–30% works well when image is on the right */

/* Mobile: stack with text first, image second */
@media (max-width: 960px){
  .hero .grid-2{ grid-template-columns: 1fr; }
  .hero-copy{ order: 1; }
  .hero-art { order: 2; min-height: 380px; }
  .hero-img{ object-position: 50% center; }
}
/* ==== FORCE HERO: text left, image right ==== */
.hero .grid-2{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "copy art";
  gap: 40px;
  align-items: center;
}

.hero-copy{
  grid-area: copy;
  position: relative;
  z-index: 2;        /* keep text above any overlay */
}

.hero-art{
  grid-area: art;
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Make sure the image only fills its own column and crops well */
.hero-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% center;  /* because the subject is on the left of the photo */
}

/* Stack on mobile with text first, image second */
@media (max-width: 960px){
  .hero .grid-2{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "art";
    gap: 24px;
  }
  .hero-art{ min-height: 380px; }
  .hero-img{ object-position: 50% center; }
}
/* Force hero layout: TEXT LEFT, IMAGE RIGHT */
.hero .grid-2{
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  grid-template-areas: "copy art";
  gap: 40px;
  align-items: center;
}

.hero-copy{ grid-area: copy; z-index: 1; }
.hero-art { grid-area: art;  z-index: 0; width: 100%; }

/* Ensure the text block is visible and tidy */
.hero-copy h1{ margin-top: 0; }
.hero-copy p{ max-width: 60ch; }

/* Image framing (subject on left of photo, image sits on the right) */
.hero-img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 20% center;  /* 15–30% looks good; adjust to taste */
}

/* Mobile: stack text first, image second */
@media (max-width: 960px){
  .hero .grid-2{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "art";
  }
  .hero-art { min-height: 380px; }
  .hero-img { object-position: 50% center; }
}