/* ==========================================================================
   TAIYO INFRASTRUCTURE — Design System
   Palette:  Paper #FFFFFF / Surface #F6F5F2 / Ink #1A1D22
             Orange #F2661E (primary) / Orange Deep #C8500F (hover)
             Japan Blue #22385C (secondary / technical accent)
             Steel #6B7280 (secondary text) / Line #E3E2DD (hairline)
   Type:     Space Grotesk (display) / Inter (body) / IBM Plex Mono (data)
   ========================================================================== */

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

:root{
  --paper:#FFFFFF;
  --surface:#F6F5F2;
  --ink:#1A1D22;
  --ink-soft:#33373E;
  --steel:#6B7280;
  --steel-light:#9BA1AA;
  --line:#E3E2DD;
  --line-dark:#333844;
  --orange:#F2661E;
  --orange-deep:#C8500F;
  --orange-tint:#FDEEE4;
  --jblue:#22385C;
  --jblue-tint:#EAEEF3;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --container:1240px;
  --gap:2px;
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}

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

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

.mono-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex;
  align-items:center;
  gap:10px;
}
.mono-label::before{
  content:'';
  width:22px;height:1px;
  background:var(--orange);
  display:inline-block;
}

/* ---------- Structural grid backdrop ---------- */
.grid-field{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.55;
  mask-image:linear-gradient(180deg, black, transparent 92%);
  pointer-events:none;
}
.grid-field.dark{
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  opacity:.35;
}

/* ---------- Corner-bracket signature (technical drawing crop marks) ---------- */
.bracket{position:relative;}
.bracket::before,.bracket::after,
.bracket .b-tl,.bracket .b-br{
  content:'';
  position:absolute;
  width:16px;height:16px;
  border:1.5px solid var(--orange);
  opacity:0;
  transition:opacity .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.bracket::before{ top:-1px;left:-1px; border-right:none;border-bottom:none; }
.bracket::after{ bottom:-1px;right:-1px; border-left:none;border-top:none; }
.bracket:hover::before,.bracket:hover::after{ opacity:1; width:22px;height:22px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:34px;width:auto;}

.main-nav{display:flex; align-items:center; gap:2px;}
.main-nav a{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:10px 16px;
  position:relative;
  transition:color .2s;
}
.main-nav a:hover, .main-nav a.active{color:var(--orange);}
.main-nav a.active::after{
  content:'';
  position:absolute; left:16px; right:16px; bottom:6px;
  height:1px; background:var(--orange);
}
.header-cta{
  display:flex; align-items:center; gap:22px;
}
.header-phone{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.header-phone svg{width:14px;height:14px;stroke:var(--orange);flex:none;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:13px 24px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--orange); border-color:var(--orange); transform:translateY(-1px);}
.btn.outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn.outline:hover{background:var(--ink); color:var(--paper);}
.btn.on-dark{border-color:rgba(255,255,255,.4); color:var(--paper); background:transparent;}
.btn.on-dark:hover{background:var(--orange); border-color:var(--orange);}
.btn.orange{background:var(--orange); border-color:var(--orange);}
.btn.orange:hover{background:var(--orange-deep); border-color:var(--orange-deep);}

.nav-toggle{display:none;}
.mobile-nav, .mobile-backdrop{display:none;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:120px 0 100px;
  overflow:hidden;
}
.hero .grid-field{opacity:.5;}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:end;}
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex; align-items:center; gap:10px;
  margin-bottom:28px;
}
.hero-eyebrow::before{content:'';width:26px;height:1px;background:var(--orange);}
.hero h1{
  font-size:clamp(38px, 5.4vw, 74px);
  color:var(--paper);
  max-width:14ch;
}
.hero h1 em{font-style:normal;color:var(--orange);}
.hero-sub{
  margin-top:26px;
  font-size:18px;
  color:#B9BEC7;
  max-width:46ch;
  line-height:1.7;
}
.hero-actions{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap;}
.hero-panel{
  border-left:1px solid rgba(255,255,255,.18);
  padding-left:40px;
}
.hero-stat{padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14);}
.hero-stat:first-child{padding-top:0;}
.hero-stat:last-child{border-bottom:none;}
.hero-stat .n{
  font-family:var(--font-mono);
  font-size:34px;
  color:var(--paper);
  display:block;
}
.hero-stat .l{
  font-size:13px;
  color:var(--steel-light);
  margin-top:4px;
  display:block;
}

