/* ==========================================================================
   Pureline Logistics — template4
   A ground-up visual redesign (not a re-skin of template3).

   Direction: "bold industrial" — near-black ground, condensed stencil-style
   display type paired with a technical sans/mono, sharp (unrounded) edges,
   and a recurring diagonal stripe device echoing route/lane markings. The
   accent is the real Pureline brand blue, sampled from the logo (the boat
   mark) rather than chosen freehand — see the color block below. Written
   with CSS logical properties so this single sheet carries both directions;
   rtl.css only overrides what logical properties can't (font choice,
   a couple of directional gradients/icon mirrors).
   ========================================================================== */

:root {
  /* ---- color ----
     Sampled directly from the real Pureline logo (the boat mark): a vivid
     cyan-blue hull (~#00A8EE, matches the --accent below almost exactly)
     over a chrome/silver ring (~#9AA5B0, --metal below). Neutrals shifted
     from the earlier warm-amber take to a cool near-black so the ink
     itself reads as "night water" rather than fighting the brand blue. */
  --ink: #0c1015;
  --ink-soft: #10151b;
  --surface: #161b21;
  --surface-2: #1e242b;
  --line: #2a323b;
  --line-strong: #38424d;
  --text: #eef2f4;
  --text-dim: #99a4ad;
  --text-faint: #67727c;
  --accent: #00aeee;
  --accent-2: #5dd3ff;
  --accent-ink: #071019;
  --metal: #9aa5b0;
  --focus: #5dd3ff;

  /* ---- type ---- */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- layout ---- */
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 0; /* deliberately sharp throughout */
}

*, *::before, *::after { box-sizing: border-box; }
/* Safety net: nothing on the page should legitimately be wider than the
   viewport, but a stray fixed-width element or a hair of sub-pixel
   rounding is enough to give the whole page a horizontal scrollbar on
   mobile. Clip it at the root instead of chasing every possible cause. */
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0 0 0.4em 0;
  text-wrap: balance;
}

p { margin: 0 0 1em 0; }

.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;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- signature device: diagonal stripe rule ----
   Used sparingly at three structural seams (header base, hero base,
   footer top) as a consistent motif rather than decoration. */
.t4-stripe {
  height: 6px;
  background-image: repeating-linear-gradient(135deg, var(--accent) 0 14px, var(--ink-soft) 14px 28px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-block-end: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 6px;
  background-image: repeating-linear-gradient(135deg, var(--accent) 0 6px, transparent 6px 12px);
  flex: none;
}

.section-head {
  max-width: 46rem;
  margin-block-end: 44px;
}
.section-head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
.section-head p { color: var(--text-dim); font-size: 1.0625rem; max-width: 60ch; }

section { padding-block: clamp(56px, 9vw, 108px); }
.bg-surface { background: var(--surface); }

/* ---- scroll reveal (driven by main.js IntersectionObserver) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- buttons / links ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 28px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { background: transparent; color: var(--accent); transform: translateY(-2px); }

.btn-outline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-outline:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  padding-block-end: 3px;
  transition: color .2s, border-color .2s, gap .2s;
}
.text-link:hover { color: var(--accent); border-color: var(--accent); gap: 12px; }
.text-link .bx { transition: transform .2s; }
/* NOTE: every .text-link usage already picks bx-chevron-left vs
   bx-chevron-right explicitly per language in the blade templates, so no
   CSS mirroring is needed here — a scaleX(-1) rule used to sit here and
   was flipping the already-correct RTL icon right back to pointing the
   wrong way. */

/* ==========================================================================
   Header
   ========================================================================== */
#t4-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background: rgba(16, 19, 23, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .25s, border-color .25s;
}
#t4-header.is-solid { background: var(--ink); }
#t4-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 84px;
}
.t4-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-end: auto;
}
.t4-brand .logo-badge {
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding: 4px 10px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  flex: none;
}
.t4-brand .logo-badge img { height: 100%; width: auto; max-width: 220px; object-fit: contain; flex: none; }
.t4-brand .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
[dir="rtl"] .t4-brand .name { font-family: var(--font-ar, var(--font-display)); letter-spacing: 0; }
/* Below tablet width the full-size name wrapped to two lines beside the
   logo badge and made the whole fixed header much taller than it should
   be. Scale both down together so the header stays compact on phones. */
