/* ============================================================
   Silver Coast Paws & Home — 2026 Modern Redesign
   DM Serif Display + Inter · Photo-first · Conversion-focused
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- DESIGN TOKENS ---- */
:root {
  --ocean:         #4B8F8C;
  --ocean-dark:    #2D6360;
  --ocean-xdark:   #1A3836;
  --ocean-light:   #6BAFAC;
  --seafoam:       #C3E0DF;
  --seafoam-light: #EBF5F5;
  --terracotta:    #C4734A;
  --terra-dark:    #A55A35;
  --terra-light:   #E8A07C;
  --sand:          #F3EADD;
  --sand-mid:      #E8D9C6;
  --sand-dark:     #D4C0A8;
  --driftwood:     #8C7055;
  --dark:          #1A1A1A;
  --mid:           #555555;
  --light:         #888888;
  --border:        #E8E0D6;
  --white:         #FFFFFF;

  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --section-gap:  clamp(4rem, 8vw, 7rem);
  --container-max: 1200px;
  --container-px:  clamp(1.25rem, 5vw, 2.5rem);

  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 999px;

  --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
  --shadow-md: 0 8px 28px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 50px rgba(0,0,0,.14);
  --shadow-xl: 0 24px 70px rgba(0,0,0,.18);

  --dur:    260ms;
  --ease:   cubic-bezier(.25,.46,.45,.94);
  --bounce: cubic-bezier(.34,1.56,.64,1);
}

/* ---- RESET ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  font-size: 1rem; line-height: 1.65;
  color: var(--dark); background: var(--white);
  overflow-x: hidden;
}
img    { display:block; max-width:100%; height:auto; }
a      { color:inherit; text-decoration:none; }
ul     { list-style:none; }
button { cursor:pointer; font-family:inherit; }

/* ---- TYPOGRAPHY ---- */
h1,h2,h3,h4 {
  font-family: var(--font-serif);
  font-weight: 400; line-height: 1.15;
  letter-spacing: -.01em; color: var(--dark);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.15rem; }
p  { color: var(--mid); }
em { font-style: italic; }
strong { font-weight:600; color:var(--dark); }

.lead { font-size: clamp(1rem,1.5vw,1.15rem); color:var(--mid); line-height:1.75; }

.label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ocean);
  margin-bottom: .75rem;
}
.label.light    { color: var(--seafoam); }
.label.centered { justify-content: center; }
.text-center    { text-align: center; }

/* ---- LAYOUT ---- */
.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--container-px); }
.section           { padding: var(--section-gap) 0; }
.section--white    { background: var(--white); }
.section--sand     { background: var(--sand); }
.section--ocean    { background: var(--ocean-dark); }

.section-header                    { margin-bottom: 3rem; }
.section-header h2                 { margin-bottom: .75rem; }
.section-header .lead              { max-width: 60ch; }
.section-header.text-center .lead  { margin: 0 auto; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .78rem 1.8rem;
  border-radius: var(--r-full); font-size: .9rem; font-weight: 600;
  letter-spacing: .01em; transition: all var(--dur) var(--ease);
  border: 2px solid transparent; white-space: nowrap; cursor: pointer;
  text-decoration: none;
}
.btn-sm { padding:.55rem 1.25rem; font-size:.8rem; }
.btn-lg { padding:1rem 2.25rem; font-size:1rem; }

