/* ============================================================
   The AI Adoption — subpage components (Granola-space).
   Loads on top of home-granola.css. Same locked system:
   open column, big air, one idea per screen, cream breathers,
   square, navy trust, DM Sans, italic azure emphasis.
   ============================================================ */

/* ---------- subpage hero: a calm page header, not a 94svh screen ---------- */
.hero-sub{background:var(--white)}
.hero-sub > .wrap{padding-top:clamp(8rem,16vh,11rem);padding-bottom:clamp(2.8rem,5.6vw,4.8rem);
  display:grid;gap:clamp(1.2rem,2.4vw,1.8rem)}
.hero-sub .kicker{font-size:0.82rem;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--slate);margin:0}
.hero-sub h1{max-width:16ch}
.hero-sub .lede{max-width:50ch;margin:0}

/* ---------- section head with an optional intro line ---------- */
.head-lead{margin-bottom:clamp(2rem,4vw,3.2rem);display:grid;gap:1.15rem}
.head-lead h2{max-width:18ch}
.head-lead .intro{color:var(--muted);max-width:52ch;
  font-size:clamp(1.08rem,0.5vw + 0.92rem,1.28rem);line-height:1.5}

/* ---------- numbered steps: clean vertical list, hairline dividers ---------- */
.steps{display:grid}
.step{display:grid;gap:0.5rem 0;padding:clamp(1.8rem,4vw,2.9rem) 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
@media(min-width:52em){
  .step{grid-template-columns:auto minmax(0,1fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:baseline}
  .step .num{grid-row:span 2}
}
.step .num{font-size:0.95rem;font-weight:600;letter-spacing:0.04em;color:var(--azure);
  font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(1.2rem,0.7vw + 1rem,1.55rem)}
.step p{color:var(--muted);max-width:54ch;line-height:1.55;
  font-size:clamp(1rem,0.35vw + 0.9rem,1.1rem)}

/* ---------- numbered grid (2x2), hairline dividers like .gains ---------- */
.grid-num{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:44em){.grid-num{grid-template-columns:1fr 1fr}}
.grid-num > div{background:var(--white);padding:clamp(1.9rem,3.6vw,2.7rem);
  transition:background-color 0.3s var(--ease)}
.grid-num > div:hover{background:var(--sky-soft)}
.grid-num .num{display:block;font-size:0.95rem;font-weight:600;letter-spacing:0.04em;color:var(--azure);
  font-variant-numeric:tabular-nums;margin-bottom:0.9rem}
.grid-num h3{font-size:clamp(1.15rem,0.6vw + 0.95rem,1.4rem);margin-bottom:0.55rem}
.grid-num p{color:var(--muted);max-width:46ch;line-height:1.5;
  font-size:clamp(1rem,0.35vw + 0.9rem,1.1rem)}

/* ---------- commitments: numbered rows, generous, hairline dividers ---------- */
.commitments{display:grid}
.commit{display:grid;gap:0.6rem;padding:clamp(2rem,4.5vw,3.2rem) 0;border-top:1px solid var(--line)}
.commit:first-child{border-top:0;padding-top:0}
@media(min-width:56em){
  .commit{grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
}
.commit .num{font-size:0.95rem;font-weight:600;letter-spacing:0.04em;color:var(--azure);
  font-variant-numeric:tabular-nums;margin-bottom:0.5rem}
.commit h2{font-size:clamp(1.35rem,0.9vw + 1.05rem,1.9rem);letter-spacing:-0.015em;max-width:20ch}
.commit p{color:var(--muted);max-width:48ch;line-height:1.55;
  font-size:clamp(1.05rem,0.4vw + 0.9rem,1.18rem)}

/* ---------- progress register (method), simple card on cream ---------- */
.regcard{width:min(100%,40rem);margin:clamp(2.5rem,5vw,3.5rem) auto 0;background:var(--white);
  border:1px solid var(--line-strong);box-shadow:0 50px 100px -60px rgba(0,48,73,0.5)}
.regcard-head{padding:0.9rem 1.3rem;border-bottom:1px solid var(--line);
  font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate)}
.regline{display:flex;align-items:center;gap:1rem;padding:0.95rem 1.3rem;border-top:1px solid var(--line)}
.regline:first-of-type{border-top:0}
.regline .rl-name{font-size:0.98rem;font-weight:560;color:var(--navy)}
.regline .rl-chip{margin-left:auto;font-size:0.72rem;font-weight:600;letter-spacing:0.02em;
  color:var(--slate);background:rgba(0,48,73,0.06);padding:0.32em 0.7em}
.regline .rl-chip.live{color:var(--teal);background:rgba(0,95,115,0.1)}
.regline .rl-chip.prog{color:var(--azure);background:rgba(24,151,197,0.12)}
.regbar{height:2px;background:var(--line)}
.regbar i{display:block;height:100%;width:44%;background:var(--azure)}

/* ---------- about ---------- */
.about-grid{display:grid;gap:clamp(2.2rem,5vw,3.5rem)}
@media(min-width:52em){.about-grid{grid-template-columns:auto minmax(0,1fr);gap:clamp(2.8rem,6vw,5rem);align-items:start}}
/* portrait en 6 tranches diagonales (reproduction customesignature, CSS pur) :
   parallélogramme penché m=18%, tranche visage large au centre (s3),
   5 slivers délavés autour (la photo elle-même, éclaircie), gaps blancs,
   assemblage le long du slash au reveal .rv.in */
.about-photo{position:relative;aspect-ratio:4/3;width:clamp(14rem,32vw,19rem);overflow:visible}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.ph-slice{position:absolute;inset:0}
.ph-slice.washed img{filter:saturate(0.75) brightness(1.32) contrast(0.85) opacity(0.85)}
/* reproduction fidèle de la ref Robinhood : composition symétrique depuis le milieu,
   [fin][medium][CENTRE large][medium][medium][fin], mediums même épaisseur,
   extrêmes super fins — le pattern prime sur la position du visage */
/* hauteurs STAGGERÉES comme la ref : seul le centre est pleine hauteur,
   les autres démarrent plus bas / s'arrêtent avant, les fins sont courts et flottants */
.ph-slice.s1{clip-path:polygon(13.5% 25%,15.1% 25%,4.3% 85%,2.7% 85%)}
.ph-slice.s2{clip-path:polygon(19.9% 12%,29% 12%,14% 95%,5% 95%)}
.ph-slice.s3{clip-path:polygon(33.6% 0,65.2% 0,47.2% 100%,15.6% 100%)}
.ph-slice.s4{clip-path:polygon(66.2% 8%,75.2% 8%,60.4% 90%,51.4% 90%)}
.ph-slice.s5{clip-path:polygon(75.1% 22%,84.2% 22%,70.1% 100%,61.1% 100%)}
.ph-slice.s6{clip-path:polygon(85.2% 30%,86.8% 30%,78.7% 75%,77.1% 75%)}
/* entrée : le contenu glisse dans sa fenêtre le long du slash (vecteur 18:-100), en alterné, 20% plus lent.
   L'entrée vit sur l'IMG pour laisser le span libre de porter l'ondulation continue. */
html.js .about-photo.rv .ph-slice img{opacity:0}
/* assemblage depuis le MILIEU : le centre arrive d'abord, puis ça s'écarte vers les bords */
.about-photo.rv.in .ph-slice img{animation:phSlide 0.84s var(--ease) forwards}
.about-photo.rv.in .s4 img{animation-name:phSlideUp;animation-delay:0.1s}
.about-photo.rv.in .s2 img{animation-name:phSlideUp;animation-delay:0.17s}
.about-photo.rv.in .s5 img{animation-delay:0.25s}
.about-photo.rv.in .s1 img{animation-name:phSlideUp;animation-delay:0.34s}
.about-photo.rv.in .s6 img{animation-delay:0.46s}
@keyframes phSlide{from{opacity:0;transform:translate(-2.5%,14%)}to{opacity:1;transform:none}}
@keyframes phSlideUp{from{opacity:0;transform:translate(2.5%,-14%)}to{opacity:1;transform:none}}
/* ondulation continue : chaque barre dérive très lentement le long du slash,
   durées/retards/directions tous différents pour un balancement désynchronisé */
.about-photo.rv.in .ph-slice{animation:phFloat 9.4s ease-in-out 1.2s infinite}
.about-photo.rv.in .s1{animation:phFloatUp 10.8s ease-in-out 1.6s infinite}
.about-photo.rv.in .s2{animation:phFloat 8.1s ease-in-out 2.1s infinite}
.about-photo.rv.in .s4{animation:phFloatUp 7.4s ease-in-out 1.4s infinite}
.about-photo.rv.in .s5{animation:phFloat 11.6s ease-in-out 0.9s infinite}
.about-photo.rv.in .s6{animation:phFloatUp 8.8s ease-in-out 2.6s infinite}
@keyframes phFloat{0%,100%{transform:none}50%{transform:translate(-0.9%,5%)}}
@keyframes phFloatUp{0%,100%{transform:none}50%{transform:translate(0.9%,-5%)}}
@media(prefers-reduced-motion:reduce){
  html.js .about-photo.rv .ph-slice,html.js .about-photo.rv .ph-slice img{opacity:1;animation:none!important}
}
.about-body{display:grid;gap:clamp(2rem,4vw,3rem);max-width:60ch}
.about-body .intro-line{font-size:clamp(1.25rem,1vw + 1rem,1.6rem);line-height:1.4;
  letter-spacing:-0.015em;font-weight:560;color:var(--navy);max-width:32ch}
.about-block h2{font-size:clamp(1.1rem,0.6vw + 0.9rem,1.35rem);margin-bottom:0.9rem}
.about-block p{color:var(--muted);line-height:1.6}
.about-block p + p{margin-top:1rem}
.about-body a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line-strong);
  transition:border-color 0.2s var(--ease),color 0.2s var(--ease)}