@media (max-width: 560px) {
  #t4-header .wrap { min-height: 64px; gap: 12px; }
  .t4-brand { gap: 8px; }
  .t4-brand .logo-badge { height: 40px; padding: 3px 6px; }
  .t4-brand .logo-badge img { max-width: 110px; }
  .t4-brand .name { font-size: 0.85rem; line-height: 1.2; }
}

.t4-nav { display: none; }
.t4-nav ul { list-style: none; display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; }
.t4-nav a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-block: 6px;
  border-block-end: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.t4-nav a:hover, .t4-nav a.is-active { color: var(--text); border-color: var(--accent); }
.t4-nav .lang-link { color: var(--accent-2); display: inline-flex; align-items: center; }
.t4-nav .lang-link .lang-flag {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}

.t4-header-cta { display: none; }

@media (min-width: 900px) {
  .t4-nav { display: block; }
  .t4-header-cta { display: inline-flex; flex: none; white-space: nowrap; }
}

.t4-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}
@media (min-width: 900px) { .t4-nav-toggle { display: none; } }

.t4-mobile-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(86vw, 380px);
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 60;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* inset-inline-end:0 above already auto-flips to the left edge under
   dir="rtl" (that's the point of logical properties) — the only thing
   that needs a manual flip is the *transform*, since translateX() is a
   physical value that never auto-mirrors. */
[dir="rtl"] .t4-mobile-nav { transform: translateX(-100%); }
body.nav-open .t4-mobile-nav { transform: translateX(0); }
.t4-mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  padding-block: 12px;
  border-block-end: 1px solid var(--line);
  color: var(--text);
}
.t4-mobile-nav a.lang-link { color: var(--accent-2); font-family: var(--font-body); font-size: 1rem; text-transform: none; }
.t4-mobile-nav-close {
  align-self: flex-end;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--line-strong); color: var(--text);
  font-size: 1.3rem; cursor: pointer; margin-block-end: 12px;
}
.t4-scrim {
  position: fixed; inset: 0; background: rgba(8,9,11,0.6);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 55;
}
body.nav-open .t4-scrim { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
#t4-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-block: 140px 64px;
  isolation: isolate;
  overflow: hidden; /* clips the Ken Burns zoom on .t4-hero-bg so it can't push out a horizontal scrollbar */
}
#t4-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,19,23,0.55) 0%, rgba(16,19,23,0.72) 55%, rgba(16,19,23,0.96) 100%);
  z-index: -1;
}
/* Paint order inside #t4-hero's stacking context (it has isolation:isolate):
   .t4-hero-bg (-3, furthest back, the animated photo) → video (-2, plays on
   top of it once a real clip exists) → ::before gradient (-1) → .wrap text,
   which is non-positioned so it always paints above all three regardless of
   z-index. */
.t4-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -3;
  animation: t4-kenburns 26s ease-in-out infinite alternate;
}
@keyframes t4-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.09) translate(-1.2%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .t4-hero-bg { animation: none; }
}
.t4-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
@media (prefers-reduced-motion: reduce) {
  .t4-hero-video { display: none; }
}
/* Entrance: each line drops in fade+rise, staggered so the eyebrow leads
   and the CTA lands last — plays once on load, never on scroll (that's
   the separate [data-reveal]/IntersectionObserver mechanism below, for
   content further down the page). Every hero line starts from its
   *own* animation so nothing collapses to invisible if JS never runs. */
@keyframes t4-hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
#t4-hero .eyebrow,
#t4-hero h1,
#t4-hero .slogan,
#t4-hero .wrap > .t4-hero-cta {
  animation: t4-hero-in .8s cubic-bezier(.16,.9,.3,1) both;
}
#t4-hero .eyebrow   { animation-delay: .05s; }
#t4-hero h1         { animation-delay: .16s; }
#t4-hero .slogan    { animation-delay: .32s; }
#t4-hero .wrap > .t4-hero-cta { animation-delay: .46s; }
@media (prefers-reduced-motion: reduce) {
  #t4-hero .eyebrow,
  #t4-hero h1,
  #t4-hero .slogan,
  #t4-hero .wrap > .t4-hero-cta {
    animation: none;
  }
}
.t4-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
#t4-hero .eyebrow { color: var(--accent-2); }
#t4-hero h1 {
  /* was clamp(2.75rem, 1.6rem + 6vw, 6.75rem) — the 6vw slope and 6.75rem
     ceiling ran the headline past 100px on ordinary desktop widths (the
     user's own screenshot showed a two-line Arabic headline dominating
     the hero). Flatter slope, lower ceiling: reads as a strong display
     line without swallowing the eyebrow/slogan/CTA underneath it. */
  font-size: clamp(2.1rem, 1.35rem + 3.4vw, 4.25rem);
  line-height: 1.05;
  max-width: 16ch;
}
#t4-hero .slogan {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem);
  max-width: 46ch;
  margin-block: 18px 32px;
}

