@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Montserrat:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Mono:wght@300;400;500&display=swap");

/* ==========================================================================
   Tokens — from the L4 Property Developments design system
   ========================================================================== */
:root {
  --gold-100:#F4E7C6; --gold-200:#E7D097; --gold-300:#D9BA63; --gold-400:#D5AD4D;
  --gold-500:#C79A3C; --gold-600:#A87F2C; --gold-700:#7E5D1F; --gold-800:#4A360F; --gold-900:#241A07;

  --ink-1000:#000000; --ink-900:#060707; --ink-800:#0C0E0E; --ink-700:#131515;
  --ink-600:#1B1D1D; --ink-500:#252827; --ink-400:#333735;

  --paper-000:#FFFFFF; --paper-100:#F6F4F0; --paper-200:#E8E4DC;
  --paper-300:#CFCAC0; --paper-400:#A8A39A; --paper-500:#7C7873;

  --success-500:#5F8F63; --warning-500:#C79A3C; --danger-500:#A6483C; --info-500:#5A7A8C;

  --gold-hairline:linear-gradient(90deg,rgba(199,154,60,0) 0%,rgba(199,154,60,.85) 50%,rgba(199,154,60,0) 100%);

  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --fs-display-1:72px; --fs-display-2:56px; --fs-display-3:42px;
  --fs-h1:34px; --fs-h2:26px; --fs-h3:20px;
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:12px; --fs-micro:11px;

  --lh-display:1.06; --lh-heading:1.2; --lh-body:1.65; --lh-tight:1.35;
  --ls-display:.02em; --ls-heading:.06em; --ls-label:.18em; --ls-eyebrow:.32em; --ls-body:.005em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --container-max:1240px; --container-narrow:760px; --section-y:96px;

  --radius-1:2px; --radius-2:3px; --radius-3:4px; --radius-full:999px;

  --shadow-1:0 1px 2px rgba(0,0,0,.6);
  --shadow-2:0 8px 24px -8px rgba(0,0,0,.75);
  --shadow-3:0 24px 60px -20px rgba(0,0,0,.85);
  --protect-bottom:linear-gradient(to top,rgba(6,7,7,.95) 0%,rgba(6,7,7,.6) 45%,rgba(6,7,7,0) 100%);
  --blur-panel:saturate(120%) blur(14px);

  --bg-page:var(--ink-900);
  --text-primary:var(--paper-100); --text-secondary:var(--paper-300); --text-muted:var(--paper-500);
  --border-hairline:rgba(232,228,220,.10); --border-strong:rgba(232,228,220,.20);
  --border-gold:rgba(199,154,60,.45);
  --surface-field:rgba(255,255,255,.03);
  --accent-soft:rgba(199,154,60,.12);
  --focus-ring:0 0 0 2px var(--ink-900),0 0 0 4px var(--gold-500);
  --link:var(--gold-400); --link-hover:var(--gold-200);

  --dur-fast:120ms; --dur-base:220ms; --dur-slow:420ms;
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out-soft:cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:300; letter-spacing:var(--ls-body); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; line-height:var(--lh-heading);
  letter-spacing:var(--ls-display); margin:0; }
p { margin:0; text-wrap:pretty; }
img { max-width:100%; height:auto; }
a { color:var(--link); text-decoration:none; transition:color var(--dur-fast) var(--ease-standard); }
a:hover { color:var(--link-hover); }
::selection { background:var(--gold-700); color:var(--paper-100); }
:focus-visible { outline:none; box-shadow:var(--focus-ring); }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--ink-1000); }
::-webkit-scrollbar-thumb { background:var(--gold-800); }

.l4-skip {
  position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold-500);
  color:var(--ink-900); padding:var(--space-3) var(--space-5); font-weight:500;
  letter-spacing:var(--ls-label); text-transform:uppercase; font-size:var(--fs-micro);
}
.l4-skip:focus { left:0; }

