/* ===== Julian Hill — Portfolio ===== */

/* Color system: black ground, one analogous red/orange pair — with two
   distinct JOBS, not one hue swapped for another everywhere teal used to be.
     --red    = system & interaction: nav, buttons, tags, the approach
                pipeline, filters, chevrons. Anything wayfinding.
     --orange = Julian's own voice: the hero eyebrow, each project's role
                caption, and the Personal Highlights panel. Nothing else
                uses it, so it stays legible as "this is personal," not
                just a second UI color.
   No beige/tan neutrals anywhere. */
:root{
  --bg:#0a0a0a;
  --bg-soft:#141414;
  --line:#2a2a2a;
  --text:#f2f2f0;
  --text-soft:#d8d8d6;
  --muted:#9c9c9c;

  --red:#ff2e63;
  --red-deep:#8f1436;
  --red-tint:#ff9db8;
  --red-wash:#241016;

  --orange:#ff5a1f;
  --orange-wash:#231206;

  --max:1180px;
  --serifgap:0.01em;
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.container{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* Type system: Bricolage Grotesque (display) for the few big brand-level
   statements only — nav mark, hero name, section titles. Everything else,
   including project/card headings and UI, is Space Grotesk. */
h1,h2{
  font-family:'Bricolage Grotesque', 'Space Grotesk', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
  text-transform:uppercase;
}
h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
}

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,10,10,0.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:transform .3s ease;
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
/* Title case, no uppercase shout, no default link underline. */
.nav-logo{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.2rem;
  letter-spacing:0; text-decoration:none; color:var(--text);
}
.nav-logo .nav-mark{display:inline; height:0.714em; width:auto; vertical-align:baseline; margin-right:0.35em;}
.nav-links{display:flex; gap:2rem; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none; font-size:0.88rem; text-transform:uppercase;
  letter-spacing:0.06em; font-weight:600; color:var(--text);
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
.nav-links a:hover{border-color:var(--red);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0;}

/* ===== Hero ===== */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 0 80px;
  position:relative;
}
/* Orange's first appearance: this is Julian's own line, not a system label. */
.hero .eyebrow{
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--orange); font-weight:600; margin-bottom:0.625rem;
}
.hero h1{
  font-size:clamp(3.2rem, 9vw, 7.5rem);
  line-height:0.92;
  text-transform:none;
  margin-bottom:0.625rem;
  display:inline-block;
  color:var(--text);
}
.hero h1 .name-accent{color:var(--red);}
.hero .subtitle{
  font-weight:400;
  font-size:clamp(1.25rem, 3.2vw, 1.9rem);
  color:var(--text);
  max-width:40ch;
  margin-bottom:0.625rem;
}
.hero .subtitle.subtitle-sub{
  font-size:clamp(1rem, 2.2vw, 1.3rem);
  color:var(--muted);
  margin-bottom:0;
}
/* Quick links under the splash text — the same pink pill as the site's other labels. */
.hero-links{display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:2.25rem;}
.hero-links a{
  border:1.5px solid var(--red); color:var(--red); text-decoration:none;
  font-weight:700; text-transform:uppercase; font-size:0.76rem; letter-spacing:0.02em;
  padding:0.45rem 1rem; border-radius:99px; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.hero-links a:hover, .hero-links a:focus-visible{background:var(--red); color:#fff;}
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.scroll-cue .line{width:1px; height:32px; background:var(--muted); animation:scrollpulse 1.8s ease-in-out infinite;}
@keyframes scrollpulse{0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;}}

/* ===== Keystone scroll journey: Hero / Approach / Services / The Ritual.
   One tall relative container; .kj-sticky pins for its entire scroll
   range. Left side (.kj-text-viewport) shows a left-aligned text column
   that's translated upward by scroll progress — real motion, not a
   crossfade, same physics as the old static hero's own scroll-away.
   Right side (.kj-arc-viewport) holds the Reason/Ritual/Reality diagram,
   which stays visually still and only swaps its own stage via
   [data-kstage] on .kj-sticky. Ported from the Keystone Arc Lab
   prototype (see CLAUDE.md). On narrow screens (<=900px) it falls back to
   text on top / graphic below. ===== */
.kj-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:row; background:var(--bg);
}
.kj-text-viewport{flex:0 0 55%; position:relative; overflow:hidden;}
.kj-text-track{position:relative; will-change:transform;}
/* Left padding lines the text up with the nav logo and the rest of the page. */
.kj-block{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:84px 2.5rem 32px max(28px, calc((100vw - 1180px) / 2 + 28px));
}
.kj-block h2{font-size:clamp(1.8rem, 3.6vw, 3rem); line-height:1.08; color:var(--text);}
.kj-block .logos{margin-top:2rem; padding-top:0; border-top:none;}
.kj-block .logos .label{font-size:0.72rem;}
.kj-block .stage-card{margin-top:1.5rem; max-width:640px;}

