/* www.esmera.co.uk — styles for the static site.
   Design tokens first, then base, chrome (header/footer), page components. Mobile-first; the
   single desktop breakpoint is min-width: 768px (the live theme's md:). Colours are the official Esmera brand palette
   (same tokens as Websites/Esmera/HUGS). When you edit this file or a JS file, bump the ?v= on
   every page's <link>/<script> tags (see CLAUDE.md "Rules that keep it working"). */

/* ---- Fonts (self-hosted, OFL) ------------------------------------------- */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/lato-300.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lato-700.woff2') format('woff2'); }
/* Cormorant: the live theme's own variable font file, declared (as live) at weight 600 only - so every Cormorant
   paragraph renders at that one weight whatever font-weight asks for. Using Google's copy or a weight range changes
   the glyph widths and the line breaks. */
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cormorant-live.woff2') format('woff2'); }

:root {
  /* palette — official Esmera brand colours */
  --petrol: #0a2c2c;      /* Petrol Green — header, footer, hero overlays */
  --petrol-dark: #071f1f; /* hover shade */
  --sage: #a6b284;        /* Sage Green — buttons, accents, footer strap */
  --sage-dark: #93a070;   /* button hover */
  --olive: #57654f;       /* Olive Green — icons, secondary text on light */
  --ink: #343937;         /* Industrial Grey — headings on white */
  --body: #858585;        /* body copy: live 'body p' colour */
  --muted: #858585;       /* Gunmetal Grey — meta, captions */
  --paper: #f5f5f5;       /* Paper White — light bands, cards */
  --white: #ffffff;
  --hairline: #e3e3e1;

  /* type — the live site: Lato (light) for headings/nav/buttons, Cormorant for body copy */
  --font-head: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Cormorant', Georgia, 'Times New Roman', serif;

  --content-w: 1280px;   /* the live theme's Tailwind container: 100% -> 640/768/1024/1280/1536 at those widths, 0 side padding from 768 */
  --pad: 20px;
  --header-h: 65px;     /* live: py-3 + the 41px logo; .header-space 65px */
  --font-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif;   /* live: Tailwind preflight html font (nav links, plain text) */
  --radius: 4px;
}

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 10px); }
body {
  margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  color: #000; background: var(--white); padding-top: var(--header-h);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* live theme (app.css): h1-h5 Lato 300 petrol; p Cormorant 18px 300 #858585; 35px bottom margins */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 300; color: var(--petrol); line-height: 1.5; margin: 0 0 35px; }
h1 { font-size: 42px; margin-bottom: 30px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; font-family: inherit; font-weight: inherit; color: inherit; margin: 0; }   /* live: unstyled (Tailwind preflight inherit) */
p { font-family: var(--font-body); font-size: 18px; font-weight: 300; color: var(--body); margin: 0 0 35px; }
main ul, main ol { list-style: none; padding: 0; margin: 0 0 35px; }
main ul li, main ol li { font-family: var(--font-body); font-size: 18px; font-weight: 300; color: var(--body); margin: 0 0 10px; }
main ul li::before { content: "\2022"; color: var(--sage); font-weight: 700; display: inline-block; width: 1em; margin-left: -.5em; margin-right: .5em; }
main ol { counter-reset: li; }
main ol li { counter-increment: li; }
main ol li::before { content: counter(li); color: var(--sage); font-weight: 700; display: inline-block; width: 1em; margin-right: .5em; text-align: right; direction: rtl; }
figure { margin: 0 0 1em; }   /* live: WordPress's :where(figure) */
strong, b { font-weight: bolder; }
/* Font Awesome glyphs as inline SVG, sized like its icon font (live): 1em tall, width from the viewBox */
.fa { display: inline-block; height: 1em; width: auto; overflow: visible; vertical-align: -.125em; fill: currentColor; }   /* live: Tailwind preflight - one step up from the 300 text, i.e. 400 */
hr { border: 0; border-top: 1px solid var(--hairline); margin: 2em 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--sage); color: var(--white); padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* Centred content column; bands are full-bleed and use .wrap inside. */
.wrap { width: 100%; margin: 0 auto; padding-inline: var(--pad); }
@media (min-width: 640px)  { .wrap { max-width: 640px; } }
@media (min-width: 768px)  { .wrap { max-width: 768px; padding-inline: 0; } }
@media (min-width: 1024px) { .wrap { max-width: 1024px; } }
@media (min-width: 1280px) { .wrap { max-width: 1280px; } }
@media (min-width: 1536px) { .wrap { max-width: 1305px; } }   /* live overrides Tailwind's 1536 with 1305 */
.wrap--flush { padding-inline: 0; }   /* live: a container without px-5 (no side padding on phones) */
.narrow { max-width: 83.333%; margin-inline: auto; display: flow-root; }   /* live: col-span-10 col-start-2, at every width */
.narrow--half { max-width: 50%; margin-inline: auto; display: flow-root; }   /* flow-root: live's grid keeps the last paragraph's 35px inside */   /* live: col-span-6 col-start-4, at every width */
.center { text-align: center; }
.section { margin-block: 112px; }   /* live: my-28 - margins, so they collapse with their neighbours (crumbs' 40, the next section's 112) */
.section.band--grey, .section.band--petrol { margin-block: 0; padding-block: 112px; }   /* live: coloured bands use py-28 */
.center + .dev-card { margin-top: 112px; }   /* live: the intro's container mb-28 */
.band--grey { background: var(--paper); }
.band--petrol { background: var(--petrol); color: var(--white); }
.band--petrol h1, .band--petrol h2, .band--petrol h3 { color: var(--white); }

.eyebrow { }   /* live: a plain paragraph ('Our Vision:') */
.vision { font-family: var(--font-head); font-weight: 300; font-size: 28px; color: var(--petrol); }   /* live: p.title-font.h2 */

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none; line-height: 1.5; text-align: center;
  color: var(--white); background: var(--sage); border: 1px solid var(--sage); border-radius: var(--radius);
  min-width: 200px; padding: 10px 40px; cursor: pointer; transition: all .3s ease-in-out;
}
.btn:hover, .btn:focus-visible { background: var(--white); color: var(--sage); }   /* live: white fill, sage text */
.btn--petrol { background: var(--petrol); }
.btn--petrol:hover { background: var(--petrol-dark); }

