/* ============================================================
   FAVOUR JACOB — LUXURY EDITORIAL PORTFOLIO
   Design tokens
   ============================================================ */
:root{
  --wine:        #3B1219;
  --wine-deep:   #2A0D12;
  --wine-light:  #4A1B24;
  --cream:       #F5F3EF;
  --cream-alt:   #EFEBE3;
  --charcoal:    #2A2422;
  --charcoal-70: rgba(42,36,34,.7);
  --line:        #DCD5C8;
  --line-dark:   rgba(245,243,239,.18);
  --grey-ticker: #B9AFA0;
  --gold:        #A9834F;

  --serif: 'Playfair Display', 'Times New Roman', serif;
  --serif-alt: 'Cormorant Garamond', serif;
  --sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 48px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.eyebrow.on-dark{ color:#D8B98A; }

/* ---------- node divider (signature motif) ----------
   A thin connected-node rule — echoes the automation
   workflows (n8n-style node → line → node) that are the
   subject of the work itself. Used everywhere a plain
   hairline would otherwise sit. */
.node-rule{
  display:flex; align-items:center; gap:0;
  width:100%; height:1px;
}
.node-rule::before,.node-rule::after{ content:""; }
.node-divider{
  position:relative;
  display:flex; align-items:center;
  width:100%;
  margin:0 auto;
}
.node-divider .line{ flex:1; height:1px; background:var(--line); }
.node-divider .node{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  margin:0 10px;
  flex-shrink:0;
}
.node-divider.on-dark .line{ background:var(--line-dark); }
.node-divider.on-dark .node{ background:#D8B98A; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  background:var(--wine);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:22px; padding-bottom:22px;
}
.logo{
  font-family:var(--serif);
  color:#fff;
  font-size:20px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
}
.logo span{ color:#D8B98A; }
.nav-links{
  display:flex; gap:34px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:400;
  color:rgba(255,255,255,.78);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.nav-links a:hover, .nav-links a.active{
  color:#fff;
  border-color:#D8B98A;
}
.nav-toggle{
  display:none;
  background:none; border:none; color:#fff; cursor:pointer;
  width:30px; height:22px; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:100%; height:1px; background:#fff;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle span{ top:10px; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }

@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; top:65px;
    flex-direction:column; gap:0;
    background:var(--wine); width:min(320px,80vw);
    height:calc(100vh - 65px);
    padding:30px 34px; transform:translateX(100%);
    transition:transform .35s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ display:block; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1); }
}

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero{
  background:var(--wine);
  color:#fff;
  padding:96px 0 76px;
}
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(34px,5vw,58px);
  line-height:1.08;
  margin:0 0 22px;
  max-width:820px;
}
.page-hero p{
  font-family:var(--sans);
  font-size:16px;
  color:rgba(255,255,255,.72);
  max-width:560px;
  margin:0;
}

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero{
  background:var(--cream);
  padding:0;
}
.hero-card{
  position:relative;
  border-radius:0;
  overflow:hidden;
  min-height:640px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
  background:var(--cream-alt); /* flat, uniform — no gradient */
}
.hero-left{
  position:relative; z-index:2;
  padding:64px 56px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-hello{
  font-family:var(--serif-alt); font-style:italic; color:var(--charcoal-70);
  font-size:20px; margin-bottom:10px;
}
.hero-left .hero-name{
  font-family:var(--serif);
  font-weight:700;
  color:var(--charcoal);
  text-transform:uppercase;
  font-size:clamp(38px,5.6vw,66px);
  line-height:1.02;
  letter-spacing:.01em;
  margin:0 0 16px;
}
.hero-left .hero-role{
  font-family:var(--sans);
  color:var(--wine);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:26px;
}
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }

/* horizontal mini stats with motion */
.hero-stats-row{ display:flex; gap:36px; flex-wrap:wrap; }
.hero-stat{ min-width:110px; }
.hero-stat .stat-num{
  font-family:var(--serif); color:var(--wine); font-size:32px; display:block; margin-bottom:6px;
}
.hero-stat .stat-lbl{
  font-family:var(--sans); color:var(--charcoal-70); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.4;
}

/* right side: photo + light supporting tagline */
.hero-right{ position:relative; background:var(--cream-alt); }
.hero-right .hero-photo{ position:absolute; inset:0; }
.hero-right .hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.hero-tagline{
  position:absolute; right:24px; top:24px; max-width:250px; text-align:right; z-index:2;
  background:var(--wine);
  padding:16px 20px;
  border-radius:2px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.35);
}
.hero-tagline p{
  font-family:var(--sans);
  font-weight:800;
  color:#fff;
  font-size:17px;
  line-height:1.45;
  letter-spacing:.005em;
  margin:0;
}

