/* ============================================================
   PATHWAY DESIGN STUDIO — Design System
   Ink / Stone Paper / Slate / Clay — Archivo + Inter + JetBrains Mono
   ============================================================ */

:root{
  --ink:#14161A;
  --ink-70:rgba(20,22,26,.7);
  --ink-45:rgba(20,22,26,.45);
  --paper:#F6F5F2;
  --paper-dim:#EFEDE7;
  --panel:#FFFFFF;
  --slate:#56606B;
  --slate-light:#8C93A0;
  --line:#DAD7CF;
  --line-strong:#C7C3B8;
  --clay:#B1502E;
  --clay-dark:#8F3E22;
  --clay-tint:#F3E4DD;

  --font-display:'Archivo', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --container:1280px;
  --gutter:clamp(20px, 5vw, 64px);

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}

::selection{background:var(--clay);color:#fff;}

:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  border:1.5px solid var(--clay);
  border-radius:1px;
  transform:rotate(45deg);
  flex:none;
}
.eyebrow.light{color:var(--paper);}
.eyebrow.light::before{border-color:var(--paper);}
.eyebrow.slate{color:var(--slate);}
.eyebrow.slate::before{border-color:var(--slate);}

.h-display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:.98;
  text-transform:uppercase;
}
.h-xl{font-size:clamp(42px,7.2vw,104px);}
.h-lg{font-size:clamp(34px,5vw,64px);}
.h-md{font-size:clamp(26px,3.4vw,40px);}
.h-sm{font-size:clamp(20px,2.4vw,28px); text-transform:none; font-weight:700; letter-spacing:-.005em;}

.body-lg{font-size:clamp(17px,1.6vw,20px); line-height:1.65; color:var(--slate);}
.body-md{font-size:16px; line-height:1.7; color:var(--slate);}

.coord{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--slate-light);
}

/* ---------- Bearing / crosshair mark (signature element) ---------- */
.bearing{
  position:relative;
  width:34px;height:34px;
  flex:none;
}
.bearing::before,.bearing::after{
  content:"";
  position:absolute;
  background:currentColor;
}
.bearing::before{ /* vertical */
  left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%);
}
.bearing::after{ /* horizontal */
  top:50%; left:0; right:0; height:1px; transform:translateY(-50%);
}
.bearing i{
  position:absolute; inset:0;
  border:1px solid currentColor;
  border-radius:50%;
}

.sheet-index{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--slate-light);
  letter-spacing:.08em;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--ink); color:var(--paper); transform:translateY(-1px);}
.btn.filled{background:var(--ink); color:var(--paper);}
.btn.filled:hover{background:var(--clay); border-color:var(--clay); color:#fff;}
.btn.clay{border-color:var(--clay); color:var(--clay);}
.btn.clay:hover{background:var(--clay); color:#fff;}
.btn.on-dark{border-color:rgba(246,245,242,.5); color:var(--paper);}
.btn.on-dark:hover{background:var(--paper); color:var(--ink);}
.btn svg{width:14px;height:14px;transition:transform .25s var(--ease);}
.btn:hover svg{transform:translate(3px,-3px);}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,245,242,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:38px; width:auto;}
.brand-word{font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:.02em; text-transform:uppercase; line-height:1.1;}
.brand-word span{display:block; font-family:var(--font-mono); font-weight:400; font-size:9.5px; letter-spacing:.16em; color:var(--slate); text-transform:uppercase; margin-top:2px;}

.nav-links{
  display:flex; align-items:center; gap:0;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.nav-links li{display:flex; align-items:center;}
.nav-links li:not(:last-child)::after{
  content:"·"; color:var(--line-strong); margin:0 16px; font-size:14px;
}
.nav-links a{
  color:var(--slate); padding:6px 0; position:relative;
  transition:color .2s var(--ease);
}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--clay);
}

