:root{
  --bg:#eef0f2; --surface:#ffffff; --surface-2:#e3e6e9; --surface-3:#d7dade;
  --ink:#1b2027; --ink-soft:#565f6b; --ink-faint:#7c8492;
  --line:#ccd0d5; --line-soft:#dde0e3;
  --accent:#c06a1f; --accent-rgb:192,106,31; --accent-ink:#fffaf3; --accent-soft:#e9c79a;
  /* Hero, footer, and the top nav keep their own dark backgrounds (unchanged by
     the light theme below); anything drawn against them — chips, the crosshair,
     the side rail, the profile-photo corners — needs a brighter accent to stay
     legible, since the general-content accent above is tuned for a light bg. */
  --accent-on-dark:#e2913f; --accent-on-dark-rgb:226,145,63;
  --steel:#33506d; --steel-soft:#dbe4ec;
  --shadow: 0 1px 2px rgba(20,20,10,.06), 0 8px 24px -12px rgba(20,20,10,.16);
  --font-display: 'Inter', -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* Dark mode: general content switches to a near-black palette (the theme this
   site ran before the light pass). Hero/footer/nav are already dark and don't
   need overrides — --accent already converges with --accent-on-dark here since
   the whole page is dark at that point, not just the bookends. */
:root[data-theme="dark"]{
  --bg:#10141a; --surface:#171d26; --surface-2:#1c2430; --surface-3:#242e3c;
  --ink:#edf0f3; --ink-soft:#aeb7c2; --ink-faint:#7d8794;
  --line:#2b3542; --line-soft:#212a36;
  --accent:#e2913f; --accent-rgb:226,145,63; --accent-ink:#1a1206; --accent-soft:#4a3319;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; color:var(--ink); background-color:var(--bg);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tabular{ font-variant-numeric: tabular-nums; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .wrap{ padding:0 18px; } }

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
}
.eyebrow.on-dark{ color:var(--accent-on-dark); }
.eyebrow::before, .eyebrow::after{
  content:""; flex:none; width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  border-left:5px solid currentColor;
}
.eyebrow::after{ order:-1; }

/* ---------- TOP NAV ---------- */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(15,19,25,.92); -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topnav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 28px; gap:20px;
}
.topnav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#f2f4f6; }
.topnav-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; flex:none;
  border:1.5px solid var(--accent-on-dark); color:var(--accent-on-dark);
  font-family:var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.02em;
}
.topnav-name{ font-family:var(--font-display); font-weight:500; font-size:14.5px; }
.topnav-links{ display:flex; align-items:center; gap:26px; }
.topnav-links a{ text-transform:uppercase; }
.topnav-links a:not(.btn-primary){
  color:#cfd6dc; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.04em;
  transition:color .25s ease, text-shadow .25s ease;
}
.topnav-links a:not(.btn-primary):hover{ color:var(--accent-on-dark); text-shadow:0 0 12px rgba(var(--accent-on-dark-rgb),.6); }
.topnav-cta{ padding:8px 16px; font-size:13px; }