@media (max-width: 900px){
  .hero-card{ grid-template-columns:1fr; min-height:auto; }
  .hero-left{ padding:40px 28px 32px; order:1; }
  .hero-right{ order:2; height:340px; }
  .hero-tagline{ top:16px; right:16px; max-width:180px; padding:10px 14px; }
  .hero-stats-row{ gap:26px; }
}

/* ============================================================
   VISION / STATEMENT
   ============================================================ */
.vision{
  background:var(--cream);
  padding:120px 0 100px;
  text-align:center;
}
.vision .eyebrow{ display:block; margin-bottom:26px; }
.vision h2{
  font-family:var(--serif);
  text-transform:uppercase;
  font-size:clamp(24px,3.4vw,40px);
  line-height:1.45;
  letter-spacing:.01em;
  max-width:920px;
  margin:0 auto;
  font-weight:600;
}
.vision h2 em{
  font-style:normal; color:var(--gold);
}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:var(--cream-alt);
  padding:22px 0;
}
.ticker-track{
  display:flex; width:max-content;
  animation:scroll-left 32s linear infinite;
}
.ticker-track span{
  font-family:var(--serif-alt);
  font-style:italic;
  text-transform:uppercase;
  font-size:19px;
  letter-spacing:.08em;
  color:var(--grey-ticker);
  white-space:nowrap;
  padding:0 22px;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* ============================================================
   ABOUT INTRO (split)
   ============================================================ */
.about-intro{
  background:var(--cream);
  padding:110px 0;
}
.split{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  align-items:center;
}
.split-image{
  position:relative;
  border-radius:3px;
  overflow:hidden;
  min-height:560px;
  background:
    radial-gradient(130% 100% at 30% 0%, #5A2029 0%, #3B1219 50%, #200B0E 100%);
  display:flex; align-items:center; justify-content:center;
}
.split-image .initials{
  font-family:var(--serif);
  color:rgba(255,255,255,.14);
  font-size:200px;
  line-height:1;
}
.split-image .frame-label{
  position:absolute; bottom:26px; left:26px;
  font-family:var(--sans);
  color:rgba(255,255,255,.6);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.split-copy .eyebrow{ margin-bottom:16px; display:block; }
.split-copy h2{
  font-family:var(--serif);
  text-transform:uppercase;
  font-size:clamp(28px,3.6vw,42px);
  line-height:1.18;
  margin:0 0 26px;
}
.split-copy p{
  font-family:var(--sans);
  color:var(--charcoal-70);
  font-size:16px;
  max-width:480px;
  margin:0 0 34px;
}

/* ---------- pill button ---------- */
.pill-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 34px;
  border:1px solid var(--charcoal);
  border-radius:999px;
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--charcoal);
  position:relative; overflow:hidden;
  transition:color .35s ease;
  cursor:pointer;
  background:transparent;
}
.pill-btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--charcoal);
  transform:translateY(101%);
  transition:transform .35s cubic-bezier(.65,0,.35,1);
  z-index:0;
}
.pill-btn span{ position:relative; z-index:1; }
.pill-btn:hover{ color:var(--cream); }
.pill-btn:hover::before{ transform:translateY(0); }

