/* ============================================================
   
   Type system: Fraunces (display) / Inter (body) / IBM Plex Mono (data labels)
   ============================================================ */


/*@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');


/* ---------- 1. Tokens ------------------------------------- */
:root{

  /* Ground + elevated surfaces.
     NOTE: --paper / --paper-muted / --bg-washed are consumed by inline
     background-color rules in the markup, so they are BACKGROUND tokens.
     Text tokens are --text / --ink-muted / --ink-faint.
     Contrast checked against #fff / #f5f3ec (WCAG relative-luminance):
       --red   on white  4.94:1   (unchanged brand red — already AA)
       --mint  on white  5.35:1
       --ink-faint on white 6.58:1 / --ink-muted 9.28:1 / --text 17.8:1 */
/*  --ink:          #ffffff;
  --paper:        #f5f3ec;
  --paper-muted:  #efece2;
  --bg-washed:    #f7f5ee;
  --surface:      #f7f5f0;
  --surface-2:    #efece1;

  --hair:         #ddd8cb;
  --hair-soft:    #e9e5d9;

  --text:         #17181a;
  --ink-muted:    #46474b;
  --ink-faint:    #5c5d61;

  --red:          #e2001a;
  --red-dim:      #8c0010;
  --red-wash:     rgba(226,0,26,.06);
  --gold:         #a8791b;
  --mint:         #1f7a44;

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  */

--ink:          #ffffff;
  --paper:        #f5f2eb;
  --paper-muted:  #ece7dd;
  --bg-washed:    #faf8f3;
  --surface:      #f1eee7;
  --surface-2:    #e7e2d8;

  --hair:         #d4cec2;
  --hair-soft:    #e6e1d8;

  --text:         #191a19;
  --ink-muted:    #454744;
  --ink-faint:    #646762;

  /* Main accent */
  --red:          #61119b;;
  --red-dim:      #785194;
  --red-wash:     rgba(23, 107, 104, 0.08);

  --gold:         #a47720;
  --mint:         #397154;

  /* Company colors */
  --sixt:         #f26b21;
  --myt:          #dfc83d;

   --display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
     --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  
 /* 
 font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;


  --display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  */

  --radius: 8px;
  --radius-sm: 4px;
  --shell: 1180px;
  --gutter: clamp(20px, 4vw, 32px);
  --pad-section: clamp(64px, 8vw, 116px);
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- 2. Reset + base ------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
/*::selection{ background:var(--red); color:#fff; }*/

h1,h2,h3,h4,h5{ margin:0 0 .5em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; color:var(--text); }
blockquote{ margin:0; }
hr{ border:none; border-top:1px solid var(--hair); margin:2.5rem 0; }

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--red);
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 18px;
  text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

/* ---------- 3. Layout shells ------------------------------ */
.container{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section{
  position:relative;
  padding:var(--pad-section) 0;
  border-bottom:1px solid var(--hair-soft);
}
.section:last-of-type{ border-bottom:none; }

/* .wrapper is a single-column hero shell by default; the loyalty page
   overrides it inline with a two-column grid. */
.wrapper{ display:block; width:100%; }
.case-block{ width:100%; }

/* ---------- 4. Header + scroll meter (signature) ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  /*background:rgba(255,255,255,.82);*/
  background-color: #000;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  /*border-bottom:1px solid var(--hair);*/
}

/* Red-to-gold reading meter riding the header's bottom hairline.
   Pure CSS scroll-linked animation; silently absent where unsupported. */
.site-header::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  height:5px;
  width:100%;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--red), var(--gold));
  animation:meter linear both;
  animation-timeline:scroll(root block);
}
@keyframes meter{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:64px;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:none;
}
.logo > img,
.logo-avatar img{
  width:30px; height:30px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--hair);
}
.logo-avatar{ display:block; line-height:0; }
.logo span,
.logo-text{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  /*color:var(--text);*/
  color: white;
}

.nav,
.navigation{
  display:flex;
  align-items:center;
  gap:clamp(16px, 3vw, 34px);
}
.nav a,
.navigation a{
  position:relative;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  /*color:var(--ink-faint);*/
  color: white;
  font-weight: 700;
  text-decoration:none;
  padding:6px 0;
  transition:color .2s ease;
}
.nav a::after,
.navigation a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .25s var(--ease);
}
.nav a:hover,
.navigation a:hover{ 
  /*color:var(--text);*/
  color: white;  
}
.nav a:hover::after,
.navigation a:hover::after{ transform:scaleX(1); }

