/* ============================================================
   Health Capitol — static site styles
   Rebuilt from the WordPress/Elementor original.
   Design tokens taken from the live Elementor kit.
   ============================================================ */

:root{
  --color-primary:#F68121;      /* brand orange */
  --color-secondary:#29BBAB;    /* teal */
  --color-text:#080808;
  --color-muted:#767D7E;
  --color-accent:#FFF4EB;       /* cream section background */
  --color-field:#EAE8E4;
  --color-field-text:#757473;

  --footer-orange:#E86A33;
  --footer-bar:#C6491C;

  --font-base:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"Times New Roman",Georgia,serif;

  --container:1140px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-base);
  font-weight:400;
  color:var(--color-text);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin:0}
a{color:inherit}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--color-primary);color:#fff;
  padding:10px 16px;z-index:100;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

/* ---------- reveal animation ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- header ---------- */
.site-header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:10;
  padding:28px 24px;
}
.site-header__logo{display:inline-block}
.site-header__logo img{
  width:clamp(200px,26vw,360px);
  height:auto;
}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:#c9c2ba url("/assets/img/hero.jpg") center/cover no-repeat;
  padding-block:120px 9vh;
}
.hero__inner{
  width:100%;
  /* match the header's 24px inset so the title lines up with the logo */
  padding-inline:24px;
}
.hero__title{
  font-weight:700;
  font-size:clamp(26px,7.2vw,108px);
  line-height:1.02;
  letter-spacing:-1.6px;
  white-space:nowrap;
  color:var(--color-primary);
  text-shadow:7px 4px 14px rgba(0,0,0,.35);
}
.hero__title-light{color:#fff}

/* ---------- coming soon / intro ---------- */
.intro{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-accent);
  overflow:hidden;
  padding-block:90px;
}
.intro__inner{
  position:relative;
  z-index:2;
  text-align:center;
}
.intro__heading{
  font-weight:700;
  font-size:clamp(40px,7vw,64px);
  line-height:1.1;
  color:var(--color-primary);
}
.intro__sub{
  margin-top:18px;
  font-size:20px;
  color:var(--color-muted);
}

.intro__blobs{position:absolute;inset:0;z-index:1;pointer-events:none}
/* neutralise the generic reveal on the wrapper — only the photos animate */
.intro__blobs[data-reveal]{opacity:1;transform:none;transition:none}

.blob{
  position:absolute;
  width:clamp(120px,13vw,232px);
  border-radius:22px;
  opacity:0;
  transform:scale(.55);
  transition:opacity .55s ease,transform .6s cubic-bezier(.34,1.42,.5,1);
  will-change:opacity,transform;
}
.intro__blobs.is-visible .blob{opacity:1;transform:scale(1)}
.intro__blobs.is-visible .blob--tl {transition-delay:.04s}
.intro__blobs.is-visible .blob--tr {transition-delay:.11s}
.intro__blobs.is-visible .blob--tl2{transition-delay:.18s}
.intro__blobs.is-visible .blob--tr2{transition-delay:.25s}
.intro__blobs.is-visible .blob--bl {transition-delay:.32s}
.intro__blobs.is-visible .blob--br {transition-delay:.39s}
.intro__blobs.is-visible .blob--bl2{transition-delay:.46s}
.intro__blobs.is-visible .blob--br2{transition-delay:.53s}

/* layout: mirrored pairs top/bottom on each side (see design ref) */
.blob--tl {top:5%;    left:7%}
.blob--tl2{top:17%;   left:21%}
.blob--tr {top:6%;    right:6%}
.blob--tr2{top:18%;   right:20%}
.blob--bl {bottom:3%; left:6%}
.blob--bl2{bottom:12%;left:21%}
.blob--br {bottom:3%; right:7%}
.blob--br2{bottom:13%;right:22%}

@media (prefers-reduced-motion:reduce){
  .blob{opacity:1;transform:none;transition:none}
}

/* ---------- section heading (shared) ---------- */
.section-heading{
  text-align:center;
  font-weight:700;
  font-size:clamp(32px,5vw,48px);
  line-height:1.15;
  color:var(--color-primary);
}