/* container-type lets the diagram and its labels size to this panel's own
   width (cqw) instead of the whole window's, so they fit the right-hand side. */
.kj-arc-viewport{
  flex:1 1 0; min-width:0; position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-left:1px solid #000; container-type:inline-size;
}
.khero-diagram{position:relative; width:min(860px, calc(100cqw - 48px));}
.khero-diagram svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.khero-diagram .kline{fill:none; stroke:var(--orange); stroke-width:3.5; stroke-linecap:round; transition:opacity .5s ease;}
.kword{
  position:absolute; font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800; font-size:clamp(0.75rem, 3.3cqw, 1.35rem); color:var(--text); text-align:center;
  white-space:nowrap;
}
.kbullets{
  list-style:none; margin:10px 0 0; padding:0; font-family:'Space Grotesk',sans-serif;
  font-weight:400; font-size:0.85rem; color:var(--text-soft); line-height:1.9;
  opacity:0; transition:opacity .5s ease; white-space:normal; text-align:left;
}
.kbullets li{position:relative; padding-left:16px;}
.kbullets li::before{content:"\2022"; position:absolute; left:0; color:var(--orange);}
.kj-sticky[data-kstage="1"] .kbullets{opacity:1;}

/* Services: Creators/Producers/Owners pills, same pink pill treatment as
   the real site's own segment labels below (not the orange used for the
   arc/words — same split as the rest of the page). */
/* Process page: Creation / Production / Business are pink pills sitting on the
   three arrows (same pill as the segment labels elsewhere on the site). Their
   background matches the page so each arrow reads as broken around its pill. */
.role-label{
  position:absolute; transform:translate(-50%, -50%);
  background:var(--bg); border:1.5px solid var(--red); color:var(--red);
  font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:0.76rem; letter-spacing:0.02em; padding:0.45rem 1rem; border-radius:99px;
  opacity:0; transition:opacity .5s ease; white-space:nowrap;
}
#khPath3{opacity:0; transition:opacity .5s ease;}
.kj-sticky[data-kstage="2"] .role-label:not(.wwd-label){opacity:1;}
/* The Reason -> The Reality arrow stays on from Process through What We Do into Services by Phase,
   where it becomes the straight base line the milestones sit on. */
.kj-sticky[data-kstage="2"] #khPath3, .kj-sticky[data-kstage="3"] #khPath3, .kj-sticky[data-kstage="4"] #khPath3{opacity:1;}

/* What We Do: the Process triangle with the roles renamed, HapStudio in the middle, faint dotted arrows from
   each corner through it to the opposite role, and the services beside each role. */
.kj-sticky[data-kstage="3"] .wwd-label{opacity:1;}
.hap-lines{opacity:0; transition:opacity .5s ease;}
.hap-lines path{fill:none; stroke:var(--red); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:0.1 6;}
.kj-sticky[data-kstage="3"] .hap-lines{opacity:.5;}
.hap-word{
  position:absolute; transform:translate(-50%, -50%);
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif; font-weight:800;
  font-size:clamp(0.75rem, 3.3cqw, 1.35rem); color:var(--red); white-space:nowrap;
  background:var(--bg); padding:0.15em 0.4em; opacity:0; transition:opacity .5s ease;
}
.wwd-services{
  position:absolute; display:flex; flex-direction:column; gap:0.45em;
  font-family:'Space Grotesk',sans-serif; font-weight:400; font-style:italic;
  font-size:calc(clamp(0.62rem, 2.4cqw, 1rem) - 2pt); line-height:1.2; color:#bcbcba; white-space:nowrap;
  opacity:0; transition:opacity .5s ease;
}
.kj-sticky[data-kstage="3"] .hap-word, .kj-sticky[data-kstage="3"] .wwd-services{opacity:1;}

/* Services by Phase: three arcs over a straight line, pink dots at the joins, a pink drop from each point to its
   milestone below, and small white italic labels at each end of the arcs and under each stretch of line. */