/* ---------- 5. Shared editorial type ---------------------- */
.eyebrow,
.eyebrow-case,
.case-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-family:var(--mono);
  font-size:15px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
}
.eyebrow::before,
.eyebrow-case::before,
.case-kicker::before{
  content:"";
  flex:none;
  width:18px; 
  height:3px;
  background:var(--red);
}

.section-heading,
.hero-title,
.contact-heading,
.case-title{
  font-family:var(--display);
  font-weight:700;
 /* text-transform:uppercase; */
  letter-spacing:.01em;
  line-height:1.02;
  color:var(--text);
  margin:0 0 20px;
}

.section-title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    margin: 0px 0px 20px;
    line-height: 1.25;
}

.section-heading {
  text-transform:uppercase;
}

.section-heading,
.hero-title,
.contact-heading{ font-size:clamp(29px, 4.2vw, 48px); }
.case-title{ font-size:clamp(34px, 5.6vw, 68px); line-height:.99; margin-bottom:28px; }

.subsection-title {
  font-family:var(--body);
  font-size:15px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  margin:2.6rem 0 .9rem;
  padding-top:1.4rem;
 /* border-top:1px solid var(--hair); */
} /* .ssubsection-title */

.section-intro,
.case-intro,
.case-description,
.timeline-description{
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink-muted);
  max-width:70ch;
}
.section-intro strong,
.case-intro strong{ color:var(--text); }

.case-note{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-faint);
  border-left:2px solid var(--hair);
  padding-left:16px;
  margin-top:1.6rem;
  max-width:64ch;
}

/* ---------- 6. Home — hero -------------------------------- */
.hero{
  position:relative;
  /*padding:clamp(64px, 9vw, 112px) 0 clamp(48px, 6vw, 72px);*/
  padding: 3.5rem 0 2rem;
  border-bottom:1px solid var(--hair-soft);
  background-color: #f8f8f8;
}
.hero::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--red);
}

.hero-grid{
  display:grid;
  /*grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);*/
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.7fr);
  gap:clamp(36px, 6vw, 72px);
  align-items:center;
}

.hero-name{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text);
  margin:0 0 10px;
}
.hero-disciplines{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 26px;
}
.hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(33px, 5.2vw, 62px);
  line-height:1.03;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 0 32px;
  max-width:20ch;
}
.hero h1 em{
  font-style:normal;
  color:var(--red);
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 24px;
  background:var(--red);
  color:#fff;
  border:1px solid var(--red);
  border-radius:2px;
  transition:background .2s ease, color .2s ease, transform .2s var(--ease);
}
.button:hover{ background:#ff1128; transform:translateY(-2px); }
.button.secondary{
  background:transparent;
  color:var(--text);
  border-color:var(--hair);
}
.button.secondary:hover{ border-color:var(--text); background:var(--surface); }

.portrait{
  width:100%;
  max-width:320px;
  justify-self:center;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  /*border-radius: 20%;*/
  border:1px solid var(--hair);
  /*filter:grayscale(1) contrast(1.05);*/
  transition:filter .5s ease;
}
.portrait:hover{ filter:grayscale(0); }

/* Client logo band */
.experience{
  /*margin-top:clamp(48px, 7vw, 84px);*/
  margin-top: clamp(28px, 5vw, 34px);
  padding-top:32px;
  /*border-top:1px solid var(--hair);*/
}
.experience-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 24px;
}
.logo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(28px, 6vw, 64px);
}
.logo-row img{
  height:26px;
  width:auto;
  /* Brand marks ship as dark-on-transparent; normalize to solid ink. */
  filter:brightness(0);
  opacity:.55;
  transition:opacity .25s ease;
}
.logo-row img:hover{ opacity:1; }

/* ---------- 7. Home — selected work ----------------------- */
.selected-work{ padding:var(--pad-section) 0 0; }
.section-head{ margin-bottom:clamp(40px, 6vw, 68px); }
.section-head .section-intro{ margin-top:4px; }

.case-row{
  padding:clamp(48px, 6vw, 76px) 0;
  border-top:1px solid var(--hair-soft);
}

/*
.case-row:first-of-type{
  border-top: none;
}*/

.case-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
.case-row.reverse .case-copy{ order:2; }
.case-row.reverse .case-media{ order:1; }

.case-title{ margin-bottom:16px; }
.case-row .case-title{ font-size:clamp(26px, 3.4vw, 40px); margin-bottom:14px; }
.case-description{ margin-bottom:28px; }

