/* astr partners - static rebuild
   Hand-written replacement for the WordPress/Gutenify stylesheet.
   Design tokens taken from computed styles on the live site (2026-09-05). */

@import url('fonts.css');

:root{
  --dark:        #114654;  /* dark cards, hero overlay, band-dark */
  --navy:        #082a3d;  /* header band, footer band (distinct from --dark) */
  --dark-deep:   #100f0f;  /* copyright bar */
  --teal:        #1189a6;  /* section headings */
  --mint:        #0dceb5;  /* stat figure, icon accents */
  --green:       #31a685;  /* eyebrow pill text */
  --lime:        #c6da4a;  /* primary button */
  --body-text:   #717171;
  --ink:         #000;
  --white:       #fff;
  --light-blue:  #edf4fc;
  --shadow:      0 10px 30px rgba(17,70,84,.10);
  --shadow-card: 0 6px 24px rgba(17,70,84,.08);

  --content: 960px;   /* 900px of content + 30px gutters */
  --wide:    1380px;  /* 1320px of content + 30px gutters */
  --gutter:  30px;

  --fs-body: clamp(1.0625rem, 1.063rem + ((1vw - 0.48rem) * 0.119), 1.125rem);
  --lh-body: 1.75;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--white);
  color:var(--body-text);
  font-family:'Roboto',sans-serif;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
}

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

h1,h2,h3,h4{margin:0;font-family:'Roboto',sans-serif}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--white);color:var(--dark);padding:12px 20px;
}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{width:100%;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}

/* ---------- eyebrow pill ---------- */
.eyebrow{
  display:inline-block;
  background:var(--white);
  color:var(--green);
  font-size:16px;
  line-height:28px;
  padding:0 16px;
  box-shadow:var(--shadow-card);
  margin:0 0 18px;
}
.eyebrow strong{font-weight:700}

/* ---------- header ---------- */
.site-header{background:var(--navy);text-align:center;padding:26px 20px 20px}
.site-header .logo{width:334px;max-width:80vw;margin:0 auto}
.tagline{
  color:var(--teal);
  letter-spacing:3px;
  font-size:var(--fs-body);
  margin:14px 0 0;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:430px;
  display:flex;align-items:center;
  background:#123a46 url('img/hero-bg.jpg') center/cover no-repeat;
  color:var(--white);
  padding:64px 0;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgb(17,70,84) 16%,rgba(17,70,84,0) 56%);
}
.hero .wrap-wide{position:relative}
.hero-inner{max-width:924px}
.hero h2{
  font-size:clamp(2.3rem,5vw,64px);
  font-weight:700;
  line-height:1.5;
  text-transform:capitalize;
  color:var(--white);
  margin:0 0 10px;
}
.hero p{color:var(--white);margin-bottom:26px}

.btn{
  display:inline-block;
  background:var(--lime);
  color:var(--dark);
  font-size:16px;
  font-weight:500;
  line-height:1.7;
  text-decoration:none;
  padding:10.72px 36px;
  border:0;border-radius:0;
  transition:filter .18s ease;
}
.btn:hover,.btn:focus{filter:brightness(.93)}

/* ---------- problem / solution ---------- */
.band-light{background:var(--light-blue)}
.problem-section{padding:70px 0}
.problem-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:start;
}
.card{padding:44px 40px;box-shadow:var(--shadow)}
.card-dark{background:var(--dark);color:var(--white);padding:24px 16px}
.card-dark h3{color:var(--white)}
.card-dark p{color:var(--white)}
.card-white{background:var(--white)}
.card-white p{color:var(--ink)}

.h-section{font-size:38px;font-weight:600;line-height:1.36;text-transform:capitalize}
.h-sub{font-size:27.2px;font-weight:600;line-height:1.36;text-transform:capitalize;color:var(--teal);margin-bottom:14px}

.card-icon{width:34px;height:34px;margin-bottom:18px;color:var(--teal)}
.card-icon svg{width:100%;height:100%;display:block;fill:currentColor}