.l4-wrap { max-width:var(--container-max); margin:0 auto; padding-left:var(--space-6); padding-right:var(--space-6); }
.l4-narrow { max-width:var(--container-narrow); margin:0 auto; }
.l4-section { padding:var(--section-y) 0; }
.l4-section--tight { padding:var(--space-8) 0; }
.l4-bg-800 { background:var(--ink-800); }
.l4-bg-900 { background:var(--ink-900); }
.l4-bg-1000 { background:var(--ink-1000); }
.l4-hairline-top { border-top:1px solid var(--border-hairline); }
.l4-hairline-bottom { border-bottom:1px solid var(--border-hairline); }

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.l4-eyebrow {
  display:block; font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--gold-400);
}
.l4-mono {
  font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--gold-700); letter-spacing:.06em;
}
.l4-label {
  font-family:var(--font-sans); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:var(--ls-label); text-transform:uppercase;
}
.l4-lead { font-size:var(--fs-body-lg); color:var(--text-secondary); }
.l4-muted { color:var(--text-muted); }
.l4-d1 { font-size:var(--fs-display-1); line-height:var(--lh-display); }
.l4-d2 { font-size:var(--fs-display-2); line-height:var(--lh-display); }
.l4-d3 { font-size:var(--fs-display-3); line-height:var(--lh-heading); }
.l4-h1 { font-size:var(--fs-h1); }
.l4-h2 { font-size:var(--fs-h2); }
.l4-gold { color:var(--gold-400); }
.l4-stack { display:flex; flex-direction:column; }
.l4-gap-2 { gap:var(--space-2); } .l4-gap-3 { gap:var(--space-3); }
.l4-gap-4 { gap:var(--space-4); } .l4-gap-5 { gap:var(--space-5); }
.l4-gap-6 { gap:var(--space-6); } .l4-gap-8 { gap:var(--space-8); }

/* Rule — hairline fading at both ends with a rotated square at centre */
.l4-rule { position:relative; height:1px; background:var(--gold-hairline); margin:var(--space-5) 0; }
.l4-rule::after {
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid var(--gold-500); background:var(--ink-900);
}
.l4-rule--filled::after { background:var(--gold-500); }
.l4-rule--short { max-width:320px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.l4-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-sans); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:var(--ls-label); text-transform:uppercase; text-align:center;
  padding:12px var(--space-6); border-radius:var(--radius-1); cursor:pointer;
  background:var(--gold-500); color:var(--ink-900); border:1px solid var(--gold-500);
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.l4-btn:hover { background:var(--gold-400); border-color:var(--gold-400); color:var(--ink-900); }
.l4-btn:active { transform:translateY(1px); }
.l4-btn--outline { background:transparent; color:var(--gold-300); border-color:var(--border-gold); }
.l4-btn--outline:hover { background:var(--accent-soft); border-color:var(--gold-500); color:var(--gold-200); }
.l4-btn--ghost { background:transparent; color:var(--gold-300); border-color:transparent; padding-left:var(--space-2); padding-right:var(--space-2); }
.l4-btn--ghost:hover { background:transparent; color:var(--gold-200); border-color:transparent; }
.l4-btn--lg { padding:15px var(--space-7); font-size:var(--fs-caption); }
.l4-btn--sm { padding:8px var(--space-4); }
.l4-btn--full { width:100%; }
.l4-btn-row { display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ==========================================================================
   Header
   ========================================================================== */
.l4-header {
  position:sticky; top:0; z-index:40; background:rgba(6,7,7,.92);
  backdrop-filter:var(--blur-panel); -webkit-backdrop-filter:var(--blur-panel);
  border-bottom:1px solid var(--border-hairline);
}
.l4-header__inner {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  padding-top:14px; padding-bottom:14px;
}
.l4-header__logo { display:flex; align-items:center; flex:0 0 auto; }
.l4-header__logo img { height:48px; width:auto; display:block; }
.l4-nav { display:flex; gap:var(--space-5); align-items:center; flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.l4-nav a {
  font-family:var(--font-sans); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-secondary);
  padding-bottom:3px; border-bottom:1px solid transparent;
}
.l4-nav a:hover { color:var(--gold-300); }
.l4-nav a.is-active { color:var(--gold-400); border-bottom-color:var(--gold-500); }
.l4-header__cta { flex:0 0 auto; white-space:nowrap; }
.l4-burger { display:none; background:none; border:1px solid var(--border-hairline); border-radius:var(--radius-1);
  color:var(--gold-300); padding:8px 10px; cursor:pointer; }
.l4-burger span { display:block; width:18px; height:1px; background:currentColor; margin:4px 0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.l4-hero { position:relative; overflow:hidden; background:var(--ink-1000); border-bottom:1px solid var(--border-hairline); }
.l4-hero__media { position:absolute; right:0; top:0; height:100%; width:56%; object-fit:cover; }
.l4-hero__media--texture { width:50%; opacity:.5; }
.l4-hero__scrim { position:absolute; inset:0;
  background:linear-gradient(90deg,var(--ink-1000) 34%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.35) 100%); }
.l4-hero__scrim--texture { background:linear-gradient(90deg,var(--ink-1000) 38%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.8) 100%); }
.l4-hero__inner { position:relative; padding-top:var(--space-10); padding-bottom:var(--space-10); }
.l4-hero__inner--page { padding-top:var(--space-9); padding-bottom:var(--space-8); }
.l4-hero__body { max-width:680px; display:flex; flex-direction:column; gap:var(--space-5); }
.l4-hero__disciplines { display:flex; gap:var(--space-6); margin-top:var(--space-6);
  font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--gold-700); letter-spacing:.06em; }