.metrics{
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  margin-bottom:28px;
  border-top:1px solid var(--hair);
  padding-top:20px;
}
.metric{
  flex:1 1 120px;
  padding-right:20px;
}
.metric + .metric{ border-left:1px solid var(--hair); padding-left:20px; }
.metric strong{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1;
  letter-spacing:.01em;
  color:var(--text);
  margin-bottom:6px;
}
.metric span{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.45;
  letter-spacing:.06em;
  color:var(--ink-faint);
  display:block;
  text-transform: uppercase;
}

.case-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  padding-bottom:5px;
  border-bottom:1px solid var(--red);
  transition:color .2s ease, gap .2s var(--ease);
}
.case-link:hover{ color:var(--red); gap:14px; }

/* Case media treatments */
.case-media{ position:relative; }
.case-media img{ border-radius:var(--radius); }

.personal-media img{ border:1px solid var(--hair); }

.app-media{
  display:flex;
  justify-content:center;
  gap:18px;
}
.app-media img{
  width:46%;
  max-width:230px;
  border-radius:16px;
  border:1px solid var(--hair);
  box-shadow:0 30px 70px -34px rgba(20,18,16,.28);
  /*background:#000;*/
}


.company-visual{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--hair);
  background:var(--surface);
  aspect-ratio:4/3;
}
.company-visual .visual-background{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0;
  filter:grayscale(.6) brightness(.7);
}
.company-visual .visual-product{

  position: absolute;
  right: 4%;
  bottom: 4%;
  width: 34%;
  max-width: 170px;
  border-radius: 14px;
  border: 4px solid black;
  box-shadow: 0 24px 60px -24px rgba(20, 18, 16, .32);


}

/* ---------- 8. Home — more work / impact / career --------- */
.more-work{ padding:var(--pad-section) 0; border-top:1px solid var(--hair); }
.more-work .section-heading{ max-width:22ch; margin-bottom:clamp(32px,5vw,52px); }

.compact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  /*grid-template-columns: repeat(4, minmax(0, 1fr));*/
  gap:1px;
  background:transparent;
}
.compact-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--ink);
  box-shadow:0 0 0 1px var(--hair);
  padding:32px 28px 56px;
  text-decoration:none;
  transition:background .25s ease;
}
.compact-card:hover{ background:var(--surface); }
.compact-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
}
.compact-card h3{
  font-family:var(--display);
  font-weight:400;
  font-size:22px;
  line-height:1.08;
  text-transform:uppercase;
  margin:4px 0 0;
}
.compact-card p{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-faint);
  margin:0;
}
.compact-arrow{
  position:absolute;
  left:28px; bottom:26px;
  font-size:18px;
  color:var(--red);
  transition:transform .25s var(--ease);
}
.compact-card:hover .compact-arrow{ transform:translateX(6px); }

.impact{ padding:var(--pad-section) 0; border-top:1px solid var(--hair); }
.impact .section-heading{ margin-bottom:clamp(28px,4vw,44px); }
.impact-list{ border-top:1px solid var(--hair); }
.impact-row{
  display:grid;
  grid-template-columns:minmax(120px,180px) 1fr auto;
  gap:clamp(16px,4vw,40px);
  align-items:center;
  padding:26px 4px;
  border-bottom:1px solid var(--hair);
  text-decoration:none;
  transition:background .25s ease, padding-left .25s var(--ease);
}
.impact-row:hover{ background:var(--surface); padding-left:20px; }
.impact-value{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px, 4.4vw, 46px);
  line-height:1;
  color:var(--red);
}
.impact-copy{ display:block; }
.impact-copy strong{
  display:block;
  font-size:16px;
  font-weight:600;
  margin-bottom:3px;
}
.impact-copy span{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-faint);
}
.impact-arrow{ color:var(--ink-faint); font-size:18px; transition:transform .25s var(--ease), color .25s ease; }
.impact-row:hover .impact-arrow{ transform:translateX(6px); color:var(--red); }

