/* ================================
   Design tokens (colors, text sizing, styling)
   ================================ */

:root{
  --cream: #FBF8F3;
  --sand: #DCD4C5;
  --sky-100: #D6F0FF;
  --sky-200: #9CCDE9;
  --sky-600: #519CC7;
  --stone: #96928D;
  --ink: #544D43;
  --white: #ffffff;

  /* Typography */
  --font-sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --font-logo: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Radius + shadow */
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow: 0 12px 30px rgba(0,0,0,.10);

  /* Layout */
  --max: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 68ch; /* max line length for paragraphs */

  /* Responsive type scale formatted in clamp(min, preferred, max):
   min = smallest size (mobile)
   preferred = fluid size based on viewport width (vw)
   max = largest size (desktop) */
  --h1: clamp(44px, 6vw, 54px);
  --h2: clamp(34px, 4.2vw, 44px);
  --h3: clamp(22px, 2.4vw, 32px);
  --h4: clamp(18px, 1.8vw, 28px);
  
  --body: clamp(18px, 1.8vw, 20px);
  --lead: clamp(18px, 2vw, 22px);
  --eyebrow: clamp(18px, 1.2vw, 22px);

/* Line heights + Readability */
  --lh-tight: 1.1;  /* big headings */
  --lh-head: 1.2;   /* headings */
  --lh-body: 1.4;  /* paragraphs (slightly airier than 1.6) */
  --p-gap: 1.2em;   /* space between paragraphs */
  
}

/* ================================
  Base site styles
  ================================ */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
}

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

p{
  margin: 0 auto var(--p-gap);
  max-width: var(--measure);
}

.center p,
.center .body,
.center .lead{
  max-width: none;
}

p:last-child{ margin-bottom: 0; }



.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 16px; top: 16px; width:auto; height:auto;
  background: var(--white); color: var(--ink);
  padding: 10px 12px; border-radius: 10px;
  z-index: 9999;
}

/* ================================
  Layout helpers
  ================================ */

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow{ max-width: 880px; }

.center{ text-align:center; }

.section{
  padding: clamp(56px, 7vw, 96px) 0;
}
.spacer-24{ height:24px; }
.spacer-32{ height:32px; }



/* ================================
  Typography utilities
  ================================ */

.h2{
  font-family: var(--font-sans);
  font-size: var(--h2);
  line-height: var(--lh-tight);
  margin: 10px 0 18px;
  font-weight: 400; /* matches your “Regular” direction */
}

.h2--light{ color: var(--cream); }

.h3{
  font-family: var(--font-sans);
  font-size: var(--h3);
  line-height: var(--lh-head);
  margin: 10px 0 10px;
  font-weight: 700;
  color: var(--ink);
}

.h3--card{
  font-weight: 600;
  margin: 0;
  font-size:smaller;
}
.h3--form{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 14px;
}
.h3--light{ color: var(--cream); }

.lead{
  font-size: var(--lead);
  line-height: var(--lh-body);
  margin: 0 0 var(--p-gap);
  font-weight: 600;
  max-width: var(--measure);
}
.body{
  font-size: var(--body);
  line-height: var(--lh-body);
  margin: 0 0 var(--p-gap);
  max-width: var(--measure);
}
.body:last-child{ margin-bottom: 0; }


.body--light{ color: rgba(255,255,255,.92); }

.accent{ color: var(--sky-600); font-weight: 700; }

.eyebrow{
  font-family: var(--font-sans);
  font-size: var(--eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(84,77,67,.75);
}

.eyebrow--light{ color: var(--sky-100); }

.center .eyebrow,
.bio-card .eyebrow,
.form-shell .eyebrow{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


.icon{ width: 44px; margin: 0 auto 12px; }
.icon--lg{ width: 56px; }

/* ================================
  Buttons
  ================================ */

  .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 600;
  transition: transform .08s ease, filter .15s ease, background .15s ease;
  cursor:pointer;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: var(--sky-600);
  color: var(--white);
}
.btn--secondary{
  background: var(--cream);
  color: var(--ink);
}
.btn--dark{
  background: var(--ink);
  color: var(--cream);
}
.btn--full{ width:100%; }

.link{ color: var(--ink); text-decoration: underline; }
.link--light{ color: var(--cream); }

/* HERO */
.hero{
  background: var(--sky-200);
}
.hero__inner{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: clamp(520px, 70vh, 740px);
}
.hero__left{
  padding: clamp(28px, 4vw, 56px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 18px;
  align-items: center;
  text-align: center;
}

.brand__logo{
  width: clamp(500px, 18vw, 580px);
  height: auto;
}

.hero__h1{
  font-family: var(--font-sans);
  margin: 0;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--white);
  font-size: var(--h1);
  font-weight: 400;
  text-transform: uppercase;
}
.hero__h1-line{ display:block; }
.hero__h1-sub{
  display:block;
  font-family: var(--font-sans);
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: .28em;
  margin-top: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.hero__sub{
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: 22px;
}
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 10px;
}
.hero__right{
  position:relative;
  overflow:hidden;
  background: var(--sky-200);
}
.hero__photo{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: left center;
  /* filter: saturate(0.98) contrast(0.98); */
}

/* OVERVIEW */
.section--overview{
  position: relative;
  background: url("../assets/img/dbv-bg-vet-office-lo.jpg");
  background-size: cover;
  background-position: center;
}

/* BIO */
.section--bio{
  background: var(--stone);
}
.bio-card{
  background: rgba(251,248,243,.95);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
  max-width: 720px;
  margin: 120px auto 0;
  box-shadow: var(--shadow);
  position:relative;
}
.bio-card__photo{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  margin: -78px auto 10px;
  border: 8px solid rgba(251,248,243,.95);
  background: var(--sky-200);
}
.meta{
  margin: 0 0 30px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(84,77,67,.7);
  font-weight: 600;
}

.bio-card__icon{
  margin-top: 20px;             /* keeps your top spacing */
  margin-left: auto;            /* centers the block element */
  margin-right: auto;           /* centers the block element */
  width: 64px;                  /* icon size */
  height: auto;                 /* preserve aspect ratio */
  display: block;               /* removes inline baseline gap + allows auto margins */
  opacity: 0.7; /* 0 = invisible, 1 = fully opaque */
  /* for svg color later: color: var(--sky-600); */
}

/* SERVICES */
.section--services{
  background: var(--sky-200);
}
.services-grid{
  margin-top: 60px;
  margin-bottom: 60px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.service-card{
  background: var(--cream);
  border-radius: 14px;
  padding: 40px 40px;
  min-height: 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.service-card__icon{
  width: 64px;
}

/* OFFER */
.section--offer{
  background: var(--sky-600);
}
.form-shell{
  background: rgba(251,248,243,.96);
  border-radius: var(--radius-lg);
  max-width: 520px;
  margin: 0 auto;
  padding: 22px 22px 18px;
  box-shadow: var(--shadow);
  text-align:left;
}

/* ================================
   Start GoDaddy (Mimi) form styling
   Scoped to current embed only
   ================================ */
.form-shell #ema_signup_form{
  display: grid;
  gap: 12px;
}

.form-shell #ema_signup_form .mimi_field{
  margin: 0;
}

.form-shell #ema_signup_form label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
  color: rgba(84,77,67,.85);
}

