/* ==========================================================================
   Wild Atlantic Tails — site styles
   Layered on top of Bootstrap 5.3. Palette sampled from the design mockup.
   ========================================================================== */

:root {
  /* Brand palette — sampled from the design mockup. The logo itself is
     near-black line art (#0B1417), so the deep teal below carries the brand
     colour on buttons, the footer and headings. */
  --wat-deep:      #07262A;   /* buttons, footer, headings */
  --wat-deep-soft: #0C3439;   /* footer panel highlight */
  --wat-bar:       #051D20;   /* footer bottom bar */
  --wat-sage:      #EEF3F0;   /* services band */
  --wat-cream:     #FAF9F7;   /* why-choose band */
  --wat-white:     #FFFFFF;

  --wat-text:      #16332F;
  /* Body copy in the mockup is near-black, not grey — sampled at #0E2432 for
     the hero lead and #13232D for the About paragraphs. The smaller item
     descriptions sit one step back at ~#31414B. */
  --wat-body:      #12232E;
  --wat-muted:     #31414B;
  --wat-line:      #DDE5E1;
  --wat-on-dark:   #DCE8E6;

  /* Type */
  --ff-serif:  "DM Serif Display", Georgia, "Times New Roman", serif;
  --ff-sans:   "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-script: "Dancing Script", "Segoe Script", cursive;

  --header-h: 66px;

  /* Type scale — measured from the design mockup. Each size is the wireframe's
     cap height converted through the cap ratio of the font that renders it
     (DM Serif Display .660em, Montserrat .700em). Change --fs-body to move
     the whole scale together. */
  --fs-body:    1.0625rem;  /* 17px */
  --fs-small:   .97rem;     /* item descriptions, footer contacts */
  --fs-kicker:  .97rem;
  --fs-nav:     1rem;
  --fs-h3:      1.2rem;
  /* Sized so "Happier pets" renders at the mockup's 185px: Dancing Script
     sets that string at 4.371em. */
  --fs-script:  clamp(1.7rem, 3.66vw, 2.64rem);
  --fs-h2:      clamp(2.1rem, 3.97vw, 2.85rem);
  --fs-h1:      clamp(2.9rem, 5.7vw, 4.15rem);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--ff-sans);
  --bs-body-color: var(--wat-text);
  --bs-body-font-size: var(--fs-body);
  --bs-body-font-weight: 300;
  --bs-link-color-rgb: 7, 38, 42;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--wat-text);
  background: var(--wat-white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* DM Serif Display ships a single weight (400). Asking for 500 here would
   make the browser synthesise a fake bold. */
h1, h2, h3 { font-family: var(--ff-serif); font-weight: 400; }

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

section[id], [id="contact"] { scroll-margin-top: calc(var(--header-h) + 8px); }

::selection { background: var(--wat-deep); color: #fff; }

/* Keyboard focus — visible everywhere, never removed */
:focus-visible {
  outline: 2px solid var(--wat-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.site-footer :focus-visible,
.hero :focus-visible { outline-color: currentColor; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 2000;
  padding: .65rem 1.25rem;
  background: var(--wat-deep);
  color: #fff;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

.ic {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: currentColor;
}
.ic-sm { width: 17px; height: 17px; }
/* Button icon — masked so it takes the button's own colour (white on the
   dark brand fill) from currentColor. */
.btn-ic {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  background-color: currentColor;
  -webkit-mask: url("../img/svgs/paw.svg") center / contain no-repeat;
          mask: url("../img/svgs/paw.svg") center / contain no-repeat;
}
/* Sized in em so it tracks the script's own font-size. The sketched heart is
   16:24 in the mockup, hence the taller-than-wide box. */
.ic-script { width: .52em; height: .78em; fill: none; stroke: currentColor; }

/* Section eyebrow, e.g. "OUR SERVICES" */
.kicker {
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wat-deep);
  line-height: 1.75;
  margin-bottom: .75rem;
}

.kicker-rule {
  width: 62px;
  border: 0;
  border-top: 1.5px solid var(--wat-deep);
  opacity: .85;
  margin: 0 0 1.25rem;
}

.display-title {
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--wat-deep);
  margin-bottom: 1.15rem;
}

.section-title {
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--wat-deep);
  margin-bottom: 1.4rem;
}
.section-title--light { color: #fff; }

/* Handwritten accents */
.script {
  font-family: var(--ff-script);
  font-size: var(--fs-script);
  /* Set explicitly — without it this inherits body's 300, which the script
     face isn't loaded at, so the browser substitutes and the letterforms come
     out wrong. */
  font-weight: 500;
  line-height: 1.35;
  color: var(--wat-deep);
  margin: 0;
  pointer-events: none;
}
.script .ic-script {
  display: inline-block;
  vertical-align: middle;
  margin-left: .3rem;
}

/* Buttons */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--wat-deep);
  --bs-btn-border-color: var(--wat-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0E3A40;
  --bs-btn-hover-border-color: #0E3A40;
  --bs-btn-active-bg: #041A1D;
  --bs-btn-active-border-color: #041A1D;
  --bs-btn-focus-shadow-rgb: 7, 38, 42;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: .01em;
  padding: .58rem 1.4rem;
  border-radius: 8px;
  transition: background-color .18s ease, transform .18s ease;
}
.btn-brand.btn-lg { font-size: var(--fs-body); padding: .9rem 1.9rem; }
.btn-brand:hover { transform: translateY(-1px); }

/* Social icon buttons */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 1.45rem;
  color: var(--wat-deep);
  /* Bootstrap 5 underlines every <a> by default; these are icon-only links. */
  text-decoration: none;
  border-radius: 50%;
  transition: background-color .18s ease, color .18s ease;
}
.social-link:hover { background: var(--wat-sage); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wat-line);
}