.header-actions{display:flex; align-items:center; gap:18px;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
.burger span{width:22px; height:1.5px; background:var(--ink); display:block;}

.mobile-nav{
  display:none;
  position:fixed; inset:84px 0 0 0; z-index:99;
  background:var(--paper);
  padding:32px var(--gutter);
  overflow-y:auto;
}
.mobile-nav.open{display:block;}
.mobile-nav ul{display:flex; flex-direction:column; gap:0;}
.mobile-nav a{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:28px; padding:16px 0; border-bottom:1px solid var(--line); display:block;
}
.mobile-nav .btn{margin-top:28px;}

@media (max-width:900px){
  .nav-links{display:none;}
  .header-actions .btn{display:none;}
  .burger{display:flex;}
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:var(--paper);
  padding:88px 0 0;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:64px;
  border-bottom:1px solid rgba(246,245,242,.14);
}
.footer-brand .brand{margin-bottom:20px;}
.footer-brand img{height:40px;}
.footer-brand p{color:rgba(246,245,242,.6); font-size:14.5px; max-width:320px; line-height:1.7;}
.footer-col h4{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(246,245,242,.45); margin-bottom:18px;
}
.footer-col a, .footer-col p{
  display:block; color:rgba(246,245,242,.85); font-size:15px; margin-bottom:12px; line-height:1.6;
  transition:color .2s var(--ease);
}
.footer-col a:hover{color:var(--clay);}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 0; gap:16px; flex-wrap:wrap;
}
.footer-bottom p{color:rgba(246,245,242,.4); font-size:12.5px; font-family:var(--font-mono); letter-spacing:.03em;}
.footer-compass{color:rgba(246,245,242,.3);}

/* ---------- Section scaffolding ---------- */
.section{padding:110px 0;}
.section.tight{padding:72px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:56px; flex-wrap:wrap;
}
.section-head .h-lg{max-width:640px;}
.section-head .body-lg{max-width:420px;}
.section.on-dark{background:var(--ink); color:var(--paper);}
.section.on-dark .body-lg, .section.on-dark .body-md{color:rgba(246,245,242,.62);}
.section.on-panel{background:var(--panel);}
.divider{height:1px; background:var(--line); border:none; margin:0;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top:64px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:end;
  padding-bottom:56px;
}
.hero-copy .eyebrow{margin-bottom:22px;}
.hero-copy .h-xl{margin-bottom:26px;}
.hero-stats{
  display:flex; flex-direction:column; gap:22px;
  border-left:1px solid var(--line); padding-left:28px;
}
.stat-num{font-family:var(--font-display); font-weight:800; font-size:34px; line-height:1;}
.stat-label{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-top:6px;}
.hero-actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}

.hero-frame{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:16/9.4;
}
.hero-frame img{width:100%; height:100%; object-fit:cover;}
.hero-frame .frame-tag{
  position:absolute; left:20px; bottom:20px;
  background:rgba(20,22,26,.72);
  backdrop-filter:blur(6px);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  padding:9px 14px;
  border-radius:3px;
  display:flex; align-items:center; gap:8px;
}
.hero-frame .frame-mark{
  position:absolute; top:20px; right:20px;
  color:#fff;
}
.hero-below{
  border-top:1px solid var(--line);
  padding:26px 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.marquee-line{
  font-family:var(--font-mono); font-size:12.5px; color:var(--slate); letter-spacing:.04em;
  display:flex; gap:36px; flex-wrap:wrap;
}

/* ---------- Feature rows (alternating, echoes reference cards) ---------- */
.row-list{border-top:1px solid var(--line);}
.row-item{
  border-bottom:1px solid var(--line);
  padding:36px 0;
  display:grid;
  grid-template-columns:70px 1fr auto;
  align-items:center;
  gap:28px;
  transition:background .25s var(--ease), padding-left .25s var(--ease), color .25s var(--ease);
  cursor:default;
}
.row-item:hover{background:var(--ink); color:var(--paper); padding-left:24px; padding-right:24px;}
.row-item:hover .row-desc{color:rgba(246,245,242,.65);}
.row-item:hover .row-index{color:var(--clay);}
.row-index{font-family:var(--font-mono); font-size:13px; color:var(--slate-light); letter-spacing:.05em;}
.row-title{font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.6vw,30px); text-transform:uppercase;}
.row-desc{color:var(--slate); font-size:14.5px; max-width:460px; margin-top:6px; transition:color .25s var(--ease);}
.row-arrow{
  width:38px;height:38px; border-radius:50%; border:1px solid currentColor;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.row-arrow svg{width:15px;height:15px;}

/* ---------- Cards ---------- */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);}
.info-card{background:var(--paper); padding:36px 30px;}
.info-card .h-sm{margin-bottom:14px;}
.info-card p{color:var(--slate); font-size:14.5px; line-height:1.65;}

