/* Dalby Containers — design system "Downs"
   Brand green #318D4B, a deeper green for text duties, wheat as the accent, warm-dark neutrals.

   CONTRAST NOTE — read before changing anything.
   The CRM brand green #318D4B is 4.16:1 against white. That passes for large and bold
   display type but NOT for body copy, small type or links, so it is used for the brand
   mark, borders, rules, dark section backgrounds and headline-scale text only.
     --primary  #1F5C31  7.97:1 on white, and white on it is 7.97:1 — this carries all
                         body links and every solid button.
     --accent   #E8D9A8  wheat. 1.41:1 on white, so it is NEVER text on a light background.
                         It is used only as (a) a background with dark text on it,
                         (b) a marker or heading on a dark background — 11.3:1 on #12261A,
                         (c) non-text decoration: rules, borders, bullets.
     --char     #12261A  15.9:1 on white. Headings, dark sections, footer.
     --body     #39473D  9.8:1 on white.   --muted #5D6E62  5.4:1 on white. */

:root {
  --brand: #318d4b;
  --primary: #1f5c31;
  --primary-deep: #143d21;
  --accent: #e8d9a8;
  --accent-deep: #d9c68a;
  --accent-soft: #f4f0df;
  --char: #12261a;
  --body: #39473d;
  --muted: #5d6e62;
  --cream: #f3f8f4;
  --paper: #ffffff;
  --line: #d5e3d9;
  --green: #1f6b4a;
  --r-sm: 12px;
  --r-lg: 22px;
  --shadow: 0 3px 14px rgba(18, 38, 26, 0.09);
  --shadow-big: 0 18px 50px rgba(18, 38, 26, 0.16);
  --w: 1140px;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--body); background: var(--paper); line-height: 1.65; font-size: 17px; }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--char); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.05rem); }
h3 { font-size: 1.15rem; }
p { margin-bottom: 1em; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 22px; }
.sec { padding: 68px 0; }
.sec-cream { background: var(--cream); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 4px; background: var(--primary); border-radius: 2px; }
.big { font-size: 1.16rem; color: var(--muted); max-width: 60ch; }

