/* ===========================================================
   SB.agency - Design tokens
   Palette : papier / encre + un seul accent bleu
   Type    : Instrument Serif (display) + General Sans (texte) + IBM Plex Mono (labels)
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=Caveat:wght@500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');

:root{
  --paper: #FAFAF8;
  --paper-dim: #F1EFEA;
  --ink: #121212;
  --ink-soft: #4A4A47;
  --muted: #8C8B85;
  --line: #E4E2DC;
  --accent: #3A00E7;
  --accent-deep: #2C00AD;

  --serif: 'Instrument Serif', serif;
  --sans: 'General Sans', 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --cursor-square: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%233A00E7'/><rect x='6' y='6' width='4' height='4' fill='white'/></svg>") 8 8, auto;

  --max: 1240px;
  --gutter: clamp(24px, 5vw, 72px);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; cursor: var(--cursor-square); }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- layout helpers ---------- */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow .dot{ width: 8px; height: 8px; }

h1,h2,h3{ font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

/* ---------- nav ---------- */
.site-nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,248,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; }
.dot-accent{ color: var(--accent); font-style: normal; }
.nav-links{ display:flex; gap: 36px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.nav-links a{ position:relative; padding-bottom: 4px; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform: scaleX(1); }
.nav-toggle{ display:none; background:none; border:none; cursor: var(--cursor-square); }

@media (max-width: 760px){
  .nav-links{
    position: fixed;
    top: 76px; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: calc(100vh - 76px);
    margin: 0;
    background-color: var(--paper);
    z-index: 100;
    flex-direction: column;
    padding: 40px var(--gutter);
    gap: 28px;
    font-size: 15px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    overflow-y: auto;
  }
  .nav-links.open{ opacity:1; transform: translateY(0); pointer-events:auto; }
  .nav-toggle{ display:block; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size: 13px; letter-spacing:.04em; text-transform: uppercase;
  padding: 14px 26px; border-radius: 999px; border: 1px solid var(--ink); cursor: var(--cursor-square);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  background: transparent; color: var(--ink);
}
.btn:hover{ background: var(--ink); color: var(--paper); }
.btn.primary{ background: var(--ink); color: var(--paper); }
.btn.primary:hover{ background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn.ghost{ border-color: var(--line); }
.btn.ghost:hover{ background: var(--ink); border-color: var(--ink); }

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  margin-top: 140px;
}
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; flex-wrap: wrap; }
.footer-cols{ display:flex; gap: 80px; flex-wrap: wrap; }
.footer-col h4{ font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing:.1em; color: var(--muted); margin-bottom: 14px; }
.footer-col a, .footer-col span{ display:block; font-size: 14px; margin-bottom: 8px; color: var(--ink-soft); }
.footer-col a:hover{ color: var(--accent); }
.footer-note{ font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ---------- section divider (signature) ---------- */
.divider{
  display:flex; align-items:center; gap: 18px;
  margin: 8px 0 40px;
  color: var(--muted); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing:.1em;
}
.divider::after{ content:""; flex:1; height:1px; background: var(--line); }
.divider .dot{ width: 8px; height: 8px; }

/* ---------- page header ---------- */
.page-header{ padding: 64px 0 40px; }
.page-header h1{ font-size: clamp(40px, 6vw, 68px); font-style: italic; }
.page-header p{ max-width: 46ch; color: var(--ink-soft); margin-top: 18px; font-size: 17px; }

/* ---------- placeholder media block ---------- */
.media-ph{
  position: relative; overflow:hidden; border-radius: 4px;
  background: linear-gradient(135deg, var(--paper-dim) 0%, #E9E4DC 60%, var(--paper-dim) 100%);
  aspect-ratio: 4/5;
}
.media-ph::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 2px, transparent 2px 14px);
}
.media-ph .ph-label{
  position:absolute; left:16px; bottom:16px; font-family: var(--mono); font-size: 11px;
  color: var(--muted); text-transform: uppercase; letter-spacing:.08em;
}

/* ---------- real project photo + brand badge ---------- */
.media-photo{
  position: relative; overflow: hidden; border-radius: 4px;
  aspect-ratio: 4/5; background: var(--paper-dim);
}
.media-photo.ratio-43{ aspect-ratio: 4/3; }
.media-photo img.main{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease;
}
.project-card:hover .media-photo img.main{ transform: scale(1.04); }
.media-photo .brand-badge{
  position: absolute; left: 14px; bottom: 14px; width: 64px; height: auto;
  border-radius: 3px; box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
}

/* ---------- reveal ---------- */
[data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- animations au scroll (complément) ---------- */

/* fondu + échelle : dépôt en douceur, pour photos/vidéos */
[data-anim="scale"]{ opacity:0; transform:scale(.96); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
[data-anim="scale"].is-visible{ opacity:1; transform:scale(1); }

/* rideau : révélation gauche → droite, pour un élément fort (citation, titre) */
[data-anim="clip"]{ clip-path:inset(0 100% 0 0); transition:clip-path 1s cubic-bezier(.65,0,.15,1); }
[data-anim="clip"].is-visible{ clip-path:inset(0 0 0 0); }

/* point + trait qui se dessinent : eyebrows et dividers */
.eyebrow[data-anim] .dot, .divider[data-anim] .dot{
  transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.eyebrow[data-anim].is-visible .dot, .divider[data-anim].is-visible .dot{ transform:scale(1); }
.divider[data-anim]::after{
  transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.65,0,.15,1);
}
.divider[data-anim].is-visible::after{ transform:scaleX(1); }

/* grille échelonnée : les enfants directs apparaissent l'un après l'autre */
[data-anim="stagger"] > *{
  opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
}
[data-anim="stagger"].is-visible > *{ opacity:1; transform:translateY(0); }
[data-anim="stagger"].is-visible > *:nth-child(1){ transition-delay:.05s; }
[data-anim="stagger"].is-visible > *:nth-child(2){ transition-delay:.15s; }
[data-anim="stagger"].is-visible > *:nth-child(3){ transition-delay:.25s; }

/* ---------- hero ---------- */
.hero{ padding: 72px 0 96px; }
.hero-grid{ display:grid; grid-template-columns: 1.3fr .7fr; gap: 56px; align-items:center; }
.hero h1{
  font-size: clamp(48px, 8vw, 96px);
  font-style: italic;
  line-height: 1.02;
  max-width: 15ch;
  margin: 22px 0 28px;
}
.hero .lede{ max-width: 46ch; color: var(--ink-soft); font-size: 18px; margin-bottom: 40px; }
.hero .actions{ display:flex; gap: 16px; flex-wrap: wrap; }

.hero-visual{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 125%; /* ratio 4/5, indépendant de aspect-ratio */
}
.hero-mosaic{
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  background: var(--ink);
}
.hero-mosaic .tile{ position: relative; display:block; overflow:hidden; }
.hero-mosaic .tile-a{ grid-column: 1/3; grid-row: 1/2; }
.hero-mosaic .tile-b{ grid-column: 1/2; grid-row: 2/3; }
.hero-mosaic .tile-c{ grid-column: 2/3; grid-row: 2/3; }

.hero-mosaic .tile::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.45) 100%);
}
.hero-mosaic .layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity .9s ease, transform .9s ease;
}
.hero-mosaic .layer.active{ opacity:1; }
.hero-mosaic .tile:hover .layer.active{ transform: scale(1.04); }

