/* =====================================================
   Auto Logistics Japan — inner page styles
   Extends css/styles.css (tokens + header + footer).
   Load AFTER styles.css.
   ===================================================== */

/* ---- inner pages always show the solid header ---- */
.site-header.is-solid {
  background: var(--cream-light);
  color: var(--navy);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .07);
}

.page-main { padding-top: var(--header-h); background: var(--cream); }

/* =========================== PAGE BANNER =========================== */
.page-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  color: var(--cream-light);
  background: var(--banner, linear-gradient(120deg, #3f4a55, #6d7a86)) center/cover no-repeat;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18, 20, 28, .72) 0%, rgba(18, 20, 28, .48) 55%, rgba(18, 20, 28, .30) 100%);
}
.page-hero .wrap { position: relative; }
.page-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight: 400; line-height: 1.1; margin: 0;
}
.page-hero .hero-kicker {
  margin: 6px 0 0;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 300; opacity: .95;
}

/* =========================== GENERIC SECTIONS =========================== */
.section { padding: 62px 0; }
.section--tight { padding: 40px 0 62px; }

/* Fallback styling for plain page/post content (no design classes) */
.section .entry-content > p { font-size: 1.12rem; color: var(--ink); max-width: 78ch; margin: 0 0 16px; }
.section .entry-content a:not(.btn) { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.section .entry-content h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 400; color: var(--navy); margin: 40px 0 18px; }
.section .entry-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--navy); margin: 26px 0 8px; }
.section .entry-content ul, .section .entry-content ol { color: var(--ink); font-size: 1.05rem; margin: 0 0 18px 22px; display: grid; gap: 8px; }
.section .entry-content img { border-radius: 10px; margin: 20px 0; }
.section .entry-content blockquote { border-left: 3px solid var(--red); margin: 20px 0; padding: 4px 0 4px 22px; color: var(--navy); }

.lead {
  font-size: 1.12rem; color: var(--ink); max-width: 78ch;
  margin: 0 0 14px;
}
.lead:last-child { margin-bottom: 0; }

.h-sub {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 400; color: var(--navy);
  margin: 48px 0 22px;
}
.h-minor { font-size: 1.15rem; font-weight: 600; color: var(--navy); margin: 26px 0 6px; }