.btn-primary       { background:var(--ocean);       color:#fff; }
.btn-primary:hover { background:var(--ocean-dark);  transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-terracotta       { background:var(--terracotta); color:#fff; }
.btn-terracotta:hover { background:var(--terra-dark); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-outline          { background:transparent; color:var(--ocean-dark); border-color:var(--ocean); }
.btn-outline:hover    { background:var(--seafoam-light); transform:translateY(-2px); }
.btn-outline-white    { background:transparent; color:white; border-color:rgba(255,255,255,.55); }
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:white; }
.btn-whatsapp         { background:#25D366; color:#fff; }
.btn-whatsapp:hover   { background:#1EB257; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-book             { background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
.btn-book:hover       { background:var(--terra-dark); transform:translateY(-2px); }

/* ---- NAV ---- */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 1.4rem var(--container-px);
  transition: background 400ms var(--ease), padding 300ms var(--ease), box-shadow 300ms;
}
.nav.scrolled, .nav.solid {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border);
  padding: .9rem var(--container-px);
}
.nav__inner {
  max-width: var(--container-max); margin:0 auto;
  display: flex; align-items: center; gap: 2rem;
}
.nav__logo          { display:flex; flex-direction:column; line-height:1.1; flex-shrink:0; }
.nav__logo-main     { font-family:var(--font-serif); font-size:1.35rem; color:white; transition:color var(--dur) var(--ease); }
.nav__logo-sub      { font-size:.62rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.65); transition:color var(--dur) var(--ease); }
.nav.scrolled .nav__logo-main,
.nav.solid .nav__logo-main   { color: var(--dark); }
.nav.scrolled .nav__logo-sub,
.nav.solid .nav__logo-sub    { color: var(--ocean); }

.nav__links     { display:flex; gap:2rem; margin-left:auto; }
.nav__links a   {
  font-size:.875rem; font-weight:500;
  color:rgba(255,255,255,.88); transition:color var(--dur) var(--ease);
  position:relative;
}
.nav__links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--terracotta); border-radius:1px;
  transform:scaleX(0); transition:transform var(--dur) var(--ease);
  transform-origin:left;
}
.nav__links a:hover::after,
.nav__links a.active::after   { transform:scaleX(1); }
.nav.scrolled .nav__links a,
.nav.solid .nav__links a      { color:var(--mid); }
.nav.scrolled .nav__links a:hover,
.nav.solid .nav__links a:hover,
.nav.scrolled .nav__links a.active,
.nav.solid .nav__links a.active { color:var(--dark); }

.nav__cta { display:flex; gap:.75rem; margin-left:1.5rem; }
.nav.hero-nav .nav__cta .btn-outline {
  color:white; border-color:rgba(255,255,255,.45);
}
.nav.hero-nav .nav__cta .btn-outline:hover {
  background:rgba(255,255,255,.1); border-color:white;
}

/* Hamburger */
.nav__hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:.5rem; margin-left:auto;
}
.nav__hamburger span {
  display:block; width:24px; height:2px; background:white;
  border-radius:1px; transition:all var(--dur) var(--ease);
}
.nav.scrolled .nav__hamburger span,
.nav.solid    .nav__hamburger span { background:var(--dark); }
.nav__hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav__hamburger.open span:nth-child(2) { opacity:0; }
.nav__hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
.nav__mobile {
  display:none; position:fixed; inset:0; background:var(--white);
  flex-direction:column; align-items:center; justify-content:center;
  gap:2rem; z-index:99; opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.nav__mobile.open { opacity:1; pointer-events:all; }
.nav__mobile a    { font-family:var(--font-serif); font-size:2rem; color:var(--dark); }
.nav__mobile a.active { color:var(--ocean); }

/* ---- HERO ---- */
.hero {
  position:relative; min-height:100svh;
  display:flex; align-items:center; overflow:hidden;
}
.hero__bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 35%;
  background-image: url('https://drive.google.com/thumbnail?id=1KhKX71y-Oxi99DY--J0ZwWb7gCIIKB_s&sz=w2000');
  transform:scale(1.06); transition:transform 8s ease-out;
}
.hero.loaded .hero__bg { transform:scale(1); }
.hero__bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(105deg,rgba(15,30,30,.82) 0%,rgba(15,30,30,.55) 55%,rgba(15,30,30,.22) 100%);
}
.hero__inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:55fr 45fr; gap:4rem; align-items:center;
  padding:7rem var(--container-px) 6rem;
  max-width:var(--container-max); margin:0 auto; width:100%;
}
.hero__content { color:white; }
.hero__tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9);
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.45rem 1.1rem; border-radius:var(--r-full); margin-bottom:1.5rem;
}
.hero__content h1 { color:white; font-size:clamp(2.8rem,6vw,5rem); line-height:1.06; margin-bottom:1.25rem; }
.hero__content h1 em { color:var(--terra-light); }
.hero__tagline { color:rgba(255,255,255,.78); font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.7; max-width:50ch; margin-bottom:2rem; }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hero__phones  { display:flex; flex-direction:column; gap:.45rem; }
.hero__phone   { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:rgba(255,255,255,.65); }
.hero__phone strong { color:white; font-weight:600; }

