/* Johnny's Lawns and Gardens — Porirua ------------------------------------
   Look: an old-fashioned broadsheet newspaper. Cream newsprint, black ink,
   thin ruled lines, a blackletter nameplate, serif headlines, drop caps and
   picture captions. The one thing that is NOT in black and white is the
   photos, which stay in full colour so the lawns look like lawns. A single
   deep lawn green carries every button and link.
   ---------------------------------------------------------------------- */

:root {
  --paper: #F4EEE1;
  --paper-2: #EBE3D2;
  --paper-3: #E2D9C4;
  --ink: #1B1A17;
  --ink-2: #33302A;
  --muted: #6B6355;
  --rule: #B8AD96;
  --rule-strong: #1B1A17;
  --green: #2E6B34;
  --green-2: #245429;
  --green-tint: #DCE8D4;
  --red: #9E2A2B;
  --white: #FFFDF8;

  --font-masthead: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-ui: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --header-h: 78px;
  --shadow: 0 2px 0 rgba(27,26,23,.06), 0 14px 30px rgba(27,26,23,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Faint newsprint grain over the whole page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.3rem); font-weight: 900; line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; color: var(--ink-2); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--green); outline-offset: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- Rules (the thin lines a paper is built from) ---------- */
.rule { border: 0; border-top: 1px solid var(--rule-strong); margin: 0; }
.rule-double { border: 0; border-top: 3px double var(--rule-strong); margin: 0; }
.rule-thin { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------- Kicker / section label ---------- */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 18px;
}
.kicker::before, .kicker::after { content: ""; flex: 1; border-top: 1px solid var(--rule-strong); }
.kicker.left::before { display: none; }
.kicker.left { justify-content: flex-start; }
.kicker.left::after { flex: 1; }
.kicker span { white-space: nowrap; }
.kicker .red { color: var(--red); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 28px; border-radius: 2px;
  font-family: var(--font-ui); font-weight: 700; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .2s var(--ease-out), background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary { background: var(--green); border-color: var(--green); color: var(--white); box-shadow: 3px 3px 0 var(--ink); }
.btn-primary:hover { background: var(--green-2); border-color: var(--green-2); box-shadow: 4px 4px 0 var(--ink); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost.on-dark { border-color: var(--paper); color: var(--paper); }
.btn-ghost.on-dark:hover { background: var(--paper); color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { height: 44px; padding: 0 18px; font-size: .8rem; }
.btn-arrow svg { transition: transform .25s var(--ease-out); }
.btn-arrow:hover svg { transform: translateX(4px); }

/* ---------- Ears + masthead (top of every page) ---------- */
.ears {
  font-family: var(--font-ui); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid var(--rule-strong);
}
.ears .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 34px; }
.ears a { color: var(--ink); }
.ears span, .ears a { white-space: nowrap; }
.ears .mid { display: none; }
@media (min-width: 761px) { .ears .mid { display: block; } }
@media (max-width: 600px) {
  .ears { font-size: .6rem; letter-spacing: .08em; }
  .ears .container { padding: 0 16px; min-height: 30px; }
  .ears .extra { display: none; }
}

.masthead { text-align: center; padding: 26px 0 16px; border-bottom: 3px double var(--rule-strong); }
.masthead .nameplate {
  font-family: var(--font-masthead); font-weight: 700; color: var(--ink); text-decoration: none;
  font-size: clamp(2rem, 6.2vw, 4.6rem); font-weight: 900; line-height: 1.05; display: block; letter-spacing: -.02em; text-wrap: balance;
}
.masthead .nameplate:hover { text-decoration: none; }
.masthead .strap {
  margin: 12px auto 0; display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
}
.masthead .strap::before, .masthead .strap::after { content: ""; width: 44px; border-top: 1px solid var(--rule-strong); }
@media (max-width: 600px) {
  .masthead { padding: 18px 0 12px; }
  .masthead .strap { letter-spacing: .1em; font-size: .58rem; gap: 8px; white-space: nowrap; }
  .masthead .strap::before, .masthead .strap::after { width: 18px; }
}

/* ---------- Sticky header (nav bar under the masthead) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 1px 0 var(--paper);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(27,26,23,.12); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 8px 24px; max-width: 1180px; margin: 0 auto; min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-masthead); font-size: 1.7rem; line-height: 1; padding-top: 3px; background: var(--white);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--font-masthead); font-weight: 700; font-size: 1.45rem; color: var(--ink); }
.brand-text small { font-family: var(--font-ui); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.main-nav { display: flex; align-items: center; gap: 0; }
.main-nav a {
  font-family: var(--font-ui); font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); padding: 8px 18px; position: relative; border-left: 1px solid var(--rule);
}
.main-nav a:first-child { border-left: 0; }
.main-nav a:hover { text-decoration: none; }
.main-nav a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 2px; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--green); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.call-now {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--green); color: var(--white); border: 2px solid var(--green);
  height: 46px; padding: 0 20px; border-radius: 2px; box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s ease, transform .2s var(--ease-out), box-shadow .2s ease;
}
.call-now:hover { background: var(--green-2); border-color: var(--green-2); text-decoration: none; transform: translateY(-1px); box-shadow: 4px 4px 0 var(--ink); }
.call-now svg { width: 16px; height: 16px; flex-shrink: 0; }
.call-now .call-number { white-space: nowrap; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 2px;
  border: 2px solid var(--ink); background: var(--white); cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink);
  position: relative; transition: all .25s var(--ease-out);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  :root { --header-h: 68px; }
  .brand-text strong { font-size: 1.25rem; }
  .brand-text small { display: none; }
  .call-now { padding: 0 14px; height: 44px; }
  .call-now .call-number { display: none; }

  /* Mobile order: logo, hamburger, then Call Now at the right edge */
  .nav-toggle { display: flex; order: 1; width: 44px; height: 44px; flex-shrink: 0; }
  .header-actions .call-now { order: 2; flex-shrink: 0; }
  .header-actions { gap: 10px; }

  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    background: var(--paper); flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: 20px 24px; gap: 0; border-top: 3px double var(--rule-strong);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease-out), opacity .25s ease;
    overflow-y: auto;
  }
  .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .main-nav a { font-size: 1.15rem; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-weight: 700; }
  .main-nav a::after { display: none; }
  .main-nav .nav-cta { margin-top: 22px; padding: 0; border: 0; }
  .main-nav .nav-cta .btn { width: 100%; }
}
@media (min-width: 961px) { .main-nav .nav-cta { display: none; } }
@media (max-width: 400px) {
  .brand-text { display: none; }
  .header-inner { padding: 8px 16px; }
}