/* heading with the thin rule under it (About / Land Transport pages) */
.h-ruled { margin-bottom: 0; }
.rule { border: 0; border-top: 1px solid #c8c5bf; margin: 14px 0 20px; }

/* ---- checkbox feature list ---- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.check-list li {
  position: relative; padding-left: 40px;
  color: var(--ink); font-size: 1.05rem; line-height: 1.6;
}
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px;
  border: 1.6px solid var(--navy); border-radius: 3px;
}
.check-list li::after {
  content: "";
  position: absolute; left: 5px; top: 8px;
  width: 10px; height: 5px;
  border-left: 1.8px solid var(--navy); border-bottom: 1.8px solid var(--navy);
  transform: rotate(-45deg);
}
.check-list b { color: var(--navy); font-weight: 600; }

/* ---- guiding-principle list (Values page) ---- */
.principles { display: grid; gap: 34px; margin-top: 8px; }
.principle { position: relative; padding-left: 46px; }
.principle .target {
  position: absolute; left: 0; top: 2px;
  width: 28px; height: 28px; color: var(--red);
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.principle h3 { font-size: 1.18rem; font-weight: 600; color: var(--navy); margin: 0 0 8px; }
.principle p { color: var(--ink); margin: 0 0 14px; line-height: 1.65; }
.principle p:last-child { margin-bottom: 0; }

/* ---- CTA row ---- */
.cta-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.btn-outline {
  border-color: var(--navy); color: var(--navy); background: transparent;
  border-radius: 30px; padding: 13px 28px;
}
.btn-outline:hover { background: var(--navy); color: var(--cream-light); }
.btn-solid.btn-pill, .btn-outline.btn-pill { border-radius: 30px; }
.cta-note { color: var(--ink); margin: 0; }

/* =========================== TEAM =========================== */
.quote-block { max-width: 940px; margin-top: 10px; }
.quote-mark { color: var(--navy); font-size: 3rem; line-height: 1; font-weight: 700; margin: 0 0 2px; }
.quote-block p { color: var(--ink); font-size: 1.05rem; line-height: 1.7; margin: 0; }
.quote-by { display: block; text-align: right; margin-top: 14px; color: var(--navy); font-weight: 500; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  /* No align-items:start — items stretch, so every card in a row shares a height. */
}
.member {
  background: var(--cream-light);
  border-radius: 18px;
  padding: 18px 18px 22px;
  box-shadow: 0 10px 26px rgba(34, 35, 68, .09);
  text-align: center;
  /* Flex column, not grid: margin-top:auto on the button then pins it to the
     bottom of every card, so the Read More row lines up across the grid. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: box-shadow .25s var(--ease);
}
.member:hover { box-shadow: 0 16px 34px rgba(34, 35, 68, .16); }
/* Every card of the open row, the clicked one included, is taken out of grid
   flow so the panel can occupy the row they were in. .is-active stays on the
   clicked card purely as a marker for close/resize to find it — it is hidden,
   so it carries no styling of its own. */
.member.is-hidden { display: none; }
.member-photo {
  width: 100%; max-width: 285px; aspect-ratio: 4 / 5;
  border-radius: 10px; overflow: hidden;
  background: #cfcbc4;
  display: grid; place-items: center;
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-name { font-size: 1.06rem; color: var(--navy); margin: 6px 0 0; font-weight: 400; }
/* Two lines are reserved on EVERY card, whether the role needs them or not.
   Without this a long title (e.g. "Chief Executive Officer (ATL Group India)")
   wraps and makes its card taller than the rest of the grid. */
.member-role {
  font-style: italic; color: var(--ink); font-size: .98rem; margin: 0;
  line-height: 1.3; min-height: 2.6em;
}
.member-bio { display: none; }
.btn-read {
  margin-top: auto;
  background: var(--red); color: var(--white);
  border: 0; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 500;
  padding: 10px 26px; border-radius: 6px;
  transition: background .2s, transform .18s var(--ease);
}
.btn-read:hover { background: var(--red-dark); transform: translateY(-2px); }

/* Expanded bio — takes over the clicked card's ROW. main.js hides that row's
   cards and drops this in their place, so no row is ever inserted between two
   existing rows. Height is animated from the row's own height, so opening
   moves the page only by the difference. */
.team-detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 285px) 1fr;
  column-gap: 40px;
  row-gap: 10px;
  background: var(--cream-light);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 10px 26px rgba(34, 35, 68, .09);
  text-align: left;
  /* Deliberately NOT animating height. height forces layout + paint of the
     whole grid every frame and cannot be GPU-composited; opacity and transform
     run on the compositor thread, so this cannot stutter however heavy the page
     gets. The row swaps in one reflow, then the panel simply fades in. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.team-detail.is-open { opacity: 1; transform: none; }
.team-detail[hidden] { display: none; }
/* Photo / name / role stack down column 1, the bio fills column 2 beside them,
   and Read Less sits bottom-right — the layout the expanded card had before the
   row mechanism replaced it. */
.td-photo {
  grid-column: 1; grid-row: 1;
  width: 100%; max-width: 285px; aspect-ratio: 4 / 5;
  border-radius: 10px; overflow: hidden; background: #cfcbc4;
}
.td-photo img,
.td-photo svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-name {
  grid-column: 1; grid-row: 2; text-align: center;
  font-size: 1.06rem; color: var(--navy); margin: 6px 0 0; font-weight: 400;
}
.td-role {
  grid-column: 1; grid-row: 3; text-align: center;
  font-style: italic; color: var(--ink); font-size: .98rem; margin: 0;
}
.td-bio {
  grid-column: 2; grid-row: 1 / span 3;
  align-self: start;
  color: var(--ink); line-height: 1.7; padding-top: 6px;
}
.td-bio p { margin: 0 0 14px; }
.td-bio p:last-child { margin-bottom: 0; }
/* .btn-read supplies the red button styling; only placement differs here.
   margin-top is reset because the card version uses auto to pin to the bottom. */
.td-close { grid-column: 2; grid-row: 4; justify-self: end; align-self: end; margin-top: 0; }

/* =========================== NETWORK & YARDS =========================== */
.network-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: start;
}
.map-panel { position: relative; padding: 10px; }
.map-panel img { width: 100%; height: auto; }
.pin {
  position: absolute;
  width: 26px; height: 34px;
  transform: translate(-50%, -100%);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #f0a836;
}
.pin svg { width: 100%; height: 100%; }
.pin span {
  position: absolute; inset: 0 0 auto 0; top: 5px;
  font-size: .72rem; font-weight: 600; color: var(--navy); text-align: center;
}
.pin:hover, .pin.is-active { color: var(--red); transform: translate(-50%, -100%) scale(1.14); }
.pin:hover span, .pin.is-active span { color: var(--white); }

.loc-panel {
  background: var(--cream-light);
  border-radius: 6px;
  max-height: 520px; overflow-y: auto;
  padding: 4px 26px;
  box-shadow: inset 4px 0 0 #e3e0da;
  scrollbar-width: thin;
}
.loc-panel::-webkit-scrollbar { width: 8px; }
.loc-panel::-webkit-scrollbar-thumb { background: #b9b6b0; border-radius: 8px; }

.loc {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 26px 0;
  border-bottom: 1px solid #e0ddd6;
}
.loc:last-child { border-bottom: 0; }
.loc.is-active { background: rgba(240, 168, 54, .07); }
.loc-num { color: #f0a836; }
.loc-num svg { width: 26px; height: 34px; }
.loc-num { position: relative; }
.loc-num b {
  position: absolute; left: 0; top: 5px; width: 26px;
  text-align: center; font-size: .72rem; color: var(--navy);
}
.loc h3 { font-size: 1.08rem; font-weight: 600; color: var(--navy); margin: 0 0 6px; }
.loc address { font-style: normal; color: var(--ink); margin: 0 0 12px; line-height: 1.55; }
.loc .tel { margin: 0 0 10px; color: var(--ink); }
.loc .tel u { text-decoration: none; border-bottom: 1px solid currentColor; }
.loc-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--navy);
}
.loc-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s var(--ease); }
.loc.is-open .loc-toggle svg { transform: rotate(180deg); }
.loc-more { display: none; }
.loc.is-open .loc-more { display: block; }
.loc-more h4 {
  font-size: 1rem; font-weight: 600; color: var(--navy);
  margin: 16px 0 4px; border-bottom: 1px solid currentColor; display: inline-block;
}
.loc-more p { margin: 0; color: var(--ink); line-height: 1.55; }
.loc-map {
  display: inline-block;
  margin-top: 6px;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.loc-map:hover { color: var(--red-dark); }

/* =========================== HISTORY / TIMELINE =========================== */
.timeline { position: relative; margin: 30px 0 0; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; top: 10px; bottom: 10px;
  left: 190px; width: 3px; background: var(--red);
}
.tl-item {
  display: grid;
  grid-template-columns: 170px 40px 1fr;
  align-items: start;
  column-gap: 0;
  padding: 14px 0;
}
.tl-date {
  text-align: right; padding-right: 22px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .92rem; font-weight: 600; color: var(--navy);
  padding-top: 2px; letter-spacing: .02em;
}
.tl-dot { position: relative; justify-self: center; width: 20px; height: 20px; margin-top: 2px; }
.tl-dot::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--cream);
  border: 3px solid var(--red);
}
.tl-dot::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; background: var(--red);
}
.tl-text { color: var(--ink); padding-left: 12px; line-height: 1.55; }

