:root{--surface-highlight:#fff;--warm-gray:#e6e6e6;--muted-gray:#c8c8c8;--warm-brass:#eac579;--muted-brass:#b1955d;--medium-brass:#694d28;--dark-brass:#0f0f0f;--background:#f5f2ec;--blue:#558c9c;--red:#cd602f;--green:#80874f;--orange:#ee9e22;--line:rgba(177,149,93,.58);--shadow:0 7px 17px rgba(28,17,11,.20);--max:1350px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--background);color:var(--dark-brass);font-family:Inter,Arial,sans-serif;font-size:21px;letter-spacing:-.02em;line-height:1.42}.site{width:min(var(--max),calc(100% - 104px));margin:auto}.header{height:102px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font:600 30px/1.1 Lora,Georgia,serif;color:var(--medium-brass);text-decoration:none}.nav{display:flex;gap:8px}.nav a{color:var(--dark-brass);text-decoration:none;padding:17px 21px;border-radius:10px;transition:.2s ease}.nav a:hover,.nav a:focus-visible,.nav a.active{background:var(--muted-brass);color:white;outline:none}.hero{padding-top:75px;border-bottom:1px solid var(--line)}h1,h2,h3{font-family:Lora,Georgia,serif;font-weight:400;margin:0}h1{color:var(--dark-brass)}h2,h3{color:var(--medium-brass)}h1{font-size:clamp(62px,7vw,96px);line-height:.98;letter-spacing:-.05em;max-width:1240px}.intro{padding-top:32px;padding-bottom:54px;border-bottom:1px solid var(--line);max-width:1310px}.intro strong{display:block;font-size:32px;line-height:1.17;color:var(--medium-brass);margin-bottom:0;letter-spacing:-.04em}.intro p{margin:0 0 20px}.section{padding:67px 0 68px;border-bottom:1px solid var(--line)}.eyebrow{color:var(--muted-brass);font-size:32px;font-weight:600;margin:0 0 26px;letter-spacing:-.04em}.section h2{font-size:56px;line-height:1.06;letter-spacing:-.02em;margin-bottom:42px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.principle{min-height:260px;background:var(--dark-brass);color:white;border-radius:7px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;transition:transform .22s ease,box-shadow .22s ease}.principle:hover{transform:translateY(-4px);box-shadow:0 13px 25px rgba(28,17,11,.24)}.principle img,.principle svg{height:50px;width:50px;object-fit:contain;margin-bottom:13px}.principle h3{font:600 32px/1.1 Inter,Arial,sans-serif;color:white;letter-spacing:-.04em}.principle p{margin:6px 0 0;font-size:18px;line-height:1.35;letter-spacing:0}.work-list{display:grid;gap:42px}.item{display:grid;grid-template-columns:1fr 1.07fr;gap:42px;align-items:center;text-decoration:none;color:inherit;border-radius:16px}.item img{width:100%;aspect-ratio:2.65/1;object-fit:cover;border-radius:7px;display:block;transition:filter .25s ease,transform .25s ease}.item:hover img{filter:brightness(1.1);transform:scale(1.008)}.item h3{font:600 30px/1.12 Inter,Arial,sans-serif;letter-spacing:-.04em;color:var(--medium-brass);margin-bottom:10px}.item p{margin:0}.article-item img{aspect-ratio:2.65/1}.footer{padding:68px 0 90px}.footer h2{font-size:56px;line-height:1.05;margin:20px 0 45px}.contact{display:flex;gap:34px;margin:0 0 65px}.contact a{display:flex;align-items:center;gap:10px;color:var(--dark-brass);text-decoration:none}.contact img,.contact svg{width:auto;height:16px}.fine{font:400 16px/1.35 Inter,Arial,sans-serif;letter-spacing:-.02em}.page-title{padding:75px 0 42px}.page-title h1{margin-top:25px}.back{display:inline-flex;gap:10px;align-items:center;color:var(--dark-brass);text-decoration:none;font-size:18px}.back img,.back svg{width:19px}.index-list{padding:30px 0 70px}.story{padding-bottom:80px}.story-hero{width:100%;border-radius:16px;display:block;margin:25px 0 35px}.story .reading{max-width:920px}.story h2{font-size:48px;margin:55px 0 18px}.story p{margin:0 0 18px}.frame-reference{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--warm-gray)}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){body{font-size:18px}.site{width:min(100% - 40px,var(--max))}.header{height:82px}.brand{font-size:22px}.nav a{padding:11px 12px}.hero{padding-top:52px}.intro{padding-top:28px;padding-bottom:48px}.intro strong{font-size:25px}.section{padding:50px 0}.eyebrow{font-size:24px}.section h2,.footer h2{font-size:43px}.principles{grid-template-columns:1fr;gap:18px}.principle{min-height:210px}.item{grid-template-columns:1fr;gap:20px}.item h3{font-size:25px}.contact{margin-bottom:40px}.page-title{padding-top:48px}}
@media(max-width:560px){.site{width:calc(100% - 28px)}.header{align-items:flex-start;padding-top:20px}.brand{max-width:120px}.nav{gap:2px}.nav a{font-size:15px;padding:9px}.hero{padding-top:44px}h1{font-size:48px}.section h2,.footer h2{font-size:36px}.eyebrow{font-size:21px;margin-bottom:18px}.principle h3{font-size:27px}.item{gap:16px}.contact{flex-direction:column;gap:17px}.fine{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}
/* Case study section dividers: full content-column width, centered */
.story .reading{max-width:none;width:100%}
.story .reading>h2{border-top:1px solid var(--line);padding-top:55px;margin-top:55px}
.story .reading>.eyebrow+h2{margin-top:0}
/* Footer divider */
.footer{border-top:1px solid var(--line)}

/* Navigation states: swap Hover and Pressed treatments.
   Hover = outline/brass text; Pressed/active = filled brass. */
.nav a:hover,.nav a:focus-visible{background:transparent;color:var(--muted-brass);box-shadow:inset 0 0 0 1px var(--muted-brass);outline:none}
.nav a:active,.nav a.active{background:var(--muted-brass);color:white;box-shadow:none}

/* Full case-study and article layouts restored from the source frames */
.exact .case-hero{padding:36px 0 62px;border-bottom:1px solid var(--line)}
.exact .case-hero h1{margin:28px 0 18px}
.case-subtitle{font-size:30px;font-weight:600;color:var(--medium-brass);max-width:none}
.exact figure{margin:38px 0 0}.exact figure img{display:block;width:100%;height:auto;border-radius:7px}.exact figcaption{margin-top:12px;padding:16px 20px;border:1px solid var(--warm-gray);border-radius:7px;font-size:16px;letter-spacing:0}
.project-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:55px 0;border-bottom:1px solid var(--line)}.project-summary h4{font-size:24px;color:var(--muted-brass);margin:0 0 12px}.project-summary p{font-size:18px;margin:0}
.case-section{padding:58px 0;border-bottom:1px solid var(--line)}.case-section h2{font-size:56px;margin:0 0 30px}.case-section h3{font:600 32px/1.15 Inter,Arial,sans-serif;margin:42px 0 14px;color:var(--medium-brass)}.case-section p,.case-section ul{max-width:1020px}.case-section li{margin:8px 0}.before-after{display:grid;grid-template-columns:1fr 1fr;gap:40px}.hashtags{font-size:18px;color:var(--muted-brass)}
@media(max-width:900px){.project-summary{grid-template-columns:1fr 1fr}.case-subtitle{font-size:24px}.case-section h2{font-size:42px}.before-after{grid-template-columns:1fr}}
@media(max-width:560px){.project-summary{grid-template-columns:1fr}.case-section h2{font-size:36px}.case-section h3{font-size:25px}}
/* Figma project-summary strip: exact four-column treatment */
.exact .project-summary{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:50px;
  padding:58px 0 62px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  align-items:start;
}
.exact .project-summary h4{
  margin:0 0 20px;
  color:var(--muted-brass);
  font:600 28px/1.1 Inter,Arial,sans-serif;
  letter-spacing:-.04em;
}
.exact .project-summary p{
  margin:0;
  max-width:none;
  color:var(--dark-brass);
  font:400 21px/1.42 Inter,Arial,sans-serif;
  letter-spacing:-.03em;
}
@media(max-width:900px){
  .exact .project-summary{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;padding:44px 0 48px}
  .exact .project-summary h4{font-size:22px;margin-bottom:15px}
  .exact .project-summary p{font-size:16px}
}
@media(max-width:700px){
  .exact .project-summary{grid-template-columns:1fr;row-gap:34px}
}
/* Case-study summary cards: match supplied Figma reference */
.exact .project-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px 32px;
  padding:52px 0 54px;
  border-top:0;
  border-bottom:1px solid var(--line);
}
.exact .project-summary>div{
  min-height:160px;
  background:var(--medium-brass);
  color:#fff;
  border-radius:7px;
  box-shadow:none;
  padding:2rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  text-align:center;
}
.exact .project-summary h4{
  margin:0 0 10px;
  color:#fff;
  font:600 28px/1.12 Inter,Arial,sans-serif;
  letter-spacing:-.04em;
}
.exact .project-summary p{
  margin:0;
  max-width:540px;
  color:#fff;
  font:400 18px/1.35 Inter,Arial,sans-serif;
  letter-spacing:-.02em;
}
.exact .case-hero{padding-bottom:50px}
.exact .case-hero figure{margin-top:26px}
.exact .case-hero figure figcaption{display:none}
.exact .case-hero .case-subtitle{margin:18px 0 0}
@media(max-width:700px){
  .exact .project-summary{grid-template-columns:1fr;gap:20px}
}
/* Image captions: match Figma, plain centered text with no container */
.exact figure figcaption{
  margin:18px auto 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  max-width:980px;
  color:var(--dark-brass);
  font:400 16px/1.35 Inter,Arial,sans-serif;
  letter-spacing:-.02em;
  text-align:center;
}
/* Locked case-study body treatment */
.exact .case-section h2{color:var(--muted-brass)}
.exact .before-after{display:block}
.exact .before-after>div+div{margin-top:42px}
.exact .case-section:last-child{border-bottom:0}
/* Locked figure treatment for case studies and article */
.exact .case-section figure,
.exact.article-page .case-section figure{
  box-sizing:border-box;
  padding:7rem 5rem;
  margin-bottom:36px;
}
.exact .case-section figure img,
.exact.article-page .case-section figure img{
  display:block;
  max-width:100%;
  height:auto;
}
.exact .case-section figure figcaption,
.exact.article-page .case-section figure figcaption{
  margin-top:18px;
}
/* Locked heading colors from Figma reference */
.exact .case-section h2{color:var(--medium-brass)}
.exact .case-section h3{color:var(--muted-brass)}
/* Match header-nav interaction states for Selected Work and footer contact buttons */
.back,.contact a{
  padding:17px 21px;
  border-radius:10px;
  transition:.2s ease;
}
.back:hover,.back:focus-visible,
.contact a:hover,.contact a:focus-visible{
  background:transparent;
  color:var(--muted-brass);
  box-shadow:inset 0 0 0 1px var(--muted-brass);
  outline:none;
}
.back:active,.contact a:active{
  background:var(--muted-brass);
  color:white;
  box-shadow:none;
}
.back:active img,.back:active svg,.contact a:active img,.contact a:active svg{filter:brightness(0) invert(1)}
/* Header typeset name uses Heading 2 typography */
.brand{
  font-family:Lora,Georgia,serif;
  font-size:56px;
  line-height:1.06;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--medium-brass);
}
@media(max-width:900px){.brand{font-size:43px}}
@media(max-width:560px){.brand{font-size:36px;max-width:none}}
/* Correct Heading 2 style for header typeset name */
.brand{
  font-family:Inter,Arial,sans-serif;
  font-size:32px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.04em;
  color:var(--medium-brass);
}
@media(max-width:900px){.brand{font-size:32px}}
@media(max-width:560px){.brand{font-size:32px;max-width:none}}
/* Unified interactive button states: header nav, back links, and contact links */
.nav a,.back,.contact a{
  border:1px solid transparent;
  box-shadow:none;
  box-sizing:border-box;
}
.nav a:hover,.nav a:focus-visible,
.back:hover,.back:focus-visible,
.contact a:hover,.contact a:focus-visible{
  background:transparent;
  color:var(--muted-brass);
  border-color:var(--muted-brass);
  box-shadow:none;
  outline:none;
}
.nav a:active,
.back:active,
.contact a:active{
  background:var(--muted-brass);
  color:#fff;
  border-color:var(--muted-brass);
  box-shadow:none;
}
.back:hover img,.back:hover svg,.back:focus-visible img,.back:focus-visible svg,
.contact a:hover img,.contact a:hover svg,.contact a:focus-visible img,.contact a:focus-visible svg{
  filter:none;
}
.back:active img,.back:active svg,.contact a:active img,.contact a:active svg{filter:brightness(0) invert(1)}
/* Locked Figma interaction colors and full-width case-study containers */
.nav a:hover,.nav a:focus-visible,
.back:hover,.back:focus-visible,
.contact a:hover,.contact a:focus-visible{
  background:var(--warm-brass);
  color:var(--medium-brass);
  border-color:var(--warm-brass);
  box-shadow:none;
}
.nav a:active,
.back:active,
.contact a:active{
  background:var(--medium-brass);
  color:#fff;
  border-color:var(--medium-brass);
  box-shadow:none;
}
.exact .case-section p,
.exact .case-section ul,
.exact .case-section ol,
.exact .case-section figure,
.exact .case-section .before-after{
  max-width:none;
  width:100%;
}
/* Shadows appear only on hover for leadership cards and listing thumbnails */
.principle{
  box-shadow:none;
  transition:transform .22s ease,box-shadow .22s ease;
}
.principle:hover{
  transform:none;
  box-shadow:var(--shadow);
}
.item img{
  box-shadow:none;
  transition:box-shadow .22s ease;
}
.item:hover img{
  box-shadow:var(--shadow);
}
/* Locked soft-hover interactions */
:root{
  --hover-shadow:
    0 1px 1px hsl(0deg 0% 0% / 0.075),
    0 2px 2px hsl(0deg 0% 0% / 0.075),
    0 4px 4px hsl(0deg 0% 0% / 0.075),
    0 8px 8px hsl(0deg 0% 0% / 0.075),
    0 16px 16px hsl(0deg 0% 0% / 0.075);
}
.principle{
  box-shadow:none;
  filter:brightness(1);
  transition:box-shadow .28s ease,filter .28s ease;
}
.principle:hover{
  box-shadow:var(--hover-shadow);
  filter:brightness(.94);
}
.item img{
  box-shadow:none;
  filter:brightness(1);
  transition:box-shadow .28s ease,filter .28s ease;
}
.item:hover img{
  box-shadow:var(--hover-shadow);
  filter:brightness(.94);
}
.nav a,.back,.contact a{
  transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
/* Locked button states from supplied Figma reference. Do not reinterpret. */
.nav a,.back,.contact a{
  background:transparent;
  color:var(--dark-brass);
  border:2px solid transparent;
  box-shadow:none;
}
.nav a:hover,.nav a:focus-visible,
.back:hover,.back:focus-visible,
.contact a:hover,.contact a:focus-visible{
  background:transparent;
  color:var(--dark-brass);
  border-color:var(--medium-brass);
  box-shadow:none;
  outline:none;
}
.nav a:active,
.back:active,
.contact a:active,
.nav a.active{
  background:transparent;
  color:var(--muted-brass);
  border-color:var(--muted-brass);
  box-shadow:none;
}
.back:hover img,.back:hover svg,.back:focus-visible img,.back:focus-visible svg,
.contact a:hover img,.contact a:hover svg,.contact a:focus-visible img,.contact a:focus-visible svg{
  filter:none;
}
.back:active img,.back:active svg,.contact a:active img,.contact a:active svg{
  filter:invert(65%) sepia(25%) saturate(711%) hue-rotate(358deg) brightness(88%) contrast(82%);
}
/* Thumbnail dimensions are locked in every state. */
.item:hover img,.item:focus-visible img{
  transform:none;
}
/* Locked thumbnail hover text color */
.item h3,
.item p{
  transition:color .28s ease;
}
.item:hover h3,
.item:hover p{
  color:var(--muted-brass);
}
/* Locked case-study summary background: identical to How I Lead cards */
.exact .project-summary>div{
  background:linear-gradient(145deg,#15110f,#4b2f20);
}
/* Locked Dark Brass background for How I Lead and case-study summary boxes */
.principle,
.exact .project-summary>div{
  background:var(--dark-brass);
}

/* Header nav (Work / Articles): Magic Line hover + pressed effect, replacing
   the rounded-outline treatment. Scoped to .nav a only — Back link and
   footer contact links keep their existing bordered-pill states. */
.nav a{
  position:relative;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  color:var(--dark-brass);
  overflow:visible;
}
.nav a::after{
  content:"";
  position:absolute;
  left:21px;
  right:21px;
  bottom:10px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}
.nav a:hover,.nav a:focus-visible{
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--medium-brass);
  outline:none;
}
.nav a:hover::after,.nav a:focus-visible::after{
  transform:scaleX(1);
}
.nav a:active,.nav a.active{
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--muted-brass);
}
.nav a:active::after,.nav a.active::after{
  transform:scaleX(1);
}