/* ==========================================================================
   Service pictogram strip
   ========================================================================== */
.l4-services { display:flex; border-top:1px solid var(--border-hairline); border-bottom:1px solid var(--border-hairline); }
.l4-services > div {
  flex:1; padding:var(--space-6) var(--space-4); display:flex; flex-direction:column;
  align-items:center; gap:var(--space-3);
}
.l4-services > div + div { border-left:1px solid var(--border-gold); }
.l4-services img { width:64px; height:64px; object-fit:contain; }
.l4-services span { font-size:var(--fs-micro); font-weight:500; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-secondary); }

/* ==========================================================================
   Section heading
   ========================================================================== */
.l4-heading { display:flex; flex-direction:column; gap:var(--space-4); }
.l4-heading--center { align-items:center; text-align:center; }
.l4-heading--center .l4-rule { width:min(320px,100%); }
.l4-heading__standfirst { color:var(--text-secondary); font-size:var(--fs-body-lg); max-width:640px; }

/* ==========================================================================
   Cards
   ========================================================================== */
.l4-card {
  position:relative; background:var(--ink-800); border:1px solid var(--border-hairline);
  border-radius:var(--radius-2); box-shadow:var(--shadow-2); padding:var(--space-6); overflow:hidden;
}
.l4-card--gold { border-color:var(--border-gold); }
.l4-card--pad7 { padding:var(--space-7); }
.l4-card--flush { padding:0; }
.l4-card--interactive { transition:transform var(--dur-base) var(--ease-standard),
  box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.l4-card--interactive:hover { transform:translateY(-2px); box-shadow:var(--shadow-3); border-color:var(--border-gold); }
.l4-card__watermark { position:absolute; right:0; bottom:0; height:100%; width:auto; opacity:.16; pointer-events:none; }
.l4-card__body { position:relative; display:flex; flex-direction:column; gap:var(--space-4); }
.l4-card__body h3 {
  font-family:var(--font-sans); font-size:var(--fs-h3); letter-spacing:var(--ls-heading);
  text-transform:uppercase; font-weight:500; margin:0;
}
.l4-card__body img.l4-card__icon { width:56px; height:56px; object-fit:contain; }

.l4-grid { display:grid; gap:var(--space-5); }
/* Fixed column counts, so filtering down to one card keeps the card the
   same width instead of stretching it across the row. */
.l4-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.l4-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1024px) { .l4-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px)  { .l4-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px)  { .l4-grid--4, .l4-grid--3 { grid-template-columns:minmax(0,1fr); } }
.l4-grid--2 { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:var(--space-9); }
.l4-grid--2 > * { min-width:0; }

/* List of hairline-separated lines inside a card */
.l4-linelist { display:flex; flex-direction:column; gap:var(--space-4); }
.l4-linelist span { font-size:var(--fs-body); color:var(--text-secondary);
  border-bottom:1px solid var(--border-hairline); padding-bottom:var(--space-4); }
.l4-linelist span:last-child { border-bottom:0; padding-bottom:0; }

/* ==========================================================================
   Badge / Tag
   ========================================================================== */