.hero__visual { display:flex; flex-direction:column; gap:1rem; align-items:flex-end; }
.hero__photo-frame {
  position:relative; width:100%; max-width:360px;
  border-radius:var(--r-2xl); overflow:hidden;
  box-shadow:var(--shadow-xl); border:3px solid rgba(255,255,255,.18);
  aspect-ratio:4/5;
}
.hero__photo-frame img { width:100%; height:100%; object-fit:cover; }
.hero__cards   { display:flex; gap:.75rem; width:100%; max-width:360px; }
.hero__card {
  background:rgba(255,255,255,.1); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-lg);
  padding:1rem 1.1rem; text-align:center; color:white; flex:1;
}
.hero__card-icon  { font-size:1.4rem; margin-bottom:.3rem; }
.hero__card-value { font-family:var(--font-serif); font-size:1.5rem; }
.hero__card-label { font-size:.68rem; opacity:.7; line-height:1.3; margin-top:.15rem; }

.hero__waves { position:absolute; bottom:-1px; left:0; right:0; pointer-events:none; line-height:0; }
.hero__waves svg { width:100%; display:block; }

/* ---- MARQUEE ---- */
.trust-marquee { background:var(--ocean-dark); padding:.9rem 0; overflow:hidden; }
.trust-marquee__track {
  display:flex; gap:3rem;
  animation:marquee 28s linear infinite; width:max-content;
}
.trust-marquee:hover .trust-marquee__track { animation-play-state:paused; }
.trust-item {
  display:flex; align-items:center; gap:.65rem;
  color:rgba(255,255,255,.82); font-size:.78rem; font-weight:500; white-space:nowrap;
}
.trust-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.28); flex-shrink:0; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- SERVICES GRID ---- */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card {
  background:var(--white); border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--border); transition:all var(--dur) var(--ease);
  box-shadow:var(--shadow-xs);
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-card__img { aspect-ratio:16/9; overflow:hidden; background:var(--sand-mid); }
.service-card__img img { width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease); }
.service-card:hover .service-card__img img { transform:scale(1.07); }
.service-card__body { padding:1.5rem; }
.service-card__cat  { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ocean); margin-bottom:.4rem; }
.service-card__title { font-family:var(--font-serif); font-size:1.25rem; color:var(--dark); margin-bottom:.45rem; line-height:1.25; }
.service-card__desc  { font-size:.875rem; color:var(--mid); line-height:1.65; margin-bottom:1rem; }
.service-card__footer { display:flex; align-items:center; justify-content:space-between; padding-top:.75rem; border-top:1px solid var(--border); }
.service-card__price { font-weight:700; font-size:.9rem; color:var(--dark); }
.service-card__link  { font-size:.8rem; font-weight:600; color:var(--ocean); transition:color var(--dur) var(--ease); }
.service-card__link:hover { color:var(--terracotta); }

/* ---- ABOUT SPLIT ---- */
.about__inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about__photo-wrap { position:relative; }
.about__photo { border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-xl); }
.about__photo img { width:100%; height:100%; object-fit:cover; }
.about__dog-tags { position:absolute; bottom:-1rem; right:-1rem; display:flex; gap:.5rem; }
.about__dog-tag {
  background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-full);
  padding:.4rem .9rem; font-size:.78rem; font-weight:600; color:var(--driftwood);
  box-shadow:var(--shadow-sm);
}
.about__content h2 { margin-bottom:1.25rem; }
.about__content p  { margin-bottom:1rem; }
.about__quote {
  margin:1.75rem 0; padding:1.5rem 1.75rem;
  background:var(--seafoam-light); border-left:3px solid var(--ocean);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.about__quote p    { color:var(--ocean-dark); font-style:italic; font-size:1.05rem; margin:0 0 .5rem; }
.about__quote cite { font-size:.8rem; color:var(--light); font-style:normal; }
.about__stats { display:flex; gap:2rem; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border); }
.about__stat-value { font-family:var(--font-serif); font-size:2.25rem; color:var(--ocean); line-height:1; }
.about__stat-label { font-size:.78rem; color:var(--mid); margin-top:.3rem; }

