/* Swing by Lionmaker. Graphite on warm paper. Mobile first: base styles are
   the phone layout; min-width queries add the larger layouts. Motion follows
   systems.lionmaker.io: every word is in the HTML at its finished state,
   motion only adds transform/opacity on top, and reduced motion or browsers
   without scroll timelines see the still page. */
@font-face{font-family:"Playfair Display";src:url("../fonts/PlayfairDisplay-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/PlayfairDisplay-Italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#F4EEE2;          /* warm paper */
  --paper-deep:#ECE4D3;     /* band */
  --sheet:#FAF6EE;          /* card */
  --ink:#1A1A1A;            /* graphite, 15:1 on paper */
  --muted:#615C52;          /* muted ink, 5.7:1 on paper */
  --rule:#CFC5B2;
  --rule-strong:#9C927F;
  --brass:#B8893B;          /* decorative only: 2.7:1 on paper, never body text */
  --brass-ink:#7A5A22;      /* brass for text: 5.5:1 on paper */
  --focus:#1A1A1A;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1140px;
  --gutter:16px;
  --radius:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-reveal:cubic-bezier(.16,1,.3,1);
}
@media (min-width:600px){:root{--gutter:28px}}
@media (min-width:1024px){:root{--gutter:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background-color:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.6;overflow-wrap:break-word;
  /* subtle paper: two soft washes, no texture download */
  background-image:
    radial-gradient(1200px 600px at 85% -10%,rgba(255,252,244,.75),transparent 60%),
    radial-gradient(900px 500px at -10% 40%,rgba(226,214,190,.35),transparent 60%);
}
@media (min-width:720px){body{font-size:1.0625rem}}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:#E4D3AE}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(2rem,1.4rem + 2.4vw,3rem)}
h3{font-size:clamp(1.625rem,1.3rem + 1.2vw,2.25rem)}
p{margin:0 0 1em}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.lede{font-size:1.0625rem;max-width:38em}
@media (min-width:720px){.lede{font-size:1.1875rem}}
.muted{color:var(--muted)}

/* header */
.site-header{border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:4px 16px;min-height:60px;flex-wrap:wrap;padding-block:8px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex-wrap:wrap;min-width:0;row-gap:2px}
.brand img{width:32px;height:32px}
.brand-name{font-family:var(--serif);font-size:1.375rem;line-height:1}
.brand-by{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.site-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:calc(100% + 20px);margin-inline:-10px}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{font-size:.9375rem;text-decoration:none;padding:10px;border-radius:999px;white-space:nowrap}
.site-nav a:hover{background:var(--paper-deep)}
.site-nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.site-nav .nav-extra{display:none}
@media (min-width:720px){
  .site-header .wrap{min-height:68px}
  .brand img{width:36px;height:36px}
  .brand-name{font-size:1.5rem}
  .brand-by{font-size:.6875rem}
  .site-nav{margin-inline:0;max-width:100%}
  .site-nav a{padding:10px 12px}
  .site-nav .nav-extra{display:inline-block}
}

/* status + buttons */
.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);border-radius:999px;padding:7px 14px 7px 12px;background:var(--sheet);margin:0}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 1px var(--ink)}
.actions{display:flex;flex-direction:column;gap:10px;margin:20px 0 14px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:999px;font:600 1rem/1.2 var(--sans);text-decoration:none;border:1px solid var(--ink);cursor:pointer}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#333}
.btn-quiet{background:transparent;color:var(--ink)}
.btn-quiet:hover{background:var(--sheet)}
@media (min-width:600px){.actions{flex-direction:row;flex-wrap:wrap}.btn{min-height:48px}}

/* hero: on a phone the words come first, then the character mid-swing
   beside the Today screen, then the buttons */
