:root{
  --ink:#14161a;
  --ink-2:#1c1f24;
  --ink-3:#24272d;
  --paper:#eee6d6;
  --paper-2:#e4d9c3;
  --paper-line: rgba(20,17,12,0.14);
  --dark-line: rgba(243,239,230,0.14);
  --clay:#bd5b34;
  --clay-deep:#8f4526;
  --indigo:#2c3184;
  --cream:#f4efe3;
  --cream-dim: rgba(244,239,227,0.62);
  --sand-ink:#211d16;
  --sand-dim: rgba(33,29,22,0.62);
  --maxw: 1320px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Archivo', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
@media (max-width:720px){ .wrap{padding:0 22px;} }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:currentColor;
  opacity:0.6;
  display:inline-block;
}

h1,h2,h3{margin:0; font-weight:500;}

/* ---------- NAV ---------- */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  transition:background 0.4s ease, padding 0.4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.site-nav.solid{
  background:rgba(20,22,26,0.9);
  backdrop-filter:blur(10px);
  padding:14px 40px;
  border-bottom:1px solid var(--dark-line);
}
header.site-nav.on-light{
  background:rgba(238,230,214,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--paper-line);
}
@media (max-width:720px){
  header.site-nav, header.site-nav.solid{padding:16px 22px;}
}

.logo-mark{
  display:flex; align-items:center;
  text-decoration:none;
}
.logo-mark img{
  height:26px; width:auto; display:block;
  transition:opacity .25s ease;
}
.logo-mark:hover img{opacity:0.82;}
@media (max-width:480px){ .logo-mark img{height:21px;} }

nav.primary-links{
  display:flex; gap:30px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
nav.primary-links a{
  text-decoration:none; color:var(--cream-dim);
  position:relative; padding-bottom:3px;
  transition:color .25s ease;
}
header.site-nav.on-light nav.primary-links a{color:var(--sand-dim);}
nav.primary-links a:hover, nav.primary-links a:focus-visible{color:var(--cream);}
header.site-nav.on-light nav.primary-links a:hover{color:var(--sand-ink);}
nav.primary-links a.active{color:var(--clay);}
nav.primary-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--clay); transition:width .25s ease;
}
nav.primary-links a:hover::after{width:100%;}
@media (max-width:900px){ nav.primary-links{display:none;} }

.nav-cta{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--dark-line); padding:9px 16px;
  text-decoration:none; color:var(--cream);
  transition:border-color .25s ease, background .25s ease;
}
header.site-nav.on-light .nav-cta{border-color:var(--paper-line); color:var(--sand-ink);}
.nav-cta:hover{border-color:var(--clay); background:rgba(189,91,52,0.12);}
@media (max-width:820px){ .nav-cta{display:none;} }

