/* =========================================================================
   THEME: HOME (index.html)
   Loaded after base.css. Defines this page's palette/typography tokens,
   then styles the components unique to the homepage (the two-column
   "seam" intro, services columns, visiting-hours block, contact card).
   ========================================================================= */

:root{
  --ink:#1B2A3D;
  --ink-soft:#5B6B7D;
  --bg:#F6F2E7;
  --bg-card:#FFFFFF;
  --accent:#C98A2C;      /* gold */
  --accent-deep:#A66F1D;
  --line:rgba(27,42,61,0.14);
  --focus-color:#C98A2C;

  --wrap-max:1160px;
  --section-pad:80px;
  --nav-bg:rgba(246,242,231,0.92);
  --btn-radius:2px;

  /* Per-professional accents used only on this page's split intro */
  --a-tint:#FBEFE9; --a-accent:#D9694F;
  --l-tint:#E9F1F0; --l-accent:#2F8F82;
}

body{ font-family:'Inter', sans-serif; }
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; }

.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); }

/* ---------- Hero intro ---------- */
.hero{ padding:64px 0 0; }
.hero-intro{ text-align:center; max-width:680px; margin:0 auto 48px; }
.hero-intro h1{ font-size:clamp(2rem,4vw,2.9rem); margin-top:14px; }
.hero-intro p{ margin-top:16px; color:var(--ink-soft); font-size:1.05rem; }

/* ---------- Seam: two-professional split intro ---------- */
.seam{ position:relative; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
@media (max-width:860px){ .seam{ grid-template-columns:1fr; } }
.seam::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); }
@media (max-width:860px){ .seam::after{ display:none; } }
.seam-crest{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:var(--bg);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces'; font-weight:600; color:var(--ink); font-size:.85rem; z-index:3;
}
@media (max-width:860px){ .seam-crest{ display:none; } }

.seam-panel{ padding:56px 48px 64px; display:flex; flex-direction:column; }
@media (max-width:860px){ .seam-panel{ padding:44px 32px; border-bottom:1px solid var(--line); } }
.seam-panel.left{ background:var(--a-tint); align-items:flex-end; }
.seam-panel.left .panel-photo{ align-self:flex-end; }
.seam-panel.left h2,
.seam-panel.left .panel-role,
.seam-panel.left p.desc,
.seam-panel.left .btn{ text-align:right; }
.seam-panel.right{ background:var(--l-tint); align-items:flex-start; }

.panel-photo{ width:160px; max-width:40%; aspect-ratio:3/3.4; overflow:hidden; margin-bottom:24px; border-radius:6px; }
.panel-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){
  .panel-photo{ width:100%; max-width:100%; aspect-ratio:unset; height:auto; }
  .seam-panel.left{ align-items:flex-start; }
}