/* The logo hangs below the white bar and sits over the hero photo, as in the
   mockup. The bar's own height comes from .navbar-brand, so the overhanging
   part of the image doesn't push the header taller. */
.navbar-brand {
  position: relative;
  z-index: 5;
  height: 64px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}
.brand-logo {
  height: 112px;
  width: auto;
  max-width: none;
  margin-top: 4px;
  transition: height .25s ease;
}
/* Once the page scrolls the header is over ordinary content, so the logo
   pulls back inside the bar. */
.site-header.is-stuck .brand-logo { height: 54px; margin-top: 6px; }

.site-header .nav-link {
  font-size: var(--fs-nav);
  font-weight: 400;
  color: var(--wat-text);
  padding: .5rem .85rem;
  position: relative;
}
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .25rem;
  height: 1.5px;
  background: var(--wat-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .nav-link.active { color: var(--wat-deep); font-weight: 500; }

.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .site-header .navbar-collapse { border-top: 1px solid var(--wat-line); margin-top: .25rem; }
  .site-header .nav-link::after { display: none; }
  /* The logo overhangs the hero photo here too, as on desktop. While the
     menu is open it pulls back inside the bar so it doesn't cover the links. */
  .site-header.menu-open .brand-logo { height: 54px; margin-top: 6px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(180deg, #F4F8F9 0%, #E9F1F3 100%);
  overflow: hidden;
}

/* The photograph runs the full width of the hero, as in the mockup — the
   copy sits on top of it rather than beside it. */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Washes out the left of the photo so the headline reads, then clears before
   the dog. Alpha stops are measured from the mockup: it sits near .68 at the
   left edge and is down to ~.42 by 30%, clearing entirely around 70%. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(242, 248, 249, .72) 0%,
    rgba(242, 248, 249, .60) 18%,
    rgba(242, 248, 249, .42) 31%,
    rgba(242, 248, 249, .20) 47%,
    rgba(242, 248, 249, .06) 60%,
    rgba(242, 248, 249, 0) 70%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  /* The mockup's hero is 42% of the page width. Tracking that keeps the
     proportions right instead of going flat on wide screens. */
  min-height: clamp(520px, 42vw, 820px);
  display: flex;
  align-items: center;
  /* Extra top padding clears the logo where it overhangs the photo. */
  padding-top: 5rem;
  padding-bottom: 3.5rem;
}
/* Wide enough to keep "Wild Atlantic Tails" on one line, as in the mockup.
   DM Serif Display sets that string at 8.17em, so it needs ~536px at the
   capped heading size. The lead paragraph is narrowed separately below. */
.hero__copy { max-width: 48rem; }

.hero__lead {
  font-size: var(--fs-body);
  color: var(--wat-body);
  max-width: 27rem;
  margin-bottom: 2rem;
}

.script--hero {
  position: absolute;
  top: 3.25rem;
  right: 4rem;
  z-index: 3;
  /* The heart flows inline after "Happier days", as in the mockup, so this
     stays in normal text flow rather than being a flex row. */
  text-align: center;
  transform: rotate(-8deg);
}

@media (max-width: 991.98px) {
  .hero { overflow: visible; }
  .hero__media { position: relative; inset: auto; width: 100%; height: 300px; }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(239, 245, 246, 0) 62%, rgba(239, 245, 246, .92) 100%);
  }
  .hero__inner { min-height: 0; padding-top: 2.5rem; padding-bottom: 3rem; }
  /* Photo sits above the copy once stacked, so the copy centres under it. */
  .hero__copy { max-width: 40rem; margin-inline: auto; text-align: center; }
  .hero__copy .kicker-rule { margin-inline: auto; }
  .hero__lead { margin-inline: auto; }
  .script--hero { top: 1rem; right: 1.25rem; font-size: 1.48rem; }
}