/* ---------- HERO (home) ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 30%;
  filter:saturate(0.92) contrast(1.03);
  transform:scale(1.06);
}
.hero-slide{
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.is-active{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .hero-slide{ transition:none; }
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,15,18,0.55) 0%, rgba(14,15,18,0.15) 30%, rgba(14,15,18,0.35) 62%, rgba(14,15,18,0.96) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding:0 40px 64px;
  max-width:var(--maxw); margin:0 auto; width:100%;
}
@media (max-width:720px){ .hero-inner{padding:0 22px 44px;} }

.hero-eyebrow{color:var(--cream); opacity:0.85; margin-bottom:22px;}

.hero h1{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(40px, 7vw, 92px);
  line-height:1.02;
  letter-spacing:-0.015em;
  max-width:15ch;
  color:var(--cream);
}
.hero h1 em{ font-style:italic; font-weight:400; color:var(--clay); }

.hero-foot{
  margin-top:34px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.hero-desc{ max-width:44ch; font-size:16px; line-height:1.6; color:var(--cream-dim); }
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  padding:14px 22px;
  border:1px solid var(--dark-line);
  color:var(--cream);
  transition:all .25s ease;
  white-space:nowrap;
}
.btn.primary{background:var(--clay); border-color:var(--clay); color:#150c07;}
.btn.primary:hover{background:#d97142; border-color:#d97142;}
.btn.ghost:hover{border-color:var(--cream); background:rgba(244,239,227,0.06);}
.on-paper .btn.ghost{border-color:var(--paper-line); color:var(--sand-ink);}
.on-paper .btn.ghost:hover{border-color:var(--sand-ink); background:rgba(33,29,22,0.06);}

/* ---------- CATEGORY (sub) HERO ---------- */
.cat-hero{
  position:relative;
  min-height:64svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.cat-hero-inner{
  position:relative; z-index:2; width:100%;
  padding:150px 0 56px;
}
/* On narrow viewports, the wide crowd illustration gets cropped hard by cover-fit;
   re-center on the red figures (~77%, 11% in the source image) so they stay visible. */
@media (max-width:720px){
  .hero-media--who{ background-position:77% 11% !important; }
}
.cat-hero .eyebrow{color:var(--cream); opacity:.85; margin-bottom:20px;}
.cat-hero h1{
  font-family:'Fraunces', serif; font-weight:400;
  font-size:clamp(34px,5.6vw,68px); color:var(--cream);
  max-width:16ch; letter-spacing:-0.01em;
}
.cat-hero p{
  margin-top:20px; max-width:56ch; color:var(--cream-dim);
  font-size:16px; line-height:1.75;
}

.cat-switch{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:34px;
}
.cat-pill{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--dark-line); padding:9px 14px;
  text-decoration:none; color:var(--cream-dim);
  transition:all .25s ease;
}
.cat-pill:hover{border-color:var(--clay); color:var(--cream);}
.cat-pill.active{background:var(--clay); border-color:var(--clay); color:#150c07;}

/* ---------- SECTION GENERIC ---------- */
section{position:relative;}
.section-pad{padding:150px 0;}
@media (max-width:720px){ .section-pad{padding:88px 0;} }

.on-paper{background:var(--paper); color:var(--sand-ink);}
.on-paper .eyebrow{color:var(--clay-deep);}

.rule{border:none; border-top:1px solid var(--dark-line); margin:0;}
.on-paper .rule{border-top:1px solid var(--paper-line);}

/* ---------- BRAND STRIPE (signature mark, echoes logo underline) ---------- */
.brand-stripe{
  display:flex; height:3px; width:72px; margin:22px 0 0;
}
.brand-stripe span{flex:1;}
.brand-stripe span:nth-child(1){background:#eab04a;}
.brand-stripe span:nth-child(2){background:#a4342c;}
.brand-stripe span:nth-child(3){background:#15171b;}

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:80px; margin-top:54px; }
@media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:44px;} }

.about-head h2{
  font-family:'Fraunces', serif; font-weight:400; font-size:clamp(32px,4.6vw,58px);
  line-height:1.06; letter-spacing:-0.01em;
}
.about-copy p{ font-size:17px; line-height:1.85; color:var(--sand-dim); margin:0 0 20px; max-width:56ch; }
.about-copy p:last-child{margin-bottom:0;}

.pillars{
  margin-top:80px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--paper-line);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
@media (max-width:820px){ .pillars{grid-template-columns:1fr;} }
.pillar{ background:var(--paper); padding:42px 34px; transition:background .3s ease; }
.pillar:hover{ background:#f4eeE1; }
.pillar .num{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--clay-deep); margin-bottom:24px; display:block; }
.pillar h3{ font-family:'Fraunces', serif; font-size:22px; font-weight:500; line-height:1.28; margin-bottom:16px; }
.pillar p{ font-size:14.5px; line-height:1.7; color:var(--sand-dim); margin:0; }

/* ---------- STRIP ---------- */
.strip{
  background:var(--ink-2);
  border-top:1px solid var(--dark-line);
  border-bottom:1px solid var(--dark-line);
  padding:52px 0;
}
.strip.indigo{
  background:var(--indigo);
  border-top:1px solid rgba(244,239,227,0.16);
  border-bottom:1px solid rgba(244,239,227,0.16);
}
.strip.paper{
  background:var(--paper-2);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
.strip.paper .stat span{ color:var(--sand-dim); }
.strip-inner{ display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.caps{display:flex; flex-wrap:wrap; gap:12px;}
.cap-chip{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.04em;
  text-transform:uppercase; border:1px solid var(--dark-line); padding:9px 15px; color:var(--cream-dim);
}
.stats{display:flex; gap:46px; flex-wrap:wrap;}
.stat b{ display:block; font-family:'Fraunces', serif; font-weight:400; font-size:34px; color:var(--clay); }
.stat span{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim); }
.strip.indigo .stat span{ color:rgba(244,239,227,0.72); }

/* ---------- CATEGORY TILES (home) ---------- */
.cat-grid{
  margin-top:54px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  background:var(--paper-line);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
@media (max-width:820px){ .cat-grid{grid-template-columns:1fr;} }
.cat-tile{
  background:var(--paper);
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  position:relative; overflow:visible;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, z-index 0s;
}
.cat-tile:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px -18px rgba(20,17,12,0.35);
  z-index:2;
}
.cat-tile-media{ position:relative; height:340px; overflow:hidden; }
@media (max-width:720px){ .cat-tile-media{height:260px;} }
.cat-tile-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.cat-tile:hover .cat-tile-media img{ transform:scale(1.06); }
.cat-tile-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,12,0) 40%, rgba(20,17,12,0.6) 100%);
}
.cat-tile-num{
  position:absolute; top:20px; left:20px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--cream); letter-spacing:.08em;
}
.cat-tile-tag{
  position:absolute; bottom:18px; left:20px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(244,239,227,0.82);
}
.cat-tile-body{ padding:30px 32px 38px; }
.cat-tile-body h3{
  font-family:'Fraunces', serif; font-weight:500; font-size:28px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cat-tile-body h3 .arrow{ font-family:'IBM Plex Mono', monospace; font-size:16px; color:var(--clay-deep); transition:transform .3s ease; }
.cat-tile:hover .arrow{ transform:translateX(6px); }
.cat-tile-body p{ font-size:14.5px; line-height:1.7; color:var(--sand-dim); margin:0 0 16px; }
.cat-tile-body .count{
  font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--clay-deep);
}

