/* The LABC public shell: brand tokens, skip link, header and footer.
   One stylesheet for every public surface (new site, HotelEx, Blog, HR
   diagnostic). The shell rules are scoped to .site-header / .site-footer and
   set their own base typography, so a page's own stylesheet (Bootstrap and
   legacy CSS included) neither styles the shell nor is styled by it. */
:root {
  /* LABC brand tokens (CLAUDE.md). Gold is never text on a light background;
     --gold-text is only for small labels on light backgrounds. The interface
     gold is a slightly richer, more luminous take on the brand gold
     (#C9A432 -> #D4AE2F; --gold-text #7A6010 -> #7E620B, still AA). */
  --gold:#D4AE2F; --dark:#1A1A1A; --cream:#FDF6E3; --gold-text:#7E620B;
  --white:#FFFFFF; --ink:var(--dark); --muted:#55524A;
  /* Surfaces (LABC Company Profile 2026): white reading surfaces, a cool soft
     neutral for heroes and light bands, and the profile's dark navy as the
     strong contrast surface. Near-black stays the ink, not a surface. */
  --navy:#161C2A;
  --surface-navy:var(--navy); --surface-light:var(--white); --surface-soft:#F5F6F7;
  --on-navy:#FFFFFF; --on-navy-muted:rgba(255,255,255,.76); --on-navy-line:rgba(255,255,255,.18);
  --navy-raised:#1F2637; --on-navy-rule:rgba(255,255,255,.42);
  --line:#E3E5E8; --line-strong:#C9CDD3;
  --on-dark:var(--on-navy); --on-dark-muted:var(--on-navy-muted); --on-dark-line:var(--on-navy-line);
  --shadow-soft:0 10px 30px rgba(22,28,42,.08);
  --backdrop:rgba(22,28,42,.6);
  --heading:"Manrope",sans-serif; --body:"Manrope",sans-serif;
  /* One compact editorial rhythm for the homepage and the inner pages:
     standard sections, tight editorial sections and heroes. */
  --container:1180px;
  --gutter:clamp(16px,5vw,64px);
  --inline:max(var(--gutter), calc((100% - var(--container)) / 2));
  --section-y:clamp(36px,4.4vw,64px);
  --section-y-tight:clamp(36px,3.4vw,48px);
  --section-y-hero:clamp(40px,5vw,72px);
  --gap:clamp(24px,3vw,48px);
  --header-h:80px;
  --tracking-tight:-.02em;
  --eyebrow-tracking:.1em;
}
/* Greek headings and labels keep near-zero tracking. */
html[lang="el"] { --tracking-tight:0; --eyebrow-tracking:.05em; }

/* Shell base: the same typography and resets on every page. */
.skip-link, .site-header, .site-footer {
  box-sizing:border-box; color:var(--ink);
  font:17px/1.65 var(--body); letter-spacing:normal; text-align:left; text-transform:none;
}
.site-header *, .site-footer * { box-sizing:border-box; }
.site-header a, .site-footer a { color:inherit; }
.site-header button { margin:0; padding:0; border:0; border-radius:0; font:inherit; cursor:pointer; }
.site-header :is(a, button):focus-visible, .site-footer a:focus-visible, .skip-link:focus-visible {
  outline:3px solid var(--gold-text); outline-offset:3px;
}

.skip-link {
  position:fixed; z-index:60; top:10px; left:14px; padding:10px 14px;
  transform:translateY(-150%); background:var(--gold); color:var(--dark);
  font-weight:700; text-decoration:none;
  transition:transform .18s ease;
}
.skip-link:focus { transform:translateY(0); box-shadow:var(--shadow-soft); }