.hero-mosaic .tile-label{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-family: var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:#fff;
}
.hero-mosaic .tile-hint{
  position:absolute; right:12px; top:12px; z-index:2;
  font-family: var(--mono); font-size:13px; color:#fff;
  opacity:0; transition: opacity .25s ease;
}
.hero-mosaic .tile:hover .tile-hint{ opacity:.9; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; }
  .hero-visual{ order: -1; max-width: 320px; margin: 0 auto; }
}

/* ---------- grids ---------- */
.grid{ display:grid; gap: 28px; }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){
  .grid.cols-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .grid.cols-3, .grid.cols-2{ grid-template-columns: 1fr; }
}

/* ---------- project card ---------- */
.project-card figcaption{ margin-top: 14px; display:flex; justify-content:space-between; align-items:baseline; gap: 12px; }
.project-card h3{ font-size: 20px; font-style: italic; }
.project-card .cat{ font-family: var(--mono); font-size: 11px; color: var(--accent-deep); text-transform: uppercase; letter-spacing:.08em; white-space:nowrap; }
.project-card{ transition: transform .4s ease; }
.project-card-link{ display:block; color: inherit; text-decoration: none; }
.project-card:hover{ transform: translateY(-4px); }
.project-card:hover .media-ph{ box-shadow: 0 18px 40px -18px rgba(0,0,0,.25); }