/* ---------- services ---------- */
.services{
  min-height:70vh;
  display:flex;
  align-items:center;
  padding-block:90px;
}
.services__grid{
  list-style:none;
  margin:44px 0 0;
  padding:0;
  display:grid;
  gap:32px;
}
.services__grid--3{grid-template-columns:repeat(3,1fr)}
.services__grid--2{
  grid-template-columns:repeat(2,1fr);
  max-width:67%;
  margin-inline:auto;
}
.service{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.service__icon{
  height:96px;
  width:auto;
  object-fit:contain;
}
.service__label{
  font-size:16px;
  color:var(--color-text);
}

/* ---------- what love means ---------- */
.values{
  min-height:75vh;
  display:flex;
  align-items:center;
  background:var(--color-accent);
  padding-block:90px;
}
.values__grid{
  margin-top:44px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.value{
  position:relative;
  aspect-ratio:1056 / 1200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:24px;
  text-align:center;
  color:#fff;
  background:var(--tile) center/contain no-repeat;
}
.value__letter{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(84px,11vw,160px);
  line-height:1;
}
.value__text{
  font-size:clamp(17px,1.6vw,24px);
  font-weight:400;
  line-height:1.35;
}

/* ---------- contact ---------- */
.contact{
  min-height:60vh;
  display:flex;
  align-items:center;
  padding-block:90px;
}
.contact__inner{text-align:center}
.contact__sub{
  margin-top:12px;
  font-size:20px;
  color:var(--color-muted);
}

.form{
  margin:36px auto 0;
  max-width:640px;
  width:70%;
  text-align:left;
}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__row{
  display:flex;
  gap:10px;
}
.form__row .form__group{flex:1}
.form__group{margin-bottom:10px}
.form__label{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;
}
.form__field{
  width:100%;
  font-family:var(--font-base);
  font-size:16px;
  color:var(--color-field-text);
  background:var(--color-field);
  border:0;
  border-radius:4px;
  padding:16px 18px;
}
.form__field:focus{
  outline:2px solid var(--color-primary);
  outline-offset:1px;
}
textarea.form__field{resize:vertical;min-height:150px}

.form__submit{
  width:100%;
  margin-top:6px;
  font-family:var(--font-base);
  font-weight:500;
  font-size:16px;
  color:#fff;
  background:var(--color-primary);
  border:0;
  border-radius:4px;
  padding:16px 24px;
  cursor:pointer;
  transition:filter .2s ease;
}
.form__submit:hover{filter:brightness(.94)}
.form__submit:disabled{opacity:.6;cursor:default}

.form__status{
  margin-top:16px;
  font-size:15px;
  padding:12px 16px;
  border-radius:4px;
}
.form__status--ok {background:#e9f7f5;color:#1b6f65}
.form__status--err{background:#fdecec;color:#b23b3b}

/* ============================================================
   Footer  (carried over from the original custom footer)
   ============================================================ */
.hc-footer{
  font-family:var(--font-base);
  background:var(--footer-orange);
  color:#FFF3EA;
}
.hc-footer__inner{
  max-width:1080px;margin:0 auto;
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding:52px 28px 34px;
}
.hc-footer__brand{max-width:300px}
.hc-footer__logo{height:52px;width:auto;margin-bottom:16px}
.hc-footer__tag{
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:19px;color:#fff;margin-bottom:8px;
}
.hc-footer__sub{font-size:13px;line-height:1.7;color:#FFE0CC}

.hc-footer__col{min-width:180px}
.hc-footer__h{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;font-weight:600;
}
.hc-footer__p{font-size:13.5px;line-height:1.8;color:#FFEAD9}
.hc-footer__p a{color:#FFEAD9;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.hc-footer__p a:hover{color:#fff}

.hc-footer__bar{background:var(--footer-bar)}
.hc-footer__bar-inner{
  max-width:1080px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 28px;
}
.hc-footer__legal{font-size:12px;color:#FFD9C4}
.hc-footer__duns{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;
  padding:8px 15px;font-size:12.5px;color:#FFF3EA;
}
.hc-footer__dot{width:6px;height:6px;border-radius:50%;background:#fff;flex-shrink:0}
.hc-footer__num{
  font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;
  color:#fff;letter-spacing:.04em;font-weight:600;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .services__grid--3{grid-template-columns:repeat(3,1fr)}
  .services__grid--2{max-width:none}
  .values__grid{grid-template-columns:repeat(2,1fr);gap:16px}
}

@media (max-width:767px){
  .hero{padding-block:140px 8vh}
  .services__grid--3,
  .services__grid--2{grid-template-columns:1fr;max-width:320px;margin-inline:auto}
  .values__grid{grid-template-columns:1fr;max-width:360px;margin-inline:auto}
  .value{aspect-ratio:auto;min-height:300px}
  .form{width:100%}
  .form__row{flex-direction:column;gap:0}
  /* mobile: shrink the photo scatter and tuck it to the edges so the heading stays clear */
  .blob{width:clamp(66px,22vw,110px)}
  .blob--tl {top:2%;    left:-4%}
  .blob--tl2{top:12%;   left:12%}
  .blob--tr {top:2%;    right:-4%}
  .blob--tr2{top:12%;   right:12%}
  .blob--bl {bottom:2%; left:-4%}
  .blob--bl2{bottom:12%;left:12%}
  .blob--br {bottom:2%; right:-4%}
  .blob--br2{bottom:12%;right:12%}
  .hc-footer__inner{padding:40px 22px 28px;gap:30px}
  .hc-footer__brand{max-width:none}
  .hc-footer__bar-inner{padding:16px 22px;justify-content:center;text-align:center}
}