/* Shared styles, Rich Dieu IT Solutions
   Type & color system aligned to the firm's design brief:
   - Humanist sans (Inter) for UI/body
   - Serif (Source Serif Pro) for display + editorial moments
   - JetBrains Mono retained for small all-caps mono labels only
   - Monochromatic blue (60%) + warm gold accent (10%) + neutrals (30%)
   - Modular scale 1.25, base 18px, body line-height 1.5, heading 1.2
*/

@font-face{
  font-family: 'Caviar Dreams';
  src: url('assets/CaviarDreams.ttf') format('truetype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
:root{
  /* Light-tone fallbacks (unused on dark-video shell, kept for print) */
  --bg: #f5f3ee;
  --bg-2: #eae6dc;
  --ink: #141311;
  --ink-2: #3a362f;
  --muted: #7a7467;
  --line: #d9d3c4;

  /* Accent, warm gold (per brief: gold = value, illumination, divinity) */
  --accent: #c9a35b;
  --accent-2: #e0bc78;

  /* Type system */
  --serif: 'Source Serif 4', 'Source Serif Pro', 'Merriweather', Georgia, serif;
  --sans:  'Inter', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;

  /* Modular scale (1.25, base 18px) */
  --fs-0: 14px;     /* small / mono labels  */
  --fs-1: 18px;     /* body */
  --fs-2: 22px;     /* lead body */
  --fs-3: 28px;     /* h3 */
  --fs-4: 36px;     /* h2 */
  --fs-5: 56px;     /* large h2 */
  --fs-6: clamp(48px, 7vw, 96px); /* display h1 */
}
*{ box-sizing: border-box; }
html, body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-1); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body{ overflow-x: hidden; }
a{ color: inherit; text-decoration: none; }
p{ max-width: 66ch; }   /* Measure cap per brief */

/* ---------- Global video bg + dark scheme override ---------- */
.bg-video{
  position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -10;
}
.bg-veil{
  position: fixed; inset: 0; z-index: -9; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,19,17,0.15), rgba(20,19,17,0.25));
}
body{ background: #141311; color: #f5f3ee; }
:root{ --ink: #f5f3ee; --ink-2: #ece8de; --muted: #b8b0a0; --line: rgba(245,243,238,0.16); --bg: transparent; }

/* ---------- Nav ---------- */
nav.topnav{
  position: sticky; top: 0; z-index: 40;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px 40px; background: rgba(20,19,17,0.35); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  height: 64px;        /* bar stays this tall */
}
.brand{
  display:inline-flex; align-items:center; gap: 10px;
  font-size: 14px; letter-spacing: 0.08em; color:#f5f3ee;
  height: 100%; overflow: visible;   /* allow logo to break out vertically */
}
.brand img{
  height: 120px; width: auto; display: block;
  margin: -28px 0;     /* logo overflows above & below the 64px bar */
}
.brand sup{ font-family: var(--mono); font-size: 9px; vertical-align: super; margin-left: 6px; color: var(--muted); letter-spacing: 0.15em;}
.links{ display: flex; gap: 36px; justify-content: center; }
.links a{ font-size: 13px; color: #f5f3ee; font-weight: 500; letter-spacing: -0.005em; position: relative; padding: 4px 0; }
.links a:hover{ color: var(--accent); }
.links a[aria-current="page"]{ color: var(--accent);}
.links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: var(--accent);}
.nav-right{ display:flex; justify-content: flex-end; align-items:center; gap: 16px; }
.time{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
.book{ font-size: 13px; color: #f5f3ee; font-weight: 600; display:inline-flex; align-items:center; gap: 6px; }
.book::after{ content:""; width:6px; height:6px; border-radius:50%; background: var(--accent); display:inline-block; margin-left: 4px;}
.book:hover{ color: var(--accent); }
@media (max-width: 720px){ nav.topnav{ grid-template-columns: 1fr auto; gap: 8px 16px; padding: 12px 18px; } .links{ display:flex; grid-column: 1 / -1; order: 3; justify-content: flex-start; flex-wrap: wrap; gap: 12px 18px; } .links a{ font-size: 12px; padding: 2px 0; } .time{ display:none;} }

@media (prefers-reduced-motion: reduce){
  .mq{ animation: none; }
  .reveal{ transition: none; }
  .pf-card{ transition: none; }
}

/* ---------- Section shell ---------- */
section, footer{
  background: rgba(20,19,17,0.55);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--line);
}
section{ padding: 168px 40px; position: relative; }
.wrap{ max-width: 1280px; margin: 0 auto; }
@media (max-width: 720px){ section{ padding: 100px 20px; } }

/* ---------- HERO ---------- */
.hero{
  padding: 80px 40px 120px; position: relative; overflow: hidden; isolation: isolate;
  background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.hero .wrap{ display: grid; grid-template-columns: 1fr; gap: 40px; position: relative; z-index: 1;}
.meta-row{
  display:grid; grid-template-columns: 120px 1fr 1fr 1fr; gap: 24px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.meta-row b{ color: #f5f3ee; font-weight: 500; display:block; margin-top: 4px; font-family: var(--sans); text-transform: none; letter-spacing: -0.005em; font-size: 13px;}
.headline{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6.5vw, 88px); line-height: 1; letter-spacing: -0.03em;
  color: #f5f3ee; margin: 0; max-width: 16ch;
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.headline.in{ opacity: 1; transform: none;}
.headline em{ color: var(--accent); font-style: italic; }
.hero-foot{
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;
  padding-top: 40px; border-top: 1px solid var(--line);
}
.hero-foot p{ font-size: 17px; line-height: 1.5; color: #d9d3c4; max-width: 48ch; margin: 0; }
.hero-actions{ display:flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap;}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: 999px; border: 1px solid #f5f3ee;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  background: #f5f3ee; color: #141311;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover{ background: var(--accent); border-color: var(--accent); color: #f5f3ee;}
.btn.outline{ background: transparent; color: #f5f3ee; border-color: #f5f3ee;}
.btn.outline:hover{ background: #f5f3ee; color: #141311;}
.btn .ic{ display:inline-block; width: 16px; height: 16px; }

@media (max-width: 720px){
  .meta-row{ grid-template-columns: 1fr 1fr; }
  .meta-row .meta-cell:first-child{ grid-column: 1/-1;}
  .hero-foot{ grid-template-columns: 1fr;}
  .hero-actions{ justify-content: flex-start; }
}

/* ---------- Marquee ---------- */
.clients{ padding: 40px 0; border-bottom: 1px solid var(--line); }
.clients-head{ display:flex; justify-content: space-between; align-items: baseline; padding: 0 40px 24px; }
.clients-head .lbl{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase; }
.clients-head .count{ font-family: var(--mono); font-size: 11px; color: var(--muted); }
.mq-wrap{ overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq{ display:flex; gap: 80px; width: max-content; animation: mq 45s linear infinite; padding: 16px 40px;}
.mq-wrap:hover .mq{ animation-play-state: paused; }
@keyframes mq{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.client-name{
  font-family: var(--serif); font-style: italic; font-size: 28px; color: #d9d3c4;
  white-space: nowrap; letter-spacing: -0.01em; transition: color .2s;
  text-decoration: none; cursor: pointer;
}
.client-name:hover{ color: var(--accent); }
.client-name .sans{ font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 24px; letter-spacing: -0.02em;}

/* ---------- Editorial index + services rows ---------- */
.index-head{
  display: grid; grid-template-columns: 120px 1fr 1fr; gap: 40px; align-items: start;
  padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.label{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase; padding-top: 8px;}
.index-head h2{
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(36px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.02em;
  margin: 0; max-width: 16ch; color: #f5f3ee;
}
.index-head p{ color: #d9d3c4; font-size: 16px; line-height: 1.55; max-width: 44ch; margin: 8px 0 0;}

.row{
  display: grid; grid-template-columns: 80px 1fr 2.4fr auto; gap: 32px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .35s ease, color .35s ease;
  position: relative; cursor: default;
}
.row::before{
  content:""; position:absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--accent);
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.row:hover{ padding-left: 40px; }
.row:hover::before{ width: 24px; }
.row .num{ font-family: var(--mono); font-size: 12px; color: var(--muted);}
.row .title{
  font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1; letter-spacing: -0.015em; color: #f5f3ee;
}
.row:hover .title{ font-style: italic; color: var(--accent); }
.row .desc{ color: #d9d3c4; font-size: 15px; line-height: 1.55; max-width: 60ch; }
.row .meta{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 900px){
  .index-head{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 40px 1fr; gap: 12px 16px; }
  .row .desc{ grid-column: 1/-1; }
  .row .meta{ grid-column: 1/-1; font-size: 10px;}
}

/* ---------- Figures ---------- */
.figures{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.fig{ padding: 48px 32px; border-right: 1px solid var(--line); }
.fig:last-child{ border-right: none;}
.fig .n{
  font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 7vw, 104px); line-height: 1;
  letter-spacing: -0.03em; color: #f5f3ee; font-variant-numeric: tabular-nums;
}
.fig .n em{ font-style: italic; color: var(--accent);}
.fig .cap{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 16px; max-width: 26ch; line-height: 1.5;}
.figures.four{ grid-template-columns: repeat(4, 1fr); }
.figures.four .fig .n{ font-size: clamp(44px, 5vw, 76px); }
.figures.four .fig{ padding: 40px 26px; }
@media (max-width: 980px){ .figures.four{ grid-template-columns: 1fr 1fr; } .figures.four .fig:nth-child(2){ border-right: none; } .figures.four .fig:nth-child(1), .figures.four .fig:nth-child(2){ border-bottom: 1px solid var(--line); } }
@media (max-width: 780px){ .figures{ grid-template-columns: 1fr;} .fig{ border-right: none; border-bottom: 1px solid var(--line);} .fig:last-child{ border-bottom: none;} .figures.four{ grid-template-columns: 1fr; } .figures.four .fig{ border-right: none; } }

/* ---------- Manifesto / CTA section ---------- */
.manifesto{ padding: 224px 40px; text-align: left; border-bottom: 1px solid var(--line); }
.manifesto .wrap{ display: grid; grid-template-columns: 120px 1fr; gap: 40px; }
.manifesto h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 6vw, 96px); line-height: 1; letter-spacing: -0.03em; margin: 0;
  max-width: 14ch; color: #f5f3ee;
}
.manifesto h2 em{ font-style: italic; color: var(--accent);}
.manifesto .cta-row{ margin-top: 56px; display:flex; gap: 16px; flex-wrap: wrap;}
@media (max-width: 780px){ .manifesto .wrap{ grid-template-columns: 1fr; } .manifesto{ padding: 140px 20px;} }

/* ---------- Footer ---------- */
footer{
  padding: 60px 40px 28px;
  display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; align-items: start;
  font-size: 13px;
}
footer .col h4{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 16px;}
footer .col a{ display:block; color: #d9d3c4; padding: 4px 0; }
footer .col a:hover{ color: var(--accent);}
footer .wordmark{
  grid-column: 1/-1; margin-top: 8px; user-select: none;
  display: flex; align-items: center; justify-content: flex-start;
}
footer .wordmark img{ width: min(620px, 92%); height: auto; display: block; opacity: 0.95; }
footer .foot-bar{ grid-column: 1/-1; display:flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; padding-top: 20px; border-top: 1px solid var(--line); margin-top: 20px;}
@media (max-width: 780px){ footer{ grid-template-columns: 1fr 1fr;} footer .foot-bar{ flex-direction: column; gap: 8px;} }

/* ---------- Reveal ---------- */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease;}
.reveal.in{ opacity: 1; transform: none;}

/* ---------- Projects ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 20px; padding: 0 0 24px; border-bottom: 1px solid var(--line);}
.chip{
  appearance:none; border: 1px solid var(--line); background: transparent; color: #d9d3c4;
  padding: 8px 14px; border-radius: 999px; font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: -0.005em; cursor: pointer; display:inline-flex; align-items:center; gap:8px;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover{ border-color: #f5f3ee; color: #f5f3ee; }
.chip.is-active{ background: #f5f3ee; color: #141311; border-color: #f5f3ee;}
.chip .n{ font-family: var(--mono); font-size: 10px; opacity: .7;}

.plist{ display:flex; flex-direction: column; }
.prow{
  display:grid; grid-template-columns: 80px 1.4fr 2fr 1fr auto; gap: 32px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--line);
  cursor: pointer; text-align: left; background: transparent;
  border-left:0; border-right:0; border-top:0; font: inherit; color: inherit; width: 100%;
  transition: padding .35s ease, background .35s ease;
  position: relative;
}
.prow::before{
  content:""; position:absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--accent);
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.prow:hover{ padding-left: 40px;}
.prow:hover::before{ width: 24px;}
.prow .num{ font-family: var(--mono); font-size: 12px; color: var(--muted);}
.prow .ptitle{
  font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1; letter-spacing: -0.015em; color: #f5f3ee;
}
.prow:hover .ptitle{ font-style: italic; color: var(--accent);}
.prow .pdesc{ color: #d9d3c4; font-size: 15px; line-height: 1.5; max-width: 54ch; }
.prow .ptags{ display:flex; flex-wrap:wrap; gap: 6px; justify-content: flex-start;}
.tag{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border:1px solid var(--line); padding: 4px 8px; border-radius: 4px;}
.prow .popen{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;}
.prow:hover .popen{ color: var(--accent);}
.prow.is-hidden{ display: none;}
@media (max-width: 900px){
  .prow{ grid-template-columns: 40px 1fr auto; gap: 12px 16px; }
  .prow .pdesc, .prow .ptags{ grid-column: 1/-1;}
}

/* ---------- Drawer ---------- */
.drawer{ position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.drawer.open{ pointer-events: auto;}
.drawer-scrim{ position:absolute; inset:0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity .35s; backdrop-filter: blur(2px);}
.drawer.open .drawer-scrim{ opacity: 1;}
.drawer-panel{
  position:absolute; top:0; right:0; height: 100%; width: min(680px, 96vw);
  background: rgba(20,19,17,0.92); backdrop-filter: blur(20px);
  border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .5s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
}
.drawer.open .drawer-panel{ transform: none;}
.drawer-hd{ display:flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 28px 40px 20px; border-bottom: 1px solid var(--line);}
.drawer-title{ font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 10px 0 0; color: #f5f3ee; max-width: 20ch;}
.drawer-x{ appearance:none; background: transparent; border: 1px solid var(--line); width: 36px; height:36px; border-radius: 999px; color: #d9d3c4; cursor: pointer; display:grid; place-items:center; flex-shrink:0;}
.drawer-x:hover{ border-color: #f5f3ee; color: #f5f3ee;}
.drawer-body{ padding: 28px 40px 40px; overflow-y: auto; flex: 1;}
.drawer-ft{ display:flex; justify-content: space-between; padding: 20px 40px 28px; border-top: 1px solid var(--line); gap: 12px;}
.drawer-ft .btn{ padding: 10px 18px; font-size: 13px;}
@media (max-width: 640px){ .drawer-hd, .drawer-body, .drawer-ft{ padding-left: 20px; padding-right: 20px;} }

.d-section{ margin-bottom: 32px;}
.d-section h4{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; font-weight: 500;}
.d-section p{ font-size: 15px; line-height: 1.6; color: #d9d3c4; margin: 0 0 12px;}
.d-kv{ display: grid; grid-template-columns: 140px 1fr; gap: 10px 20px; font-size: 14px;}
.d-kv dt{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 3px;}
.d-kv dd{ margin: 0; color: #f5f3ee;}
.d-stack{ display:flex; flex-wrap:wrap; gap: 6px;}
.d-stack .tag{ color: #d9d3c4; border-color: var(--line);}
.d-steps{ list-style: none; padding: 0; margin: 0; counter-reset: step;}
.d-steps li{ position: relative; padding: 14px 0 14px 48px; border-bottom: 1px solid var(--line); counter-increment: step;}
.d-steps li:last-child{ border-bottom: none;}
.d-steps li::before{ content: counter(step, decimal-leading-zero); position:absolute; left: 0; top: 16px; font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em;}
.d-steps li b{ display:block; color: #f5f3ee; font-weight: 600; font-size: 14px; margin-bottom: 2px;}
.d-steps li span{ color: #d9d3c4; font-size: 14px; line-height: 1.5;}
.d-callout{ border-left: 2px solid var(--accent); padding: 4px 0 4px 16px; color: #f5f3ee; font-size: 14px; line-height: 1.55; margin: 16px 0;}
.d-callout b{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); display:block; margin-bottom: 4px;}

/* Problem / Action / Result block in project drawer */
.d-par{ display:flex; flex-direction:column; gap:1px; margin-bottom:32px; border:1px solid var(--line); background:rgba(245,243,238,0.02); }
.par-row{ display:grid; grid-template-columns:96px 1fr; gap:16px; padding:16px 18px; }
.par-row + .par-row{ border-top:1px solid var(--line); }
.par-k{ font-family:var(--mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.par-p .par-k{ color:#d9d3c4; }
.par-r .par-k{ color:var(--accent); }
.par-v{ font-size:14.5px; line-height:1.55; color:#d9d3c4; }
.par-r .par-v{ color:#f5f3ee; }
@media (max-width:560px){ .par-row{ grid-template-columns:1fr; gap:6px; } }

/* ---------- Schematic diagrams (distinct per project, shared visual language) ---------- */
.d-diagram{
  padding: 22px 20px; border: 1px solid var(--line); border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, rgba(245,243,238,0.015) 0 9px, transparent 9px 18px),
    rgba(245,243,238,0.02);
}
.dg{ width: 100%; height: auto; display: block; }
.dg rect, .dg line, .dg polyline, .dg path, .dg circle{ vector-effect: non-scaling-stroke; }
.dg .bx{ fill: rgba(245,243,238,0.04); stroke: var(--line); stroke-width: 1; }
.dg .bx-a{ fill: rgba(201,163,91,0.10); stroke: var(--accent); stroke-width: 1; }
.dg .cap{ fill: var(--accent); opacity: 0.5; stroke: none; }
.dg .ln{ stroke: var(--accent); stroke-width: 1; fill: none; opacity: 0.78; }
.dg .ln-d{ stroke: var(--line); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.dg .lbl{ fill: #f5f3ee; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; }
.dg .lbl-a{ fill: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; }
.dg .lbl-d{ fill: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; }
.dg .chev{ fill: var(--accent); font-family: var(--mono); font-size: 13px; opacity: 0.7; }

/* ---------- Contact page ---------- */
.contact-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding-top: 40px; border-top: 1px solid var(--line); margin-top: 20px;
}
.contact-grid h3{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; font-weight: 500;}
.contact-grid p, .contact-grid a{ color: #d9d3c4; font-size: 15px; line-height: 1.6; margin: 0 0 8px; display: block;}
.contact-grid a.link{ color: #f5f3ee; border-bottom: 1px solid var(--line); padding-bottom: 2px; display: inline-block;}
.contact-grid a.link:hover{ color: var(--accent); border-color: var(--accent);}
@media (max-width: 720px){ .contact-grid{ grid-template-columns: 1fr; gap: 32px;} }


/* ---------- About page ---------- */
.about-hero{ padding: 72px 40px 96px; position: relative; overflow: hidden; isolation: isolate;
  background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.about-hero .wrap{
  display: flex; flex-direction: column; gap: 36px;
  position: relative; z-index: 1;
}
.about-hero .lead{ display:flex; flex-direction: column; gap: 32px; }
.about-hero h1{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.03em;
  color: #f5f3ee; margin: 0; max-width: 16ch;
}
.about-hero h1 em{ color: var(--accent); font-style: italic; }

/* Photo + headline side by side, below the meta block */
.about-body{ display: grid; grid-template-columns: 320px 1fr; gap: 192px; align-items: center; }
@media (max-width: 1100px){ .about-body{ gap: 96px; } }
@media (max-width: 860px){ .about-body{ grid-template-columns: 1fr; gap: 48px; align-items: start;} }

/* Portrait panel */
.portrait-panel{ display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 320px; }
.portrait-frame{
  position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(245,243,238,0.03);
}
.portrait-frame img{
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  filter: grayscale(0.12) contrast(1.05);
}
.portrait-frame::before{
  content:""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--accent); opacity: 0.7; z-index: 2;
}
.portrait-frame::after{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(20,19,17,0.55) 100%);
}
.portrait-plate{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 0 0; 
}
.portrait-plate .who b{
  display:block; color: #f5f3ee; font-weight: 600; font-family: var(--sans);
  letter-spacing: -0.01em; font-size: 22px; line-height: 1;
}
.portrait-plate .who span{
  display:block; font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px;
}
.portrait-plate .tagq{
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 860px){
  .about-hero{ padding: 56px 20px 64px;}
  .portrait-panel{ max-width: 320px; }
}

.bio{ display:grid; grid-template-columns: 120px 1fr 1fr; gap: 40px; padding-top: 40px; border-top: 1px solid var(--line); margin-top: 20px;}
.bio p{ font-size: 17px; line-height: 1.6; color: #d9d3c4; max-width: 56ch; margin: 0 0 18px;}
.bio p b{ color: #f5f3ee; font-weight: 600;}
.bio .col-left p:first-child::first-letter{ font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 0.85; float: left; padding: 8px 12px 0 0; color: var(--accent);}
@media (max-width: 900px){ .bio{ grid-template-columns: 1fr; gap: 24px;} }

.principles{ display:grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.principles .p{ padding: 40px 32px; border-right: 1px solid var(--line);}
.principles .p:last-child{ border-right: none;}
.principles .p .num{ font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.15em;}
.principles .p h3{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; color: #f5f3ee; margin: 12px 0 12px;}
.principles .p p{ color: #d9d3c4; font-size: 14px; line-height: 1.55; margin: 0;}
@media (max-width: 900px){ .principles{ grid-template-columns: 1fr 1fr;} .principles .p:nth-child(2){ border-right: none;} }
@media (max-width: 540px){ .principles{ grid-template-columns: 1fr;} .principles .p{ border-right: none; border-bottom: 1px solid var(--line);} .principles .p:last-child{ border-bottom:none;} }

.timeline{ position: relative; padding: 0;}
.tl-row{ display:block; padding: 32px 0; border-bottom: 1px solid var(--line);}
.tl-row:last-child{ border-bottom: none;}
.tl-year{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.15em; padding-top: 8px;}
.tl-row h4{ font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.015em; color: #f5f3ee; margin: 0 0 8px;}
.tl-row h4 em{ font-style: italic; color: var(--accent);}
.tl-row p{ color: #d9d3c4; font-size: 15px; line-height: 1.55; margin: 0; max-width: 64ch;}
.tl-meta{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 14px;}
.tl-bullets{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; max-width: 78ch;}
.tl-bullets li{ position: relative; padding-left: 22px; color: #d9d3c4; font-size: 14.5px; line-height: 1.5;}
.tl-bullets li::before{ content: "\2014"; position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--mono); font-size: 13px;}

/* ---------- Profilo showcase (home) ---------- */
.profilo{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.pf-card{
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 22px; min-height: 230px;
  border: 1px solid var(--line); background: rgba(245,243,238,0.03);
  text-decoration: none; overflow: hidden;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.pf-card::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background: var(--accent); opacity:0; transition: opacity .3s ease;
}
.pf-card:hover{ background: rgba(201,163,91,0.06); border-color: var(--accent); transform: translateY(-3px); }
.pf-card:hover::before{ opacity:0.7; }
/* staggered spans */
.pf-1{ grid-column: span 4; }
.pf-2{ grid-column: span 2; }
.pf-3{ grid-column: span 3; }
.pf-all{ grid-column: span 3; background: rgba(201,163,91,0.07); justify-content: center; align-items: flex-start; }
.pf-about{ grid-column: span 6; min-height: 200px; }
.pf-about .pf-title{ font-size: clamp(28px, 3.6vw, 48px); }
.pf-stat{ grid-column: span 2; min-height: 150px; justify-content: center; align-items: flex-start; }
.pf-svc{ grid-column: span 2; min-height: 180px; }
.pf-contact{ grid-column: span 6; min-height: 180px; background: rgba(201,163,91,0.07); }
.pf-contact .pf-title{ font-size: clamp(26px, 3.2vw, 44px); }
.pf-idx{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--accent); }
.pf-tag{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; align-self: flex-start; }
.pf-title{ font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -0.015em; color: #f5f3ee; margin-top: auto; }
.pf-card:hover .pf-title{ color: var(--accent); font-style: italic; }
.pf-desc{ font-size: 14px; line-height: 1.5; color: #d9d3c4; max-width: 46ch; }
.pf-go{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; transition: color .25s; }
.pf-card:hover .pf-go{ color: var(--accent); }
.pf-count{ font-family: var(--serif); font-size: clamp(64px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pf-count-label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #f5f3ee; }
@media (max-width: 860px){
  .profilo{ grid-template-columns: 1fr 1fr; }
  .pf-1, .pf-2, .pf-3, .pf-all, .pf-about, .pf-contact{ grid-column: span 2; }
  .pf-stat, .pf-svc{ grid-column: span 1; }
}
@media (max-width: 560px){
  .profilo{ grid-template-columns: 1fr; }
  .pf-1, .pf-2, .pf-3, .pf-all, .pf-about, .pf-contact, .pf-stat, .pf-svc{ grid-column: span 1; }
}

/* Portrait as LinkedIn link */
a.portrait-frame{ display: block; cursor: pointer; text-decoration: none; }
.portrait-link{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 12px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #f5f3ee;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
a.portrait-frame:hover .portrait-link{ opacity: 1; transform: none; }
a.portrait-frame:hover img{ filter: grayscale(0) contrast(1.05); }
.portrait-plate a.tagq{ text-decoration: none; transition: color .2s; }
.portrait-plate a.tagq:hover{ color: var(--accent-2); }

/* Resume-style core competencies */
.competencies{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line);
}
.comp-col h4{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; font-weight: 500;}
.comp-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px;}
.comp-col li{ position: relative; padding-left: 18px; color: #d9d3c4; font-size: 14px; line-height: 1.45;}
.comp-col li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border: 1px solid var(--accent); }
@media (max-width: 860px){ .competencies{ grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 720px){ .tl-row{ grid-template-columns: 1fr; gap: 8px;} }

/* ---------- Services bento (creative) ---------- */
.svc-bento{ display:grid; grid-template-columns: repeat(6,1fr); gap:14px; }
.svc-tile{
  position:relative; overflow:hidden; border:1px solid var(--line);
  background:rgba(245,243,238,0.03); padding:30px 28px 26px;
  display:flex; flex-direction:column; gap:14px; min-height:268px;
  text-decoration:none; transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.svc-tile::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--accent); opacity:0; transition:opacity .3s; }
.svc-tile:hover{ background:rgba(201,163,91,0.06); border-color:var(--accent); transform:translateY(-3px); }
.svc-tile:hover::before{ opacity:.7; }
.svc-ghost{
  position:absolute; top:-26px; right:2px; font-family:var(--serif);
  font-size:150px; line-height:1; color:rgba(245,243,238,0.05);
  pointer-events:none; font-variant-numeric:tabular-nums; transition:color .3s;
}
.svc-tile:hover .svc-ghost{ color:rgba(201,163,91,0.13); }
.svc-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); position:relative; z-index:1; }
.svc-name{ font-family:var(--serif); font-size:clamp(25px,2.5vw,36px); line-height:1.05; letter-spacing:-0.02em; color:#f5f3ee; position:relative; z-index:1; }
.svc-tile:hover .svc-name{ font-style:italic; color:var(--accent); }
.svc-proof{ font-size:14.5px; line-height:1.55; color:#d9d3c4; margin-top:auto; max-width:54ch; position:relative; z-index:1; }
.svc-proof b{ color:#f5f3ee; font-weight:600; }
.svc-chips{ display:flex; flex-wrap:wrap; gap:6px; position:relative; z-index:1; }
.svc-chips span{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:4px 8px; }
.svc-go{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); position:relative; z-index:1; transition:color .25s; }
.svc-tile:hover .svc-go{ color:var(--accent); }
/* asymmetric spans */
.sv-1{ grid-column:span 4; }
.sv-2{ grid-column:span 2; }
.sv-3{ grid-column:span 2; }
.sv-4{ grid-column:span 2; }
.sv-5{ grid-column:span 2; }
.sv-6{ grid-column:span 6; min-height:200px; flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:20px 48px; background:rgba(201,163,91,0.06); }
.sv-6 .svc-head6{ display:flex; flex-direction:column; gap:14px; flex:1 1 320px; }
.sv-6 .svc-proof{ flex:1 1 360px; margin-top:0; }
.sv-6 .svc-ghost{ font-size:200px; top:-40px; }
@media (max-width: 860px){
  .svc-bento{ grid-template-columns:1fr 1fr; }
  .sv-1,.sv-2,.sv-3,.sv-4,.sv-5,.sv-6{ grid-column:span 2; }
  .sv-6{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px){
  .svc-bento{ grid-template-columns:1fr; }
  .sv-1,.sv-2,.sv-3,.sv-4,.sv-5,.sv-6{ grid-column:span 1; }
}

.toolbelt{ display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px;}
.toolbelt .tag{ color: #d9d3c4; border-color: var(--line);}

/* ---------- Capabilities explorer (home) ---------- */
.cap-explorer{
  display: grid; grid-template-columns: 1.3fr 1fr;
  border: 1px solid var(--line); background: rgba(245,243,238,0.02);
}
.cap-feature{
  position: relative; overflow: hidden;
  padding: 52px 48px; border-right: 1px solid var(--line);
  min-height: 460px; display: flex; flex-direction: column; gap: 22px;
}
.cap-ghost{
  position: absolute; top: -38px; right: 8px; font-family: var(--serif);
  font-size: 230px; line-height: 1; color: rgba(201,163,91,0.10);
  pointer-events: none; font-variant-numeric: tabular-nums; user-select: none;
  transition: color .4s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.cap-explorer:hover .cap-ghost{ color: rgba(201,163,91,0.14); }
.cap-feature-inner{
  display: flex; flex-direction: column; gap: 20px; flex: 1;
  transition: opacity .32s ease, transform .32s ease;
}
.cap-feature.swap .cap-feature-inner{ opacity: 0; transform: translateY(10px); }
.cap-kicker{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); position: relative; z-index: 1; }
.cap-title{ font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -0.02em; color: #f5f3ee; position: relative; z-index: 1; max-width: 15ch; margin: 0; }
.cap-desc{ font-size: 16.5px; line-height: 1.6; color: #d9d3c4; position: relative; z-index: 1; max-width: 46ch; margin: 0; }
.cap-chips{ display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; margin-top: auto; }
.cap-chips span{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 5px 9px; white-space: nowrap; }
.cap-link{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #f5f3ee; position: relative; z-index: 1; transition: color .25s; }
.cap-link:hover{ color: var(--accent); }

.cap-menu{ display: flex; flex-direction: column; }
.cap-item{
  appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px;
  padding: 0 24px; min-height: 76px; flex: 1 1 0; position: relative;
  transition: background .3s ease, padding-left .3s ease;
}
.cap-item:last-child{ border-bottom: none; }
.cap-item::before{ content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.cap-item .ci-num{ font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cap-item .ci-name{ font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: #d9d3c4; line-height: 1.25; }
.cap-item .ci-go{ opacity: 0; font-family: var(--mono); font-size: 13px; color: var(--accent); transition: opacity .25s, transform .25s; transform: translateX(-4px); }
.cap-item:hover{ background: rgba(245,243,238,0.03); padding-left: 30px; }
.cap-item.is-active{ background: rgba(201,163,91,0.07); }
.cap-item.is-active::before{ width: 3px; }
.cap-item.is-active .ci-name{ color: #f5f3ee; }
.cap-item.is-active .ci-num{ color: var(--accent); }
.cap-item.is-active .ci-go{ opacity: 1; transform: none; }
@media (max-width: 900px){
  .cap-explorer{ grid-template-columns: 1fr; }
  .cap-feature{ border-right: none; border-bottom: 1px solid var(--line); min-height: 0; padding: 40px 28px; }
  .cap-ghost{ font-size: 150px; top: -24px; }
  .cap-item{ min-height: 64px; }
}
@media (prefers-reduced-motion: reduce){
  .cap-feature-inner, .cap-ghost, .cap-item, .cap-item::before{ transition: none; }
}

/* Richer explorer (Capabilities page) */
.cap-explorer.full .cap-feature{ min-height: 640px; }
.cap-outcome{ display: flex; flex-direction: column; gap: 5px; border-left: 2px solid var(--accent); padding: 2px 0 2px 16px; position: relative; z-index: 1; }
.cap-outcome .lbl{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.cap-outcome p{ margin: 0; font-size: 14.5px; line-height: 1.5; color: #f5f3ee; max-width: 48ch; }
.cf-foot-left{ display: flex; flex-direction: column; gap: 7px; }
.cap-deliver{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.cap-deliver b{ color: #d9d3c4; font-weight: 500; }

/* Slim section header (home preview) */
.sec-head{ display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.sec-head .sh-left{ display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.sec-head .label{ white-space: nowrap; padding-top: 0; }
.sec-head .sh-sub{ font-size: 14px; color: var(--muted); letter-spacing: -0.005em; }
.sec-head .sh-link{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .2s; }
.sec-head .sh-link:hover{ color: var(--accent); }
@media (max-width: 640px){ .sec-head{ flex-direction: column; gap: 10px; } }

/* Compact capabilities preview (home) */
.cap-preview{ display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.cap-pv{ display: flex; gap: 16px; align-items: baseline; padding: 22px 24px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-decoration: none; transition: background .25s ease, padding-left .25s ease; }
.cap-pv:nth-child(2n){ border-right: none; }
.cap-pv:nth-last-child(-n+2){ border-bottom: none; }
.cap-pv:hover{ background: rgba(201,163,91,0.06); padding-left: 30px; }
.cap-pv .pv-num{ font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 3px; flex-shrink: 0; }
.cap-pv .pv-body{ display: flex; flex-direction: column; gap: 4px; }
.cap-pv .pv-t{ font-family: var(--serif); font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; color: #f5f3ee; }
.cap-pv:hover .pv-t{ color: var(--accent); font-style: italic; }
.cap-pv .pv-d{ font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 720px){
  .cap-preview{ grid-template-columns: 1fr; }
  .cap-pv{ border-right: none; border-bottom: 1px solid var(--line); }
  .cap-pv:nth-last-child(-n+2){ border-bottom: 1px solid var(--line); }
  .cap-pv:last-child{ border-bottom: none; }
}
.cap-eyebrow{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); position: relative; z-index: 1; }
.cap-promise{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); position: relative; z-index: 1; }
.cap-includes{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 26px; position: relative; z-index: 1; }
.cap-includes li{ position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.42; color: #d9d3c4; }
.cap-includes li::before{ content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border: 1px solid var(--accent); }
.cap-control{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); position: relative; z-index: 1; }
.cap-control b{ color: var(--accent); font-weight: 500; }
.cap-feature-foot{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 900px){
  .cap-explorer.full .cap-feature{ min-height: 0; }
  .cap-includes{ grid-template-columns: 1fr; }
  .cap-feature-foot{ flex-direction: column; align-items: flex-start; }
}