/* truss illustration */
.truss{position:absolute; right:-60px; top:0; bottom:0; width:46%; z-index:1; opacity:.9;}
.truss svg{width:100%;height:100%;}
.truss path,.truss line,.truss rect{
  stroke:rgba(242,102,30,.55);
  stroke-width:1.4;
  fill:none;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:draw .6s var(--ease) forwards;
}
.truss circle{fill:var(--orange); opacity:0; animation:pop .4s var(--ease) forwards;}
.truss-label{
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:2px;
  fill:rgba(242,102,30,.75);
  opacity:0;
  animation:pop .6s var(--ease) forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pop{to{opacity:1;}}

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */
section{position:relative;}
.section{padding:110px 0;}
.section.tight{padding:80px 0;}
.section.surface{background:var(--surface);}
.section.dark{background:var(--ink); color:var(--paper);}
.section.dark .steel-text{color:var(--steel-light);}

.section-head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px;
  margin-bottom:64px; align-items:end;
}
.section-head h2{font-size:clamp(28px,3.4vw,44px);}
.section-head .desc{color:var(--steel); font-size:16px; line-height:1.75;}
.section.dark .section-head .desc{color:var(--steel-light);}
.section-head.center{grid-template-columns:1fr; text-align:center; max-width:720px; margin-left:auto; margin-right:auto;}
.section-head.center .mono-label{justify-content:center;}
.section-head.center .mono-label::before{display:none;}

.page-band{
  background:var(--ink); color:var(--paper);
  padding:64px 0 46px;
  position:relative; overflow:hidden;
}
.page-band .wrap{position:relative; z-index:2;}
.crumb{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel-light);
}
.crumb a:hover{color:var(--orange);}
.page-band h1{font-size:clamp(32px,4.4vw,54px); margin-top:18px; color:var(--paper);}
.page-band .sub{margin-top:16px; color:#B9BEC7; max-width:60ch; font-size:16.5px; line-height:1.7;}

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.grid{display:grid; gap:var(--gap);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:38px 34px;
  position:relative;
}
.card .num{
  font-family:var(--font-mono);
  font-size:12px; color:var(--orange);
  letter-spacing:.1em;
}
.card h3{font-size:21px; margin-top:16px;}
.card p{color:var(--steel); margin-top:12px; font-size:15px; line-height:1.7;}
.card .icon{width:40px;height:40px;stroke:var(--orange);fill:none;stroke-width:1.4;}

.service-card{
  background:var(--paper); border:1px solid var(--line);
  padding:44px 38px;
}
.service-card .tag{
  font-family:var(--font-mono); font-size:12px; color:var(--jblue);
  letter-spacing:.1em; text-transform:uppercase;
}
.service-card h3{font-size:26px; margin-top:14px;}
.service-card p{color:var(--steel); margin-top:16px; line-height:1.75;}
.service-card ul{margin-top:22px; display:flex; flex-direction:column; gap:10px;}
.service-card li{
  font-size:14px; color:var(--ink-soft);
  padding-left:18px; position:relative;
}
.service-card li::before{
  content:''; position:absolute; left:0; top:8px;
  width:7px;height:1px;background:var(--orange);
}

/* ---------- Project cards ---------- */
.proj-card{
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.proj-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--jblue);
}
.proj-media img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease);}
.proj-card:hover .proj-media img{transform:scale(1.05);}
.proj-media .mark{
  position:absolute; top:14px; left:14px;
  font-family:var(--font-mono); font-size:11px;
  color:#fff; background:rgba(26,29,34,.72);
  padding:5px 10px; letter-spacing:.06em; text-transform:uppercase;
}
.proj-graphic{width:100%;height:100%;}
.proj-body{padding:26px 26px 28px;}
.proj-body .loc{
  font-family:var(--font-mono); font-size:12px; color:var(--steel);
  letter-spacing:.04em;
}
.proj-body h3{font-size:19px; margin-top:10px;}
.proj-specs{
  display:flex; gap:18px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line);
}
.proj-specs div{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);}
.proj-specs span{display:block; color:var(--steel-light); font-size:10px; margin-top:2px; letter-spacing:.06em;}