/* --------------------------------------------------------------------------
   Why choose us
   -------------------------------------------------------------------------- */

.why {
  background: var(--wat-cream);
  border-bottom: 1px solid var(--wat-line);
  padding: 2.75rem 0;
}

.why__item {
  padding: 1rem 1.25rem;
  color: var(--wat-deep);
}
.why__item + .why__item { box-shadow: inset 1px 0 0 var(--wat-line); }

.why__name {
  font-family: var(--ff-sans);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--wat-deep);
  margin: .85rem 0 .3rem;
}
.why__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--wat-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .why__item:nth-child(odd) { box-shadow: none; }
  .why__item { padding: 1.25rem .75rem; }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about {
  position: relative;
  background: var(--wat-white);
  overflow: hidden;
}

.about__media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.about__body {
  position: relative;
  padding: 4.5rem 3rem 4.5rem 4rem;
}
/* Reserve a clear column on the right for the handwritten accent. Below
   1200px the accent is hidden, so the copy takes the full width again. */
@media (min-width: 1200px) {
  .about__body { padding-right: 11rem; }
}
.about__copy { max-width: 34rem; }
.about__copy p {
  color: var(--wat-body);
  margin-bottom: 1.1rem;
}
.about__copy p strong { color: var(--wat-text); font-weight: 500; }
.about__copy .btn { margin-top: .75rem; }

/* Smaller than the hero accent — the mockup sets this one at ~126px wide
   against the hero's 185px. Sits in the gutter reserved by .about__body's
   right padding, so it can never run under the copy. */
.script--about {
  position: absolute;
  right: 1.25rem;
  bottom: 3.5rem;
  width: 9rem;
  font-size: clamp(1.1rem, 2.1vw, 1.51rem);
  text-align: center;
  transform: rotate(-8deg);
}

@media (max-width: 1199.98px) {
  .script--about { display: none; }
}
@media (max-width: 991.98px) {
  .about__media img { min-height: 300px; }
  .about__body { padding: 3rem 1.25rem; }
  .about__copy { margin-inline: auto; text-align: center; }
}
@media (max-width: 767.98px) {
  .about__copy p { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.services {
  background: var(--wat-sage);
  padding: 4rem 0 4.25rem;
}
.services .section-title { margin-bottom: 3rem; }

/* --------------------------------------------------------------------------
   Icon masks

   The Services and Why Choose Us icons are decorative — the heading beside
   each one carries the meaning — so they live in the CSS layer rather than
   the markup. Masking keeps the artwork in separate cacheable files instead
   of inlining ~70KB of paths into every page load, while still colouring them
   from CSS. The files carry no fill of their own, so an <img> would render
   them black rather than brand teal.
   -------------------------------------------------------------------------- */

.service-ic,
.why-ic {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.service-ic {
  width: 54px;
  height: 54px;
  margin: 0 auto .9rem;
  color: var(--wat-deep);
}
.why-ic {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  color: var(--wat-deep);
}

.icon--hair-cut   { -webkit-mask-image: url("../img/svgs/dog_hair_cut.svg");            mask-image: url("../img/svgs/dog_hair_cut.svg"); }
.icon--bath       { -webkit-mask-image: url("../img/svgs/dog_bubblebath_duck.svg");     mask-image: url("../img/svgs/dog_bubblebath_duck.svg"); }
.icon--puppy      { -webkit-mask-image: url("../img/svgs/dog_on_chair.svg");            mask-image: url("../img/svgs/dog_on_chair.svg"); }
.icon--deshedding { -webkit-mask-image: url("../img/svgs/deshedding.svg");              mask-image: url("../img/svgs/deshedding.svg"); }
.icon--nails      { -webkit-mask-image: url("../img/svgs/nail_clipped.svg");            mask-image: url("../img/svgs/nail_clipped.svg"); }

.icon--cared-for  { -webkit-mask-image: url("../img/svgs/cared_for_fog.svg");           mask-image: url("../img/svgs/cared_for_fog.svg"); }
.icon--all-dogs   { -webkit-mask-image: url("../img/svgs/all_dogs_welcome.svg");        mask-image: url("../img/svgs/all_dogs_welcome.svg"); }
.icon--wave       { -webkit-mask-image: url("../img/svgs/waves-icon.svg");              mask-image: url("../img/svgs/waves-icon.svg"); }
.icon--happy-dog  { -webkit-mask-image: url("../img/svgs/happy_dog.svg");               mask-image: url("../img/svgs/happy_dog.svg"); }

.service__name {
  font-family: var(--ff-sans);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--wat-deep);
  margin-bottom: .35rem;
}
.service__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--wat-muted);
  max-width: 15rem;
  margin: 0 auto;
}