/* ==========================================================================
   About
   ========================================================================== */
/* Title stacked above the copy (like every other section on the page)
   instead of a side-by-side sticky-sidebar layout — with several
   paragraphs plus a list, the old two-column grid made the whole section
   read as very tall next to a mostly-empty heading column. */
.t4-about-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.t4-about-grid > div:first-child {
  max-width: 46rem;
}
.t4-about-grid .content { color: var(--text-dim); font-size: 1.0625rem; }
.t4-about-grid .content p:first-of-type {
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.55;
}
/* CMS copy can include its own <ul> lists (e.g. a cargo-type breakdown) —
   restyle the browser default disc into a marker consistent with the
   rest of the design system rather than leaving plain black bullets. */
.t4-about-grid .content ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.t4-about-grid .content li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--text);
}
.t4-about-grid .content li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 10px; height: 2px;
  background: var(--accent);
}
.t4-about-grid .content strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   Services
   ========================================================================== */
/* The services intro copy from the CMS runs long and includes its own
   list (same situation as the About section) — the shared .section-head
   max-width (46rem block / 60ch paragraph) was built for a short one-line
   lede and left this one wrapping tightly with a lot of empty space
   beside it. Widen it here only, and reuse the same list styling used in
   the About section instead of plain browser bullets. */
#services .section-head { max-width: none; }
#services .section-head p { max-width: none; }
#services .section-head ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1rem;
}
#services .section-head li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--text);
}
#services .section-head li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 10px; height: 2px;
  background: var(--accent);
}
#services .section-head strong { color: var(--text); font-weight: 600; }

/* Photo-led cards: service images coming from the real data are actual
   photographs (a dock, a plane, a warehouse aisle), not small icon marks —
   a 52px icon tile cropped them into an unreadable corner-thumbnail. Each
   card now gives the photo a full-width frame with a proper aspect ratio,
   desaturated at rest and brought to full color + a slight zoom on hover,
   with the number as a small tag overlaid on the image (continuing the
   01–05 wayfinding numbering used by the section eyebrows) instead of a
   giant decorative background digit. */
.t4-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) {
  .t4-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .t4-services-grid { grid-template-columns: 1fr; }
}
.t4-service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.t4-service-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.t4-service-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
}
.t4-service-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.35) brightness(.82);
  transition: filter .35s ease, transform .5s ease;
}
.t4-service-card:hover .t4-service-media img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.06);
}
.t4-service-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,16,21,0) 55%, rgba(12,16,21,0.78) 100%);
}
.t4-service-media .idx {
  position: absolute;
  z-index: 1;
  inset-block-end: 12px; inset-inline-start: 16px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent-2);
}
.t4-service-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.t4-service-card h4 {
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: 0;
}
.t4-service-card p { color: var(--text-dim); font-size: 0.9375rem; margin: 0; }

/* ==========================================================================
   Blog teaser (home) — horizontal scroll-snap rail
   ========================================================================== */
.t4-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-block-end: 32px;
}
.t4-rail-controls { display: flex; gap: 10px; }
.t4-rail-controls button {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.t4-rail-controls button:hover { border-color: var(--accent); color: var(--accent); }

.t4-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 8px;
  scrollbar-width: none;
}
.t4-rail::-webkit-scrollbar { display: none; }
.t4-rail-card {
  scroll-snap-align: start;
  flex: 0 0 min(340px, 82vw);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.t4-rail-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.t4-rail-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.t4-rail-card:hover .img-wrap img { transform: scale(1.05); }
.t4-rail-card .body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.t4-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--text-faint); text-transform: uppercase;
}
.t4-rail-card h3 { font-size: 1.15rem; text-transform: none; letter-spacing: 0; font-weight: 700; }
.t4-rail-card p { color: var(--text-dim); font-size: 0.9rem; flex: 1; margin: 0; }

/* ==========================================================================
   Team
   ========================================================================== */
/* Same situation as Services: the CMS copy for this section's head runs to
   several sentences, so the shared .section-head width caps (built for a
   short one-line lede) left it wrapping tight with a lot of dead space
   beside it. */