.hero{padding-block:22px 48px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.hero-mark{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hero-mark img{width:60px;height:auto;filter:drop-shadow(0 6px 10px rgba(26,26,26,.18))}
.hero-mark .eyebrow{margin:0}
.hero h1{display:flex;flex-direction:column}
.wordmark{display:block;font-size:clamp(2.5rem,1.9rem + 3vw,4.25rem);line-height:1}
.wordmark small{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.tagline-line{border-top:1px solid var(--ink);margin-top:16px;padding-top:14px}
.tagline{display:block;font-size:clamp(2.125rem,1.3rem + 3.6vw,4rem);line-height:1.04}
.tagline .tl{display:inline-block;max-width:100%}
.motto{font-family:var(--serif);font-style:italic;font-size:1.1875rem;color:var(--muted);margin:4px 0 0}
.hero-lede{margin:0}
.hero-cta{order:3}

/* the action stage: the two frames of the app's Two-Hand Swing guide beside the Today screen */
.stage-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:6px;align-items:end;margin:0}
.swing-frame{margin:0;display:flex;flex-direction:column;align-items:center}
.swing-frame img{width:100%;height:auto}
.swing-frame figcaption{font-family:var(--mono);font-size:.625rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:8px;text-align:center;line-height:1.3}
.stage-phone{align-self:center}
.stage-note{grid-column:1/-1;font-size:.8125rem;color:var(--muted);margin:10px 0 0}
@media (min-width:600px){.swing-frame figcaption{font-size:.6875rem}.stage-art{gap:16px}}
@media (min-width:960px){
  .hero{padding-block:56px 96px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"copy art" "cta art";column-gap:48px;row-gap:0;align-items:center}
  .hero-copy{grid-area:copy;align-self:end}
  .stage-art{grid-area:art}
  .hero-cta{grid-area:cta;align-self:start}
  .hero-mark img{width:92px}
  .tagline-line{margin-top:22px;padding-top:18px}
}

/* phone frame: restrained, preserves the screenshot proportions */
.phone{display:block;position:relative;border-radius:clamp(16px,13%,46px)/clamp(16px,6%,46px);padding:clamp(4px,1.6%,7px);background:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 24px 48px -24px rgba(26,26,26,.45),0 2px 6px rgba(26,26,26,.18)}
.phone img{width:100%;height:auto;aspect-ratio:1320/2868;border-radius:clamp(12px,11.5%,40px)/clamp(12px,5.4%,40px);background:var(--paper)}
.shot-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-decoration:none;color:var(--ink)}
.shot-open .zoom{display:table;margin:10px auto 0;font:600 .8125rem/1 var(--sans);background:var(--ink);color:var(--paper);border-radius:999px;padding:9px 14px}

/* sections */
.section{padding-block:56px}
.section + .section{border-top:1px solid var(--rule)}
.band{background:var(--paper-deep)}
.section-head{max-width:44rem;margin-bottom:24px}
.section-head h2 + p{margin-top:14px}
@media (min-width:720px){.section{padding-block:96px}.section-head{margin-bottom:40px}}
.evidence-note{font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--muted);border-left:2px solid var(--brass);padding:4px 0 4px 12px;margin:0;max-width:44rem}

/* feature rows: each feature with its screen beside it */
.features{list-style:none;margin:0;padding:0}
.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-block:44px;border-top:1px solid var(--rule)}
.feature:first-child{border-top:0;padding-top:8px}
.feature-copy h3{margin-bottom:14px}
.feature-copy p{max-width:34rem}
.feature-phone{width:min(74vw,300px);justify-self:center}
.step{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.step b{font-weight:400;color:var(--ink);font-size:1rem;letter-spacing:0}
.cap{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.0625rem}
.note{display:block;font-size:.875rem;color:var(--muted);margin-top:10px}
.ticks{list-style:none;margin:16px 0 0;padding:0;max-width:34rem}
.ticks li{padding:10px 0 10px 24px;border-bottom:1px solid var(--rule);position:relative}
.ticks li:first-child{border-top:1px solid var(--rule)}
.ticks li::before{content:"";position:absolute;left:2px;top:1.2em;width:10px;height:1px;background:var(--ink)}
.figure-num{display:flex;flex-wrap:wrap;gap:12px 28px;margin:18px 0 12px;padding:0;list-style:none}
.figure-num strong{display:block;font-family:var(--serif);font-weight:400;font-size:2.25rem;line-height:1}
.figure-num span{display:block;color:var(--muted);font-size:.875rem;margin-top:4px}
.caution{margin-top:18px;font-weight:600;display:flex;gap:12px;align-items:flex-start}
.caution::before{content:"!";flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;font:600 .8125rem/1 var(--sans);margin-top:1px}
.link-arrow{font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;display:inline-block;margin-top:14px}
.link-arrow::after{content:" →"}
@media (min-width:860px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:72px}
  .feature-phone{width:min(100%,320px)}
  .feature:nth-child(even) .feature-phone{order:-1}
}