/* How I Lead cards: no drop shadow, no hover effect (pending reassessment). */
.principle{
  transform:none;
  filter:none;
  box-shadow:none;
}
.principle:hover{
  transform:none;
  filter:none;
  box-shadow:none;
}

/* Selected Work / Articles thumbnails: no hover effect. */
.item:hover img,.item:focus-visible img{
  box-shadow:none;
  filter:none;
  transform:none;
}

/* Footer Email / LinkedIn buttons: Magic Line hover + pressed effect, same
   as the header nav buttons. Scoped to .contact a only — Back link keeps
   its existing bordered-pill states. */
.contact a{
  position:relative;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  color:var(--dark-brass);
}
.contact a::after{
  content:"";
  position:absolute;
  left:21px;
  right:21px;
  bottom:10px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}
.contact a:hover,.contact a:focus-visible{
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--medium-brass);
  outline:none;
}
.contact a:hover::after,.contact a:focus-visible::after{
  transform:scaleX(1);
}
.contact a:active{
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--muted-brass);
}
.contact a:active::after{
  transform:scaleX(1);
}
.contact a img,.contact a svg{
  filter:none;
}

/* Back link (Selected Work / Articles on case-study & article pages): Magic
   Line hover + pressed effect, same as the header nav and footer contact
   buttons. Scoped to .back only. */
.back{
  position:relative;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  color:var(--dark-brass);
  padding:0;
}
.back::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}
.back:hover,.back:focus-visible{
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--medium-brass);
  outline:none;
}
.back:hover::after,.back:focus-visible::after{
  transform:scaleX(1);
}
.back:active{
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--muted-brass);
}
.back:active::after{
  transform:scaleX(1);
}
.back img,.back svg{
  filter:none;
}

/* Homepage hero accent: four colored strokes — deliberately distinct from
   the full-bleed case-study hero images (different content type entirely)
   so the home page reads differently from the case-study/article template. */
.hero-strokes{
  display:block;
  width:100%;
  height:35px;
  margin-top:16px;
  margin-bottom:48px;
}
.hero-strokes .stroke-line{
  stroke-width:5px;
  fill:none;
}
@media(max-width:560px){
  .hero-strokes{margin-top:12px;margin-bottom:32px}
}
.hero{border-bottom:none;padding-bottom:0}