#team .section-head { max-width: none; }
#team .section-head p { max-width: none; }
.t4-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}
.t4-member { border: 1px solid var(--line); background: var(--ink-soft); }
.t4-member .photo { aspect-ratio: 1; overflow: hidden; position: relative; }
/* Some team photos are a tall branded ID-card style shot — face at the very
   top, the "Pure Line Logistics" mark and a good deal of plain background
   filling everything below it. object-fit:cover with the default *centered*
   crop was cutting straight into that lower, face-less two-thirds and
   showing none of the actual person. Anchoring the crop to the top of the
   frame instead keeps the face regardless of how much branding sits below
   it, and still looks correct for an ordinary, evenly-centered headshot. */
.t4-member .photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.05);
  transition: filter .3s;
}
.t4-member:hover .photo img { filter: grayscale(0); }
.t4-member .social {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: flex; gap: 1px;
  transform: translateY(100%);
  transition: transform .25s;
}
.t4-member:hover .social { transform: translateY(0); }
.t4-member .social a {
  flex: 1;
  background: rgba(16,19,23,0.85);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  height: 38px;
  font-size: 1rem;
}
.t4-member .social a:hover { background: var(--accent); color: var(--accent-ink); }
.t4-member .info { padding: 16px 18px 20px; }
.t4-member .info h4 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; margin-block-end: 2px; }
.t4-member .info span { color: var(--accent-2); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ==========================================================================
   Contact
   ========================================================================== */
/* Same situation as Services/Team: the CMS copy for this section's head
   runs to several sentences, so the shared .section-head width caps
   (built for a short one-line lede) left it wrapping tight with a lot of
   dead space beside it. */
#contact .section-head { max-width: none; }
#contact .section-head p { max-width: none; }
.t4-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 900px) { .t4-contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

.t4-contact-info { background: var(--surface); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 28px; }
.info-box { display: flex; gap: 16px; align-items: flex-start; }
.info-box .bx {
  flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); color: var(--accent);
  font-size: 1.25rem;
}
.info-box h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin-block-end: 6px; }
.info-box p { color: var(--text-dim); font-size: 0.9375rem; margin: 0 0 2px 0; }

.t4-contact-form { background: var(--ink-soft); padding: clamp(28px, 4vw, 48px); }
.form-row { display: grid; grid-template-columns: 1fr; gap: 18px; margin-block-end: 18px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; }
.form-control {
  background: transparent;
  border: none;
  border-block-end: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 2px;
  transition: border-color .2s;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus { border-color: var(--accent); outline: none; }
textarea.form-control { resize: vertical; min-height: 110px; }
.validate { font-size: 0.75rem; color: var(--accent-2); margin-block-start: 4px; }
.loading, .error-message, .sent-message { display: none; font-size: 0.875rem; padding: 10px 0; }
.loading { color: var(--text-dim); }
.error-message { color: #ff8a6b; }
.sent-message { color: #7fd99a; }
.t4-contact-form .text-center { text-align: center; margin-block-start: 6px; }

.map-wrap { margin-block-start: 0; }
#map { width: 100%; height: 380px; filter: grayscale(0.4) contrast(1.1) invert(0.92) hue-rotate(180deg); }

/* ==========================================================================
   Footer
   ========================================================================== */
#t4-footer { background: var(--surface); border-block-start: 1px solid var(--line); }
.t4-footer-top { padding-block: 64px; }
.t4-footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 760px) { .t4-footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; } }
.t4-footer-grid h3 { font-size: 1.5rem; }
.t4-footer-grid h3 span { color: var(--accent); }
.t4-footer-grid .addr { color: var(--text-dim); font-size: 0.9375rem; }
.t4-footer-grid h4 { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); margin-block-end: 18px; }
.t4-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.t4-footer-grid ul a { color: var(--text-dim); font-size: 0.9375rem; display: flex; align-items: center; gap: 8px; transition: color .2s; }
.t4-footer-grid ul a:hover { color: var(--accent); }

.t4-footer-bottom {
  border-block-start: 1px solid var(--line);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--text-faint);
}
.t4-social { display: flex; gap: 1px; }
.t4-social a {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: color .2s, border-color .2s;
}
.t4-social a:hover { color: var(--accent); border-color: var(--accent); }