/* ---- GALLERY ---- */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.gallery-item  {
  border-radius:var(--r-lg); overflow:hidden;
  cursor:pointer; position:relative; aspect-ratio:1;
}
.gallery-item:nth-child(1) { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.gallery-item:nth-child(6) { grid-column:span 2; aspect-ratio:2/1; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease); display:block; }
.gallery-item:hover img { transform:scale(1.07); }
.gallery-item__overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__overlay { opacity:1; }
.gallery-zoom-icon { color:white; font-size:2rem; }

/* ---- PACKAGES ---- */
.packages-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
.package-card {
  background:var(--white); border-radius:var(--r-xl);
  border:1.5px solid var(--border); overflow:hidden;
  transition:all var(--dur) var(--ease);
}
.package-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.package-card--featured {
  background:var(--ocean-dark); border-color:var(--ocean-dark);
  transform:scale(1.02); box-shadow:var(--shadow-lg);
}
.package-card--featured:hover { transform:scale(1.02) translateY(-4px); box-shadow:var(--shadow-xl); }
.package-card__header { padding:2rem 2rem 1.5rem; }
.package-card__tag {
  display:inline-block; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:var(--r-full);
  background:var(--seafoam-light); color:var(--ocean-dark); margin-bottom:1rem;
}
.package-card--featured .package-card__tag { background:rgba(255,255,255,.15); color:rgba(255,255,255,.9); }
.package-card__name  { font-family:var(--font-serif); font-size:1.45rem; color:var(--dark); margin-bottom:.75rem; }
.package-card--featured .package-card__name { color:white; }
.package-card__price { font-family:var(--font-serif); font-size:2.6rem; color:var(--dark); line-height:1; }
.package-card--featured .package-card__price { color:white; }
.package-card__price-note { font-size:.8rem; color:var(--light); margin-top:.35rem; }
.package-card--featured .package-card__price-note { color:rgba(255,255,255,.55); }
.package-card__divider { height:1px; background:var(--border); margin:0 2rem; }
.package-card--featured .package-card__divider { background:rgba(255,255,255,.15); }
.package-card__items { padding:1.5rem 2rem; display:flex; flex-direction:column; gap:.75rem; }
.package-card__item  { display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; color:var(--mid); }
.package-card--featured .package-card__item { color:rgba(255,255,255,.82); }
.package-card__item-check {
  width:18px; height:18px; border-radius:50%;
  background:var(--seafoam-light); color:var(--ocean);
  font-size:.68rem; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; font-weight:700;
}
.package-card--featured .package-card__item-check { background:rgba(255,255,255,.15); color:rgba(255,255,255,.9); }
.package-card__footer { padding:0 2rem 2rem; }

/* ---- BOOKING SECTION ---- */
.booking-section { position:relative; overflow:hidden; }
.booking-section::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:450px; height:450px; border-radius:50%;
  background:rgba(75,143,140,.07); pointer-events:none;
}
.booking-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.booking-photo { border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-xl); }
.booking-photo img { width:100%; height:100%; object-fit:cover; }
.booking-options { display:flex; flex-direction:column; gap:1rem; margin:2rem 0; }
.booking-option {
  display:flex; align-items:center; gap:1.1rem;
  padding:1.25rem 1.5rem; background:var(--white);
  border-radius:var(--r-lg); border:1.5px solid var(--border);
  text-decoration:none; color:var(--dark);
  transition:all var(--dur) var(--ease); box-shadow:var(--shadow-xs);
}
.booking-option:hover { border-color:var(--ocean); box-shadow:var(--shadow-md); transform:translateX(5px); }
.booking-option__icon {
  width:50px; height:50px; border-radius:var(--r-md);
  background:var(--seafoam-light); display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0;
}
.booking-option.whatsapp .booking-option__icon { background:#e5faf0; }
.booking-option.calendar .booking-option__icon { background:#EBF0FF; }
.booking-option__label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--light); margin-bottom:.2rem; }
.booking-option__title { font-weight:600; font-size:.95rem; color:var(--dark); }
.booking-option__sub   { font-size:.78rem; color:var(--mid); }
.booking-option__arrow { margin-left:auto; color:var(--light); font-size:1.1rem; transition:transform var(--dur) var(--ease); }
.booking-option:hover .booking-option__arrow { transform:translateX(4px); color:var(--ocean); }