/* ---- Header (fixed petrol bar) ------------------------------------------ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; padding-block: 12px; z-index: 50;   /* live: py-3, height follows the logo; body keeps the fixed 65px .header-space */
  background: var(--petrol); color: var(--white);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0; }   /* live: no gaps; the logo shrinks first */
.site-header .brand { display: flex; align-items: center; text-decoration: none; }
.site-header .brand img { width: auto; height: auto; }   /* live: the logo at its natural 195x41 */
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; align-items: center; }
.nav li { position: relative; margin: 0; }
.nav a, .nav button {
  display: block; font-family: var(--font-ui); font-size: 16px; color: var(--white); text-decoration: none;
  padding: 0 30px; background: none; border: 0; cursor: pointer; line-height: 1.5; white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { color: var(--sage); }
.nav .has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav .sub { list-style: none; margin: 0; padding: 6px 0; display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--petrol); flex-direction: column; gap: 0; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub, .nav .has-sub.is-open .sub { display: flex; }
.nav .sub a { padding: 10px 16px; white-space: nowrap; }
.header-contact { display: flex; gap: 16px; align-items: center; margin-left: auto; }   /* live shows the icons at every width */
.header-contact a { color: var(--white); display: inline-flex; }

.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; margin-left: 8px; background: none; border: 0; color: var(--sage); cursor: pointer; }   /* live: p-2 w-10 h-10 ml-2 */
.menu-toggle svg { width: 20px; height: 20px; }   /* live: Flowbite's 17x14 hamburger at w-5 h-5 */

/* Mobile panel */
/* Mobile panel - live's #navbar-hamburger: full-height petrol panel under the header (pt 48px) with a 20px sage
   bottom border; links centred, 36px Lato 300, 15px 30px padding, no dividers, 75px from the top; the contact block
   centred at the bottom (mb-28) in Cormorant - phone and email white, the hours a sage paragraph; slides down */
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 49; background: var(--petrol); color: var(--white);
  padding: 48px var(--pad) 0; border-bottom: 20px solid var(--sage); overflow-y: auto;
  flex-direction: column; justify-content: space-between; }