.khero-diagram{transition:transform .5s ease;}
.phase-dot{
  position:absolute; transform:translate(-50%, -50%); font-size:clamp(0.75rem, 3.3cqw, 1.35rem);
  width:max(0.6em, 10px); height:max(0.6em, 10px); border-radius:50%; background:var(--red);
  opacity:0; transition:opacity .5s ease;
}
.arc-label{
  position:absolute; transform:translate(-50%, -50%);
  font-family:'Space Grotesk',sans-serif; font-weight:400; font-style:italic;
  font-size:calc(clamp(0.45rem, 1.6cqw, 0.66rem) - 1pt); color:var(--text); white-space:nowrap;
  opacity:0; transition:opacity .5s ease;
}
.milestone{
  position:absolute; transform:translateX(-50%);
  font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(0.55rem, 2.2cqw, 0.95rem);
  line-height:1.25; color:var(--text); text-align:center; white-space:nowrap;
  opacity:0; transition:opacity .5s ease;
}
.milestone-lines{opacity:0; transition:opacity .5s ease;}
.milestone-lines path{fill:none; stroke:var(--red); stroke-width:2.5; stroke-linecap:round;}
.kj-sticky[data-kstage="4"] .phase-dot, .kj-sticky[data-kstage="4"] .arc-label,
.kj-sticky[data-kstage="4"] .milestone, .kj-sticky[data-kstage="4"] .milestone-lines{opacity:1;}

/* Transition between What We Do and Services by Phase (script.js, kMorphTo): the arch shrinks into the centre arc
   and the other two slide out of it. The paths that draw the shrinking arch are only shown by the script. */