/* audience */
.audience-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.figure-art{margin:0;display:flex;justify-content:center}
.figure-art img{width:120px}
.panel{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);padding:22px}
.panel h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.375rem);margin-bottom:14px}
@media (min-width:860px){
  .audience-grid{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:56px}
  .figure-art img{width:200px}
  .panel{padding:36px}
}

/* faq */
.faq{border-top:1px solid var(--ink);max-width:52rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-family:var(--serif);font-size:1.1875rem;line-height:1.3;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-family:var(--sans);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 20px;max-width:44rem;color:#2E2B26}
@media (min-width:720px){.faq summary{font-size:1.3125rem;padding-block:20px}}

/* final cta */
.cta{text-align:center}
.cta img{width:88px;margin:0 auto 16px}
.cta h2{margin-bottom:12px}
.cta p{color:var(--muted);max-width:32rem;margin-inline:auto}
@media (min-width:600px){.cta .actions{justify-content:center}}

/* footer */
.site-footer{border-top:1px solid var(--ink);padding-block:36px 44px;font-size:.9375rem}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.footer-brand{font-family:var(--serif);font-size:1.5rem;margin:0 0 6px}
.footer-links{display:flex;flex-wrap:wrap;gap:0 20px;list-style:none;margin:0;padding:0}
.footer-links a{display:inline-block;padding:8px 0}
.preview-flag{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted);margin:0}
@media (min-width:720px){.site-footer .wrap{grid-template-columns:minmax(0,1fr) auto;gap:24px 48px}.preview-flag{grid-column:1/-1}}

/* viewer (native <dialog>) */
.viewer{border:0;padding:0;margin:auto;max-width:100vw;max-height:100dvh;width:100%;height:100%;background:transparent;color:var(--ink)}
.viewer::backdrop{background:rgba(20,18,15,.82)}
.viewer-inner{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;background:var(--paper);max-width:980px;margin:0 auto}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.viewer-title{font-family:var(--serif);font-size:1.25rem;margin:0}
.viewer-count{font-family:var(--mono);font-size:.8125rem;color:var(--muted);margin-left:10px}
.viewer-btn{min-width:44px;min-height:44px;border:1px solid var(--ink);background:var(--sheet);color:var(--ink);border-radius:999px;font:600 .9375rem/1 var(--sans);padding:0 16px;cursor:pointer}
.viewer-btn:hover{background:#fff}
.viewer-stage{overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:12px;background:var(--paper-deep);overscroll-behavior:contain}
.viewer-stage img{height:100%;width:auto;max-width:none;object-fit:contain;box-shadow:0 10px 30px -12px rgba(0,0,0,.35);border:1px solid var(--rule-strong);background:var(--paper)}
.viewer-stage.actual img{height:auto;width:auto}
.viewer-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--rule)}
.viewer-cap{margin:0;font-size:.9375rem}
.viewer-cap .note{margin-top:2px;font-size:.8125rem}
.viewer-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:0 14px 12px}
.viewer-tools a{font-size:.875rem;align-self:center}