/* ---------- filters ---------- */
.filters{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.filter-btn{
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing:.06em;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: var(--cursor-square);
  color: var(--ink-soft); transition: all .25s ease;
}
.filter-btn.active, .filter-btn:hover{ border-color: var(--ink); color: var(--ink); }

/* ---------- sections ---------- */
.section{ padding: 96px 0; }
.section.tight{ padding: 56px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.section-head h2{ font-size: clamp(30px, 4vw, 44px); font-style: italic; }
.section-head .link{ font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing:.06em; }
.section-head .link:hover{ color: var(--accent); }
.section.alt{ background: var(--paper-dim); }

/* ---------- about teaser ---------- */
.about-teaser{ display:grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items:center; }
.about-teaser p{ color: var(--ink-soft); font-size: 17px; margin-bottom: 16px; }
@media (max-width: 800px){ .about-teaser{ grid-template-columns: 1fr; } }

/* ---------- product card (boutique) ---------- */
.product-card{
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  display:flex; flex-direction:column; background: var(--paper);
  transition: border-color .25s ease, transform .3s ease;
}
.product-card:hover{ border-color: var(--accent); transform: translateY(-4px); }
.product-card .media-ph{ aspect-ratio: 4/3; border-radius: 0; }
.product-body{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap: 10px; flex:1; }
.product-body .cat{ font-family: var(--mono); font-size: 11px; color: var(--accent-deep); text-transform: uppercase; letter-spacing:.08em; }
.product-body h3{ font-size: 21px; font-style: italic; }
.product-body p{ color: var(--ink-soft); font-size: 14px; line-height: 1.55; flex:1; }
.product-foot{ display:flex; justify-content:space-between; align-items:center; margin-top: 8px; }
.price{ font-family: var(--mono); font-size: 15px; color: var(--accent-deep); }
.product-foot .btn{ padding: 10px 18px; font-size: 12px; }

/* ---------- service row (boutique - prestations) ---------- */
.service-row{
  display:grid; grid-template-columns: 60px 1fr auto; gap: 24px; align-items:center;
  padding: 28px 0; border-bottom: 1px solid var(--line);
}
.service-row .num{ font-family: var(--mono); font-size: 13px; color: var(--accent-deep); }
.service-row h3{ font-size: 24px; font-style: italic; margin-bottom: 6px; }
.service-row p{ color: var(--ink-soft); font-size: 14px; max-width: 52ch; }
.service-row .from{ font-family: var(--mono); font-size: 13px; color: var(--muted); text-align:right; white-space:nowrap; }
@media (max-width: 700px){
  .service-row{ grid-template-columns: 1fr; gap: 10px; }
  .service-row .from{ text-align:left; }
}

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 72px; }
@media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; gap: 48px; } }
.field{ margin-bottom: 22px; }
.field label{ display:block; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing:.06em; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea, .field select{
  width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent;
  padding: 10px 0; font-family: var(--sans); font-size: 16px; color: var(--ink);
  transition: border-color .25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--accent); }
.field textarea{ resize: vertical; min-height: 110px; }
.contact-info h4{ font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing:.1em; color: var(--muted); margin: 28px 0 10px; }
.contact-info h4:first-child{ margin-top: 0; }
.contact-info p, .contact-info a{ font-size: 16px; margin-bottom: 6px; display:block; }
.contact-info a:hover{ color: var(--accent); }

.dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); display: inline-block; flex-shrink: 0;
}

/* ---------- case study (project detail page) ---------- */
.case-hero{ padding: 56px 0 44px; }
.case-hero .back-link{
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing:.08em;
  color: var(--muted); display:inline-flex; align-items:center; gap: 8px; margin-bottom: 28px;
}
.case-hero .back-link:hover{ color: var(--ink); }
.case-hero h1{ font-size: clamp(52px, 9vw, 104px); font-style: italic; line-height: 1; }
.case-hero .tagline{ font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-soft); margin-top: 10px; }
.case-hero .lede{ max-width: 62ch; color: var(--ink-soft); font-size: 17px; margin-top: 24px; }
.case-meta{
  display:flex; gap: 56px; flex-wrap: wrap; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line);
}
.case-meta h4{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing:.1em; color: var(--muted); margin-bottom: 8px; }
.case-meta p{ font-size: 15px; max-width: 26ch; }

.case-figure img{ width:100%; border-radius: 4px; display:block; }
.case-caption{
  font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 12px;
  text-transform: uppercase; letter-spacing:.06em;
}
.case-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 800px){ .case-grid-2{ grid-template-columns: 1fr; } }
.case-grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media (max-width: 800px){ .case-grid-3{ grid-template-columns: 1fr; } }
.case-section + .case-section{ margin-top: 0; }

