/* ============================================================
   KANAMA — Refinement A · "Quiet Gallery"
   Same navy system, evolved with: more air, a single brushed-
   bronze accent as the lone luxury signature, smooth gradient
   material placeholders (NO stripes), thinner gallery hairlines.
   Layered on top of styles.css.
   ============================================================ */

:root {
  --bronze: #B08D57;       /* the one metallic accent, from "brushed bronze" */
  --bronze-soft: rgba(176, 141, 87, 0.5);
}

/* ---- Measured breathing room across sections (was over-airy/empty) ---- */
.section { padding-top: clamp(52px, 6vh, 88px); padding-bottom: clamp(52px, 6vh, 88px); }
.section--tight { padding-top: clamp(40px, 4.5vh, 64px); padding-bottom: clamp(40px, 4.5vh, 64px); }

/* ---- Inline CTA arrow sits above the underline (no overlap) ---- */
.cta--inline .arrow { top: -6px; }

/* ---- Pillars: equal columns, images flush (no gap), text rows aligned ---- */
.pillars { column-gap: 0; }
.pillar { padding: 0 0 48px; border-right: 0; }
.pillar:nth-child(n+2) { padding-left: 0; }
.pillar:last-child { padding-right: 0; }
.pillar .crop { margin-bottom: 28px; }
@media (max-width: 900px) {
  .pillar { padding: 0 0 40px; border-bottom: var(--rule-soft); }
  .pillar:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ---- Eyebrow gains a small bronze tick — the signature ---- */
.eyebrow { position: relative; padding-left: 26px; }
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 16px; height: 1px;
  background: var(--bronze);
  transform: translateY(-50%);
}
.eyebrow--mist::before { background: var(--bronze); opacity: 0.9; }

/* Numerals warm to bronze — quiet, expensive */
.numeral { color: var(--bronze); }
.numeral--mist { color: var(--bronze); opacity: 0.85; }

/* ---- Hero: a hair larger, more confident, tighter tracking ---- */
.hero-title.display { font-weight: 200; letter-spacing: -0.018em; }
.hero-title em { color: var(--bronze); font-weight: 300; }

/* Bronze hairline under the hero scrim for a framed, gallery feel */
.hero .crop::after {
  background:
    linear-gradient(180deg, transparent 50%, rgba(11,26,46,0.72) 100%);
}

/* ============================================================
   PLACEHOLDERS — stripes removed.
   Smooth directional navy light + faint gallery frame.
   ============================================================ */