/* ---- TESTIMONIALS ---- */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testimonial-card {
  background:var(--white); border-radius:var(--r-xl); padding:2rem;
  border:1px solid var(--border); box-shadow:var(--shadow-xs);
  transition:all var(--dur) var(--ease);
}
.testimonial-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.testimonial-stars { color:#F59E0B; font-size:.95rem; margin-bottom:1rem; }
.testimonial-text  { font-style:italic; color:var(--mid); line-height:1.75; margin-bottom:1.25rem; font-size:.925rem; }
.testimonial-author { display:flex; align-items:center; gap:.75rem; }
.testimonial-avatar { width:42px; height:42px; border-radius:50%; background:var(--sand-mid); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.testimonial-name   { font-weight:600; font-size:.875rem; color:var(--dark); }
.testimonial-loc    { font-size:.75rem; color:var(--light); }

/* ---- USP GRID ---- */
.usp-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.25rem;
}
.usp-card {
  text-align:center; padding:2rem 1.25rem;
  border-radius:var(--r-xl); background:var(--sand);
  transition:all var(--dur) var(--ease);
}
.usp-card:hover { box-shadow:var(--shadow-md); background:var(--white); transform:translateY(-3px); }
.usp-card__icon  { font-size:2rem; margin-bottom:.85rem; display:block; }
.usp-card__title { font-weight:700; font-size:.875rem; color:var(--dark); margin-bottom:.4rem; }
.usp-card__desc  { font-size:.8rem; color:var(--mid); line-height:1.55; }

/* ---- CTA BANNER ---- */
.cta-banner { background:linear-gradient(135deg,var(--ocean-xdark),#1A4845); padding:4rem var(--container-px); }
.cta-banner__inner {
  max-width:var(--container-max); margin:0 auto;
  display:flex; align-items:center; gap:3rem; justify-content:space-between;
}
.cta-banner__text h2 { color:white; font-size:clamp(1.5rem,3vw,2.25rem); }
.cta-banner__text p  { color:rgba(255,255,255,.65); margin-top:.5rem; max-width:50ch; }
.cta-banner__actions { display:flex; gap:1rem; flex-shrink:0; flex-wrap:wrap; }

/* ---- SOCIAL CARDS ---- */
.socials-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.social-card {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl); padding:1.75rem; color:white;
  transition:all var(--dur) var(--ease);
}
.social-card:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); transform:translateY(-3px); }
.social-card__platform { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.5rem; }
.social-card__handle   { font-size:1rem; font-weight:600; color:white; margin-bottom:.75rem; }
.social-card__action   { font-size:.8rem; color:rgba(255,255,255,.55); }

/* ---- CONTACT ---- */
.contact-cards-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:3rem; }
.contact-card {
  background:var(--white); border-radius:var(--r-xl); padding:2rem;
  border:1.5px solid var(--border); box-shadow:var(--shadow-xs);
  transition:all var(--dur) var(--ease);
}
.contact-card:hover { box-shadow:var(--shadow-md); border-color:var(--ocean); }
.contact-card__role { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ocean); margin-bottom:.35rem; }
.contact-card__name { font-family:var(--font-serif); font-size:1.45rem; color:var(--dark); margin-bottom:.75rem; }
.contact-card__note { font-size:.875rem; color:var(--mid); margin-bottom:1.25rem; line-height:1.6; }

.contact-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; align-items:start; }
.form-card {
  background:var(--white); border-radius:var(--r-2xl);
  padding:2.75rem; box-shadow:var(--shadow-lg); border:1px solid var(--border);
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.form-field       { display:flex; flex-direction:column; gap:.4rem; }
.form-field.full  { grid-column:span 2; }
.form-field label { font-size:.8rem; font-weight:600; color:var(--dark); }
.form-field input,
.form-field select,
.form-field textarea {
  padding:.78rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--r-md); font-family:var(--font-sans);
  font-size:.9rem; color:var(--dark); background:var(--white);
  outline:none; transition:border-color var(--dur) var(--ease); width:100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--ocean); box-shadow:0 0 0 3px rgba(75,143,140,.1); }
