:root {
  --penny:#7a3141;
  --penny-green:#52765a;
  --penny-pink:#e3cccc;
  --penny-pink-soft:#efe1e1;
  --penny-green-soft:#dce6d9;
}
.penny-case h1 em,.penny-case h2 em {color:var(--penny)}
.penny-case a:focus-visible {outline-color:var(--penny)}
.penny-case .case-hero {position:relative}
.penny-case .case-hero h1 {max-width:1000px}
.hero-brand {display:flex;align-items:center;justify-content:space-between;gap:30px}
.hero-brand img {width:105px;transform:rotate(5deg)}
.penny-hero-stage {position:relative;overflow:hidden;background:var(--penny-pink);padding:55px 7% 34px;display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;align-items:center}
.penny-hero-stage-copy p {font:clamp(31px,4vw,55px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-1.5px;margin:20px 0 26px}
.penny-hero-stage-copy span:last-child {font-size:11px;text-transform:uppercase;letter-spacing:1.3px}
.penny-hero-phones {height:560px;display:flex;align-items:center;justify-content:center;gap:7%}
.penny-hero-phones img {width:39%;max-height:520px;object-fit:contain;filter:drop-shadow(8px 18px 15px #643b4630)}
.penny-hero-phones img:first-child {transform:rotate(-6deg) translateY(18px)}
.penny-hero-phones img:last-child {transform:rotate(6deg) translateY(-15px)}
.penny-hero-stage figcaption {grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:1.2px}
.challenge-grid {display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:45px}
.challenge-grid figure {background:var(--penny-pink-soft);padding:22px}
.challenge-grid img {width:100%}
.challenge-grid figcaption {margin-top:16px;font-size:12px;line-height:1.55;text-transform:none;letter-spacing:0}
.penny-insight {background:var(--penny-pink-soft)}
.penny-insight em {color:var(--penny)}
.research-summary {display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:42px 0 55px}
.research-summary div {display:flex;align-items:baseline;gap:12px;padding:22px 18px;border-right:1px solid var(--line)}
.research-summary div:last-child {border-right:0}
.research-summary strong {font:italic 32px Georgia,serif;color:var(--penny);font-weight:400}
.research-summary span {font-size:11px;line-height:1.35;text-transform:uppercase;letter-spacing:.9px}
.research-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.research-card {border-top:2px solid var(--ink);padding-top:22px}
.research-card img {width:100%;aspect-ratio:1;object-fit:contain;background:#f1ede4;margin-bottom:22px}
.research-number {font:italic 20px Georgia,serif;color:var(--penny)}
.research-card h3 {font-size:29px;margin:16px 0 14px}
.research-card>p {font-size:14px}
.research-card .design-implication {border-top:1px solid var(--line);margin-top:18px;padding-top:16px;color:var(--penny-green)}
.research-card .design-implication strong {display:block;margin-bottom:6px;font-size:10px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink)}
.opportunity {display:grid;grid-template-columns:.65fr 1.35fr;gap:9%;align-items:start;margin-top:70px;padding:45px;background:var(--penny-green-soft)}
.opportunity blockquote {font-size:clamp(30px,3.8vw,52px);color:var(--penny-green);letter-spacing:-1px}
.methods-visual {margin-top:45px;padding:25px;background:#ebe7dd}
.methods-visual img {width:100%}
.journey-intro {max-width:760px;margin-top:90px}
.journey-pair {display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:40px}
.journey-pair figure {padding:18px;background:#ebe7dd}
.journey-pair figure:last-child {background:var(--penny-green-soft)}
.journey-pair figcaption {margin-bottom:14px;color:var(--penny-green)}
.journey-pair img {width:100%}
.pillar {display:grid;grid-template-columns:.7fr 1.3fr;gap:8%;align-items:center;padding:55px 0;border-top:1px solid var(--line)}
.pillar:first-of-type {margin-top:45px}
.pillar-number {font:italic 22px Georgia,serif;color:var(--penny)}
.pillar h3 {font-size:39px;letter-spacing:-1px;margin:18px 0 22px}
.pillar-copy p+p {margin-top:16px}
.design-goal {font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--penny-green);border-top:1px solid var(--line);padding-top:17px}
.compare-pair {display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare-pair figure {background:var(--penny-pink-soft);padding:16px;text-align:center}
.compare-pair figure:last-child {background:var(--penny-green-soft)}
.compare-pair img {width:100%;max-height:410px;object-fit:contain}
.compare-pair figcaption {margin-bottom:12px;color:var(--penny)}
.experience-intro {max-width:760px}
.penny-feature {display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;align-items:center;margin-top:80px}
.penny-feature.reverse {grid-template-columns:1.2fr .8fr}
.penny-feature.reverse .feature-copy {order:2}
.penny-feature h3 {font-size:43px;letter-spacing:-1px;margin:18px 0 25px}
.screen-pair {min-height:600px;background:var(--penny-pink-soft);display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;gap:18px;padding:38px 28px 25px}
.screen-pair.green {background:var(--penny-green-soft)}
.screen-pair img.feature-composite {width:min(100%,560px);max-height:525px;object-fit:contain;filter:none;transform:none}
.screen-pair figcaption {grid-column:1/-1;align-self:end;justify-self:start;margin:0;font-size:10px}
.testing-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.testing-card {display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:22px}
.testing-card h3 {font-size:28px;margin:15px 0}
.testing-card>p {font-size:14px}
.testing-card img {width:100%;margin:24px 0;background:var(--penny-pink-soft)}
.testing-card blockquote {font:italic 19px/1.45 Georgia,serif;color:var(--penny);margin-top:auto}
.testing-card cite {display:block;margin-top:12px;font:10px Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--ink)}
.penny-reflection .reflection-copy strong {color:var(--penny);font-weight:400}
.penny-case .case-footer a {text-decoration:underline}
@media(max-width:1000px){
  .penny-hero-stage{grid-template-columns:.7fr 1.3fr;padding:45px 5% 30px}
  .penny-hero-phones{height:470px}
  .opportunity{grid-template-columns:1fr;gap:25px}
  .pillar,.penny-feature,.penny-feature.reverse{gap:5%}
  .screen-pair{min-height:520px}
}
@media(max-width:650px){
  .hero-brand img{width:72px}
  .penny-hero-stage{grid-template-columns:1fr;padding:34px 22px 24px}
  .penny-hero-stage-copy p{font-size:38px;margin:14px 0 18px}
  .penny-hero-phones{height:390px;margin-top:8px}
  .penny-hero-phones img{width:43%;max-height:365px}
  .challenge-grid,.research-summary,.research-grid,.journey-pair,.testing-grid,.pillar,.penny-feature,.penny-feature.reverse{grid-template-columns:1fr}
  .challenge-grid{gap:16px}
  .research-grid{gap:45px}
  .research-summary div{border-right:0;border-bottom:1px solid var(--line)}
  .research-summary div:last-child{border-bottom:0}
  .opportunity{margin-top:50px;padding:32px 24px}
  .methods-visual{padding:10px;overflow-x:auto}
  .methods-visual img{min-width:760px}
  .journey-intro{margin-top:60px}
  .pillar{gap:28px;padding:45px 0}
  .compare-pair{gap:10px}
  .compare-pair figure{padding:9px}
  .compare-pair img{max-height:300px}
  .penny-feature,.penny-feature.reverse{margin-top:55px;gap:28px}
  .penny-feature.reverse .feature-copy{order:0}
  .penny-feature h3{font-size:37px}
  .screen-pair{min-height:430px;padding:25px 15px 20px}
  .screen-pair img.feature-composite{width:min(100%,390px);max-height:385px}
  .testing-grid{gap:55px}
}