/* ---------- PROJECT DETAIL SECTIONS ---------- */
.project{ padding:100px 0; border-bottom:1px solid var(--paper-line); }
.project:last-child{border-bottom:none;}
.project-top{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;
  margin-bottom:40px;
}
.project-num{font-family:'Fraunces', serif; font-size:15px; color:var(--clay-deep); font-style:italic;}
.project-title{
  font-family:'Fraunces', serif; font-weight:400; font-size:clamp(32px,5vw,58px);
  letter-spacing:-0.01em; margin-top:8px;
}
.project-loc{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--sand-dim); text-align:right;
}

.project-body{ display:grid; grid-template-columns: 1.35fr 0.9fr; gap:56px; align-items:start; }
@media (max-width:900px){ .project-body{grid-template-columns:1fr; gap:32px;} }
.project.reverse .project-body{grid-template-columns: 0.9fr 1.35fr;}
@media (max-width:900px){ .project.reverse .project-body{grid-template-columns:1fr;} }
.project.reverse .project-figure{order:2;}
@media (max-width:900px){ .project.reverse .project-figure{order:0;} }

.project-figure{position:relative; overflow:hidden; background:var(--paper-2); transition:box-shadow .35s ease;}
.project-figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1); }

/* Test: shrink-to-fit instead of crop, for tall/portrait photos */
.project-figure.fit-contain{ height:640px; }
.project-figure.fit-contain img{ object-fit:contain; background:var(--paper-2); }
@media (max-width:900px){ .project-figure.fit-contain{ height:440px; } }
.project-figure:hover{ box-shadow:0 26px 50px -20px rgba(20,17,12,0.4); }
.project-figure:hover img{transform:scale(1.045);}

.step{background:var(--ink); padding:34px 28px 40px; transition:background .3s ease;}
.step:hover{background:var(--ink-2);}
.step .snum{ font-family:'Fraunces', serif; font-style:italic; color:var(--clay); font-size:15px; }
.step h3{ font-family:'Fraunces', serif; font-weight:500; font-size:22px; margin-top:18px; margin-bottom:13px; }
.step p{font-size:14px; line-height:1.65; color:var(--cream-dim); margin:0;}