.khero-diagram .kline.morph-line{opacity:0; transition:none;}
/* On the way in, the dots, labels and milestones wait until the arcs have split... */
.kj-sticky[data-kstage="4"] .phase-dot, .kj-sticky[data-kstage="4"] .arc-label,
.kj-sticky[data-kstage="4"] .milestone, .kj-sticky[data-kstage="4"] .milestone-lines,
.kj-sticky[data-kstage="4"] #kpBaseArrow1, .kj-sticky[data-kstage="4"] #kpBaseArrow2{transition-delay:.9s;}
/* ...and on the way back, What We Do's labels wait until the arch has re-formed. */
.kj-sticky.kj-unmorphing .wwd-label, .kj-sticky.kj-unmorphing .hap-lines,
.kj-sticky.kj-unmorphing .hap-word, .kj-sticky.kj-unmorphing .wwd-services{transition-delay:.9s;}
/* Short caption under each word on the Approach and Process pages: light grey italic. */
.kword-sub{
  position:absolute; left:50%; top:1.02em; transform:translateX(-50%);
  white-space:nowrap; opacity:0; transition:opacity .5s ease;
}
.kword-sub span{line-height:1.2; font-family:'Space Grotesk',sans-serif; font-weight:400; font-style:italic; font-size:calc(clamp(0.7rem, 2.4cqw, 0.95rem) - 1pt); color:#bcbcba;}
.kj-sticky[data-kstage="1"] .kword-sub, .kj-sticky[data-kstage="2"] .kword-sub{opacity:1;}
.kj-sticky:not([data-kstage="1"]):not([data-kstage="2"]) .kbullets{opacity:0;}

/* The Ritual: 3-node triangle crossfades into a 4-node braided chain
   (Reason/Concept/Design/Reality). Different topology, so this is a
   crossfade handoff rather than a continuous path-morph. */
#kwRitual{transition:opacity .5s ease;}
.kj-sticky[data-kstage="4"] #khPath1, .kj-sticky[data-kstage="4"] #khPath2{opacity:0;}
.process-line{opacity:0; stroke-width:3.5;}
.kj-sticky[data-kstage="4"] .process-line{opacity:1;}

.kj-sticky .scroll-cue{opacity:0; transition:opacity .4s ease; left:27.5%;}
.kj-sticky[data-kstage="0"] .scroll-cue{opacity:1;}

/* These duplicate cards have no toggle button (unlike the real accordion
   below), so the mobile collapsed-by-default rule must not apply to them. */
.kj-block .stage-card-body{display:block;}

@container (max-width:520px){
  .kbullets{font-size:0.72rem; line-height:1.75;}
  #kwRitual .kbullets{white-space:nowrap;}
  .role-label{font-size:0.62rem; padding:0.3rem 0.7rem;}
  .hap-word{font-size:0.7rem;}
  /* 2pt smaller than before, but never below 7px so it stays readable on a phone. */
  .wwd-services{font-size:max(7px, calc(0.56rem - 2pt));}
  /* Services by Phase: smaller labels so the dots, arcs and milestones get the room (the three main words stay
     the same size as on the other pages). */
  .arc-label{font-size:max(6px, calc(0.42rem - 1pt));}
  .milestone{font-size:0.5rem;}
}

@media (min-width:901px){
  .kj-block h1{font-size:clamp(3.2rem, 7.5vw, 6.2rem);}
}

@media (max-width:900px){
  .kj-sticky{flex-direction:column;}
  .kj-text-viewport{flex:1 1 50%;}
  .kj-arc-viewport{flex:1 1 50%; border-left:none; border-top:1px solid #000;}
  .kj-block{min-height:50vh; padding:32px 28px;}
  .kj-block h2{font-size:1.6rem;}
  .kj-sticky .scroll-cue{left:50%;}
}

/* Approach page: a statement line in the heading typeface, under the small label. */
.kj-statement{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.6rem, 2.6vw, 2.4rem); line-height:1.1; letter-spacing:-0.01em; color:var(--text); margin:0.25rem 0 0.75rem; max-width:22ch;}
.kj-lede{margin-top:1rem; font-weight:700; font-style:italic; color:var(--text); font-size:1.2rem; line-height:1.4; max-width:46ch;}
.kj-points{margin:1rem 0 0; padding-left:1.2rem; color:var(--text-soft); font-size:1.05rem; line-height:1.6;}
.kj-points li{margin-bottom:0.4rem;}
/* Sub-lists on the Approach and Process pages: grey italic dashes, indented one step, in line with the text of the title above. */
.kj-points li ul{list-style:none; margin:0.4rem 0 1rem 0; padding:0;}
.kj-points li li{margin-bottom:0; color:var(--muted); font-style:italic; font-size:0.95rem; line-height:1.55;}
.kj-points li li::before{content:"\2013  ";}
.kj-points li::marker{color:var(--orange);}
.kj-points strong{color:var(--text); font-weight:700;}
@media (max-width:900px){
  .kj-points{font-size:0.95rem;}
  .kj-lede{font-size:1.05rem;}
}

.kj-process-lede{margin-top:1rem; font-weight:700; font-style:italic; color:var(--text); font-size:1.2rem; line-height:1.4; max-width:46ch;}
/* What We Do: three "We work with…" lines, italic with the role in bold, spaced apart. */
.kj-wwd{list-style:none; margin:2.2rem 0 0; padding:0 0 0 1.2rem; font-style:italic; color:var(--text-soft); font-size:1.05rem; line-height:1.45; max-width:36ch;}
.kj-wwd li{margin-bottom:1.8rem;}
.kj-wwd strong{color:var(--text); font-weight:700;}
@media (max-width:900px){ .kj-wwd{font-size:0.95rem; margin-top:1.4rem;} .kj-wwd li{margin-bottom:1rem;} }
@media (max-width:900px){
  .kj-process-lede{font-size:1.05rem;}
}

/* Services page: the three phase lists side by side — pink title, bold subtitle, bullets. */
.kj-services{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:1.5rem;}
.kj-svc h4{font-size:1rem; color:var(--red); margin:0 0 0.9rem;}
/* Each phase lists its sub-headings as bullets; each one drops down to its detail. */
.svc-item{margin:0 0 0.55rem;}
.svc-item summary{
  list-style:none; cursor:pointer; position:relative; padding-left:1rem;
  font-weight:700; font-size:0.85rem; color:var(--text); line-height:1.3;
}
.svc-item summary::-webkit-details-marker{display:none;}
.svc-item summary::before{content:"\2022"; position:absolute; left:0; color:var(--orange);}
.svc-item summary::after{content:"+"; color:var(--red); font-weight:400; margin-left:0.45rem;}
.svc-item[open] summary::after{content:"\2212";}
.svc-item summary:hover{color:var(--red);}
.svc-item ul{margin:0.4rem 0 0.2rem; padding-left:2.1rem;}
.kj-svc ul{font-size:0.8rem; color:var(--text-soft); line-height:1.4;}
.kj-svc li{margin-bottom:0.2rem;}
@media (max-width:640px){ .kj-services{grid-template-columns:1fr; gap:1.25rem;} }
/* Work Phases: laid out like the Process list (each phase in bold, its steps beneath it); each step drops down to its
   detail on rollover (tap on touch screens, see script.js). */
.kj-phases > li > ul > li::before{content:none;}
.kj-phases .svc-item{margin:0;}
.kj-phases .svc-item summary{
  display:block; padding-left:0; font-weight:inherit; font-size:inherit; color:inherit; line-height:inherit;
}
.kj-phases .svc-item summary::before{content:"\2013  "; position:static; color:inherit;}
.kj-phases .svc-item summary::after{content:"+"; color:var(--red); font-style:normal; font-weight:400; margin-left:0.4rem;}
.kj-phases .svc-item[open] summary::after{content:"\2212";}
.kj-phases .svc-item summary:hover, .kj-phases .svc-item[open] summary{color:var(--red);}
.kj-phases .svc-item ul{list-style:disc; margin:0.2rem 0 0.45rem; padding-left:2.2rem;}
.kj-phases .svc-item ul li{font-style:normal; font-size:0.85rem; color:var(--text-soft); line-height:1.45; margin-bottom:0.1rem;}
.kj-phases .svc-item ul li::before{content:none;}
.kj-phases .svc-item ul li::marker{color:var(--orange);}
@media (hover:hover){ .kj-phases .svc-item summary{cursor:default;} }

/* Page 3 wrapper: the global section padding would add dead space around the pinned stage. */
.approach-journey{padding:0;}
.about-kicker{
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--red); font-weight:600; margin-bottom:1.5rem;
}
.kj-block .kicker{
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--red); font-weight:600; margin-bottom:0.75rem;
}

