/* ==========================================================================
   BTENG theme — design tokens + base layer
   Single source of truth for the brand. Raw hex appears ONLY in :root.
   Every component references tokens, never literal colours.
   ========================================================================== */

:root {
  /* --- Surfaces: industrial navy ---------------------------------------
     Dark bands are a NEUTRAL now, not green. Previously --c-primary-deep
     did double duty as both "dark band background" and "green link text";
     those are separate colours in this design, so they are separate tokens. */
  --c-navy:           #1d1f22;  /* header bar, dark section bands            */
  --c-navy-deep:      #0c0d0e;  /* deepest band: footer, CTA band            */
  --c-navy-line:      #313335;  /* hairline on navy                          */

  /* --- Accent green -----------------------------------------------------
     Two greens, split by contrast requirement (measured, not guessed):
       --c-brand          #28a745 on --c-navy = 5.27:1  AA  ✓ (accents ON DARK)
       --c-brand          #28a745 + white text = 3.13:1  FAIL — never fill with it
       --c-primary-strong #1E8236 + white text = 4.88:1  AA  ✓ (buttons)
       --c-primary-strong #1E8236 on --c-page  = 4.66:1  AA  ✓ (green text) */
  --c-brand:          #28a745;  /* accent ON DARK ONLY: numerals, rules, icons */
  --c-primary:        #1E8236;  /* input / secondary borders                 */
  --c-primary-strong: #1E8236;  /* button fill with white text, green text on light */
  --c-primary-deep:   #17662a;  /* hover / pressed green                     */
  --c-primary-darkest:#0c0d0e;  /* footer base bar                           */
  --c-accent-light:   #5ddb7d;  /* icon-on-dark highlights                   */
  --c-tint:           #f1f4f6;  /* alt section background                    */

  /* --- Neutrals --------------------------------------------------------- */
  --c-ink:            #11171d;  /* body text on light                        */
  --c-muted:          #5f6469;  /* secondary text                            */
  --c-page:           #f9fafc;  /* page background                           */
  --c-surface:        #FFFFFF;  /* cards, dropdowns                          */
  --c-border:         #dbdee2;  /* hairlines                                 */
  --c-on-dark:        #e8eaed;  /* text on navy bands                        */
  --c-on-dark-muted:  #a9afb4;  /* secondary text on navy                    */

  /* --- Status accents ---------------------------------------------------- */
  --c-urgent:         #B3261E;  /* urgent badge bg (white text 6.6:1 AA)     */
  --c-notice-err-bg:  #FBE9E8;
  --c-required:       #D9736C;  /* required-field asterisk: reads as red   */
                                /* against the label without the alarm of  */
                                /* --c-urgent, which is for error states.  */
  --c-notice-warn:    #7A4A00;
  --c-notice-warn-bg: #FDF3E3;

  /* --- Overlays / translucent fills -------------------------------------
     Formerly raw rgba() literals scattered through the component files;
     tokenised so a future re-skin cannot leave the old palette behind. */
  --c-scrim:          rgba(12, 13, 14, .55);   /* modal / lightbox / drawer  */
  --c-icon-on-dark:   rgba(40, 167, 69, .16);  /* round icon chip on navy    */
  /* Bottom-heavy wash laid over a full-bleed photograph so overlaid text stays
     legible without hiding the picture. */
  --c-photo-scrim:    linear-gradient(to bottom, rgba(18,20,22,.10) 0%, rgba(18,20,22,.45) 45%, rgba(18,20,22,.90) 100%);
  --c-badge-ring:     rgba(255, 255, 255, .45);
  --c-badge-bg:       rgba(18, 20, 22, .35);

  /* --- Interior banner tints --------------------------------------------
     One pair per area of the site. All stay in the same dark, industrial
     register as the home banner — the tint is what tells the sections apart,
     not brightness. The lightest stop here is still far below the threshold
     where white text stops passing AA (all clear 14:1), so headings, muted
     subtitles and breadcrumbs remain legible on every one. */
  --hero-about-from:    #1e2a38;   /* cool steel — corporate, factual        */
  --hero-about-to:      #0d1117;
  --hero-products-from: #17291f;   /* green-leaning — the brand's own hue    */
  --hero-products-to:   #0c120e;
  --hero-awards-from:   #2b2119;   /* warm bronze — certificates, accolades  */
  --hero-awards-to:     #14100c;
  --hero-media-from:    #1c2029;   /* neutral slate — lets thumbnails lead   */
  --hero-media-to:      #0e1013;
  --hero-contact-from:  #16262c;   /* teal-leaning — approachable, distinct  */
  --hero-contact-to:    #0b1114;
  /* Soft off-centre highlight, so the panel is not a flat wash. */
  --hero-glow:          radial-gradient(120% 90% at 85% 0%, rgba(40, 167, 69, .14) 0%, transparent 60%);
  --c-hairline-light: rgba(255, 255, 255, .25);
  --c-wash-light:     rgba(255, 255, 255, .12);
  --c-edge-light:     rgba(255, 255, 255, .60);

  /* --- Semantic roles (readability-enforced) ---------------------------- */
  --text:             var(--c-ink);
  --text-muted:       var(--c-muted);
  --link:             var(--c-primary-strong);  /* 4.66:1 on --c-page */
  --link-hover:       var(--c-primary-deep);

  /* --- Typography -------------------------------------------------------
     IBM Plex Sans carries no Thai glyphs, so IBM Plex Sans Thai sits beside
     it in every stack — the browser picks per-glyph. base.html.twig only
     requests the Thai faces on Thai pages. */
  --font-heading: 'IBM Plex Sans', 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-base:      16px;
  --lh-base:      1.6;
  --measure:      70ch;

  /* --- Spacing scale ---------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 80px;                 /* section rhythm of the reference design   */

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius-sm: 2px;             /* near-square: the industrial signature    */
  --radius:    2px;
  --radius-lg: 2px;
  --header-h:  68px;

  /* --- Effects ----------------------------------------------------------
     The design is flat: cards get borders, not elevation. Only things that
     genuinely float (dropdown, modal, drawer) keep a shadow. */
  --shadow-sm: none;
  --shadow:    none;
  --shadow-pop: 0 8px 24px rgba(12, 13, 14, .18);
  --transition: 180ms ease;
  --ring: 0 0 0 3px rgba(40, 167, 69, .40);
}