.theme-toggle{
  display:flex; align-items:center; gap:2px; padding:3px; border-radius:99px; flex:none;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
}
.theme-btn{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:99px; border:none; background:transparent;
  color:#8b939c; cursor:pointer; padding:0;
  transition:background .2s ease, color .2s ease;
}
.theme-btn svg{ width:15px; height:15px; }
.theme-btn:hover{ color:#e7eaed; }
.theme-btn.active{ background:var(--accent-on-dark); color:#1a1206; }
.theme-btn.active:hover{ color:#1a1206; }

.topnav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; border:1px solid var(--line); border-radius:7px;
  background:transparent; cursor:pointer; padding:0; align-items:center;
}
.topnav-burger span{ width:16px; height:2px; background:#e7eaed; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.topnav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.topnav-burger.open span:nth-child(2){ opacity:0; }
.topnav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.topnav-mobile{
  display:none; flex-direction:column; gap:2px; padding:10px 18px 16px;
  background:rgba(15,19,25,.98); border-top:1px solid var(--line);
}
.topnav-mobile.open{ display:flex; }
.topnav-mobile a{
  color:#e7eaed; text-decoration:none; font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.12);
}
.topnav-mobile a.btn-primary{ margin-top:10px; justify-content:center; border-bottom:none; }

@media (max-width:640px){
  .topnav-links{ display:none; }
  .topnav-burger{ display:flex; }
}

/* ---------- AUTOCAD CROSSHAIR CURSOR ---------- */
body.cad-active, body.cad-active *{ cursor:none !important; }
.cad-cursor{ position:fixed; inset:0; pointer-events:none; z-index:9999; display:none; }
.cad-line{ position:fixed; background:rgba(var(--accent-on-dark-rgb),.55); pointer-events:none; }
.cad-h{ left:0; right:0; height:1px; top:0; }
.cad-v{ top:0; bottom:0; width:1px; left:0; }
.cad-box{
  position:fixed; top:0; left:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border:1px solid var(--accent-on-dark); background:rgba(var(--accent-on-dark-rgb),.14); pointer-events:none;
  transition:width .15s ease, height .15s ease, margin .15s ease, box-shadow .15s ease, background .15s ease;
}
.cad-box.cad-box-hot{
  width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  background:rgba(var(--accent-on-dark-rgb),.4); box-shadow:0 0 12px 2px rgba(var(--accent-on-dark-rgb),.55);
}
@media (hover:none), (pointer:coarse){ .cad-cursor{ display:none !important; } body.cad-active, body.cad-active *{ cursor:auto !important; } }

/* ---------- SIDE PROGRESS RAIL ---------- */
.side-rail{
  position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:18px; align-items:center;
}
.side-rail::after{
  content:""; position:absolute; left:50%; top:-20px; bottom:-20px; width:1px;
  background:var(--line); z-index:-1; transform:translateX(-50%);
}
.rail-dot{
  position:relative; width:9px; height:9px; border-radius:50%;
  background:var(--surface-3); border:1.5px solid var(--line); text-decoration:none;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.rail-dot:hover{ border-color:var(--accent-on-dark); transform:scale(1.25); }
.rail-dot.active{ background:var(--accent-on-dark); border-color:var(--accent-on-dark); box-shadow:0 0 10px 2px rgba(var(--accent-on-dark-rgb),.55); transform:scale(1.3); }
.rail-tip{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:5px;
  padding:4px 9px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; box-shadow:var(--shadow);
}
.rail-dot:hover .rail-tip{ opacity:1; transform:translateY(-50%) translateX(-2px); }
@media (max-width:960px){ .side-rail{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden; background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
    linear-gradient(160deg,#171d25,#0f1319 78%);
  color:#f2f4f6;
  padding:76px 0 64px;
  border-bottom:6px solid var(--accent-on-dark);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url('img/hero-bg.jpg');
  background-size:cover; background-position:center 30%;
  opacity:.09; mix-blend-mode:screen; pointer-events:none;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center;
}
@media (max-width:760px){ .hero-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; } }

.badge-frame{
  position:relative; width:176px; height:176px; flex:none;
}
.badge-frame img{
  width:176px; height:176px; object-fit:cover; border-radius:6px;
  filter:grayscale(1) contrast(1.05);
  border:1px solid rgba(255,255,255,.14);
}
.badge-frame .corner{
  position:absolute; width:22px; height:22px; border-color:var(--accent-on-dark); border-style:solid; border-width:0;
  filter:drop-shadow(0 0 6px rgba(var(--accent-on-dark-rgb),.65));
}
.badge-frame .c-tl{ top:-9px; left:-9px; border-top-width:3px; border-left-width:3px; }
.badge-frame .c-tr{ top:-9px; right:-9px; border-top-width:3px; border-right-width:3px; }
.badge-frame .c-bl{ bottom:-9px; left:-9px; border-bottom-width:3px; border-left-width:3px; }
.badge-frame .c-br{ bottom:-9px; right:-9px; border-bottom-width:3px; border-right-width:3px; }

.hero h1{
  font-family:var(--font-display); font-weight:500; font-size:clamp(34px,5.6vw,58px);
  letter-spacing:-.01em; text-transform:uppercase; margin:10px 0 6px; line-height:1.02;
}
.hero .role-line{
  font-size:clamp(14.5px,1.7vw,17px); color:#cfd6dc; max-width:640px; font-weight:600; margin:0 0 16px;
}
.hero .summary{
  font-size:15.5px; color:#b9c1c9; max-width:600px; margin:0 0 22px;
  text-align:justify; text-justify:inter-word; hyphens:auto;
}
.chiprow{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(255,255,255,.18); border-radius:99px; padding:8px 14px;
  font-size:13px; color:#e7eaed; text-decoration:none; background:rgba(255,255,255,.04);
  transition: background .2s ease, border-color .2s ease, box-shadow .3s ease, transform .3s ease;
}
.chip:hover{ background:rgba(255,255,255,.1); border-color:var(--accent-on-dark); }
a.chip:hover{
  border-color:var(--accent-on-dark); transform:translateY(-2px);
  box-shadow:0 0 18px -3px rgba(var(--accent-on-dark-rgb),.6);
}
a.chip:hover b, a.chip:hover{ text-shadow:0 0 10px rgba(var(--accent-on-dark-rgb),.5); }
.chip b{ color:var(--accent-on-dark); font-family:var(--font-mono); font-weight:600; }
.chip.on-light{ border-color:var(--line); color:var(--ink); background:var(--surface); box-shadow:var(--shadow); }
.chip.on-light:hover{ background:var(--surface); border-color:var(--accent); }

/* ---------- TILE GRID (skills / tools / systems) ---------- */
.tile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px; }
@media (max-width:900px){ .tile-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tile-grid{ grid-template-columns:1fr; } }
.tile{
  border:1px solid var(--line); border-radius:9px; padding:14px 16px; background:var(--surface);
  font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:10px;
  transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.tile .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; transition:box-shadow .3s ease; }
.tile:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 0 22px -4px rgba(var(--accent-rgb),.5), var(--shadow); }
.tile:hover .dot{ box-shadow:0 0 8px 1px var(--accent); }

/* ---------- CAPABILITIES (Skills / Tools / Applications) ---------- */
.capabilities{ background:transparent; padding:56px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.capabilities h3{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:14px; letter-spacing:.08em; margin:0 0 14px; color:var(--accent); }
.capabilities .cap-block{ margin-bottom:36px; margin-top:28px; }
.capabilities .cap-block:last-child{ margin-bottom:0; }

.app-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:4px; }
@media (max-width:760px){ .app-grid{ grid-template-columns:1fr; } }
.app-card{
  border:1px solid var(--line); border-radius:10px; padding:20px 22px; background:var(--surface);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.app-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 0 26px -6px rgba(var(--accent-rgb),.5), var(--shadow); }
.app-card::before{
  content:""; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--accent);
}
.app-card .app-icon{ display:block; margin-bottom:10px; color:var(--accent); }
.app-card .app-icon svg{ width:24px; height:24px; display:block; }
.app-card .app-name{ font-family:var(--font-display); font-weight:500; font-size:15.5px; text-transform:uppercase; margin-bottom:4px; }
.app-card .app-meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.app-card .app-desc{ font-size:14px; color:var(--ink-soft); line-height:1.6; text-align:justify; text-justify:inter-word; hyphens:auto; }

/* ---------- STATS STRIP ---------- */
.stats{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
@media (max-width:760px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }
.stat{
  padding:26px 20px; text-align:center; border-left:1px solid var(--line);
}
.stat:first-child{ border-left:none; }
@media (max-width:760px){ .stat:nth-child(odd){ border-left:none; } .stat{ border-top:1px solid var(--line); } .stat:nth-child(-n+2){ border-top:none; } }
.stat .num{ font-family:var(--font-mono); font-weight:700; font-size:clamp(22px,3vw,30px); color:var(--accent); }
.stat .label{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }

/* ---------- SECTION / EMPLOYER SHEET ---------- */
main{ position:relative; }
.timeline-rail{
  position:absolute; left:-24px; top:0; bottom:0; width:2px; background:var(--line);
}
@media (max-width:640px){ .timeline-rail{ display:none; } }

.role{
  padding:56px 0; border-bottom:1px solid var(--line-soft);
  position:relative;
}
.role:last-of-type{ border-bottom:none; }

.role-head{
  display:grid; grid-template-columns:96px 1fr auto; gap:22px; align-items:start; margin-bottom:22px;
}
@media (max-width:640px){ .role-head{ grid-template-columns:1fr; } }

.role-dates{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); padding-top:6px;
  position:relative;
}
.role-dates::before{
  content:""; position:absolute; left:-52px; top:9px; width:11px; height:11px; border-radius:50%;
  background:var(--surface); border:3px solid var(--accent);
}
@media (max-width:1180px){ .role-dates::before{ left:-52px; } }
@media (max-width:640px){ .role-dates::before{ display:none; } }

.role-titles h2{
  font-family:var(--font-display); font-weight:500; font-size:clamp(21px,2.6vw,28px);
  text-transform:uppercase; letter-spacing:-.005em; margin:0 0 4px;
}
.role-titles .loc{ font-size:13px; color:var(--ink-faint); font-family:var(--font-mono); }
.role-titles .position{ font-size:15px; font-weight:700; color:var(--accent); margin-top:8px; }

.logo-slot{ width:78px; height:78px; border-radius:9px; background:#ffffff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:5px; box-shadow:var(--shadow); }
.logo-slot img{ width:100%; height:100%; object-fit:contain; }

.role-body{ display:grid; grid-template-columns:1fr; gap:22px; }
.role-copy{ font-size:15px; color:var(--ink-soft); max-width:720px; text-align:justify; text-justify:inter-word; hyphens:auto; }
.role-copy p{ margin:0 0 12px; }
.role-copy p:last-child{ margin-bottom:0; }
.role-copy strong{ color:var(--ink); }

.sub-role{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); }
.sub-role .sub-dates{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}
.sub-role .sub-title{ font-weight:700; font-size:14.5px; margin:2px 0 6px; }

/* stat chip row inside a role */
.metric-row{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 4px; }
.metric{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:10px 14px; min-width:118px; box-shadow:var(--shadow);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.metric:hover{ border-color:var(--accent); box-shadow:0 0 18px -4px rgba(var(--accent-rgb),.5), var(--shadow); }
.metric .m-num{ font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:16px; }
.metric .m-label{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}

/* photo gallery grid */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.gallery.g2{ grid-template-columns:repeat(2,1fr); }
.gallery.g5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:760px){ .gallery, .gallery.g5, .gallery.g2{ grid-template-columns:repeat(2,1fr); } }
.gph{
  position:relative; overflow:hidden; border-radius:8px; aspect-ratio:4/3; border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--surface-3);
  transition:box-shadow .35s ease, border-color .35s ease;
}
.gph:hover{ border-color:var(--accent); box-shadow:0 0 30px -6px rgba(var(--accent-rgb),.55), var(--shadow); }
.gph img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Two stacked images per photo: a navy-duotone base (always visible) and a
   color-graded version that crossfades in on hover, rather than one image
   with a CSS grayscale/color filter toggle — needed once the resting state
   became a true baked duotone rather than something a filter() can fake. */
.gph-base{ transition:transform .5s ease; }
.gph-color{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease, transform .5s ease; }
.gph:hover .gph-base{ transform:scale(1.045); }
.gph:hover .gph-color{ opacity:1; transform:scale(1.045); }
.gph .cap{
  position:absolute; left:0; right:0; bottom:0; padding:6px 9px;
  font-family:var(--font-mono); font-size:10.5px; color:#fff; letter-spacing:.03em;
  background:linear-gradient(0deg, rgba(0,0,0,.62), transparent);
}

/* flagship / hero gallery (Othaim) */
.flagship-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:10px; }
.flagship-grid .big{ grid-row:span 2; }
@media (max-width:760px){ .flagship-grid{ grid-template-columns:1fr; } .flagship-grid .big{ grid-row:auto; } }
.flagship-grid .gph{ aspect-ratio:16/10; }
.flagship-grid .big img, .flagship-grid .big .gph{ aspect-ratio:4/5; }