.career{ padding:var(--pad-section) 0; border-top:1px solid var(--hair); }
.career .section-heading{ margin-bottom:clamp(28px,4vw,44px); }
.career-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:1px;
  background:transparent;
}
.career-item{
  background:var(--ink);
  box-shadow:0 0 0 1px var(--hair);
  padding:28px 24px;
  text-decoration:none;
  display:block;
  transition:background .25s ease;
}
a.career-item:hover{ background:var(--surface); }
.career-item strong{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:19px;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.career-item span{
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.7;
  color:var(--ink-faint);
}

/* ---------- 9. Contact + footers -------------------------- */
.contact{
  padding:var(--pad-section) 0 40px;
  border-top:1px solid var(--hair);
  background:var(--paper);
}
.contact-heading{ margin-bottom:clamp(28px,4vw,44px); }
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1px;
  background:transparent;
}
.contact-card{
  background:var(--ink);
  box-shadow:0 0 0 1px var(--hair);
  padding:26px 24px;
  text-decoration:none;
  display:block;
  transition:background .25s ease;
}
a.contact-card:hover{ background:var(--surface-2); }
.contact-card small{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:10px;
}
.contact-card strong{
  font-size:15px;
  font-weight:500;
  word-break:break-word;
}
.footer-line{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid var(--hair);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* Case-study page footer */
.footer{
  border-top:1px solid var(--hair);
  background:var(--ink);
}
.footer p{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
}

/* ---------- 10. Case study — hero ------------------------- */
.case-hero{
  position:relative;
 /* padding-top:clamp(56px, 7vw, 92px); */
  background:var(--paper);
}
.case-hero::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--red);
}

.work-subheader,
.case-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:26px;
}
.work-subheader span,
.case-tags span{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-muted);
  border:1px solid var(--hair);
  border-radius:2px;
  padding:7px 12px;
  background:var(--ink);
}

.hero-info{ min-width:0; }

/*
.hero-info > h2{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 12px;
}*/

/* Fact strip */
.case-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1px;
  /*background:var(--hair);*/
  border:1px solid var(--hair);
  margin-bottom:40px;
}
.meta-card{
  background:var(--ink);
  padding:18px 20px;
}
.meta-card span{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
}
.meta-card strong{
  font-size:15px;
  font-weight:600;
  line-height:1.4;
}

/* TL;DR */
.did-not-read{
  font-family:var(--mono);
  font-size:25px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 14px;
  /* padding-left:14px;
  border-left:2px solid var(--red); */
}
.tldr-row{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  gap:clamp(32px, 5vw, 64px);
  align-items:start;
  padding-top:8px;
}
.tl-dr{ min-width:0; }
.tldr-image{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
.tldr-image img{ width:100%; border-radius:0; }
.design-system-hero img{ border-radius:var(--radius); }

/* Hero image sets */
.hero-image{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:clamp(14px, 2.4vw, 24px);
  margin-top:clamp(28px, 4vw, 44px);
}
/* These are device mockups with their own bezel and transparent corners,
   so they get no frame of their own — only a radius for flat screenshots. */
.hero-image img{
  width:100%;
  border-radius:14px;
  background:transparent;
}
.hero-image figure{ margin:0; }
.hero-image figcaption{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-faint);
  margin-top:12px;
}
.hero-image.half{
  grid-template-columns:1fr;
  max-width:380px;
  margin-top:0;
}

/* ---------- 11. Case study — sections + lists ------------- */
/*.case-section{ background:var(--paper); }*/

.accent-list{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:70ch;
}
.accent-list li{
  position:relative;
  padding-left:22px;
  font-size:16px;
  line-height:1.65;
  color:var(--ink-muted);
}
.accent-list li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:7px; height:7px;
  background:var(--red);
}
.accent-list.danger li::before{ 
  background:rgb(122, 42, 40);
 /*box-shadow:0 0 0 3px var(--red-wash); */
}
.accent-list.danger li{ color:#7a2a28; }
.accent-list.solution li::before{ background:var(--mint); }

ul.normal{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
ul.normal li{
  position:relative;
  padding-left:18px;
  font-size:17px;
  line-height:1.6;
  color:var(--ink-faint);
}
ul.normal li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:5px; height:5px;
  background:var(--ink-faint);
}

/* Generic un-classed lists inside case copy */
.case-block > ul{
  max-width:70ch;
  padding-left:20px;
  color:var(--ink-muted);
}
.case-block > ul li{ margin-bottom:10px; line-height:1.65; }

/* ---------- 12. Case study — stat grid -------------------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1px;
  background:transparent;
  margin:clamp(24px, 4vw, 40px) 0;
}
.stat-card{
  background:var(--ink);
  box-shadow:0 0 0 1px var(--hair);
  padding:28px 24px;
  transition:background .25s ease;
}
.stat-card:hover{ background:var(--surface); }
.stat-icon{
  font-size:17px;
  line-height:1;
  color:var(--red);
  margin-bottom:14px;
  letter-spacing:.1em;
}
.stat-number{
  font-family:var(--display);
  font-weight:600;
  /*font-size:clamp(30px, 4vw, 44px);*/
  font-size: clamp(25px, 3vw, 40px);;
  line-height:1;
  letter-spacing:.01em;
  color:var(--text);
  margin-bottom:10px;
}
.stat-label{
  font-family:var(--mono);
  font-size:13px;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--ink-faint);
  text-transform: uppercase;
}
/* Standalone caption paragraphs reusing .stat-label */
p.stat-label{ max-width:70ch; margin-top:1.4rem; }

