/* ============================================================
   V17 — original-character hero refinement
   Keeps the approved website below the fold while rebuilding
   the header and first impression around the strongest qualities
   of the original site: proportion, clarity, personality and calm.
   ============================================================ */
:root{
  --v17-navy:#193653;
  --v17-teal:#0b9f9b;
  --v17-text:#4a5964;
  --v17-header-width:1360px;
  --v17-hero-width:1360px;
}

/* Header: larger original-style profiles, quieter navigation */
.site-header{
  height:78px;
  background:rgba(255,255,255,.985);
  border-bottom:1px solid rgba(25,54,83,.055);
  box-shadow:0 3px 15px rgba(25,54,83,.055);
  backdrop-filter:blur(8px) saturate(125%);
}
.header-inner{
  width:min(var(--v17-header-width),calc(100% - clamp(48px,7vw,128px)));
  height:78px;
  gap:42px;
}
.social-icons{gap:17px}
.social-icons a{
  width:36px;
  height:40px;
  border-radius:0;
  background:transparent;
  opacity:1;
}
.social-icons a:hover{background:transparent;transform:translateY(-1px)}
.social-icons img{
  width:29px;
  height:29px;
  filter:brightness(0) saturate(100%) invert(20%) sepia(24%) saturate(1320%) hue-rotate(169deg) brightness(86%) contrast(91%);
  transition:filter .2s ease,opacity .2s ease;
}
.social-icons a:nth-child(2) img{width:31px;height:31px}
.social-icons a:nth-child(3) img{width:31px;height:31px}
.social-icons a:nth-child(4) img{width:30px;height:30px}
.social-icons a:nth-child(5) img{width:30px;height:30px}
.social-icons a:hover img{
  filter:brightness(0) saturate(100%) invert(46%) sepia(52%) saturate(922%) hue-rotate(131deg) brightness(92%) contrast(91%);
}
.primary-nav{gap:clamp(28px,2.15vw,40px)}
.primary-nav a,
.primary-nav .nav-cta{
  padding:27px 0 24px;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:-.008em;
  color:var(--v17-navy);
}
.primary-nav a:not(.nav-cta)::after,
.primary-nav .nav-cta::after{bottom:13px;height:2.5px}
.primary-nav .nav-cta{color:#087d79}

/* Hero: familiar original composition, refined rather than replaced */
.v13-hero{
  padding-top:78px;
  background:
    radial-gradient(circle at 85% 47%,rgba(11,159,155,.075),transparent 26%),
    linear-gradient(108deg,#fff 0%,#fff 68%,#f7fbfb 100%);
  border-bottom:1px solid #e8eeee;
}
.v13-hero .hero-inner{
  width:min(var(--v17-hero-width),calc(100% - clamp(48px,7vw,128px)));
  grid-template-columns:minmax(0,1.12fr) minmax(350px,450px);
  gap:clamp(68px,7vw,112px);
  align-items:center;
  padding-block:clamp(62px,6vw,88px);
  min-height:0;
}
.v13-hero .hero-copy{
  max-width:720px;
  padding:0;
}
.v13-hero h1{
  order:1;
  margin:0 0 13px;
  color:var(--v17-navy);
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:clamp(3.1rem,3.55vw,3.9rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.026em;
  white-space:nowrap;
}
.v13-hero .hero-role{
  order:2;
  margin:0 0 23px;
  color:var(--v17-teal);
  font-family:Inter,Arial,sans-serif;
  font-size:clamp(1.48rem,1.68vw,1.82rem);
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.015em;
}
.v13-hero .hero-role span{
  margin-inline:.43em;
  color:var(--v17-teal);
  font-weight:400;
}
.v13-hero .hero-intro{
  order:3;
  margin:0 0 16px;
  max-width:57ch;
  color:#344652;
  font-size:clamp(1.04rem,1.1vw,1.14rem);
  line-height:1.64;
  letter-spacing:.002em;
}
.v13-hero .hero-detail{
  order:4;
  margin:0;
  max-width:64ch;
  color:#556672;
  font-size:clamp(.96rem,1vw,1.035rem);
  line-height:1.72;
}
.v13-hero .hero-actions{
  order:5;
  margin-top:27px;
  gap:14px;
}
.v13-hero .button{
  min-height:50px;
  padding-inline:27px;
  border-radius:7px;
  font-size:.96rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.v13-hero .hero-portrait{
  width:min(100%,430px);
  max-width:430px;
  justify-self:end;
  margin:0;
  filter:drop-shadow(0 20px 36px rgba(25,54,83,.13));
}
.v13-hero .hero-portrait::before{
  inset:13px -14px -13px 14px;
  background:linear-gradient(145deg,#dcefed,#eef4f5);
  clip-path:polygon(17% 0,100% 0,100% 100%,0 100%);
}
.v13-hero .hero-portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:52% 50%;
  clip-path:polygon(17% 0,100% 0,100% 100%,0 100%);
  filter:none;
  image-rendering:auto;
}

@media(max-width:1180px){
  .header-inner,.v13-hero .hero-inner{width:min(100% - 64px,1080px)}
  .primary-nav{gap:24px}
  .primary-nav a,.primary-nav .nav-cta{font-size:.96rem}
  .v13-hero .hero-inner{grid-template-columns:minmax(0,1.08fr) minmax(320px,390px);gap:48px}
  .v13-hero h1{font-size:clamp(2.9rem,4.5vw,3.55rem)}
  .v13-hero .hero-portrait{max-width:390px}
}
@media(max-width:900px){
  .site-header,.header-inner{height:72px}
  .header-inner{width:calc(100% - 44px)}
  .social-icons{gap:9px}
  .social-icons a{width:35px}
  .social-icons img{width:25px;height:25px}
  .v13-hero{padding-top:72px}
  .v13-hero .hero-inner{
    width:min(100% - 48px,720px);
    grid-template-columns:1fr;
    gap:38px;
    padding-block:52px 68px;
  }
  .v13-hero .hero-copy{max-width:680px}
  .v13-hero h1{white-space:normal;font-size:clamp(2.8rem,8.2vw,3.65rem)}
  .v13-hero .hero-role{font-size:clamp(1.3rem,4vw,1.6rem)}
  .v13-hero .hero-portrait{justify-self:center;width:min(100%,410px)}
}
@media(max-width:620px){
  .header-inner{width:calc(100% - 30px)}
  .social-icons{gap:5px}
  .social-icons a{width:31px;height:36px}
  .social-icons img,.social-icons a:nth-child(2) img,.social-icons a:nth-child(3) img,.social-icons a:nth-child(4) img,.social-icons a:nth-child(5) img{width:23px;height:23px}
  .v13-hero .hero-inner{width:calc(100% - 36px);padding-block:42px 58px;gap:32px}
  .v13-hero h1{font-size:clamp(2.48rem,11.3vw,3.05rem)}
  .v13-hero .hero-role{font-size:1.18rem;margin-bottom:19px}
  .v13-hero .hero-role span{margin-inline:.28em}
  .v13-hero .hero-intro{font-size:1.02rem}
  .v13-hero .hero-detail{font-size:.95rem}
  .v13-hero .hero-actions{display:grid;grid-template-columns:1fr;max-width:330px}
  .v13-hero .button{width:100%;text-align:center}
  .v13-hero .hero-portrait{width:min(100%,360px)}
}