.back-to-top {
  position: fixed;
  inset-block-end: 24px; inset-inline-end: 24px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  font-size: 1.3rem;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
  z-index: 40;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   Breadcrumbs (blog / blog-single / search)
   ========================================================================== */
.t4-breadcrumbs {
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  padding-block: 150px 40px;
}
.t4-breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px 0; padding: 0;
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--text-faint); text-transform: uppercase;
}
.t4-breadcrumbs ol li + li::before { content: "/"; margin-inline-end: 8px; color: var(--line-strong); }
.t4-breadcrumbs ol a { color: var(--text-dim); }
.t4-breadcrumbs ol a:hover { color: var(--accent); }
.t4-breadcrumbs h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); margin: 0; }

/* ==========================================================================
   Blog list / search results / single
   ========================================================================== */
.t4-blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 960px) { .t4-blog-layout { grid-template-columns: 2fr 1fr; } }

.t4-entries { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.t4-entry {
  background: var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 620px) { .t4-entry { grid-template-columns: 220px 1fr; } }
.t4-entry .img-wrap { aspect-ratio: 4/3; overflow: hidden; }
@media (min-width: 620px) { .t4-entry .img-wrap { aspect-ratio: auto; height: 100%; } }
.t4-entry .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.t4-entry .body { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.t4-entry h2 { font-size: 1.35rem; text-transform: none; letter-spacing: 0; }
.t4-entry p { color: var(--text-dim); margin: 0; font-size: 0.95rem; }

.t4-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 32px; list-style: none; padding: 0; }
.t4-pagination a {
  min-width: 42px; height: 42px; padding-inline: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-dim);
}
.t4-pagination li.active a, .t4-pagination a:hover { border-color: var(--accent); color: var(--accent); }

.t4-no-results { text-align: center; padding-block: 60px; color: var(--text-dim); font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; }

/* sidebar */
.t4-sidebar { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.t4-sidebar-item { background: var(--surface); padding: 26px; }
.t4-sidebar-item h3 { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--accent-2); font-family: var(--font-mono); margin-block-end: 16px; }
.t4-search-form { display: flex; border: 1px solid var(--line-strong); }
.t4-search-form input {
  flex: 1; background: transparent; border: none; color: var(--text);
  padding: 12px 14px; font-family: var(--font-body); font-size: 0.9rem;
}
.t4-search-form button { width: 46px; background: var(--accent); border: none; color: var(--accent-ink); cursor: pointer; font-size: 1.1rem; }
.t4-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.t4-tags a {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); padding: 7px 12px;
  font-size: 0.8125rem; color: var(--text-dim); font-family: var(--font-mono);
}
.t4-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* single article */
.t4-article .img-wrap { aspect-ratio: 21/9; overflow: hidden; margin-block-end: 28px; border: 1px solid var(--line); }
.t4-article .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.t4-article h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin-block-end: 16px; }
.t4-article .entry-content { color: var(--text-dim); font-size: 1.0625rem; max-width: 68ch; }
.t4-article .entry-content p { margin: 0 0 1.2em 0; }
.t4-article-footer {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  margin-block-start: 36px; padding-block-start: 24px; border-block-start: 1px solid var(--line);
}
.t4-share { display: flex; gap: 10px; }
.t4-share a {
  width: 40px; height: 40px; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}
.t4-share a:hover { border-color: var(--accent); color: var(--accent); }

/* ---- custom cursor ----
   A small dot that tracks the mouse exactly, with a ring that trails a
   step behind it (see assets/template4/js/custom-cursor.js — RING_EASE
   controls how far behind). Both use var(--accent), the site's own
   brand cyan, instead of a hardcoded color, so they stay on-brand
   automatically if that variable ever changes. Only ever added when
   that script detects a real mouse (pointer: fine); on touch devices
   .has-custom-cursor is never set, so all of this is inert and the
   native touch behavior is untouched.

   Dot and ring are each position:fixed and get their OWN transform set
   directly by JS every frame (not inherited from a shared parent),
   since the whole point is that they sit at two different points on
   screen at once. .custom-cursor itself is just a grouping wrapper so
   both can be hidden together via one class. */
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor [role="button"],
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor label {
  cursor: none;
}

.custom-cursor.is-hidden .custom-cursor__dot,
.custom-cursor.is-hidden .custom-cursor__ring {
  opacity: 0;
}

.custom-cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .2s ease;
  will-change: transform;
}

.custom-cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition: opacity .2s ease;
  will-change: transform;
}

/* Never render/activate on touch devices, even if the class was somehow
   set (belt-and-suspenders alongside the pointer:fine JS check). */
@media (pointer: coarse), (hover: none) {
  .custom-cursor { display: none !important; }
  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button {
    cursor: auto;
  }
}