/* ---------- why choose us ---------- */
.why-section{padding:80px 0}
.why-grid{
  display:grid;
  grid-template-columns:minmax(0,726fr) minmax(0,514fr);
  gap:80px;
  align-items:center;
}
/* cover block: DNA artwork as the background, stat card inset bottom-right */
.why-visual{
  position:relative;
  width:100%;
  aspect-ratio:726/613;
  background:var(--light-blue) url('img/businessdna.png') center/cover no-repeat;
}
.stat-card{
  position:absolute;right:16px;bottom:16px;
  width:198px;min-height:179px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--white);
  box-shadow:var(--shadow);
  padding:18px 20px;
  border-left:4px solid var(--mint);
  text-align:center;
}
.stat-num{font-size:64px;font-weight:600;line-height:1.43;color:var(--mint)}
.stat-label{font-size:16px;font-weight:600;line-height:1.36;color:var(--ink)}
.why-copy h2{
  font-size:43.2px;font-weight:800;line-height:1.43;
  text-transform:capitalize;color:var(--teal);margin-bottom:18px;
}

/* ---------- referral band ---------- */
.referral-section{padding:60px 0}
.referral-section .eyebrow{margin-bottom:20px}
.referral-section h2{
  font-size:38px;font-weight:600;line-height:1.43;
  color:var(--teal);text-transform:lowercase;
}

/* ---------- collaboration / focus ---------- */
.band-dark{background:var(--dark)}
.approach-section{padding:70px 0}
/* live site's Collaboration/Focus row sits in a wider block than the shared
   --wide container (confirmed by rendering the archive: 674px columns, not
   645px), so this section gets its own wrap width rather than reusing
   .wrap-wide. */
.approach-section .wrap-wide{max-width:1438px}
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.card-lightblue{background:var(--light-blue);padding:54px 16px}
.card-lightblue h3{color:var(--dark)}
.card-lightblue .card-icon{color:var(--mint)}
.card-lightblue p{color:var(--ink)}
.card-focus h3{color:var(--teal)}

/* ---------- team ---------- */
.team-section{padding:80px 0 90px;text-align:center}
.team-section h2{
  font-size:38px;font-weight:600;line-height:1.3;
  color:var(--teal);text-transform:capitalize;margin-bottom:16px;
}
.team-intro{max-width:1320px;margin:0 auto 46px;text-align:center}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px 16px;
}
.member{
  background:var(--white);
  box-shadow:6px 6px 9px rgba(0,0,0,.2);
  padding-bottom:22px;
  text-align:center;
}
.member-photo{
  width:100%;aspect-ratio:1246/1032;
  object-fit:cover;object-position:center top;
  background:var(--light-blue);
}
.member-photo.is-square{aspect-ratio:1246/1032;object-position:center 22%}
.member-name{
  font-size:22px;font-weight:600;line-height:1.36;
  color:var(--ink);margin:18px 0 2px;
}
.member-name a{text-decoration:none}
.member-name a:hover{color:var(--teal)}
.member-title{
  font-size:16px;font-weight:500;line-height:1.5;color:var(--body-text);
  max-width:238px;margin:0 auto;
}
.member-loc{
  display:inline-block;margin-top:10px;
  background:var(--teal);color:var(--white);
  font-size:11px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 14px;border-radius:999px;
}
/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:var(--white);padding:56px 0 0}
.site-footer h3{font-size:24px;font-weight:500;color:var(--white);margin-bottom:20px}
.footer-contact{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;
  padding-bottom:40px}
.footer-item{display:flex;align-items:center;gap:10px;font-size:16px}
.footer-item img{width:18px;height:18px;flex:0 0 18px}
.footer-item p{margin:0;font-weight:600}
.footer-item a{color:var(--white);text-decoration:none}
.footer-item a:hover{text-decoration:underline}
.footer-bottom{
  background:var(--dark-deep);
  border-top:1px solid rgba(255,255,255,.14);
  padding:20px 0;font-size:17.81px;
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{gap:40px}
  .hero h2{font-size:clamp(2rem,6vw,48px)}
}
@media (max-width:820px){
  .problem-grid,.approach-grid,.why-grid{grid-template-columns:1fr}
  .why-visual{margin-bottom:20px}
  .stat-card{position:static;display:inline-block;margin-top:-30px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .card{padding:34px 26px}
  .h-section,.referral-section h2,.team-section h2{font-size:30px}
  .why-copy h2{font-size:32px}
}
@media (max-width:520px){
  .team-grid{grid-template-columns:1fr;max-width:330px;margin:0 auto}
  .site-header .logo{width:250px}
  .hero{min-height:360px;padding:48px 0}
  .footer-contact{flex-direction:column;align-items:flex-start;gap:14px}
}