/*
Theme Name: Legacy Synergy
Theme URI: https://legacysynergy.com.my
Author: Fibernatic
Description: Block theme for Legacy Synergy Sdn Bhd - offshore and onshore catering, hospitality and manpower, Miri, Sarawak. Dark editorial design with a gold accent, built mobile-first.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legacy-synergy
Tags: full-site-editing, block-theme, one-column, custom-colors, custom-menu
*/

/* ------------------------------------------------------------------
   Layout primitives
   Every grid here collapses to one column on phones. Widths come from
   auto-fit/minmax rather than fixed columns, so a row with one card
   left over never stretches it (the bug the static build had).
   ------------------------------------------------------------------ */

.ls-section { padding-block: var(--wp--preset--spacing--60); }
.ls-section--tight { padding-block: var(--wp--preset--spacing--50); }

.ls-shell { width: 100%; max-width: 1312px; margin-inline: auto; }

/* section header: title left, intro right; stacks on tablet down */
.ls-head { display: grid; gap: clamp(1rem, 3vw, 5rem); align-items: end; }
@media (min-width: 900px) { .ls-head { grid-template-columns: minmax(0, 1fr) 420px; } }

.ls-eyebrow {
  display: flex; align-items: center; gap: 0.875rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--wp--preset--color--gold);
  margin-block-end: 1.5rem;
}
.ls-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.ls-eyebrow--rust { color: var(--wp--preset--color--rust); }

.ls-intro { color: var(--wp--preset--color--muted); max-width: min(46ch, 100%); }

/* light sections invert the palette */
.ls-light { background: var(--wp--preset--color--bone); color: var(--wp--preset--color--ink); }
.ls-light h1, .ls-light h2, .ls-light h3, .ls-light h4 { color: var(--wp--preset--color--ink); }
.ls-light .ls-intro { color: #5A5F67; }

/* ------------------------------------------------------------------
   Grids
   ------------------------------------------------------------------ */
.ls-grid { display: grid; gap: 1rem; }
.ls-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ls-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ls-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* service columns: 1 → 2 → 3 → 6 across breakpoints */
.ls-services { display: grid; gap: 0; grid-template-columns: 1fr; }
.ls-services > * { border-top: 1px solid var(--wp--preset--color--line); padding: 1.6rem 1.5rem 2rem 0; }
@media (min-width: 620px) { .ls-services { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; } }
@media (min-width: 1000px) { .ls-services { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ls-services { grid-template-columns: repeat(6, 1fr); } }

/* client cards: fixed-ish tiles that never stretch on a short row */
.ls-clients { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ls-client {
  display: flex; align-items: center; gap: 0.875rem;
  min-height: 92px; padding: 0.875rem 1rem;
  background: var(--wp--preset--color--white);
  outline: 1px solid rgba(10, 11, 12, 0.12); outline-offset: -1px;
  border-radius: 2px;
}
.ls-client__logo {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center; padding: 8px;
  background: #fff; border: 1px solid rgba(10, 11, 12, 0.1); border-radius: 3px;
}
.ls-client__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ls-client__name { font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--wp--preset--color--ink); }

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.ls-hero { position: relative; display: grid; align-items: end; min-height: min(86vh, 820px); overflow: hidden; }
.ls-hero__media { position: absolute; inset: 0; }
.ls-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ls-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,.95) 0%, rgba(5,5,6,.66) 45%, rgba(5,5,6,.98) 100%);
}
.ls-hero__inner { position: relative; padding-block: clamp(4rem, 12vw, 7rem); }
.ls-hero h1 { max-width: min(16ch, 100%); text-wrap: balance; }
.ls-hero__deck { max-width: min(52ch, 100%); color: var(--wp--preset--color--bone-2); font-size: var(--wp--preset--font-size--lead); margin-block-start: 1.5rem; }