.form-field textarea { min-height:120px; resize:vertical; }
.form-checkboxes { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.25rem; }
.form-checkbox {
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .75rem; border:1.5px solid var(--border);
  border-radius:var(--r-md); cursor:pointer;
  font-size:.82rem; color:var(--mid);
  transition:all var(--dur) var(--ease); user-select:none;
}
.form-checkbox input { display:none; }
.form-checkbox:hover { border-color:var(--ocean); color:var(--dark); background:var(--seafoam-light); }
.form-checkbox.checked { border-color:var(--ocean); background:var(--seafoam-light); color:var(--ocean-dark); font-weight:600; }
.form-checkbox__box {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--border); background:var(--white);
  font-size:.65rem; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--ocean); flex-shrink:0;
  transition:all var(--dur) var(--ease);
}
.form-checkbox.checked .form-checkbox__box { background:var(--ocean); border-color:var(--ocean); color:white; }
.form-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ---- AREA CARDS ---- */
.area-grid { display:flex; flex-direction:column; gap:.75rem; }
.area-card { padding:1rem 1.25rem; border-radius:var(--r-lg); border:1.5px solid var(--border); }
.area-card--primary   { border-color:var(--ocean); background:var(--seafoam-light); }
.area-card--secondary { background:var(--white); }
.area-card__type { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ocean); margin-bottom:.5rem; }
.area-towns  { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.area-town   { padding:.25rem .65rem; background:rgba(75,143,140,.1); color:var(--ocean-dark); border-radius:var(--r-full); font-size:.75rem; font-weight:500; }

/* ---- PAGE HERO (inner pages) ---- */
.page-hero {
  background:linear-gradient(145deg,#1A3836,#2D5F5D);
  padding:calc(72px + 3.5rem) var(--container-px) 3.5rem;
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:500px; height:500px; border-radius:50%;
  background:rgba(75,143,140,.1); pointer-events:none;
}
.page-hero__inner {
  max-width:var(--container-max); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
}
.page-hero__text h1 { color:white; margin:1rem 0; }
.page-hero__text p  { color:rgba(255,255,255,.7); font-size:1.1rem; max-width:55ch; line-height:1.7; }
.page-hero__image { border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow-xl); }
.page-hero__image img { width:100%; height:100%; object-fit:cover; }

/* ---- PRICING TABLES (services page) ---- */
.services-page-nav { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:3rem; }
.services-page-nav a {
  padding:.55rem 1.25rem; border-radius:var(--r-full);
  font-size:.82rem; font-weight:600;
  border:1.5px solid var(--border); color:var(--mid); background:var(--white);
  transition:all var(--dur) var(--ease); text-decoration:none;
}
.services-page-nav a:hover,
.services-page-nav a.active { border-color:var(--ocean); color:var(--ocean-dark); background:var(--seafoam-light); }
.pricing-block { margin-bottom:3.5rem; scroll-margin-top:100px; }
.pricing-block__head {
  display:flex; align-items:center; gap:1rem;
  padding:1.25rem 1.75rem; background:var(--white);
  border:1px solid var(--border); border-bottom:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.pricing-block__icon     { font-size:1.75rem; }
.pricing-block__title    { font-family:var(--font-serif); font-size:1.25rem; color:var(--dark); }
.pricing-block__subtitle { font-size:.8rem; color:var(--mid); margin-top:.2rem; }
.table-wrap { border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-xs); }
.pricing-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.pricing-table th {
  text-align:left; padding:.85rem 1rem; background:var(--sand);
  color:var(--mid); font-size:.7rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; border-bottom:1px solid var(--border);
}
.pricing-table td { padding:.95rem 1rem; color:var(--dark); border-bottom:1px solid rgba(0,0,0,.05); vertical-align:top; }
.pricing-table tr:last-child td  { border-bottom:none; }
.pricing-table tr:hover td       { background:var(--seafoam-light); }
.pricing-table td:nth-child(3)   { font-weight:700; white-space:nowrap; color:var(--ocean-dark); }
.pricing-table td:nth-child(4)   { color:var(--mid); font-size:.82rem; }
.pricing-badge {
  display:inline-block; font-size:.63rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  padding:.18rem .55rem; background:var(--terracotta); color:white;
  border-radius:var(--r-full); margin-left:.4rem; vertical-align:middle;
}
.packages-full { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem; }

/* ---- TEAM (about page) ---- */
.team-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:3rem; }
.team-card {
  background:var(--white); border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:all var(--dur) var(--ease);
}
.team-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.team-card__photo { aspect-ratio:4/3; overflow:hidden; background:var(--sand-mid); }
.team-card__photo img { width:100%; height:100%; object-fit:cover; }
.team-card__body  { padding:2rem; }
.team-card__role  { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ocean); margin-bottom:.4rem; }
.team-card__name  { font-family:var(--font-serif); font-size:1.6rem; color:var(--dark); margin-bottom:1rem; }
.team-card__bio   { font-size:.875rem; color:var(--mid); line-height:1.7; margin-bottom:1.25rem; }
.team-card__skills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.skill-tag { padding:.3rem .85rem; background:var(--seafoam-light); color:var(--ocean-dark); border-radius:var(--r-full); font-size:.75rem; font-weight:600; }