/* ---------- Workflow ---------- */
.flow{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);}
.flow-step{background:var(--paper); padding:34px 22px; min-height:220px; display:flex; flex-direction:column; justify-content:space-between;}
.flow-step .fn{font-family:var(--font-mono); font-size:26px; color:var(--orange-tint); -webkit-text-stroke:1px var(--orange);}
.flow-step h4{font-size:15px; margin-top:20px; line-height:1.4;}

/* ---------- Why-us numbered list ---------- */
.why-list{border-top:1px solid var(--line);}
.why-item{
  display:grid; grid-template-columns:70px 1fr; gap:26px;
  padding:28px 0; border-bottom:1px solid var(--line);
  align-items:start;
}
.why-item .idx{font-family:var(--font-mono); color:var(--orange); font-size:14px; padding-top:3px;}
.why-item h4{font-size:18px;}
.why-item p{color:var(--steel); margin-top:8px; font-size:14.5px; line-height:1.7; max-width:60ch;}
.section.dark .why-item{border-color:var(--line-dark);}
.section.dark .why-list{border-color:var(--line-dark);}

/* ---------- Team ---------- */
.team-card{border:1px solid var(--line); background:var(--paper); padding:28px 26px;}
.team-head{display:flex; align-items:flex-start; gap:18px; margin-bottom:18px;}
.team-photo{
  width:88px; height:88px; flex:none;
  border:2px solid var(--orange);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--line);
  position:relative; overflow:hidden;
  background:var(--jblue-tint);
}
.team-photo .initials{
  font-family:var(--font-display); font-size:26px; color:var(--jblue); font-weight:600;
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.team-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.team-id{padding-top:2px;}
.team-id h3{font-size:16.5px; line-height:1.3;}
.team-id .role{
  font-family:var(--font-mono); font-size:11px; color:var(--orange);
  text-transform:uppercase; letter-spacing:.07em; margin-top:6px; display:block;
}
.team-card .note{font-size:13.5px; color:var(--steel); margin-top:0; line-height:1.7;}

/* ---------- Client wordmark strip ---------- */
.client-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:26px 0;
}
.client-track{
  display:flex; gap:64px; width:max-content;
  animation:scroll 32s linear infinite;
}
.client-track span{
  font-family:var(--font-display); font-weight:600; font-size:20px;
  color:var(--steel-light); white-space:nowrap; letter-spacing:.02em;
}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Certifications ---------- */
.cert-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:0;}
.cert{background:var(--paper); padding:32px 28px; display:flex; gap:18px; align-items:flex-start;}
.cert .cn{font-family:var(--font-mono); font-size:12px; color:var(--orange); flex:none; padding-top:2px;}
.cert h4{font-size:16px;}
.cert p{color:var(--steel); font-size:13.5px; margin-top:6px; line-height:1.6;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink); color:var(--paper);
  padding:80px 0; position:relative; overflow:hidden;
}
.cta-inner{
  display:flex; justify-content:space-between; align-items:center; gap:40px;
  position:relative; z-index:2; flex-wrap:wrap;
}
.cta-inner h2{font-size:clamp(26px,3.2vw,38px); max-width:16ch; color:var(--paper);}
.cta-inner p{color:var(--steel-light); margin-top:14px; max-width:46ch;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--ink); color:var(--paper); padding:84px 0 0;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px;
  padding-bottom:56px; border-bottom:1px solid var(--line-dark);
}
.footer-brand img{height:30px;}
.footer-brand p{color:var(--steel-light); margin-top:18px; font-size:14px; line-height:1.7; max-width:34ch;}
.footer-col h5{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--orange); margin-bottom:20px;
}
.footer-col li{margin-bottom:12px;}
.footer-col a{color:#C7CBD1; font-size:14.5px; transition:color .2s;}
.footer-col a:hover{color:var(--orange);}
.footer-col .addr{color:#C7CBD1; font-size:14.5px; line-height:1.7;}
.footer-jp{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line-dark);
  font-size:13px; color:var(--steel-light); line-height:1.7;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 0; flex-wrap:wrap; gap:12px;
}
.footer-bottom p{font-family:var(--font-mono); font-size:12px; color:var(--steel-light);}
.footer-bottom .made{font-family:var(--font-mono); font-size:12px; color:var(--steel-light);}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:1px; background:var(--line);}
.contact-info, .contact-form-wrap{background:var(--paper); padding:52px 46px;}
.info-block{padding:22px 0; border-bottom:1px solid var(--line);}
.info-block:first-child{padding-top:0;}
.info-block h4{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange);
}
.info-block p{margin-top:10px; font-size:15.5px; line-height:1.7; color:var(--ink-soft);}
.info-block a{color:var(--ink-soft);}
.info-block a:hover{color:var(--orange);}