/* ===== Section basics ===== */
section{padding:6rem 0;}
.section-head{margin-bottom:3rem; max-width:760px;}
.section-head .kicker{
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--red); font-weight:600; margin-bottom:0.75rem;
}
.section-head h2{font-size:clamp(2rem, 4.5vw, 3rem); line-height:1.05; color:var(--text);}
.section-head p{color:var(--muted); margin-top:1rem; font-size:1.05rem; max-width:640px;}

/* ===== About ===== */
.about{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-height:100svh; display:flex; align-items:center;}
.about > .container{width:100%;}
.about-grid{display:grid; grid-template-columns:280px 1fr; gap:3.5rem; align-items:start;}
.about-photo{position:sticky; top:100px;}
.about-photo img{border-radius:var(--radius); filter:grayscale(0.15) brightness(0.96);}
.about-photo .caption{margin-top:1rem; font-size:0.85rem; color:var(--muted);}
.about-copy p{margin:0 0 1.15rem; color:var(--text-soft); max-width:66ch;}
.about-copy p:last-child{margin-bottom:0;}
/* Bio in three beats: bold lead, a short bullet strip (same look as the
   stage-card bullets), then the regular-weight history. */
.about-lead{margin-bottom:1.75rem;}
.about-lead p{color:var(--text); font-weight:400;}
.about-lead strong{font-weight:700;}
/* World map of project cities, under the logos (inline SVG, see T-008). */
.bio-map{margin-top:1.75rem;}
.bio-map svg{display:block; width:100%; height:auto;}
/* Closing lines at the end of the bio: same white type as the opening paragraphs. */
.about-coda{margin:1.75rem 0 0;}
.about-points{
  list-style:none; margin:0 0 1.75rem; padding:0;
  display:flex; flex-wrap:wrap; gap:0.6rem;
}
/* Same pill as the Concept Development / Project Development / Project
   Delivery segment labels in the Approach graphic. */
.about-points li{
  border:1.5px solid var(--red); color:var(--red);
  font-weight:700; text-transform:uppercase; font-size:0.76rem; letter-spacing:0.02em;
  padding:0.45rem 1rem; border-radius:99px; white-space:nowrap;
}
.about-body p{color:var(--muted); font-weight:400; font-style:italic;}

/* Now nested under .about-photo, so it inherits that column's own width
   (280px desktop, static 220px on mobile) rather than spanning the full
   section — sized down to match, not a copy of the old full-width grid. */
.logos{margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line);}
.logos .label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:1rem; line-height:1.4;}
/* "Go to Projects" — a link, not a caption: jumps straight to Selected Work. */
.logos .label-link{display:inline-block; text-decoration:none; cursor:pointer; transition:color .2s ease;}
.logos .label-link::after{content:" \2192";}
.logos .label-link:hover{color:var(--red);}
.logos-grid{
  display:flex; flex-wrap:wrap; gap:0.8rem; align-items:center;
}
/* Client marks are mostly dark-on-transparent — on a black page they need
   their own light plate to stay visible at all, not just a color swap. */
