:root {
  --cream: #f4efe8;
  --paper: #fbf7f1;
  --ink: #29333b;
  --muted: #5b6971;
  --blue: #526978;
  --slate: #253845;
  --sage: #dce6df;
  --stone: #e8e5dd;
  --gold: #cba260;
  --rule: rgba(41,51,59,.19);
  --frame: min(1280px, calc(100% - 6rem));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:hover{text-decoration-thickness:1px;text-underline-offset:.22em}
button{font:inherit}
.frame{width:var(--frame);margin-inline:auto}
.skip-link{position:absolute;left:-100vw;top:0;background:var(--paper);padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(244,239,232,.965);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(41,51,59,.09)}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.wordmark{font-size:.97rem;font-weight:600;letter-spacing:-.025em;white-space:nowrap}
.primary-nav{display:flex;align-items:center;gap:2.15rem;font-size:.9rem;line-height:1.4;color:var(--muted)}
.primary-nav a:hover,.nav-contact{color:var(--ink)}
.menu-toggle{display:none;border:0;background:none;padding:.7rem .25rem;cursor:pointer;flex-direction:column;gap:.32rem}
.menu-toggle span{display:block;width:1.35rem;height:1.5px;background:var(--ink)}

/* The introduction is a piece of editorial typesetting, not a marketing hero pattern. */
.hero-type{padding:clamp(4.6rem,7vw,7.2rem) 0 clamp(4rem,6vw,6rem);position:relative;isolation:isolate}
.hero-editorial{display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}
.hero-type h1{font-family:'Newsreader',Georgia,serif;font-size:clamp(3.1rem,4.55vw,4.85rem);font-weight:400;line-height:1.065;letter-spacing:-.042em;max-width:1080px;margin:0;text-wrap:balance}
.hero-lede{font-size:1.08rem;line-height:1.65;max-width:760px;margin:clamp(2.3rem,3.2vw,3.3rem) 0 0;color:var(--ink)}
.career-timeline{width:100%;max-width:1140px;display:grid;grid-template-columns:.66fr 1fr 1fr 1.45fr;gap:clamp(1.2rem,2.4vw,3rem);margin-top:clamp(4rem,5.8vw,6rem);border-top:1px solid var(--rule);padding-top:1.35rem;align-items:start}
.timeline-entry{display:flex;flex-direction:column;gap:.30rem;min-width:0}
.timeline-date{font-size:.83rem;line-height:1.3;color:var(--muted);margin-bottom:.45rem}
.timeline-role{font-size:.92rem;font-weight:500;letter-spacing:-.012em;line-height:1.34;color:var(--ink)}
.timeline-org{font-size:1rem;line-height:1.4;color:var(--blue)}
.timeline-earlier .timeline-date{font:400 2.1rem/.5 'Newsreader',Georgia,serif;color:var(--muted)}
.timeline-earlier .timeline-org,.timeline-earlier .timeline-role{color:var(--muted)}
.timeline-current .timeline-role{font-weight:600}
.timeline-current .timeline-org{font-size:1.45rem;line-height:1.22;letter-spacing:-.018em;color:var(--ink);font-weight:600}


/* Quality is the flagship feature. Its figure shows real connections, not abstract decoration. */
.quality-section{background:var(--slate);color:var(--paper)}
.case-study-grid{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);align-items:start;gap:clamp(3rem,6vw,6.5rem);padding:clamp(4.5rem,6.5vw,7.1rem) 0}
.case-study-grid>*{min-width:0}
.quality-grid{padding:clamp(5.1rem,7.3vw,8rem) 0;align-items:center}
.quality-copy h3,.transformation-copy h3{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:clamp(3.25rem,4.65vw,5.2rem);line-height:.96;letter-spacing:-.049em;margin:0;max-width:10ch}
.quality-summary{font-size:1.085rem;line-height:1.65;margin:1.7rem 0 0;max-width:530px;color:#e0e8e9}
.quality-summary+.quality-summary{margin-top:1.1rem}
.case-depth{border-top:1px solid rgba(255,255,255,.20);margin-top:2.25rem;padding-top:1.1rem}
.case-depth>span{display:block;color:#c2d4d8;font-size:.85rem;margin-bottom:.5rem}
.case-depth p{font-size:.97rem;color:var(--paper);margin:0;line-height:1.6}
/* Real product evidence will take this space. The three frames intentionally contain no invented UI. */
.quality-artifacts{margin:0;min-width:0}
.quality-artwork{min-height:490px;background:#e7e8e2;display:grid;grid-template-columns:.96fr 1fr .84fr;gap:clamp(.55rem,1.2vw,1rem);align-items:end;padding:clamp(1.1rem,2vw,1.75rem);overflow:hidden}
.screen-placeholder{position:relative;min-width:0;min-height:0;background:linear-gradient(145deg,#f9f8f5,#f0eee9);border:1px solid #c8ceca;display:flex;align-items:flex-end;padding:1rem .72rem;box-shadow:0 6px 15px rgba(36,53,69,.055)}
.screen-placeholder span{display:block;font-size:.77rem;line-height:1.4;font-weight:500;color:#586870}
.screenshot-finding{height:332px}
.screenshot-replacements{height:424px}
.screenshot-score{height:370px}
.quality-artifacts figcaption{color:#d8e2e4;font-size:.84rem;line-height:1.55;margin-top:1.1rem;max-width:560px}

/* A different editorial treatment for the team transformation story. */
.transformation-section{background:var(--paper)}
.transformation-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,5vw,5.4rem);align-items:center;padding:clamp(5rem,7.3vw,7.4rem) 0}
.transformation-layout>*{min-width:0}
.transformation-copy h3{max-width:14ch;font-size:clamp(2.7rem,3.7vw,4rem)}
.transformation-copy p{font-size:1.08rem;line-height:1.65;max-width:520px;margin:1.45rem 0 0}
.transformation-copy p+p{margin-top:1.05rem}
/* From-to visual uses the same simple artifact vocabulary, with collaboration added in the second state. */
 .transformation-editorial{min-height:468px;margin:0;padding:clamp(1.7rem,2.4vw,2.4rem);background:var(--sage);display:flex;align-items:stretch;overflow:hidden}
.shift-phases{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:clamp(.7rem,1.5vw,1.45rem);align-items:stretch;width:100%}
.shift-phase{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.shift-label{font-family:'Newsreader',Georgia,serif;font-size:1.72rem;letter-spacing:-.032em;line-height:1.1;color:var(--blue)}
.shift-after .shift-label{color:var(--ink)}
.shift-illustration{display:block;width:100%;height:188px;margin:1.6rem 0 1.05rem;overflow:visible}
.shift-statement{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:clamp(1.18rem,1.42vw,1.46rem);line-height:1.15;letter-spacing:-.018em;margin:auto 0 0;max-width:18ch}
.shift-connector{display:flex;align-items:center;justify-content:center;margin-top:3.3rem;position:relative}
.shift-connector span{display:block;width:26px;height:1.5px;background:var(--gold);position:relative;flex-shrink:0}
.shift-connector span::after{content:'';position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:rotate(45deg)}
@media(prefers-reduced-motion:no-preference){
  .shift-after .collaboration-node{transform-box:fill-box;transform-origin:center;transition:transform .28s ease}
  .transformation-editorial:hover .shift-after .collaboration-node{transform:scale(1.09)}
}


/* InVision is an archival story, intentionally quieter than the primary work. */
.invision-section{background:var(--stone)}
.invision-layout{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:clamp(3rem,6vw,6.5rem);align-items:start;padding:clamp(3.8rem,5.5vw,5.8rem) 0}
.invision-layout>*{min-width:0}
.invision-intro h3{font:400 clamp(2.55rem,3.5vw,3.65rem)/1.03 'Newsreader',Georgia,serif;letter-spacing:-.035em;margin:0;max-width:14ch}
.invision-period{font-size:.9rem;color:var(--muted);margin:1rem 0 0}
.invision-detail{padding-top:.2rem}
.invision-detail p{font-size:1.08rem;line-height:1.65;margin:0;max-width:550px}
.invision-detail a:not(.case-study-cta){display:inline-block;border-bottom:1px solid currentColor;padding-bottom:.17rem;margin-top:1.6rem;font-size:.93rem;font-weight:600}

/* Philosophy: one warm neutral for the principles, with sage reserved for the surrounding section. */
.leadership-section{background:var(--sage)}
.leadership-content{padding:clamp(4.5rem,6.2vw,6rem) 0 clamp(4.8rem,6.6vw,6.7rem)}
.leadership-introduction{max-width:870px}
.leadership-introduction h2{font:400 clamp(2.9rem,4.3vw,4.4rem)/1.06 'Newsreader',Georgia,serif;letter-spacing:-.044em;margin:0}
.leadership-introduction>p{margin:1.15rem 0 0;max-width:790px;font-size:1.10rem;line-height:1.65;color:var(--ink)}
.philosophy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(41,51,59,.20);border:1px solid rgba(41,51,59,.20);margin-top:2.6rem}
.philosophy-card{min-width:0;background:var(--paper);padding:clamp(1.65rem,3vw,3.1rem);min-height:272px}
.philosophy-card h3{font:400 clamp(1.75rem,2.35vw,2.45rem)/1.08 'Newsreader',Georgia,serif;letter-spacing:-.029em;margin:0 0 1.05rem}
.philosophy-card p{font-size:1.005rem;line-height:1.65;color:var(--ink);max-width:32rem;margin:0}
.philosophy-card-people{grid-column:1 / -1;min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:start;padding-block:clamp(1.7rem,2.5vw,2.6rem)}
.philosophy-card-people h3{max-width:14ch;margin:0}
.philosophy-card-people p{max-width:36rem}

/* Media only gets a half-and-half composition once there is an actual story behind it. */
.about-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,6vw,6.5rem);align-items:center;padding:clamp(4rem,6vw,6rem) 0}
.about-media{min-height:400px;position:relative;border:1px solid rgba(41,51,59,.08);overflow:hidden;background:#d8e0dc}
.media-note,.media-index{display:none}
.about-copy h3{font:400 clamp(2.6rem,3.45vw,4rem)/1.06 'Newsreader',Georgia,serif;letter-spacing:-.042em;margin:0;max-width:14ch}
.about-copy p{font-size:1.09rem;line-height:1.68;margin:1.2rem 0 0;color:var(--ink);max-width:60ch}

.about-photo{display:block;width:100%;height:100%;min-height:inherit;object-fit:cover;object-position:center;}
.site-footer{background:var(--slate);color:var(--paper)}
.footer-layout{display:flex;justify-content:space-between;gap:2rem;padding:2.8rem 0}
.footer-name{font:400 1.75rem/1.1 'Newsreader',Georgia,serif;margin:0}
.footer-links{display:grid;gap:.6rem;align-content:start;justify-items:end;font-size:.95rem}
.footer-links a:hover{text-decoration:underline}

@media(max-width:960px){
  :root{--frame:min(100% - 3rem,1280px)}
  .hero-type h1{font-size:clamp(3.15rem,5.55vw,4.75rem)}
  .career-timeline{gap:1.2rem}
  .quality-grid,.transformation-layout,.invision-layout{gap:2.4rem}
  .quality-copy h3{font-size:clamp(3rem,4.2vw,4rem)}
  .quality-artwork{min-height:430px}
  .screenshot-finding{height:280px}
  .screenshot-replacements{height:345px}
  .screenshot-score{height:310px}
  .transformation-copy h3{font-size:clamp(2.75rem,4vw,3.55rem)}
  .about-layout{gap:2.5rem}
}
@media(max-width:680px){
  :root{--frame:calc(100% - 2.1rem)}
  .header-inner{min-height:64px}
  .menu-toggle{display:flex}
  .primary-nav{position:absolute;top:calc(100% + .3rem);left:1rem;right:1rem;background:var(--paper);border:1px solid var(--rule);padding:1.2rem;flex-direction:column;align-items:flex-start;gap:1rem;box-shadow:0 10px 30px rgba(41,51,59,.08)}
  .hero-type{padding:3.35rem 0 4.25rem}
  .hero-type h1{font-size:clamp(2.35rem,8.5vw,3.15rem);line-height:1.085;letter-spacing:-.036em;text-wrap:pretty}
  .hero-lede{font-size:1.04rem;margin-top:1.8rem}
  .career-timeline{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem;row-gap:2rem;margin-top:3.25rem;padding-top:1.12rem}
  .timeline-role{font-size:.87rem}
  .timeline-org{font-size:.93rem}
  .timeline-current .timeline-org{font-size:1.18rem}
  .quality-grid,.transformation-layout,.invision-layout{grid-template-columns:1fr;gap:2.25rem;padding:3.5rem 0}
  .quality-copy h3{font-size:3.55rem}
  .quality-summary,.transformation-copy p,.invision-detail p{font-size:1.04rem}
  .quality-artwork{min-height:290px;gap:.5rem;padding:.8rem}
  .screenshot-finding{height:185px}
  .screenshot-replacements{height:235px}
  .screenshot-score{height:210px}
  .screen-placeholder{padding:.6rem .45rem}
  .screen-placeholder span{font-size:.62rem}
  .quality-artifacts figcaption{font-size:.81rem}
  .transformation-copy h3{font-size:3.15rem}
  .transformation-editorial{min-height:352px;padding:1.1rem}
  .shift-phases{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:.45rem}
  .shift-label{font-size:1.34rem}
  .shift-illustration{height:138px;margin:1.15rem 0 .8rem}
  .shift-statement{font-size:clamp(1.08rem,4.4vw,1.42rem);line-height:1.13}
  .shift-connector{margin-top:2.8rem}
  .shift-connector span{width:16px}
  .invision-intro h3{font-size:2.95rem}
  .invision-detail a:not(.case-study-cta){margin-top:1.1rem}
  .leadership-content{padding:4rem 0}
  .leadership-introduction h2{font-size:3rem}
  .leadership-introduction>p{font-size:1.04rem;margin-top:1rem}
  .philosophy-grid{grid-template-columns:1fr;margin-top:2rem}
  .philosophy-card{min-height:0;padding:1.6rem}
  .philosophy-card h3{font-size:2rem}
  .philosophy-card p{font-size:.98rem}
  .philosophy-card-people{grid-column:auto;display:block}
  .philosophy-card-people h3{margin-bottom:1.05rem}
  .about-layout{grid-template-columns:1fr;gap:2.1rem;padding:3.5rem 0}
  .about-media{min-height:320px}
  .about-copy h3{font-size:3rem}
  .about-copy p{font-size:1.04rem}
  .footer-layout{flex-direction:column;padding:2.65rem 0}
  .footer-links{justify-items:start}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Editorial finishing details: light structural texture, never a decorative hero object. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.case-study-marker{font-size:.94rem;line-height:1.35;letter-spacing:-.01em;font-weight:500;margin:0 0 .94rem;color:var(--muted)}
.quality-section .case-study-marker{color:#cad9db}
.hero-type::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(244,239,232,.35),rgba(214,225,220,.16)),
    linear-gradient(rgba(82,105,120,.095) 1px,transparent 1px),
    linear-gradient(90deg,rgba(82,105,120,.095) 1px,transparent 1px);
  background-size:100% 100%,54px 54px,54px 54px;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 30%,#000 73%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 30%,#000 73%);
}.quality-artwork{
  background:#e7e8e2;
}.transformation-editorial{background-color:var(--sage);background-image:none;}.leadership-section{
  background-color:var(--sage);
  background-image:none;
}
.about-media{background:none}
/* Motion is linked to navigation or an action, not page-scroll decoration. */
.primary-nav a{position:relative;transition:color .19s ease}
.primary-nav a:not(.nav-contact)::after{
  content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;transition:transform .24s ease;
}
.primary-nav a[aria-current="location"]:not(.nav-contact)::after,
.primary-nav a:not(.nav-contact):hover::after,
.primary-nav a:not(.nav-contact):focus-visible::after{transform:scaleX(1)}
.invision-detail a:not(.case-study-cta){transition:color .2s ease,border-color .2s ease}
.invision-detail a:not(.case-study-cta):hover,.invision-detail a:not(.case-study-cta):focus-visible{color:var(--blue);border-color:var(--blue)}
@media(max-width:680px){
  .hero-type::before{inset:0;width:100%;height:100%;background-size:100% 100%,42px 42px,42px 42px;opacity:.6;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.23) 40%,#000 100%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.23) 40%,#000 100%)}
  .primary-nav a:not(.nav-contact)::after{bottom:-.15rem}
  .primary-nav{display:flex;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease}
  .primary-nav.open{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
  .case-study-marker{margin-bottom:.9rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Every case-study heading uses the same functional label spacing, regardless of the section's paragraph styles. */
.quality-copy > .case-study-marker,
.transformation-copy > .case-study-marker,
.invision-intro > .case-study-marker{margin:0 0 .94rem;line-height:1.35}
.quality-copy > h3,.transformation-copy > h3,.invision-intro > h3{margin:0}
@media(max-width:680px){
  .quality-copy > .case-study-marker,
  .transformation-copy > .case-study-marker,
  .invision-intro > .case-study-marker{margin-bottom:.8rem}
}

/* The grid belongs to the Order Quality narrative field, not the screenshot placeholder. */
.quality-section{
  background-color:var(--slate);
  background-image:
    linear-gradient(rgba(233,243,238,.060) 1px,transparent 1px),
    linear-gradient(90deg,rgba(233,243,238,.060) 1px,transparent 1px),
    linear-gradient(110deg,#253845,#2b4150);
  background-size:64px 64px,64px 64px,100% 100%;
}



/* Mobile composition: each concept is shown in full rather than squeezed into half a phone. */
@media (max-width: 680px) {
  :root { --frame: calc(100% - 2.25rem); }
  .hero-type { padding: 3rem 0 3.4rem; }
  .hero-editorial { min-width: 0; }
  .hero-type h1 {
    font-size: clamp(2.15rem, 8.2vw, 3rem);
    line-height: 1.105;
    letter-spacing: -.031em;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .hero-lede { font-size: 1rem; line-height: 1.62; margin-top: 1.7rem; }

  /* A simple single-column chronology. The year no longer competes
     for width with the Director of Product Design title. */
  .career-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2.6rem;
    padding-top: 0;
    border-top: 0;
    max-width: none;
  }
  .timeline-entry {
    display: grid;
    grid-template-columns: 6rem minmax(0,1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: .18rem .8rem;
    border-top: 1px solid var(--rule);
    padding: .9rem 0;
    width: 100%;
  }
  .timeline-date { grid-column: 1; grid-row: 1 / span 2; margin: .12rem 0 0; font-size: .77rem; line-height: 1.4; }
  .timeline-role { grid-column: 2; grid-row: 1; font-size: .9rem; line-height: 1.36; overflow-wrap: normal; }
  .timeline-org { grid-column: 2; grid-row: 2; font-size: .96rem; line-height: 1.35; }
  .timeline-earlier .timeline-date { font-size: 1.45rem; line-height: .7; margin-top: .2rem; }
  .timeline-current .timeline-org { font-size: 1.1rem; line-height: 1.28; }

  /* Responsive headlines should reflow according to available reading width,
     rather than retaining desktop-specific max character counts. */
  .quality-copy h3,
  .transformation-copy h3,
  .invision-intro h3,
  .leadership-introduction h2,
  .about-copy h3 {
    max-width: none;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  .quality-copy h3 { font-size: clamp(2.65rem, 10vw, 3.3rem); line-height: 1.02; }
  .transformation-copy h3 { font-size: clamp(2.5rem, 9.6vw, 3.15rem); line-height: 1.04; }
  .invision-intro h3 { font-size: clamp(2.45rem, 9.3vw, 3rem); line-height: 1.05; }
  .leadership-introduction h2 { font-size: clamp(2.45rem, 9.5vw, 3rem); line-height: 1.07; }
  .about-copy h3 { font-size: clamp(2.3rem, 8.9vw, 2.85rem); line-height: 1.08; }
  .case-study-grid, .transformation-layout, .invision-layout { gap: 2rem; }

  /* Product evidence: placeholders become three full-width panels on a phone. */
  .quality-artwork {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
    min-height: 0;
    padding: 1rem;
  }
  .quality-artwork .screen-placeholder {
    height: 158px;
    min-height: 158px;
    width: 100%;
    padding: .85rem;
    box-shadow: none;
  }
  .screen-placeholder span { font-size: .86rem; }

  /* The From and To illustrations are individual vertically stacked cards. */
  .transformation-editorial {
    min-height: 0;
    padding: 1.1rem;
    display: block;
    overflow: visible;
  }
  .shift-phases {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
  }
  .shift-phase {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
    background: rgba(255,255,255,.61);
    border: 1px solid rgba(41,51,59,.1);
  }
  .shift-label { font-size: 1.6rem; line-height: 1.1; }
  .shift-illustration {
    width: min(100%, 380px);
    height: auto;
    aspect-ratio: 220 / 170;
    margin: 1rem auto .65rem;
    display: block;
    overflow: hidden;
  }
  .shift-statement {
    font-size: clamp(1.35rem, 5.3vw, 1.65rem);
    line-height: 1.12;
    max-width: 20ch;
    margin: .5rem 0 0;
  }
  .shift-connector {
    margin: 0 auto;
    height: 2.4rem;
    width: 2.4rem;
    align-items: center;
    justify-content: center;
  }
  .shift-connector span { width: 2px; height: 2.1rem; }
  .shift-connector span::after {
    top: auto;
    right: -4px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 0;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    transform: rotate(45deg);
  }

  /* The philosophy cards are full-width and no fixed-height containers. */
  .philosophy-grid { grid-template-columns: minmax(0,1fr); }
  .philosophy-card, .philosophy-card-people { min-width: 0; min-height: 0; display:block; }
}
@media (min-width: 681px) and (max-width: 900px) {
  :root { --frame: calc(100% - 3rem); }
  .career-timeline {
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 2rem;
    row-gap: 1.2rem;
    border-top: 0;
    padding-top: 0;
  }
  .timeline-entry { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
  .case-study-grid, .transformation-layout, .invision-layout, .about-layout {
    grid-template-columns: minmax(0,1fr);
    gap: 2.4rem;
  }
  .quality-grid, .transformation-layout { padding-block: 4rem; }
  .quality-copy h3, .transformation-copy h3, .invision-intro h3 { max-width:none; }
  .quality-artwork { min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:1rem; }
  .quality-artwork .screen-placeholder { height:180px; min-height:180px; width:100%; }
  .transformation-editorial { min-height:0; overflow:visible; padding:1.3rem; }
  .shift-phases { display:flex; flex-direction:column; gap:1rem; }
  .shift-phase { display:flex; flex-direction:column; background:rgba(255,255,255,.61); border:1px solid rgba(41,51,59,.1);padding:1.6rem; }
  .shift-illustration { width:min(100%,420px); height:auto; aspect-ratio:220 / 170; margin:1rem auto .6rem; }
  .shift-statement { max-width:none; font-size:1.7rem; margin-top:.6rem; }
  .shift-connector { height:2.5rem; width:2.5rem; margin:0 auto; align-items:center; justify-content:center; }
  .shift-connector span { width:2px; height:2.2rem; }
  .shift-connector span::after { top:auto;right:-4px;bottom:0;width:10px;height:10px;border:0;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold);transform:rotate(45deg); }
  .philosophy-grid {grid-template-columns:1fr;}
  .philosophy-card {min-height:0;}
  .philosophy-card-people {display:block;}
  .philosophy-card-people h3 {margin-bottom:1rem;}
}
@media (max-width: 359px) {
  :root { --frame: calc(100% - 1.6rem); }
  .hero-type h1 { font-size: 2.05rem; }
  .timeline-entry { grid-template-columns: 5.5rem minmax(0,1fr); gap: .18rem .6rem; }
  .shift-phase { padding: 1rem; }
  .transformation-editorial { padding: .8rem; }
}

/* The transformation heading should carry as an editorial title, without an orphaned AI. */
.heading-keep{white-space:nowrap}
.transformation-copy h3{font-size:clamp(2.7rem,3.3vw,3.55rem);line-height:1.065;letter-spacing:-.038em;max-width:100%}
@media (max-width:960px){.transformation-copy h3{font-size:clamp(2.65rem,4.3vw,3.45rem)}}
@media (max-width:680px){.transformation-copy h3{font-size:clamp(2.2rem,8.3vw,2.95rem);line-height:1.09;max-width:none}}


/* 2026-11-08: project CTAs and tighter transformation layout. */
.keep-together{white-space:nowrap}
.transformation-layout{
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2.1rem,3.8vw,4.4rem);
}
.transformation-copy h3{
  max-width:none;
  font-size:clamp(2.55rem,3.35vw,3.7rem);
  letter-spacing:-.036em;
  line-height:1.035;
}
.transformation-editorial{
  min-height:0;
  padding:clamp(1.3rem,2vw,2rem);
}
.shift-phases{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.15rem,2vw,1.65rem);
}
.shift-phase{justify-content:flex-start}
.shift-illustration{
  height:165px;
  margin:.55rem 0 .18rem;
}
.shift-statement{
  margin:.15rem 0 0;
  max-width:none;
  font-size:clamp(1.15rem,1.43vw,1.46rem);
  line-height:1.16;
}
.case-study-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:48px;
  min-width:166px;
  margin-top:1.65rem;
  padding:.75rem 1.35rem;
  border:1px solid var(--slate);
  border-radius:2px;
  background:var(--slate);
  color:var(--paper);
  font:600 .91rem/1.2 'DM Sans',system-ui,sans-serif;
  letter-spacing:0;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.case-study-cta:hover,.case-study-cta:focus-visible{
  background:#365366;
  border-color:#365366;
  color:#fff;
  text-decoration:none;
}
.quality-section .case-study-cta{
  background:var(--paper);
  border-color:var(--paper);
  color:var(--slate);
}
.quality-section .case-study-cta:hover,.quality-section .case-study-cta:focus-visible{
  background:#e0ebe7;
  border-color:#e0ebe7;
  color:var(--slate);
}
@media(max-width:900px){
  .transformation-layout{grid-template-columns:minmax(0,1fr)}
  .transformation-copy h3{
    max-width:100%;
    font-size:clamp(2.35rem,5.4vw,3.35rem);
    line-height:1.05;
  }
  .shift-phases{
    display:flex;
    flex-direction:column;
    gap:1.05rem;
  }
  .shift-phase{
    padding:clamp(1.1rem,3vw,1.5rem);
    background:rgba(255,255,255,.64);
    border:1px solid rgba(41,51,59,.10);
  }
  .shift-illustration{
    width:min(100%,380px);
    height:auto;
    aspect-ratio:220/170;
    margin:.55rem auto .05rem;
  }
  .shift-statement{max-width:24ch;font-size:clamp(1.3rem,2.7vw,1.67rem);margin:.05rem 0 0}
}
@media(max-width:680px){
  .transformation-copy h3{
    font-size:clamp(2.28rem,8.3vw,2.95rem);
    line-height:1.065;
    max-width:100%;
  }
  .shift-statement{max-width:none;font-size:clamp(1.28rem,5.1vw,1.6rem)}
  .case-study-cta{min-height:48px;margin-top:1.55rem}
}
@media(max-width:359px){
  .transformation-copy h3{font-size:2.18rem}
}
@media(prefers-reduced-motion:reduce){
  .case-study-cta{transition:none}
}

/* Intentional title break: the full AI phrase belongs together on the second line. */
.transformation-title-line{display:block}

/* Allow the flagship title to render its full serif glyph extents on desktop. */
.quality-copy h3 { line-height: 1.035; }


/* Team engagement evidence: make the movement clear without making the number the page's loudest element. */
.engagement-proof {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  column-gap:clamp(2rem,5vw,5rem);
  row-gap:clamp(2rem,3.6vw,3.3rem);
  align-items:center;
  margin-top:clamp(1.8rem,3vw,3rem);
  padding:clamp(2rem,4.3vw,4.2rem);
  background:var(--paper);
  color:var(--ink);
}
.engagement-proof-copy h3 {
  font:400 clamp(2rem,3.05vw,3.2rem)/1.09 'Newsreader',Georgia,serif;
  letter-spacing:-.035em;
  max-width:18ch;
  margin:0;
}
.engagement-proof-copy p {
  font-size:1.025rem;
  line-height:1.7;
  max-width:54ch;
  margin:1.15rem 0 0;
}
.engagement-spotlight {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:.35rem;
  min-width:0;
  color:var(--slate);
}
.engagement-spotlight-kicker {
  font-size:.93rem;
  line-height:1.45;
  color:var(--ink);
  font-weight:600;
}
.engagement-spotlight-result {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:.8rem;
  row-gap:.15rem;
}
.engagement-spotlight-number {
  font:400 clamp(2.7rem,3.9vw,3.85rem)/1.03 'Newsreader',Georgia,serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.engagement-spotlight-unit {
  font-size:clamp(.99rem,1.3vw,1.15rem);
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.engagement-spotlight-support {
  font-size:.88rem;
  line-height:1.5;
  color:var(--muted);
}
.engagement-detail-grid {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,5vw,6rem);
  padding-top:clamp(1.5rem,2.6vw,2.3rem);
  border-top:1px solid rgba(41,51,59,.22);
}
.engagement-detail-group { min-width:0; }
.engagement-detail-group h4 {
  margin:0 0 1.2rem;
  font-size:1.09rem;
  line-height:1.36;
  font-weight:600;
}
.engagement-metric-list {
  padding:0;
  margin:0;
  list-style:none;
  display:grid;
  gap:.8rem;
}
.engagement-metric-list li {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.1rem;
  font-size:.97rem;
  line-height:1.4;
}
.engagement-metric-list strong {
  flex-shrink:0;
  font:600 1.25rem/1 'DM Sans',system-ui,sans-serif;
  color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.engagement-card-note {
  font-size:.79rem;
  line-height:1.5;
  color:var(--muted);
  margin:1.25rem 0 0;
}
@media(max-width:1050px) {
  .engagement-proof {grid-template-columns:minmax(0,1fr);gap:2rem;}
}
@media(max-width:650px) {
  .engagement-proof {padding:1.4rem;gap:1.8rem;margin-top:1.35rem;}
  .engagement-proof-copy h3 {font-size:clamp(2rem,8vw,2.6rem);}
  .engagement-proof-copy p {font-size:.98rem;line-height:1.62;}
  .engagement-spotlight-number {font-size:2.85rem;}
  .engagement-spotlight-unit {font-size:1rem;}
  .engagement-detail-grid {grid-template-columns:minmax(0,1fr);gap:2.1rem;padding-top:1.5rem;}
  .engagement-detail-group h4 {font-size:1.03rem;margin-bottom:1rem;}
  .engagement-metric-list {gap:.68rem;}
  .engagement-metric-list li {gap:.7rem;font-size:.91rem;}
  .engagement-metric-list strong {font-size:1.1rem;}
  .engagement-card-note {margin-top:1rem;}
}
/* About me: a deliberate bio and portrait composition, followed by the personal work. */
.about-section{background:#f6f1e9;}
.about-intro-layout{
  display:grid;
  grid-template-columns:minmax(0,1.36fr) minmax(280px,.64fr);
  align-items:center;
  gap:clamp(3rem,7vw,7.5rem);
  padding:clamp(4.3rem,6vw,6rem) 0 clamp(1.45rem,2vw,2.2rem);
}
.about-intro-layout>*{min-width:0;}
.about-bio h2{
  font:400 clamp(3.1rem,4.65vw,4.65rem)/1.04 'Newsreader',Georgia,serif;
  letter-spacing:-.042em;
  margin:0 0 clamp(1.8rem,3.2vw,2.8rem);
}
.about-bio p{
  font-size:1.1rem;
  line-height:1.7;
  color:var(--ink);
  max-width:62ch;
  margin:0;
}
.about-bio p+p{margin-top:1.3rem;}
.about-portrait{margin:0;}
.about-portrait-placeholder{
  width:100%;
  min-height:365px;
  aspect-ratio:4 / 5;
  background:#dedfda;
  border:1px solid rgba(41,51,59,.1);
  display:flex;
  align-items:flex-end;
  padding:1rem 1.1rem;
}
.about-portrait-placeholder span{
  font-size:.84rem;
  color:#5c686b;
}
.about-ledge-feature{
  border-top:0;
}
.about-ledge-feature .about-layout{
  padding:clamp(1.3rem,2.1vw,2rem) 0 clamp(4.2rem,5.8vw,6rem);
}
.about-copy h3{
  font:400 clamp(2.6rem,3.45vw,4rem)/1.06 'Newsreader',Georgia,serif;
  letter-spacing:-.042em;
  margin:0;
  max-width:14ch;
}
@media(max-width:900px){
  .about-intro-layout{
    grid-template-columns:minmax(0,1fr) minmax(230px,.7fr);
    gap:2.3rem;
  }
  .about-bio p{font-size:1.04rem;}
  .about-portrait-placeholder{min-height:300px;}
}
@media(max-width:680px){
  .about-intro-layout{
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
    padding:3.7rem 0 1.6rem;
  }
  .about-bio h2{
    font-size:clamp(2.6rem,10vw,3.3rem);
    margin-bottom:1.55rem;
  }
  .about-bio p{font-size:1.02rem;line-height:1.65;}
  .about-bio p+p{margin-top:1.15rem;}
  .about-portrait{max-width:400px;width:100%;margin:0;}
  .about-portrait-placeholder{min-height:0;aspect-ratio:4/4.4;}
  .about-ledge-feature .about-layout{padding:1.2rem 0 3.5rem;}
  .about-copy h3{font-size:clamp(2.35rem,9vw,3rem);line-height:1.08;}
}

/* Header: single clearly aligned action row. LinkedIn is the terminal icon. */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1.35rem;min-width:0}
.header-linkedin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:36px;
  min-height:40px;
  color:var(--ink);
  border-radius:2px;
  transition:color .18s ease;
}
.header-linkedin svg{width:19px;height:19px;display:block}
.header-linkedin:hover,.header-linkedin:focus-visible{color:var(--blue)}
.about-resume-cta{margin-top:1.65rem}
@media(max-width:680px){
  .header-actions{gap:.65rem}
  .header-linkedin{min-width:34px;min-height:40px}
  .header-linkedin svg{width:18px;height:18px}
  .about-resume-cta{margin-top:1.4rem}
}
@media(prefers-reduced-motion:reduce){.header-linkedin{transition:none}}

/* InVision's archival link treatment must never override the shared CTA. */
.invision-detail > .case-study-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  min-width:166px;
  margin-top:1.65rem;
  padding:.75rem 1.35rem;
  border:1px solid var(--slate);
  border-radius:2px;
  background:var(--slate);
  color:var(--paper);
  font:600 .91rem/1.2 'DM Sans',system-ui,sans-serif;
  text-align:center;
  text-decoration:none;
}
.invision-detail > .case-study-cta:hover,
.invision-detail > .case-study-cta:focus-visible {
  border-color:#365366;
  background:#365366;
  color:#fff;
  text-decoration:none;
}
@media(max-width:680px) {
  .invision-detail > .case-study-cta {margin-top:1.55rem;}
}

/* Blueprint-inspired atmosphere: one localized color wash and a drafting grid.
   The content stays on a solid readable surface; decoration carries no information. */
.hero-type {
  background-color:var(--cream);
  background-image:
    radial-gradient(ellipse 58% 82% at 102% 7%,
      rgba(139,175,194,.47) 0%,
      rgba(171,196,206,.31) 31%,
      rgba(205,215,212,.16) 55%,
      rgba(244,239,232,0) 81%),
    linear-gradient(119deg, rgba(250,246,239,.48) 0%, rgba(244,239,232,0) 53%);
  background-repeat:no-repeat;
}
.hero-type::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:1;
  background-image:
    linear-gradient(rgba(80,112,129,.105) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,112,129,.105) 1px,transparent 1px),
    linear-gradient(rgba(80,112,129,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,112,129,.045) 1px,transparent 1px);
  background-size:84px 84px,84px 84px,21px 21px,21px 21px;
  -webkit-mask-image:linear-gradient(to right, transparent 7%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.82) 79%, rgba(0,0,0,.95) 100%);
  mask-image:linear-gradient(to right, transparent 7%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.82) 79%, rgba(0,0,0,.95) 100%);
}
@media(max-width:680px) {
  .hero-type {
    background-image:radial-gradient(ellipse 95% 60% at 118% 1%,
      rgba(153,182,198,.30) 0%,
      rgba(193,208,211,.17) 46%,
      rgba(244,239,232,0) 83%);
  }
  .hero-type::before {
    inset:0;
    width:100%;
    height:100%;
    opacity:.8;
    background-size:56px 56px,56px 56px,14px 14px,14px 14px;
    -webkit-mask-image:linear-gradient(to right,transparent 4%,rgba(0,0,0,.16) 45%,rgba(0,0,0,.68) 100%);
    mask-image:linear-gradient(to right,transparent 4%,rgba(0,0,0,.16) 45%,rgba(0,0,0,.68) 100%);
  }
}
@media(prefers-contrast:more) {
  .hero-type {background-image:none;}
  .hero-type::before {display:none;}
}


/* Compact while reading. Keep touch targets comfortably large. */
:root { --site-header-height: 74px; }
html.nav-condensed { --site-header-height: 52px; }
.header-inner { min-height: var(--site-header-height); transition: min-height .18s ease; }
html.nav-condensed .wordmark { font-size: .91rem; }
html.nav-condensed .primary-nav { font-size: .87rem; }
@media(max-width:680px) {
  :root { --site-header-height: 64px; }
  html.nav-condensed { --site-header-height: 50px; }
  .header-inner { min-height: var(--site-header-height); }
  html.nav-condensed .menu-toggle { min-height:44px; min-width:44px; justify-content:center; }
  html.nav-condensed .header-linkedin { min-height:44px; min-width:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .header-inner { transition:none; }
}


/* Portrait restored from the user's supplied headshot. */
.about-portrait-photo{display:block;width:100%;height:100%;min-height:365px;aspect-ratio:4 / 4.8;object-fit:cover;object-position:center 34%;}
@media(max-width:680px){.about-portrait-photo{min-height:0;aspect-ratio:4 / 4.4;object-position:center 35%;}}


/* Team stability is presented as a supporting outcome beneath the engagement details. */
.engagement-retention {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:clamp(1rem,2vw,1.65rem);
  padding:clamp(1.05rem,1.8vw,1.45rem) clamp(1.2rem,2.6vw,2rem);
  background:var(--sage);
  color:var(--ink);
}
.engagement-retention-stat {
  flex:none;
  font:400 clamp(2.15rem,3vw,2.85rem)/.98 'Newsreader',Georgia,serif;
  letter-spacing:-.04em;
  color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.engagement-retention-copy {min-width:0;}
.engagement-retention-title {
  font-size:clamp(.98rem,1.12vw,1.12rem);
  font-weight:600;
  line-height:1.4;
  margin:0;
}
.engagement-retention-note {
  font-size:.9rem;
  line-height:1.5;
  margin:.2rem 0 0;
  color:var(--muted);
}
@media (max-width:650px) {
  .engagement-retention {gap:.9rem;padding:1.05rem 1rem;align-items:flex-start;}
  .engagement-retention-stat {font-size:2.3rem;}
  .engagement-retention-title {font-size:.98rem;}
  .engagement-retention-note {font-size:.85rem;}
}

/* Harmonized homepage case study title sizing. */
.quality-copy h3,
.transformation-copy h3,
.invision-intro h3 {
  font-size:clamp(2.55rem,3.5vw,3.65rem);
}
@media(max-width:680px) {
  .quality-copy h3,
  .transformation-copy h3,
  .invision-intro h3 {
    font-size:clamp(2.45rem,9.3vw,3rem);
  }
}
@media(max-width:359px) {
  .quality-copy h3,
  .transformation-copy h3,
  .invision-intro h3 { font-size:2.18rem; }
}

/* Order Quality: keep the placeholder from dictating an oversized feature row.
   The editorial copy, case-study heading and CTA retain their original sizing. */
@media (min-width: 901px) {
  .quality-grid {
    padding-block: clamp(2.8rem, calc(15vw - 123px), 6.7rem);
  }
  .quality-artwork {
    min-height: 320px;
    padding: clamp(.9rem, 1.5vw, 1.25rem);
  }
  .quality-artwork .screenshot-finding { height: 210px; }
  .quality-artwork .screenshot-replacements { height: 272px; }
  .quality-artwork .screenshot-score { height: 235px; }
}


/* How I Lead: repeat the Order Quality editorial background, rather than a
   continuous light-sage field. Keep cards and proof on warm, readable paper. */
.leadership-section {
  background-color:var(--slate);
  background-image:
    linear-gradient(rgba(233,243,238,.060) 1px,transparent 1px),
    linear-gradient(90deg,rgba(233,243,238,.060) 1px,transparent 1px),
    linear-gradient(110deg,#253845,#2b4150);
  background-size:64px 64px,64px 64px,100% 100%;
  color:var(--paper);
}
.leadership-introduction > p { color:#e0e8e9; }
.philosophy-grid {
  background:rgba(251,247,241,.22);
  border-color:rgba(251,247,241,.22);
}
.philosophy-card { color:var(--ink); }
/* A quieter nested neutral prevents the retention note reintroducing a green panel. */
.engagement-retention { background:var(--stone); }


/* Portfolio visual language: coherent, low-contrast linework tailored to each story.
   Layer SVGs under the actual content. Purely decorative, no animation or interaction.
   The hero retains its original blueprint grid and About intentionally stays plain. */
.quality-section, .transformation-section, .invision-section, .leadership-section {
  position:relative; isolation:isolate;
}
:is(.quality-section,.transformation-section,.invision-section,.leadership-section)::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:repeat;
}
:is(.quality-section,.transformation-section,.invision-section,.leadership-section) > .frame {
  position:relative; z-index:1;
}
/* A human network of loosely connected points, repeated over slate. */
.quality-section { background-color:var(--slate); background-image:linear-gradient(110deg,#253845,#2b4150); background-size:auto; }
.quality-section::before {
  background-image:url("assets/texture-quality-network.svg");
  background-size:640px 460px; opacity:.16;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.48),rgba(0,0,0,.8) 55%,#000);
  mask-image:linear-gradient(to right,rgba(0,0,0,.48),rgba(0,0,0,.8) 55%,#000);
}
/* Orthogonal circuits suggest intelligence and a changing design workflow. */
.transformation-section::before {
  background-image:url("assets/texture-transformation-circuit.svg");
  background-size:620px 440px; opacity:.17;
}
/* InVision: expanding optical wavefronts, distinct from the flowing Leadership lines.
   Stronger blue-gray strokes are necessary to read over the neutral stone background. */
.invision-section::before {
  background-image:url("assets/texture-invision-rays.svg");
  background-size:1440px 560px; background-position:center right;
  background-repeat:no-repeat; opacity:.30;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.33),rgba(0,0,0,.7) 62%,rgba(0,0,0,.94));
  mask-image:linear-gradient(to right,rgba(0,0,0,.33),rgba(0,0,0,.7) 62%,rgba(0,0,0,.94));
}
/* Leadership: multiple gently curved paths moving into a shared lane.
   Match Order Quality's line intensity on the dark slate background. */
.leadership-section { background-color:var(--slate); background-image:linear-gradient(110deg,#253845,#2b4150); background-size:auto; }
.leadership-section::before {
  background-image:url("assets/texture-leadership-convergence.svg");
  background-size:100% 100%; background-position:center top;
  background-repeat:no-repeat; opacity:.16;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.48),rgba(0,0,0,.8) 55%,#000);
  mask-image:linear-gradient(to right,rgba(0,0,0,.48),rgba(0,0,0,.8) 55%,#000);
}
/* On smaller screens, do not intensify linework behind copy. */
@media(max-width:680px){
  .quality-section::before {background-size:460px 330px;opacity:.11;}
  .transformation-section::before {background-size:480px 340px;opacity:.14;}
  .invision-section::before {background-size:900px auto; background-position:63% center; opacity:.24;}
  .leadership-section::before {background-size:auto 100%; background-position:58% top; opacity:.11;}
}
@media(prefers-contrast:more){
  :is(.quality-section,.transformation-section,.invision-section,.leadership-section)::before {display:none;}
}


/* Quality, editorial homepage treatment. Matches InVision's two-column
   heading-and-description pattern until approved product images exist. */
.quality-section .quality-grid {
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:clamp(3rem,6vw,6.5rem);
  align-items:start;
  padding:clamp(3.8rem,5.5vw,5.8rem) 0;
}
.quality-section .quality-grid > * {min-width:0;}
.quality-section .quality-intro h3 {
  font:400 clamp(2.55rem,3.5vw,3.65rem)/1.03 'Newsreader',Georgia,serif;
  letter-spacing:-.035em;
  margin:0;
  max-width:14ch;
}
.quality-section .quality-detail {padding-top:.2rem;}
.quality-section .quality-detail .quality-summary {
  font-size:1.08rem;
  line-height:1.65;
  color:#e0e8e9;
  margin:0;
  max-width:550px;
}
.quality-section .quality-detail .case-study-cta {margin-top:1.65rem;}
@media(max-width:680px) {
  .quality-section .quality-grid {grid-template-columns:1fr;gap:2rem;padding:3.5rem 0;}
  .quality-section .quality-intro h3 {font-size:clamp(2.45rem,9.3vw,3rem);max-width:none;line-height:1.05;}
  .quality-section .quality-detail .quality-summary {font-size:1.04rem;}
  .quality-section .quality-detail .case-study-cta {margin-top:1.55rem;}
}
@media(max-width:359px) {.quality-section .quality-intro h3 {font-size:2.18rem;}}