/* ---------- Front page (hero) ---------- */
.hero { padding: 40px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: start; }
.hero-story .kicker { margin-bottom: 14px; }
.hero h1 { margin-bottom: .35em; text-wrap: balance; }
.hero h1 .accent { font-style: italic; color: var(--green); }
.byline {
  font-family: var(--font-ui); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; padding: 10px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
}
.byline strong { color: var(--ink); }
.hero-lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.65; margin-bottom: 24px; }
.hero-lede::first-letter {
  font-family: var(--font-display); font-weight: 900; font-size: 3.6em; line-height: .8; float: left; margin: .1em .12em 0 0; color: var(--ink);
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 26px; font-family: var(--font-ui); font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--green); }

/* Photos always sit in a thin ink frame with an italic caption underneath. */
.photo { margin: 0; }
.photo .frame { border: 1px solid var(--ink); padding: 6px; background: var(--white); }
.photo img { width: 100%; height: auto; display: block; }
.photo figcaption { font-size: .8rem; font-style: italic; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.photo figcaption strong { font-style: normal; font-family: var(--font-ui); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-right: 6px; }
.hero-photo { margin: 26px 0 0; }
.hero-photo img { aspect-ratio: 16/9; object-fit: cover; }

/* The quote form styled as a boxed classified advert. */
.advert {
  border: 3px double var(--ink); background: var(--white); padding: 26px 26px 22px; position: relative;
  box-shadow: 6px 6px 0 var(--paper-3);
}
.advert .advert-head {
  text-align: center; font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px;
}
.advert h2 { font-size: 1.7rem; text-align: center; margin-bottom: 4px; line-height: 1.15; }
.advert > p { font-size: .9rem; text-align: center; margin-bottom: 18px; color: var(--muted); }
.advert .fine { font-size: .74rem; color: var(--muted); text-align: center; margin: 12px 0 0; font-style: italic; }
.advert .stamp {
  position: absolute; top: -16px; right: 18px; transform: rotate(6deg);
  font-family: var(--font-ui); font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); border: 2px solid var(--red); padding: 5px 10px; background: var(--white);
}