/* ---------- 13. Case study — card families ---------------- */
.strategy-grid,
.operating-grid,
.evidence-grid,
.principle-grid,
.roadmap-grid,
.scope-grid,
.metric-tree,
.decision-questions,
.ownership-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:clamp(16px, 2.4vw, 24px);
  margin-top:clamp(24px, 4vw, 40px);
}
.ownership-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

.strategy-card,
.operating-card,
.evidence-card,
.principle-card,
.roadmap-card,
.scope-card,
.metric-card,
.decision-item,
.ownership-card{
  background:var(--surface);
  border:1px solid var(--hair);
  /*border-top:2px solid var(--red);*/
  border-radius:var(--radius-sm);
  padding:26px 24px;
  transition:border-color .25s ease, transform .25s var(--ease);
}
.strategy-card:hover,
.principle-card:hover,
.roadmap-card:hover,
.scope-card:hover,
.metric-card:hover,
.evidence-card:hover,
.ownership-card:hover{ transform:translateY(-3px); }

.strategy-card h3,
.operating-card h3,
.evidence-card h3,
.principle-card h3,
.roadmap-card h3,
.scope-card h3,
.metric-card h3{
  font-family:var(--display);
  font-weight:400;
  font-size:20px;
  line-height:1.1;
  text-transform:uppercase;
  margin:0 0 10px;
  color:var(--text);
}
.strategy-card p,
.operating-card p,
.evidence-card p,
.principle-card p,
.roadmap-card p,
.scope-card p,
.metric-card p,
.decision-item p,
.ownership-card p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-faint);
  margin:0;
}

.strategy-number,
.principle-card > span,
.roadmap-card > span,
.scope-card > span,
.metric-card > span,
.evidence-card > span,
.metric-context,
.decision-index,
.ownership-card > span{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:12px;
}
.metric-context{ color:var(--ink-faint); letter-spacing:.08em; }

.ownership-card strong{
  display:block;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  margin-bottom:10px;
}

.scope-card ul{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.scope-card li{
  position:relative;
  padding-left:18px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-faint);
}
.scope-card li::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:5px; height:5px;
  background:var(--red);
}

.decision-item{ border-top-color:var(--hair); }
.decision-header{
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 8px;
  color:var(--text);
}

.evidence-card .metric-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-top:1px solid var(--hair);
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-faint);
}
.metric-line:first-of-type{ margin-top:16px; }
.metric-line strong{
  font-family:var(--body);
  font-size:15px;
  font-weight:600;
  color:var(--mint);
}

/* ---------- 14. Case study — callouts --------------------- */
.decision-callout,
.hypothesis{
  /*background:var(--surface);*/
  border:1px solid var(--hair);
  border-left:3px solid var(--red);
  /*border-radius:0 var(--radius-sm) var(--radius-sm) 0;*/
  padding:26px 28px;
  margin:clamp(24px, 4vw, 40px) 0;
  max-width:73ch;
}
.decision-callout h3{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 12px;
}
.decision-callout p,
.hypothesis{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-muted);
}
.decision-callout p{ margin:0; }
.hypothesis strong{ color:var(--text); }

.decision-rule{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
  padding:18px 0;
  border-top:1px solid var(--hair);
  max-width:80ch;
}
.decision-rule strong{
  font-family:var(--display);
  font-weight:400;
  font-size:26px;
  line-height:1;
  color:var(--red);
}
.decision-rule span{
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink-muted);
}

.formula{
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.7;
  color:var(--text);
  background:var(--ink);
  border:1px dashed var(--hair);
  border-radius:var(--radius-sm);
  padding:20px 22px;
  margin:clamp(20px,3vw,32px) 0;
  max-width:72ch;
  overflow-x:auto;
}

.about-quote{
  position:relative;
  margin:clamp(28px, 4vw, 48px) 0;
  padding:8px 0 8px 32px;
  border-left:3px solid var(--red);
  max-width:62ch;
}
.about-quote p{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(20px, 2.6vw, 30px);
  line-height:1.22;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--text);
  margin:0;
}