.mobile-nav.is-open { display: flex; animation: esmera-nav-slide-down .35s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes esmera-nav-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mobile-nav.is-open { animation: none; } }
.mobile-nav > ul { list-style: none; margin: 75px 0 0; padding: 0; text-align: center; font: 300 36px/1.5 var(--font-head); }
.mobile-nav li { margin: 0; }
.mobile-nav > ul > li > a { display: block; padding: 15px 30px; color: var(--white); text-decoration: none; }
.mobile-nav .sub { list-style: none; margin: -10px 0 10px; padding: 0; font-size: 22px; }   /* Lauren's layer only */
.mobile-nav .sub a { display: block; padding: 6px 30px; color: var(--sage); text-decoration: none; }
.mobile-nav .contact { margin: 40px 0 112px; text-align: center; font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
.mobile-nav .contact br { display: none; }
.mobile-nav .contact a { display: block; color: var(--white); text-decoration: none; }

/* Floating side buttons (phone / email) */
.side-actions { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 10px; }   /* live: .sidebar-right */
.side-actions a { width: 45px; height: 45px; background: var(--sage); color: var(--white); display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; }


/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--petrol); color: var(--white); }   /* the 112px above it is the last section's collapsing margin, as live */
.site-footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-block: 40px; }   /* live: footer-top py-10, grid gap-x-4 */   /* live phone: Contact + Projects full width, the other two side by side */
.site-footer .cols > :nth-child(1), .site-footer .cols > :nth-child(2) { grid-column: 1 / -1; }
.site-footer h2 { color: var(--white); font-size: 18px; font-weight: 500; margin-bottom: 25px; }   /* live: footer h5 */
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li, .site-footer .strap span { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 30px; }   /* live: footer a, footer p */
.site-footer .contact-list li { margin-bottom: 12px; }                  /* live: mb-3 */
.site-footer .contact-list a { display: inline-block; }
.site-footer .contact-list li:nth-child(2) { font-weight: 300; }   /* live: a <p> */
.site-footer .contact-list li:first-child { line-height: 24px; }      /* live: an inline-block text-sm (14/20) link on a 24px line */
.site-footer .contact-list li:first-child a { line-height: 20px; vertical-align: baseline; }
.site-footer .contact-list li:last-child { margin-bottom: 20px; }     /* live: mb-5 */
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--sage); }
.site-footer .social { display: flex; gap: 32px; height: 30px; align-items: center; }   /* live: gap-x-8; icon links at the footer's 30px line height */
.site-footer .social { font-size: 14px; }   /* live: icons at the footer's 14px */
.mobile-nav .contact .hours { display: block; color: var(--sage); font-size: 18px; font-weight: 300; margin-bottom: 35px; }   /* live: a <p class="text-secondary"> */
.site-footer .fdrop { position: relative; }
.site-footer .fdrop summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; background: var(--sage); color: var(--white); font: 500 14px/20px var(--font-ui); padding: 10px 20px; border-radius: 8px; margin: 0 12px 12px 0; }   /* live: font-medium text-sm px-5 py-2.5 rounded-lg */
.site-footer .fdrop summary::-webkit-details-marker { display: none; }
.site-footer .fdrop summary::after { content: ""; width: 8px; height: 8px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg) translateY(2px); }
.site-footer .fdrop summary:hover { background: var(--white); color: var(--petrol); }
.site-footer .fdrop ul { position: absolute; bottom: calc(100% + 6px); left: 0; width: 176px; background: var(--paper); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.25); padding: 8px 0; z-index: 5; }
.site-footer .fdrop li { margin: 0; }
.site-footer .fdrop li a { display: block; padding: 8px 16px; color: var(--ink); font-size: 14px; }
.site-footer .fdrop li a:hover { background: #e5e7eb; color: var(--ink); }
.site-footer .strap { background: var(--sage); font-size: 14px; }
.site-footer .strap .wrap { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-block: 8px; }   /* live: py-2, column on phone */
.site-footer .strap span { font-weight: 400; }

/* ---- Breadcrumbs & page titles ------------------------------------------ */
.crumbs { font-family: var(--font-head); font-weight: 300; font-size: 14px; color: var(--body); margin-block: 40px; }   /* live: container my-10, p.title-font 14px */
.crumbs a { text-decoration: none; }
.crumbs .sep { margin: 0 .25em; }
.page-title { text-align: center; margin-bottom: 112px; }
.page-title > .wrap { padding-inline: 0; }   /* live: its container has no side padding */   /* live: page-header (no spacing) then a my-28 container or 'seperator mb-28' */
.page-title h1 { margin: 0; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; background: var(--petrol) center / cover no-repeat; color: var(--white); min-height: 300px; display: flex; align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--petrol); opacity: .2; mix-blend-mode: multiply; }   /* live: .bg-img:before */
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--white); font-size: 60px; line-height: 1; }   /* live: text-6xl at every width, h1's 30px margin */
.hero p { font-size: 24px; line-height: 32px; color: var(--white); }   /* live: text-2xl */
.hero--tall { height: 70vh; min-height: 300px; }   /* live: h-screen max-h-[70vh] min-h-[300px] */
.hero--full { min-height: 100vh; text-align: center; }   /* live: h-screen, content centred */
.hero--full .wrap { display: flex; flex-direction: column; align-items: center; }
.hero--full img { width: auto; margin-bottom: 64px; }   /* live: natural size, mb-16 (the empty h1's mb-16 collapses into it) */
.hero--full p { width: 100%; font-size: 20px; line-height: 28px; }   /* live: text-xl, keeps the 35px p margin */
.hero--short { min-height: 300px; max-height: 300px; }