@media (max-width: 960px) {
  .hero { padding: 28px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .advert { max-width: 560px; }
}
@media (max-width: 600px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .advert { padding: 22px 18px 18px; }
}

/* ---------- Stop-press ticker ---------- */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; padding: 12px 0; border-top: 3px double var(--paper); border-bottom: 3px double var(--paper); }
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-track li { display: inline-flex; align-items: center; gap: 22px; padding: 0 22px; font-family: var(--font-ui); font-weight: 600; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.ticker-track li::after { content: "✦"; font-size: .7rem; color: var(--paper); opacity: .7; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: 80px 0; position: relative; }
.section-tight { padding: 56px 0; }
.section-ink { background: var(--ink); color: var(--paper); }
.section-ink h2, .section-ink h3 { color: var(--paper); }
.section-ink p { color: rgba(244,238,225,.8); }
.section-tint { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.section-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-head.left { margin: 0 0 36px; text-align: left; }
.section-head h2 { text-wrap: balance; margin-bottom: .4em; }
.section-head p { font-size: 1.05rem; margin: 0; }
.section-cta { text-align: center; margin-top: 44px; }

/* ---------- Editorial columns (why choose) ---------- */
.columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.col { padding: 30px 28px; border-left: 1px solid var(--rule); }
.col:first-child { border-left: 0; padding-left: 0; }
.col:last-child { padding-right: 0; }
.col .ic { width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--green); background: var(--white); }
.col .ic svg { width: 20px; height: 20px; }
.col h3 { font-size: 1.25rem; margin-bottom: 8px; }
.col p { font-size: .95rem; margin: 0; }
@media (max-width: 860px) {
  .columns { grid-template-columns: 1fr; }
  .col { border-left: 0; border-top: 1px solid var(--rule); padding: 24px 0; }
  .col:first-child { border-top: 0; }
}

/* ---------- Classifieds (services grid) ---------- */
.classifieds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ink); background: var(--white); }
.ad {
  display: flex; flex-direction: column; padding: 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; transition: background .2s ease;
}
.ad:hover { text-decoration: none; background: var(--paper); }
.ad:nth-child(3n) { border-right: 0; }
.ad:nth-last-child(-n+3) { border-bottom: 0; }
.ad .shot { position: relative; aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--ink); margin-bottom: 14px; }
.ad .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.ad:hover .shot img { transform: scale(1.06); }
.ad .tag { position: absolute; left: 0; top: 0; background: var(--ink); color: var(--paper); font-family: var(--font-ui); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; }
.ad h3 { font-size: 1.25rem; margin-bottom: 6px; }
.ad p { font-size: .92rem; margin: 0 0 14px; flex: 1; }
.ad .more { font-family: var(--font-ui); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.ad .more svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.ad:hover .more svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .classifieds { grid-template-columns: repeat(2, 1fr); }
  .ad:nth-child(3n) { border-right: 1px solid var(--rule); }
  .ad:nth-child(2n) { border-right: 0; }
  .ad:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .ad:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 520px) {
  .classifieds { grid-template-columns: 1fr; }
  .ad, .ad:nth-child(3n), .ad:nth-child(2n) { border-right: 0; }
  .ad:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .ad:last-child { border-bottom: 0; }
}