.services__list { margin-bottom: 2.75rem; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery { background: var(--wat-white); padding: 4rem 0 0; }

.gallery__head {
  position: relative;
  margin-bottom: 2.25rem;
}

.gallery__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  color: var(--wat-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--wat-deep);
  padding-bottom: 2px;
}
.gallery__more .ic { transition: transform .2s ease; }
.gallery__more:hover .ic { transform: translateX(4px); }

@media (min-width: 992px) {
  .gallery__more { position: absolute; right: 0; bottom: .35rem; }
}
@media (max-width: 991.98px) {
  .gallery__head { text-align: center; }
  .gallery__more { margin-top: 1rem; }
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 10px 10px;
}
.gallery__grid img {
  width: 100%;
  aspect-ratio: 8 / 7;
  object-fit: cover;
  display: block;
}

@media (max-width: 767.98px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Footer / contact
   -------------------------------------------------------------------------- */

.site-footer {
  background:
    radial-gradient(120% 140% at 78% 15%, #17454B 0%, rgba(23, 69, 75, 0) 55%),
    var(--wat-deep);
  color: var(--wat-on-dark);
  padding-top: 4.25rem;
}

.footer__main { padding-bottom: 1rem; }

.footer__lead {
  color: var(--wat-on-dark);
  max-width: 30rem;
  margin-bottom: 2.25rem;
  opacity: .9;
}

.footer__contacts li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--fs-small);
  line-height: 1.55;
}
/* Give each icon a box exactly one line tall and centre the glyph inside it.
   Font Awesome glyphs sit on the text baseline and vary in height, so without
   this they drift up or down depending on which icon it is. The list keeps
   align-items: flex-start so the two-line item stays aligned to its top line. */
.footer__contacts i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.55em;
  font-size: 1.05em;
  opacity: .85;
}
.footer__contacts a {
  color: var(--wat-on-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.footer__contacts a:hover { color: #fff; border-bottom-color: currentColor; }

.footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  position: relative;
}
@media (min-width: 992px) {
  .footer__brand::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 78%;
    background: rgba(220, 232, 230, .22);
  }
}

.footer__logo {
  width: 230px;
  height: auto;
}

.script--footer {
  color: #fff;
  text-align: center;
  transform: rotate(-8deg);
}
.script--footer .ic-script { display: block; margin: .45rem auto 0; }

.footer__bar {
  margin-top: 3.5rem;
  padding: 1.1rem 0;
  background: var(--wat-bar);
  font-size: .88rem;
  color: rgba(220, 232, 230, .75);
}
.footer__bar .social-link { color: rgba(220, 232, 230, .85); }
.footer__bar .social-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@media (max-width: 991.98px) {
  .footer__brand { flex-direction: row; justify-content: flex-start; padding-top: 1rem; }
  .site-footer { padding-top: 3rem; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn-brand:hover { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}