.form-shell #ema_signup_form .mimi_field > br{
  display: none;
}

.form-shell #ema_signup_form input[type="text"],
.form-shell #ema_signup_form input[type="email"],
.form-shell #ema_signup_form input[type="tel"]{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(84,77,67,.20);
  font-size: 16px;
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--ink);
}

.form-shell #ema_signup_form input::placeholder{
  color: rgba(84,77,67,.55);
}

.form-shell #ema_signup_form input:focus{
  outline: none;
  border-color: rgba(81,156,199,.55);
  box-shadow: 0 0 0 4px rgba(81,156,199,.18);
}

/* Submit button should match your existing button style */
.form-shell #ema_signup_form input[type="submit"].submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 38px;
  border-radius: 14px;
  border: 0;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease, background-color .15s ease;
}

.form-shell #ema_signup_form input[type="submit"].submit:active{
  transform: translateY(1px);
}

/* Mimi validation states */
.form-shell #ema_signup_form .invalid{
  border-color: rgba(220, 70, 70, .55) !important;
  box-shadow: 0 0 0 4px rgba(220, 70, 70, .12) !important;
}

/* Optional: make the “Sending…” / disabled state look muted */
.form-shell #ema_signup_form input[type="submit"].disabled{
  opacity: .7;
  cursor: not-allowed;
}

/* ================================
   GoDaddy (Mimi) form styling
   ================================ */

#ema_signup_form{
  display: grid;
  gap: 12px;
}

#ema_signup_form label{
  display: block;
  font-size: 18pt;              /* matches .field span */
  font-weight: 600;
  margin-bottom: 6px;
  color: rgba(84,77,67,.85);
}

#ema_signup_form input[type="text"]{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(84,77,67,.20);
  font-size: 16px;              /* THIS is the key fix */
  font-family: var(--font-sans);
}

#ema_signup_form input::placeholder{
  color: rgba(84,77,67,.45);
}

/* Submit button – match your btn system */
#ema_signup_form .submit{
  margin-top: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--sky-600);
  color: var(--white);
  transition: transform .08s ease, filter .15s ease, background-color .15s ease;
}

#ema_signup_form .submit:hover{
  filter: brightness(1.05);
}

#ema_signup_form .submit:active{
  transform: translateY(1px);
}


/* ================================
   End GoDaddy (Mimi) form styling
   Scoped to current embed only
   ================================ */

.placeholder-form{
  display:grid;
  gap: 12px;
}
.field span{
  display:block;
  font-size: 18pt;
  font-weight: 600;
  margin: 0 0 6px;
  color: rgba(84,77,67,.85);
}
.field input{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(84,77,67,.20);
  font-size: 16px;
  font-family: var(--font-sans);
}
.checkbox{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 14px;
  color: rgba(84,77,67,.92);
}
.checkbox input{ margin-top: 4px; }
.fineprint{
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(84,77,67,.70);
}
.fineprint--light{ color: rgba(255,255,255,.75); }

/* CONTACT */
.section--contact{
  position:relative;
  background: #0f0f0f;
  padding: clamp(64px, 7vw, 96px) 0;
}
.contact-bg{
  position:absolute;
  inset:0;
  background-image: url("../assets/img/dbv-bg-cat-vet-lo.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(0px);
}
.contact{
  position:relative;
  display:grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(22px, 3vw, 44px);
  align-items:start;
}
.contact__logo{
  width: 280px;
  max-width: 100%;
  margin-bottom: 18px;
}
.contact__left .btn{ margin-top: 8px; }
.contact__block{ margin-top: 18px; }
.contact__block .body{ margin: 6px 0 0; }
.contact__block + .contact__block{ margin-top: 18px; }

/* Footer */
.footer{
  background: var(--cream);
  border-top: 1px solid rgba(84,77,67,.14);
  padding: 18px 0;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  font-size: 14px;
}

/* ================================
  Responsive
  ================================ */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__right{ height: 360px; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .services-grid{ grid-template-columns: 1fr; }
  .btn{ width:100%; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
}