/* Buttons — pill family. Accent (wheat) buttons carry dark text, never white. */
.pbtn { display: inline-block; font-family: var(--font); font-weight: 800; font-size: 1rem; padding: 15px 30px; border-radius: 999px; border: 2.5px solid transparent; cursor: pointer; text-align: center; transition: 0.15s; }
.pbtn:hover { text-decoration: none; transform: translateY(-1px); }
.pbtn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(31, 92, 49, 0.32); }
.pbtn-primary:hover { background: var(--primary-deep); }
.pbtn-accent { background: var(--accent); color: var(--char); box-shadow: 0 6px 18px rgba(18, 38, 26, 0.22); }
.pbtn-accent:hover { background: var(--accent-deep); color: var(--char); }
.pbtn-line { border-color: var(--char); color: var(--char); }
.pbtn-line:hover { background: var(--char); color: #fff; }
.pbtn-white { background: #fff; color: var(--primary-deep); }

/* ---------- Mast (header) ---------- */
.ribbon { background: var(--char); color: #d3ded7; font-size: 0.85rem; padding: 8px 0; }
.ribbon .wrap { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.ribbon strong { color: var(--accent); }
.ribbon a { color: #fff; font-weight: 700; }
.mast { position: sticky; top: 0; z-index: 90; background: var(--paper); border-bottom: 4px solid var(--brand); }
.mast-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: var(--w); margin: 0 auto; padding: 12px 22px; }
.brand { display: flex; align-items: center; flex: none; }
.brand svg { height: 48px; width: auto; }
.menu { display: flex; list-style: none; gap: 2px; align-items: center; }
.menu > li { position: relative; }
.menu a { display: block; padding: 10px 11px; font-weight: 700; font-size: 0.95rem; color: var(--char); border-radius: 10px; white-space: nowrap; }
.menu a:hover { color: var(--primary); background: var(--accent-soft); text-decoration: none; }
.menu .drop { position: absolute; top: 100%; left: 0; min-width: 265px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-big); padding: 8px; display: none; z-index: 95; }
.menu li:hover .drop, .menu li:focus-within .drop { display: block; }
.menu .drop a { font-weight: 600; }
.mast-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.mast-phone { font-weight: 800; color: var(--char); white-space: nowrap; font-size: 1.02rem; }
.mast-phone small { display: block; font-size: 0.7rem; font-weight: 700; color: var(--green); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.burger { display: none; border: none; background: none; cursor: pointer; padding: 6px; }
.burger span { display: block; width: 26px; height: 3px; background: var(--char); margin: 5px 0; border-radius: 3px; }

/* ---------- Hero ----------
   Carries its own gradient so it stands up with no photograph behind it.
   A .bg image, when one exists, layers over the gradient and under the scrim. */
.hero { position: relative; min-height: 620px; display: flex; align-items: center; color: #fff; overflow: hidden;
  background: linear-gradient(112deg, #0c1c12 0%, var(--primary-deep) 46%, var(--brand) 100%); }
.hero::after { content: ""; position: absolute; top: -30%; right: -12%; width: 46%; height: 160%; z-index: 1;
  background: linear-gradient(180deg, rgba(232, 217, 168, 0.18), rgba(232, 217, 168, 0)); transform: skewX(-13deg); }
.hero .bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.hero.hero-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12, 28, 18, 0.9) 20%, rgba(12, 28, 18, 0.5) 60%, rgba(12, 28, 18, 0.28)); z-index: 1; }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: 16px; }
.hero .big { color: #e0eae2; margin-bottom: 26px; }
.hero-kicker { color: var(--accent); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 14px; display: block; }
.hero-acts { display: flex; gap: 14px; flex-wrap: wrap; }

/* Promise bar */
.promises { background: var(--primary); padding: 14px 0; }
.promises .wrap { display: flex; gap: 10px 34px; flex-wrap: wrap; justify-content: center; }
.promise { font-weight: 800; color: #fff; font-size: 0.92rem; display: flex; gap: 8px; align-items: center; }
.promise::before { content: "◆"; font-size: 0.8rem; color: var(--accent); }

/* ---------- Tiles ---------- */
.tiles { display: grid; gap: 26px; }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tiles-2 { grid-template-columns: repeat(2, 1fr); }
.tile { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); border-left: 5px solid var(--brand); display: flex; flex-direction: column; transition: 0.15s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-big); }
.tile img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.tile-pad { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tile-pad p { color: var(--muted); font-size: 0.95rem; flex: 1; margin: 0; }
.tile .from { font-weight: 800; color: var(--primary-deep); }
.tile .pbtn { align-self: flex-start; padding: 11px 22px; font-size: 0.92rem; }

/* Feature rows. .nophoto collapses to one column when no image is rendered. */
.feat { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.feat.nophoto { grid-template-columns: 1fr; gap: 30px; }
.feat.flip > .feat-img { order: 2; }
.feat-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-big); }
.feat-img img { width: 100%; height: 100%; object-fit: cover; }
.ticks { list-style: none; display: grid; gap: 11px; margin: 18px 0 24px; }
.ticks li { padding-left: 32px; position: relative; font-weight: 600; }
.ticks li::before { content: "✔"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

/* Numbered path */
.path { counter-reset: n; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.path div { position: relative; padding: 20px 4px 0; border-top: 4px solid var(--line); }
.path div::before { counter-increment: n; content: "0" counter(n); position: absolute; top: -17px; left: 0; background: var(--paper); padding-right: 12px; font-weight: 800; font-size: 1.35rem; color: var(--primary); }
.path h3 { font-size: 1.02rem; margin-bottom: 4px; }
.path p { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* ---------- Specs strip / tables ---------- */
.specstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; }
.specstrip div { background: var(--cream); border-radius: var(--r-sm); padding: 14px 16px; }
.specstrip b { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.specstrip span { font-weight: 800; color: var(--char); }
table.grid { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 0.96rem; }
table.grid th { text-align: left; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 3px solid var(--brand); }
table.grid td { padding: 13px 12px; border-bottom: 1px solid var(--line); }
table.grid td strong { color: var(--char); }

/* ---------- Quote panel ---------- */
.quote-band { background: linear-gradient(115deg, #0c1c12, var(--primary)); color: #fff; }
.quote-band h2, .quote-band h3 { color: #fff; }
.quote-band .big { color: #d5e2d8; }
.qgrid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 46px; align-items: center; }
.qcard { background: #fff; border-radius: var(--r-lg); padding: 30px 30px 26px; color: var(--body); box-shadow: var(--shadow-big); border-top: 7px solid var(--brand); }
.qcard label { display: block; font-weight: 700; font-size: 0.85rem; color: var(--char); margin: 0 0 5px; }
.qcard input, .qcard select, .qcard textarea { width: 100%; font-family: var(--font); font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--cream); margin-bottom: 13px; color: var(--body); }
.qcard input:focus, .qcard select:focus, .qcard textarea:focus { outline: 2.5px solid var(--primary); background: #fff; }
.qrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.qtoggle { display: flex; gap: 8px; margin-bottom: 14px; }
.qtoggle input { display: none; }
.qtoggle label { flex: 1; text-align: center; border: 2px solid var(--line); border-radius: 999px; padding: 10px; cursor: pointer; font-weight: 800; margin: 0; }
.qtoggle input:checked + label { background: var(--char); border-color: var(--char); color: #fff; }
.qnote { font-size: 0.8rem; color: var(--muted); margin-top: 10px; }
.q-ok { background: #e9f6ef; border: 2px solid var(--primary); border-radius: var(--r-sm); padding: 18px; font-weight: 700; color: #17472e; }
.q-bad { background: #fdeeec; border: 2px solid #c0392b; border-radius: var(--r-sm); padding: 14px; font-weight: 700; color: #8e2b20; font-size: 0.92rem; margin-bottom: 12px; }

/* ---------- Access checker ---------- */
.checker { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-big); padding: 28px; border-top: 7px solid var(--brand); }
.checker .step { display: none; }
.checker .step.on { display: block; }
.checker button.opt { display: block; width: 100%; text-align: left; margin: 9px 0; padding: 14px 16px; border: 2px solid var(--line); background: var(--cream); border-radius: var(--r-sm); font-family: var(--font); font-weight: 700; font-size: 0.98rem; cursor: pointer; color: var(--char); }
.checker button.opt:hover { border-color: var(--primary); background: var(--accent-soft); }
.checker .verdict { background: var(--accent-soft); border-radius: var(--r-sm); padding: 18px; margin-bottom: 14px; color: var(--char); }

/* ---------- Blog ---------- */
.post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.post-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 26px 28px; border-left: 5px solid var(--brand); }
.post-card time { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.post-card h3 { margin: 8px 0; }
.post-card p { color: var(--muted); font-size: 0.95rem; }
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { margin: 1.5em 0 0.4em; }
.prose .intro { font-size: 1.15rem; color: var(--muted); border-left: 5px solid var(--brand); padding-left: 16px; margin: 18px 0 26px; }
.crumb { font-size: 0.85rem; color: var(--muted); padding: 18px 0 0; }
.crumb a { color: var(--muted); }

/* ---------- Location pages ---------- */
.loc-head { background: var(--char); color: #fff; padding: 54px 0; border-bottom: 5px solid var(--brand); }
.loc-head h1 { color: #fff; }
.loc-head .big { color: #d2ded5; }
.loc-links { display: flex; flex-wrap: wrap; gap: 9px; }
.loc-links a { background: #fff; border: 1.5px solid var(--line); padding: 8px 17px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: var(--char); }
.loc-links a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* ---------- Footer ---------- */
.foot { background: var(--char); color: #adbdb2; padding: 54px 0 0; font-size: 0.94rem; }
.foot h4 { color: var(--accent); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.foot a { color: #dfe8e1; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 34px; padding-bottom: 38px; }
.foot ul { list-style: none; display: grid; gap: 7px; }
.foot-phone { display: inline-block; font-size: 1.5rem; font-weight: 800; color: #fff; margin: 10px 0 2px; }
.foot-base { border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 16px 0; font-size: 0.8rem; }
.foot-base .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* Mobile action bar */
.actionbar { display: none; position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 99; gap: 10px; background: var(--char); border-radius: 999px; padding: 8px; box-shadow: var(--shadow-big); }
.actionbar .pbtn { flex: 1; padding: 12px 8px; font-size: 0.93rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .tiles-3 { grid-template-columns: 1fr 1fr; }
  .feat, .qgrid { grid-template-columns: 1fr; gap: 30px; }
  .feat.flip > .feat-img { order: 0; }
  .path { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .menu { display: none; position: fixed; inset: 118px 0 0 0; background: #fff; flex-direction: column; align-items: stretch; padding: 16px 22px; overflow-y: auto; z-index: 96; }
  .menu.show { display: flex; }
  .menu a { padding: 14px 10px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .menu .drop { position: static; display: block; border: none; box-shadow: none; padding: 0 0 0 18px; }
  .burger { display: block; }
  .mast-cta .pbtn { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sec { padding: 46px 0; }
  .tiles-3, .tiles-2, .post-list { grid-template-columns: 1fr; }
  .qrow, .specstrip { grid-template-columns: 1fr 1fr; }
  .path { grid-template-columns: 1fr; }
  .hero { min-height: 540px; }
  .hero::after { display: none; }
  .actionbar { display: flex; }
  body { padding-bottom: 76px; }
  .ribbon .rb-left { display: none; }
  .mast-phone small { display: none; }
}