.ls-credentials {
  display: grid; gap: 1.5rem 2rem; margin-block-start: clamp(2rem, 5vw, 3.5rem);
  padding-block-start: 1.6rem; border-top: 1px solid rgba(244, 241, 234, 0.15);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.ls-credentials strong {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 700; color: var(--wp--preset--color--gold);
}
.ls-credentials span { font-size: 0.85rem; color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.ls-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2rem; }
.ls-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1.05rem 1.75rem; border-radius: 2px; text-decoration: none;
  font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
}
.ls-btn--gold { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.ls-btn--ghost { border-color: rgba(244, 241, 234, 0.3); color: var(--wp--preset--color--bone); }
.ls-btn--wa { background: var(--wp--preset--color--whatsapp); color: var(--wp--preset--color--ink); }
.ls-btn--dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold); }
.ls-btn:hover { opacity: 0.88; }
.ls-btn:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
@media (max-width: 520px) { .ls-btn { width: 100%; } }

/* ------------------------------------------------------------------
   Header / nav
   ------------------------------------------------------------------ */
.ls-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 11, 12, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.ls-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.ls-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.ls-brand img { width: 34px; height: 34px; }
.ls-brand__name { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.15em; color: var(--wp--preset--color--bone); }
.ls-brand__sub { font-family: var(--wp--preset--font-family--mono); font-size: 0.5rem; letter-spacing: 0.4em; color: var(--wp--preset--color--gold); display: block; }

/* the mobile menu is CSS-only: a checkbox toggles it, so it works without JS */
.ls-nav__toggle { display: none; }
.ls-nav__burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 0.75rem; cursor: pointer; }
.ls-nav__burger span { display: block; width: 22px; height: 2px; background: var(--wp--preset--color--bone); }
.ls-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; align-items: center; }
.ls-nav__list a { color: var(--wp--preset--color--bone-2); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.ls-nav__list a:hover, .ls-nav__list .current-menu-item > a { color: var(--wp--preset--color--gold); }

@media (max-width: 1023px) {
  .ls-nav__burger { display: inline-flex; }
  .ls-nav { position: fixed; inset: 64px 0 auto; background: var(--wp--preset--color--ink-2); border-bottom: 1px solid var(--wp--preset--color--line); display: none; }
  .ls-nav__toggle:checked ~ .ls-nav { display: block; }
  .ls-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 1.25rem; }
  .ls-nav__list a { display: block; padding: 0.9rem clamp(1.25rem, 4.5vw, 4rem); font-size: 1rem; }
  .ls-header__cta { display: none; }
}
@media (min-width: 1024px) { .ls-nav__burger { display: none; } }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.ls-footer { background: #050506; padding-block: clamp(3rem, 7vw, 5rem) 2.25rem; }
.ls-footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .ls-footer__top { grid-template-columns: 400px repeat(3, 1fr); gap: 5rem; } }
.ls-footer h2 { font-family: var(--wp--preset--font-family--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--gold-dk); margin-block-end: 1.1rem; }
.ls-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ls-footer a { color: var(--wp--preset--color--bone-2); text-decoration: none; font-size: 0.875rem; }
.ls-footer a:hover { color: var(--wp--preset--color--gold); }
.ls-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  margin-block-start: 3rem; padding-block-start: 1.5rem; border-top: 1px solid rgba(244, 241, 234, 0.12);
  font-size: 0.78rem; color: #6B7078;
}
.ls-social { display: flex; gap: 0.6rem; margin-block-start: 1.25rem; }
.ls-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--wp--preset--color--line); border-radius: 2px; }

/* ------------------------------------------------------------------
   Cards, media, utilities
   ------------------------------------------------------------------ */
.ls-card { background: var(--wp--preset--color--ink-2); border: 1px solid var(--wp--preset--color--line); border-radius: 3px; padding: clamp(1.5rem, 4vw, 2.25rem); }
.ls-media { border-radius: 2px; overflow: hidden; }
.ls-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-ratio-4x3 { aspect-ratio: 4 / 3; }
.ls-ratio-3x2 { aspect-ratio: 3 / 2; }
.ls-ratio-1x1 { aspect-ratio: 1 / 1; }