/* ---------- NEXT CATEGORY CTA ---------- */
.next-cat{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:22px 0; border-top:1px solid var(--paper-line);
  text-decoration:none; color:inherit;
  transition:padding-left .3s ease, background .3s ease;
}
.next-cat:hover{ padding-left:12px; background:rgba(189,91,52,0.06); }
.next-cat .nc-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-deep);
  display:block; margin-bottom:8px;
}
.next-cat .nc-name{
  font-family:'Fraunces', serif; font-size:clamp(24px,3.4vw,36px); font-weight:500;
}
.next-cat .nc-arrow{
  font-family:'IBM Plex Mono', monospace; font-size:22px; color:var(--clay-deep); transition:transform .3s ease;
}
.next-cat:hover .nc-arrow{ transform:translateX(8px); }

.titleblock{ font-family:'IBM Plex Mono', monospace; font-size:12px; display:grid; grid-template-columns:1fr; border-top:1px solid var(--paper-line); }
.titleblock .tb-row{ display:grid; grid-template-columns:118px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--paper-line); }
.titleblock .tb-label{color:var(--clay-deep); text-transform:uppercase; letter-spacing:.06em;}
.titleblock .tb-val{color:var(--sand-ink);}

.project-desc{ margin-top:26px; font-size:15px; line-height:1.75; color:var(--sand-dim); }
.project-desc p{margin:0 0 14px;}
.project-desc p:last-child{margin-bottom:0;}

/* ---------- WORK INDEX (home compact) ---------- */
.work-head{padding-top:150px; padding-bottom:0;}
@media (max-width:720px){ .work-head{padding-top:88px;} }
.work-head h2{
  font-family:'Fraunces', serif; font-weight:400; font-size:clamp(36px,5.8vw,72px);
  max-width:16ch; letter-spacing:-0.01em; margin-top:24px;
}
.work-head .sub{ margin-top:24px; max-width:56ch; color:var(--sand-dim); font-size:16.5px; line-height:1.75; }

/* ---------- APPROACH ---------- */
.approach{
  background:var(--ink);
  background-image:
    linear-gradient(180deg, rgba(20,22,26,0.94), rgba(20,22,26,0.98)),
    url('../images/topo-texture.jpg');
  background-size:cover; background-position:center;
}
.approach-head{max-width:60ch;}
.approach-head h2{
  font-family:'Fraunces', serif; font-weight:400; font-size:clamp(30px,4.2vw,54px);
  margin-top:20px; letter-spacing:-0.01em;
}
.approach-head p{color:var(--cream-dim); font-size:16px; line-height:1.7; margin-top:18px;}

.steps{
  margin-top:64px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--dark-line);
  border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line);
}
@media (max-width:900px){ .steps{grid-template-columns:1fr; }}

/* ---------- CONTACT ---------- */
.contact{ background:var(--paper); color:var(--sand-ink); }
.contact-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:50px; align-items:start; }
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:32px;} }
.contact h2{
  font-family:'Fraunces', serif; font-weight:400; font-size:clamp(30px,4.4vw,54px);
  line-height:1.05; letter-spacing:-0.01em; margin-top:0;
}
.contact h2 a{ color:var(--clay-deep); text-decoration:none; border-bottom:2px solid currentColor; transition:opacity .25s ease; }
.contact h2 a:hover{opacity:0.7;}

.contact-info{font-family:'IBM Plex Mono', monospace; font-size:13px; line-height:1.6; color:var(--sand-dim);}
.contact-info .lbl{color:var(--clay-deep); text-transform:uppercase; letter-spacing:.08em; font-size:11px; display:block; margin-top:13px; margin-bottom:2px;}
.contact-info .lbl:first-child{margin-top:0;}
.contact-info a{color:var(--sand-ink); text-decoration:none;}
.contact-info a:hover{text-decoration:underline;}

.map-frame{
  margin-top:22px;
  border:1px solid var(--paper-line);
  overflow:hidden;
  position:relative;
}
.map-frame iframe{
  display:block; width:100%; height:220px; border:0;
  filter:grayscale(35%) sepia(8%) saturate(85%);
  transition:filter .3s ease;
}
.map-frame:hover iframe{ filter:grayscale(0%) sepia(0%) saturate(100%); }

footer.site-footer{
  padding:6px 0 10px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--sand-dim);
}