.l4-badge {
  display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:var(--fs-micro);
  font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase;
  padding:5px 10px; border-radius:var(--radius-1); border:1px solid;
  background:rgba(6,7,7,.72); backdrop-filter:blur(4px);
}
.l4-badge--gold { color:var(--gold-300); border-color:var(--border-gold); }
.l4-badge--success { color:#8FBE93; border-color:rgba(95,143,99,.5); }
.l4-badge--neutral { color:var(--paper-300); border-color:var(--border-strong); }

.l4-tag {
  display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:var(--fs-micro);
  font-weight:500; letter-spacing:var(--ls-label); text-transform:uppercase;
  padding:7px var(--space-4); border-radius:var(--radius-1);
  border:1px solid var(--border-strong); background:transparent; color:var(--text-secondary);
  cursor:pointer; transition:all var(--dur-fast) var(--ease-standard);
}
.l4-tag:hover { border-color:var(--border-gold); color:var(--gold-300); }
.l4-tag.is-selected { background:var(--gold-500); border-color:var(--gold-500); color:var(--ink-900); }

/* ==========================================================================
   Property card
   ========================================================================== */
.l4-pcard {
  display:block; background:var(--ink-800); border:1px solid var(--border-hairline);
  border-radius:var(--radius-2); box-shadow:var(--shadow-2); overflow:hidden; color:inherit;
  transition:transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.l4-pcard:hover { transform:translateY(-2px); box-shadow:var(--shadow-3); border-color:var(--border-gold); color:inherit; }
.l4-pcard__media { display:block; position:relative; aspect-ratio:4 / 3; background:var(--ink-700); overflow:hidden; }
.l4-pcard__media img { width:100%; height:100%; object-fit:cover; display:block; }
.l4-pcard__media::after { content:""; position:absolute; inset:0; background:var(--protect-bottom); }
.l4-pcard__badge { display:block; position:absolute; top:var(--space-4); left:var(--space-4); z-index:2; }
.l4-pcard__body { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.l4-pcard__title { display:block; font-family:var(--font-display); font-size:var(--fs-h3); color:var(--paper-100); margin:0; }
.l4-pcard__loc { display:block; font-size:var(--fs-micro); font-weight:500; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-muted); }
.l4-pcard__specs { display:flex; gap:var(--space-5); border-top:1px solid var(--border-hairline); padding-top:var(--space-4); }
.l4-pcard__specs > span { display:flex; flex-direction:column; gap:2px; }
.l4-pcard__specs b { display:block; font-family:var(--font-mono); font-size:var(--fs-body-sm); font-weight:400; color:var(--paper-100); }
.l4-pcard__specs small { display:block; font-size:9px; font-weight:500; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-muted); }
.l4-pcard__price { display:block; font-family:var(--font-mono); font-size:var(--fs-body-sm); color:var(--gold-300); }

/* ==========================================================================
   People — the two directors on the About page
   ========================================================================== */
.l4-people { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
.l4-person { display:flex; flex-direction:column; }
.l4-person__photo { width:100%; aspect-ratio:3 / 4; object-fit:cover; object-position:center 30%;
  display:block; filter:saturate(.92) contrast(1.02); }
.l4-person__body { padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); }
.l4-person__name { font-family:var(--font-display); font-size:var(--fs-h2); font-weight:400;
  color:var(--paper-100); margin:0; }
@media (max-width:760px) { .l4-people { grid-template-columns:minmax(0,1fr); } }

/* ==========================================================================
   Stat block
   ========================================================================== */
.l4-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--space-6); }
.l4-stat { display:flex; flex-direction:column; gap:var(--space-1); }
.l4-stat b { font-family:var(--font-display); font-size:var(--fs-display-3); font-weight:400;
  color:var(--gold-300); line-height:1; }
.l4-stat span { font-size:var(--fs-micro); font-weight:500; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-secondary); }
.l4-stat small { font-size:var(--fs-caption); color:var(--text-muted); }

/* ==========================================================================
   Contact row
   ========================================================================== */