/* ---------- Project grid ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:28px 0; border-bottom:1px solid var(--line); margin-bottom:44px;
}
.filter-btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 18px; border-radius:999px; border:1px solid var(--line-strong); background:transparent; color:var(--slate);
  transition:all .2s var(--ease);
}
.filter-btn:hover{border-color:var(--ink); color:var(--ink);}
.filter-btn.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}

.project-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.project-card{
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.project-card:hover{transform:translateY(-5px); box-shadow:0 24px 48px rgba(20,22,26,.12);}
.project-thumb{position:relative; aspect-ratio:4/3.1; overflow:hidden;}
.project-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.project-card:hover .project-thumb img{transform:scale(1.06);}
.status-pill{
  position:absolute; top:14px; left:14px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; background:rgba(20,22,26,.75); color:#fff; backdrop-filter:blur(4px);
}
.status-pill.completed{background:rgba(177,80,46,.88);}
.project-thumb.placeholder{
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(20,22,26,.035) 12px 24px),
    var(--paper-dim);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  border-bottom:1px dashed var(--line-strong);
}
.project-thumb.placeholder .bearing{color:var(--slate-light); width:30px; height:30px;}
.project-thumb.placeholder .ph-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate-light);
}
.project-body{padding:22px 22px 26px;}
.project-cat{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--clay); margin-bottom:8px;}
.project-name{font-family:var(--font-display); font-weight:700; font-size:19px; text-transform:uppercase; margin-bottom:8px;}
.project-meta{font-size:13.5px; color:var(--slate); display:flex; flex-direction:column; gap:3px;}
.project-meta span{font-family:var(--font-mono); font-size:12px;}

/* ---------- Split section ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split img{border-radius:4px; width:100%;}
.split .body-lg{margin-top:20px;}
.split-media{position:relative;}
.split-media .coord-tag{
  position:absolute; bottom:18px; left:18px;
  background:rgba(20,22,26,.72); color:#fff; font-family:var(--font-mono); font-size:11px;
  padding:8px 12px; border-radius:3px; letter-spacing:.04em;
}

/* ---------- Timeline (for about) ---------- */
.timeline{border-top:1px solid var(--line);}
.timeline-item{
  display:grid; grid-template-columns:120px 1fr; gap:32px;
  padding:30px 0; border-bottom:1px solid var(--line);
}
.timeline-year{font-family:var(--font-mono); font-size:14px; color:var(--clay); letter-spacing:.05em;}
.timeline-item h4{font-family:var(--font-display); font-weight:700; font-size:19px; text-transform:uppercase; margin-bottom:8px;}
.timeline-item p{color:var(--slate); font-size:14.5px; max-width:560px;}

/* ---------- Team ---------- */
.team-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.team-card{border:1px solid var(--line); background:var(--panel); overflow:hidden;}
.team-photo{position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--paper-dim);}
.team-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.team-photo .bearing{position:absolute; top:18px; right:18px; color:rgba(255,255,255,.85);}
.team-body{padding:36px 40px 40px;}
.team-role{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--clay); margin-bottom:10px;}
.team-name{font-family:var(--font-display); font-weight:800; font-size:26px; text-transform:uppercase; margin-bottom:18px;}
.team-card p{color:var(--slate); font-size:15px; line-height:1.75;}

/* ---------- Stats strip ---------- */
.stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(246,245,242,.14);
  border-bottom:1px solid rgba(246,245,242,.14);
}
.stats-strip .stat{
  padding:44px 28px;
  border-left:1px solid rgba(246,245,242,.14);
}
.stats-strip .stat:first-child{border-left:none;}
.stats-strip .stat-num{font-size:44px; color:var(--paper);}
.stats-strip .stat-label{color:rgba(246,245,242,.5);}