/* =========================== SERVICES LANDING =========================== */
.services-landing { padding: 90px 0 100px; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 22px;
}
.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 4px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--thumb, #4d6b7a);
  box-shadow: 0 10px 22px rgba(34, 35, 68, .14);
  color: var(--white);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(34, 35, 68, .24); }
/* Featured image fills the tile, beneath the gradient and label.
   Mirrors .card-img img on the home page grid. */
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .10) 30%, rgba(0, 0, 0, .62));
}
.tile > svg.tile-icon {
  position: relative; width: 46%; height: 46%;
  color: rgba(255, 255, 255, .35);
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.tile-label {
  position: absolute; z-index: 2; left: 12px; right: 34px; bottom: 12px;
  font-size: 1.02rem; font-weight: 500; line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.tile-arrow {
  position: absolute; z-index: 2; right: 10px; bottom: 14px;
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s var(--ease);
}
.tile:hover .tile-arrow { transform: translateX(4px); }

/* =========================== SERVICE DETAIL + QUOTE RAIL =========================== */
.service-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: 480px;
}
.service-body { padding: 58px 60px 70px 0; }
.service-body ul { color: var(--ink); padding-left: 22px; margin: 0 0 18px; }
.service-body ul li { margin-bottom: 6px; }
.quote-rail {
  background: var(--cream-light);
  padding: 58px 34px 70px;
  margin-right: calc((100vw - min(var(--wrap), 92vw)) / -2);
  padding-right: calc((100vw - min(var(--wrap), 92vw)) / 2 + 34px);
}
.quote-rail h2 {
  font-size: 1.35rem; font-weight: 400; color: var(--navy);
  text-align: center; margin: 0 0 20px;
}
.rail-actions { display: grid; gap: 14px; max-width: 300px; margin: 0 auto 60px; }
.rail-actions .btn { width: 100%; padding: 12px 18px; font-size: .95rem; border-radius: 6px; }
/* The label is wrapped in a <span> so a <br> in it actually breaks — .btn is a
   flex container, and bare text in one is an anonymous item that ignores <br>. */
.rail-actions .btn > span { text-align: center; }
.req-list { list-style: none; margin: 0 auto; padding: 0; max-width: 300px; display: grid; gap: 12px; }
.req-list li { position: relative; padding-left: 30px; color: var(--ink); font-size: .96rem; line-height: 1.35; }
.req-list li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 15px; height: 15px; border: 1.4px solid var(--navy); border-radius: 2px;
}
.req-list small { display: block; color: var(--muted); }

