/* ============================================================
   
   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;

  */

  /* Main accent */

  /* Company colors */
  --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;

  */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- 2. Reset + base ------------------------------- */
/*::selection{ background:var(--red); color:#fff; }*/

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 0.5em;
}

.skip {
  letter-spacing: 0.08em;
}

/* ---------- 3. Layout shells ------------------------------ */

/* .wrapper is a single-column hero shell by default; the loyalty page
   overrides it inline with a two-column grid. */

/* ---------- 4. Header + scroll meter (signature) ---------- */

/* Red-to-gold reading meter riding the header's bottom hairline.
   Pure CSS scroll-linked animation; silently absent where unsupported. */
.logo span,
.logo-text {
  letter-spacing: 0.18em;
  /*color:var(--text);*/
}
.nav a,
.navigation a {
  letter-spacing: 0.12em;
  /*color:var(--ink-faint);*/
  transition: color 0.2s ease;
}
.nav a::after,
.navigation a::after {
  transition: transform 0.25s var(--ease);
}

/* ---------- 5. Shared editorial type ---------------------- */
.eyebrow,
.eyebrow-case,
.case-kicker {
  letter-spacing: 0.16em;
}

.section-heading,
.hero-title,
.contact-heading,
.case-title {
  /* text-transform:uppercase; */
  letter-spacing: 0.01em;
}
.case-title {
  line-height: 0.99;
}

.subsection-title {
  letter-spacing: 0.1em;
  margin: 2.6rem 0 0.9rem;
  /* border-top:1px solid var(--hair); */
} /* .ssubsection-title */

/* ---------- 6. Home — hero -------------------------------- */

.hero-name {
  letter-spacing: 0.22em;
}
.hero-disciplines {
  letter-spacing: 0.1em;
}
.hero h1 {
  letter-spacing: 0.005em;
}
.button {
  letter-spacing: 0.1em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease);
}

.portrait {
  /*border-radius: 20%;*/
  /*filter:grayscale(1) contrast(1.05);*/
  transition: filter 0.5s ease;
}