/* Header: quiet, advisory; one primary action. */
.site-header {
  position:sticky; z-index:15; top:0; display:flex; align-items:center;
  justify-content:space-between; gap:24px; height:var(--header-h);
  width:100%; max-width:100%; min-width:0; margin:0;
  padding:0 var(--inline); border-bottom:1px solid var(--line);
  background:var(--white);
}
.site-header .brand, .site-header .header-actions, .site-header .mobile-nav { min-width:0; }
.site-header .header-actions { flex-shrink:1; }
.site-header .brand { text-decoration:none; }
.site-header .brand picture, .site-header .brand img { display:block; }
.site-header .brand img { width:156px; height:auto; }
.site-header .desktop-nav {
  display:flex; align-items:center; gap:28px; font-size:15px; font-weight:500;
}
.site-header .desktop-nav > a, .site-header .nav-menu > button {
  display:flex; align-items:center; height:var(--header-h); padding:0;
  border:0; background:transparent; color:var(--dark);
  text-decoration:none; white-space:nowrap;
}
.site-header .desktop-nav > a:hover, .site-header .nav-menu > button:hover { color:var(--gold-text); }
.site-header .nav-menu { position:relative; }
/* The "+" marker becomes a small chevron. */
.site-header .nav-menu > button span {
  display:inline-block; width:7px; height:7px; margin:-3px 0 0 8px; overflow:hidden;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  color:var(--muted); font-size:0; transform:rotate(45deg); transition:transform .15s ease;
}
.site-header .nav-menu > button[aria-expanded="true"] span { margin-top:3px; transform:rotate(-135deg); }
.site-header .menu-pop {
  position:absolute; top:100%; left:-16px; display:none; width:300px;
  padding:10px; border:1px solid var(--line); border-top:2px solid var(--gold);
  background:var(--white); box-shadow:var(--shadow-soft);
}
.site-header .nav-menu > button[aria-expanded="true"] + .menu-pop { display:grid; }
.site-header .menu-pop a, .site-header .mobile-nav a {
  padding:9px 10px; font-size:15px; text-decoration:none;
}
.site-header .menu-pop a:hover, .site-header .menu-pop a:focus-visible { background:var(--surface-soft); }
.site-header .header-actions { display:flex; align-items:center; gap:18px; }
.site-header .book {
  padding:11px 18px; border:1px solid var(--gold); background:var(--gold); color:var(--dark);
  font-weight:700; text-decoration:none;
}
.site-header .book:hover { border-color:var(--dark); }
.site-header .languages { display:flex; gap:2px; padding-left:16px; border-left:1px solid var(--line); }
.site-header .languages button {
  /* 44px targets: the language switch is the same control on every page. */
  position:relative; min-width:44px; min-height:44px;
  padding:4px 6px; border:0; background:none; color:var(--muted);
  font-size:14px; font-weight:700; letter-spacing:.04em;
}
/* The current language is marked by a small gold square under the label
   (no underline stroke, which can read as a cursor). */
.site-header .languages button[aria-current="true"] { color:var(--dark); }
.site-header .languages button[aria-current="true"]::after {
  content:""; position:absolute; left:50%; bottom:6px; width:6px; height:6px;
  margin-left:-3px; background:var(--gold);
}
.site-header .mobile-toggle, .site-header .mobile-nav { display:none; }