.l4-contact { display:flex; align-items:center; gap:var(--space-4); color:inherit; }
.l4-contact:hover { color:inherit; }
.l4-contact img { width:38px; height:38px; object-fit:contain; flex:0 0 auto; }
.l4-contact__text { display:flex; flex-direction:column; min-width:0; }
.l4-contact__name { font-size:var(--fs-micro); font-weight:600; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--gold-300); }
.l4-contact__detail { font-size:var(--fs-body-sm); color:var(--text-secondary); word-break:break-word; }
.l4-contact:hover .l4-contact__detail { color:var(--paper-100); }

/* ==========================================================================
   Scheme detail
   ========================================================================== */
.l4-detail-hero {
  position:relative; min-height:460px; display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-6); padding:var(--space-6); overflow:hidden; border:1px solid var(--border-gold);
  border-radius:var(--radius-2); box-shadow:var(--shadow-2); background:var(--ink-800);
}
.l4-detail-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.l4-detail-hero::after { content:""; position:absolute; inset:0; background:var(--protect-bottom); }
.l4-detail-hero > span { position:relative; z-index:2; font-family:var(--font-mono); letter-spacing:.08em; }
.l4-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); }
.l4-gallery img { width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block;
  border:1px solid var(--border-hairline); border-radius:var(--radius-2); }

.l4-spec { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-4) var(--space-6); }
.l4-spec span { display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--fs-body); color:var(--text-secondary); }
.l4-tick { display:inline-block; width:8px; height:4px; margin-top:9px; flex:0 0 auto;
  border-left:1px solid var(--gold-500); border-bottom:1px solid var(--gold-500); transform:rotate(-45deg); }

.l4-schedule { display:flex; flex-direction:column; }
.l4-schedule > div { display:flex; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) 0; border-bottom:1px solid var(--border-hairline); }
.l4-schedule > div:last-child { border-bottom:0; }
.l4-schedule dt, .l4-schedule .k { font-size:var(--fs-micro); font-weight:500;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-muted); }
.l4-schedule .v { font-family:var(--font-mono); font-size:var(--fs-body-sm); color:var(--paper-100); text-align:right; }
.l4-schedule .v--gold { color:var(--gold-300); }

/* ==========================================================================
   Process
   ========================================================================== */
.l4-stage {
  display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,1.2fr);
  gap:var(--space-6) var(--space-8); align-items:start;
  padding-bottom:var(--space-8); border-bottom:1px solid var(--border-hairline);
}
.l4-stage__num { font-family:var(--font-mono); font-size:var(--fs-display-3); color:var(--gold-800); line-height:1; }
.l4-stage h2 { font-size:var(--fs-h1); color:var(--paper-100); }
.l4-stage__dur { font-size:var(--fs-micro); font-weight:500; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--gold-400); }

.l4-tabs { display:flex; gap:var(--space-5); flex-wrap:wrap; border-bottom:1px solid var(--border-hairline); }
.l4-tabs button {
  background:none; border:0; border-bottom:2px solid transparent; padding:0 0 var(--space-3);
  font-family:var(--font-sans); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-muted); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard);
}
.l4-tabs button:hover { color:var(--gold-300); }
.l4-tabs button.is-active { color:var(--gold-400); border-bottom-color:var(--gold-500); }
.l4-tabbody { min-height:120px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.l4-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-5); }
.l4-form .l4-field--wide { grid-column:1 / -1; min-width:0; }
.l4-field { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.l4-field > label { font-size:var(--fs-micro); font-weight:500; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-secondary); }
.l4-field input, .l4-field textarea, .l4-field select {
  width:100%; font-family:var(--font-sans); font-size:var(--fs-body-sm); font-weight:300;
  color:var(--paper-100); background:var(--surface-field);
  border:1px solid var(--border-strong); border-radius:var(--radius-1);
  padding:12px var(--space-4); transition:border-color var(--dur-fast) var(--ease-standard);
}
.l4-field textarea { min-height:120px; resize:vertical; }
.l4-field select { appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-500) 50%),
    linear-gradient(135deg,var(--gold-500) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:var(--space-8); }
.l4-field input:focus, .l4-field textarea:focus, .l4-field select:focus {
  outline:none; border-color:var(--gold-500); box-shadow:var(--focus-ring); }