/* before / after */
.ba-wrap{ margin-top:10px; }
.ba-labels{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; }
@media (max-width:640px){ .ba-labels{ grid-template-columns:1fr; } }
.ba-label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:6px 10px; border-radius:6px; text-align:center; }
.ba-label.before{ background:var(--surface-3); color:var(--ink-soft); }
.ba-label.after{ background:var(--accent); color:var(--accent-ink); }
.ba-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .ba-cols{ grid-template-columns:1fr; } }
.ba-col .gallery{ grid-template-columns:repeat(2,1fr); }
.ba-col.before .gph img{ filter:grayscale(.55) contrast(.96) brightness(.97); }
.ba-col.before .gph:hover img{ filter:grayscale(.15) contrast(1) brightness(1); }

/* additional projects compact row */
.mini-projects{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
@media (max-width:760px){ .mini-projects{ grid-template-columns:1fr; } }
.mini-proj{
  border:1px solid var(--line); border-radius:8px; padding:14px 16px; background:var(--surface);
  transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.mini-proj:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 0 24px -6px rgba(var(--accent-rgb),.45), var(--shadow); }
.mini-proj .mp-name{ font-weight:700; font-size:14.5px; }
.mini-proj .mp-loc{ font-size:12px; color:var(--ink-faint); margin:2px 0 8px; }
.mini-proj .mp-val{ font-family:var(--font-mono); color:var(--accent); font-weight:700; font-size:14px; }
.mini-proj .mp-dates{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-top:2px; }

/* early career / education */
.closing{ background:var(--surface-2); padding:52px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.closing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:760px){ .closing-grid{ grid-template-columns:1fr; } }
.closing h3{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:14px; letter-spacing:.08em; margin:0 0 12px; color:var(--accent); }
.closing .item{ margin-bottom:10px; font-size:14px; }
.closing .item .t1{ font-weight:700; }
.closing .item .t2{ color:var(--ink-faint); font-size:12.5px; font-family:var(--font-mono); }

/* footer */
footer{ position:relative; overflow:hidden; background:#0f1319; color:#e9ebee; padding:52px 0 34px; }
footer::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url('img/footer-bg.jpg');
  background-size:cover; background-position:center 40%;
  opacity:.08; mix-blend-mode:screen; pointer-events:none;
}
footer .wrap{ position:relative; z-index:1; }
footer .foot-grid{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
footer h2{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:clamp(24px,3.4vw,34px); margin:6px 0 14px; }
footer .foot-note{ color:#8b939c; font-size:12.5px; margin-top:26px; font-family:var(--font-mono); }
.btn-primary{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent-on-dark); color:#1a1206;
  padding:13px 22px; border-radius:8px; text-decoration:none; font-weight:700; font-size:14.5px;
  box-shadow:var(--shadow);
  transition:box-shadow .3s ease, transform .3s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 26px -2px rgba(var(--accent-on-dark-rgb),.7), var(--shadow); }

.section-pad{ padding:0; }