/* ---------- MOBILE MENU ---------- */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
  position:relative; z-index:120;
}
.menu-toggle span{
  display:block; height:2px; background:var(--cream); border-radius:1px;
  transition:transform .3s ease, opacity .3s ease, width .3s ease, background .3s ease;
}
.menu-toggle span:nth-child(1){width:26px;}
.menu-toggle span:nth-child(2){width:20px;}
.menu-toggle span:nth-child(3){width:26px;}
.menu-toggle:hover span{width:26px;}
header.site-nav.on-light .menu-toggle span{background:var(--sand-ink);}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg); width:26px;}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg); width:26px;}

@media (max-width:900px){ .menu-toggle{display:flex;} }

.menu-scrim{
  position:fixed; inset:0; background:rgba(10,11,13,0.55); z-index:108;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.menu-scrim.open{opacity:1; pointer-events:auto;}

.mobile-menu{
  position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
  background:var(--ink-2); border-left:1px solid var(--dark-line);
  display:flex; flex-direction:column; gap:2px; padding:110px 30px 30px;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
  z-index:109;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{
  font-family:'IBM Plex Mono', monospace; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none; padding:17px 0; border-bottom:1px solid var(--dark-line);
  transition:color .25s ease, padding-left .25s ease;
}
.mobile-menu a:hover{color:var(--cream); padding-left:6px;}
.mobile-menu a.active{color:var(--clay);}
@media (min-width:901px){ .mobile-menu, .menu-scrim{display:none;} }

/* ---------- SCROLL INDEX (home only) ---------- */
.scroll-index{
  position:fixed; right:26px; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:9px;
  font-family:'IBM Plex Mono', monospace; font-size:10px;
}
.scroll-index a{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--dark-line);
  display:block; text-indent:-9999px;
  transition:all .3s ease;
}
.scroll-index a.active{background:var(--clay); border-color:var(--clay); width:9px; height:22px; border-radius:5px;}
@media (max-width:1080px){ .scroll-index{display:none;} }

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
/* Fail-safe: if JS never runs (blocked, failed to load, etc.), CSS alone
   still reveals everything after a short delay so content is never stuck invisible. */
@keyframes forceReveal{ to{ opacity:1; transform:translateY(0); } }
.reveal{ animation:forceReveal 0.01s linear 4s forwards; }

/* ---------- TEAM GRID ---------- */
.team-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
@media (max-width:820px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .team-grid{grid-template-columns:1fr;} }

.team-card{ background:var(--paper); cursor:pointer; }
.team-photo{
  position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--paper-line);
  transition:box-shadow .3s ease;
}
.team-card:hover .team-photo{ box-shadow:0 20px 40px -18px rgba(20,17,12,0.35); }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.team-card:hover .team-photo img{ transform:scale(1.045); }
.team-photo .initials{
  font-family:'Fraunces', serif; font-weight:400; font-size:52px; color:var(--clay-deep); opacity:0.55;
  letter-spacing:0.02em;
}
.team-info{ padding:20px 6px 30px; }
.team-name{ font-family:'Fraunces', serif; font-weight:500; font-size:19px; letter-spacing:-0.005em; }
.team-role{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--clay-deep); margin-top:8px;
}

/* ---------- TEAM BIO MODAL ---------- */
.team-modal-scrim{
  position:fixed; inset:0; z-index:300;
  background:rgba(20,17,12,0.55);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.team-modal-scrim.open{ opacity:1; pointer-events:auto; }
.team-modal{
  background:var(--paper); max-width:640px; width:100%; max-height:86vh; overflow-y:auto;
  border:1px solid var(--paper-line);
  display:grid; grid-template-columns:180px 1fr;
  position:relative;
  transform:translateY(16px); transition:transform .3s ease;
}
.team-modal-scrim.open .team-modal{ transform:translateY(0); }
@media (max-width:560px){ .team-modal{ grid-template-columns:1fr; } }
.team-modal-photo{ aspect-ratio:1/1; overflow:hidden; background:var(--paper-2); }
.team-modal-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-modal-body{ padding:32px 32px 36px; }
.team-modal-name{ font-family:'Fraunces', serif; font-weight:500; font-size:24px; letter-spacing:-0.005em; }
.team-modal-role{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--clay-deep); margin-top:8px; margin-bottom:20px;
}
.team-modal-bio p{ font-size:14px; line-height:1.75; color:var(--sand-dim); margin:0 0 14px; }
.team-modal-bio p:last-child{ margin-bottom:0; }
.team-modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border:1px solid var(--paper-line); background:var(--paper);
  font-size:20px; line-height:1; color:var(--sand-ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease;
}
.team-modal-close:hover{ background:var(--clay); color:var(--cream); border-color:var(--clay); }

