/* =========================
   Baby Blocks Bridal — style.css (DROP-IN FULL FILE)
========================= */

:root{
  --navy:#0b2458;
  --sky:#7cc9ff;
  --sky2:#eef7ff;

  /* calmer banner colour */
  --skybar:#cfe9fb;
  --skybarText:rgba(11,36,88,.92);
  --skybarDot:rgba(11,36,88,.35);

  --ink:#061631;
  --muted:rgba(6,22,49,.70);
  --line:rgba(6,22,49,.14);

  --wrap:1200px;

  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --script:"Petit Formal Script","Brush Script MT",cursive;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:var(--sans);
  line-height:1.65;
}
.wrap{
  width:min(var(--wrap), calc(100% - 48px));
  margin:0 auto;
}
a{ color:inherit; }
.muted{ color:var(--muted); }

.link{
  color:var(--navy);
  text-decoration:none;
  border-bottom:2px solid rgba(124,201,255,.9);
}
.link:hover{ border-bottom-color:var(--navy); }

.skip{
  position:absolute;
  left:16px; top:16px;
  background:#fff;
  border:1px solid var(--line);
  padding:10px 12px;
  transform: translateY(-140%);
  z-index:999;
}
.skip:focus{ transform: translateY(0); }

/* =========================
   TOP HEADER
========================= */
.topbar{
  background:#fff;
  position: sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo__img{ height:92px; width:auto; display:block; }

.nav{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.nav a{
  text-decoration:none;
  color:rgba(6,22,49,.85);
  border-bottom:2px solid transparent;
  padding:6px 0;
}
.nav a:hover{ border-bottom-color:rgba(124,201,255,.9); }

/* mobile button */
.menuBtn{
  display:none;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  padding:10px 12px;
  font-weight:900;
  letter-spacing:.35px;
  text-transform:uppercase;
  font-size:12px;
}

/* mobile nav */
.mobileNav{
  display:none;
  background:#fff;
  border-top:1px solid var(--line);
  padding:18px 0 22px;
}
.mobileNav.is-open{ display:block; }
.mobileNav a{
  display:block;
  width:min(520px, calc(100% - 48px));
  margin:0 auto;
  padding:14px 0;
  text-align:center;
  color:rgba(6,22,49,.88);
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  letter-spacing:.6px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(6,22,49,.10);
}
.mobileNav a:last-child{ border-bottom:0; }

/* =========================
   ANNOUNCEMENT
   Desktop: static row
   Mobile: marquee
========================= */
.announce{
  background: var(--skybar);
  border-bottom:1px solid rgba(6,22,49,.12);
}
.announce__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  padding:12px 0;
}
.announce__item{
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.45px;
  text-decoration:none;
  color:var(--skybarText);
  border-bottom:2px solid rgba(11,36,88,.18);
  padding-bottom:2px;
}
.announce__item:hover{ border-bottom-color:rgba(11,36,88,.45); }
.announce__sep{ color:var(--skybarDot); font-weight:900; }

/* marquee container exists in your HTML */
.announce__marquee{ display:none; }

/* =========================
   HERO
========================= */
.hero{
  padding:70px 0 60px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(223,242,255,.55), rgba(255,255,255,0) 65%);
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.eyebrow{
  margin:0 0 10px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(6,22,49,.78);
}
.hero__h1{
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(38px, 4vw, 64px);
  line-height:.95;
  color:#071a39;
}
.hero__h1 em{ font-style:italic; }
.hl{
  background: linear-gradient(180deg, transparent 55%, rgba(124,201,255,.60) 55%);
  padding:0 .22em;
}
.hl2{ position:relative; display:inline-block; }
.hl2::after{
  content:"";
  position:absolute;
  left:-8px; right:-8px;
  bottom:.22em;
  height:.35em;
  background: rgba(124,201,255,.55);
  transform: rotate(-1.5deg);
  z-index:-1;
}
.hero__sub{
  margin:16px 0 18px;
  font-size:18px;
  color:rgba(6,22,49,.78);
  max-width:58ch;
}
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin:0 0 18px; }