/* ---------- Forms ---------- */
.form-grid{display:grid; gap:22px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
}
.field input, .field textarea{
  border:none; border-bottom:1px solid var(--line-strong);
  background:transparent; padding:12px 2px; font-size:16px; color:var(--ink);
  transition:border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus{border-color:var(--clay); outline:none;}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:12.5px; color:var(--slate-light); margin-top:10px;}
.form-status{font-family:var(--font-mono); font-size:13px; margin-top:14px; display:none;}
.form-status.show{display:block;}
.form-status.ok{color:#2E7D4F;}
.form-status.err{color:var(--clay-dark);}

.contact-info-list{display:flex; flex-direction:column; gap:28px;}
.contact-info-item{display:flex; gap:18px; align-items:flex-start;}
.contact-info-item .ico{
  width:44px;height:44px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-info-item .ico svg{width:18px;height:18px;}
.contact-info-item h4{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-bottom:6px;}
.contact-info-item p, .contact-info-item a{font-size:16px; display:block;}
.contact-info-item a:hover{color:var(--clay);}

.map-frame{
  width:100%; height:340px; border:1px solid var(--line); border-radius:4px; overflow:hidden; filter:grayscale(.35) contrast(1.05);
}
.map-frame iframe{width:100%; height:100%; border:0;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--ink); color:var(--paper);
  padding:96px 0; text-align:center; position:relative; overflow:hidden;
}
.cta-banner .h-lg{max-width:760px; margin:0 auto 30px;}
.cta-banner .bearing{margin:0 auto 30px; color:rgba(246,245,242,.5);}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:64px 0 70px; border-bottom:1px solid var(--line);}
.page-hero .eyebrow{margin-bottom:20px;}
.page-hero .h-xl{margin-bottom:0;}
.page-hero .body-lg{margin-top:22px; max-width:620px;}
.crumb{font-family:var(--font-mono); font-size:12px; color:var(--slate-light); margin-bottom:16px; letter-spacing:.04em;}
.crumb a:hover{color:var(--clay);}

/* ---------- Career ---------- */
.career-hero-card{
  background:var(--ink); color:var(--paper); padding:64px 56px; border-radius:6px;
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.perk-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-top:2px;}
.perk-card{background:var(--panel); padding:36px 30px;}

/* ---------- Values grid (services) ---------- */
.value-num{font-family:var(--font-mono); font-size:13px; color:var(--clay);}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0;}
.center{text-align:center;}
.mx-auto{margin-left:auto; margin-right:auto;}

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{opacity:1; transform:none;}
[data-reveal="stagger"] > *{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
[data-reveal="stagger"].is-visible > *{opacity:1; transform:none;}
[data-reveal="stagger"].is-visible > *:nth-child(1){transition-delay:.02s;}
[data-reveal="stagger"].is-visible > *:nth-child(2){transition-delay:.08s;}
[data-reveal="stagger"].is-visible > *:nth-child(3){transition-delay:.14s;}
[data-reveal="stagger"].is-visible > *:nth-child(4){transition-delay:.2s;}
[data-reveal="stagger"].is-visible > *:nth-child(5){transition-delay:.26s;}
[data-reveal="stagger"].is-visible > *:nth-child(6){transition-delay:.32s;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .footer-top{grid-template-columns:1fr 1fr; row-gap:44px;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .project-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:1fr;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .stats-strip .stat:nth-child(3){border-left:none;}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-stats{flex-direction:row; border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:22px; flex-wrap:wrap;}
  .split{grid-template-columns:1fr;}
  .row-item{grid-template-columns:40px 1fr auto;}
}
@media (max-width:700px){
  .section{padding:72px 0;}
  .card-grid, .project-grid, .perk-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .section-head{flex-direction:column; align-items:flex-start;}
  .career-hero-card{flex-direction:column; align-items:flex-start; padding:44px 28px;}
}