.pill-btn.on-dark{ border-color:rgba(255,255,255,.55); color:#fff; }
.pill-btn.on-dark::before{ background:#fff; }
.pill-btn.on-dark:hover{ color:var(--wine); }

.pill-btn.solid{
  background:var(--wine); border-color:var(--wine); color:#fff;
}
.pill-btn.solid::before{ background:var(--charcoal); }
.pill-btn.solid:hover{ color:#fff; }

/* ============================================================
   SERVICES BLOCK (wine, 3-col)
   ============================================================ */
.services-block{
  background:var(--wine);
  padding:110px 0;
}
.services-block .head{
  text-align:center; margin-bottom:70px;
}
.services-block .eyebrow{ margin-bottom:18px; }
.services-block h2{
  font-family:var(--serif);
  color:#fff;
  text-transform:uppercase;
  font-size:clamp(30px,4vw,48px);
  margin:0;
}
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
}
.svc-card{
  background:var(--wine-deep);
  padding:44px 38px 40px;
  min-height:340px;
  display:flex; flex-direction:column;
  transition:background .4s ease;
}
.svc-card:hover{ background:#331014; }
.svc-num{
  font-family:var(--serif);
  color:#D8B98A;
  font-size:13px;
  letter-spacing:.2em;
  margin-bottom:26px;
}
.svc-card h3{
  font-family:var(--serif);
  color:#fff;
  text-transform:uppercase;
  font-size:21px;
  line-height:1.3;
  margin:0 0 18px;
}
.svc-card p{
  font-family:var(--sans);
  color:rgba(255,255,255,.66);
  font-size:14.5px;
  line-height:1.7;
  margin:0 0 24px;
  flex-grow:1;
}
.svc-card .tags{
  display:flex; flex-wrap:wrap; gap:8px;
}
.svc-card .tags span{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#D8B98A;
  border:1px solid rgba(216,185,138,.35);
  border-radius:999px;
  padding:5px 12px;
}
@media (max-width: 880px){
  .svc-grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split-image{ min-height:380px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--wine-deep);
  color:rgba(255,255,255,.6);
  padding:64px 0 34px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:40px; flex-wrap:wrap;
  padding-bottom:40px;
}
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand p{
  font-family:var(--sans); font-size:13.5px; color:rgba(255,255,255,.5);
  max-width:320px; margin:0;
}
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{
  font-family:var(--sans); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#D8B98A; margin:0 0 16px;
}
.footer-col a, .footer-col span{
  display:block; font-family:var(--sans); font-size:13.5px;
  color:rgba(255,255,255,.62); margin-bottom:10px;
}
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.05em;
  color:rgba(255,255,255,.4);
}

@media (max-width: 640px){
  .wrap{ padding:0 24px; }
  .about-intro,.services-block,.vision{ padding:70px 0; }
}

/* ============================================================
   GENERIC CONTENT SECTIONS (used across interior pages)
   ============================================================ */
.section{ padding:100px 0; }
.section.alt{ background:var(--cream-alt); }
.section-head{ max-width:640px; margin-bottom:60px; }
.section-head .eyebrow{ margin-bottom:16px; display:block; }
.section-head h2{
  font-family:var(--serif); text-transform:uppercase;
  font-size:clamp(28px,3.6vw,42px); line-height:1.2; margin:0;
}
.section-head p{ color:var(--charcoal-70); margin:18px 0 0; font-size:16px; }

/* card grid used in Services/Portfolio pages */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:880px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.card{
  background:#fff;
  border:1px solid var(--line);
  padding:40px 36px;
  border-radius:2px;
  transition:transform .4s ease, box-shadow .4s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -28px rgba(42,13,18,.35); }
.card .eyebrow{ margin-bottom:16px; display:block; }
.card h3{
  font-family:var(--serif); text-transform:uppercase;
  font-size:20px; margin:0 0 14px; line-height:1.3;
}
.card p{ color:var(--charcoal-70); font-size:14.5px; line-height:1.7; margin:0; }
.card .meta{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:22px;
}
.card .meta span{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  color:var(--charcoal-70);
}

/* portfolio flagship feature */
.flagship{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); background:#fff; margin-bottom:30px;
}
.flagship-visual{
  background:var(--wine); position:relative; min-height:420px;
  display:flex; flex-direction:column; justify-content:center; padding:48px;
  overflow:hidden;
}
.flagship-visual .node-flow{
  display:flex; flex-direction:column; gap:0; position:relative; z-index:1;
}
.flow-step{
  display:flex; align-items:center; gap:16px; padding:14px 0;
}
.flow-dot{
  width:10px; height:10px; border-radius:50%; background:#D8B98A; flex-shrink:0;
}
.flow-line{
  width:1px; height:26px; background:rgba(216,185,138,.4); margin-left:4.5px;
}
.flow-step span{
  font-family:var(--sans); color:#fff; font-size:13px; letter-spacing:.04em;
}
.flagship-copy{ padding:52px 48px; }
.flagship-copy .eyebrow{ margin-bottom:16px; display:block; }
.flagship-copy h3{
  font-family:var(--serif); text-transform:uppercase; font-size:26px;
  line-height:1.25; margin:0 0 18px;
}
.flagship-copy p{ color:var(--charcoal-70); font-size:15px; line-height:1.75; margin:0 0 24px; }
.flagship-copy ul{ margin:0 0 28px; padding:0; list-style:none; }
.flagship-copy li{
  font-size:13.5px; color:var(--charcoal); padding:9px 0;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px;
}
.flagship-copy li:last-child{ border-bottom:1px solid var(--line); }
.flagship-copy li b{ font-weight:600; }
@media (max-width:880px){ .flagship{ grid-template-columns:1fr; } }

/* stat strip */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:60px;
}
.stat{ background:var(--cream); padding:34px 28px; text-align:center; }
.stat .num{ font-family:var(--serif); font-size:34px; color:var(--wine); }
.stat .lbl{ font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-70); margin-top:8px; }
@media (max-width:640px){ .stat-strip{ grid-template-columns:1fr 1fr; } }