.btn{
  display:inline-block;
  padding:12px 16px;
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  letter-spacing:.4px;
  text-transform:uppercase;
  background:var(--navy);
  color:#fff;
  border:2px solid var(--navy);
}
.btn:hover{ background:#071a39; border-color:#071a39; }

.btn--outline{ background:transparent; color:var(--navy); }
.btn--outline:hover{ background:var(--navy); color:#fff; }

.mini{
  border-top:1px solid var(--line);
  padding-top:12px;
  color:rgba(6,22,49,.74);
  font-size:14px;
}
.mini p{ margin:6px 0; }

.photoFrame{
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px 999px 40px 40px;
  overflow:hidden;
}
.photoFrame img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  display:block;
}
.photoNote{ margin:10px 0 0; font-size:12px; color:var(--muted); }

/* =========================
   SECTIONS
========================= */
.section{
  padding:48px 0;
  border-bottom:1px solid var(--line);
}
.section--tint{ background: var(--sky2); }

h2{
  margin:0;
  font-family:var(--serif);
  font-size:34px;
  letter-spacing:-.4px;
}
.rule{
  width:130px;
  height:6px;
  background:var(--sky);
  border-radius:999px;
  margin:14px 0 28px;
}
h3{
  margin:0 0 10px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:rgba(6,22,49,.80);
}
.lede{
  margin:0;
  font-size:18px;
  color:rgba(6,22,49,.78);
  max-width:70ch;
}
.cols{ display:grid; gap:28px; }
.cols--2{ grid-template-columns:1.2fr .8fr; gap:40px; align-items:stretch; }
.cols--3{ grid-template-columns:repeat(3, 1fr); }

.list{ margin:0; padding-left:18px; }
.list li{ margin:8px 0; }
.list li::marker{ color:var(--sky); }

/* About polish */
#about .wrap{ max-width:1100px; }
#about .lede{ max-width:52ch; }

/* =========================
   EXPERIENCE cards
========================= */
#experience{
  background:#f6fbff;
}
#experience .cols > div{
  background:#fff;
  padding:28px 30px;
  border-radius:18px;
  border:1px solid rgba(6,22,49,.10);
  box-shadow: 0 8px 30px rgba(11,36,88,.04);
}

/* =========================
   BLOCKS cards (equal height)
========================= */
.blocks{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  margin-top:18px;
  align-items:stretch;
}
.block{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 18px 16px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.block::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:6px; width:100%;
  background:rgba(124,201,255,.85);
}
.block h3{ margin:10px 0 10px; }
.block .muted{ margin:0 0 10px; }
.block .list{ margin:0; }

/* =========================
   ADD-ONS cards (equal height + equal width)
========================= */
#addons .cols{
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  align-items:stretch;
}
#addons .cols > div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 22px 20px;
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
  min-height:220px;
}
#addons .cols > div::before{
  content:"";
  position:absolute;
  top:16px; left:16px;
  width:72px; height:8px;
  background:rgba(124,201,255,.85);
  border-radius:999px;
}
#addons h3{ margin-top:22px; }

/* =========================
   ENQUIRE
========================= */
.embed iframe{
  width:100%;
  min-height:540px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
}
.note{ margin-top:14px; font-size:12px; color:var(--muted); }

/* =========================
   FAQ (fix arrows)
========================= */
#faqs .faq{
  background:#fff;
  border-radius:22px;
  padding:18px 24px;
  margin-bottom:18px;
  border:1px solid var(--line);
}
#faqs .faq summary{
  list-style:none;
  cursor:pointer;
  font-family:var(--serif);
  font-size:24px;
  color:#071a39;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
#faqs .faq summary::-webkit-details-marker{ display:none; }

/* remove any accidental extra markers/icons */
#faqs .faq summary::marker{ content:""; }

#faqs .faq summary::after{
  content:"›";
  font-family:var(--sans);
  font-weight:900;
  font-size:26px;
  color:var(--navy);
  transition: transform .2s ease;
}
#faqs .faq[open] summary::after{ transform: rotate(90deg); }

#faqs .faq p{
  margin-top:12px;
  font-size:16px;
  color:rgba(6,22,49,.78);
  max-width:75ch;
}

/* =========================
   FOOTER
========================= */
.footer{ padding:22px 0 30px; }
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  .cols--2, .cols--3{ grid-template-columns:1fr; }
  .blocks{ grid-template-columns:1fr; }
  #addons .cols{ grid-template-columns:1fr; }
  .logo__img{ height:86px; }
}