/* Footer */
.site-footer {
  padding:28px clamp(24px,5vw,82px) 16px;
  background:var(--surface-navy); color:var(--on-dark);
  container:footer / inline-size;
  font-size:14px;
}
.site-footer .footer-top {
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px;
}
.site-footer .footer-brand { min-width:0; }
.site-footer .footer-brand img { display:block; width:190px; max-width:100%; }
.site-footer .footer-contact { margin-top:18px; }
.site-footer .footer-top b {
  display:block; margin-bottom:10px; color:var(--gold);
  font-size:14px; letter-spacing:.08em;
}
.site-footer .footer-top a, .site-footer .footer-top address {
  display:block; margin:3px 0; color:var(--on-dark); font-size:14px; line-height:1.4;
  font-style:normal; text-decoration:none;
  overflow-wrap:anywhere;
}
.site-footer .footer-contact address { line-height:1.45; }
.site-footer .footer-legal {
  display:flex; flex-wrap:wrap; gap:3px 16px; margin-top:14px;
  width:max-content; max-width:100%;
}
.site-footer .footer-legal a {
  margin:0; min-height:24px; color:var(--on-dark); font-size:14px;
  line-height:1.4; text-decoration:none;
}
.site-footer .footer-top a { min-height:24px; }
.site-footer .footer-nav {
  display:grid; grid-template-columns:2fr .95fr 1.2fr 1fr; gap:20px 18px;
  min-width:0;
}
.site-footer .footer-group { min-width:0; }
.site-footer .footer-services > b { text-align:center; }
.site-footer .service-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
@container footer (max-width:850px) {
  .site-footer .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer .footer-services { grid-column:auto; }
}
.site-footer .copyright {
  margin-top:20px; padding-top:12px;
  border-top:1px solid var(--on-dark-line);
  color:var(--on-dark); font-size:14px;
}

@media (max-width:1199px) {
  .site-header .desktop-nav { display:none; }
  .site-header .mobile-toggle {
    display:block; padding:8px 0; border:0; background:none; color:var(--dark); font-weight:700;
  }
  .site-header .mobile-nav {
    position:absolute; z-index:3; top:var(--header-h); right:0; left:0;
    max-height:calc(100vh - var(--header-h)); padding:20px var(--inline);
    overflow-y:auto; grid-template-columns:repeat(2,1fr);
    background:var(--white); border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft);
  }
  .site-header .mobile-nav:not([hidden]) { display:grid; }
  .site-header .mobile-nav b {
    grid-column:1/-1; margin-top:14px; color:var(--gold-text);
    font-size:14px; letter-spacing:var(--eyebrow-tracking);
  }
  .site-header .mobile-nav button {
    grid-column:1/-1; margin-top:14px; padding:12px; border:0;
    background:var(--gold); color:var(--dark); font-weight:700;
  }
  .site-header .mobile-nav [data-booking] { display:none; }
  .site-header .mobile-nav a { font-weight:500; }
  .site-header .mobile-nav, .site-header .mobile-nav a, .site-header .mobile-nav button {
    min-width:0; max-width:100%; overflow-wrap:anywhere;
  }
  html.mobile-menu-open { overflow:hidden; }
}
@media (max-width:1023px) {
  .site-footer .footer-top { grid-template-columns:minmax(185px,.72fr) minmax(0,1.6fr); gap:26px; }
  .site-footer .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 28px; }
  .site-footer .footer-services { grid-column:auto; }
}
/* Side-by-side footer: two grid rows shared through a subgrid. The logo
   takes the first row, and the Contact heading and the navigation headings
   start together on the second, whatever the rendered logo height. */
@media (min-width:768px) {
  .site-footer .footer-top { grid-template-rows:auto auto; row-gap:18px; }
  .site-footer .footer-brand { grid-column:1; grid-row:1 / span 2; display:grid; grid-template-rows:subgrid; }
  .site-footer .footer-contact { margin-top:0; }
  .site-footer .footer-nav { grid-column:2; grid-row:2; }
}
@media (max-width:767px) {
  :root { --header-h:68px; }
  .site-header { gap:12px; }
  .site-header .brand img { width:90px; max-height:56px; }
  .site-header .header-actions { gap:12px; }
  .site-header .header-actions .book { display:none; }
  .site-header .languages { padding-left:4px; border-left:0; }
  .site-header .mobile-nav { grid-template-columns:1fr; }
  .site-header .mobile-nav [data-booking] { display:block; }
  .site-footer { padding:34px 24px 17px; }
  .site-footer .footer-top { display:block; }
  .site-footer .footer-brand { max-width:360px; }
  .site-footer .footer-contact { margin-top:18px; }
  .site-footer .footer-nav { margin-top:30px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:27px 20px; }
  .site-footer .footer-services { grid-column:span 2; }
  .site-footer .footer-services > b { text-align:left; }
  .site-footer .footer-legal { margin-top:24px; }
  .site-footer .copyright { margin-top:27px; }
}
@media (max-width:420px) {
  .site-header { gap:8px; }
  .site-header .brand img { width:76px; }
  .site-header .header-actions { gap:7px; }
  .site-footer .footer-nav { gap:25px 16px; }
  .site-footer .service-links { gap:0 16px; }
}
@media (max-width:340px) {
  .site-footer { padding-right:18px; padding-left:18px; }
  .site-footer .footer-nav { grid-template-columns:1fr; }
  .site-footer .footer-services { grid-column:auto; }
  .site-footer .service-links { grid-template-columns:1fr; }
}