/* ---------- 15. Case study — journey + compare ------------ */
.journey-line{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1px;
  background:transparent;
  margin:clamp(24px, 4vw, 40px) 0;
}
.journey-step{
  position:relative;
  box-shadow:0 0 0 1px var(--hair);
  background:var(--ink);
  padding:26px 22px;
}
.journey-step strong{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:10px;
}
.journey-step p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-faint);
  margin:0;
}

.compare-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(20px, 3vw, 32px);
  align-items:start;
  margin:clamp(24px, 4vw, 40px) 0;
}
.compare-slot{
  position:relative;
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--surface);
}
.compare-slot img{ width:100%; border-radius:0; }
.compare-slot.before{ border-top:2px solid var(--ink-faint); }
.compare-slot.after{ border-top:2px solid var(--mint); }
/* Nested duplicate .compare-slot in the markup — flatten the inner one. */
.compare-slot .compare-slot{ border:none; border-radius:0; }

.compare-caption{
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.65;
  letter-spacing:.06em;
  color:var(--ink-faint);
  margin-top:14px;
}
.compare-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:100%;
  min-height:180px;
  padding:28px;
  color:var(--ink-faint);
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,.035) 10px 20px);
}
.compare-placeholder svg{ width:26px; height:26px; opacity:.7; }
.compare-placeholder span{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-align:center;
}

/* ---------- 16. Case study — visuals ---------------------- */
.case-visual{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
.case-visual img{ width:100%; border-radius:0; }
.hero-visual{ background:var(--surface); }
.visual-pair{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(18px, 3vw, 28px);
  align-items:start;
  margin-top:clamp(20px, 3vw, 32px);
}

/* ---------- 17. About page -------------------------------- */
.timeline{
  margin-top:clamp(28px, 4vw, 44px);
  display:flex;
  flex-direction:column;
  gap:0;
}
.timeline-item{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:clamp(18px, 3vw, 32px);
  padding:clamp(26px,3.5vw,38px) 0;
  /*border-top:1px solid var(--hair);*/
}
/*.timeline-item:last-child{ border-bottom:1px solid var(--hair); }*/

.timeline-rail{
  position:relative;
  display:flex;
  justify-content:center;
}
.timeline-rail::before{
  content:"";
  position:absolute;
  top:56px; bottom:-40px;
  left:50%;
  width:1px;
  background:var(--hair);
  transform:translateX(-50%);
}
.timeline-item:last-child .timeline-rail::before{ display:none; }
.timeline-avatar{
  width:44px; height:44px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--red);
  background:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--red);
  z-index:1;
}

.timeline-content{ min-width:0; }
.timeline-header{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.timeline-header h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(21px, 2.6vw, 28px);
  line-height:1.05;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:0 0 6px;
}
.timeline-role{
  font-size:15px;
  font-weight:500;
  color:var(--red);
  margin:0;
}
.timeline-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:right;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-faint);
}
.timeline-description{ margin-bottom:1rem; }

.timeline-achievements{
  list-style:none;
  margin:0 0 1.2rem;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:70ch;
}
.timeline-achievements li{
  position:relative;
  padding-left:22px;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-muted);
}
.timeline-achievements li::before{
  content:"";
  position:absolute;
  left:0; top:.65em;
  width:7px; height:7px;
  background:var(--red);
}

.timeline-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.timeline-tags span{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
  border:1px solid var(--hair);
  border-radius:2px;
  padding:6px 10px;
}

.skills-list{
  margin-top:clamp(24px, 4vw, 40px);
  /* border-top:1px solid var(--hair); */
}
.skills-row{
  display:grid;
  grid-template-columns:minmax(160px, 260px) 1fr;
  gap:clamp(16px, 4vw, 40px);
  align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--hair);
}
.skills-row h3{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  line-height:1.1;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:0;
}
.skills-row p{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-faint);
}

.skills-row:last-child {
  border-bottom: none;
}

/* ---------- 18. Legacy inline-style overrides ------------- */
/* A few pages hard-code light-theme values inline. Inline styles beat
   normal rules, so these are the only places !important is used. */
a[style*="color:blue"]{ color:var(--red) !important; }
[style*="#f6f5f2"]{ background:var(--surface) !important; }
[style*="#d4d8e12e"]{ background-color:var(--paper) !important; }

/* One section hardcodes style="background-color: black; color:white;" for
   its screenshot row. That black panel reads fine as an intentional dark
   pedestal (it matches the device-mockup panels used elsewhere), but this
   theme's .eyebrow-case / .section-title rules paint dark ink text by
   default — invisible on black. Force them light only inside that block. */
[style*="background-color: black"] .eyebrow-case,
[style*="background-color: black"] .section-title{
  color:#f4f2ec !important;
}