.ls-label { font-family: var(--wp--preset--font-family--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.ls-num { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.15em; color: var(--wp--preset--color--gold); }
.ls-rule { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin-block: 0; }

/* ------------------------------------------------------------------
   Vacancies (rendered by [ls_vacancies])
   ------------------------------------------------------------------ */
.ls-vacancies { display: grid; }
.ls-vacancy {
  display: grid; gap: 1.5rem; padding-block: 1.75rem;
  border-bottom: 1px solid rgba(10, 11, 12, 0.12);
}
@media (min-width: 860px) {
  .ls-vacancy { grid-template-columns: minmax(0, 1fr) 210px; align-items: start; gap: 2.5rem; }
}
.ls-vacancy__title { font-size: clamp(1.35rem, 3vw, 1.65rem); margin: 0; }
.ls-vacancy__desc { margin: 0.6rem 0 0; color: #5A5F67; max-width: min(62ch, 100%); }
.ls-vacancy__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 1rem 0 0; padding: 0; }
.ls-vacancy__meta li { font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: #4A4F57; }
.ls-vacancy__actions { display: grid; gap: 0.6rem; align-content: start; }

/* ------------------------------------------------------------------
   Crew gallery (rendered by [ls_crew_gallery])
   ------------------------------------------------------------------ */
.ls-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ls-gallery__tile { position: relative; margin: 0; border-radius: 2px; overflow: hidden; background: var(--wp--preset--color--ink-3); aspect-ratio: 3 / 2; }
.ls-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-gallery__tile figcaption {
  position: absolute; inset: auto 0 0 0; display: grid; gap: 0.3rem; padding: 1.25rem;
  background: linear-gradient(180deg, rgba(5,5,6,0) 0%, rgba(5,5,6,.9) 65%);
  color: var(--wp--preset--color--bone);
}
.ls-gallery__tile figcaption strong { font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; font-weight: 700; }

/* ------------------------------------------------------------------
   Inner pages
   Everything below is used by the eight page patterns. Same rule as
   above: one column by default, columns only once there is room.
   ------------------------------------------------------------------ */

/* shorter hero for inner pages - the full-height one is home only */
.ls-hero--page { min-height: min(62vh, 580px); }
.ls-hero--page h1 { max-width: min(20ch, 100%); }

.ls-breadcrumb {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-block-end: 1.25rem;
}
.ls-breadcrumb a { color: var(--wp--preset--color--muted); }
.ls-breadcrumb a:hover { color: var(--wp--preset--color--gold); }

/* fact strip - like .ls-credentials but usable on light sections */
.ls-facts {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.ls-facts .ls-label { display: block; margin-block-end: 0.35rem; }
.ls-facts strong {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.15;
  color: var(--wp--preset--color--gold);
}
.ls-light .ls-facts strong { color: var(--wp--preset--color--ink); }

/* S.Y.N.E.R.G.Y values */
.ls-values { display: grid; gap: 0; }
.ls-value {
  display: grid; gap: 0.35rem 1.75rem; align-items: start;
  padding-block: 1.6rem; border-top: 1px solid var(--wp--preset--color--line);
}
.ls-light .ls-value { border-top-color: rgba(10, 11, 12, 0.12); }
@media (min-width: 760px) { .ls-value { grid-template-columns: 64px minmax(0, 22ch) minmax(0, 1fr); align-items: baseline; } }
.ls-value__letter {
  font-family: var(--wp--preset--font-family--display); font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1;
  color: var(--wp--preset--color--gold);
}
.ls-value__name { font-weight: 600; margin: 0; }
.ls-value__desc { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.925rem; }
.ls-light .ls-value__desc { color: #5A5F67; }

/* timeline - stacks on phones, runs across on desktop */
.ls-timeline { display: grid; gap: 0; grid-template-columns: 1fr; }
.ls-timeline > * { padding: 1.5rem 1.5rem 1.75rem 0; border-top: 1px solid var(--wp--preset--color--line); }
.ls-light .ls-timeline > * { border-top-color: rgba(10, 11, 12, 0.12); }
@media (min-width: 680px)  { .ls-timeline { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; } }
@media (min-width: 1100px) { .ls-timeline { grid-template-columns: repeat(5, 1fr); } }
.ls-timeline h4 { margin: 0.9rem 0 0.5rem; font-size: 1.05rem; }
.ls-timeline p { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.ls-light .ls-timeline p { color: #5A5F67; }

/* data tables - a real table on desktop, stacked rows on phones */
.ls-table-wrap { margin-block-start: 2.5rem; }
.ls-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ls-table th {
  text-align: left; font-family: var(--wp--preset--font-family--mono);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); font-weight: 500;
  padding: 0 1.25rem 0.9rem 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
.ls-table td { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.ls-light .ls-table th, .ls-light .ls-table td { border-bottom-color: rgba(10, 11, 12, 0.12); }
.ls-table strong { display: block; font-weight: 600; }
.ls-table small { display: block; color: var(--wp--preset--color--muted); font-size: 0.82rem; margin-block-start: 0.3rem; }
.ls-light .ls-table small { color: #5A5F67; }

@media (max-width: 859px) {
  .ls-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
  .ls-table, .ls-table tbody, .ls-table tr, .ls-table td { display: block; width: 100%; }
  .ls-table tr { padding-block: 1.25rem; border-bottom: 1px solid var(--wp--preset--color--line); }
  .ls-light .ls-table tr { border-bottom-color: rgba(10, 11, 12, 0.12); }
  .ls-table td { border: 0; padding: 0.4rem 0 0; }
  /* the column heading travels with the cell once the table stacks */
  .ls-table td::before {
    content: attr(data-label); display: block;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--wp--preset--color--muted); margin-block-end: 0.3rem;
  }
}

/* HACCP control points */
.ls-chain { display: grid; gap: 0; grid-template-columns: 1fr; }
.ls-chain > * { padding: 1.4rem 1.5rem 1.6rem 0; border-top: 1px solid var(--wp--preset--color--line); }
.ls-light .ls-chain > * { border-top-color: rgba(10, 11, 12, 0.12); }
@media (min-width: 620px)  { .ls-chain { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; } }
@media (min-width: 1000px) { .ls-chain { grid-template-columns: repeat(4, 1fr); } }
.ls-chain h4 { margin: 0.8rem 0 0.45rem; font-size: 1rem; }
.ls-chain p { margin: 0; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.ls-light .ls-chain p { color: #5A5F67; }
.ls-chain__note {
  margin-block-start: 1.75rem; padding: 0.9rem 1.25rem;
  border: 1px solid var(--wp--preset--color--line); border-radius: 2px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--gold); text-align: center;
}

/* dish cards */
.ls-dishes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ls-dish { margin: 0; }
.ls-dish .ls-media { margin-block-end: 0.85rem; }
.ls-dish h4 { margin: 0 0 0.25rem; font-size: 1.02rem; }
.ls-dish p { margin: 0; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.ls-light .ls-dish p { color: #5A5F67; }

/* price lists */
.ls-menu { display: grid; gap: 0; }
.ls-menu__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.25rem;
  align-items: baseline; padding-block: 0.95rem;
  border-bottom: 1px dotted rgba(244, 241, 234, 0.2);
}
.ls-light .ls-menu__row { border-bottom-color: rgba(10, 11, 12, 0.2); }
.ls-menu__row h4 { margin: 0; font-size: 1rem; }
.ls-menu__row p { grid-column: 1 / -1; margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.ls-light .ls-menu__row p { color: #5A5F67; }
.ls-menu__price { font-family: var(--wp--preset--font-family--mono); font-size: 0.85rem; color: var(--wp--preset--color--gold); white-space: nowrap; }

/* big numbers */
.ls-stats { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ls-stat strong {
  display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800;
  font-size: clamp(2.75rem, 8vw, 4.5rem); line-height: 1; color: var(--wp--preset--color--gold);
}
.ls-stat span { display: block; margin-block-start: 0.6rem; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.ls-light .ls-stat span { color: #5A5F67; }

/* tag list */
.ls-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.ls-tags li {
  padding: 0.55rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 100px;
  font-size: 0.82rem; color: var(--wp--preset--color--bone-2);
}
.ls-light .ls-tags li { border-color: rgba(10, 11, 12, 0.18); color: var(--wp--preset--color--ink); }

/* checklist */
.ls-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.ls-check li { position: relative; padding-inline-start: 1.85rem; font-size: 0.95rem; }
.ls-check li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em;
  width: 10px; height: 10px; border: 1px solid var(--wp--preset--color--gold); border-radius: 50%;
}

/* numbered steps */
.ls-steps { display: grid; gap: 0; grid-template-columns: 1fr; }
.ls-steps > * { padding: 1.6rem 1.5rem 1.8rem 0; border-top: 1px solid var(--wp--preset--color--line); }
.ls-light .ls-steps > * { border-top-color: rgba(10, 11, 12, 0.12); }
@media (min-width: 900px) { .ls-steps { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; } }
.ls-steps h4 { margin: 0.9rem 0 0.5rem; }
.ls-steps p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.9rem; }
.ls-light .ls-steps p { color: #5A5F67; }

/* enquiry form */
.ls-form { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .ls-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ls-field { display: grid; gap: 0.5rem; }
.ls-field--full { grid-column: 1 / -1; }
.ls-field label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.ls-field label .req { color: var(--wp--preset--color--rust); }
.ls-field input, .ls-field select, .ls-field textarea {
  width: 100%; padding: 0.9rem 1rem; border-radius: 2px;
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(10, 11, 12, 0.2);
  color: var(--wp--preset--color--ink);
  font-family: inherit; font-size: 0.95rem;
}
.ls-field textarea { min-height: 150px; resize: vertical; }
.ls-consent { grid-column: 1 / -1; display: flex; gap: 0.75rem; align-items: start; font-size: 0.85rem; color: #5A5F67; }
.ls-consent input { margin-block-start: 0.2rem; flex: none; }
.ls-form__note { grid-column: 1 / -1; font-size: 0.8rem; color: #5A5F67; margin: 0; }

/* notice / warning panel */
.ls-notice {
  padding: 1.25rem 1.5rem; border-radius: 2px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--ink-2);
  font-size: 0.875rem; color: var(--wp--preset--color--bone-2);
}
.ls-light .ls-notice { background: var(--wp--preset--color--white); border-color: rgba(10, 11, 12, 0.14); color: #5A5F67; }

img { max-width: 100%; height: auto; }

/* Nothing may widen the page: ch-based measures are capped to the container,
   and long unbroken strings (emails, URLs) wrap instead of forcing a scrollbar. */
html, body { max-width: 100%; overflow-x: clip; }
p, li, h1, h2, h3, h4, figcaption { overflow-wrap: anywhere; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
:where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }


/* ---------- Primary nav: Services submenu (Valley Cafe) ---------- */
.ls-nav__has-sub { position: relative; }
.ls-nav__has-sub > a::after { content: ""; display: inline-block; margin-left: .45em; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: .2em; }
.ls-nav__sub { list-style: none; margin: 0; padding: .5rem 0; }
@media (min-width: 1024px) {
  .ls-nav__sub { position: absolute; top: 100%; left: -1rem; min-width: 190px; margin-top: .75rem; background: var(--wp--preset--color--ink-2); border: 1px solid var(--wp--preset--color--line); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 50; }
  .ls-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.9rem; height: .9rem; }
  .ls-nav__has-sub:hover > .ls-nav__sub, .ls-nav__has-sub:focus-within > .ls-nav__sub { opacity: 1; visibility: visible; transform: none; }
  .ls-nav__sub a { display: block; padding: .55rem 1rem; }
}
@media (max-width: 1023px) {
  .ls-nav__sub { padding: 0 0 0 1rem; }
}


/* ---------- Font-size token aliases ----------
   WordPress outputs theme.json slugs h1-h4 as --h-1 ... --h-4, but heading
   styles reference --h1 ... --h4. Map them so headings get their sizes. */
:root, body, .editor-styles-wrapper {
  --wp--preset--font-size--h1: var(--wp--preset--font-size--h-1);
  --wp--preset--font-size--h2: var(--wp--preset--font-size--h-2);
  --wp--preset--font-size--h3: var(--wp--preset--font-size--h-3);
  --wp--preset--font-size--h4: var(--wp--preset--font-size--h-4);
}


/* ---------- Home polish ---------- */
.ls-services h3 { font-size: 1.05rem; line-height: 1.25; }
@media (min-width: 900px) {
  .ls-cta-grid { grid-template-columns: 1fr auto; }
}
.ls-footer li { font-size: 0.875rem; font-weight: 400; }

/* ---------- Page polish (approved build) ---------- */
.ls-hero h1 { text-transform: uppercase; }
@media (max-width: 700px) {
  .ls-value-row { grid-template-columns: 2.5rem 1fr !important; }
  .ls-value-row > p:last-child { grid-column: 2; }
}

.ls-card.ls-card--dark { background: var(--wp--preset--color--ink-2); border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--bone); }
.ls-card--dark li, .ls-card--dark p:not(.ls-label) { color: var(--wp--preset--color--bone-2); }
@media (max-width: 700px) {
  .ls-esg-rows > div { grid-template-columns: 1fr !important; }
}

.ls-facts-band { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.ls-facts-band .ls-label { color: rgba(10,11,12,.65); }
.ls-facts-band strong { color: var(--wp--preset--color--ink); }
/* Remove block-gap strips between full-width sections */
.wp-block-post-content > .ls-section, .wp-block-post-content > section, .wp-block-post-content > .ls-hero { margin-block-start: 0; }

/* dishes 4-up */
@media (min-width: 900px) {
  .ls-dishes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Vacancy detail body */
.single-ls_vacancy .wp-block-post-content { max-width: 72ch; }
.single-ls_vacancy .wp-block-post-content > * + * { margin-block-start: 1rem; }
.single-ls_vacancy .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--h-4); margin-block-start: 2.75rem; }
.single-ls_vacancy .wp-block-post-content p, .single-ls_vacancy .wp-block-post-content li { color: var(--wp--preset--color--bone-2); line-height: 1.7; }
.single-ls_vacancy .wp-block-post-content ul { padding-left: 1.2rem; display: grid; gap: .5rem; }
.single-ls_vacancy .wp-block-post-content li::marker { color: var(--wp--preset--color--gold); }

@media (min-width: 960px) {
  .ls-contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
}

/* Side gutter so text never touches the screen edge */
.ls-shell { box-sizing: border-box; padding-inline: clamp(1rem, 4vw, 2rem); }
.ls-shell .ls-shell { padding-inline: 0; }

.ls-card .ls-btn { max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }

/* Outline buttons on light sections */
.ls-light .ls-btn--ghost { color: var(--wp--preset--color--ink); border-color: rgba(10,11,12,.35); }
.ls-light .ls-btn--ghost:hover { border-color: var(--wp--preset--color--ink); }

/* ---------- Org chart (About) ---------- */
.ls-org { --org-line: rgba(244,241,234,.18); margin-top: 3.5rem; }
.ls-org__top { display: flex; flex-direction: column; align-items: center; }
.ls-org__lead { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.3rem); text-align: center; padding: .95rem 1.5rem; min-width: min(100%, 21rem); box-sizing: border-box; position: relative; }
.ls-org__lead--wide { min-width: min(100%, 25rem); margin-top: 1.75rem; }
.ls-org__lead--wide::before { content: ""; position: absolute; left: 50%; top: -1.75rem; height: 1.75rem; border-left: 1px solid var(--org-line); }
.ls-org__lead--wide::after { content: ""; position: absolute; left: 50%; bottom: -1.9rem; height: 1.9rem; border-left: 1px solid var(--org-line); }
.ls-org__divs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.9rem; padding-top: 1.6rem; border-top: 1px solid var(--org-line); }
.ls-org__col { display: flex; flex-direction: column; gap: 1rem; position: relative; }
.ls-org__col::before { content: ""; position: absolute; left: 50%; top: -1.6rem; height: 1.6rem; border-left: 1px solid var(--org-line); }
.ls-org__div { background: var(--wp--preset--color--ink-2); border-top: 3px solid var(--wp--preset--color--gold); padding: 1.1rem .75rem 1.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; min-height: 6.2rem; box-sizing: border-box; justify-content: center; }
.ls-org__div svg { width: 22px; height: 22px; fill: none; stroke: var(--wp--preset--color--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ls-org__div span { color: var(--wp--preset--color--bone); font-weight: 700; font-size: .98rem; line-height: 1.25; }
.ls-org__role { border: 1px solid var(--org-line); color: var(--wp--preset--color--bone-2); font-size: .85rem; line-height: 1.4; text-align: center; padding: .8rem .75rem; position: relative; }
.ls-org__role::before { content: ""; position: absolute; left: 50%; top: calc(-1rem - 1px); height: 1rem; border-left: 1px solid var(--org-line); }
@media (max-width: 1100px) {
  .ls-org__divs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.25rem; border-top: 0; padding-top: 0; }
  .ls-org__col::before { display: none; }
}
@media (max-width: 640px) {
  .ls-org__divs { grid-template-columns: minmax(0, 1fr); }
  .ls-org__lead, .ls-org__lead--wide { min-width: 100%; }
}

/* Client logos: keep tall logos inside their box */
.ls-client__logo { box-sizing: border-box; overflow: hidden; }
.ls-client__logo img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* ---------- Intro sequence (00 — Intro Sequence, 3.2s, once per session) ---------- */
@property --ls-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ls-splash { display: none; }
.ls-splash-on .ls-splash {
  display: flex; position: fixed; inset: 0; z-index: 100000;
  width: 100%; height: 100%; max-width: none !important; margin: 0 !important; box-sizing: border-box;
  align-items: center; justify-content: center;
  background: var(--wp--preset--color--ink, #0A0B0C);
  border-bottom: 2px solid var(--wp--preset--color--gold, #D9A427);
  cursor: pointer;
  animation: ls-curtain .6s cubic-bezier(.7, 0, .2, 1) 2.6s forwards;
}
.ls-splash-on { overflow: hidden; }
.ls-splash__stage { position: relative; display: grid; place-items: center; width: min(90vw, 560px); height: 260px; }
.ls-splash__mark {
  position: absolute; width: 120px; height: 120px; object-fit: contain;
  -webkit-mask-image: conic-gradient(from -90deg, #000 var(--ls-sweep), transparent 0);
  mask-image: conic-gradient(from -90deg, #000 var(--ls-sweep), transparent 0);
  animation: ls-draw .9s cubic-bezier(.45, 0, .25, 1) 0s both, ls-fade-out .25s ease-in .95s forwards;
}
.ls-splash__type { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ls-splash__word {
  margin: 0; color: var(--wp--preset--color--bone, #F4F1EA);
  font-family: var(--wp--preset--font-family--display, Archivo, sans-serif); font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1; white-space: nowrap;
  opacity: 0; animation: ls-track .8s cubic-bezier(.2, .7, .2, 1) 1s forwards;
}
.ls-splash__sub, .ls-splash__tag {
  margin: .7rem 0 0; font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", monospace);
  font-size: .72rem; letter-spacing: .3em; color: var(--wp--preset--color--gold, #D9A427);
  opacity: 0; animation: ls-in .5s ease-out forwards;
}
.ls-splash__sub { animation-delay: 1.35s; }
.ls-splash__rule {
  display: block; width: min(300px, 70vw); height: 2px; margin-top: 1.1rem;
  background: var(--wp--preset--color--gold, #D9A427);
  transform: scaleX(0); transform-origin: left center;
  animation: ls-wipe .4s cubic-bezier(.6, 0, .2, 1) 1.9s forwards;
}
.ls-splash__tag { color: var(--wp--preset--color--muted, #8C9198); animation-delay: 2.15s; }
@keyframes ls-draw { from { --ls-sweep: 0deg; opacity: .35; } to { --ls-sweep: 360deg; opacity: 1; } }
@keyframes ls-fade-out { to { opacity: 0; transform: scale(.94); } }
@keyframes ls-track { from { opacity: 0; letter-spacing: .4em; } to { opacity: 1; letter-spacing: .06em; } }
@keyframes ls-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ls-wipe { to { transform: scaleX(1); } }
@keyframes ls-curtain { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .ls-splash-on .ls-splash { display: none; } }

/* ---------- Services dropdown (Spec — Nav Services Dropdown) ---------- */
.ls-nav__list a.ls-drop, .ls-drop { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 2px; text-decoration: none; }
.ls-drop__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; box-sizing: border-box; border: 1px solid var(--wp--preset--color--line); border-radius: 2px; }
.ls-drop__icon svg { width: 17px; height: 17px; fill: none; stroke: var(--wp--preset--color--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ls-drop__txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ls-nav__list .ls-drop .ls-drop__t { color: var(--wp--preset--color--bone); font-family: var(--wp--preset--font-family--body); font-size: 14.5px; font-weight: 600; }
.ls-drop__s { color: var(--wp--preset--color--muted); font-size: 12.5px; font-weight: 400; line-height: 1.35; }
.ls-drop__arrow { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--wp--preset--color--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.ls-drop:hover, .ls-drop:focus-visible, .current-menu-item > .ls-drop { background: var(--wp--preset--color--ink-3); }
.ls-drop:hover .ls-drop__icon, .ls-drop:focus-visible .ls-drop__icon { border-color: var(--wp--preset--color--gold); }
.ls-drop:hover .ls-drop__arrow, .ls-drop:focus-visible .ls-drop__arrow { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .ls-nav__list .ls-nav__sub { width: 320px; left: 50%; margin-left: -160px; padding: 10px; display: grid; gap: 2px; box-sizing: border-box; border-top: 0; border-radius: 0 0 3px 3px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
  .ls-nav__list .ls-nav__sub::after { content: ""; order: -1; display: block; height: 2px; margin-bottom: 6px; background: var(--wp--preset--color--gold); }
  .ls-nav__list .ls-nav__sub > li { order: 0; }
  .ls-nav__list .ls-nav__sub a.ls-drop { display: flex; padding: 12px 14px; }
}
@media (max-width: 1023px) {
  .ls-drop { padding: 10px 0; }
  .ls-drop__arrow { display: none; }
}

.ls-drop { position: relative; }
.ls-drop__arrow { position: absolute; right: 14px; top: 50%; margin-top: -7.5px; }

/* WhatsApp button text: always ink for contrast on green (footer link colours must not override) */
a.ls-btn--wa, a.ls-btn--wa:hover, a.ls-btn--wa:focus, .ls-footer a.ls-btn--wa, .ls-footer a.ls-btn--wa:hover { color: var(--wp--preset--color--ink); }
a.ls-btn--wa svg { fill: currentColor; }

/* Vacancy tags (Home careers teaser) */
.ls-vtags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; }
a.ls-vtag { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .04em; color: var(--wp--preset--color--bone-2); border: 1px solid rgba(255,255,255,.18); padding: .45rem .8rem; text-decoration: none; transition: border-color .15s, color .15s; }
a.ls-vtag:hover, a.ls-vtag:focus-visible { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
a.ls-vtag.ls-vtag--more { color: var(--wp--preset--color--gold); }

/* Keep a phrase together; lines may only wrap between items (at the ·) */
.ls-nw { white-space: nowrap; }
.ls-eyebrow__txt { min-width: 0; }