/* ---------- Service list (the full classifieds column on the services page) ---------- */
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 48px 0; border-bottom: 1px solid var(--rule); }
.svc-row:last-child { border-bottom: 0; }
.svc-row:nth-child(even) .svc-row-media { order: 2; }
.svc-row-media .frame { border: 1px solid var(--ink); padding: 6px; background: var(--white); }
.svc-row-media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.svc-row .num { font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 1; color: var(--paper-3); margin-bottom: -6px; }
.svc-row h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.svc-row p { font-size: 1rem; }
.svc-row .meta { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 860px) {
  .svc-row { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .svc-row:nth-child(even) .svc-row-media { order: 0; }
}

/* ---------- Numbered steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.step { padding: 30px 28px; border-left: 1px solid var(--rule); text-align: left; }
.step:first-child { border-left: 0; padding-left: 0; }
.step:last-child { padding-right: 0; }
.step .n {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 0 16px; border: 2px solid var(--ink); background: var(--white);
  font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 1.25rem; margin-bottom: 8px; }
.step p { font-size: .95rem; margin: 0; }
@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 0; border-top: 1px solid var(--rule); padding: 24px 0; }
  .step:first-child { border-top: 0; }
}

/* ---------- In pictures (gallery) ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 14px; }
.gallery a { position: relative; display: block; overflow: hidden; border: 1px solid var(--ink); padding: 5px; background: var(--white); }
.gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.gallery a:hover img { transform: scale(1.05); }
.gallery a span { position: absolute; left: 5px; right: 5px; bottom: 5px; padding: 8px 12px; background: rgba(27,26,23,.86); color: var(--paper); font-size: .78rem; font-style: italic; transform: translateY(100%); transition: transform .35s var(--ease-out); }
.gallery a:hover span, .gallery a:focus-visible span { transform: none; }
.gallery a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery a:nth-child(4) { grid-row: span 2; }
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery a:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .gallery a:nth-child(4) { grid-row: span 1; }
  .gallery a span { transform: none; }
}

.lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(27,26,23,.94); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(1100px, 100%); max-height: 88vh; border: 6px solid var(--white); transform: scale(.94); transition: transform .35s var(--ease-out); }
.lightbox.open img { transform: none; }
.lightbox button { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--paper); background: transparent; color: var(--paper); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: var(--paper); color: var(--ink); }

/* ---------- Letters to the editor (reviews) ---------- */
.letters { display: grid; grid-template-columns: .9fr 1.4fr; gap: 40px; align-items: start; }
.letters-note { border: 1px solid var(--ink); background: var(--white); padding: 28px; }
.letters-note .g { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.letters-note .g-badge { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; background: var(--paper); }
.letters-note .g-badge svg { width: 24px; height: 24px; }
.letters-note .big { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; }
.letters-note small { display: block; color: var(--muted); font-size: .82rem; }
.letters-note p { font-size: .95rem; }
/* Where the Google reviews widget will be pasted once Johnny has reviews. */
.reviews-widget {
  border: 1px dashed var(--rule-strong); background: var(--white); padding: 40px 28px; text-align: center; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.reviews-widget h3 { font-size: 1.4rem; margin: 0; }
.reviews-widget p { margin: 0; font-size: .95rem; max-width: 420px; }
@media (max-width: 900px) { .letters { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Split / story (about) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.split-media { position: relative; }
.split-media .photo img { aspect-ratio: 4/5; object-fit: cover; }
.split-media.wide .photo img { aspect-ratio: 4/3; }
.split-body h2 { margin-bottom: .5em; }
.split-body p { font-size: 1.02rem; }
.split-body .dropcap::first-letter { font-family: var(--font-display); font-weight: 900; font-size: 3.4em; line-height: .8; float: left; margin: .08em .12em 0 0; }
.checks { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-ui); font-weight: 600; font-size: .95rem; color: var(--ink); }
.checks li::before { content: "✔"; color: var(--green); flex-shrink: 0; font-size: 1rem; margin-top: 1px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.reverse > :first-child { order: 0; }
}

/* Sketch portrait card on the about page */
.sketch-card { position: relative; }
.sketch-card .photo .frame { background: var(--white); }
.sketch-card .photo img { aspect-ratio: 544 / 1024; object-fit: contain; max-height: 640px; margin: 0 auto; background: var(--white); }
.sketch-card .float-chip {
  position: absolute; left: -14px; bottom: 60px; background: var(--white); border: 1px solid var(--ink); padding: 10px 14px;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--ink);
}
@media (max-width: 900px) { .sketch-card .float-chip { left: 0; } }

/* ---------- Circulation area (service area) ---------- */
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.area-list { list-style: none; padding: 0; margin: 20px 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.area-list li { padding: 7px 14px; border: 1px solid rgba(244,238,225,.5); font-family: var(--font-ui); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: background .25s ease, color .25s ease; }
.area-list li:hover { background: var(--paper); color: var(--ink); }
.area-list li.core { background: var(--green); border-color: var(--green); }
.map-card { border: 6px solid var(--paper); overflow: hidden; aspect-ratio: 4/3; background: var(--paper-2); }
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }
.area-note { font-size: .82rem; font-style: italic; color: rgba(244,238,225,.65); }
@media (max-width: 900px) { .area-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Public notice (CTA band) ---------- */
.notice {
  border: 3px double var(--ink); background: var(--white); padding: 56px 48px; text-align: center; position: relative;
  box-shadow: 8px 8px 0 var(--paper-3);
}
.notice .kicker { max-width: 360px; margin: 0 auto 18px; }
.notice h2 { text-wrap: balance; margin-bottom: .4em; }
.notice p { max-width: 560px; margin: 0 auto 28px; font-size: 1.05rem; }
.notice .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) { .notice { padding: 40px 22px; } .notice .actions .btn { width: 100%; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--ink); background: var(--white); }
.info-card { display: flex; gap: 16px; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: background .2s ease; }
.info-card:last-child { border-bottom: 0; }
a.info-card:hover { background: var(--paper); text-decoration: none; }
.info-card .ic { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green); }
.info-card .ic svg { width: 20px; height: 20px; }
.info-card h4 { margin-bottom: 2px; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.info-card p { margin: 0; font-size: 1rem; color: var(--ink); font-weight: 700; font-family: var(--font-display); }
.map-wrap { margin-top: 20px; border: 1px solid var(--ink); padding: 5px; background: var(--white); height: 250px; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Forms ---------- */
.form-card { border: 3px double var(--ink); background: var(--white); padding: 34px; box-shadow: 8px 8px 0 var(--paper-3); }
.form-card h2 { font-size: 1.7rem; margin-bottom: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: .14em; text-transform: uppercase; }
.field input, .field textarea {
  width: 100%; font-size: 16px; padding: 12px 14px; border-radius: 2px;
  border: 1px solid var(--ink); font-family: var(--font-body); background: var(--paper); color: var(--ink);
  transition: box-shadow .18s ease, background .18s ease;
}
.field input:focus, .field textarea:focus { outline: none; background: var(--white); box-shadow: 3px 3px 0 var(--green); }
.field textarea { resize: vertical; min-height: 110px; }
.char-count { display: block; text-align: right; font-family: var(--font-ui); font-size: .72rem; color: var(--muted); margin-top: 5px; }
.char-count.limit { color: var(--red); font-weight: 700; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } .form-card { padding: 24px 18px; } }

.form-success { display: none; text-align: center; padding: 20px 0; }
.form-success.show { display: block; animation: rise .5s var(--ease-out) both; }
.form-success .check { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--ink); background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 1.6rem; font-weight: 800; }
.form-success h4 { font-family: var(--font-display); font-size: 1.4rem; }
.form-success a { font-weight: 700; }
.form-error { display: none; background: #F7E6E4; color: var(--red); border: 1px solid var(--red); padding: 12px 15px; font-size: .86rem; margin-bottom: 14px; }
.form-error.show { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Inner page heading ---------- */
.page-head { padding: 44px 0 36px; text-align: center; border-bottom: 1px solid var(--rule-strong); }
.page-head .kicker { max-width: 420px; margin: 0 auto 16px; }
.page-head h1 { text-wrap: balance; margin-bottom: .3em; }
.page-head p { max-width: 640px; margin: 0 auto; font-size: 1.1rem; }
.page-head .hero-actions { justify-content: center; margin-top: 26px; }
@media (max-width: 600px) { .page-head { padding: 30px 0 26px; } }

/* ---------- Pull quote ---------- */
.pull { border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); padding: 28px 8px; margin: 48px 0 0; text-align: center; }
.pull p { margin: 0; font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; color: var(--ink); }
.pull p strong { display: block; margin-top: 10px; font-family: var(--font-ui); font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(244,238,225,.78); padding: 60px 0 24px; border-top: 6px double var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-brand strong { font-family: var(--font-masthead); font-weight: 700; color: var(--paper); font-size: 1.8rem; display: block; line-height: 1.1; }
.footer-brand small { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,238,225,.6); font-weight: 700; }
.site-footer h5 { color: var(--paper); font-family: var(--font-ui); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; margin: 0 0 16px; font-weight: 700; border-bottom: 1px solid rgba(244,238,225,.25); padding-bottom: 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.site-footer ul a { color: rgba(244,238,225,.85); }
.site-footer ul a:hover { color: var(--paper); }
.site-footer p { color: rgba(244,238,225,.65); font-size: .94rem; max-width: 380px; }
.footer-bottom { border-top: 1px solid rgba(244,238,225,.2); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--font-ui); font-size: .76rem; color: rgba(244,238,225,.55); letter-spacing: .04em; }
.footer-bottom a { color: #fff; }
.footer-bottom .credit a { text-decoration: underline; text-underline-offset: 3px; }
/* Keep the copyright and credit clear of the back-to-top and chat buttons. */
@media (min-width: 761px) { .footer-bottom { padding-left: 64px; padding-right: 96px; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { padding-right: 80px; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; left: 22px; bottom: 22px; z-index: 850; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--ease-out), background .2s ease, color .2s ease;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--green); color: var(--white); }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .to-top { display: none; } }

/* ---------- Sticky mobile action bar ---------- */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 3px double var(--ink);
  }
  .mobile-cta .btn { height: 46px; padding: 0 12px; font-size: .78rem; box-shadow: none; }
  body { padding-bottom: 76px; }
}

/* ---------- Chatbot ---------- */
.chat-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; background: var(--white); box-shadow: 4px 4px 0 var(--ink); display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .25s var(--ease-out); }
.chat-launcher:hover { transform: scale(1.06); }
.chat-launcher img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chat-launcher .close-icon { display: none; color: var(--ink); font-size: 1.9rem; font-weight: 400; line-height: 1; }
.chat-launcher.open .close-icon { display: block; }
.chat-launcher.open img { display: none; }
.chat-launcher .status-dot { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 2px solid var(--white); z-index: 3; }
.chat-launcher.open .status-dot { display: none; }