.field{margin-bottom:22px;}
.field label{
  display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--steel); margin-bottom:9px;
}
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line); background:var(--surface);
  padding:14px 16px; font-family:var(--font-body); font-size:15px; color:var(--ink);
  transition:border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--orange); background:var(--paper);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-note{font-size:12.5px; color:var(--steel-light); margin-top:16px; line-height:1.6;}
.form-status{margin-top:16px; font-size:14px; font-family:var(--font-mono); display:none;}
.form-status.ok{color:#1a7a3c; display:block;}
.form-status.err{color:#b3261e; display:block;}

.map-frame{border:0; width:100%; height:340px; filter:grayscale(.35) contrast(1.05);}

/* ==========================================================================
   MISC PAGES: About / Services / Projects
   ========================================================================== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.split img{border:1px solid var(--line);}
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:0;}
.stat-strip.stat-strip-3{grid-template-columns:repeat(3,1fr);}
.stat-box{background:var(--paper); padding:34px 30px;}
.stat-box .n{font-family:var(--font-mono); font-size:32px; color:var(--orange);}
.stat-box .l{font-size:13px; color:var(--steel); margin-top:8px; letter-spacing:.02em;}

.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);}
.vm-card{background:var(--paper); padding:46px 42px;}
.vm-card h3{font-size:22px; margin-top:14px;}
.vm-card p{margin-top:16px; color:var(--steel); line-height:1.8; font-size:15.5px;}

.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px;}
.filter-btn{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line); background:var(--paper); color:var(--steel);
  transition:all .2s;
}
.filter-btn:hover{border-color:var(--orange); color:var(--orange);}
.filter-btn.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .flow{grid-template-columns:repeat(3,1fr);}
  .cert-row{grid-template-columns:repeat(1,1fr);}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
  .stat-strip.stat-strip-3{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
  .contact-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr; gap:36px;}
  .vm-grid{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .wrap{padding:0 22px;}
  .main-nav, .header-phone{display:none;}
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:42px;height:42px; border:1px solid var(--line); background:none;
  }
  .nav-toggle svg{width:18px;height:18px;}
  .header-row{height:72px;}
  .hero{padding:80px 0 64px;}
  .hero-inner{grid-template-columns:1fr; gap:40px;}
  .hero-panel{border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.18); padding-top:24px;}
  .truss{display:none;}
  .section{padding:70px 0;}
  .section-head{grid-template-columns:1fr; gap:20px;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .stat-strip{grid-template-columns:1fr 1fr;}
  .stat-strip.stat-strip-3{grid-template-columns:1fr;}

  /* mobile nav drawer */
  .mobile-nav{
    display:flex;
    position:fixed; inset:0 0 0 auto; width:82%; max-width:340px;
    background:var(--ink); z-index:200; transform:translateX(100%);
    transition:transform .35s var(--ease);
    padding:28px 26px; flex-direction:column; gap:4px;
  }
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav a{
    color:var(--paper); font-family:var(--font-mono); font-size:15px;
    text-transform:uppercase; letter-spacing:.05em; padding:16px 4px;
    border-bottom:1px solid var(--line-dark);
  }
  .mobile-nav a.active{color:var(--orange);}
  .mobile-backdrop{
    display:block;
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150;
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .mobile-backdrop.open{opacity:1; pointer-events:auto;}
  .mobile-close{align-self:flex-end; background:none; border:0; color:var(--paper); margin-bottom:20px;}
}

@media (max-width:520px){
  .flow{grid-template-columns:1fr;}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}