.logo-link{
  display:inline-flex; align-items:center; cursor:default;
  background:var(--text); border-radius:7px; padding:9px 14px;
  transition:background .2s ease, transform .2s ease;
}
a.logo-link{cursor:pointer;}
.logos-grid img{
  max-height:30px; max-width:100px; width:auto; height:auto;
  object-fit:contain;
}
a.logo-link:hover{transform:translateY(-2px); background:#ffffff;}

/* ===== Approach / process =====
   One connected timeline: each stage name sits ON the segment of track
   between the two nodes it happens between, and hovering either a segment
   or its matching service card highlights both — so the diagram and the
   services list read as one linked system, not two separate blocks. */
.approach{border-bottom:1px solid var(--line);}
.pipeline-v2{
  display:flex; align-items:flex-start; position:relative;
  margin:3rem 0 3rem; --arc-rise:clamp(124px, calc(9vw + 60px), 180px);
  padding-top:var(--arc-rise);
}
.pipeline-v2::before{
  content:""; position:absolute; top:calc(7px + var(--arc-rise)); left:60px; right:60px; height:2px;
  background:linear-gradient(90deg, var(--red-tint), var(--red) 33%, var(--red) 66%, var(--red-deep));
  z-index:0;
}
/* The keystone arc: a soft parabola from "The Reason" to "The Reality" —
   a second, slower story arcing over the straight step-by-step line
   beneath it. Its own box top *is* the peak, so the label just needs a
   small fixed gap above it — no guesswork, no drift. */
.pipeline-arc{
  position:absolute; left:60px; right:60px; top:0; height:var(--arc-rise);
  pointer-events:none; z-index:1;
}
.pipeline-arc svg{display:block; width:100%; height:100%; overflow:visible;}
.pipeline-arc .arc-label{
  position:absolute; top:calc(-0.65rem - 15px); left:50%; transform:translateX(-50%);
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--orange); white-space:nowrap;
}
/* Sits directly under the "THE RITUAL" label, close to the curve's peak.
   .node-quote's italic/grey styling is scoped to ".p-node .node-quote" —
   this lives outside any .p-node, so it needs its own copy of that look. */
.ritual-bullets{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  text-align:left; white-space:nowrap; display:inline-block;
  font-size:0.8rem; color:var(--muted); font-style:italic;
}
.p-node{
  flex:0 0 120px; display:flex; flex-direction:column; align-items:center;
  text-align:center; position:relative; z-index:2;
}
.p-node .dot{
  width:14px; height:14px; border-radius:50%; background:var(--red);
  margin-bottom:0.7rem; box-shadow:0 0 0 5px var(--bg);
}
.p-node .dot--keystone{background:var(--orange);}
.p-node .node-label{font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text);}
.p-node .node-label--keystone{color:var(--orange);}
.p-node .node-quote{font-size:0.8rem; color:var(--muted); font-style:italic; margin-top:0.3rem;}
.node-quote-list, .ritual-bullets{
  list-style:none; margin:0.3rem 0 0; padding:0; line-height:1.6;
}
.node-quote-list{text-align:left; display:inline-block;}
.node-quote-list li::before, .ritual-bullets li::before{content:"\2022  ";}