/* contact page */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{
  border-top:1px solid var(--line);
  padding:26px 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-list .lbl{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--charcoal-70); }
.contact-list .val{ font-family:var(--serif); font-size:19px; }
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.contact-form label{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal-70); margin-bottom:8px; display:block; }
.contact-form input, .contact-form textarea{
  width:100%; border:none; border-bottom:1px solid var(--line);
  background:transparent; padding:10px 2px; font-family:var(--sans); font-size:15px;
  color:var(--charcoal); outline:none; transition:border-color .3s ease;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--wine); }
.contact-form textarea{ resize:vertical; min-height:110px; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* ============================================================
   NEW HOMEPAGE SECTIONS (positioning refresh)
   ============================================================ */

/* ---- hero with real photo ---- */
.hero-photo{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  z-index:1;
}
.hero-photo img{
  width:auto; height:100%; max-height:100%;
  object-fit:cover; object-position:center top;
}
.hero-card{ align-items:stretch; }
.hero-sub{
  position:relative; z-index:2;
}
.hero-sub .kicker{
  font-family:var(--sans); color:rgba(255,255,255,.72);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  margin-top:14px;
}
.hero-cta-row{
  position:relative; z-index:2;
  display:flex; gap:16px; flex-wrap:wrap; margin-top:30px;
}

/* ---- stat / numbers grid ---- */
.stats-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.stats-grid .stat{ background:var(--cream); }
@media (max-width:980px){ .stats-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .stats-grid{ grid-template-columns:repeat(2,1fr);} }

/* ---- problem cards (what I solve) ---- */
.problem-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
@media (max-width:880px){ .problem-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .problem-grid{ grid-template-columns:1fr;} }
.problem-card{
  background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:34px 28px; text-align:left;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.problem-card:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -26px rgba(42,13,18,.3); border-color:var(--wine); }
.problem-card .icon{ font-size:26px; margin-bottom:16px; display:block; }
.problem-card h3{
  font-family:var(--serif); font-size:17px; text-transform:uppercase;
  letter-spacing:.02em; margin:0; line-height:1.3;
}
.closing-note{
  text-align:center; margin-top:52px; font-family:var(--serif-alt); font-style:italic;
  font-size:20px; color:var(--charcoal-70);
}

/* ---- services 4-col ---- */
.svc4-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); }
@media (max-width:980px){ .svc4-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .svc4-grid{ grid-template-columns:1fr;} }
.svc-card ul{ list-style:none; margin:0 0 22px; padding:0; }
.svc-card ul li{
  font-family:var(--sans); font-size:13px; color:rgba(255,255,255,.66);
  padding:7px 0; border-top:1px solid rgba(255,255,255,.1);
}
.svc-card ul li:first-child{ border-top:none; }

/* ---- featured work placeholder cards ---- */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:880px){ .work-grid{ grid-template-columns:1fr; } }
.work-card{
  background:#fff; border:1px solid var(--line); padding:36px 34px;
  display:flex; flex-direction:column; min-height:230px;
}
.work-card .tag-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.work-card .status{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(169,131,79,.4); border-radius:999px; padding:4px 11px;
}
.work-card h3{ font-family:var(--serif); text-transform:uppercase; font-size:19px; margin:0 0 10px; }
.work-card p.role{ font-family:var(--sans); font-size:13.5px; color:var(--charcoal-70); margin:0 0 18px; }
.work-card .meta{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.work-card .link{ font-family:var(--sans); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--wine); }