/* Client logo band */
.experience-label {
  letter-spacing: 0.14em;
}
.logo-row img {
  /* Brand marks ship as dark-on-transparent; normalize to solid ink. */
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

/* ---------- 7. Home — selected work ----------------------- */

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

.case-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.metric strong {
  letter-spacing: 0.01em;
}
.metric span {
  letter-spacing: 0.06em;
}

.case-link {
  letter-spacing: 0.1em;
  transition: color 0.2s ease, gap 0.2s var(--ease);
}

/* Case media treatments */
.app-media img {
  box-shadow: 0 30px 70px -34px rgba(20, 18, 16, 0.28);
  /*background:#000;*/
}
.company-visual .visual-background {
  filter: grayscale(0.6) brightness(0.7);
}
.company-visual .visual-product {
  box-shadow: 0 24px 60px -24px rgba(20, 18, 16, 0.32);
}

/* ---------- 8. Home — more work / impact / career --------- */
.more-work .section-heading {
  margin-bottom: clamp(32px, 5vw, 52px);
}
.compact-card {
  transition: background 0.25s ease;
}
.compact-label {
  letter-spacing: 0.14em;
}
.compact-arrow {
  transition: transform 0.25s var(--ease);
}
.impact .section-heading {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.impact-row {
  grid-template-columns: minmax(120px, 180px) 1fr auto;
  gap: clamp(16px, 4vw, 40px);
  transition: background 0.25s ease, padding-left 0.25s var(--ease);
}
.impact-arrow {
  transition: transform 0.25s var(--ease), color 0.25s ease;
}
.career .section-heading {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.career-item {
  transition: background 0.25s ease;
}
.career-item strong {
  letter-spacing: 0.04em;
}

/* ---------- 9. Contact + footers -------------------------- */
.contact-heading {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.contact-card {
  transition: background 0.25s ease;
}
.contact-card small {
  letter-spacing: 0.14em;
}
.footer-line {
  letter-spacing: 0.08em;
}

/* Case-study page footer */
.footer p {
  letter-spacing: 0.1em;
}

/* ---------- 10. Case study — hero ------------------------- */
.work-subheader span,
.case-tags span {
  letter-spacing: 0.1em;
}

/*
.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 */
.meta-card span {
  letter-spacing: 0.14em;
}

/* TL;DR */
.did-not-read {
  letter-spacing: 0.2em;
  /* padding-left:14px;
  border-left:2px solid var(--red); */
}
.tldr-row {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
}

/* Hero image sets */
/* 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 figcaption {
  letter-spacing: 0.06em;
}

/* ---------- 11. Case study — sections + lists ------------- */
/*.case-section{ background:var(--paper); }*/
.accent-list li::before {
  top: 0.62em;
}
ul.normal li::before {
  top: 0.62em;
}

/* Generic un-classed lists inside case copy */

/* ---------- 12. Case study — stat grid -------------------- */
.stat-card {
  transition: background 0.25s ease;
}
.stat-icon {
  letter-spacing: 0.1em;
}
.stat-number {
  /*font-size:clamp(30px, 4vw, 44px);*/
  letter-spacing: 0.01em;
}
.stat-label {
  letter-spacing: 0.06em;
}
/* Standalone caption paragraphs reusing .stat-label */

/* ---------- 13. Case study — card families ---------------- */

.strategy-card,
.operating-card,
.evidence-card,
.principle-card,
.roadmap-card,
.scope-card,
.metric-card,
.decision-item,
.ownership-card {
  /*border-top:2px solid var(--red);*/
  transition: border-color 0.25s ease, transform 0.25s var(--ease);
}

.strategy-number,
.principle-card > span,
.roadmap-card > span,
.scope-card > span,
.metric-card > span,
.evidence-card > span,
.metric-context,
.decision-index,
.ownership-card > span {
  letter-spacing: 0.14em;
}
.metric-context {
  letter-spacing: 0.08em;
}
.scope-card li::before {
  top: 0.6em;
}

/* ---------- 14. Case study — callouts --------------------- */
.decision-callout h3 {
  letter-spacing: 0.16em;
}

.formula {
  margin: clamp(20px, 3vw, 32px) 0;
}
.about-quote p {
  letter-spacing: 0.01em;
}

/* ---------- 15. Case study — journey + compare ------------ */
.journey-step strong {
  letter-spacing: 0.08em;
}
/* Nested duplicate .compare-slot in the markup — flatten the inner one. */

.compare-caption {
  letter-spacing: 0.06em;
}
.compare-placeholder {
  background: repeating-linear-gradient(
    45deg,
    transparent 0 10px,
    rgba(0, 0, 0, 0.035) 10px 20px
  );
}
.compare-placeholder svg {
  opacity: 0.7;
}
.compare-placeholder span {
  letter-spacing: 0.08em;
}

/* ---------- 16. Case study — visuals ---------------------- */

/* ---------- 17. About page -------------------------------- */
.timeline-item {
  padding: clamp(26px, 3.5vw, 38px) 0;
  /*border-top:1px solid var(--hair);*/
}
/*.timeline-item:last-child{ border-bottom:1px solid var(--hair); }*/
.timeline-avatar {
  letter-spacing: 0.06em;
}
.timeline-header h3 {
  letter-spacing: 0.03em;
}
.timeline-meta {
  letter-spacing: 0.06em;
}
.timeline-achievements li::before {
  top: 0.65em;
}
.timeline-tags span {
  letter-spacing: 0.08em;
}
.skills-row h3 {
  letter-spacing: 0.03em;
}

/* ---------- 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. */

/* 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. */

/* Anchor targets clear the sticky header */

/* ---------- 19. Responsive -------------------------------- */

@media (max-width: 720px) {
  .nav a,
  .navigation a {
    letter-spacing: 0.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; } */ /*gap:14px;*/
  /*.app-media img:nth-child(2){ transform:translateY(14px); }*/
}

/* ---------- 20. Motion + print ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 21. Mytheresa portfolio ---------------------- */
.myt-theme {
  --red: #8b6f00;
  --red-dim: #5d4a00;
  --red-wash: rgba(223, 200, 61, 0.14);
}
.myt-theme .site-header::after {
  background: var(--myt);
}
.myt-theme .case-hero::before {
  background: var(--myt);
}
.myt-theme .eyebrow-case::before {
  background: var(--myt);
}
.myt-theme .case-kicker::before {
  background: var(--myt);
}
.myt-theme .stat-icon,
.myt-theme .strategy-number,
.myt-theme .principle-card > span,
.myt-theme .evidence-card > span,
.myt-theme .case-link:hover {
  color: var(--red);
}

.myt-home-hero {
  background: var(--paper);
  overflow: hidden;
}
.myt-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(36px, 7vw, 88px);
  align-items: center;
}
.myt-home-copy h1 {
  font-family: var(--display);
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  max-width: 12ch;
  margin-bottom: 26px;
}
.myt-home-copy .case-intro {
  max-width: 56ch;
}
.myt-hero-photo {
  position: relative;
}
.myt-hero-photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(0.82) contrast(1.04);
}
.myt-hero-label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: #000;
  color: #fff;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.myt-case-list {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.myt-case-card {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  min-height: 500px;
  padding: clamp(32px, 5vw, 64px);
  background: var(--ink);
  text-decoration: none;
}
.myt-case-card:nth-child(2) {
  background: var(--paper);
}
.myt-case-card h3 {
  font-family: var(--display);
  font-size: clamp(30px, 4.3vw, 50px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}
.myt-case-card p {
  color: var(--ink-muted);
}
.myt-card-index {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.myt-card-media {
  min-width: 0;
}
.myt-card-media.web img {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}
.myt-phone-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 500px;
  margin-left: auto;
}
.myt-phone-pair img,
.device-gallery img {
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(25, 26, 25, 0.12);
}
.myt-phone-pair img:nth-child(2) {
  transform: translateY(30px);
}

.myt-summary {
  max-width: 76ch;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.55;
  color: var(--ink-muted);
}
.myt-visual-frame {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.myt-visual-frame img {
  width: 100%;
}
.device-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
  margin-top: clamp(28px, 5vw, 52px);
}
.device-gallery figure {
  margin: 0;
}
.device-gallery figure:nth-child(even) {
  margin-top: 34px;
}
.device-gallery figcaption {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.experiment-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(54px, 8vw, 96px);
  margin-top: clamp(30px, 5vw, 56px);
}
.experiment {
  display: grid;
  grid-template-columns: minmax(230px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
  padding-top: 36px;
  border-top: 1px solid var(--hair);
}
.experiment-copy h3 {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.experiment-copy .hypothesis-copy {
  color: var(--ink-muted);
}
.experiment-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 24px;
}
.experiment-metric strong {
  display: block;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
}
.experiment-metric span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.experiment-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.experiment-compare figure {
  margin: 0;
}
.experiment-compare figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.experiment-compare img {
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.next-case {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  /*border-top: 1px solid var(--hair);*/
}
.next-case small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.next-case a {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 900px) {
  .myt-home-grid,
  .myt-case-card,
  .experiment {
    grid-template-columns: 1fr;
  }
  .myt-case-card {
    min-height: 0;
  }
  .myt-phone-pair {
    margin: 0;
  }
  .device-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 620px) {
  .myt-home-grid {
    grid-template-columns: 1fr;
  }
  .myt-home-copy h1 {
    font-size: clamp(38px, 12vw, 58px);
  }
  .myt-case-card {
    padding: 28px 22px 44px;
  }
  .device-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .device-gallery figure:nth-child(even) {
    margin-top: 0;
  }
  .experiment-compare {
    gap: 10px;
  }
  .next-case {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- 22. SIXT portfolio --------------------------- */
.sixt-theme {
  --red: #c64d08;
  --red-dim: #893300;
  --red-wash: rgba(242, 107, 33, 0.1);
}
.sixt-theme .site-header::after,
.sixt-theme .case-hero::before,
.sixt-theme .eyebrow-case::before,
.sixt-theme .case-kicker::before {
  background: var(--sixt);
}
.sixt-theme .case-hero {
  background: #f3f1ed;
}
.sixt-theme .site-header {
  background: #080808;
}

.sixt-home-hero {
  background: #efefed;
  overflow: hidden;
}
.sixt-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(400px, 1.18fr);
  gap: clamp(36px, 7vw, 88px);
  align-items: center;
}
.sixt-home-copy h1 {
  font-family: var(--display);
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  max-width: 12ch;
  margin-bottom: 26px;
}
.sixt-home-copy .case-intro {
  max-width: 54ch;
}
.sixt-hero-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #111;
}
.sixt-hero-visual .garage {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.12) brightness(0.65);
}
.sixt-hero-visual .map {
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  bottom: -50px;
  width: min(42%, 270px);
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}
.sixt-hero-label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: var(--sixt);
  color: #111;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sixt-case-list {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.sixt-case-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(340px, 1.2fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  min-height: 510px;
  padding: clamp(32px, 5vw, 64px);
  background: var(--ink);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
}
.sixt-case-card:first-child {
  background: #0d0d0d;
  color: #fff;
}
.sixt-case-card:first-child h3,
.sixt-case-card:first-child strong {
  color: #fff;
}
.sixt-case-card:first-child p {
  color: #c5c5c2;
}
.sixt-case-card:nth-child(2) {
  background: #f3f1ed;
}
.sixt-case-card h3 {
  font-family: var(--display);
  font-size: clamp(30px, 4.3vw, 50px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}
.sixt-card-index {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sixt);
  margin-bottom: 18px;
}
.sixt-phone-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 480px;
  margin-left: auto;
}
.sixt-phone-pair img,
.sixt-device-gallery img {
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.sixt-web-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}
.sixt-web-pair img {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: #fff;
}

.sixt-dark-hero {
  background: #0a0a0a !important;
  color: #fff;
}
.sixt-dark-hero .case-title,
.sixt-dark-hero strong {
  color: #fff;
}
.sixt-dark-hero .myt-summary,
.sixt-dark-hero .case-intro {
  color: #d2d2cf;
}
.sixt-dark-hero .case-tags span,
.sixt-dark-hero .work-subheader span {
  border-color: #3a3a3a;
  background: #171717;
  color: #d9d9d5;
}
.sixt-dark-hero .case-meta {
  border-color: #343434;
}
.sixt-dark-hero .meta-card {
  background: #111;
}
.sixt-dark-hero .meta-card span {
  color: #aaa;
}
.sixt-dark-hero::before {
  background: var(--sixt);
}
.sixt-hero-devices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 30px);
  max-width: 820px;
  margin: clamp(34px, 5vw, 60px) auto 0;
  align-items: end;
}
.sixt-hero-devices img {
  border-radius: 28px;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.48);
}