.seam-panel h2{ font-size:1.6rem; }
.panel-role{ font-weight:700; font-size:.92rem; margin-top:8px; }
.left .panel-role{ color:var(--a-accent); }
.right .panel-role{ color:var(--l-accent); }
.seam-panel p.desc{ color:var(--ink-soft); margin-top:14px; font-size:.98rem; max-width:44ch; }
.seam-panel .btn{ margin-top:auto; }
.left .btn-primary{ background:var(--a-accent); text-align:left; align-self:flex-end; }
.left .btn-primary:hover{ background:#C15A41; }
.right .btn-primary{ background:var(--l-accent); }
.right .btn-primary:hover{ background:#25736A; }

/* ---------- Services ---------- */
.services{ background:#f6e7f6; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .head{ max-width:600px; margin:0 auto 56px; text-align:center; }
  .head .eyebrow{ font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
  .head h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-top:10px; }
  .head p{ color:var(--ink-soft); margin-top:12px; }

/* ---------- Visit / opening hours ---------- */
.visit{ background:var(--ink); color:var(--bg); }
.visit .section-head h2{ color:#fff; }
.visit .section-head p{ color:rgba(246,242,231,0.7); }
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
@media (max-width:820px){ .visit-grid{ grid-template-columns:1fr; } }
.hours-list{ display:flex; flex-direction:column; border:1px solid rgba(246,242,231,0.18); }
.hours-row{ display:flex; justify-content:space-between; padding:13px 20px; font-size:.94rem; border-bottom:1px solid rgba(246,242,231,0.1); }
.hours-row:last-child{ border-bottom:none; }
.hours-row.today{ color:var(--accent); font-weight:700; }
.hours-row .day{ color:rgba(246,242,231,0.85); }
.hours-row.today .day{ color:var(--accent); }
.hours-row .time{ color:rgba(246,242,231,0.6); }
.hours-row.today .time{ color:var(--accent); }
.hours-row.closed .time{ color:#E0917E; }
.visit-info{ display:flex; flex-direction:column; gap:18px; }
.visit-item{ display:flex; gap:14px; align-items:flex-start; }
.visit-item svg{ width:1.25em; height:1.25em; color:var(--accent); flex:none; margin-top:.15em; }
.visit-item h4{ font-family:'Fraunces'; font-weight:600; font-size:1rem; color:#fff; margin:0 0 2px; }
.visit-item p, .visit-item a{ color:rgba(246,242,231,0.72); font-size:.95rem; margin:0; text-decoration:none; }
.visit-item a:hover{ color:var(--accent); }

/* ---------- Contact ---------- */
.contact{ text-align:center; }
.contact-card{
  max-width:600px; margin:0 auto; background:var(--bg-card); border:1px solid var(--line);
  padding:48px 40px;
}
.contact-links{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px; }
.contact-links a{
  background:var(--bg); padding:.7em 1.2em; border:1px solid var(--line); font-size:.92rem;
  transition:background .2s ease;
}
.contact-links a svg{ width:1.05em; height:1.05em; }
.contact-links a:hover{ background:#EFE7D4; }

.sky {
  max-width: 980px;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 30px 24px;
}

.cloud {
  --puff: 26px;

  position: relative;
  background: #ffffff;
  border-radius: 999px;

  padding: 20px 34px;

  box-shadow: 0 16px 30px -16px rgba(27, 42, 61, 0.26);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  animation: drift 8s ease-in-out infinite;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

.cloud::before {
  width: var(--puff);
  height: var(--puff);
  top: -12px;
  left: 22%;
}

.cloud::after {
  width: calc(var(--puff) * 0.75);
  height: calc(var(--puff) * 0.75);
  top: -7px;
  right: 22%;
}

.cloud span {
  position: relative;
  z-index: 1;

  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}

/* Alternate accents */
.cloud:nth-child(odd) span {
  color: var(--a-accent);
}

.cloud:nth-child(even) span {
  color: var(--l-accent);
}

/* Size variations */
.cloud.lg {
  padding: 26px 42px;
}

.cloud.lg span {
  font-size: 1.15rem;
}

.cloud.sm {
  padding: 16px 26px;
}

.cloud.sm span {
  font-size: 0.92rem;
}

/* Animation timing */
.cloud:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 7.5s;
}

.cloud:nth-child(2) {
  animation-delay: -1.4s;
  animation-duration: 8.2s;
}

.cloud:nth-child(3) {
  animation-delay: -2.6s;
  animation-duration: 6.8s;
}

.cloud:nth-child(4) {
  animation-delay: -0.8s;
  animation-duration: 9s;
}

.cloud:nth-child(5) {
  animation-delay: -3.2s;
  animation-duration: 7.9s;
}

.cloud:nth-child(6) {
  animation-delay: -2s;
  animation-duration: 8.6s;
}

.cloud:nth-child(7) {
  animation-delay: -4s;
  animation-duration: 7.2s;
}

.cloud:nth-child(8) {
  animation-delay: -1s;
  animation-duration: 8.9s;
}

@keyframes drift {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-9px) rotate(0.5deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@media (max-width: 640px) {
  .cloud {
    padding: 16px 24px;
  }

  .cloud.lg {
    padding: 20px 30px;
  }

  .cloud span {
    font-size: 0.92rem;
  }

  .cloud.lg span {
    font-size: 1rem;
  }

  @keyframes drift {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-4px);
    }

    100% {
      transform: translateY(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud {
    animation: none;
  }
}