/* ---- how I work timeline ---- */
.timeline4{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; }
@media (max-width:880px){ .timeline4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .timeline4{ grid-template-columns:1fr; } }
.tl-step{ text-align:left; }
.tl-step .node-divider{ margin-bottom:20px; }
.tl-num{ font-family:var(--serif); font-size:13px; letter-spacing:.18em; color:var(--gold); margin-bottom:14px; }
.tl-step h3{ font-family:var(--serif); text-transform:uppercase; font-size:19px; margin:0 0 10px; }
.tl-step p{ font-family:var(--sans); font-size:14px; color:var(--charcoal-70); margin:0; }

/* ---- why-me pillars ---- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:50px; }
@media (max-width:880px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ text-align:center; padding:44px 30px; border:1px solid var(--line); background:#fff; }
.pillar h3{ font-family:var(--serif); text-transform:uppercase; font-size:19px; margin:0 0 12px; }
.pillar p{ font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--charcoal-70); margin:0; }
.why-statement{
  font-family:var(--serif); text-transform:uppercase; text-align:center;
  font-size:clamp(20px,2.6vw,30px); line-height:1.5; max-width:820px; margin:0 auto;
}

/* ---- tech stack badges ---- */
.stack-group{ margin-bottom:34px; }
.stack-group:last-child{ margin-bottom:0; }
.stack-group h4{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--charcoal-70); margin:0 0 16px;
}
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{
  font-family:var(--serif); font-size:14px; color:var(--charcoal);
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:9px 20px;
}

/* ---- testimonials ---- */
.testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:880px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
  background:var(--wine-deep); border:1px solid rgba(255,255,255,.1);
  padding:40px 36px; display:flex; flex-direction:column;
}
.testi-card .quote-mark{ font-family:var(--serif); font-size:44px; color:#D8B98A; line-height:1; margin-bottom:10px; }
.testi-card p.line{
  font-family:var(--serif); font-style:italic; color:#fff; font-size:19px; line-height:1.5; margin:0 0 26px; flex-grow:1;
}
.testi-card .attrib{ font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; color:rgba(255,255,255,.6); text-transform:uppercase; }

/* ---- FAQ accordion (native, no JS) ---- */
.faq-list{ max-width:760px; }
.faq-item{ border-top:1px solid var(--line); }
.faq-list .faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:24px 4px;
  font-family:var(--serif); font-size:17px; color:var(--charcoal);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--sans); font-size:20px; color:var(--wine); flex-shrink:0;
  transition:transform .3s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-a{
  font-family:var(--sans); font-size:14.5px; color:var(--charcoal-70); line-height:1.7;
  padding:0 4px 26px; max-width:640px;
}

/* ---- ways to work ---- */
.ways-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:50px; }
@media (max-width:880px){ .ways-grid{ grid-template-columns:1fr; } }
.way-card{ background:var(--wine-deep); border:1px solid rgba(255,255,255,.1); padding:38px 30px; text-align:center; }
.way-card h3{ font-family:var(--serif); text-transform:uppercase; color:#fff; font-size:19px; margin:0 0 10px; }
.way-card p{ font-family:var(--sans); color:rgba(255,255,255,.6); font-size:13px; letter-spacing:.03em; margin:0; }

/* ---- final CTA ---- */
.final-cta{ background:var(--cream); padding:130px 0; text-align:center; }
.final-cta h2{
  font-family:var(--serif); text-transform:uppercase; line-height:1.15;
  font-size:clamp(34px,6vw,68px); margin:0 0 26px;
}
.final-cta h2 .accent{ color:var(--wine); }
.final-cta p{ font-family:var(--sans); color:var(--charcoal-70); font-size:16px; margin:0 0 40px; }

/* ============================================================
   RING STATS (by the numbers — v2, motion)
   ============================================================ */
.rings-wrap{ background:var(--wine-deep); }
.ring-block{
  padding:64px 0;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ring-block:nth-child(even){ background:var(--wine); }
.ring-block:last-child{ border-bottom:none; }
.ring-stat{
  position:relative;
  width:180px; height:180px;
  margin:0 auto 30px;
}
.ring-stat svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-stat circle{ fill:none; }
.ring-track{ stroke:rgba(255,255,255,.14); stroke-width:8; }
.ring-fill{
  stroke:#D8B98A;
  stroke-width:8;
  stroke-linecap:round;
  transition:stroke-dashoffset 1.6s cubic-bezier(.25,.7,.3,1);
}
.ring-center{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); color:#fff; font-size:30px;
}
.ring-block h3{
  font-family:var(--serif); text-transform:uppercase; color:#fff;
  font-size:22px; letter-spacing:.02em; margin:0 0 12px;
}
.ring-block p{
  font-family:var(--sans); color:rgba(255,255,255,.62);
  font-size:14.5px; max-width:380px; margin:0 auto; line-height:1.6;
}

/* ============================================================
   PROOF CARDS (what sets me apart)
   ============================================================ */
.proof-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:44px; }
@media (max-width:880px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-card{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--wine);
  padding:32px 30px;
}
.proof-card h3{
  font-family:var(--serif); text-transform:uppercase; font-size:17px;
  margin:0 0 12px; letter-spacing:.01em;
}
.proof-card p{
  font-family:var(--sans); color:var(--charcoal-70); font-size:14px; line-height:1.7; margin:0;
}
.proof-card p b{ color:var(--wine); font-weight:600; }
.proof-lead{
  text-align:center; max-width:620px; margin:0 auto; color:var(--charcoal-70);
  font-family:var(--sans); font-size:15px;
}