/* Anchor targets clear the sticky header */
[id]{ scroll-margin-top:88px; }

/* ---------- 19. Responsive -------------------------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .portrait{ order:-1; max-width:200px; justify-self:start; }

  .compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-inner{ grid-template-columns:1fr; gap:36px; }
  .case-row.reverse .case-copy,
  .case-row.reverse .case-media{ order:0; }
  .tldr-row{ grid-template-columns:1fr; }
  .skills-row{ grid-template-columns:1fr; gap:8px; }
  /* Two-column hero grids declared inline on the loyalty page */
  .wrapper.loyalty{ grid-template-columns:1fr !important; }
  .hero-image.half{ max-width:320px; }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  
}


@media (max-width: 720px){
  .header-inner{ min-height:56px; gap:12px; }
  .nav, .navigation{ gap:14px; }
  .nav a, .navigation a{ font-size:11px; letter-spacing:.08em; }

  /* Some pages hard-code repeat(3, 1fr) inline, which overflows here. */
  /*.stat-grid[style]{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important; } */

  .stat-grid {
    grid-template-columns: 1fr;
  }


  .compact-grid {
    grid-template-columns: 1fr;
  }

  .case-meta {
        grid-template-columns: 1fr;
    }

  .metrics{ gap:16px 0; }
  .metric{ flex:1 1 100%; padding-right:0; }
  .metric + .metric{ border-left:none; padding-left:0; border-top:1px solid var(--hair); padding-top:14px; }

  .impact-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"value arrow" "copy copy";
    gap:10px 16px;
  }
  .impact-value{ grid-area:value; }
  .impact-copy{ grid-area:copy; }
  .impact-arrow{ grid-area:arrow; }
  .impact-row:hover{ padding-left:10px; }

  .timeline-item{ grid-template-columns:40px 1fr; gap:16px; }
  .timeline-avatar{ width:34px; height:34px; font-size:11px; }
  .timeline-rail::before{ top:44px; }
  .timeline-header{ flex-direction:column; gap:6px; }
  .timeline-meta{ text-align:left; flex-direction:row; flex-wrap:wrap; } /*gap:14px;*/

  .app-media{ gap:12px; }
  /*.app-media img:nth-child(2){ transform:translateY(14px); }*/

  .about-quote{ padding-left:20px; }
  .decision-callout, .hypothesis{ padding:22px 20px; }
  .footer-line{ flex-direction:column; gap:6px; }
}

@media (max-width: 460px){
  .stat-grid,
  .stat-grid[style]{ grid-template-columns:1fr !important; max-width:none !important; }
  .logo-row{ gap:22px; }
  .logo-row img{ height:20px; }
  .button{ width:100%; justify-content:center; }
  .compact-card{ padding:26px 22px 52px; }
  .compact-arrow{ left:22px; }

}

@media (max-width: 480px) {
    .case-meta {
        grid-template-columns: 1fr;
    }
}