.about-body a:hover{color:var(--azure);border-color:var(--azure)}
.courses{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.6rem}
.courses li{font-size:0.95rem;font-weight:530;color:var(--navy);background:var(--sky-soft);
  padding:0.5em 0.95em;border:1px solid var(--line)}

/* ---------- in-page reveal (reuses .rv from home-granola) ---------- */

/* ---------- built: automations portfolio (Alex 2026-07-09) ---------- */
.built{background:var(--cream)}
.built-head{display:grid;gap:clamp(1.8rem,4vw,2.5rem);margin-bottom:clamp(2.2rem,4.8vw,3.6rem)}
@media(min-width:56em){
  .built-head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:clamp(3rem,6vw,5rem)}
}
.built-intro .kicker{font-size:0.82rem;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--slate);margin:0 0 1rem}
.built-intro h2{max-width:18ch}
.built-say{color:var(--muted);max-width:52ch;margin-top:1.15rem;line-height:1.55;
  font-size:clamp(1.02rem,0.4vw + 0.9rem,1.15rem)}
.built-stat{display:flex;flex-direction:column;gap:0.5rem}
.built-stat .stat-num{font-size:clamp(3.2rem,5.5vw,5rem);font-weight:600;color:var(--navy);
  letter-spacing:-0.035em;line-height:0.95}