/* mobile breathing room */
@media (max-width:640px){
  .section{ padding:60px 0; }
  .about-intro,.services-block,.vision{ padding:60px 0; }
  .ring-block{ padding:50px 0; }
  .ring-stat{ width:150px; height:150px; }
  .card, .problem-card, .work-card, .proof-card{ padding:28px 24px; }
  .flagship-copy{ padding:36px 26px; }
  .flagship-visual{ padding:36px 26px; min-height:auto; }
}

/* smaller, briefer problem cards */
.problem-grid-sm .problem-card{
  padding:22px 22px;
  text-align:left;
}
.problem-grid-sm .problem-card h3{
  font-size:14.5px;
  margin-bottom:8px;
}
.problem-grid-sm .problem-card p{
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.55;
  color:var(--charcoal-70);
  margin:0;
}

/* toned-down why-me subtitle (no longer competing with the h2) */
.why-statement-sm{
  font-family:var(--sans);
  color:var(--charcoal-70);
  font-size:16.5px;
  line-height:1.8;
  max-width:600px;
  margin:22px auto 0;
  font-weight:400;
}

/* contact list values that are now real links */
.contact-list a.val{
  color:var(--charcoal);
  transition:color .3s ease;
}
.contact-list a.val:hover{ color:var(--wine); }

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.cs-hero{ background:var(--wine); color:#fff; padding:90px 0 70px; }
.cs-hero .eyebrow{ margin-bottom:16px; }
.cs-hero h1{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(38px,6vw,68px); margin:0 0 22px; line-height:1.05;
}
.cs-hero p{ font-family:var(--sans); color:rgba(255,255,255,.75); font-size:16.5px; max-width:640px; line-height:1.7; margin:0; }
.cs-hero .back-link{ display:inline-block; margin-bottom:28px; font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.cs-hero .back-link:hover{ color:#fff; }

/* collage: image5 left tall, image4 top-right, image3 bottom-right */
.cs-collage{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:18px;
  margin:-46px auto 0;
  max-width:1080px;
  padding:0 24px;
}
.cs-collage .c-left{
  grid-row:1 / 3; grid-column:1;
  border-radius:2px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(42,13,18,.4);
}
.cs-collage .c-topright{ grid-row:1; grid-column:2; border-radius:2px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(42,13,18,.4); }
.cs-collage .c-botright{ grid-row:2; grid-column:2; border-radius:2px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(42,13,18,.4); }
.cs-collage img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-collage .c-left img{ min-height:100%; }
@media (max-width:820px){
  .cs-collage{ grid-template-columns:1fr; grid-template-rows:auto; margin-top:-30px; }
  .cs-collage .c-left, .cs-collage .c-topright, .cs-collage .c-botright{ grid-column:1; grid-row:auto; }
}

.cs-body{ padding:100px 0 110px; }
.cs-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; }
@media (max-width:900px){ .cs-grid{ grid-template-columns:1fr; gap:50px; } }
.cs-block{ margin-bottom:44px; }
.cs-block:last-child{ margin-bottom:0; }
.cs-block h2{
  font-family:var(--serif); text-transform:uppercase; font-size:22px; margin:0 0 18px; letter-spacing:.01em;
}
.cs-block p{ font-family:var(--sans); color:var(--charcoal-70); font-size:15px; line-height:1.75; margin:0 0 16px; }
.cs-list{ list-style:none; margin:0; padding:0; }
.cs-list li{
  font-family:var(--sans); font-size:14.5px; color:var(--charcoal);
  padding:12px 0 12px 26px; border-top:1px solid var(--line); position:relative;
}
.cs-list li:last-child{ border-bottom:1px solid var(--line); }
.cs-list li::before{
  content:""; position:absolute; left:0; top:19px; width:7px; height:7px; border-radius:50%; background:var(--gold);
}
.cs-sidebar{ background:var(--cream-alt); border:1px solid var(--line); padding:36px 32px; align-self:start; }
.cs-sidebar h3{ font-family:var(--serif); text-transform:uppercase; font-size:16px; margin:0 0 18px; }
.cs-result-list{ list-style:none; margin:0 0 32px; padding:0; }
.cs-result-list li{
  font-family:var(--sans); font-size:14px; color:var(--charcoal); padding:9px 0;
  border-top:1px solid var(--line); display:flex; align-items:flex-start; gap:10px;
}
.cs-result-list li:last-child{ border-bottom:1px solid var(--line); }
.cs-result-list li::before{ content:"✓"; color:var(--wine); font-weight:700; flex-shrink:0; }
.cs-skill-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-skill-tags span{
  font-family:var(--sans); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; color:var(--charcoal-70);
}

/* side-by-side collage (2 images, equal width) */
.cs-collage-2{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin:-46px auto 0; max-width:1080px; padding:0 24px;
}
.cs-collage-2 .c-img{ border-radius:2px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(42,13,18,.4); }
.cs-collage-2 img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:820px){
  .cs-collage-2{ grid-template-columns:1fr; margin-top:-30px; }
}

/* document-style SOP layout */
.doc-panel{
  background:#fff; border:1px solid var(--line); padding:34px 32px; margin-bottom:26px;
}
.doc-panel h3{
  font-family:var(--serif); text-transform:uppercase; font-size:16px; margin:0 0 16px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.doc-panel p{ font-family:var(--sans); color:var(--charcoal-70); font-size:14.5px; line-height:1.75; margin:0 0 12px; }
.doc-panel p:last-child{ margin-bottom:0; }
.doc-table{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:13.5px; }
.doc-table th{
  text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--charcoal-70); padding:10px 12px; border-bottom:1px solid var(--line);
}
.doc-table td{ padding:12px; border-bottom:1px solid var(--line); color:var(--charcoal); vertical-align:top; }
.doc-table code{
  font-family:monospace; background:var(--cream-alt); padding:2px 6px; border-radius:3px; font-size:12.5px;
}
.doc-check-list{ list-style:none; margin:0; padding:0; }
.doc-check-list li{
  font-family:var(--sans); font-size:14px; color:var(--charcoal); padding:8px 0 8px 24px; position:relative;
}
.doc-check-list li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }
.doc-meta-row{ display:flex; flex-wrap:wrap; gap:28px; margin-top:8px; }
.doc-meta-row div{ font-family:var(--sans); font-size:13px; }
.doc-meta-row span{ display:block; color:var(--charcoal-70); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }

/* full-width single showcase image (case studies) */
.cs-showcase{
  margin:-46px auto 0; max-width:1080px; padding:0 24px;
}
.cs-showcase .c-img{ border-radius:2px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(42,13,18,.4); }
.cs-showcase img{ width:100%; height:auto; display:block; }
.cs-showcase + .cs-collage-2{ margin-top:18px; }
@media (max-width:820px){ .cs-showcase{ margin-top:-30px; } }

/* mini process flow (reuses node-flow motif inside a card) */
.cs-flow-panel{
  background:var(--wine); padding:40px 36px; margin-bottom:26px;
}
.cs-flow-panel .flow-step span{ font-size:13.5px; }

/* 3-column services variant */
.svc3-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .svc3-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc3-grid{ grid-template-columns:1fr; } }

/* rotating circular thumbnail (replaces status badge on project cards) */
.thumb-circle{
  position:relative; width:56px; height:56px; border-radius:50%;
  overflow:hidden; flex-shrink:0; border:2px solid var(--gold);
  background:var(--wine-deep);
}
.thumb-circle img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation:thumbRotate 9s infinite ease-in-out;
}
.thumb-circle img:nth-child(1){ animation-delay:0s; }
.thumb-circle img:nth-child(2){ animation-delay:-3s; }
.thumb-circle img:nth-child(3){ animation-delay:-6s; }
@keyframes thumbRotate{
  0%{ opacity:0; }
  4%{ opacity:1; }
  29%{ opacity:1; }
  34%{ opacity:0; }
  100%{ opacity:0; }
}
.thumb-circle.single img{ animation:none; opacity:1; }