.sixt-device-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.7vw, 20px);
  align-items: start;
  margin-top: clamp(28px, 5vw, 52px);
}
.sixt-device-gallery figure {
  margin: 0;
}
.sixt-device-gallery figure {
  margin-bottom: 30px;
}
.sixt-device-gallery figcaption {
  margin-bottom: 11px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sixt-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.sixt-tool-row span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--hair);
  padding: 7px 10px;
  background: var(--ink);
}
.sixt-experiment-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(54px, 8vw, 96px);
  margin-top: clamp(30px, 5vw, 56px);
}
.sixt-experiment {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
  padding-top: 36px;
  border-top: 1px solid var(--hair);
}
.sixt-experiment h3 {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.sixt-experiment h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 22px;
}
.sixt-experiment p {
  color: var(--ink-muted);
}
.sixt-exp-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 24px;
}
.sixt-exp-metric strong {
  display: block;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
}
.sixt-exp-metric span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sixt-exp-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.sixt-exp-compare figure {
  margin: 0;
}
.sixt-exp-compare figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.sixt-exp-compare img {
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: #fff;
}
.sixt-exp-compare.single {
  grid-template-columns: 1fr;
}

@media (max-width: 940px) {
  .sixt-home-grid,
  .sixt-case-card,
  .sixt-experiment {
    grid-template-columns: 1fr;
  }
  .sixt-case-card {
    min-height: 0;
  }
  .sixt-phone-pair {
    margin: 0;
  }
  .sixt-device-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 620px) {
  .sixt-home-grid {
    grid-template-columns: 1fr;
  }
  .sixt-home-copy h1 {
    font-size: clamp(38px, 12vw, 58px);
  }
  .sixt-hero-visual,
  .sixt-hero-visual .garage {
    min-height: 420px;
  }
  .sixt-hero-visual .map {
    width: 46%;
  }
  .sixt-case-card {
    padding: 28px 22px 44px;
  }
  .sixt-device-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .sixt-device-gallery figure:nth-child(even) {
    margin-top: 0;
  }
  .sixt-exp-compare {
    gap: 10px;
  }
}