.built-stat .stat-lab{color:var(--muted);max-width:24ch;line-height:1.4;font-size:0.98rem}

.auto-grid{display:grid;gap:clamp(1rem,1.6vw,1.35rem)}
@media(min-width:40em){.auto-grid{grid-template-columns:1fr 1fr}}
@media(min-width:68em){.auto-grid{grid-template-columns:repeat(3,1fr)}}
.auto-card{background:var(--white);border:1px solid var(--line);padding:clamp(1.5rem,2.4vw,1.9rem);
  display:flex;flex-direction:column;gap:0.7rem;
  transition:border-color 0.35s var(--ease),box-shadow 0.35s var(--ease),transform 0.35s var(--ease)}
.auto-card:hover{border-color:var(--sky);box-shadow:0 22px 46px -30px rgba(0,48,73,0.45);transform:translateY(-2px)}
.auto-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.auto-card .cat{font-size:0.7rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--steel)}
.auto-card .hrs{font-size:0.78rem;font-weight:600;color:var(--azure);white-space:nowrap;letter-spacing:-0.01em}
.auto-card h3{font-size:clamp(1.1rem,0.55vw + 0.95rem,1.32rem);color:var(--navy);letter-spacing:-0.012em;line-height:1.2;font-weight:600}
.auto-card .what{color:var(--muted);font-size:0.9rem;line-height:1.5;margin:0}
.auto-card .ba{margin-top:auto;padding-top:0.85rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.8rem;line-height:1.35}
.auto-card .ba .was{color:var(--slate)}
.auto-card .ba .arr{color:var(--azure);font-weight:600}
.auto-card .ba .now{color:var(--navy);font-weight:500}