/* ---------- quote ---------- */
.quote-section{ padding: 24px 0 88px; }
.quote-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap: 32px; flex-wrap: wrap;
}
.quote-section blockquote{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 4.2vw, 52px); line-height: 1.25;
  max-width: 20ch; color: var(--ink);
}
.quote-section cite{
  display: block; margin-top: 28px; font-style: normal;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.quote-annotation{
  display:flex; align-items:flex-start; gap: 4px;
  max-width: 300px; padding-top: 8px;
}
.annotation-arrow{ flex: none; margin-top: 34px; color: var(--ink); }
.annotation-text{
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.3;
  color: var(--ink);
  transform: rotate(-1.4deg);
}
@media (max-width: 760px){
  .quote-wrap{ flex-direction: column; align-items: flex-start; gap: 24px; }
  .quote-annotation{ padding-left: 4px; }
}

/* ---------- about page ---------- */
.about-hero{
  padding: 56px 0 8px; display:flex; justify-content:space-between; align-items:flex-start;
  gap: 24px; flex-wrap: wrap;
}
.about-hero h1{ font-size: clamp(48px, 7vw, 80px); font-style: italic; }
.about-hero .signature{
  font-family: var(--serif); font-style: italic; font-size: clamp(30px, 4vw, 46px); color: var(--ink-soft);
}
.about-bio{
  max-width: 76ch; font-size: 18px; color: var(--ink-soft); line-height: 1.65; margin-top: 28px;
}
.about-bio strong{ color: var(--ink); font-weight: 600; }

.skills-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 760px){ .skills-grid{ grid-template-columns: 1fr; gap: 40px; } }
.skills-col h3{ font-style: italic; font-size: 24px; margin-bottom: 22px; }
.skills-col li{
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; display:flex; flex-wrap:wrap; gap: 6px;
}
.skills-col li strong{ font-weight: 600; }
.skills-col li span.detail{ color: var(--muted); }

.meta-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
@media (max-width: 760px){ .meta-cols{ grid-template-columns: 1fr; gap: 36px; } }
.meta-cols h3{ font-style: italic; font-size: 20px; margin-bottom: 18px; }
.meta-cols li{ font-size: 14px; padding: 6px 0; color: var(--ink-soft); }

.tool-pills{ display:flex; flex-wrap: wrap; gap: 10px; }
.tool-pill{
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft);
}

/* ---------- touches graphiques (page À propos) ---------- */

/* repère numéroté + trait, pour les intitulés de section */
.num-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; }
.num-head .num-head-n{ font-family: var(--mono); font-size:12px; color: var(--accent); flex-shrink:0; }
.num-head .num-head-rule{ height:1px; background: var(--line); flex:1; }
.num-head h3{ margin-bottom:0; }

/* petit motif de points */
.dotgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:30px; margin-top:10px; }
.dotgrid span{ width:3px; height:3px; border-radius:50%; background: var(--accent); opacity:.6; }
.dotgrid span:nth-child(3n+2){ opacity:1; }

/* séparateur en formes géométriques */
.shape-divider{ display:flex; align-items:center; gap:10px; margin-bottom:44px; }
.shape-divider .sq{ width:7px; height:7px; border:1.5px solid var(--ink); flex-shrink:0; }
.shape-divider .ci{ width:7px; height:7px; border-radius:50%; background: var(--accent); flex-shrink:0; }
.shape-divider .ln{ height:1px; background: var(--line); flex:1; }

/* cadre à coins accentués, pour une citation extraite */
.framed-quote{ position:relative; border:2px solid var(--ink); padding:34px 32px; margin:36px 0 8px; max-width: 62ch; }
.framed-quote::before{
  content:''; position:absolute; top:-2px; left:-2px; width:20px; height:20px;
  border-top:2px solid var(--accent); border-left:2px solid var(--accent);
}
.framed-quote::after{
  content:''; position:absolute; bottom:-2px; right:-2px; width:20px; height:20px;
  border-bottom:2px solid var(--accent); border-right:2px solid var(--accent);
}
.framed-quote blockquote{ font-family: var(--serif); font-style: italic; font-size: 22px; line-height:1.4; color: var(--ink); }
.framed-quote cite{
  display:block; margin-top:14px; font-style:normal; font-family: var(--mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted);
}

/* ---------- web preview grid (full-page screenshots) ---------- */
.case-grid-web{ display:grid; grid-template-columns: 0.9fr 2.1fr; gap: 28px; align-items: start; }
@media (max-width: 760px){ .case-grid-web{ grid-template-columns: 1fr; } }
.case-grid-web img{ width:100%; border-radius:4px; display:block; border:1px solid var(--line); }

/* ---------- legal pages ---------- */
.legal-content{ max-width: 76ch; }
.legal-content h2{
  font-size: 24px; font-style: italic; margin: 48px 0 16px;
}
.legal-content h2:first-child{ margin-top: 0; }
.legal-content p{ color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.legal-content ul{ margin: 0 0 14px 0; padding-left: 20px; }
.legal-content li{ color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin-bottom: 6px; list-style: disc; }
.legal-content strong{ color: var(--ink); font-weight: 600; }
.legal-content a{ color: var(--accent-deep); text-decoration: underline; }
.legal-updated{ font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 40px; }