.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.value-card {
  padding:2rem; background:var(--white);
  border-radius:var(--r-xl); border:1px solid var(--border);
  transition:all var(--dur) var(--ease);
}
.value-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.value-card__icon  { font-size:2rem; margin-bottom:1rem; }
.value-card__title { font-weight:700; font-size:1rem; color:var(--dark); margin-bottom:.5rem; }
.value-card__desc  { font-size:.875rem; color:var(--mid); line-height:1.65; }

.dogs-section { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.dogs-photo { border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-xl); }
.dogs-photo img { width:100%; height:100%; object-fit:cover; }

/* ---- FOOTER ---- */
.footer { background:var(--dark); }
.footer__top {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem;
  padding:4rem var(--container-px) 3rem;
  max-width:var(--container-max); margin:0 auto;
}
.footer__brand-name { font-family:var(--font-serif); font-size:1.65rem; color:white; line-height:1.1; }
.footer__brand-sub  { font-family:var(--font-serif); font-size:1rem; color:rgba(255,255,255,.42); margin-bottom:1rem; }
.footer__tagline    { color:rgba(255,255,255,.42); font-size:.875rem; margin-bottom:.75rem; line-height:1.55; }
.footer__location   { font-size:.78rem; color:rgba(255,255,255,.32); margin-bottom:1.25rem; line-height:1.6; }
.footer__wa-row     { display:flex; gap:.5rem; flex-wrap:wrap; }
.footer__wa-btn {
  padding:.45rem 1rem; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13); border-radius:var(--r-full);
  font-size:.8rem; font-weight:600; color:rgba(255,255,255,.72);
  transition:all var(--dur) var(--ease);
}
.footer__wa-btn:hover { background:rgba(255,255,255,.15); color:white; }
.footer__col h5 { font-family:var(--font-serif); font-size:1rem; font-weight:400; color:white; margin-bottom:1.25rem; }
.footer__col ul { display:flex; flex-direction:column; gap:.65rem; }
.footer__col a  { font-size:.8rem; color:rgba(255,255,255,.42); transition:color var(--dur) var(--ease); }
.footer__col a:hover { color:rgba(255,255,255,.88); }
.footer__bottom {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.75rem;
  padding:1.5rem var(--container-px); border-top:1px solid rgba(255,255,255,.07);
  max-width:var(--container-max); margin:0 auto;
  font-size:.75rem; color:rgba(255,255,255,.28);
}

/* ---- FLOATING WHATSAPP ---- */
.wa-float {
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:200;
  display:flex; flex-direction:column; align-items:flex-end; gap:.75rem;
}
.wa-float__bubble {
  background:white; border-radius:var(--r-xl) var(--r-xl) 0 var(--r-xl);
  padding:1.1rem 1.3rem; max-width:220px;
  font-size:.82rem; line-height:1.55;
  box-shadow:var(--shadow-xl); border:1px solid var(--border);
  animation:bubbleIn .3s var(--bounce);
}
@keyframes bubbleIn {
  from{ opacity:0; transform:scale(.8) translateY(10px); }
  to  { opacity:1; transform:scale(1)  translateY(0); }
}
.wa-float__bubble strong { display:block; margin-bottom:.3rem; color:var(--dark); }
.wa-float__close {
  position:absolute; top:.5rem; right:.75rem;
  background:none; border:none; font-size:.9rem; color:var(--light); cursor:pointer;
}
.wa-float__btn {
  width:58px; height:58px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:var(--shadow-lg);
  transition:transform var(--dur) var(--bounce); text-decoration:none;
}
.wa-float__btn:hover { transform:scale(1.12); }