.crop::before {
  background-image:
    radial-gradient(120% 90% at 78% 16%, rgba(204,209,213,0.22), transparent 58%),
    radial-gradient(90% 80% at 18% 96%, rgba(30,58,92,0.55), transparent 70%),
    linear-gradient(155deg, #16304d 0%, var(--midnight) 58%, #081320 100%);
}
.crop::after {
  background: linear-gradient(180deg, transparent 58%, rgba(11,26,46,0.5) 100%);
  /* faint inset gallery frame */
  box-shadow: inset 0 0 0 1px rgba(230,234,237,0.06);
}

.crop--pearl::before {
  background-image:
    radial-gradient(95% 80% at 28% 18%, rgba(255,255,255,0.7), transparent 62%),
    radial-gradient(85% 70% at 82% 94%, rgba(139,151,163,0.28), transparent 72%),
    linear-gradient(155deg, #dfe3e6 0%, var(--pearl) 60%, #b4bcc2 100%);
}
.crop--pearl::after {
  background: linear-gradient(180deg, transparent 62%, rgba(11,26,46,0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(11,26,46,0.06);
}

.crop--midnight::before {
  background-image:
    radial-gradient(110% 80% at 72% 24%, rgba(139,151,163,0.2), transparent 60%),
    linear-gradient(160deg, #112236 0%, var(--midnight) 55%, #060f1a 100%);
}
.crop--midnight::after {
  box-shadow: inset 0 0 0 1px rgba(230,234,237,0.05);
}

/* A small bronze corner-mark on each crop tag — quiet luxury cue */
.crop-tag { padding-left: 16px; }
.crop-tag::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 1px;
  background: var(--bronze);
  transform: translateY(-50%);
}

/* ---- Pillars & project meta: tighten, warm the link arrows ---- */
.cta:hover .arrow, .cta--inline:hover .arrow { border-color: var(--bronze); }
.project-card:hover .project-meta h3 { color: var(--deepnavy); }

/* Solid buttons get a bronze underline accent on hover */
.btn-solid { transition: background 600ms var(--ease), color 600ms var(--ease); }
.btn-solid--mist:hover { background: var(--bronze); color: var(--midnight); border-color: var(--bronze); }

/* Quote mark in editorial turns bronze */
.editorial blockquote::first-letter { color: var(--bronze); }

/* ---- KANAMA GROUP logotype lockup ---- */
.wordmark .mark-group {
  font-size: 9px;
  letter-spacing: 0.34em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bronze);
  align-self: center;
}
.is-dark .wordmark .mark-group { color: var(--bronze); }
.footer-brand .wordmark .mark-group { color: var(--bronze); }
@media (max-width: 1180px) { .wordmark .mark-group { display: none; } }

/* ---- Footer legal links (Privacy / Terms) ---- */
.footer-base .footer-legal { display: inline-flex; gap: 28px; }
.footer-base .footer-legal a { color: var(--slate); transition: color 400ms var(--ease); }
.footer-base .footer-legal a:hover { color: var(--mist); }

/* ---- Begin-a-project band flows tightly into the footer (no dark void) ---- */
.cta-band { padding: clamp(48px, 5.5vh, 72px) 0 clamp(36px, 4.5vh, 56px); }
.site-footer { padding-top: 56px; border-top: 0.5px solid rgba(230, 234, 237, 0.12); }

/* ---- Footer social links (match the Connect column link style) ---- */
.footer-social { display: block; }
.footer-social a {
  display: block; padding: 6px 0; font-size: 13px;
  color: var(--mist); opacity: 0.8;
  text-transform: none; letter-spacing: normal;
  transition: opacity 300ms var(--ease);
}
.footer-social a:hover { opacity: 1; color: var(--mist); }

/* ---- Footer ISO certification badges ---- */
.footer-iso { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.iso-badge {
  width: 84px; height: 56px; border-radius: 2px;
  border: 1px solid rgba(230,234,237,0.24);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 9px; letter-spacing: 0.06em; line-height: 1.3; color: var(--pearl); padding: 6px;
}

/* ---- Begin-a-project band: background image placeholder ---- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-band .cta-bg .crop { position: absolute; inset: 0; }
.cta-band .cta-bg::after { content: ""; position: absolute; inset: 0; background: rgba(11,26,46,0.66); z-index: 1; }
.cta-band > .wrap { position: relative; z-index: 2; }

/* ============================================================
   PORTED COMPONENT STYLES (from page <style> blocks)
   ============================================================ */
.video-ph { position: relative; cursor: pointer; }
.video-ph .play { position:absolute; inset:0; margin:auto; width:92px; height:92px; border-radius:50%; border:1px solid rgba(230,234,237,0.7); display:flex; align-items:center; justify-content:center; background:rgba(11,26,46,0.28); transition:background 400ms var(--ease), transform 400ms var(--ease); }
.video-ph:hover .play { background:rgba(11,26,46,0.46); transform:scale(1.06); }
.video-ph .play::after { content:""; margin-left:7px; border-left:22px solid var(--mist); border-top:13px solid transparent; border-bottom:13px solid transparent; }

.adv { display:grid; grid-template-columns:repeat(4,1fr); gap:44px 36px; margin-top:8px; }
.adv-item { border-top:1px solid rgba(11,26,46,0.14); padding-top:24px; }
.adv-num { display:block; font-family:var(--sans); font-weight:200; font-size:clamp(34px,3.5vw,48px); line-height:0.9; color:var(--deepnavy); opacity:0.22; margin-bottom:20px; }
.adv-item h3 { font-family:var(--sans); font-weight:300; font-size:20px; letter-spacing:-0.005em; margin-bottom:12px; }
.adv-item p { font-size:14px; line-height:1.6; }
@media (max-width:900px){ .adv{ grid-template-columns:1fr 1fr; gap:30px 24px; } }
@media (max-width:560px){ .adv{ grid-template-columns:1fr; gap:0; } .adv-item{ padding:22px 0; } }

.scope-item { padding-top:0; }
.scope-item h3 { font-family:var(--sans); font-weight:300; font-size:19px; letter-spacing:-0.005em; margin-bottom:10px; }
.scope-item p { font-size:14px; line-height:1.6; }

.clients { display:grid; grid-template-columns:repeat(8,1fr); gap:20px; align-items:center; margin-top:8px; }
.client-logo { aspect-ratio:2/1; border:1px solid rgba(11,26,46,0.12); display:flex; align-items:center; justify-content:center; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:9px; letter-spacing:0.06em; line-height:1.3; color:var(--slate); text-align:center; padding:6px; }
@media (max-width:900px){ .clients{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .clients{ grid-template-columns:1fr 1fr; } }

.lproc { display:grid; grid-template-columns:repeat(3,1fr); gap:52px 44px; margin-top:8px; }
.lproc-item { border-top:1px solid rgba(230,234,237,0.22); padding-top:26px; }
.lproc-num { display:block; font-family:var(--sans); font-weight:200; font-size:clamp(38px,4.5vw,58px); line-height:0.9; color:var(--mist); opacity:0.42; margin-bottom:22px; }
.lproc-item h3 { font-family:var(--sans); font-weight:300; font-size:clamp(19px,2vw,23px); letter-spacing:-0.005em; color:var(--mist); margin-bottom:12px; }
.lproc-item p { font-size:14px; line-height:1.6; color:var(--mist); opacity:0.82; }
@media (max-width:900px){ .lproc{ grid-template-columns:1fr; gap:0; } .lproc-item{ padding:24px 0; } .lproc-num{ font-size:42px; margin-bottom:16px; } }

.proc { border-top:1px solid rgba(230,234,237,0.18); margin-top:8px; }
.proc-row { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; padding:34px 0; border-bottom:1px solid rgba(230,234,237,0.18); align-items:baseline; }
.proc-row .proc-num { grid-column:1 / span 2; font-family:var(--sans); font-weight:200; font-size:clamp(34px,4vw,54px); line-height:0.9; color:var(--mist); opacity:0.55; }
.proc-row .proc-title { grid-column:3 / span 4; font-family:var(--sans); font-weight:300; font-size:clamp(20px,2vw,26px); letter-spacing:-0.005em; color:var(--mist); }
.proc-row .proc-body { grid-column:7 / span 6; font-size:15px; line-height:1.6; color:var(--mist); opacity:0.82; }
@media (max-width:900px){ .proc-row{ grid-template-columns:1fr; gap:10px; padding:26px 0; } .proc-row .proc-num,.proc-row .proc-title,.proc-row .proc-body{ grid-column:1 / -1; } .proc-row .proc-num{ font-size:40px; } }

.proj-filter { display:flex; gap:30px; flex-wrap:wrap; align-items:center; margin-bottom:52px; padding-bottom:20px; border-bottom:1px solid rgba(11,26,46,0.12); }
.proj-filter__btn { background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--slate); padding:6px 0; position:relative; transition:color 300ms var(--ease); }
.proj-filter__btn:hover { color:var(--deepnavy); }
.proj-filter__btn.is-active { color:var(--deepnavy); }
.proj-filter__btn.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-21px; height:1px; background:var(--deepnavy); }

.pillars.pillars--2col { grid-template-columns:repeat(2,1fr); }
.pillars--2col .pillar { padding:48px 0; border-right:0; }
.pillars--2col .pillar:nth-child(odd) { padding-right:48px; border-right:var(--rule-soft); }
.pillars--2col .pillar:nth-child(even) { padding-left:48px; }
.pillars--2col .pillar:nth-child(n+3) { border-top:var(--rule-soft); }
@media (max-width:900px){ .pillars.pillars--2col{ grid-template-columns:1fr; } .pillars--2col .pillar{ padding:40px 0; } .pillars--2col .pillar:nth-child(odd){ padding-right:0; border-right:0; } .pillars--2col .pillar:nth-child(even){ padding-left:0; } .pillars--2col .pillar:nth-child(n+3){ border-top:0; } }

/* ============================================================
   RESPONSIVE GUARDS
   Inline grid-column placements (start/span) beat the media-query
   class rules, so tag those elements with data-collapse-mobile to
   force full width on small screens.
   ============================================================ */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }

@media (max-width: 900px) {
  [data-collapse-mobile] { grid-column: 1 / -1 !important; }
}

/* Careers / generic role rows: stack the multi-cell row on small screens */
@media (max-width: 760px) {
  .role-row .grid-12 {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    row-gap: 4px;
    column-gap: 18px;
  }
  .role-row .grid-12 > * { grid-column: auto !important; }
  .role-row .role-title { grid-column: 2 !important; }
  .role-row .role-arrow { display: none !important; }
}