/* ==========================================================================
   Reset (lightweight)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The hidden attribute must always win, even over components that set their
   own display (e.g. .lightbox, .project-card__img--ph). Same idea as x-cloak. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--c-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.1; color: var(--c-ink); }
h1 { font-size: clamp(1.75rem, 4vw, 3.25rem); }   /* 28px mobile → 52px desktop */
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }   /* → 34px desktop */
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 600; line-height: 1.3; }
p  { max-width: var(--measure); }
p + p { margin-top: var(--sp-4); }
strong { font-weight: 600; }

/* ==========================================================================
   Helpers
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.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: var(--sp-4); top: -100px; z-index: 1000;
  background: var(--c-primary-deep); color: #fff; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm); transition: top var(--transition);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }
.text-center { text-align: center; }

/* ==========================================================================
   Sections
   ========================================================================== */
.site-main { min-height: 50vh; }
.section { padding-block: clamp(var(--sp-7), 8vw, var(--sp-9)); }
.section--tint { background: var(--c-tint); }
.section--dark { background: var(--c-navy); color: var(--c-on-dark); }
.section--deep { background: var(--c-navy-deep); color: var(--c-on-dark); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section__head { text-align: center; max-width: 60ch; margin-inline: auto; margin-bottom: var(--sp-6); }
/* `:not(.eyebrow)` matters: the eyebrow is a <p> as well, so without this it
   inherited the intro paragraph's muted grey AND its `margin-inline: auto`,
   which centred a 70ch-capped box inside the head and pushed the kicker ~46px
   away from the heading it belongs to. */
.section__head p:not(.eyebrow) { margin-inline: auto; color: var(--text-muted); }
.section--dark .section__head p:not(.eyebrow) { color: var(--c-on-dark-muted); }
.section__head--left { text-align: left; margin-inline: 0; max-width: 62ch; }

/* ---- Eyebrow / kicker -------------------------------------------------
   One spec for every kicker on the site — section heads, interior page
   banners and the home hero: 13px, 600, 1px tracking, uppercase. Only the
   colour changes, and only with the background it sits on. */
.eyebrow, .hero__eyebrow {
  font-family: var(--font-heading); font-weight: 600; font-size: .8125rem;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1.3;
  margin-inline: 0; max-width: none; margin-bottom: var(--sp-3);
  color: var(--c-primary-strong);
}
.section--dark .eyebrow, .section--deep .eyebrow,
.hero__eyebrow { color: var(--c-brand); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-heading); font-weight: 600; font-size: .9375rem; line-height: 1;
  padding: 14px 28px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--primary { background: var(--c-primary-strong); color: #fff; }
.btn--primary:hover { background: var(--c-primary-deep); color: #fff; }
.btn--secondary { background: transparent; color: var(--c-primary-deep); border-color: var(--c-border); }
.btn--secondary:hover { background: var(--c-tint); color: var(--c-primary-deep); border-color: var(--c-primary); }
.btn--light { background: #fff; color: var(--c-primary-deep); }
.btn--light:hover { background: var(--c-tint); color: var(--c-primary-deep); }
.btn--ghost-light { background: transparent; color: #fff; border-color: var(--c-edge-light); }
.btn--ghost-light:hover { background: var(--c-wash-light); color: #fff; border-color: #fff; }
.btn .icon { width: 1.05em; height: 1.05em; }

/* ==========================================================================
   Icons
   ========================================================================== */
.icon { display: inline-block; vertical-align: -.15em; flex: none; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-navy); border-bottom: 1px solid var(--c-navy-line);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-pop); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: var(--header-h);
}
.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Brand lockup: emblem + name in type. `height` with `width: auto` is what
   guarantees the mark keeps its 1.65:1 ratio at every size. */
/* Flex, not block: as a block the inline-flex lockup sat in a line box and the
   descender space below it pushed the logo ~4px above the header's centre. */
.site-header__brand { display: flex; align-items: center; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { display: block; height: 34px; width: auto; flex: none; }
.logo__word {
  font-family: var(--font-heading); font-weight: 700; font-size: .9375rem;
  /* Two lines at this size measure ~34px — the height of the emblem beside
     them — so the lockup reads as one block rather than text next to a logo. */
  line-height: 1.14; letter-spacing: .01em; text-transform: uppercase;
  color: #fff;
  /* Exactly two lines: wide enough for "BEST TECH &" to hold together, narrow
     enough to force the break before "ENGINEERING". `balance` keeps the two
     lines even instead of leaving a lone short word. */
  max-width: 12ch; text-wrap: balance;
}
/* On a light surface the name flips to ink; the emblem stays brand green. */
.logo--default .logo__word { color: var(--c-ink); }
.logo--light .logo__word { color: #fff; }

/* Desktop menu */
.nav-menu { display: flex; align-items: center; gap: var(--sp-2); }
.nav-menu__item { position: relative; }
.nav-menu__item > a {
  display: flex; align-items: center; gap: 4px;
  padding: var(--sp-3) var(--sp-3); font-family: var(--font-heading);
  font-weight: 500; font-size: .875rem;
  color: #fff; border-radius: var(--radius-sm);
}
.nav-menu__item > a:hover { color: #fff; background: var(--c-wash-light); }
.nav-menu__item.is-active > a { color: #fff; }
.nav-menu__item.is-active > a::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 6px;
  height: 2px; background: var(--c-brand); border-radius: 2px;
}
.caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7; transition: transform var(--transition); }
.has-dropdown:hover .caret, .has-dropdown:focus-within .caret { transform: rotate(180deg); }

/* Dropdown (CSS hover/focus — robust, no JS) */
.nav-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 240px; padding: var(--sp-2);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a { display: block; padding: var(--sp-3); border-radius: var(--radius-sm); color: var(--c-ink); }
.nav-dropdown a:hover { background: var(--c-tint); color: var(--c-primary-deep); }
.nav-dropdown .is-active > a { color: var(--c-primary-deep); background: var(--c-tint); }

/* Language switcher */
/* Sits on the navy header bar, so its own chrome is light. */
.lang-switcher { display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--c-hairline-light); border-radius: var(--radius-sm); padding: 2px; }
.lang-switcher a { padding: 4px 9px; font-size: .8rem; font-weight: 500; border-radius: 2px; color: var(--c-on-dark-muted); }
.lang-switcher a:hover { color: #fff; }
.lang-switcher a.is-active { background: var(--c-primary-strong); color: #fff; }

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
  align-items: center; justify-content: center; background: transparent; border: 1px solid var(--c-hairline-light);
  border-radius: var(--radius-sm); cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition); }

/* Mobile drawer */
.mobile-drawer { display: none; }

@media (max-width: 920px) {
  .logo__mark { height: 28px; }
  .logo__word { font-size: .75rem; }
  .site-nav.desktop-only { display: none; }
  .nav-toggle { display: flex; }
  .lang-switcher.desktop-only { display: none; }
  .site-header__actions .btn--contact { display: none; }

  .mobile-drawer {
    display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
    background: var(--c-scrim); backdrop-filter: blur(2px);
  }
  /* Navy panel so the drawer reads as an extension of the header bar and the
     white nav links carry over unchanged. */
  .mobile-drawer__panel { background: var(--c-navy); padding: var(--sp-5) var(--gutter);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto; box-shadow: var(--shadow-pop); }
  .mobile-drawer .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .mobile-drawer .nav-menu__item > a { padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--c-navy-line); }
  .mobile-drawer .nav-dropdown { background: transparent; }
  .mobile-drawer .nav-dropdown a { color: var(--c-on-dark-muted); }
  .mobile-drawer .nav-dropdown a:hover { background: var(--c-wash-light); color: #fff; }
  .mobile-drawer .nav-menu__item.is-active > a::after { display: none; }
  .mobile-drawer .nav-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: none; padding: 0 0 var(--sp-3) var(--sp-4); min-width: 0;
  }
  .mobile-drawer .caret { display: none; }
  .mobile-drawer__footer { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; color: #fff; isolation: isolate;
  background: var(--c-navy);
  background-image: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
  background-size: cover; background-position: center;
  display: flex; align-items: center; min-height: 560px;
}
/* With a photograph behind it, the same gradient becomes a translucent wash so
   the image reads as texture rather than as a picture — matching the flat dark
   banner of the approved design while still showing the work behind it. */
.hero--photo {
  background-image: linear-gradient(135deg, rgba(29,31,34,.90) 0%, rgba(12,13,14,.86) 100%), var(--hero-photo);
  background-size: cover, cover;
  background-position: center, center;
}
.hero--photo .hero__overlay { display: none; }
.hero__overlay { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-deep) 100%); }
.hero__inner { padding-block: clamp(var(--sp-8), 10vw, 120px); max-width: 780px; }
/* Typography for .hero__eyebrow is the shared kicker spec above. */
.hero__title { color: #fff; font-size: clamp(1.9rem, 5vw, 3.25rem); margin-bottom: var(--sp-4); }
.hero__subtitle { color: var(--c-on-dark-muted); font-size: 1.0625rem; max-width: 56ch; margin-bottom: var(--sp-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   Cards / grids (foundation — used by Phase 4 content)
   ========================================================================== */
.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

/* Services: explicit column counts rather than auto-fit. With five cards,
   auto-fit leaves the last row stretched to half the page — fixed columns keep
   every card the same size, and three across makes each photograph roughly
   twice the width of a five-up row. */
.grid--services { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .grid--services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--services { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: var(--sp-5); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Flat: the card responds with its border and accent, not by lifting. */
.card:hover { border-color: var(--c-primary-strong); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius); background: var(--c-tint);
  color: var(--c-primary-strong); margin-bottom: var(--sp-4);
}
.card__icon .icon { width: 28px; height: 28px; }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--text-muted); }

/* Service tile — the category photograph fills the whole card and the caption
   is laid over it, bottom-aligned. Overrides .card's light surface, so it is
   declared after it. */
a.service-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  /* Taller than the reference design's 300px: three across instead of five
     already widens the photograph, and the extra height keeps it from looking
     letterboxed. */
  min-height: 400px; text-align: left; overflow: hidden;
  padding: 0; background: var(--c-navy); border-color: var(--c-navy-line);
  color: #fff; text-decoration: none;
}
a.service-tile:hover { border-color: var(--c-brand); }
.service-tile__bg {
  position: absolute; inset: 0; background-image: var(--tile-photo);
  background-size: cover; background-position: center;
  transition: transform var(--transition);
}
a.service-tile:hover .service-tile__bg { transform: scale(1.04); }
.service-tile__scrim { position: absolute; inset: 0; background: var(--c-photo-scrim); }
/* Icon badge, top-left — drawn from the theme's own icon set. */
.service-tile__badge {
  position: absolute; top: 20px; left: 20px; width: 52px; height: 52px;
  border-radius: 50%; border: 1px solid var(--c-badge-ring); background: var(--c-badge-bg);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
/* Type scales with the card. Larger than the reference design on purpose —
   these are read across a meeting room, not a laptop. */
.service-tile__body { position: relative; padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.service-tile__body h3 { font-size: 1.25rem; font-weight: 600; color: #fff; line-height: 1.25; }
/* Two classes deep on purpose: `.card p` (0,1,1) would otherwise out-rank a
   single-class rule and drag the caption back to the light-card muted grey. */
.service-tile .service-tile__text {
  color: rgba(255, 255, 255, .82); font-size: .9375rem; margin-top: var(--sp-2);
  max-width: none; line-height: 1.5; }

/* Feature (on dark band) */
/* Numbered reason, per the reference design: a mono ordinal above the heading,
   left-aligned, no icon chip. Defaults to the light band; the dark overrides
   below kick in inside .section--dark / --deep.
   The ordinal uses --c-primary-strong on light (4.66:1) rather than --c-brand,
   which only reaches 3:1 there and would be borderline at this size. */
.feature { text-align: left; }
.feature__num { display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 1.75rem; line-height: 1; color: var(--c-primary-strong); margin-bottom: var(--sp-4); }
.feature__icon { display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius); background: var(--c-tint);
  color: var(--c-primary-strong); margin-bottom: var(--sp-4); }
.feature__icon .icon { width: 28px; height: 28px; }
.feature h3 { color: var(--c-ink); margin-bottom: var(--sp-2); }
.feature p { color: var(--text-muted); margin-inline: 0; font-size: .9375rem; }

.section--dark .feature__num, .section--deep .feature__num { color: var(--c-brand); }
.section--dark .feature__icon, .section--deep .feature__icon {
  background: var(--c-icon-on-dark); color: var(--c-brand); }
.section--dark .feature h3, .section--deep .feature h3 { color: #fff; }
.section--dark .feature p, .section--deep .feature p { color: var(--c-on-dark-muted); }

/* Showcase placeholder */
.showcase-item { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--c-tint);
  display: flex; align-items: center; justify-content: center; color: var(--c-primary-strong);
  border: 1px dashed var(--c-accent-light); font-weight: 500; }

/* ==========================================================================
   Forms (maps to bteng.php form__ classes; full styling in Phase 5)
   ========================================================================== */
.form__group { margin-bottom: var(--sp-4); }
.form__label { display: block; font-weight: 500; margin-bottom: var(--sp-2); }
.form__input, .form__select {
  width: 100%; padding: 12px 14px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius); transition: border-color var(--transition);
}
.form__input:focus, .form__select:focus { border-color: var(--c-primary); box-shadow: var(--ring); }
.form__actions { margin-top: var(--sp-5); }
.form__errors { color: var(--c-urgent); font-size: .875rem; margin-top: var(--sp-2); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--c-navy); color: var(--c-on-dark); margin-top: auto; }
.site-footer a { color: var(--c-on-dark); }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid; gap: var(--sp-6); padding-block: var(--sp-8);
  grid-template-columns: 1.4fr 1fr 1.2fr;
}
.site-footer__tagline { color: var(--c-on-dark-muted); margin-top: var(--sp-4); max-width: 38ch; }
.site-footer__heading { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; margin-bottom: var(--sp-4); }
.site-footer__nav ul { display: grid; gap: var(--sp-2); }
.site-footer__contact p { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0 0 var(--sp-3); }
.site-footer__contact .icon { color: var(--c-brand); margin-top: 3px; }
.site-footer__social { display: inline-flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--c-hairline-light); border-radius: 50%; }
.site-footer__social a:hover { background: var(--c-wash-light); border-color: #fff; }
.site-footer__bottom { background: var(--c-navy-deep); }
.site-footer__bottom .container { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-4); flex-wrap: wrap; }
.site-footer__bottom .lang-switcher { border-color: var(--c-hairline-light); }
.site-footer__bottom .lang-switcher a { color: var(--c-on-dark-muted); }
.site-footer__bottom .lang-switcher a.is-active { background: var(--c-primary-strong); color: #fff; }
.site-footer__copy { color: var(--c-on-dark-muted); font-size: .9rem; }

@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ==========================================================================
   Motion
   Everything animated here is `transform` or `opacity` only — both are handled
   by the compositor, so no layout or paint work happens per frame. The single
   exception is the card hover shadow, which is limited to the handful of cards
   that can be under the cursor at once. No JavaScript is involved: the banner
   entrance is a CSS animation that runs once on load.
   ========================================================================== */
@keyframes bteng-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Banner entrance — the home hero and every interior page banner, so moving
   between pages always opens the same way. */
.hero__inner,
.page-hero > .container { animation: bteng-fade-up .8s ease-out both; }

/* Buttons lift slightly on hover. */
.btn { transition: background var(--transition), color var(--transition),
       border-color var(--transition), transform var(--transition); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Arrow-style text links nudge forward instead. */
.link-btn { transition: transform var(--transition), color var(--transition); }
.link-btn:hover { transform: translateX(4px); }

/* Cards lift; their photograph pushes in slightly behind the fixed frame. */
.card { transition: transform .25s ease, box-shadow .25s ease, border-color var(--transition); }
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(20, 30, 50, .12); }
a.service-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20, 26, 32, .22); }
a.service-tile:hover .service-tile__bg { transform: scale(1.1); }
.service-tile__bg { transition: transform .5s ease; }
.project-card:hover .project-card__img { transform: scale(1.06); }
.project-card__img { transition: transform .4s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* Kill the displacement too, not just its duration. */
  .card:hover, a.service-tile:hover, .btn:hover, .link-btn:hover { transform: none; }
  a.service-tile:hover .service-tile__bg, .project-card:hover .project-card__img { transform: none; }
}