.p-segment{
  flex:1 1 auto; min-width:32px; align-self:stretch;
  position:relative; z-index:2;
}
.p-segment .segment-label{
  position:absolute; top:7px; left:50%; transform:translate(-50%,-50%);
  background:var(--bg); border:1.5px solid var(--red); color:var(--red);
  font-weight:700; text-transform:uppercase; font-size:0.76rem; letter-spacing:0.02em;
  padding:0.45rem 1rem; border-radius:99px; white-space:nowrap; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.p-segment:hover .segment-label,
.p-segment.linked .segment-label{
  transform:translate(-50%,-50%) scale(1.15);
  background:var(--red); color:#fff; box-shadow:0 8px 20px rgba(255,46,99,0.3);
}

.stage-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.stage-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.stage-card.linked{
  border-color:var(--red); background:var(--red-wash);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.stage-card h4{font-size:1rem; margin:0; color:var(--red);}
.stage-card-toggle{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  width:100%; background:none; border:none; padding:0; margin-bottom:1rem;
  cursor:default; text-align:left; font:inherit; color:inherit;
}
.stage-chevron{display:none;}
.stage-card .grp{margin-bottom:1rem;}
.stage-card .grp:last-child{margin-bottom:0;}
.stage-card .grp-title{font-weight:700; font-size:0.85rem; margin-bottom:0.35rem; color:var(--text);}
.stage-card ul{margin:0; padding-left:1.1rem; font-size:0.85rem; color:var(--text-soft);}
.stage-card li{margin-bottom:0.25rem;}

/* ===== Filter bars: two independent groups (tag, region) that AND together ===== */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:0.9rem;
}
.filter-bar-region{margin-bottom:2.5rem; padding-top:0.9rem; border-top:1px dashed var(--line);}
.filter-btn{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  background:var(--bg); border:1px solid var(--red); color:var(--red);
  padding:0.5rem 1.1rem; border-radius:99px; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.filter-btn:hover{background:var(--red-wash);}
.filter-btn.active{background:var(--red); border-color:var(--red); color:#fff;}
.filter-empty{color:var(--muted); font-style:italic; padding:2rem 0;}

/* ===== Projects ===== */
.work{background:var(--bg-soft);}
.project-list{display:flex; flex-direction:column; gap:1rem;}
.project.filtered-out{display:none;}
.project{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.project > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:120px 1fr auto;
  gap:1.5rem; align-items:center;
  padding:1.1rem 1.5rem;
}
.project > summary::-webkit-details-marker{display:none;}
.project .thumb{
  width:120px; height:80px; object-fit:cover; border-radius:2px; background:var(--line);
}
.project .card-info .loc{font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem;}
.project .card-info h3{font-size:1.35rem; letter-spacing:0; line-height:1.15; color:var(--text);}
/* Role is a personal detail (his title on the project), not a UI element —
   orange, matching the hero eyebrow and Highlights panel. */
.project .card-info .role{font-size:0.9rem; color:var(--orange); font-style:italic; font-weight:400;}
.project .chevron{
  width:32px; height:32px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .25s ease, background .2s ease;
  font-size:1rem; color:var(--text);
}
.project[open] .chevron{transform:rotate(45deg); background:var(--red); border-color:var(--red); color:#fff;}

.project-body{padding:0 1.5rem 2rem;}

/* Text panel (left, narrow) + media panel (right, majority of space) —
   a tight gutter so the text ends close to where the images begin, as in
   the PDF's two-column spreads, rather than floating with dead space between. */
.project-layout{
  display:grid; grid-template-columns:minmax(300px, 380px) 1fr; gap:1.25rem;
  align-items:start; padding-top:0.5rem;
}
.text-panel{display:flex; flex-direction:column; gap:1.5rem; min-width:0;}
.meta-box{
  background:var(--red-wash);
  border-left:4px solid var(--red);
  padding:1.25rem 1.4rem;
}
.meta-box dl{margin:0; font-size:0.85rem;}
.meta-box dt{color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; font-size:0.72rem; margin-top:0.7rem;}
.meta-box dt:first-child{margin-top:0;}
.meta-box dd{margin:0.1rem 0 0; font-weight:600; color:var(--text);}
.tags{display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1.1rem;}
.tag{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em;
  border:1px solid var(--red); color:var(--red);
  padding:0.28rem 0.65rem; border-radius:99px; font-weight:600;
}
.project-copy .lede{font-weight:600; font-size:1.02rem; margin-bottom:1rem; color:var(--text);}
.project-copy p{color:var(--text-soft); margin:0 0 1rem; font-size:0.94rem;}
.project-extra{display:flex; flex-direction:column; gap:1.5rem;}
.team h5{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--red);
  margin-bottom:0.75rem; font-weight:700;
}
/* Personal Highlights: a bordered panel like the meta-box, not a solid
   fill — a solid color block just reads as "a dark box" regardless of
   hue. The border-left pairing (red on meta-box, orange here) is what
   actually tells the two panels apart at a glance. */
.highlights{
  background:var(--orange-wash);
  border-left:4px solid var(--orange);
  padding:1.25rem 1.4rem; border-radius:var(--radius);
}
.highlights h5{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--orange);
  margin-bottom:0.75rem; font-weight:700;
}
.highlights ul{margin:0; padding:0; font-size:0.88rem; list-style:none; color:var(--text-soft);}
.highlights li{margin-bottom:0.55rem; padding-left:1.15rem; position:relative;}
.highlights li:last-child{margin-bottom:0;}
.highlights li::before{content:"\00bb"; position:absolute; left:0; color:var(--orange);}
.team-row{display:flex; justify-content:space-between; gap:1rem; font-size:0.85rem; padding:0.3rem 0; border-bottom:1px dashed var(--line);}
.team-row .r{color:var(--muted);}
.team-row .n{font-weight:600; text-align:right; color:var(--text);}
.produced-by{margin-top:0.9rem; font-size:0.85rem; color:var(--muted); font-style:italic;}

/* Media panel: a cropped, tiled collage (as in the PDF spreads), majority
   of the expanded view — each tile zooms in place on rollover; click for
   the full-screen lightbox. */
.media-panel{min-width:0;}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:145px; grid-auto-flow:dense;
  gap:6px;
}
.gallery-tile{
  position:relative; overflow:hidden; border-radius:2px;
  background:#161616; cursor:zoom-in;
}
.gallery-tile::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,0);
  transition:background .3s ease; pointer-events:none;
}
/* On a dark page a darkening hover overlay is invisible — lighten instead. */
.gallery-tile:hover::after{background:rgba(255,255,255,0.08);}
.gallery-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.gallery-tile:hover img{transform:scale(1.1);}
.gallery-tile.tile-feature{grid-column:span 2; grid-row:span 2;}
.gallery-tile.tile-wide{grid-column:span 2;}
.gallery-tile.tile-wide3{grid-column:span 3;}
.gallery-tile.tile-tall{grid-row:span 2;}
.gallery-tile.tile-tall2{grid-row:span 3;}