.inline-link { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Destination — static partner-countries map */
.dest-map { margin: 22px 0 8px; }
.dest-map img { width: 100%; height: auto; border-radius: 10px; background: #eef0f2; display: block; }

/* main.js also checks this and skips the height animation entirely; zeroing the
   transitions here keeps the two in step if only one of them applies. */
@media (prefers-reduced-motion: reduce) {
  .team-detail { transition: none; transform: none; }
}

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1024px) {
  .page-main { padding-top: var(--header-h); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  /* Stacked panel, as the expanded card did at this width. */
  .team-detail { grid-template-columns: 1fr; text-align: center; }
  .td-photo { grid-column: 1; grid-row: auto; margin: 0 auto; }
  .td-name,
  .td-role { grid-column: 1; grid-row: auto; }
  .td-bio { grid-column: 1; grid-row: auto; text-align: left; }
  .td-close { grid-column: 1; grid-row: auto; justify-self: center; }
  .network-layout { grid-template-columns: 1fr; }
  .loc-panel { max-height: none; }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .service-layout { grid-template-columns: 1fr; }
  .service-body { padding: 48px 0; }
  .quote-rail { margin: 0 calc((100vw - min(var(--wrap), 92vw)) / -2); padding: 44px 6vw 56px; }
  .timeline::before { left: 8px; }
  .tl-item { grid-template-columns: 20px 1fr; row-gap: 6px; padding: 16px 0; }
  .tl-date { grid-column: 2; text-align: left; padding: 0 0 4px 16px; }
  .tl-dot { grid-column: 1; grid-row: 1 / span 2; }
  .tl-text { grid-column: 2; padding-left: 16px; }
}

@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-detail { padding: 22px; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-row .btn { width: 100%; }
}

/* =========================== WORLD MAP (Destination Services) =========================== */
.world-map { position: relative; margin: 10px 0 0px; }
.world-map .wm-base { width: 100%; height: auto; display: block; }
.world-map .wm-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Colours for the injected world map (main.js fetches assets/world-map.svg,
   whose outlines are traced from world-base.png so they align exactly). */
.world-map .wm-country {
  fill: #d6d4cf;
  stroke: var(--cream);
  stroke-width: 1;
  transition: fill .2s var(--ease);
}
.world-map .wm-country.is-partner { fill: var(--red); }
.world-map .wm-country.is-active { fill: #e0341f; }
/* Hover / keyboard focus on a partner country. */
.world-map .wm-country[data-cc] { cursor: pointer; }
.world-map .wm-country.is-hover { fill: #e0341f; }
.world-map .wm-country[data-cc]:focus { outline: none; }
.world-map .wm-country[data-cc]:focus-visible { stroke: var(--navy); stroke-width: 2; }
/* The callout follows the cursor's country and is removed when it leaves. */
.world-map .wm-callout { pointer-events: none; }
.world-map .wm-arrow { stroke: #141416; stroke-width: 5; fill: none; }
.world-map .wm-chip { fill: #ffec3d; }
.world-map .wm-text {
  font-family: "Poppins", sans-serif;
  font-size: 36px; font-weight: 700;
  text-anchor: middle; fill: #141416;
}
.world-map .wm-callout.is-active .wm-chip { fill: #ffd21e; }

/* =========================== REGION ACCORDION (Destination Services) =========================== */
.regions {
  background: var(--cream-light);
  border-radius: 6px;
  box-shadow: inset 5px 0 0 #e3e0da, 0 10px 30px rgba(34, 35, 68, .07);
  padding: 8px 34px;
}
.region { border-bottom: 1px solid #cfccc6; }
.region:last-child { border-bottom: 0; }
.region-head {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 22px 0 14px;
  background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
}
.region-head h3 { font-size: 1.06rem; font-weight: 600; color: var(--navy); margin: 0; }
.reg-pin { width: 30px; height: 38px; color: var(--red); flex: 0 0 auto; }
.region-caret {
  width: 24px; height: 24px; margin-left: 10px;
  fill: none; stroke: var(--navy); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.region.is-open .region-caret { transform: rotate(180deg); }

.region-list { list-style: none; margin: 0; padding: 0 0 18px 46px; display: none; }
.region.is-open .region-list { display: block; }
.country-link {
  display: flex; align-items: center; gap: 16px;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink); padding: 6px 0;
  transition: color .18s;
}
.country-link svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
.country-link:hover, .country-link.is-active { color: var(--red); font-weight: 600; }
.country-link:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  .insp-table tbody th { width: 40%; font-size: .95rem; }
  .insp-table tbody td { font-size: .95rem; }
  .regions { padding: 8px 5vw; }
}

/* ===== INQUIRY FORM (custom module) ===== */
.wrap-narrow { width: min(760px, 92vw); margin-inline: auto; }
.rule-short { border: 0; border-top: 2px solid var(--navy); width: 110px; margin: 40px 0; }

.lead-strong { font-weight: 600; color: var(--navy); }

.inquiry-form { display: grid; gap: 22px; max-width: 640px; }
.alj-inquiry .lead, .alj-inquiry .rule-short, .inquiry-success { max-width: 640px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; color: var(--navy); font-size: .98rem; line-height: 1.35; }
.field .req { color: var(--red); margin-left: 2px; }

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid #9b9891;
  border-radius: 8px;
  padding: 11px 14px;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 108px; border-radius: 10px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(140, 12, 4, .12);
}

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; cursor: pointer;
}
.select-wrap select:invalid { color: var(--muted); }
.select-caret {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  fill: none; stroke: var(--navy); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.field-hint { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.field-error { display: none; margin: 0; color: var(--red); font-size: .88rem; font-weight: 500; }
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-color: var(--red); }
.field.is-invalid .field-error { display: block; }

.inquiry-form .btn { justify-self: start; padding: 12px 26px; border-radius: 6px; font-size: .95rem; }

.inquiry-success h2 { font-size: 1.15rem; font-weight: 600; color: var(--navy); margin: 0 0 18px; }

/* =========================== SUPPORT & FAQS =========================== */
@media (max-width:1024px){ .wrap-narrow{ width:min(var(--wrap),92vw); margin-inline:auto } }
/* CF-style notices */
.inquiry-notice{margin:0 0 18px;padding:12px 16px;border-radius:8px;background:#fdecea;color:#8c0c04;border:1px solid #f3b7b1;font-weight:500}

/* =========================== SUPPORT & FAQS =========================== */
.faq-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  margin: 56px 0 18px;
}
.faq-bar h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; color: var(--navy); margin: 0; }
.faq-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 320px; max-width: 560px;
  background: var(--white);
  border: 1.5px solid #9b9891; border-radius: 30px;
  padding: 5px 6px 5px 22px;
}
.faq-search input { flex: 1; border: 0; outline: none; background: none; font: inherit; color: var(--ink); }
.faq-search input::placeholder { color: var(--muted); }
.faq-search button {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border: 0; border-radius: 50%;
  background: var(--navy); color: var(--white); cursor: pointer;
}
.faq-search button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.faq-cat { border-top: 1px solid #b9b6b0; }
.faqs { border-bottom: 1px solid #b9b6b0; }
.faq-cat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 18px 6px 18px 76px;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.faq-cat-head h3 { font-size: 1.06rem; font-weight: 400; color: var(--navy); margin: 0; }
.faq-cat-icon {
  width: 26px; height: 26px; flex: 0 0 auto;
  fill: none; stroke: var(--navy); stroke-width: 1.4;
  stroke-linecap: round;
}
.faq-cat.is-open .faq-plus-v { opacity: 0; }   /* plus becomes a minus */

.faq-cat-body { display: none; padding: 0 0 10px; }
.faq-cat.is-open .faq-cat-body { display: block; }

.faq-q { border-top: 1px solid #cfccc6; }
.faq-q-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 16px 8px 16px 0;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.faq-q-text { color: var(--muted); font-size: 1rem; }
.faq-q.is-open .faq-q-text { color: var(--navy); }
.faq-q-caret {
  width: 22px; height: 22px; flex: 0 0 auto;
  fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.faq-q.is-open .faq-q-caret { transform: rotate(90deg); stroke: var(--navy); }

.faq-a { display: none; padding: 4px 0 26px; color: var(--ink); }
.faq-q.is-open .faq-a { display: block; }
.faq-a h4 { font-size: 1rem; font-weight: 600; color: var(--navy); margin: 18px 0 10px; }
.faq-a ol { padding-left: 24px; margin: 0 0 8px; }
.faq-a ol li { margin-bottom: 6px; line-height: 1.55; }
.faq-a p { margin: 14px 0 0; line-height: 1.6; }
.faq-a .tbd { color: var(--muted); }

.faq-empty { color: var(--muted); padding: 24px 0; margin: 0; }
.faq-cat[hidden], .faq-q[hidden] { display: none; }

@media (max-width: 1024px) {
  .wrap-narrow { width: min(var(--wrap), 92vw); margin-inline: auto; }
  .faq-cat-head { padding-left: 8px; }
}

/* =========================== COMPANY PROFILE HUB ===========================
   Banner + alternating text/image rows. The markup lives in the page body
   (Pages → Company Profile), rendered full-width by template-company-profile.php.
   ------------------------------------------------------------------------ */
.profile-hero { min-height: 340px; }
.profile-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.22; }
.profile-hero::before {
  background: linear-gradient(100deg, rgba(18, 20, 28, .55) 0%, rgba(18, 20, 28, .28) 55%, rgba(18, 20, 28, .12) 100%);
}

.profile-row { padding: 56px 0; }
.profile-row.band-tint { background: var(--cream-light); }
.profile-row.band-plain { background: var(--cream); }

.pr-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 60px;
}
.profile-row.media-left .pr-grid { grid-template-columns: 1fr 1.15fr; }

.pr-text h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 400; color: var(--navy);
  margin: 0 0 16px;
}
.pr-text p { color: var(--ink); line-height: 1.6; margin: 0 0 24px; max-width: 62ch; }
.pr-text .btn { border-radius: 6px; padding: 12px 30px; font-size: .95rem; }

.pr-media {
  aspect-ratio: 16 / 11;
  border-radius: 4px;
  background: var(--img, #8e98a2);
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 30px rgba(34, 35, 68, .16);
}

@media (max-width: 900px) {
  .pr-grid,
  .profile-row.media-left .pr-grid { grid-template-columns: 1fr; gap: 28px; }
  /* image always above the copy once stacked */
  .profile-row:not(.media-left) .pr-media { order: -1; }
  .pr-text p { max-width: none; }
}