@media (max-width:820px){
  .nav{ display:none; }
  .menuBtn{ display:inline-block; }

  /* switch to marquee on mobile */
  .announce__inner{ display:none; }
  .announce__marquee{ display:block; overflow:hidden; padding:10px 0; }
  .announce__track{
    display:flex;
    width:max-content;
    will-change: transform;
    animation: announceMarquee 14s linear infinite;
  }
  .announce__group{
    display:flex;
    align-items:center;
    gap:18px;
    padding-right:18px;
  }

  /* make it readable */
  .announce{ background: linear-gradient(90deg, #9fd4fb, #cfe9fb); }
  .announce__item{
    font-size:12px;
    font-weight:900;
    color: rgba(11,36,88,.95);
    border-bottom-color: rgba(11,36,88,.25);
  }
  .announce__sep{ color: rgba(11,36,88,.40); }

  @keyframes announceMarquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce){
    .announce__track{ animation:none; }
    .announce__marquee{ overflow:auto; }
  }
}
/* =========================
   FIX: Announcement strip works with your marquee HTML
   (desktop = static, mobile = scrolling)
   Paste at END of style.css
========================= */

/* show the marquee container on desktop too */
.announce__marquee{
  display:block;
  overflow:hidden;
  padding:12px 0;
}

/* desktop: static row */
.announce__track{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  width:100%;
  animation:none;
}

/* desktop: only show one group so it doesn't look duplicated */
.announce__group{ display:flex; align-items:center; gap:18px; }
.announce__group + .announce__group{ display:none; }

/* make links readable */
.announce__item{
  color: rgba(11,36,88,.95);
  border-bottom:2px solid rgba(11,36,88,.22);
}
.announce__item:hover{ border-bottom-color: rgba(11,36,88,.45); }
.announce__sep{ color: rgba(11,36,88,.40); }

/* mobile: marquee scroll + show duplicate group */
@media (max-width: 820px){
  .announce__track{
    width:max-content;
    justify-content:flex-start;
    animation: announceMarquee 14s linear infinite;
  }

  .announce__group + .announce__group{ display:flex; }

  @keyframes announceMarquee{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce){
    .announce__track{ animation:none; }
    .announce__marquee{ overflow:auto; }
  }
}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.gItem{
  grid-column: span 4;
  border-radius: 18px;
  overflow:hidden;
  display:block;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  transform: translateZ(0);
}

.gItem img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (max-width: 900px){
  .gItem{ grid-column: span 6; }
}

@media (max-width: 560px){
  .gallery{ gap: 10px; }
  .gItem{ grid-column: span 12; }
  .gItem img{ aspect-ratio: 3 / 2; }
}

/* ===== Enquiry form card ===== */
.formCard{
  max-width: 860px;
  margin: 18px 0 0;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(14,42,71,.12);
  box-shadow: 0 18px 50px rgba(14,42,71,.08);
}

/* Grid feels tight + premium */
.fGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

/* Labels */
.fField{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.fField span{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(11,18,32,.75);
}

/* Inputs */
.fField input,
.fField select,
.fField textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(14,42,71,.16);
  background: #fff;
  font: inherit;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Focus */
.fField input:focus,
.fField select:focus,
.fField textarea:focus{
  outline: none;
  border-color: rgba(121,183,255,.9);
  box-shadow: 0 0 0 4px rgba(121,183,255,.18);
}

/* Make textarea not a bloody airport runway */
.fField textarea{
  min-height: 110px;
  resize: vertical;
}

/* Span helpers */
.fSpan2{ grid-column: span 2; }

/* Button: centered, proper size, not stuck left */
.enquiryForm .btn{
  margin-top: 14px;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 16px;
}

/* Mobile: single column, still pretty */
@media (max-width: 720px){
  .formCard{ padding: 16px; border-radius: 18px; }
  .fGrid{ grid-template-columns: 1fr; gap: 12px; }
  .fSpan2{ grid-column: auto; }
}

/* Center the form card */
.formCard{
  margin: 18px auto 0;          /* centers */
  max-width: 860px;
}

/* Nice little header */
.formHead{
  margin-bottom: 12px;
}

.formTitle{
  margin: 0;
  font-size: 22px;
  letter-spacing: -.01em;
}

.formSub{
  margin: 6px 0 0;
  color: rgba(11,18,32,.65);
  font-size: 14px;
}

/* Bottom contact band (Wedding Nanny style) */
.contactBand{
  margin-top: 46px;
  background: var(--skybar); /* your sky blue */
  color: var(--skybarText);
}


.contactBand__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 44px 0;
}

.contactBand__kicker{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
  opacity: .9;
}

.contactBand__title{
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: .02em;
}

.contactBand__lines{
  display: grid;
  gap: 10px;
  font-size: 16px;
}

.contactBand__link{
  color: var(--skybarText);
  text-decoration: none;
  opacity: .95;
}

.contactBand__link:hover{
  text-decoration: underline;
}

.contactBand__muted{
  opacity: .85;
}

.contactBand__center{
  display: flex;
  justify-content: center;
}

.contactBand__logo{
  max-width: 220px;   /* smaller */
  width: 100%;
  height: auto;
  opacity: .95;
}


.contactBand__right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.contactBand__social{
  display: flex;
  gap: 12px;
}

.socialBtn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--skybarText);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  transition: transform .15s ease, background .15s ease;
}

.socialBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
}

#enquiry-form{
  scroll-margin-top: 120px;
}

/* Mobile stacking like the Wedding Nanny band */
@media (max-width: 900px){
  .contactBand__grid{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 34px 0;
  }
  .contactBand__right{
    align-items: center;
  }
  .contactBand__center{
    order: -1;
  }
  .contactBand__logo{
    max-width: 240px;
  }
}

/* Developer credit footer */
.siteCredit{
  background: #f6f8fb; /* very light soft grey/blue */
  border-top: 1px solid rgba(14,42,71,.08);
}

.siteCredit__inner{
  padding: 14px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(11,18,32,.65);
}

.siteCredit a{
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s ease;
}

.siteCredit a:hover{
  opacity: .7;
}