/* Layout: one centred column on cream — wordmark, offer, services, contacts. Palette taken from the printed roll-up. */
:root{
  --cream:#F6F2E9;
  --cream-deep:#EFE9DC;
  --navy:#1C3A5B;
  --navy-soft:#44586E;
  --sage:#6F8F6B;
  --sage-ink:#4C6A49;
  --tan:#D7B088;
  --line:#E3DACB;
  --flag:#FBEFD8;
  --display:"Lora", Georgia, "Times New Roman", serif;
  --body:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*{box-sizing:border-box}

body{
  background:var(--cream);
  color:var(--navy-soft);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:620px;
  margin-inline:auto;
  padding-inline:24px;
  padding-block:64px 44px;
  display:flex;
  flex-direction:column;
  gap:40px;
}

/* --- wordmark --- */

.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}

/* Logo slot: the SVG mark goes here, above the wordmark. */
.mark{width:68px;height:auto;display:block}

.wordmark{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(40px,10vw,60px);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--navy);
  display:flex;
  flex-direction:column;
}
.wordmark .second{color:var(--sage);padding-left:.12em}

.tagline{
  margin:0;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--navy-soft);
}

.rule{height:2px;width:72px;background:var(--tan);border-radius:2px}

/* --- offer --- */

.offer{display:flex;flex-direction:column;gap:12px}

.eyebrow{
  margin:0;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage-ink);
}

h1{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(28px,6vw,38px);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--navy);
  text-wrap:balance;
}

.lede{margin:0;font-size:17px;max-width:46ch}

/* --- services --- */

ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}

li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:16.5px;
  color:var(--navy);
}

li svg{width:19px;height:19px;flex:none;margin-top:3px;stroke:var(--sage);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* --- contacts --- */

.contacts{display:flex;flex-direction:column;border-top:1px solid var(--line)}

.row{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-block:16px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:inherit;
  transition:background-color .15s ease;
}
.row:hover{background:var(--cream-deep)}
.row:focus-visible{outline:2px solid var(--sage-ink);outline-offset:3px;border-radius:4px}

.label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sage-ink);
}

.row .value{
  font-size:clamp(19px,4.4vw,24px);
  font-weight:500;
  color:var(--navy);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  word-break:break-word;
}

.hours{display:flex;flex-direction:column;gap:3px}
.hours .value{font-size:16.5px;color:var(--navy);font-variant-numeric:tabular-nums}

/* --- foot --- */

.note{
  margin:0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--navy-soft);
  max-width:52ch;
}

footer{
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--navy-soft);
  opacity:.75;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}