/* ===== Contact / footer ===== */
.contact{text-align:center; padding:8rem 0;}
.contact .kicker{
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--red); font-weight:600; margin-bottom:0.75rem;
}
/* The headline takes the same quiet type as the lines below it. */
.contact h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:500; text-transform:none; letter-spacing:0;
  font-size:0.95rem; line-height:1.35;
  color:var(--text); max-width:30ch; margin:0 auto;
}
/* Everything below the headline shares one plain, quiet treatment —
   links differ only by an underline, never by size, weight or case. */
.contact .email, .contact .phone, .contact .social, .contact .languages{
  display:block; margin-top:0.6rem;
  font-family:'Space Grotesk',sans-serif; font-size:0.95rem; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--text-soft); text-decoration:none;
}
.contact h2 + .email{margin-top:1.75rem;}
.contact .email, .contact .social{
  text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;
}
.contact .email:hover, .contact .social:hover{color:var(--red); text-decoration-color:var(--red);}
footer{
  border-top:1px solid var(--line); padding:2rem 0; text-align:center;
  font-size:0.8rem; color:var(--muted);
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,0.96); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:4vh 4vw;
}
.lightbox.open{display:flex;}
.lightbox img{max-height:92vh; max-width:92vw; object-fit:contain; border-radius:2px;}
.lightbox .close{
  position:absolute; top:24px; right:32px; color:#fff; font-size:2rem;
  cursor:pointer; line-height:1; background:none; border:none;
}

.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:56px; height:96px;
  color:#fff; font-size:3.5rem; line-height:1; background:none; border:none; cursor:pointer;
  opacity:0.6; transition:opacity .2s;
}
.lightbox .lb-nav:hover, .lightbox .lb-nav:focus-visible{opacity:1;}
.lightbox .lb-prev{left:8px;}
.lightbox .lb-next{right:8px;}
.lightbox.single .lb-nav{display:none;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;}
  .about-photo{position:static; max-width:220px;}
  .stage-cards{grid-template-columns:1fr;}
  .project-layout{grid-template-columns:1fr;}
  .media-panel{order:-1;}
  .gallery-grid{grid-auto-rows:100px;}
}
@media (max-width:760px){
  /* Vertical timeline: the connecting line runs down the centre behind the
     stacked dots and phase pills, top to bottom instead of left to right. */
  .pipeline-v2{flex-direction:column; align-items:stretch; gap:0; position:relative; padding-top:0;}
  .pipeline-v2::before{
    display:block; top:14px; bottom:14px; left:50%; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--red-tint), var(--red) 33%, var(--red) 66%, var(--red-deep));
    transform:translateX(-50%);
  }
  /* The horizontal keystone arc doesn't translate to the vertical timeline. */
  .pipeline-arc{display:none;}
  .p-node{flex:none; width:auto; padding:0.5rem 0;}
  .p-segment{flex:none; align-self:auto; display:flex; flex-direction:column; align-items:center; padding:0.35rem 0;}
  .p-segment .segment-label{position:static; transform:none;}
  .p-segment:hover .segment-label, .p-segment.linked .segment-label{transform:scale(1.08);}

  /* Service details collapse behind a tap-to-expand header, so the phase
     summary is scannable without a wall of bullet lists. Tapping the
     matching phase pill above expands and scrolls to its card (see script.js). */
  .stage-card-toggle{cursor:pointer;}
  .stage-chevron{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:26px; height:26px; border:1px solid var(--line); border-radius:50%;
    font-size:1rem; color:var(--text); transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }
  .stage-card.expanded .stage-chevron{
    transform:rotate(45deg); background:var(--red); border-color:var(--red); color:#fff;
  }
  .stage-card-body{display:none;}
  .stage-card.expanded .stage-card-body{display:block;}
}
@media (max-width:640px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0; background:var(--bg);
    flex-direction:column; padding:1.5rem 28px; gap:1.25rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-150%); transition:transform .25s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:block;}
  .project > summary{grid-template-columns:70px 1fr auto; padding:0.9rem 1rem;}
  .project .thumb{width:70px; height:56px;}
  .project-body{padding:0 1rem 1.5rem;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:90px;}
  .filter-bar{gap:0.4rem;}
  .filter-btn{padding:0.4rem 0.85rem; font-size:0.72rem;}
}

.case-link{display:inline-block;color:var(--orange);text-decoration:none;font-size:0.9rem;letter-spacing:0.03em;}
.case-link:hover{text-decoration:underline;}

/* Section labels are real headings (h2) for search engines; keep them looking like the small kicker labels. */
h2.kicker{font-family:inherit; line-height:inherit;}