/* ---------- QUICK ACTION CARDS ---------- */
.quick-actions{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1px;
  background:var(--paper-line); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
}
.qa-card{
  background:var(--paper); padding:32px 26px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:14px;
  transition:background .3s ease, transform .3s ease;
}
.qa-card:hover{ background:#f4eee1; transform:translateY(-3px); }
.qa-card svg{ width:26px; height:26px; stroke:var(--clay-deep); flex-shrink:0; }
.qa-card .qa-title{ font-family:'Fraunces', serif; font-weight:500; font-size:19px; }
.qa-card .qa-sub{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--sand-dim); letter-spacing:.02em; }

@media (max-width:640px){
  .quick-actions{ grid-template-columns:repeat(2,1fr); }
  .qa-card:nth-child(1){ order:1; grid-column:1 / -1; align-items:center; text-align:center; } /* Call Us — alone on row 1, centered */
  .qa-card:nth-child(3){ order:2; } /* WhatsApp — row 2 */
  .qa-card:nth-child(2){ order:3; } /* Email Us — row 2 */
  .qa-card:nth-child(4){ order:4; } /* Instagram — row 3 */
  .qa-card:nth-child(5){ order:5; } /* Facebook — row 3 */
}

/* ---------- INLINE FIGURE CAROUSEL ---------- */
.figure-carousel{ position:relative; }
.fc-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:rgba(20,17,12,0.5); border:1px solid rgba(244,239,227,0.45); color:var(--cream);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:17px; padding:0;
  transition:background .25s ease, border-color .25s ease;
}
.fc-nav:hover{ background:rgba(189,91,52,0.85); border-color:var(--clay); }
.fc-nav.prev{ left:16px; }
.fc-nav.next{ right:16px; }
.fc-nav.is-hidden{ display:none; }
@media (max-width:600px){ .fc-nav{ width:36px; height:36px; font-size:14px; } .fc-nav.prev{left:10px;} .fc-nav.next{right:10px;} }

.crumb{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sand-dim); display:flex; gap:8px; align-items:center; margin-bottom:18px;
}
.crumb a{color:var(--clay-deep); text-decoration:none;}
.crumb a:hover{text-decoration:underline;}

/* ---------- CATEGORY CONTENT BLOCKS ---------- */
.lede{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(22px,2.6vw,32px); line-height:1.5; color:var(--sand-ink);
  max-width:34ch; margin:0 0 0;
}

/* ---------- LEGAL / POLICY PAGES ---------- */
.legal-body{ max-width:72ch; }
.legal-body h2{
  font-family:'Fraunces', serif; font-weight:500; font-size:22px;
  margin:44px 0 14px; color:var(--sand-ink);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ font-size:15px; line-height:1.75; color:var(--sand-dim); margin:0 0 16px; }
.legal-body ul{ margin:0 0 16px; padding-left:20px; }
.legal-body li{ font-size:15px; line-height:1.75; color:var(--sand-dim); margin-bottom:6px; }
.legal-body a{ color:var(--clay-deep); }
.legal-updated{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sand-dim); margin-bottom:8px; display:block;
}

.block-head{ margin-bottom:40px; }
.block-head h2{
  font-family:'Fraunces', serif; font-weight:400; font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-0.01em; margin-top:18px;
}

.service-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--paper-line); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
}
@media (max-width:760px){ .service-list{grid-template-columns:1fr;} }
.service-item{ background:var(--paper); padding:32px 34px; transition:background .3s ease; }
.service-item:hover{ background:#f4eee1; }
.service-item .si-num{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--clay-deep); letter-spacing:.08em; display:block; margin-bottom:16px;
}
.service-item h3{ font-family:'Fraunces', serif; font-weight:500; font-size:20px; margin-bottom:10px; line-height:1.3; }
.service-item p{ font-size:14.5px; line-height:1.68; color:var(--sand-dim); margin:0; }
.service-list .service-item:last-child:nth-child(odd){ grid-column:1 / -1; }