/* case study */
.crumbs{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.crumbs a{color:var(--muted)}
.cs-hero .hero-grid{gap:28px}
.cs-hero h1{font-size:clamp(2.125rem,1.4rem + 3.4vw,4rem);line-height:1.06;max-width:16ch}
.cs-hero .sub{font-family:var(--serif);font-style:italic;font-size:1.1875rem;color:var(--muted);margin:14px 0 0}
.cs-hero .lede{margin-top:20px}
.cs-visual{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:14px;align-items:center;justify-self:center;width:min(100%,460px)}
@media (min-width:960px){.cs-hero .hero-grid{grid-template-areas:none}}
.facts{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 32px;padding:0;list-style:none;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.facts li{padding:16px 0;border-top:1px solid var(--rule)}
.facts li:first-child{border-top:0}
.facts strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,1.3rem + 1.5vw,2.5rem);line-height:1.1}
.facts span{display:block;color:var(--muted);font-size:.9375rem;margin-top:6px}
.glance{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.glance div{padding:12px 16px 12px 0}
.glance dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.glance dd{margin:0;font-size:.9375rem}
.stage-nav{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:24px 0 0;padding:0}
.stage-nav a{display:inline-block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid var(--rule-strong);border-radius:999px;padding:9px 12px;background:var(--sheet)}
.stage-nav a:hover{border-color:var(--ink)}
.prose{max-width:40rem}
.cs-section{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start;scroll-margin-top:16px}
.cs-section h2{margin-bottom:18px}
.stage{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);margin:0 0 12px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
.trio{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:32px}
.mini figure{margin:0}
.mini .shot-open{max-width:260px;margin:0 auto 12px}
.mini figcaption{font-size:.9375rem;max-width:260px;margin-inline:auto}
.mini figcaption strong{font-family:var(--serif);font-weight:400;font-size:1.1875rem;display:block}
.process{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.process li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.process .who{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{padding:12px 0 12px 32px;border-bottom:1px solid var(--rule);position:relative}
.checklist li::before{position:absolute;left:2px;top:12px;font-family:var(--mono);font-size:.9375rem}
.checklist.done li::before{content:"✓"}
.checklist.open li::before{content:"○";color:var(--muted)}
.limits{font-size:.9375rem;color:var(--muted);margin-top:18px}
.design-art{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr) minmax(0,.75fr);gap:10px;align-items:end;margin:0}
.design-art .shot-open .zoom{display:none}
.design-art figcaption{grid-column:1/-1;font-size:.875rem;color:var(--muted);margin-top:4px}
.card{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);padding:22px;max-width:46rem;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--ink)}
.card img{max-width:140px}
.card h2{font-size:1.625rem;margin:4px 0 10px}
.card p{color:var(--muted);margin:0 0 12px}
@media (min-width:720px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li{padding:20px 20px 18px;border-top:0;border-left:1px solid var(--rule)}
  .facts li:nth-child(odd){border-left:0;padding-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--rule)}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process li{grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:20px}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .card{grid-template-columns:minmax(0,150px) minmax(0,1fr);padding:26px}
  .card img{max-width:none}
}
@media (min-width:960px){
  .cs-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .cs-section.single{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .facts li,.facts li:nth-child(n){border-top:0;border-left:1px solid var(--rule);padding-left:20px}
  .facts li:first-child{border-left:0;padding-left:0}
  .glance{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* policy pages */
.policy{padding-block:32px 64px}
.policy main{max-width:46rem}
.policy-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px;padding:0}
.policy-nav a{text-decoration:none;font-size:.9375rem;padding:9px 14px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--sheet)}
.policy-nav a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.policy h1{font-size:clamp(2.125rem,1.6rem + 2.4vw,3.25rem);margin-bottom:16px}
.policy h2{font-size:1.5rem;margin:2rem 0 .6rem}
.policy .draft{border:1px solid var(--ink);border-left:6px solid var(--brass);padding:14px 16px;background:var(--sheet);font-weight:600;border-radius:6px}
.policy .meta{color:var(--muted);font-family:var(--mono);font-size:.8125rem;letter-spacing:.02em}

/* ---- Motion (enhancement only) ---------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .shot-open .phone{transition:transform .25s var(--ease)}
  .shot-open:hover .phone{transform:translateY(-3px)}
  .viewer[open] .viewer-inner{animation:sw-rise-in .22s var(--ease)}

  /* Hero intro, one pass then it holds: the words rise in line by line,
     the rule draws across, the swing frames step in (backswing, then
     lockout), and the status dot powers on like the lion's eyes on
     systems.lionmaker.io. */
  .hero .rise{animation:sw-rise-in .7s var(--ease) both}
  .hero .d1{animation-delay:.06s}.hero .d2{animation-delay:.16s}.hero .d3{animation-delay:.28s}
  .hero .d4{animation-delay:.4s}.hero .d5{animation-delay:.52s}
  .hero .tagline-line{border-top-color:transparent;background:linear-gradient(var(--ink),var(--ink)) top left/100% 1px no-repeat;animation:sw-rule .9s var(--ease) .12s both}
  .swing-frame.f1{animation:sw-frame-in .8s var(--ease) .35s both}
  .swing-frame.f2{animation:sw-frame-in .8s var(--ease) .8s both}
  .stage-art.solo .swing-frame{animation:sw-figure-in 1.1s var(--ease-reveal) .3s both}
  .stage-art.solo .stage-note{animation:sw-rise-in .8s var(--ease) .75s both}
  .hero .motto{animation:sw-rise-in .8s var(--ease) .7s both}
  .stage-phone{animation:sw-phone-in .9s var(--ease) .2s both}
  .status::before{animation:sw-power .9s linear 1.2s both}
  .btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,250,235,.22) 50%,transparent 70%);background-size:250% 100%;animation:sw-sweep 4.2s ease-in-out 1.6s infinite;pointer-events:none}

}
@keyframes sw-rise-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sw-rule{from{background-size:0% 1px}to{background-size:100% 1px}}
@keyframes sw-frame-in{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sw-phone-in{from{opacity:0;transform:translateY(28px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes sw-power{0%{opacity:0}8%{opacity:1}16%{opacity:0}22%{opacity:1}28%{opacity:.2}100%{opacity:1;box-shadow:0 0 0 1px var(--ink),0 0 10px 2px rgba(184,137,59,.55)}}
@keyframes sw-sweep{0%{background-position:150% 0}45%,100%{background-position:-100% 0}}

@media print{.site-nav,.actions,.viewer{display:none}}
/* phone hero fit: crest and label share one short row; the action art is
   capped so the buttons arrive on the first screen of a 390x844 phone */
.hero-lede{margin:0 0 16px}
.hero-mark img{width:46px}
.swing-frame img{max-height:230px;width:auto}
.stage-phone .phone{max-width:150px;margin-left:auto}
.stage-note{margin-top:6px}
@media (min-width:600px){.hero-mark img{width:60px}.swing-frame img{max-height:320px}.stage-phone .phone{max-width:200px}}
@media (min-width:960px){
  .hero-mark img{width:92px}
  .swing-frame img{max-height:400px}
  .stage-phone .phone{max-width:230px}
  .hero-lede{margin-top:20px}
}
/* phone: header on one row, crest sits beside the wordmark */
@media (max-width:599px){
  .site-header .wrap{flex-wrap:nowrap;min-height:56px;padding-block:6px}
  .brand-by{display:none}
  .site-nav{margin-inline:0 -10px}
  .site-nav a{padding:10px 8px;font-size:.875rem}
  .hero{padding-top:18px}
  .hero-copy{position:relative}
  .hero-mark{position:absolute;right:0;top:0;margin:0}
  .hero-mark .eyebrow{display:none}
  .hero-mark img{width:54px}
  .tagline-line{margin-top:14px;padding-top:12px}
  .hero-grid{gap:14px}
  .stage-note{font-size:.75rem}
  .hero-lede{font-size:1rem;margin-bottom:12px}
  .hero-cta .actions{margin-top:14px}
}
.card img{width:100%;max-width:150px}
/* keep the feature rows out of first render so their lazy screens wait until approached */
.defer{content-visibility:auto;contain-intrinsic-size:auto 5200px}
@media (max-width:379px){
  .site-nav .nav-wide{display:none}
  .status{font-size:.6875rem;letter-spacing:.04em;padding-inline:10px 12px;gap:8px}
}
@media (max-width:599px){ .site-header .wrap{flex-wrap:wrap} .site-nav{flex-wrap:wrap;justify-content:flex-end} }
/* Hero: one image of the character doing one movement */
.stage-art.solo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:0}
.stage-art.solo .swing-frame img{max-height:270px;width:auto}
.stage-art.solo .stage-note{text-align:center}
@media (min-width:600px){.stage-art.solo .swing-frame img{max-height:440px}}
@media (min-width:960px){.stage-art.solo .swing-frame img{max-height:560px}}
.design-art{grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr)}

/* ---- Loading and reveal motion (T J 2026-10-11: "smooth and modern") ----
   Only under html.sw-motion, which the inline script in <head> sets when
   motion is allowed; motion.js marks blocks below the fold. Opacity and
   transform, plus the curtain's clip. No JS and reduced motion see the
   finished page. */

/* First page of a visit: a paper curtain holds the crest while a brass line
   draws under it, then lifts. Pure CSS, so it always clears (1.5 s) and
   never takes a tap (pointer-events off). */
html.sw-intro body::before{content:"";position:fixed;inset:0;z-index:100;background:var(--paper);pointer-events:none;animation:sw-curtain .75s var(--ease-reveal) .8s both}
html.sw-intro body::after{content:"";position:fixed;left:50%;top:50%;z-index:101;width:96px;height:120px;margin:-60px 0 0 -48px;pointer-events:none;
  background:url(../img/brand/crest-240.webp) center top/96px 96px no-repeat,linear-gradient(var(--brass),var(--brass)) center bottom/0 2px no-repeat;
  animation:sw-loader 1.1s var(--ease-reveal) both}
@keyframes sw-curtain{to{transform:translateY(-100%)}}
@keyframes sw-loader{
  0%{opacity:0;transform:translateY(10px) scale(.94)}
  30%{opacity:1;transform:none;background-size:96px 96px,0 2px}
  70%{opacity:1;transform:none;background-size:96px 96px,72px 2px}
  100%{opacity:0;transform:translateY(-24px);background-size:96px 96px,72px 2px}}

/* With the curtain up, the hero waits for it before playing. */
html.sw-intro .hero .d1{animation-delay:.95s}html.sw-intro .hero .d2{animation-delay:1.05s}
html.sw-intro .hero .d3{animation-delay:1.17s}html.sw-intro .hero .d4{animation-delay:1.29s}
html.sw-intro .hero .d5{animation-delay:1.41s}
html.sw-intro .hero .tagline-line{animation-delay:1.05s}
html.sw-intro .stage-art.solo .swing-frame,html.sw-intro .hero .swing-frame{animation-delay:1.1s}
html.sw-intro .status::before{animation-delay:2.1s}
html.sw-intro .stage-art.solo .stage-note{animation-delay:1.55s}
html.sw-intro .hero .motto{animation-delay:1.5s}
html.sw-intro .site-header .wrap{animation:sw-drop .7s var(--ease-reveal) .9s both}

@media (prefers-reduced-motion:no-preference){
  html.sw-motion .site-header .wrap{animation:sw-drop .7s var(--ease-reveal) both}
  html.sw-intro .site-header .wrap{animation-delay:.9s}

  /* Pages without a hero (policies, the portfolio) rise in once on load. */
  html.sw-motion .policy main,html.sw-motion main.section > .wrap{animation:sw-rise-in .9s var(--ease-reveal) .12s both}
  html.sw-intro .policy main,html.sw-intro main.section > .wrap{animation-delay:1s}

  /* The hero figure rises out of a clip, like the Systems headlines. */
  @keyframes sw-figure-in{from{opacity:0;transform:translateY(28px) scale(.97);clip-path:inset(18% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}

  /* Scroll reveals: blocks rise and settle, headings open from the
     baseline, each screenshot lifts in with a slight turn. Items arriving
     together cascade 90 ms apart (motion.js). */
  html.sw-motion .rv,html.sw-motion .rv-head,html.sw-motion .rv-phone{transition:opacity .9s var(--ease-reveal),transform .9s var(--ease-reveal),clip-path .9s var(--ease-reveal)}
  html.sw-motion .rv{opacity:0;transform:translateY(28px)}
  html.sw-motion .rv-head{opacity:0;transform:translateY(.45em);clip-path:inset(0 0 70% 0)}
  html.sw-motion .rv-phone{opacity:0;transform:translateY(64px) rotate(-2.5deg) scale(.95)}
  html.sw-motion .rv.in,html.sw-motion .rv-head.in,html.sw-motion .rv-phone.in{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}

  /* Screens fade up as they load instead of popping in. */
  html.sw-motion img.img-wait{opacity:0;transition:opacity .6s var(--ease)}
  html.sw-motion img.img-wait.img-in{opacity:1}

  /* Buttons answer the pointer. */
  .btn{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(26,26,26,.45)}
  .btn:active{transform:translateY(0);box-shadow:none}
}
@keyframes sw-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media print{html.sw-motion .rv,html.sw-motion .rv-head,html.sw-motion .rv-phone,html.sw-motion img.img-wait{opacity:1!important;transform:none!important;clip-path:none!important}html.sw-intro body::before,html.sw-intro body::after{display:none}}