.l4-field input::placeholder, .l4-field textarea::placeholder { color:var(--paper-500); }
.l4-field__hint { font-size:var(--fs-caption); color:var(--text-muted); }
.l4-field__error { font-size:var(--fs-caption); letter-spacing:.06em; color:var(--danger-500); }
.l4-field--invalid input, .l4-field--invalid textarea { border-color:var(--danger-500); }

.l4-check { display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--fs-body-sm);
  color:var(--text-secondary); cursor:pointer; }
.l4-check input { appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:0 0 auto;
  margin-top:3px; border:1px solid var(--border-strong); border-radius:var(--radius-1);
  background:var(--surface-field); cursor:pointer; position:relative; }
.l4-check input:checked { background:var(--gold-500); border-color:var(--gold-500); }
.l4-check input:checked::after { content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border-right:2px solid var(--ink-900); border-bottom:2px solid var(--ink-900); transform:rotate(45deg); }
.l4-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.l4-notice { border:1px solid var(--border-gold); border-radius:var(--radius-2);
  background:var(--accent-soft); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); }
.l4-notice--error { border-color:rgba(166,72,60,.5); background:rgba(166,72,60,.10); }
.l4-notice b { font-size:var(--fs-micro); font-weight:600; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--gold-300); }
.l4-notice--error b { color:#D08B80; }
.l4-notice p { font-size:var(--fs-body-sm); color:var(--text-secondary); }

/* ==========================================================================
   Dialog
   ========================================================================== */
.l4-dialog[hidden] { display:none; }
.l4-dialog { position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; padding:var(--space-5); }
.l4-dialog__scrim { position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); }
.l4-dialog__panel { position:relative; width:min(560px,100%); max-height:88vh; overflow:auto;
  background:var(--ink-800); border:1px solid var(--border-gold); border-radius:var(--radius-2);
  box-shadow:var(--shadow-3); padding:var(--space-6); }
.l4-dialog__head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-5); margin-bottom:var(--space-5); }
.l4-dialog__close { background:none; border:1px solid var(--border-hairline); color:var(--text-muted);
  font-family:var(--font-mono); font-size:var(--fs-caption); padding:3px 9px;
  border-radius:var(--radius-1); cursor:pointer; }
.l4-dialog__close:hover { border-color:var(--border-gold); color:var(--gold-400); }
.l4-dialog__figs { display:flex; gap:var(--space-6); padding:var(--space-5) 0;
  border-top:1px solid var(--border-hairline); border-bottom:1px solid var(--border-hairline);
  margin-bottom:var(--space-5); }
.l4-dialog__figs div { display:flex; flex-direction:column; gap:var(--space-1); }
.l4-dialog__figs b { font-family:var(--font-mono); font-size:var(--fs-h3); font-weight:400; color:var(--paper-100); }
.l4-dialog__figs span { font-size:var(--fs-micro); font-weight:500; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.l4-footer { border-top:1px solid var(--border-hairline); background:var(--ink-1000); }
.l4-footer__inner { padding-top:var(--space-8); padding-bottom:var(--space-6); }
.l4-footer__cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-8); align-items:start; }
.l4-footer__cols > div { display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.l4-footer__logo img { height:120px; width:auto; }
.l4-footer a { font-size:var(--fs-body-sm); color:var(--text-secondary); }
.l4-footer a:hover { color:var(--gold-300); }
.l4-footer__legal { display:flex; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; }
.l4-footer__legal span { font-size:var(--fs-caption); color:var(--text-muted); letter-spacing:.06em; }
.l4-footer__addr { font-size:var(--fs-caption); color:var(--text-muted); line-height:1.6; }

/* ==========================================================================
   Journal (WordPress posts)
   ========================================================================== */
.l4-post-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-6); }
.l4-post-card { display:flex; flex-direction:column; gap:var(--space-3); }
.l4-post-card h2 { font-size:var(--fs-h2); }
.l4-post-card h2 a { color:var(--paper-100); }
.l4-post-card h2 a:hover { color:var(--gold-300); }
.l4-post-meta { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--gold-700); letter-spacing:.06em; }
.l4-post-card__thumb img { width:100%; aspect-ratio:16 / 9; object-fit:cover;
  border:1px solid var(--border-hairline); border-radius:var(--radius-2); display:block; }