.benefits-wrap{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
@media (max-width:820px){ .benefits-wrap{grid-template-columns:1fr; gap:32px;} }
.benefit-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.benefit-list li{
  display:flex; align-items:baseline; gap:14px; font-size:15.5px; line-height:1.6; color:var(--sand-ink);
  padding-bottom:16px; border-bottom:1px solid var(--paper-line);
}
.benefit-list li::before{
  content:"—"; color:var(--clay-deep); flex-shrink:0; font-family:'IBM Plex Mono', monospace;
}

.process-paper{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--paper-line); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
}
@media (max-width:900px){ .process-paper{grid-template-columns:1fr;} }
.process-paper.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .process-paper.cols-3{grid-template-columns:1fr;} }
.pp-step{ background:var(--paper); padding:32px 28px 36px; transition:background .3s ease; }
.pp-step:hover{ background:#f4eee1; }
.pp-step .pp-num{ font-family:'Fraunces', serif; font-style:italic; color:var(--clay-deep); font-size:15px; }
.pp-step h3{ font-family:'Fraunces', serif; font-weight:500; font-size:18px; margin-top:14px; margin-bottom:10px; line-height:1.3; }
.pp-step p{ font-size:13.5px; line-height:1.6; color:var(--sand-dim); margin:0; }

/* ---------- TESTIMONIALS (carousel) ---------- */
.testi-carousel{
  border:1px solid var(--paper-line);
  background:var(--paper);
  overflow:hidden;
}
.testi-track{
  display:flex;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.testi-card{
  flex:0 0 100%;
  max-width:100%;
  padding:48px 56px 40px;
  display:flex;
  flex-direction:column;
  min-height:200px;
}
@media (max-width:620px){ .testi-card{ padding:34px 24px 30px; } }
.testi-stars{
  font-size:13px;
  letter-spacing:.14em;
  color:var(--clay);
  margin-bottom:20px;
}
.testi-quote{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-style:italic;
  font-size:clamp(17px,2vw,21px);
  line-height:1.55;
  color:var(--sand-ink);
  margin:0 0 26px;
  max-width:62ch;
  flex-grow:1;
}
.testi-attr{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-top:18px;
  border-top:1px solid var(--paper-line);
}
.testi-name{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sand-ink);
}
.testi-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--sand-dim);
  white-space:nowrap;
}
.testi-tag::before{ content:"— "; }
.testi-nav{
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 56px 32px;
}
@media (max-width:620px){ .testi-nav{ padding:0 24px 26px; } }
.testi-arrow{
  width:42px; height:42px;
  border:1px solid var(--paper-line);
  background:transparent;
  color:var(--sand-ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, border-color .25s ease, opacity .25s ease;
  flex-shrink:0;
}
.testi-arrow:hover{ background:var(--clay); border-color:var(--clay); color:var(--cream); }
.testi-arrow[hidden]{ display:none; }
.testi-counter{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--sand-dim);
}

.closing-line{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(24px,3.2vw,38px); line-height:1.4; color:var(--sand-ink);
  max-width:26ch;
}

/* ---------- INQUIRY FORM (contact page) ---------- */
.inquiry-grid{
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap:70px; align-items:start;
}
@media (max-width:900px){ .inquiry-grid{grid-template-columns:1fr; gap:44px;} }

.inquiry-form{ display:grid; gap:20px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }

.field label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--clay-deep); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:1px solid var(--paper-line);
  color:var(--sand-ink); font-family:'Archivo', sans-serif; font-size:15px;
  padding:13px 14px; outline:none; transition:border-color .25s ease, background .25s ease;
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238f4526' stroke-width='1.5' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px;
}
.field textarea{resize:vertical; min-height:120px; font-family:'Archivo', sans-serif;}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--clay); background:rgba(189,91,52,0.04);
}
.field input::placeholder, .field textarea::placeholder{color:var(--sand-dim); opacity:0.6;}

.form-submit{
  margin-top:6px; border:none; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--clay); color:#150c07; padding:16px 26px;
  transition:background .25s ease;
  justify-self:start;
}
.form-submit:hover{background:#d97142;}

.form-note{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--sand-dim); line-height:1.7; margin-top:2px;
}

.hp-field{ position:absolute; left:-9999px; }

/* ---------- MINIMAL HOME HERO ---------- */
.home-only .hero{min-height:100svh;}