/* CTA band with background image (Land Required, Charming Historic Surroundings …) */
.cta { position: relative; background: var(--petrol) center / cover no-repeat; color: var(--white); text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; background: var(--petrol); opacity: .2; mix-blend-mode: multiply; }
.cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #fff0 0, #57654f 100%); mix-blend-mode: multiply; }
.cta > .wrap { position: relative; z-index: 1; padding-block: 192px; padding-inline: 0; }   /* live: py-48 at every width */
.cta > .wrap > h2, .cta > .wrap > p { max-width: 66.667%; margin-inline: auto; }   /* live: basis-2/3 */
.cta--padded > .wrap { padding-inline: var(--pad); }   /* live: the development pages' band container has px-5 on phones */
@media (min-width: 768px) { .cta--padded > .wrap { padding-inline: 0; } }
.cta h2 { color: var(--white); font-weight: 700; }
.cta p { color: var(--white); }

/* ---- Split (image + text) ------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr; gap: 112px 32px; align-items: center; }   /* live: col mb-28 on phone, gap-x-8 */
.split + .split { margin-top: 112px; }   /* live: mb-28 between rows */
.split > * { min-width: 0; }
/* Development pages (live: .flexible-content - each column holds its own my-28 containers: heading, content, button;
   .heading/.content get padding-right 48px; columns align to the top) */
.split--flex { align-items: start; row-gap: 0; }
.split--inset > .split__col > h2, .split--inset > .split__col > p { margin-right: 48px; }   /* live: .column-content .content padding-right 48px */
.split--img-mb { row-gap: 0; }
.split--img-mb > :first-child { margin-bottom: 112px; }   /* live: the image column keeps mb-28 at every width (its md: reset is a Bootstrap name) */
.split--flex > .split__col { display: flow-root; }
.split--flex.split--middle { align-items: center; }   /* live: items-center on this row (others use the non-existent items-top = stretch) */   /* live: .flexible-column-N .container { margin: 0 } - no gaps inside a column */
.split--flex { row-gap: 112px; }   /* phone: first column mb-28 */
.split--flex > .split__col > h2, .split--flex > .split__col > p, .split--flex > .split__col > ul { margin-right: 48px; }
.split--flex > .split__col > img { height: 500px; object-fit: cover; }


/* ---- Cards (contact) ----------------------------------------------------- */
/* Contact page (live: bg-light-grey py-28; title then intro mt-5 mb-28; form my-14 bg-white p-10;
   contact-details my-10 py-10, grid gap-x-5, cards p-10 white, h2 text-5xl grey, li mb-5) */
.band--grey .page-title { margin-bottom: 20px; }
.page-title + p.center { width: 83.333%; margin-inline: auto; }
.band--grey > .wrap > .form { margin-block: 147px 56px; padding: 40px; }
.cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-block: 40px; padding-block: 40px; }
.card { background: var(--white); padding: 40px; text-align: center; }
.card h2 { font-size: 48px; line-height: 1; color: var(--body); }
.card ul { margin-bottom: 35px; }
.card li { margin: 0 0 10px; }   /* live: the main-list rule (10px) outranks mb-5 */
.card li::before { content: none !important; }
.card a { text-decoration: none; }