/* ---- TOAST ---- */
.toast {
  position:fixed; bottom:2rem; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--dark); color:white; padding:.75rem 1.5rem;
  border-radius:var(--r-full); font-size:.875rem; font-weight:500;
  z-index:300; opacity:0; transition:all .3s var(--ease); pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- LIGHTBOX ---- */
.lightbox {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox__img {
  max-width:90vw; max-height:88vh; object-fit:contain;
  border-radius:var(--r-xl); box-shadow:var(--shadow-xl);
  animation:lbIn .35s var(--ease);
}
@keyframes lbIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.lightbox__close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:rgba(255,255,255,.15); border:none; color:white; font-size:1.4rem;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--dur);
}
.lightbox__close:hover { background:rgba(255,255,255,.28); }
.lightbox__nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); border:none; color:white; font-size:1.5rem;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--dur);
}
.lightbox__nav:hover { background:rgba(255,255,255,.25); }
.lightbox__nav--prev { left:1.5rem; }
.lightbox__nav--next { right:1.5rem; }

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity:0; transform:translateY(26px);
  transition:opacity 650ms var(--ease), transform 650ms var(--ease);
}
.reveal.visible         { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:100ms; }
.reveal-delay-2 { transition-delay:200ms; }
.reveal-delay-3 { transition-delay:300ms; }
.reveal-delay-4 { transition-delay:400ms; }

/* ---- RESPONSIVE ---- */
@media (max-width:1024px) {
  .services-grid             { grid-template-columns:repeat(2,1fr); }
  .gallery-grid              { grid-template-columns:repeat(3,1fr); }
  .gallery-item:nth-child(6) { grid-column:span 1; aspect-ratio:1; }
  .packages-grid, .packages-full { grid-template-columns:1fr; max-width:500px; }
  .usp-grid                  { grid-template-columns:repeat(3,1fr); }
  .testimonials-grid         { grid-template-columns:1fr 1fr; }
  .footer__top               { grid-template-columns:1fr 1fr; }
  .page-hero__inner          { grid-template-columns:1fr; }
  .page-hero__image          { display:none; }
}
@media (max-width:768px) {
  .nav__links,.nav__cta   { display:none; }
  .nav__hamburger         { display:flex; }
  .nav__mobile            { display:flex; }
  .hero__inner            { grid-template-columns:1fr; padding-top:6rem; }
  .hero__visual           { display:none; }
  .about__inner           { grid-template-columns:1fr; gap:2.5rem; }
  .booking-inner          { grid-template-columns:1fr; }
  .booking-photo          { display:none; }
  .usp-grid               { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid      { grid-template-columns:1fr; }
  .contact-cards-row      { grid-template-columns:1fr; }
  .team-grid              { grid-template-columns:1fr; }
  .values-grid            { grid-template-columns:1fr 1fr; }
  .dogs-section           { grid-template-columns:1fr; }
  .socials-grid           { grid-template-columns:repeat(2,1fr); }
  .cta-banner__inner      { flex-direction:column; text-align:center; }
  .contact-layout         { grid-template-columns:1fr; }
  .form-checkboxes        { grid-template-columns:1fr; }
  .gallery-grid           { grid-template-columns:repeat(2,1fr); }
  .gallery-item:nth-child(1)  { grid-column:span 2; grid-row:span 1; }
  .gallery-item:nth-child(6)  { grid-column:span 2; }
  .footer__top            { grid-template-columns:1fr; gap:2rem; }
  .about__dog-tags        { right:0; }
}
@media (max-width:480px) {
  .services-grid                     { grid-template-columns:1fr; }
  .packages-grid,.packages-full      { max-width:100%; }
  .usp-grid                          { grid-template-columns:1fr; }
  .values-grid                       { grid-template-columns:1fr; }
  .form-grid                         { grid-template-columns:1fr; }
  .form-field.full                   { grid-column:span 1; }
  .hero__actions,.form-actions,.cta-banner__actions { flex-direction:column; }
  .gallery-grid                      { grid-template-columns:1fr; }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(6)         { grid-column:span 1; aspect-ratio:1; }
}