.chat-window { position: fixed; right: 22px; bottom: 98px; z-index: 900; width: 352px; max-width: calc(100vw - 44px); max-height: calc(100vh - 140px); overflow-y: auto; background: var(--white); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: translateY(16px) scale(.97); opacity: 0; pointer-events: none; transition: transform .25s var(--ease-out), opacity .2s ease; }
.chat-window.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-head { background: var(--ink); color: var(--paper); padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.chat-head img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--paper); background: var(--white); }
.chat-head strong { display: block; font-family: var(--font-masthead); font-size: 1.25rem; line-height: 1.1; }
.chat-head small { font-family: var(--font-ui); color: rgba(244,238,225,.75); font-size: .72rem; letter-spacing: .06em; }
.chat-body { padding: 16px 18px 20px; }
.chat-body .chat-msg { background: var(--paper); border: 1px solid var(--rule); padding: 12px 14px; font-size: .88rem; color: var(--ink); margin-bottom: 16px; font-style: italic; }
.chat-body .field { margin-bottom: 10px; }
.chat-body .field textarea { min-height: 80px; }
.chat-body .char-count { margin-top: -2px; }
.chat-body .btn { margin-top: 4px; height: 48px; }

@media (max-width: 760px) {
  .chat-launcher { bottom: 92px; }
  .chat-window { bottom: 164px; max-height: calc(100vh - 256px); }
}

/* ---------- Scroll reveal ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--d, 0ms); }
.js-reveal [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 80px 0; }
.notfound .big { font-family: var(--font-display); font-weight: 900; font-size: clamp(5rem, 16vw, 11rem); line-height: 1; color: var(--paper-3); margin-bottom: -20px; }