/* ============================================================
   EXPERIENCE TIMELINE (side-by-side, two columns)
   ============================================================ */
.exp-wrap{ background:var(--wine-deep); padding:100px 0; }
.exp-wrap .section-head{ margin-left:auto; margin-right:auto; text-align:center; }
.exp-wrap .section-head .eyebrow{ color:#D8B98A; }
.exp-wrap .section-head h2{ color:#fff; }
.exp-wrap .section-head p{ color:rgba(255,255,255,.6); }

.exp-timeline{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-flow:column;
  grid-template-rows:repeat(3, auto);
  column-gap:64px;
  row-gap:46px;
  margin-top:64px;
}
.exp-timeline .exp-item{
  padding-left:26px;
  border-left:1px solid rgba(255,255,255,.12);
}
.exp-item{ position:relative; }
.exp-badge{
  position:absolute; left:-15px; top:0;
  width:29px; height:29px; border-radius:50%;
  background:var(--wine); border:1px solid #D8B98A;
  color:#D8B98A; font-family:var(--serif); font-size:12.5px;
  display:flex; align-items:center; justify-content:center;
}
.exp-title{
  font-family:var(--serif); text-transform:uppercase; color:#fff;
  font-size:16.5px; margin:0 0 6px; line-height:1.3;
}
.exp-date{
  font-family:var(--serif-alt); font-style:italic; color:#D8B98A;
  font-size:13.5px; margin-bottom:10px; display:block;
}
.exp-summary{
  font-family:var(--sans); color:rgba(255,255,255,.62); font-size:13.5px; line-height:1.7; margin:0;
}
@media (max-width:820px){
  .exp-timeline{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:auto; row-gap:36px; }
}

/* ============================================================
   SKILLS SCORECARD (portfolio.html)
   ============================================================ */
.skill-group{ margin-bottom:56px; }
.skill-group:last-child{ margin-bottom:0; }
.skill-group-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:10px; }
.skill-group-head h2{
  font-family:var(--serif); text-transform:uppercase; font-size:20px; margin:0;
}
.skill-group-head span{
  font-family:var(--sans); font-size:12px; color:var(--charcoal-70); letter-spacing:.06em;
}
.skill-row{ margin-bottom:24px; }
.skill-row:last-child{ margin-bottom:0; }
.skill-row-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; gap:12px; }
.skill-row-top .name{ font-family:var(--sans); font-size:14.5px; color:var(--charcoal); font-weight:600; }
.skill-row-top .proof{ font-family:var(--sans); font-size:11.5px; color:var(--charcoal-70); font-style:italic; }
.skill-row-top .score{ font-family:var(--serif); font-size:15px; color:var(--wine); flex-shrink:0; }
.skill-bar-track{ height:6px; background:var(--line); border-radius:999px; overflow:hidden; }
.skill-bar-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--wine) 0%, var(--gold) 100%);
  width:0%; transition:width 1.4s cubic-bezier(.25,.7,.3,1);
}
.skill-row.reveal.in .skill-bar-fill{ width:var(--pct); }

/* ============================================================
   HOW-IT-WORKS PROCESS STEPS (formerly AI Architecture page)
   ============================================================ */
.process-steps{ display:flex; flex-direction:column; gap:0; max-width:820px; margin:0 auto; }
.process-step{
  display:grid; grid-template-columns:64px 1fr; gap:26px;
  padding:38px 0; border-top:1px solid var(--line);
}
.process-steps .process-step:last-child{ border-bottom:1px solid var(--line); }
.process-step .p-num{
  font-family:var(--serif); font-size:26px; color:var(--wine);
  width:56px; height:56px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.process-step h3{
  font-family:var(--serif); text-transform:uppercase; font-size:20px; margin:0 0 12px;
}
.process-step p{
  font-family:var(--sans); color:var(--charcoal-70); font-size:15px; line-height:1.75; margin:0;
}
.process-step p em{
  font-style:italic; color:var(--charcoal); font-weight:500;
}
@media (max-width:640px){
  .process-step{ grid-template-columns:48px 1fr; gap:18px; padding:28px 0; }
  .process-step .p-num{ width:44px; height:44px; font-size:20px; }
}