/* ---------- 20. Motion + print ---------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media print{
  .site-header, .skip{ display:none; }
  body{ background:#fff; color:#000; }
  .section, .case-row, .hero{ border-color:#ddd; page-break-inside:avoid; }
  a{ text-decoration:underline; }
}

/* ---------- 21. PUMA portfolio --------------------------- */
.puma-theme{ --red:#c40022; --red-dim:#850017; --red-wash:rgba(196,0,34,.08); }
.puma-theme .site-header::after,
.puma-theme .case-hero::before,
.puma-theme .eyebrow-case::before,
.puma-theme .case-kicker::before{ background:var(--red); }

.puma-home-hero{ background:var(--paper); overflow:hidden; }
.puma-home-grid{ display:grid; grid-template-columns:minmax(0,.84fr) minmax(400px,1.16fr); gap:clamp(36px,7vw,88px); align-items:center; }
.puma-home-copy h1{ font-family:var(--display); font-size:clamp(42px,6.5vw,76px); line-height:.98; letter-spacing:-.055em; max-width:12ch; margin-bottom:26px; }
.puma-home-copy .case-intro{ max-width:56ch; }
.puma-hero-visual{ position:relative; min-height:520px; overflow:hidden; border-radius:var(--radius); background:#111; }
.puma-hero-visual .campus{ width:100%; height:100%; min-height:520px; object-fit:cover; filter:saturate(.82) contrast(1.06) brightness(.73); }
.puma-hero-visual .screen{ position:absolute; right:clamp(20px,4vw,56px); bottom:-56px; width:min(38%,235px); border-radius:24px; box-shadow:0 28px 70px rgba(0,0,0,.44); }
.puma-hero-label{ position:absolute; left:18px; bottom:18px; background:#000; color:#fff; border-left:4px solid var(--red); padding:14px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }

.puma-feature-card{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(280px,.58fr); gap:clamp(32px,6vw,78px); align-items:center; min-height:540px; padding:clamp(34px,6vw,72px); background:#0b0b0c; color:#fff; text-decoration:none; overflow:hidden; border-radius:var(--radius); }
.puma-feature-card h3{ color:#fff; font-family:var(--display); font-size:clamp(32px,4.6vw,54px); line-height:1.02; letter-spacing:-.045em; margin-bottom:18px; }
.puma-feature-card p{ color:#c9c9c7; }
.puma-feature-card .case-link,.puma-feature-card .metric strong{ color:#fff; }
.puma-feature-card .metric span{ color:#aaa; }
.puma-feature-phone{ max-width:290px; margin:0 auto; }
.puma-feature-phone img{ border-radius:25px; box-shadow:0 24px 68px rgba(0,0,0,.55); }

.puma-summary{ max-width:76ch; font-size:clamp(18px,2.2vw,23px); line-height:1.55; color:var(--ink-muted); }
.puma-web-frame{ border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.puma-web-frame img{ width:100%; }

.puma-stage-track{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:clamp(28px,4vw,44px); border:1px solid var(--hair); background:var(--hair); }
.puma-stage-track span{ position:relative; background:var(--ink); padding:18px 12px 18px 24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
.puma-stage-track span::before{ content:""; position:absolute; left:10px; top:50%; width:6px; height:6px; transform:translateY(-50%); background:var(--red); }

.puma-improvement-stack{ display:flex; flex-direction:column; gap:clamp(54px,8vw,96px); margin-top:clamp(30px,5vw,56px); }
.puma-improvement{ display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:clamp(28px,5vw,70px); align-items:start; padding-top:36px; border-top:1px solid var(--hair); }
.puma-improvement h3{ font-family:var(--display); font-size:clamp(26px,3.2vw,38px); line-height:1.05; letter-spacing:-.03em; margin-bottom:14px; }
.puma-improvement h4{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-top:22px; }
.puma-improvement p{ color:var(--ink-muted); }
.puma-metrics{ display:flex; flex-wrap:wrap; gap:18px 28px; margin-top:24px; }
.puma-metric strong{ display:block; font-size:clamp(28px,3vw,40px); line-height:1; }
.puma-metric span{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.puma-evidence{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.puma-evidence.single{ grid-template-columns:1fr; justify-items:center; }
.puma-evidence.single figure{ width:min(100%,460px); }
.puma-evidence figure{ margin:0; }
.puma-evidence figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.puma-evidence img{ width:100%; max-height:680px; object-fit:contain; border:1px solid var(--hair); border-radius:var(--radius); background:#fff; }

.puma-account-grid{ display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:clamp(32px,6vw,76px); align-items:start; }
.puma-account-compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.puma-account-compare figure{ margin:0; }
.puma-account-compare figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.puma-account-compare img{ width:100%; border:1px solid var(--hair); border-radius:var(--radius); }
.puma-csat{ margin-top:28px; border-left:3px solid var(--red); padding-left:20px; }
.puma-csat strong{ display:block; font-size:clamp(38px,5vw,58px); line-height:1; }
.puma-csat span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.puma-next{ display:flex; justify-content:space-between; gap:24px; align-items:center; padding:28px 0; border-top:1px solid var(--hair); }
.puma-next small{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.puma-next a{ font-size:clamp(18px,2.2vw,26px); font-weight:600; text-decoration:none; }

@media (max-width:920px){
  .puma-home-grid,.puma-feature-card,.puma-improvement,.puma-account-grid{ grid-template-columns:1fr; }
  .puma-feature-card{ min-height:0; }
  .puma-feature-phone{ margin:0; }
}
@media (max-width:680px){
  .puma-home-grid{ grid-template-columns:1fr; }
  .puma-home-copy h1{ font-size:clamp(38px,12vw,58px); }
  .puma-hero-visual,.puma-hero-visual .campus{ min-height:420px; }
  .puma-hero-visual .screen{ width:44%; }
  .puma-feature-card{ padding:28px 22px 44px; }
  .puma-stage-track{ grid-template-columns:1fr; }
  .puma-evidence,.puma-account-compare{ gap:10px; }
  .puma-next{ align-items:flex-start; flex-direction:column; }
}