/* Contextual editorial diagrams (LABCShell.diagram): inline SVG on a navy
   panel with a gold rule, one per page where a diagram explains the section
   (organisation map, process flow, finance, roles, AI operating model,
   capability roadmap, cycles). Structure only, no numbers or claims;
   aria-hidden, because the labels restate the neighbouring text. */
/* The figure and the SVG never impose an intrinsic width: they scale down
   inside any container (no 300px floor from the SVG default size). */
.lv-diagram {
  box-sizing:border-box; width:100%; max-width:380px; min-width:0; margin:0; overflow:hidden;
  padding:clamp(12px,1.4vw,18px); border-bottom:3px solid var(--gold); background:var(--surface-navy);
}
.lv-diagram svg { display:block; width:100%; max-width:100%; min-width:0; height:auto; overflow:hidden; }
.lv-diagram .lvd-line { fill:none; stroke:var(--on-navy-rule); stroke-width:1.25; }
/* Secondary relations are dotted (round dots), never dashed: a short dash
   can read as a cursor or typing mark. */
.lv-diagram .lvd-dash { stroke-width:1.75; stroke-dasharray:.1 5; stroke-linecap:round; }
.lv-diagram .lvd-weak { stroke:var(--gold); stroke-width:2; stroke-dasharray:.1 5; stroke-linecap:round; }
.lv-diagram .lvd-ring { stroke-width:1.5; }
.lv-diagram .lvd-head { fill:var(--on-navy-rule); }
.lv-diagram .lvd-gold, .lv-diagram .lvd-gold-head { fill:var(--gold); }
.lv-diagram .lvd-box { fill:var(--navy-raised); stroke:var(--on-navy-rule); stroke-width:1; }
.lv-diagram .lvd-key { stroke:var(--gold); stroke-width:1.5; }
.lv-diagram .lvd-fill { fill:var(--gold); stroke:var(--gold); }
.lv-diagram .lvd-frame { fill:none; stroke:var(--gold); stroke-width:1.75; stroke-dasharray:.1 6; stroke-linecap:round; }
.lv-diagram .lvd-dash-box { stroke-width:1.5; stroke-dasharray:.1 3; stroke-linecap:round; }
.lv-diagram .lvd-mark { fill:none; stroke:var(--on-navy); stroke-width:1.25; }
.lv-diagram .lvd-tick { fill:none; stroke:var(--navy); stroke-width:2.5; }
.lv-diagram .lvd-text, .lv-diagram .lvd-text tspan {
  fill:var(--on-navy); font:600 13.5px/1 var(--body); letter-spacing:0;
  text-anchor:middle; dominant-baseline:central;
}
.lv-diagram .lvd-start, .lv-diagram .lvd-start tspan { text-anchor:start; }
.lv-diagram .lvd-text--strong tspan { font-weight:700; }
.lv-diagram .lvd-text--small tspan { font-size:12.5px; fill:var(--on-navy-muted); }
.lv-diagram .lvd-text--gold tspan { fill:var(--gold); font-weight:700; }
.lv-diagram .lvd-text--on-gold tspan { fill:var(--navy); font-weight:700; }
.lv-diagram .lvd-text--large tspan { font:800 20px/1 var(--heading); }