.l4-prose { max-width:760px; color:var(--text-secondary); }
.l4-prose > * + * { margin-top:var(--space-5); }
.l4-prose h2 { font-size:var(--fs-h1); color:var(--paper-100); margin-top:var(--space-8); }
.l4-prose h3 { font-size:var(--fs-h2); color:var(--paper-100); margin-top:var(--space-7); }
.l4-prose h4 { font-size:var(--fs-h3); color:var(--paper-100); }
.l4-prose ul, .l4-prose ol { padding-left:var(--space-5); }
.l4-prose li + li { margin-top:var(--space-2); }
.l4-prose img { border-radius:var(--radius-2); border:1px solid var(--border-hairline); }
.l4-prose blockquote { border-left:2px solid var(--gold-600); padding-left:var(--space-5);
  color:var(--paper-200); font-style:normal; margin-left:0; }
.l4-prose a { border-bottom:1px solid var(--border-gold); }
.l4-prose code { font-family:var(--font-mono); font-size:.92em; background:var(--ink-700);
  padding:2px 6px; border-radius:var(--radius-1); }
.l4-prose table { width:100%; border-collapse:collapse; }
.l4-prose th, .l4-prose td { border-bottom:1px solid var(--border-hairline);
  padding:var(--space-3); text-align:left; }
.l4-pagination { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.l4-pagination .page-numbers { font-family:var(--font-mono); font-size:var(--fs-body-sm);
  color:var(--text-secondary); padding:6px 12px; border:1px solid var(--border-hairline);
  border-radius:var(--radius-1); }
.l4-pagination .page-numbers.current { color:var(--ink-900); background:var(--gold-500); border-color:var(--gold-500); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
[data-reveal] { opacity:0; transform:translateY(12px);
  transition:opacity 800ms var(--ease-out-soft), transform 800ms var(--ease-out-soft); }
[data-reveal].is-in { opacity:1; transform:none; }
.no-js [data-reveal] { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  [data-reveal] { opacity:1; transform:none; transition:none; }
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px) {
  :root { --fs-display-1:56px; --fs-display-2:44px; --fs-display-3:34px; --fs-h1:28px; --section-y:72px; }
  .l4-hero__media { width:100%; opacity:.35; }
  .l4-hero__scrim { background:linear-gradient(90deg,var(--ink-1000) 8%,rgba(0,0,0,.72) 60%,rgba(0,0,0,.55) 100%); }
  .l4-grid--2 { gap:var(--space-7); }
}
@media (max-width:820px) {
  .l4-header__inner { flex-wrap:wrap; row-gap:var(--space-4); }
  .l4-header__logo img { height:38px; }
  .l4-burger { display:block; order:3; }
  .l4-header__cta { order:2; }
  .l4-nav { order:4; flex-basis:100%; justify-content:flex-start; gap:var(--space-4);
    display:none; padding-bottom:var(--space-3); }
  .l4-nav.is-open { display:flex; }
  .l4-stage { grid-template-columns:1fr; gap:var(--space-4); }
  .l4-stage__num { font-size:var(--fs-h1); }
  .l4-services { flex-wrap:wrap; }
  .l4-services > div { flex:1 1 50%; }
  .l4-services > div:nth-child(3) { border-left:0; }
  .l4-services > div:nth-child(n+3) { border-top:1px solid var(--border-gold); }
}
@media (max-width:600px) {
  :root { --fs-display-1:40px; --fs-display-2:34px; --fs-display-3:28px; --fs-h1:24px;
          --fs-body-lg:16px; --section-y:56px; --space-6:20px; }
  .l4-wrap { padding-left:var(--space-5); padding-right:var(--space-5); }
  .l4-header__logo img { height:32px; }
  .l4-header__inner { padding-top:10px; padding-bottom:10px; }
  .l4-hero__disciplines { gap:var(--space-4); flex-wrap:wrap; }
  .l4-detail-hero { min-height:280px; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
  .l4-btn-row .l4-btn { flex:1 1 100%; }
  .l4-footer__logo img { height:90px; }
  .l4-pcard__specs { gap:var(--space-4); }
  .l4-dialog__figs { gap:var(--space-4); }
}
@media print {
  .l4-header, .l4-footer, .l4-btn, .l4-dialog { display:none !important; }
  body { background:#fff; color:#000; }
}