/* ---- Forms --------------------------------------------------------------- */
.form { background: var(--white); padding: 32px var(--pad); }
.form .fields { display: grid; grid-template-columns: 1fr; gap: 16px; }
.form .captcha .field__error { display: none; }
.field label { display: block; font-family: var(--font-head); font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: var(--radius); background: var(--white); color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--sage); outline-offset: 0; border-color: var(--sage); }
.field__error { display: none; color: #b42318; font-family: var(--font-head); font-size: 13px; margin-top: 4px; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #b42318; }
/* The Contact form styled as live's Ninja Form: labels hidden (placeholders), borderless #f7f7f7 50px fields in
   Cormorant, name/email/phone left and a 200px message right, 300x50 Send right-aligned; one column on phones */
.band--grey > .wrap > .form--live { padding: 45px 25px 75px; }
.form.form--live .fields { gap: 30px 60px; }
.form--live label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.form--live input, .form--live textarea { width: 100%; height: 50px; padding: 12px; border: 0; border-radius: 0; background: #f7f7f7; color: #6b6b6b; font: 300 16px/1.5 var(--font-body); }
.form--live textarea { height: 200px; font-weight: 400; resize: vertical; }
.form--live input::placeholder, .form--live textarea::placeholder { color: #6b6b6b; opacity: 1; }
.form--live .form__status { margin: 0; }
.form--live button[type="submit"] { width: 300px; height: 50px; min-width: 0; padding: 12px; font: 700 16px/1 var(--font-body); letter-spacing: 1px; color: #f7f7f7; }
.form__status { margin-top: 16px; font-family: var(--font-head); font-size: 15px; }
.form__status.is-ok { color: var(--olive); }
.form__status.is-err { color: #b42318; }
.hp { position: absolute; left: -9999px; }

/* ---- News ---------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 20px; }   /* live: gap-x-5 gap-y-10 */
.wrap:has(> .post-grid) { padding-inline: 0; }   /* live: its container has no side padding */
.post-grid::after { content: ""; grid-column: 1 / -1; }   /* live: an empty col-span-12 after the last post adds one more 40px row gap */
.post-card { text-decoration: none; display: block; }
.post-card__img { height: 384px; width: 100%; object-fit: cover; }   /* live: bg-img h-96 */
.post-card__body { background: var(--paper); margin: -75px 20px 0; padding: 32px; position: relative; }
.post-card__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }   /* live: flex justify-between items-end mb-5 */
.post-card__head h2 { margin: 0; }   /* live: h2.entry-title mb-0 (28px) */
.post-card time { color: #000; }   /* live: unstyled - system font 16px, wraps when the title is long */
/* News post (live: section.blog-page my-5 > container > article; image grid my-28; text col-span-10 col-start-2) */
.post { margin-block: 20px; }
.post > article { padding-inline: 0; }
.post .crumbs > .wrap { padding-inline: var(--pad); }
@media (min-width: 768px) { .post .crumbs > .wrap { padding-inline: 0; } }
.featured { width: 100%; max-height: 600px; object-fit: cover; object-position: center; margin-block: 112px; }
.post > article > h1 { width: 83.333%; margin-inline: auto; }
.prose { width: 83.333%; margin-inline: auto; display: flow-root; }
.post-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 20px; }   /* row gap: on narrow phones the two buttons wrap and were touching (James 2026-11-10) */
.narrow + .post-nav { margin-top: 112px; }   /* live: its own my-28 container below the intro */

.prose figcaption { font-family: var(--font-head); font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---- Developments index -------------------------------------------------- */
.dev-list { display: grid; gap: 40px; margin-top: 112px; }   /* live: its own my-28 container, grid gap-y-10 */
.tagline { font-style: italic; color: var(--sage); }   /* live: p.italic.text-secondary */
/* Previous developments (live: grid gap-x-5 gap-y-10 of col-span-6 cards at every width; image, then bg-grey p-8 mx-5 mt -50) */
.prev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
.prev-card img { width: 100%; }
.prev-card__body { background: var(--paper); margin: -50px 20px 0; padding: 32px; position: relative; }
.prev-card__body h3 { margin-bottom: 12px; }
.prev-card__actions { display: flex; gap: 20px; }
.dev-card { display: grid; grid-template-columns: 1fr; }
.dev-card__img { width: 100%; max-height: 500px; object-fit: cover; object-position: top; }   /* live: natural height, clipped at 500 from the top */
.dev-card__side { position: relative; background: var(--petrol) center / cover no-repeat; display: none; align-items: center; justify-content: center; text-align: center; }
.dev-card__side::before { content: ""; position: absolute; inset: 0; background: var(--petrol); opacity: .2; mix-blend-mode: multiply; }   /* live: .bg-img:before */
.dev-card__side img { position: relative; z-index: 1; height: 112px; width: auto; max-width: none; margin: 0 auto 20px; }   /* live: h-28 mb-5 */
.dev-card__side iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .3s; }
.dev-card__side:hover iframe, .dev-card__side:focus-within iframe { opacity: 1; pointer-events: auto; }
.band > .wrap > .dev-card { margin-inline: calc(-1 * var(--pad)); }   /* live: the card's container has no side padding on phones */
.dev-card__body { background: var(--paper); margin: -50px 20px 0; padding: 32px; position: relative; display: flex; flex-direction: column; align-items: flex-start; }   /* live: p-8 mx-5, style=margin-top:-50px, flex-col items-start */
.dev-card__body h3 { font-size: 42px; color: var(--petrol); margin-bottom: 30px; }   /* live: h3.h1 - .h1's 30px beats mb-3 */

/* ---- Development page ---------------------------------------------------- */
.gallery { margin-block: 112px; }   /* live: container my-28 */
.gallery__main { position: relative; height: 400px; background: var(--paper); overflow: hidden; margin-bottom: 20px; }   /* live: .gallery-image 400px, md 600px; slider mb-5 */
.gallery__main img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.gallery__main img.is-active { opacity: 1; }
.gallery__main img { -webkit-user-drag: none; user-select: none; }
.gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--petrol); color: var(--white); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.gallery__arrow--prev { left: 12px; }
.gallery__arrow--next { right: 12px; }
.gallery__arrow svg { width: 18px; height: 18px; }
.gallery__thumbs { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }   /* live: slick, three per view */
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button { flex: 0 0 33.3333%; height: 100px; padding: 0 8px; border: 0; background: none; cursor: pointer; scroll-snap-align: start; }   /* live: .gallery-thumb 100px, md 200px; slide padding 0 8px */
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--sage); z-index: 2; }
.gallery__bar.is-running { width: 100%; transition: width 5s linear; }
.accordion details { margin-bottom: 8px; }
.accordion summary { list-style: none; cursor: pointer; background: var(--sage); color: var(--white); font-family: var(--font-head); font-size: 22px; font-weight: 300; line-height: 1.5; padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; }   /* live: px-5 py-2, h3 22px */
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.accordion details[open] summary::after { transform: rotate(-135deg); }
.accordion .accordion__body { padding: 20px; }
.accordion .accordion__body p { margin-bottom: 10px; }   /* live: 10px inside the accordion */

.map { height: 600px; margin-block: 112px; background: var(--paper); }   /* live: container my-28, acf-map h-[600px] */
.map iframe { width: 100%; height: 100%; border: 0; }
.bullets li::marker { color: var(--sage); }

/* ---- Buying Process steps (Lauren's design) ------------------------------ */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li { position: relative; padding-left: 64px; margin-bottom: 36px; counter-increment: step; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--sage); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.steps h2 { font-size: 26px; margin-bottom: .4em; }
.steps h3 { font-size: 20px; font-weight: 700; margin: 1em 0 .2em; }

/* ---- Desktop ------------------------------------------------------------- */
@media (min-width: 768px) {
  .nav { display: block; }
  .header-contact { margin-left: 0; margin-right: 0; }
  .menu-toggle { display: none; }
  .hero:not(.hero--full) > .wrap > * { max-width: 41.666%; }   /* live: md:col-span-5 */
  .hero--full .wrap > * { max-width: 50%; }   /* live: md:col-span-6 md:col-start-4 */
  .split { grid-template-columns: 1fr 1fr; }
  .split--text-first > :first-child { order: 0; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form { padding: 48px; }
  .form .fields { grid-template-columns: 1fr 1fr; }
  .form .fields .field--wide { grid-column: 1 / -1; }
  .band--grey > .wrap > .form--live { padding: 45px 75px 75px; }
  .form.form--live .fields { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 50px) auto; }
  .form.form--live .fields .field { grid-column: 1; }
  .form.form--live .fields .field--wide:has(textarea) { grid-column: 2; grid-row: 1 / 4; }
  .form.form--live .fields .captcha { grid-column: 1; grid-row: 4; }
  .form.form--live .fields .field--wide:has(button) { grid-column: 2; grid-row: 4; text-align: right; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-card { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .band > .wrap > .dev-card { margin-inline: 0; }   /* live md: 6/6, lg: 9/3 */
  .dev-card__side { display: flex; }
  .dev-card__body { grid-column: 1; }
  .site-footer .cols { grid-template-columns: repeat(4, 1fr); }
  .site-footer .fdrop summary { margin-bottom: 0; }   /* live: mb-3 md:mb-0 */
  .site-footer .strap .wrap { flex-direction: row; }
  .site-footer .cols > :nth-child(1), .site-footer .cols > :nth-child(2) { grid-column: auto; }
  .gallery__main { height: 600px; }
  .gallery__thumbs button { height: 200px; }
}

@media (min-width: 1024px) {
  .dev-card { grid-template-columns: calc(75% - 5px) 1fr; }   /* live lg: col-span-9 / 3 of a 12-col grid with 20px gaps */
}

/* ---- Lauren's page design (Buying Process, Financial Services; 2026-11) ------------------- */
.page-hero { position: relative; height: 300px; background: var(--petrol) center / cover no-repeat; }
.page-hero__panel { position: relative; background: var(--petrol); color: var(--white); margin: -90px var(--pad) 0; padding: 34px 28px; overflow: hidden; }
.page-hero__panel h1 { color: var(--white); margin: 0; position: relative; }
.page-hero__panel::before { content: ""; position: absolute; left: 10px; top: -10px; width: 110px; height: 110px; background: url('../img/esmera-mark.svg') center / contain no-repeat; opacity: .35; }
.page-hero__panel.wrap { max-width: 1100px; width: auto; }   /* Lauren's design: the title panel is narrower than the page */
.design-steps { padding-block: 40px; }
.design-step { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; margin-bottom: 56px; }
.design-step__img { position: relative; }
.design-step__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.design-step__img::after { content: attr(data-n); position: absolute; left: 12px; bottom: -6px; font-family: var(--font-head); font-weight: 300; font-size: 140px; line-height: 1; color: rgba(255,255,255,.55); }
.design-step__img--right::after { left: auto; right: 12px; }
.design-step h2 { font-family: var(--font-body); font-weight: 500; font-size: 30px; color: var(--ink); margin-bottom: .4em; }
.design-step h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); margin: 1em 0 .2em; }
.design-step p { font-family: var(--font-head); font-size: 16px; color: var(--ink); margin-bottom: .8em; }
.design-step ul { font-family: var(--font-head); font-size: 16px; color: var(--ink); list-style: none; padding: 0; }
.design-step ul li { font-weight: 700; margin: .1em 0; }
.design-step .btn--petrol { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 16px; padding: 10px 28px; border-radius: 0; margin-top: 8px; }
.contact-panel { position: relative; padding-block: 24px 48px; }
.contact-panel__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.contact-panel__box { background: var(--petrol); color: var(--white); padding: 36px 28px; margin: -60px var(--pad) 0; position: relative; }
.contact-panel__box h2 { color: var(--white); font-size: 34px; }
.contact-panel__box .form { background: none; padding: 0; }
.contact-panel__box .field label { color: var(--white); font-size: 15px; }
.contact-panel__box .fields { grid-template-columns: 1fr; }
.contact-panel__box .field input, .contact-panel__box .field textarea { background: var(--paper); border: 0; }
.contact-panel__box .form__status.is-ok { color: var(--sage); }
.contact-panel__box .form__status.is-err { color: #f5b5ad; }
@media (min-width: 768px) {
  .page-hero { height: 360px; }
  .page-hero__panel { margin: -120px auto 0; padding: 48px 64px 48px 110px; }
  .page-hero__panel::before { left: 28px; top: 16px; width: 130px; height: 130px; }
  .design-step { grid-template-columns: 1fr 1fr; gap: 40px; }
  .design-step--flip .design-step__img { order: 2; }
  .design-step h2 { font-size: 34px; }
  .design-step p, .design-step ul { font-size: 17px; }
  .contact-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-panel__img { grid-column: 1 / 2; grid-row: 1; aspect-ratio: 4 / 3; }
  .contact-panel__box { grid-column: 2 / 3; grid-row: 1; margin: 40px 0 0 -120px; padding: 56px 48px; }
}
.design-step__img--logo { background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 40px; aspect-ratio: 1 / 1; }
.design-step__img--logo img { aspect-ratio: auto; width: 70%; object-fit: contain; }
.design-step__img--logo::after { content: none; }